@expressivecss/expressive 0.14.1 → 0.15.0

package/dist/types/components/keypad.d.ts

@@ -0,0 +1,34 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+export interface KeypadOptions extends BaseOptions {
+    /**
+     * Called after every key press with the text typed ('7', 'A', ' ') or the
+     * function key's name ('Backspace', 'Enter', 'Shift').
+     * @default null
+     */
+    onKey: ((key: string) => void) | null;
+}
+type Field = HTMLInputElement | HTMLTextAreaElement;
+type Root = Document | ShadowRoot;
+/**
+ * Keypad and keyboard. A `.keypad` or `.keyboard` whose `aria-controls`
+ * names a text field types into it: a key's `value` is inserted at the caret,
+ * and `data-key="Backspace"`, `"Enter"` and `"Shift"` edit, submit and
+ * capitalize. The field receives the same `input` event typing would fire.
+ */
+export declare class Keypad extends Component<KeypadOptions> {
+    /** @internal */
+    _root: Root | null;
+    constructor(el: HTMLElement, options: Partial<KeypadOptions>);
+    static get defaults(): KeypadOptions;
+    static init(el: HTMLElement, options?: Partial<KeypadOptions>): Keypad;
+    static init(els: InitElements<InitElement>, options?: Partial<KeypadOptions>): Keypad[];
+    static getInstance(el: HTMLElement): Keypad;
+    destroy(): void;
+    /** The text field named by `aria-controls`, if there is one. */
+    get target(): Field | null;
+    private _shared;
+    /** @internal */
+    _press(key: HTMLButtonElement): void;
+    private _edit;
+}
+export {};

package/dist/types/components/lightbox.d.ts

