diff --git a/field/harness.ts b/field/harness.ts
index 61610c57d5..cbfc42c801 100644
--- a/field/harness.ts
+++ b/field/harness.ts
@@ -30,6 +30,6 @@ export class FieldHarness extends Harness<Field> {
   protected override async getInteractiveElement() {
     await this.element.updateComplete;
     return (this.element.querySelector(':not([slot])') ||
-            this.element.renderRoot.querySelector('.md3-field')) as HTMLElement;
+            this.element.renderRoot.querySelector('.field')) as HTMLElement;
   }
 }
diff --git a/field/lib/_content.scss b/field/lib/_content.scss
index ff12db3cc4..8ca2470fce 100644
--- a/field/lib/_content.scss
+++ b/field/lib/_content.scss
@@ -3,9 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 // go/keep-sorted start
 @use 'sass:math';
 // go/keep-sorted end
@@ -22,9 +19,9 @@ $_visible-duration: math.round(math.div($_label-duration * 5, 9));
 $_enter-delay: $_label-duration - $_visible-duration;
 
 @mixin styles() {
-  .md3-field__start,
-  .md3-field__middle,
-  .md3-field__end {
+  .start,
+  .middle,
+  .end {
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -34,12 +31,12 @@ $_enter-delay: $_label-duration - $_visible-duration;
     position: relative;
   }
 
-  .md3-field__start,
-  .md3-field__end {
+  .start,
+  .end {
     justify-content: center;
   }
 
-  .md3-field__middle {
+  .middle {
     // The container of the field aligns sections by "center". Only the middle
     // section opts in to baseline alignment.
     //
@@ -51,7 +48,7 @@ $_enter-delay: $_label-duration - $_visible-duration;
     flex: 1;
   }
 
-  .md3-field__content {
+  .content {
     display: flex;
     flex: 1;
     opacity: 0;
@@ -60,55 +57,55 @@ $_enter-delay: $_label-duration - $_visible-duration;
     // `currentColor` to inherit this property.
     color: var(--_content-color);
 
-    .md3-field--no-label &,
-    .md3-field--focused &,
-    .md3-field--populated & {
+    .no-label &,
+    .focused &,
+    .populated & {
       opacity: 1;
       transition-delay: $_enter-delay;
     }
   }
 
-  .md3-field--disabled {
-    &.md3-field--no-label,
-    &.md3-field--focused,
-    &.md3-field--populated {
-      .md3-field__content {
+  .disabled {
+    &.no-label,
+    &.focused,
+    &.populated {
+      .content {
         opacity: var(--_disabled-content-opacity);
       }
     }
   }
 
   :hover {
-    .md3-field__content {
+    .content {
       color: var(--_hover-content-color);
     }
   }
 
-  .md3-field--focused {
-    .md3-field__content {
+  .focused {
+    .content {
       color: var(--_focus-content-color);
     }
   }
 
-  .md3-field--disabled {
-    .md3-field__content {
+  .disabled {
+    .content {
       color: var(--_disabled-content-color);
     }
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__content {
+  .error:not(.disabled) {
+    .content {
       color: var(--_error-content-color);
     }
 
     &:hover {
-      .md3-field__content {
+      .content {
         color: var(--_error-hover-content-color);
       }
     }
 
-    &.md3-field--focused {
-      .md3-field__content {
+    &.focused {
+      .content {
         color: var(--_error-focus-content-color);
       }
     }
diff --git a/field/lib/_filled-field.scss b/field/lib/_filled-field.scss
index 45c06cac76..d007f1fe99 100644
--- a/field/lib/_filled-field.scss
+++ b/field/lib/_filled-field.scss
@@ -3,9 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 // go/keep-sorted start
 @use 'sass:map';
 // go/keep-sorted end
@@ -44,7 +41,7 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__container {
+  .container {
     border-start-start-radius: var(--_container-shape-start-start);
     border-start-end-radius: var(--_container-shape-start-end);
     border-end-end-radius: var(--_container-shape-end-end);
@@ -79,12 +76,12 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__label--floating {
+  .label--floating {
     position: absolute;
     top: 0;
   }
 
-  .md3-field__state-layer {
+  .state-layer {
     border-radius: inherit;
     height: 100%;
     position: absolute;
@@ -92,12 +89,12 @@ $_animation-duration: 150ms;
     visibility: hidden;
     z-index: -1;
 
-    .md3-field:not(.md3-field--disabled):hover & {
+    .field:not(.disabled):hover & {
       visibility: visible;
     }
   }
 
-  .md3-field__active-indicator {
+  .active-indicator {
     // Prevent click events on the indicator element since it has no width and
     // causes bugs when handled by the foundation for updating transform-origin.
     inset: auto 0 0 0;
@@ -130,7 +127,7 @@ $_animation-duration: 150ms;
         transform 0s ease $_animation-duration;
     }
 
-    .md3-field--focused & {
+    .focused & {
       &::after {
         opacity: 1;
         transform: scaleX(1);
@@ -139,78 +136,78 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field:not(.md3-field--with-start) {
-    .md3-field__start {
+  .field:not(.with-start) {
+    .start {
       padding-inline-start: var(--_container-padding-horizontal);
     }
   }
 
-  .md3-field:not(.md3-field--with-end) {
-    .md3-field__end {
+  .field:not(.with-end) {
+    .end {
       padding-inline-end: var(--_container-padding-horizontal);
     }
   }
 
-  .md3-field:not(.md3-field--no-label) {
-    .md3-field__container {
+  .field:not(.no-label) {
+    .container {
       padding-bottom: var(--_with-label-container-padding-vertical);
       padding-top: var(--_with-label-container-padding-vertical);
     }
 
-    .md3-field__middle {
+    .middle {
       padding-top: var(--_label-text-populated-line-height);
     }
   }
 
   :hover {
-    .md3-field__active-indicator::before {
+    .active-indicator::before {
       border-bottom-color: var(--_hover-active-indicator-color);
       border-bottom-width: var(--_hover-active-indicator-height);
     }
 
-    .md3-field__state-layer {
+    .state-layer {
       background: var(--_hover-state-layer-color);
       opacity: var(--_hover-state-layer-opacity);
     }
   }
 
   // Focus is on a separate element and does not need a focus selector
-  .md3-field__active-indicator::after {
+  .active-indicator::after {
     border-bottom-color: var(--_focus-active-indicator-color);
     border-bottom-width: var(--_focus-active-indicator-height);
   }
 
-  .md3-field--disabled {
-    .md3-field__active-indicator::before {
+  .disabled {
+    .active-indicator::before {
       border-bottom-color: var(--_disabled-active-indicator-color);
       border-bottom-width: var(--_disabled-active-indicator-height);
       opacity: var(--_disabled-active-indicator-opacity);
     }
 
-    .md3-field__container::before {
+    .container::before {
       background: var(--_disabled-container-color);
       opacity: var(--_disabled-container-opacity);
     }
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__active-indicator::before {
+  .error:not(.disabled) {
+    .active-indicator::before {
       border-bottom-color: var(--_error-active-indicator-color);
     }
 
     &:hover {
-      .md3-field__active-indicator::before {
+      .active-indicator::before {
         border-bottom-color: var(--_error-hover-active-indicator-color);
       }
 
-      .md3-field__state-layer {
+      .state-layer {
         background: var(--_error-hover-state-layer-color);
         opacity: var(--_error-hover-state-layer-opacity);
       }
     }
 
     // Focus is on a separate element and does not need a focus selector
-    .md3-field__active-indicator::after {
+    .active-indicator::after {
       border-bottom-color: var(--_error-focus-active-indicator-color);
     }
   }
diff --git a/field/lib/_label.scss b/field/lib/_label.scss
index fd0c3b6429..0519d8b215 100644
--- a/field/lib/_label.scss
+++ b/field/lib/_label.scss
@@ -7,11 +7,8 @@
 @use '../../sass/typography';
 // go/keep-sorted end
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @mixin styles() {
-  .md3-field__label {
+  .label {
     color: var(--_label-text-color);
     overflow: hidden;
     max-width: 100%;
@@ -38,7 +35,7 @@
     );
   }
 
-  .md3-field__label--resting {
+  .label--resting {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -53,7 +50,7 @@
     );
   }
 
-  .md3-field__label--floating {
+  .label--floating {
     @include typography.theme-styles(
       (
         size: var(--_label-text-populated-size),
@@ -62,51 +59,51 @@
     );
   }
 
-  .md3-field__label--hidden {
+  .label--hidden {
     opacity: 0;
   }
 
-  .md3-field--no-label {
-    .md3-field__label {
+  .no-label {
+    .label {
       display: none;
     }
   }
 
   :hover {
-    .md3-field__label {
+    .label {
       color: var(--_hover-label-text-color);
     }
   }
 
-  .md3-field--focused {
-    .md3-field__label {
+  .focused {
+    .label {
       color: var(--_focus-label-text-color);
     }
   }
 
-  .md3-field--disabled {
-    .md3-field__label {
+  .disabled {
+    .label {
       color: var(--_disabled-label-text-color);
 
-      &:not(.md3-field__label--hidden) {
+      &:not(.label--hidden) {
         opacity: var(--_disabled-label-text-opacity);
       }
     }
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__label {
+  .error:not(.disabled) {
+    .label {
       color: var(--_error-label-text-color);
     }
 
     &:hover {
-      .md3-field__label {
+      .label {
         color: var(--_error-hover-label-text-color);
       }
     }
 
-    &.md3-field--focused {
-      .md3-field__label {
+    &.focused {
+      .label {
         color: var(--_error-focus-label-text-color);
       }
     }
diff --git a/field/lib/_outlined-field.scss b/field/lib/_outlined-field.scss
index 3d4da7cc70..cbdcc5565c 100644
--- a/field/lib/_outlined-field.scss
+++ b/field/lib/_outlined-field.scss
@@ -3,9 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 // go/keep-sorted start
 @use 'sass:map';
 // go/keep-sorted end
@@ -43,7 +40,7 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__outline {
+  .outline {
     border-start-start-radius: var(--_container-shape-start-start);
     border-start-end-radius: var(--_container-shape-start-end);
     border-end-end-radius: var(--_container-shape-end-end);
@@ -58,10 +55,10 @@ $_animation-duration: 150ms;
     width: 100%;
   }
 
-  .md3-field__outline-start,
-  .md3-field__outline-panel-inactive,
-  .md3-field__outline-panel-active,
-  .md3-field__outline-end {
+  .outline-start,
+  .outline-panel-inactive,
+  .outline-panel-active,
+  .outline-end {
     // ::before is inactive border, ::after is active border. Borders are
     // absolutely positioned within their elements.
     &::before,
@@ -73,8 +70,8 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__outline-start,
-  .md3-field__outline-end {
+  .outline-start,
+  .outline-end {
     border: inherit;
     border-radius: inherit;
     box-sizing: border-box;
@@ -91,14 +88,14 @@ $_animation-duration: 150ms;
       transition: animation.standard(opacity, $_animation-duration);
     }
 
-    .md3-field--focused & {
+    .focused & {
       &::after {
         opacity: 1;
       }
     }
   }
 
-  .md3-field__outline-start {
+  .outline-start {
     &::before,
     &::after {
       border-inline-start-style: solid;
@@ -111,7 +108,7 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__outline-end {
+  .outline-end {
     flex-grow: 1;
     margin-inline-start: calc(-1 * var(--_outline-label-padding));
 
@@ -126,7 +123,7 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__outline-notch {
+  .outline-notch {
     align-items: flex-start;
     border: inherit;
     display: flex;
@@ -136,13 +133,13 @@ $_animation-duration: 150ms;
     padding: 0 var(--_outline-label-padding);
     position: relative;
 
-    .md3-field--no-label & {
+    .no-label & {
       display: none;
     }
   }
 
-  .md3-field__outline-panel-inactive,
-  .md3-field__outline-panel-active {
+  .outline-panel-inactive,
+  .outline-panel-active {
     border: inherit;
     border-bottom-style: solid;
     inset: 0;
@@ -169,8 +166,8 @@ $_animation-duration: 150ms;
       transform-origin: top right;
     }
 
-    .md3-field--populated &,
-    .md3-field--focused & {
+    .populated &,
+    .focused & {
       &::before,
       &::after {
         transform: scaleX(0);
@@ -178,16 +175,16 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__outline-panel-active {
+  .outline-panel-active {
     opacity: 0;
     transition: animation.standard(opacity, $_animation-duration);
 
-    .md3-field--focused & {
+    .focused & {
       opacity: 1;
     }
   }
 
-  .md3-field__label--floating {
+  .label--floating {
     // Center the label within the outline stroke
     transform: translateY(calc(-100% + var(--_label-text-padding-bottom)));
   }
@@ -205,97 +202,97 @@ $_animation-duration: 150ms;
     var(--_container-shape-end-end)
   );
 
-  .md3-field__outline-start,
-  .md3-field:not(.md3-field--with-start) .md3-field__start {
+  .outline-start,
+  .field:not(.with-start) .start {
     padding-inline-start: max(
       var(--_container-padding-horizontal),
       $shape-start + var(--_outline-label-padding)
     );
   }
 
-  .md3-field:not(.md3-field--with-end) {
-    .md3-field__end {
+  .field:not(.with-end) {
+    .end {
       padding-inline-end: max(var(--_container-padding-horizontal), $shape-end);
     }
   }
 
-  .md3-field__outline-start::before,
-  .md3-field__outline-end::before,
-  .md3-field__outline-panel-inactive,
-  .md3-field__outline-panel-inactive::before,
-  .md3-field__outline-panel-inactive::after {
+  .outline-start::before,
+  .outline-end::before,
+  .outline-panel-inactive,
+  .outline-panel-inactive::before,
+  .outline-panel-inactive::after {
     border-width: var(--_outline-width);
   }
 
   // States
 
   :hover {
-    .md3-field__outline {
+    .outline {
       border-color: var(--_hover-outline-color);
       color: var(--_hover-outline-color); // Needed for Firefox HCM
     }
 
-    .md3-field__outline-start::before,
-    .md3-field__outline-end::before,
-    .md3-field__outline-panel-inactive,
-    .md3-field__outline-panel-inactive::before,
-    .md3-field__outline-panel-inactive::after {
+    .outline-start::before,
+    .outline-end::before,
+    .outline-panel-inactive,
+    .outline-panel-inactive::before,
+    .outline-panel-inactive::after {
       border-width: var(--_hover-outline-width);
     }
   }
 
-  .md3-field--focused {
-    .md3-field__outline {
+  .focused {
+    .outline {
       border-color: var(--_focus-outline-color);
       color: var(--_focus-outline-color); // Needed for Firefox HCM
     }
   }
 
-  .md3-field__outline-start::after,
-  .md3-field__outline-end::after,
-  .md3-field__outline-panel-active,
-  .md3-field__outline-panel-active::before,
-  .md3-field__outline-panel-active::after {
+  .outline-start::after,
+  .outline-end::after,
+  .outline-panel-active,
+  .outline-panel-active::before,
+  .outline-panel-active::after {
     border-width: var(--_focus-outline-width);
   }
 
-  .md3-field--disabled {
-    .md3-field__outline {
+  .disabled {
+    .outline {
       border-color: var(--_disabled-outline-color);
       color: var(--_disabled-outline-color); // Needed for Firefox HCM
     }
 
-    .md3-field__outline-start,
-    .md3-field__outline-end,
-    .md3-field__outline-panel-inactive {
+    .outline-start,
+    .outline-end,
+    .outline-panel-inactive {
       opacity: var(--_disabled-outline-opacity);
     }
 
-    .md3-field__outline-start::before,
-    .md3-field__outline-end::before,
-    .md3-field__outline-panel-inactive,
-    .md3-field__outline-panel-inactive::before,
-    .md3-field__outline-panel-inactive::after {
+    .outline-start::before,
+    .outline-end::before,
+    .outline-panel-inactive,
+    .outline-panel-inactive::before,
+    .outline-panel-inactive::after {
       border-width: var(--_disabled-outline-width);
     }
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__outline {
+  .error:not(.disabled) {
+    .outline {
       border-color: var(--_error-outline-color);
       color: var(--_error-outline-color); // Needed for Firefox HCM
     }
 
     &:hover {
-      .md3-field__outline {
+      .outline {
         border-color: var(--_error-hover-outline-color);
         // Needed for Firefox HCM
         color: var(--_error-hover-outline-color);
       }
     }
 
-    &.md3-field--focused {
-      .md3-field__outline {
+    &.focused {
+      .outline {
         border-color: var(--_error-focus-outline-color);
         // Needed for Firefox HCM
         color: var(--_error-focus-outline-color);
diff --git a/field/lib/_shared.scss b/field/lib/_shared.scss
index ef4a45cc5e..fe88221f5a 100644
--- a/field/lib/_shared.scss
+++ b/field/lib/_shared.scss
@@ -3,9 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 // go/keep-sorted start
 @use 'sass:map';
 // go/keep-sorted end
@@ -22,7 +19,7 @@
     display: inline-flex;
   }
 
-  .md3-field {
+  .field {
     display: inline-flex;
     flex: 1;
     flex-direction: column;
@@ -31,7 +28,7 @@
     writing-mode: horizontal-tb;
   }
 
-  .md3-field__container {
+  .container {
     align-items: center;
     box-sizing: border-box;
     display: flex;
@@ -42,24 +39,24 @@
     position: relative;
   }
 
-  .md3-field--disabled {
+  .disabled {
     pointer-events: none;
   }
 
   // TODO(b/239188049): remove when layout tokens are ready
-  .md3-field--with-start .md3-field__start,
-  .md3-field--with-end .md3-field__end {
+  .with-start .start,
+  .with-end .end {
     min-width: 48px;
   }
 
-  .md3-field--with-start {
-    .md3-field__start {
+  .with-start {
+    .start {
       margin-inline-end: 4px;
     }
   }
 
-  .md3-field--with-end {
-    .md3-field__end {
+  .with-end {
+    .end {
       margin-inline-start: 4px;
     }
   }
diff --git a/field/lib/_supporting-text.scss b/field/lib/_supporting-text.scss
index c11c875d8c..24989d1aa9 100644
--- a/field/lib/_supporting-text.scss
+++ b/field/lib/_supporting-text.scss
@@ -3,15 +3,12 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 // go/keep-sorted start
 @use '../../sass/typography';
 // go/keep-sorted end
 
 @mixin styles() {
-  .md3-field__supporting-text {
+  .supporting-text {
     color: var(--_supporting-text-color);
     display: flex;
     justify-content: space-between;
@@ -28,8 +25,8 @@
     );
   }
 
-  .md3-field__supporting-text-start,
-  .md3-field__supporting-text-end {
+  .supporting-text-start,
+  .supporting-text-end {
     // Can't be an inline display element (<span>) for padding-top to work.
     display: flex;
 
@@ -40,44 +37,44 @@
     }
   }
 
-  .md3-field__supporting-text-end {
+  .supporting-text-end {
     ::slotted(:not(:empty)) {
       padding-inline-start: var(--_supporting-text-padding);
     }
   }
 
   :hover {
-    .md3-field__supporting-text {
+    .supporting-text {
       color: var(--_hover-supporting-text-color);
     }
   }
 
-  .md3-field--focus {
-    .md3-field__supporting-text {
+  .focus {
+    .supporting-text {
       color: var(--_focus-supporting-text-color);
     }
   }
 
-  .md3-field--disabled {
-    .md3-field__supporting-text {
+  .disabled {
+    .supporting-text {
       color: var(--_disabled-supporting-text-color);
       opacity: var(--_disabled-supporting-text-opacity);
     }
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__supporting-text {
+  .error:not(.disabled) {
+    .supporting-text {
       color: var(--_error-supporting-text-color);
     }
 
     &:hover {
-      .md3-field__supporting-text {
+      .supporting-text {
         color: var(--_error-hover-supporting-text-color);
       }
     }
 
-    &.md3-field--focus {
-      .md3-field__supporting-text {
+    &.focus {
+      .supporting-text {
         color: var(--_error-focus-supporting-text-color);
       }
     }
diff --git a/field/lib/field.ts b/field/lib/field.ts
index 142c5100f9..304a80752f 100644
--- a/field/lib/field.ts
+++ b/field/lib/field.ts
@@ -33,9 +33,9 @@ export class Field extends LitElement {
 
   @state() private isAnimating = false;
   private readonly labelAnimationSignal = createAnimationSignal();
-  @queryAsync('.md3-field__label--floating')
+  @queryAsync('.label--floating')
   private readonly floatingLabelEl!: Promise<HTMLElement>;
-  @queryAsync('.md3-field__label--resting')
+  @queryAsync('.label--resting')
   private readonly restingLabelEl!: Promise<HTMLElement>;
 
   protected override update(props: PropertyValues<Field>) {
@@ -58,27 +58,27 @@ export class Field extends LitElement {
 
   protected override render(): TemplateResult {
     const classes = {
-      'md3-field--disabled': this.disabled,
-      'md3-field--error': this.error,
-      'md3-field--focused': this.focused,
-      'md3-field--with-start': this.hasStart,
-      'md3-field--with-end': this.hasEnd,
-      'md3-field--populated': this.populated,
-      'md3-field--required': this.required,
-      'md3-field--no-label': !this.label,
+      'disabled': this.disabled,
+      'error': this.error,
+      'focused': this.focused,
+      'with-start': this.hasStart,
+      'with-end': this.hasEnd,
+      'populated': this.populated,
+      'required': this.required,
+      'no-label': !this.label,
     };
 
     return html`
-      <span class="md3-field ${classMap(classes)}">
-        <span class="md3-field__container">
+      <span class="field ${classMap(classes)}">
+        <span class="container">
           ${this.renderContainerContents()}
         </span>
 
-        <span class="md3-field__supporting-text">
-          <span class="md3-field__supporting-text-start">
+        <span class="supporting-text">
+          <span class="supporting-text-start">
             <slot name="supporting-text"></slot>
           </span>
-          <span class="md3-field__supporting-text-end">
+          <span class="supporting-text-end">
             <slot name="supporting-text-end"></slot>
           </span>
         </span>
@@ -88,11 +88,11 @@ export class Field extends LitElement {
 
   protected renderContainerContents() {
     return html`
-      <span class="md3-field__start">
+      <span class="start">
         <slot name="start"></slot>
       </span>
-      <span class="md3-field__middle">${this.renderMiddleContents()}</span>
-      <span class="md3-field__end">
+      <span class="middle">${this.renderMiddleContents()}</span>
+      <span class="end">
         <slot name="end"></slot>
       </span>
     `;
@@ -100,7 +100,7 @@ export class Field extends LitElement {
 
   protected renderMiddleContents() {
     return html`
-      <span class="md3-field__content"><slot></slot></span>
+      <span class="content"><slot></slot></span>
     `;
   }
 
@@ -124,9 +124,9 @@ export class Field extends LitElement {
     }
 
     const classes = {
-      'md3-field__label--hidden': !visible,
-      'md3-field__label--floating': isFloating,
-      'md3-field__label--resting': !isFloating,
+      'label--hidden': !visible,
+      'label--floating': isFloating,
+      'label--resting': !isFloating,
     };
 
     let labelText = this.label ?? '';
@@ -134,7 +134,7 @@ export class Field extends LitElement {
     labelText += this.required && labelText ? '*' : '';
 
     return html`
-      <span class="md3-field__label ${classMap(classes)}"
+      <span class="label ${classMap(classes)}"
         aria-hidden=${!visible}
       >${labelText}</span>
     `;
diff --git a/field/lib/field_test.ts b/field/lib/field_test.ts
index 4d9f639918..58334fa173 100644
--- a/field/lib/field_test.ts
+++ b/field/lib/field_test.ts
@@ -23,8 +23,7 @@ declare global {
 @customElement('md-test-field')
 class TestField extends Field {
   get labelText() {
-    return this.renderRoot.querySelector('.md3-field__label')?.textContent ??
-        '';
+    return this.renderRoot.querySelector('.label')?.textContent ?? '';
   }
 
   // Ensure floating/resting labels are both rendered
@@ -106,7 +105,7 @@ describe('Field', () => {
            // Assertion.
            expect(floatingLabel.classList)
                .withContext('should display resting label for animation')
-               .not.toContain('md3-field__label--hidden');
+               .not.toContain('label--hidden');
          });
 
       it('should update visible label type to resting immediately when resting',
@@ -120,7 +119,7 @@ describe('Field', () => {
            // Assertion.
            expect(restingLabel.classList)
                .withContext('should display resting label for animation')
-               .not.toContain('md3-field__label--hidden');
+               .not.toContain('label--hidden');
          });
 
       it('should update visible label type after floating animation ends',
@@ -139,7 +138,7 @@ describe('Field', () => {
            // Assertion.
            expect(floatingLabel.classList)
                .withContext('visible label should be floating after focusing')
-               .not.toContain('md3-field__label--hidden');
+               .not.toContain('label--hidden');
          });
 
       it('should update visible label type after resting animation ends',
@@ -158,7 +157,7 @@ describe('Field', () => {
            // Assertion.
            expect(restingLabel.classList)
                .withContext('visible label should be resting after unfocusing')
-               .not.toContain('md3-field__label--hidden');
+               .not.toContain('label--hidden');
          });
 
       it('should animate label when focused changes', async () => {
@@ -211,7 +210,7 @@ describe('Field', () => {
            expect(floatingLabel.classList)
                .withContext(
                    'focusing should still set visible label type to floating')
-               .toContain('md3-field__label--hidden');
+               .toContain('label--hidden');
 
            // Test case.
            await harness.blur();
@@ -220,7 +219,7 @@ describe('Field', () => {
            expect(floatingLabel.classList)
                .withContext(
                    'unfocusing should still set visible label type to resting')
-               .not.toContain('md3-field__label--hidden');
+               .not.toContain('label--hidden');
          });
 
       it('should not animate if focusing a populated field', async () => {
diff --git a/field/lib/filled-field.ts b/field/lib/filled-field.ts
index 696da0e763..56ee0b2caf 100644
--- a/field/lib/filled-field.ts
+++ b/field/lib/filled-field.ts
@@ -35,9 +35,9 @@ export class FilledField extends Field {
   protected override renderContainerContents() {
     const strokeStyle = {transformOrigin: this.strokeTransformOrigin};
     return html`
-      <span class="md3-field__state-layer"></span>
+      <span class="state-layer"></span>
       ${super.renderContainerContents()}
-      <span class="md3-field__active-indicator"
+      <span class="active-indicator"
         style="${styleMap(strokeStyle)}"></span>
     `;
   }
diff --git a/field/lib/filled-field_test.ts b/field/lib/filled-field_test.ts
index 610d9bbce0..0f13de52f7 100644
--- a/field/lib/filled-field_test.ts
+++ b/field/lib/filled-field_test.ts
@@ -23,8 +23,7 @@ declare global {
 @customElement('md-test-filled-field')
 class TestFilledField extends FilledField {
   get strokeTransformOriginProp() {
-    const element =
-        this.renderRoot.querySelector('.md3-field__active-indicator');
+    const element = this.renderRoot.querySelector('.active-indicator');
     if (!element) {
       return '';
     }
diff --git a/field/lib/outlined-field.ts b/field/lib/outlined-field.ts
index 293ba8fede..39a50e6a07 100644
--- a/field/lib/outlined-field.ts
+++ b/field/lib/outlined-field.ts
@@ -14,14 +14,14 @@ import {Field} from './field.js';
 export class OutlinedField extends Field {
   protected override renderContainerContents() {
     return html`
-      <span class="md3-field__outline">
-        <span class="md3-field__outline-start"></span>
-        <span class="md3-field__outline-notch">
-          <span class="md3-field__outline-panel-inactive"></span>
-          <span class="md3-field__outline-panel-active"></span>
+      <span class="outline">
+        <span class="outline-start"></span>
+        <span class="outline-notch">
+          <span class="outline-panel-inactive"></span>
+          <span class="outline-panel-active"></span>
           ${this.renderFloatingLabel()}
         </span>
-        <span class="md3-field__outline-end"></span>
+        <span class="outline-end"></span>
       </span>
       ${super.renderContainerContents()}
     `;