material-inspired-component-library 8.1.0 → 9.0.0

package/components/stepper/index.scss

@@ -19,24 +19,16 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/statelayer';
 
 @include statelayer.token('disabled-state-layer-opacity');
 
-:root {
-    --md-sys-stepper-counter-style: decimal;
-    --md-sys-stepper-dot-size: 12px;
-}
-body {
-    --md-sys-stepper-dot-done-color: var(--md-sys-color-tertiary-container, blue);
-}
-
 .micl-stepper {
-    --md-sys-stepper-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
-    --md-sys-stepper-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
-    --md-sys-stepper-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+    --md-comp-stepper-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
+    --md-comp-stepper-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
+
+    --_dot-size: var(--md-comp-stepper-dot-size, 12px);
 
     box-sizing: border-box;
     display: flex;
@@ -45,28 +37,53 @@ body {
     margin: 0;
 
     .micl-stepper__header {
-        --md-sys-stepper-dot-size: 24px;
+        --_dot-size: var(--md-comp-stepper-header-dot-size, 24px);
 
+        position: relative;
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         margin-inline: -10px;
-        background-image: linear-gradient(90deg, var(--md-sys-divider-color), var(--md-sys-divider-color));
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: 100% 1px;
         counter-reset: dotnumber;
+        anchor-scope: all;
 
         button {
-            background-color: var(--_card-background-color, inherit);
+            // The connector segments and the touch-target overlay are anchored
+            // pseudo-elements: an anchor is only acceptable when it is a
+            // descendant of the positioned element's containing block, so the
+            // buttons must stay static to make the header that containing block.
+            // The unique per-button anchor names are assigned by the stepper script.
+            position: static;
+            anchor-name: var(--micl-stepper-anchor);
             pointer-events: none;
 
+            // The shared touch-target overlay assumes a positioned button;
+            // re-anchor it to this button's box.
+            &::before {
+                inset: auto;
+                inset-block-start: calc(anchor(var(--micl-stepper-anchor) center) - var(--md-sys-target-size, 48px) / 2);
+                inset-inline-start: anchor(var(--micl-stepper-anchor) start);
+                inset-inline-end: anchor(var(--micl-stepper-anchor) end);
+                inline-size: auto;
+            }
+            // The connector line is drawn as one segment per step, spanning only
+            // the real gap between this button and the previous one.
+            &:not(:first-child)::after {
+                content: "";
+                position: absolute;
+                inset-block-start: calc(anchor(var(--micl-stepper-anchor) center) - 0.5px);
+                inset-inline-start: anchor(var(--micl-stepper-prev) end);
+                inset-inline-end: anchor(var(--micl-stepper-anchor) start);
+                block-size: 1px;
+                background-color: var(--md-comp-divider-color, var(--md-sys-color-outline-variant));
+                pointer-events: none;
+            }
             &.micl-stepper__progress--done {
                 pointer-events: inherit;
             }
         }
         .micl-stepper__progress-dot::before {
-            content: counter(dotnumber, var(--md-sys-stepper-counter-style));
+            content: counter(dotnumber, var(--md-comp-stepper-counter-style, decimal));
         }
     }
     &.micl-stepper--nonlinear .micl-stepper__header button {
@@ -88,8 +105,8 @@ body {
             opacity: 0%;
             transform: translateX(100%);
             transition:
-                opacity var(--md-sys-stepper-motion-duration) linear,
-                transform var(--md-sys-stepper-motion-duration) var(--md-sys-stepper-motion-spatial);
+                opacity var(--md-comp-stepper-motion-duration) linear,
+                transform var(--md-comp-stepper-motion-duration) var(--md-comp-stepper-motion-spatial);
 
             &:has(~ .micl-stepper__step[aria-current=step]) {
                 transform: translateX(-100%);
@@ -130,34 +147,36 @@ body {
         column-gap: 4px;
     }
     .micl-stepper__progress-dot {
-        block-size: var(--md-sys-stepper-dot-size);
-        inline-size: var(--md-sys-stepper-dot-size);
-        min-inline-size: var(--md-sys-stepper-dot-size);
-        line-height: var(--md-sys-stepper-dot-size);
-        border-radius: calc(var(--md-sys-stepper-dot-size) / 2);
+        block-size: var(--_dot-size);
+        inline-size: var(--_dot-size);
+        min-inline-size: var(--_dot-size);
+        line-height: var(--_dot-size);
+        border-radius: calc(var(--_dot-size) / 2);
         text-align: center;
-        background-color: var(--md-sys-color-on-surface);
-        color: var(--md-sys-color-surface);
+        background-color: var(--md-comp-stepper-dot-color, var(--md-sys-color-on-surface));
+        color: var(--md-comp-stepper-dot-label-color, var(--md-sys-color-surface));
         opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
         counter-increment: dotnumber 1;
     }
     .micl-stepper__progress--done.micl-stepper__progress-dot,
     .micl-stepper__progress--done .micl-stepper__progress-dot {
-        background-color: var(--md-sys-stepper-dot-done-color);
-        color: var(--md-sys-color-on-tertiary-container);
+        background-color: var(--md-comp-stepper-dot-done-color, var(--md-sys-color-tertiary-container));
+        color: var(--md-comp-stepper-dot-done-label-color, var(--md-sys-color-on-tertiary-container));
         opacity: 100%;
     }
 }
 
-[dir=rtl] {
-    .micl-stepper .micl-stepper__steps .micl-stepper__step {
-        transform: translateX(-100%);
+.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl) {
+    transform: translateX(-100%);
 
-        &:has(~ .micl-stepper__step[aria-current=step]) {
-            transform: translateX(100%);
-        }
-        &[aria-current=step] {
-            transform: translateX(0%);
-        }
+    &:has(~ .micl-stepper__step[aria-current=step]) {
+        transform: translateX(100%);
     }
+    &[aria-current=step] {
+        transform: translateX(0%);
+    }
+}
+
+.micl-stepper__action--hidden, .micl-stepper__step--hidden {
+    display: none !important;
 }

package/components/switch/README.md

@@ -34,38 +34,45 @@ By default, the component displays an icon on the switch handle in both the sele
 
 ```CSS
 #myswitch {
-  --md-sys-switch-unselected-icon: "";
+  --md-comp-switch-unselected-icon: "";
 }
 ```
 To remove the icon in the selected state:
 ```CSS
 #myswitch {
-  --md-sys-switch-selected-icon: "";
+  --md-comp-switch-selected-icon: "";
 }
 ```
 
 A switch can be disabled by adding the `disabled` attribute to the `<input>` element.
 
-The Switch component respects the `dir` global attribute, automatically adjusting its layout for right-to-left (RTL) languages when `dir="rtl"` is applied to an ancestor element.
+The Switch component respects the element's computed direction, automatically adjusting its layout for right-to-left (RTL) languages — whether the `dir` attribute (including `dir="auto"`) is set on the element itself or inherited from an ancestor.
 
 The component applies `cursor: pointer` and the color role **on surface** to the `<label>` element immediately preceding or following the `<input type="checkbox">` with the `micl-switch` class. You are encouraged to customize these CSS settings to match your design system.
 
-## Customizations
-You can customize the appearance of the Switch component by overriding its global CSS variables. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child switches.
-
-| Variable name | Default Value | Description |
-| ------------- | ------------- | ----------- |
-| --md-sys-switch-handle-size | 16px | The diameter of the handle when the switch is "off" |
-| --md-sys-switch-handle-selected-size | 24px | The diameter of the handle when the switch is "on" |
-| --md-sys-switch-handle-pressed-size | 28px | The diameter of the handle when the switch is pressed |
-| --md-sys-switch-outline-width | 2px | The width of the border |
-| --md-sys-switch-target-height | 32px | The height of the track |
-| --md-sys-switch-target-width | 52px | The width of the track |
+## Theming
+Each switch can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. Set them on any appropriate parent element to affect its child switches.
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-switch-track-width` | The width of the track | `52px` |
+| `--md-comp-switch-track-height` | The height of the track | `32px` |
+| `--md-comp-switch-track-outline-width` | The border width of the track | `2px` |
+| `--md-comp-switch-handle-size` | The diameter of the handle when the switch is "off" | `16px` |
+| `--md-comp-switch-selected-handle-size` | The diameter of the handle when the switch is "on" | `24px` |
+| `--md-comp-switch-pressed-handle-size` | The diameter of the handle when the switch is pressed | `28px` |
+| `--md-comp-switch-unselected-track-color` | The track color when the switch is "off" | `--md-sys-color-surface-container-highest` |
+| `--md-comp-switch-unselected-track-outline-color` | The track border color when the switch is "off" | `--md-sys-color-outline` |
+| `--md-comp-switch-unselected-handle-color` | The handle color when the switch is "off" | `--md-sys-color-outline` |
+| `--md-comp-switch-unselected-icon-color` | The icon color when the switch is "off" | `--md-sys-color-surface-container-highest` |
+| `--md-comp-switch-selected-track-color` | The track color when the switch is "on" | `--md-sys-color-primary` |
+| `--md-comp-switch-selected-handle-color` | The handle color when the switch is "on" | `--md-sys-color-on-primary` |
+| `--md-comp-switch-selected-icon-color` | The icon color when the switch is "on" | `--md-sys-color-on-primary-container` |
 
 **Example: Changing the width of the switch**
 
 ```HTML
-<div style="--md-sys-switch-target-width:64px">
+<div style="--md-comp-switch-track-width:64px">
   <input type="checkbox" id="myswitch" class="micl-switch" role="switch">
   <label for="myswitch">Long switch</label>
 </div>

package/components/switch/index.scss

@@ -19,11 +19,11 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
+@use '../checkbox/label';
 
 @include shape.corner('full');
 
@@ -34,81 +34,86 @@
 @include statelayer.token('disabled-state-layer-opacity');
 @include statelayer.token('focus-indicator-thickness');
 
-:root {
-    --md-sys-switch-handle-size: 16px;
-    --md-sys-switch-handle-selected-size: 24px;
-    --md-sys-switch-handle-pressed-size: 28px;
-    --md-sys-switch-outline-width: 2px;
-    --md-sys-switch-target-height: 32px;
-    --md-sys-switch-target-width: 52px;
-}
+$switch: 'input[type=checkbox].micl-switch';
+
+#{$switch} {
+    --md-comp-switch-unselected-icon: "+";
+    --md-comp-switch-selected-icon: "\AC";
+    --md-comp-switch-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
+    --md-comp-switch-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
 
-input[type=checkbox].micl-switch {
-    --md-sys-switch-unselected-icon: "+";
-    --md-sys-switch-selected-icon: "\AC";
-    --md-sys-switch-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
-    --md-sys-switch-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
-    --md-sys-switch-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
+    --_track-width: var(--md-comp-switch-track-width, 52px);
+    --_track-height: var(--md-comp-switch-track-height, 32px);
+    --_track-outline-width: var(--md-comp-switch-track-outline-width, 2px);
+    --_handle-size: var(--md-comp-switch-handle-size, 16px);
+    --_handle-selected-size: var(--md-comp-switch-selected-handle-size, 24px);
+    --_handle-pressed-size: var(--md-comp-switch-pressed-handle-size, 28px);
+    --_layer: var(--md-sys-state-layer-size, 40px);
+    --_target: var(--md-sys-target-size, 48px);
 
     appearance: none;
     position: relative;
-    inline-size: var(--md-sys-switch-target-width);
-    block-size: var(--md-sys-target-size);
+    inline-size: var(--_track-width);
+    block-size: var(--_target);
     margin: 0;
-    border-radius: calc(var(--md-sys-switch-target-height) / 2);
+    border-radius: calc(var(--_track-height) / 2);
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
+    // The track.
     &::before {
         content: "";
         box-sizing: border-box;
         display: block;
-        inline-size: var(--md-sys-switch-target-width);
-        block-size: var(--md-sys-switch-target-height);
-        margin-block: calc((var(--md-sys-target-size, 48px) - var(--md-sys-switch-target-height)) / 2);
-        border: var(--md-sys-switch-outline-width) solid var(--md-sys-color-outline);
+        inline-size: var(--_track-width);
+        block-size: var(--_track-height);
+        margin-block: calc((var(--_target) - var(--_track-height)) / 2);
+        border: var(--_track-outline-width) solid var(--md-comp-switch-unselected-track-outline-color, var(--md-sys-color-outline));
         border-radius: inherit;
-        background-color: var(--md-sys-color-surface-container-highest);
-        transition: background-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
+        background-color: var(--md-comp-switch-unselected-track-color, var(--md-sys-color-surface-container-highest));
+        transition: background-color var(--md-comp-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
     }
+    // The handle: a state-layer-sized box whose transparent border shrinks the painted
+    // content box to the handle size; the icon glyphs are rotated typeface characters,
+    // with their metrics tuned in pixels against a 16px base.
     &::after {
-        content: var(--md-sys-switch-unselected-icon);
+        content: var(--md-comp-switch-unselected-icon);
         box-sizing: border-box;
         position: absolute;
-        inline-size: var(--md-sys-state-layer-size, 40px);
-        block-size: var(--md-sys-state-layer-size, 40px);
+        inline-size: var(--_layer);
+        block-size: var(--_layer);
         inset: 0;
-        inset-inline-start: calc((var(--md-sys-target-size, 48px) - var(--md-sys-state-layer-size, 40px) - 16px) / 2);
+        inset-inline-start: calc((var(--_target) - var(--_layer) - 16px) / 2);
         margin: auto 0;
-        font: 300 16px / 1rem var(--md-ref-typeface-plain);
-        color: var(--md-sys-color-surface-container-highest);
+        font: 300 16px / 16px var(--md-ref-typeface-plain);
+        color: var(--md-comp-switch-unselected-icon-color, var(--md-sys-color-surface-container-highest));
         text-align: center;
-        background-color: var(--md-sys-color-outline);
+        background-color: var(--md-comp-switch-unselected-handle-color, var(--md-sys-color-outline));
         background-clip: content-box;
-        border: calc((var(--md-sys-state-layer-size, 40px) - var(--md-sys-switch-handle-size)) / 2) solid transparent;
+        border: calc((var(--_layer) - var(--_handle-size)) / 2) solid transparent;
         border-radius: var(--md-sys-shape-corner-full);
         transform: rotate(135deg);
         transition:
-            inset-inline-start var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
-            border-width var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
-            line-height var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
-            color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
-            border-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
-            background-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
+            inset-inline-start var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),
+            border-width var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),
+            line-height var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),
+            color var(--md-comp-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
+            border-color var(--md-comp-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
+            background-color var(--md-comp-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
     }
     &:checked {
         &::before {
-            background-color: var(--md-sys-color-primary);
+            background-color: var(--md-comp-switch-selected-track-color, var(--md-sys-color-primary));
         }
         &::after {
-            content: var(--md-sys-switch-selected-icon);
-            inset-inline-start: calc(var(--md-sys-switch-target-width) - ((var(--md-sys-state-layer-size, 40px) + var(--md-sys-target-size, 48px) - 16px) / 2));
-            font-size: 1.6rem;
-            line-height: 1.3rem;
-            letter-spacing: 0.1rem;
-            border: calc((var(--md-sys-state-layer-size, 40px) - var(--md-sys-switch-handle-selected-size)) / 2) solid transparent;
-            color: var(--md-sys-color-on-primary-container);
-            background-color: var(--md-sys-color-on-primary);
+            content: var(--md-comp-switch-selected-icon);
+            inset-inline-start: calc(var(--_track-width) - ((var(--_layer) + var(--_target) - 16px) / 2));
+            font-size: 25.6px;
+            line-height: 20.8px;
+            letter-spacing: 1.6px;
+            border: calc((var(--_layer) - var(--_handle-selected-size)) / 2) solid transparent;
+            color: var(--md-comp-switch-selected-icon-color, var(--md-sys-color-on-primary-container));
+            background-color: var(--md-comp-switch-selected-handle-color, var(--md-sys-color-on-primary));
         }
     }
     &:not(:disabled) {
@@ -142,18 +147,17 @@ input[type=checkbox].micl-switch {
         }
         &:active {
             &::after {
-                line-height: 1.7rem;
-                border: calc((var(--md-sys-state-layer-size, 40px) - var(--md-sys-switch-handle-pressed-size)) / 2) solid transparent;
+                line-height: 27.2px;
+                border: calc((var(--_layer) - var(--_handle-pressed-size)) / 2) solid transparent;
                 background-color: var(--md-sys-color-on-surface-variant);
             }
             &:checked::after {
-                line-height: 1.6rem;
-                border-width: calc((var(--md-sys-state-layer-size, 40px) - var(--md-sys-switch-handle-pressed-size)) / 2);
+                line-height: 25.6px;
+                border-width: calc((var(--_layer) - var(--_handle-pressed-size)) / 2);
                 border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
                 background-color: var(--md-sys-color-primary-container);
             }
             &:not(:checked)::after {
-                inset-inline-start: calc((var(--md-sys-target-size, 48px) - var(--md-sys-state-layer-size, 40px) - 16px) / 2);
                 border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
             }
         }
@@ -180,15 +184,19 @@ input[type=checkbox].micl-switch {
     }
 }
 
-input[type=checkbox].micl-switch:not(:disabled) + label,
-label:has(+ input[type=checkbox].micl-switch:not(:disabled)) {
-    -webkit-tap-highlight-color: transparent;
-    cursor: pointer;
+#{$switch}:not(:disabled) + label,
+label:has(+ #{$switch}:not(:disabled)) {
+    @extend %micl-toggle-label-pointer;
 }
-input[type=checkbox].micl-switch + label,
-label:has(+ input[type=checkbox].micl-switch) {
-    color: var(--md-sys-color-on-surface);
+#{$switch} + label,
+label:has(+ #{$switch}) {
+    @extend %micl-toggle-label;
 }
-[dir=rtl] input[type=checkbox].micl-switch::after {
+#{$switch}:disabled + label,
+label:has(+ #{$switch}:disabled) {
+    @extend %micl-toggle-label-disabled;
+}
+
+#{$switch}:dir(rtl)::after {
     transform: rotate(45deg) scaleY(-1);
 }

package/components/textfield/README.md

@@ -62,11 +62,15 @@ Adding the `micl-textfield--error` class to the text field displays it in an err
 ### Leading Content
 The data-input element can be preceded by various elements:
 
-- **Icon**: Use `micl-textfield__icon-leading` with a (Material Symbols) icon.
+- **Icon**: Use `micl-textfield__icon-leading` with a (Material Symbols) icon. When using a different icon set, the icon element must have `direction: ltr` (Material Symbols sets this itself) for the icons to keep their positions in a right-to-left context.
 
-- **Prefix**: A prefix (e.g., "$", "NOK") can be included to provide additional context. You can customize the spacing by overriding CSS variables:
+- **Prefix**: A prefix (e.g., "$", "NOK") can be included to provide additional context. You can customize the spacing by overriding CSS variables on the text field element:
   ```HTML
-  <span class="micl-textfield__prefix" style="--md-sys-textfield-prefix-space:20px">USD</span>
+  <div class="micl-textfield-filled" style="--md-comp-text-field-prefix-space:20px">
+    ...
+    <span class="micl-textfield__prefix">USD</span>
+    ...
+  </div>
   ```
 
 ### Trailing Content
@@ -74,9 +78,13 @@ The data-input element may be followed by a trailing text or other element:
 
 - **Icon**: Use `micl-textfield__icon-trailing` with a (Material Symbols) icon.
 
-- **Suffix**: A suffix (e.g., "kg", "@gmail.com") can be included to provide additional context. You can customize the spacing by overriding CSS variables:
+- **Suffix**: A suffix (e.g., "kg", "@gmail.com") can be included to provide additional context. You can customize the spacing by overriding CSS variables on the text field element:
   ```HTML
-  <span class="micl-textfield__suffix" style="--md-sys-textfield-suffix-space:10em">@gmail.com</span>
+  <div class="micl-textfield-outlined" style="--md-comp-text-field-suffix-space:10em">
+    ...
+    <span class="micl-textfield__suffix">@gmail.com</span>
+    ...
+  </div>
   ```
 
 ### Supporting Content
@@ -103,6 +111,41 @@ Add a value to the `rows` attribute of the `<textarea>` element to create a text
 </div>
 ```
 
+## Theming
+Each text field can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. Set them on any appropriate parent element to affect its child text fields.
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-text-field-container-height` | The height of the text field (excluding supporting text) | `56px` |
+| `--md-comp-text-field-icon-size` | The size of the leading and trailing icons | `24px` |
+| `--md-comp-text-field-icon-space` | The spacing between an icon and the text field's edge | `12px` |
+| `--md-comp-text-field-input-space` | The inline padding around the input text | `16px` |
+| `--md-comp-text-field-prefix-space` | The width reserved for the prefix | `1em` |
+| `--md-comp-text-field-suffix-space` | The width reserved for the suffix | `1em` |
+| `--md-comp-text-field-input-color` | The text color of the input text | `--md-sys-color-on-surface` |
+| `--md-comp-text-field-input-placeholder-color` | The text color of the placeholder | `--md-sys-color-on-surface-variant` |
+| `--md-comp-text-field-caret-color` | The color of the text cursor | `--md-sys-color-primary` |
+| `--md-comp-text-field-label-color` | The text color of the label | `--md-sys-color-on-surface-variant` |
+| `--md-comp-text-field-focus-label-color` | The text color of the label when focused | `--md-sys-color-primary` |
+| `--md-comp-text-field-supporting-text-color` | The text color of the supporting text and character counter | `--md-sys-color-on-surface-variant` |
+| `--md-comp-text-field-icon-color` | The color of the leading and trailing icons | `--md-sys-color-on-surface-variant` |
+| `--md-comp-filled-text-field-container-color` | The background color of a filled text field | `--md-sys-color-surface-container-highest` |
+| `--md-comp-filled-text-field-active-indicator-color` | The bottom line color of a filled text field | `--md-sys-color-on-surface-variant` |
+| `--md-comp-filled-text-field-focus-active-indicator-color` | The bottom line color of a filled text field when focused | `--md-sys-color-primary` |
+| `--md-comp-outlined-text-field-outline-color` | The outline color of an outlined text field | `--md-sys-color-outline` |
+| `--md-comp-outlined-text-field-focus-outline-color` | The outline color of an outlined text field when focused | `--md-sys-color-primary` |
+
+**Example: Compact text fields with a brand-colored focus indicator**
+
+```HTML
+<form style="--md-comp-text-field-container-height:48px;--md-comp-outlined-text-field-focus-outline-color:var(--md-sys-color-tertiary)">
+  <div class="micl-textfield-outlined">
+    <label for="myfield">Label text</label>
+    <input type="text" id="myfield">
+  </div>
+</form>
+```
+
 ## Compatibility
 This component uses relative RGB colors, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) for details.