@@ -84,11 +84,9 @@ export declare class Lightbox extends Component<LightboxOptions> {
     private _handleMotionChange;
     private _setupEventHandlers;
     private _removeEventHandlers;
-    private _handleLightboxClick;
     private _handleLightboxKeypress;
     private _handleLightboxToggle;
-    private _handleWindowScroll;
-    private _handleWindowResize;
+    private _handleWindowChange;
     private _handleWindowEscape;
     private _makeAncestorsOverflowVisible;
     private _offset;
@@ -96,9 +94,9 @@ export declare class Lightbox extends Component<LightboxOptions> {
     private _animateImageIn;
     private _animateImageOut;
     private _addCaption;
-    private _removeCaption;
     private _addOverlay;
-    private _removeOverlay;
+    private _fadeIn;
+    private _fadeOut;
     /**
      * Open lightbox.
      */

package/dist/types/components/lineChart.d.ts

@@ -15,6 +15,10 @@ export interface LineChartOptions extends BaseOptions {
 export declare const COLORS = 4;
 /** An SVG element with its attributes. */
 export declare function svgNode(name: string, attributes?: Record<string, string>): SVGElement;
+/** A point at a turn clockwise from the top and a distance from the middle, as "x,y". */
+export declare function polarPoint(turn: number, r: number): string;
+/** A series' color number, for its `data-series`. */
+export declare const seriesColor: (i: number) => string;
 export interface Series {
     name: string;
     /** Header cell classes, such as `dashed`. */

package/dist/types/components/menu.d.ts

@@ -146,6 +146,7 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     private _syncSubmenuAria;
     private _handleSubmenuAlign;
     private _alignSubmenu;
+    private _closeSubmenu;
     private _closeSubmenus;
     private _containingSubmenu;
     private _focusedRow;

package/dist/types/components/radialChart.d.ts

@@ -29,7 +29,6 @@ export declare class RadialChart extends LineChart {
     show(index: number): void;
     /** The tooltip sits where the ring's fill ends. */
     protected _place(index: number): void;
-    private _color;
     /** A fraction of the ring as a turn clockwise from the top. */
     private _turn;
     /** For more than one row, a legend of every row with its color and cell. */

package/dist/types/components/registry.d.ts

@@ -51,6 +51,10 @@ export declare const AUTO_INIT_COMPONENTS: {
         component: typeof Components.Particles;
         selector: string;
     };
+    Keypad: {
+        component: typeof Components.Keypad;
+        selector: string;
+    };
     ColumnChart: {
         component: typeof Components.ColumnChart;
         selector: string;

package/dist/types/components/slider.d.ts

@@ -36,6 +36,8 @@ export declare class Slider extends Component<SliderOptions> {
     _isVertical(): boolean;
     _host(): HTMLElement | null;
     _clampDual(): void;
+    /** The input's range, defaulting like the browser does: 0 to 100. */
+    private _bounds;
     _fraction(el: HTMLInputElement): number;
     _sync(): void;
     /**

package/dist/types/components/snackbar.d.ts

@@ -118,6 +118,7 @@ export declare class Snackbar {
      * over, so the movement so far says nothing about what the user wanted.
      */
     static _onDragCancel(e: PointerEvent): void;
+    private _snapBack;
     /**
      * dismiss all snackbars.
      */

package/dist/types/components/tabs.d.ts

@@ -61,6 +61,10 @@ export declare class Tabs extends Component<TabsOptions> {
     _queryTabLinks(): NodeListOf<HTMLAnchorElement>;
     _handleTabClick: (e: MouseEvent) => void;
     _createIndicator(): void;
+    /** Reads both positions before writing either. */
+    private _positionIndicator;
+    /** The panel a link shows, or null for a `target` link or one without a hash. */
+    private _panelFor;
     /**
      * Which tab is current, for the eye and for assistive technology.
      *

package/dist/types/components/timepicker.d.ts

@@ -168,6 +168,7 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     destroy(): void;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
+    private _removeDragListeners;
     _handleInputClick: () => void;
     _handleInputKeydown: (e: KeyboardEvent) => void;
     _handleClockClickStart: (e: PointerEvent) => void;
@@ -194,6 +195,7 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     _buildHoursView(): void;
     _buildHoursTick(i: number, radian: number, radius: number): void;
     _buildMinutesView(): void;
+    private _placeTick;
     _handleAmPmClick: (e: MouseEvent) => void;
     _handleAmPmInteraction: (e: HTMLElement) => void;
     _updateAmPmView(): void;

package/dist/types/modular.d.ts

@@ -5,7 +5,7 @@ export { SideSheets } from './behaviors/sideSheets';
 export { Forms } from './behaviors/forms';
 export { AutoInit } from './components/registry';
 export type { AutoInitOptions } from './components/registry';
-export declare const version = "0.14.1";
+export declare const version = "0.15.0";
 export type * from './components/autocomplete';
 export type * from './components/appBar';
 export type * from './components/buttons';

package/dist/types/plugins/dockedDisplayPlugin.d.ts

@@ -23,6 +23,7 @@ export declare class DockedDisplayPlugin {
     private visible;
     constructor(el: HTMLElement, container: HTMLElement, options: Partial<DockedDisplayPluginOptions>);
     private _handleDocumentClick;
+    private get _transition();
     /**
      * Tears the plugin down. While shown, the document listener holds a
      * reference to this instance - and through it the whole picker subtree - so

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressivecss/expressive",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
   "license": "MIT",
   "author": "BaezFJ <baezdevs@gmail.com>",

package/src/sass/abstracts/_breakpoints.scss

@@ -1,5 +1,4 @@
 @use "sass:map";
-@use "sass:list";
 
 // Material 3 window size classes, expressed as media-query boundaries.
 //

package/src/sass/abstracts/_elevation.scss

@@ -6,7 +6,7 @@
 // only resolves if the extending partial loads the module that defines the
 // class, which forced every component to `@use` a CSS-emitting file and let
 // the dependency graph - not expressive.scss - decide the output order.
-// The `.z-depth-N` classes in base/_global.scss are generated from this map,
+// The `.z-depth-N` classes in utilities/_z-depth.scss are generated from this map,
 // so the class list and the mixin can never drift apart.
 
 $elevations: (

package/src/sass/abstracts/_mixins.scss

@@ -62,52 +62,32 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
 // State layers mix the on-color into the container in oklab; the opacities come
 // from md.sys.state via `state-opacity()`. Filled and tonal have no elevation.
 
-@mixin btn-filled {
-  color: var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary));
-  background-color: var(--md-comp-filled-button-container-color, var(--md-sys-color-primary));
-
+// Shared by filled, tonal, outlined and flat. Elevated also moves z-depth.
+@mixin _btn-states($on, $base) {
   &:hover {
-    background-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-primary) state-opacity("hover"),
-      var(--md-sys-color-primary)
-    );
+    background-color: color-mix(in oklab, #{$on} state-opacity("hover"), #{$base});
   }
 
   &:active,
   &:focus {
-    background-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-primary) state-opacity("focus"),
-      var(--md-sys-color-primary)
-    );
+    background-color: color-mix(in oklab, #{$on} state-opacity("focus"), #{$base});
   }
 
   @include focus-visible();
 }
 
+@mixin btn-filled {
+  color: var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary));
+  background-color: var(--md-comp-filled-button-container-color, var(--md-sys-color-primary));
+
+  @include _btn-states(var(--md-sys-color-on-primary), var(--md-sys-color-primary));
+}
+
 @mixin btn-tonal {
   color: var(--md-sys-color-on-secondary-container);
   background-color: var(--md-sys-color-secondary-container);
 
-  &:hover {
-    background-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-secondary-container) state-opacity("hover"),
-      var(--md-sys-color-secondary-container)
-    );
-  }
-
-  &:active,
-  &:focus {
-    background-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-secondary-container) state-opacity("focus"),
-      var(--md-sys-color-secondary-container)
-    );
-  }
-
-  @include focus-visible();
+  @include _btn-states(var(--md-sys-color-on-secondary-container), var(--md-sys-color-secondary-container));
 }
 
 @mixin btn-elevated {
@@ -138,16 +118,7 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
   // height right.
   border: var(--md-comp-filled-button-outline-width, 1px) solid var(--md-sys-color-outline);
 
-  &:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
-  }
-
-  &:active,
-  &:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
-  }
-
-  @include focus-visible();
+  @include _btn-states(var(--md-sys-color-primary), transparent);
 }
 
 @mixin btn-flat {
@@ -156,16 +127,7 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
   background-color: transparent;
   border-color: transparent;
 
-  &:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
-  }
-
-  &:active,
-  &:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
-  }
-
-  @include focus-visible();
+  @include _btn-states(var(--md-sys-color-primary), transparent);
 }
 
 @mixin btn-disabled {
@@ -174,7 +136,6 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
   background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
   border-color: transparent;
   pointer-events: none;
-  box-shadow: none;
   cursor: default;
 }
 
@@ -234,8 +195,7 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
 ///
 /// Checkboxes and radio buttons have no room for an overlay pseudo-element, so
 /// they grow a `box-shadow` from the control's edge out to the state layer
-/// size. `color-mix()` wants a percentage where the token is a number, hence
-/// the `* 100%`.
+/// size.
 @mixin state-layer-ring($outer, $inner, $color, $state) {
   box-shadow: 0 0 0 calc((#{$outer} - #{$inner}) / 2)
     color-mix(
@@ -367,17 +327,17 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
     margin: $element-top-margin 0 $element-bottom-margin;
     color: var(--md-sys-color-on-surface);
 
-    > figcaption {
-      color: var(--md-sys-color-on-surface-variant);
-      @include typescale("title-small");
-    }
-
     // A table keeps its content size under visually-hidden, so anchor it
     // here rather than at some distant positioned ancestor. A fixed layout
     // holds it to the 1px wide it is given. Its rows still set its height, so
     // it hangs up from the bottom edge, where the overflow cannot scroll.
     position: relative;
 
+    > figcaption {
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("title-small");
+    }
+
     &:has(> .#{$name}-plot) > table {
       @include visually-hidden;
       inset: auto auto 0 0;

package/src/sass/abstracts/_variables.scss

@@ -137,3 +137,13 @@ $icon-button-sizes: (
   "large": (height: 96px, icon: 32px, space: 32px, narrow: 16px, wide: 48px, square: 28px, pressed: 16px, outline: 2px),
   "xlarge": (height: 136px, icon: 40px, space: 48px, narrow: 32px, wide: 72px, square: 28px, pressed: 16px, outline: 3px),
 );
+
+// Material's fast-spatial spring (damping .9, stiffness 1400), sampled into a
+// CSS linear easing. Button groups and keypads both press with it, so the
+// curve lives here once.
+$motion-fast-spatial: linear(
+  0, .056 5%, .1796 10%, .3252 15%, .4675 20%, .5936 25%,
+  .6988 30%, .7828 35%, .8475 40%, .8959 45%, .931 50%,
+  .9559 55%, .973 60%, .9845 65%, .9919 70%, .9965 75%,
+  .9992 80%, 1.0006 85%, 1.0013 90%, 1.0015 95%, 1.0015
+);

package/src/sass/base/_global.scss

@@ -99,9 +99,6 @@ td, th {
 @include bp-down("expanded") {
 
   table.responsive-table {
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
     display: block;
     position: relative;
 
@@ -113,12 +110,12 @@ td, th {
       margin: 0;
       vertical-align: top;
     }
-    th {
-      text-align: left;
-    }
     thead {
       display: block;
       float: left;
+      /* sort out borders */
+      border: 0;
+      border-right: 1px solid var(--md-sys-color-outline-variant);
 
       tr {
         display: block;
@@ -148,16 +145,10 @@ td, th {
     td {
       display: block;
       min-height: 1.25em;
-      text-align: left;
     }
     tr {
       border-bottom: none;
       padding: 0 10px;
     }
-    /* sort out borders */
-    thead {
-      border: 0;
-      border-right: 1px solid var(--md-sys-color-outline-variant);
-    }
   }
 }

package/src/sass/base/_index.scss

@@ -1,6 +1,6 @@
 // Element-level styling: no component classes live here.
 
 @forward "normalize";
-@forward "global";      // z-depth, spacing helpers, positioning, element defaults
+@forward "global";      // element defaults: links, blockquotes, tables
 @forward "typography";
 @forward "grid";        // .container, .row, .s1–.s12 … .xxl1–.xxl12

package/src/sass/components/_badges.scss

@@ -55,14 +55,7 @@
 
 // Child of an icon: sit on the upper trailing corner of the 24dp
 // glyph, even when the <i> is a larger indicator pill.
-:is(
-  i,
-  .material-symbols,
-  .material-symbols-outlined,
-  .material-symbols-rounded,
-  .material-symbols-sharp,
-  .material-icons
-) {
+#{$icon} {
   position: relative;
   overflow: visible;
 

package/src/sass/components/_bar-chart.scss

@@ -250,7 +250,7 @@
   inset-inline: 0;
   height: calc(100% / var(--rows, 1));
   border-radius: var(--md-comp-bar-chart-shape);
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
   translate: 0 -50%;
 }
 

package/src/sass/components/_button-groups.scss

@@ -39,17 +39,6 @@ $_standard-space: (
   "xlarge": 8px,
 );
 
-// md.comp.button.<size>.{container-shape-square, pressed-container-shape}.
-// Common buttons and icon buttons share these numbers, so the group can morph
-// either kind of child through one pair of properties.
-$_item-shapes: (
-  "xsmall": (square: 12px, pressed: 8px),
-  "small": (square: 12px, pressed: 8px),
-  "medium": (square: 16px, pressed: 12px),
-  "large": (square: 28px, pressed: 16px),
-  "xlarge": (square: 28px, pressed: 16px),
-);
-
 // md.comp.button-group.connected.<size>.{inner-corner, pressed.inner-corner}.
 // The live M3 measurement is authoritative for XS (4px). Material Web 34.0.21
 // still emits 8px there; S and M agree at 8px.
@@ -65,10 +54,17 @@ $_connected-corners: (
   @include z-depth("0");
   color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   pointer-events: none;
-  box-shadow: none;
   cursor: default;
 }
 
+// Toggle colors. The label and icon take the state-layer color.
+@mixin _toggle-colors($container, $state) {
+  --_toggle-container-color: #{$container};
+  --_toggle-state-color: #{$state};
+  color: $state;
+  background-color: var(--_toggle-container-color);
+}
+
 .button-group {
   --md-comp-button-group-between-space: 12px;
   --md-comp-button-group-item-shape-round: 9999px;
@@ -77,14 +73,9 @@ $_connected-corners: (
   // M3 states this as a percentage of the item's own width. CSS cannot
   // multiply a length by one, so it is the same figure as a ratio.
   --md-comp-button-group-pressed-item-width-multiplier: .15;
-  // Material's fast-spatial spring (damping .9, stiffness 1400), sampled into
-  // a CSS linear easing so width and corner motion use the published dynamics.
-  --md-comp-button-group-motion: linear(
-    0, .056 5%, .1796 10%, .3252 15%, .4675 20%, .5936 25%,
-    .6988 30%, .7828 35%, .8475 40%, .8959 45%, .931 50%,
-    .9559 55%, .973 60%, .9845 65%, .9919 70%, .9965 75%,
-    .9992 80%, 1.0006 85%, 1.0013 90%, 1.0015 95%, 1.0015
-  );
+  // Material's fast-spatial spring, so width and corner motion use the
+  // published dynamics.
+  --md-comp-button-group-motion: #{$motion-fast-spatial};
 
   display: flex;
   align-items: center;
@@ -100,8 +91,9 @@ $_connected-corners: (
       @include button-size($name);
 
       --md-comp-button-group-between-space: #{map.get($_standard-space, $name)};
-      --md-comp-button-group-item-shape-square: #{map.get(map.get($_item-shapes, $name), square)};
-      --md-comp-button-group-pressed-item-shape: #{map.get(map.get($_item-shapes, $name), pressed)};
+      // Common and icon buttons share these two shapes.
+      --md-comp-button-group-item-shape-square: #{map.get($icon-button-sizes, $name, square)};
+      --md-comp-button-group-pressed-item-shape: #{map.get($icon-button-sizes, $name, pressed)};
 
       > #{$_label-item}:not(#{$_sized}) {
         @include typescale(map.get($s, label));
@@ -112,23 +104,23 @@ $_connected-corners: (
       }
 
       > .icon-button.narrow:not(#{$_sized}) {
-        --md-comp-icon-button-leading-space: #{map.get(map.get($icon-button-sizes, $name), narrow)};
-        --md-comp-icon-button-trailing-space: #{map.get(map.get($icon-button-sizes, $name), narrow)};
+        --md-comp-icon-button-leading-space: #{map.get($icon-button-sizes, $name, narrow)};
+        --md-comp-icon-button-trailing-space: #{map.get($icon-button-sizes, $name, narrow)};
       }
 
       > .icon-button.wide:not(#{$_sized}) {
-        --md-comp-icon-button-leading-space: #{map.get(map.get($icon-button-sizes, $name), wide)};
-        --md-comp-icon-button-trailing-space: #{map.get(map.get($icon-button-sizes, $name), wide)};
+        --md-comp-icon-button-leading-space: #{map.get($icon-button-sizes, $name, wide)};
+        --md-comp-icon-button-trailing-space: #{map.get($icon-button-sizes, $name, wide)};
       }
     }
 
     // Group shape tokens inherit, so an explicitly sized item must rewrite
     // them on itself just as its button geometry tokens do.
     > #{$_item}.#{$name} {
-      --md-comp-button-group-item-shape-square: #{map.get(map.get($_item-shapes, $name), square)};
-      --md-comp-button-group-pressed-item-shape: #{map.get(map.get($_item-shapes, $name), pressed)};
-      --md-comp-button-group-inner-corner-corner-size: #{map.get(map.get($_connected-corners, $name), inner)};
-      --md-comp-button-group-pressed-inner-corner-corner-size: #{map.get(map.get($_connected-corners, $name), pressed)};
+      --md-comp-button-group-item-shape-square: #{map.get($icon-button-sizes, $name, square)};
+      --md-comp-button-group-pressed-item-shape: #{map.get($icon-button-sizes, $name, pressed)};
+      --md-comp-button-group-inner-corner-corner-size: #{map.get($_connected-corners, $name, inner)};
+      --md-comp-button-group-pressed-inner-corner-corner-size: #{map.get($_connected-corners, $name, pressed)};
     }
   }
 
@@ -176,64 +168,40 @@ $_connected-corners: (
   // Shape and the filled icon below provide two non-color selection cues.
   > #{$_label-item}#{$_filled-item}[aria-pressed=false],
   > .icon-button.filled[aria-pressed=false] {
-    --_toggle-container-color: var(--md-sys-color-surface-container);
-    --_toggle-state-color: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant));
   }
 
   > #{$_label-item}#{$_filled-item}[aria-pressed=true],
   > .icon-button.filled[aria-pressed=true] {
-    --_toggle-container-color: var(--md-sys-color-primary);
-    --_toggle-state-color: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-primary), var(--md-sys-color-on-primary));
   }
 
   > #{$_label-item}.tonal[aria-pressed=false],
   > .icon-button.tonal[aria-pressed=false] {
-    --_toggle-container-color: var(--md-sys-color-secondary-container);
-    --_toggle-state-color: var(--md-sys-color-on-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container));
   }
 
   > #{$_label-item}.tonal[aria-pressed=true],
   > .icon-button.tonal[aria-pressed=true] {
-    --_toggle-container-color: var(--md-sys-color-secondary);
-    --_toggle-state-color: var(--md-sys-color-on-secondary);
-    color: var(--md-sys-color-on-secondary);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-secondary), var(--md-sys-color-on-secondary));
   }
 
   > #{$_label-item}.outlined[aria-pressed=false],
   > .icon-button.outlined[aria-pressed=false] {
-    --_toggle-container-color: transparent;
-    --_toggle-state-color: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(transparent, var(--md-sys-color-on-surface-variant));
   }
 
   > #{$_label-item}.outlined[aria-pressed=true],
   > .icon-button.outlined[aria-pressed=true] {
-    --_toggle-container-color: var(--md-sys-color-inverse-surface);
-    --_toggle-state-color: var(--md-sys-color-inverse-on-surface);
-    color: var(--md-sys-color-inverse-on-surface);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface));
   }
 
   > #{$_label-item}.elevated[aria-pressed=false] {
-    --_toggle-container-color: var(--md-sys-color-surface-container-low);
-    --_toggle-state-color: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-surface-container-low), var(--md-sys-color-primary));
   }
 
   > #{$_label-item}.elevated[aria-pressed=true] {
-    --_toggle-container-color: var(--md-sys-color-primary);
-    --_toggle-state-color: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-    background-color: var(--_toggle-container-color);
+    @include _toggle-colors(var(--md-sys-color-primary), var(--md-sys-color-on-primary));
   }
 
   > #{$_toggle-item}[aria-pressed]:hover {
@@ -315,10 +283,6 @@ $_connected-corners: (
       --md-comp-button-group-container-shape: var(--md-comp-button-group-inner-corner-corner-size);
     }
 
-    > #{$_item} {
-      min-width: 48px;
-    }
-
     // The corner goes through a variable so that pressing an item changes one
     // value rather than restating `border-radius`. A shorthand for the pressed
     // state would take the end items' round outer corners with it.
@@ -334,6 +298,7 @@ $_connected-corners: (
       --_round: calc(var(--md-comp-filled-button-container-height, 40px) / 2);
 
       flex: 1 1 0;
+      min-width: 48px;
       border-radius: var(--_corner);
 
       &.icon-button {