mtrl 0.7.0 → 0.8.0-next.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl",
-  "version": "0.7.0",
+  "version": "0.8.0-next.4",
   "description": "A functional TypeScript/JavaScript component library with composable architecture based on Material Design 3",
   "author": "floor",
   "license": "MIT License",
@@ -60,11 +60,8 @@
   "scripts": {
     "start": "bun run server.js",
     "dev": "bun --watch server.js",
-    "build:js": "bun build demo/main.js --outfile=demo/dist/bundle.js --format=esm",
-    "build:css": "sass src/styles/main.scss:demo/dist/styles.css --style=compressed",
-    "build": "bun run build:js && bun run build:css",
-    "build:lib": "bun run build.ts",
-    "prepublishOnly": "bun run build:lib",
+    "build": "bun run build.ts",
+    "prepublishOnly": "bun run build",
     "lint": "bunx eslint src --ext .ts,.tsx",
     "lint:fix": "bunx eslint src --ext .ts,.tsx --fix",
     "format": "bunx prettier --write .",

package/src/styles/abstract/_theme.scss

@@ -56,8 +56,10 @@ $mtrl-sys-shape: (
  * @return {String} rgba CSS function with variable
  */
 @function alpha($key, $opacity) {
-  // #{'...'} prevents SASS from interpreting rgba as a SASS function
-  @return #{'rgba(var(--#{$prefix}-sys-color-#{$key}-rgb), #{$opacity})'};
+  // color-mix on the role itself: themes made with create-theme define the
+  // colour tokens only (no -rgb twins), so an rgba(var(--…-rgb)) would fall
+  // back to the baseline palette. #{'...'} keeps Sass from evaluating it.
+  @return #{'color-mix(in srgb, var(--#{$prefix}-sys-color-#{$key}) #{$opacity * 100}%, transparent)'};
 }
 
 @function state($key) {

package/src/styles/abstract/_variables.scss

@@ -5,8 +5,8 @@
 // Core design tokens
 $state: (
   'hover-state-layer-opacity': 0.08,
-  'focus-state-layer-opacity': 0.12,
-  'pressed-state-layer-opacity': 0.12,
+  'focus-state-layer-opacity': 0.1,
+  'pressed-state-layer-opacity': 0.1,
   'dragged-state-layer-opacity': 0.16
 ) !default;
 
@@ -41,7 +41,25 @@ $motion: (
   'easing-appear': cubic-bezier(0.0, 0.0, 0.2, 1.0),       // Elements appearing (decelerated)
   'easing-disappear': cubic-bezier(0.3, 0.0, 1.0, 1.0),    // Elements disappearing (accelerated)
   'easing-expand': cubic-bezier(0.0, 0.0, 0.2, 1.0),       // Elements expanding (decelerated)
-  'easing-collapse': cubic-bezier(0.3, 0.0, 1.0, 1.0)      // Elements collapsing (accelerated)
+  'easing-collapse': cubic-bezier(0.3, 0.0, 1.0, 1.0),     // Elements collapsing (accelerated)
+
+  // Material 3 expressive motion scheme: springs sampled as linear() easings
+  // (Compose ExpressiveMotionTokens.kt, mass 1). Spatial springs move size,
+  // shape and position and may overshoot; effects springs change colour and
+  // opacity without overshoot. The duration is the time for the spring to
+  // settle within 0.1%.
+  'spring-default-spatial-duration': 450ms,
+  'spring-default-spatial-easing': linear(0.0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),
+  'spring-fast-spatial-duration': 425ms,
+  'spring-fast-spatial-easing': linear(0.0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1.0, 1.001, 1.001, 1),
+  'spring-slow-spatial-duration': 625ms,
+  'spring-slow-spatial-easing': linear(0.0, 0.056, 0.182, 0.335, 0.488, 0.624, 0.738, 0.827, 0.895, 0.943, 0.975, 0.996, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.008, 1.006, 1.004, 1.003, 1.002, 1.001, 1),
+  'spring-default-effects-duration': 250ms,
+  'spring-default-effects-easing': linear(0.0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),
+  'spring-fast-effects-duration': 175ms,
+  'spring-fast-effects-easing': linear(0.0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1.0, 1),
+  'spring-slow-effects-duration': 350ms,
+  'spring-slow-effects-easing': linear(0.0, 0.065, 0.2, 0.351, 0.491, 0.611, 0.708, 0.783, 0.841, 0.885, 0.917, 0.941, 0.958, 0.97, 0.979, 0.985, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),
 ) !default;
 
 $elevation: (
@@ -221,30 +239,59 @@ $chip-config: (
 ) !default;
 
 $button: (
+  // M3 button tokens (Compose Material 3 ButtonXSmall/Small/Medium/Large/XLargeTokens.kt)
   'height': 40px,
-  'min-width': 64px,
-  'padding-horizontal': 24px,
-  'padding-horizontal-small': 16px,
-  'padding-icon': 16px,
-  'border-radius': 20px,
+  'min-width': 58px, // ButtonDefaults.MinWidth
+  'padding-horizontal': 16px,
+  'padding-horizontal-small': 12px, // text button (ButtonDefaults.TextButtonContentPadding)
+  'padding-icon': 12px, // small button leading space next to an icon (pointer devices)
+  'border-radius': map.get($shape, 'full'),
   'transition-duration': map.get($motion, 'duration-short2'),
   'transition-easing': map.get($motion, 'easing-standard'),
-  // Size-specific configurations based on MD3 specs
+  // Container height per size
   'height-xs': 32px,
   'height-s': 40px,
   'height-m': 56px,
   'height-l': 96px,
   'height-xl': 136px,
+  // Leading and trailing space per size
   'padding-xs': 12px,
   'padding-s': 16px,
   'padding-m': 24px,
   'padding-l': 48px,
   'padding-xl': 64px,
-  'icon-size-xs': 18px,
-  'icon-size-s': 22px,
+  // Icon size per size
+  'icon-size-xs': 20px,
+  'icon-size-s': 20px,
   'icon-size-m': 24px,
   'icon-size-l': 32px,
-  'icon-size-xl': 48px
+  'icon-size-xl': 40px,
+  // Icon to label space per size
+  'icon-gap-xs': 8px,
+  'icon-gap-s': 8px,
+  'icon-gap-m': 8px,
+  'icon-gap-l': 12px,
+  'icon-gap-xl': 16px,
+  // Outlined outline width per size
+  'outline-width-xs': 1px,
+  'outline-width-s': 1px,
+  'outline-width-m': 1px,
+  'outline-width-l': 2px,
+  'outline-width-xl': 3px,
+  // Square container shape per size
+  'shape-square-xs': map.get($shape, 'medium'),
+  'shape-square-s': map.get($shape, 'medium'),
+  'shape-square-m': map.get($shape, 'large'),
+  'shape-square-l': map.get($shape, 'extra-large'),
+  'shape-square-xl': map.get($shape, 'extra-large'),
+  // Pressed container shape per size (round and square)
+  'shape-pressed-xs': map.get($shape, 'small'),
+  'shape-pressed-s': map.get($shape, 'small'),
+  'shape-pressed-m': map.get($shape, 'medium'),
+  'shape-pressed-l': map.get($shape, 'large'),
+  'shape-pressed-xl': map.get($shape, 'large'),
+  // Minimum touch target for the xs and s sizes
+  'touch-target': 48px
 ) !default;
 
 

package/src/styles/components/_button-group.scss

@@ -6,403 +6,176 @@
 @use '../../styles/abstract/theme' as t;
 
 $component: '#{base.$prefix}-button-group';
+$button: '#{base.$prefix}-button';
+$icon-button: '#{base.$prefix}-icon-button';
+$shape: '--#{base.$prefix}-button-shape';
 
 // =============================================================================
 // BUTTON GROUP COMPONENT STYLES
 // =============================================================================
-// Material Design 3 Button Group Implementation
+// Material 3 button groups (m3.material.io button group specs; Compose
+// ButtonGroupDefaults, ButtonGroupSmallTokens.kt and
+// ConnectedButtonGroupSmallTokens.kt).
 //
-// Button groups visually connect related action buttons. Unlike segmented
-// buttons (for selection), button groups are for grouping related actions
-// where each button triggers an independent action.
+// A group is a row (or column) of ordinary buttons and icon buttons. The
+// buttons keep their own colours, states, toggle colours and shape morphs;
+// the group owns the spacing, the container height, and, for connected
+// groups, the corner shapes per position. Shapes are handed to the buttons
+// through the --<prefix>-button-shape custom properties.
 //
-// Supports:
-// - Multiple variants (filled, tonal, outlined, elevated, text)
-// - Horizontal and vertical orientations
-// - Density scaling (default, comfortable, compact)
-// - Equal width option
-// - Proper border handling between buttons
-// - Accessibility support
+// - standard: 18/12/8/8/8dp between buttons by size; a selected toggle
+//   swaps round and square like a standalone button; a pressed button
+//   widens by 15% (set from the component)
+// - connected: 2dp between buttons; round outer corners, square inner
+//   corners (4/8/8/16/20dp by size), 4dp inner corners while pressed; a
+//   selected button becomes a full pill
+//
+// The component sets --button-group-height, --button-group-icon,
+// --button-group-gap, --button-group-inner-corner,
+// --button-group-pressed-corner and --button-group-radius.
 // =============================================================================
 
 .#{$component} {
-  // Base styles
   position: relative;
   display: inline-flex;
-  align-items: stretch;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--button-group-gap, 12px);
 
-  // CSS custom properties for dynamic sizing
   --button-group-height: 40px;
+  --button-group-icon: 20px;
+  --button-group-gap: 12px;
+  --button-group-inner-corner: 8px;
+  --button-group-pressed-corner: 4px;
   --button-group-radius: 20px;
-  --button-group-gap: 0;
 
-  // Default to horizontal orientation
-  flex-direction: row;
+  &--vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
 
-  // Remove default button margins within group
-  > .#{base.$prefix}-button {
+  > .#{$button},
+  > .#{$icon-button} {
     margin: 0;
     flex-shrink: 0;
+    height: var(--button-group-height);
+    // Size and shape changes ride the fast spatial spring, colours the
+    // default effects spring (ButtonGroup and ToggleButton animation specs)
+    transition:
+      background-color v.motion('spring-default-effects-duration') v.motion('spring-default-effects-easing'),
+      color v.motion('spring-default-effects-duration') v.motion('spring-default-effects-easing'),
+      box-shadow v.motion('spring-default-effects-duration') v.motion('spring-default-effects-easing'),
+      border-color v.motion('spring-default-effects-duration') v.motion('spring-default-effects-easing'),
+      border-radius v.motion('spring-fast-spatial-duration') v.motion('spring-fast-spatial-easing'),
+      width v.motion('spring-fast-spatial-duration') v.motion('spring-fast-spatial-easing'),
+      padding v.motion('spring-fast-spatial-duration') v.motion('spring-fast-spatial-easing'),
+      gap v.motion('spring-fast-spatial-duration') v.motion('spring-fast-spatial-easing');
   }
 
-  // =========================================================================
-  // ORIENTATION VARIANTS
-  // =========================================================================
-
-  &--horizontal {
-    flex-direction: row;
-
-    // First button - rounded left corners only
-    > .#{$component}__button--first,
-    > .#{base.$prefix}-button:first-child {
-      border-top-left-radius: var(--button-group-radius);
-      border-bottom-left-radius: var(--button-group-radius);
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    // Last button - rounded right corners only
-    > .#{$component}__button--last,
-    > .#{base.$prefix}-button:last-child {
-      border-top-right-radius: var(--button-group-radius);
-      border-bottom-right-radius: var(--button-group-radius);
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    // Middle buttons - no rounded corners
-    > .#{$component}__button--middle,
-    > .#{base.$prefix}-button:not(:first-child):not(:last-child) {
-      border-radius: 0;
-    }
-
-    // Single button - all corners rounded
-    > .#{$component}__button--single,
-    > .#{base.$prefix}-button:only-child {
-      border-radius: var(--button-group-radius);
-    }
-  }
-
-  &--vertical {
-    flex-direction: column;
-
-    // First button - rounded top corners only
-    > .#{$component}__button--first,
-    > .#{base.$prefix}-button:first-child {
-      border-top-left-radius: var(--button-group-radius);
-      border-top-right-radius: var(--button-group-radius);
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    // Last button - rounded bottom corners only
-    > .#{$component}__button--last,
-    > .#{base.$prefix}-button:last-child {
-      border-bottom-left-radius: var(--button-group-radius);
-      border-bottom-right-radius: var(--button-group-radius);
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-
-    // Middle buttons - no rounded corners
-    > .#{$component}__button--middle,
-    > .#{base.$prefix}-button:not(:first-child):not(:last-child) {
-      border-radius: 0;
-    }
-
-    // Single button - all corners rounded
-    > .#{$component}__button--single,
-    > .#{base.$prefix}-button:only-child {
-      border-radius: var(--button-group-radius);
-    }
+  // Density lowers the height; a round icon button keeps its aspect
+  > .#{$icon-button} {
+    width: var(--button-group-height);
   }
 
-  // =========================================================================
-  // VARIANT STYLES
-  // =========================================================================
-
-  // Outlined variant (default for button groups per MD3)
-  &--outlined {
-    > .#{base.$prefix}-button {
-      background-color: transparent;
-      color: t.color('primary');
-      box-shadow: none;
-
-      &:hover:not([disabled]) {
-        background-color: t.alpha('primary', 0.08);
-      }
-
-      &:focus-visible {
-        background-color: t.alpha('primary', 0.12);
-      }
-
-      &:active:not([disabled]) {
-        background-color: t.alpha('primary', 0.12);
-      }
-    }
-
-    // Horizontal border handling
-    &.#{$component}--horizontal {
-      > .#{base.$prefix}-button {
-        border: 1px solid t.color('outline');
-
-        // Remove right border except for last button to avoid double borders
-        &:not(:last-child) {
-          border-right: none;
-        }
-      }
-    }
-
-    // Vertical border handling
-    &.#{$component}--vertical {
-      > .#{base.$prefix}-button {
-        border: 1px solid t.color('outline');
-
-        // Remove bottom border except for last button to avoid double borders
-        &:not(:last-child) {
-          border-bottom: none;
-        }
-      }
+  &--equal-width {
+    > .#{$button} {
+      flex: 1 1 0;
+      justify-content: center;
     }
   }
 
-  // Filled variant
-  &--filled {
-    > .#{base.$prefix}-button {
-      background-color: t.color('primary');
-      color: t.color('on-primary');
-      border: none;
-      box-shadow: none;
-
-      &:hover:not([disabled]) {
-        background-color: t.alpha('primary', 0.92);
-        box-shadow: v.elevation('level-1');
-      }
-
-      &:focus-visible {
-        background-color: t.alpha('primary', 0.88);
-      }
-
-      &:active:not([disabled]) {
-        background-color: t.alpha('primary', 0.88);
-        box-shadow: none;
-      }
-    }
-
-    // Add subtle dividers between buttons
-    &.#{$component}--horizontal {
-      > .#{base.$prefix}-button:not(:last-child) {
-        border-right: 1px solid t.alpha('on-primary', 0.12);
-      }
-    }
-
-    &.#{$component}--vertical {
-      > .#{base.$prefix}-button:not(:last-child) {
-        border-bottom: 1px solid t.alpha('on-primary', 0.12);
-      }
-    }
+  &--disabled {
+    pointer-events: none;
   }
 
-  // Tonal variant
-  &--tonal {
-    > .#{base.$prefix}-button {
-      background-color: t.color('secondary-container');
-      color: t.color('on-secondary-container');
-      border: none;
-      box-shadow: none;
-
-      &:hover:not([disabled]) {
-        background-color: t.alpha('secondary-container', 0.92);
-        box-shadow: v.elevation('level-1');
-      }
-
-      &:focus-visible {
-        background-color: t.alpha('secondary-container', 0.88);
-      }
-
-      &:active:not([disabled]) {
-        background-color: t.alpha('secondary-container', 0.88);
-        box-shadow: none;
-      }
-    }
-
-    // Add subtle dividers between buttons
-    &.#{$component}--horizontal {
-      > .#{base.$prefix}-button:not(:last-child) {
-        border-right: 1px solid t.alpha('on-secondary-container', 0.12);
-      }
+  // ---------------------------------------------------------------------------
+  // Connected groups: corner shapes per position
+  // ---------------------------------------------------------------------------
+  &--connected {
+    > .#{$button},
+    > .#{$icon-button} {
+      #{$shape}: var(--button-group-inner-corner);
+      #{$shape}-pressed: var(--button-group-pressed-corner);
+      #{$shape}-selected: var(--button-group-radius);
     }
 
-    &.#{$component}--vertical {
-      > .#{base.$prefix}-button:not(:last-child) {
-        border-bottom: 1px solid t.alpha('on-secondary-container', 0.12);
-      }
+    > .#{$component}__button--first {
+      #{$shape}: var(--button-group-radius) var(--button-group-inner-corner) var(--button-group-inner-corner) var(--button-group-radius);
+      #{$shape}-pressed: var(--button-group-radius) var(--button-group-pressed-corner) var(--button-group-pressed-corner) var(--button-group-radius);
     }
-  }
-
-  // Elevated variant
-  &--elevated {
-    box-shadow: v.elevation('level-1');
-    border-radius: var(--button-group-radius);
-
-    > .#{base.$prefix}-button {
-      background-color: t.color('surface-container-low');
-      color: t.color('primary');
-      border: none;
-      box-shadow: none;
-
-      &:hover:not([disabled]) {
-        background-color: t.alpha('primary', 0.08);
-      }
-
-      &:focus-visible {
-        background-color: t.alpha('primary', 0.12);
-      }
 
-      &:active:not([disabled]) {
-        background-color: t.alpha('primary', 0.12);
-      }
+    > .#{$component}__button--last {
+      #{$shape}: var(--button-group-inner-corner) var(--button-group-radius) var(--button-group-radius) var(--button-group-inner-corner);
+      #{$shape}-pressed: var(--button-group-pressed-corner) var(--button-group-radius) var(--button-group-radius) var(--button-group-pressed-corner);
     }
 
-    // Add subtle dividers between buttons
-    &.#{$component}--horizontal {
-      > .#{base.$prefix}-button:not(:last-child) {
-        border-right: 1px solid t.color('outline-variant');
-      }
+    > .#{$component}__button--single {
+      #{$shape}: var(--button-group-radius);
+      #{$shape}-pressed: var(--button-group-radius);
     }
 
     &.#{$component}--vertical {
-      > .#{base.$prefix}-button:not(:last-child) {
-        border-bottom: 1px solid t.color('outline-variant');
-      }
-    }
-  }
-
-  // Text variant
-  &--text {
-    > .#{base.$prefix}-button {
-      background-color: transparent;
-      color: t.color('primary');
-      border: none;
-      box-shadow: none;
-
-      &:hover:not([disabled]) {
-        background-color: t.alpha('primary', 0.08);
+      > .#{$component}__button--first {
+        #{$shape}: var(--button-group-radius) var(--button-group-radius) var(--button-group-inner-corner) var(--button-group-inner-corner);
+        #{$shape}-pressed: var(--button-group-radius) var(--button-group-radius) var(--button-group-pressed-corner) var(--button-group-pressed-corner);
       }
 
-      &:focus-visible {
-        background-color: t.alpha('primary', 0.12);
-      }
-
-      &:active:not([disabled]) {
-        background-color: t.alpha('primary', 0.12);
+      > .#{$component}__button--last {
+        #{$shape}: var(--button-group-inner-corner) var(--button-group-inner-corner) var(--button-group-radius) var(--button-group-radius);
+        #{$shape}-pressed: var(--button-group-pressed-corner) var(--button-group-pressed-corner) var(--button-group-radius) var(--button-group-radius);
       }
     }
-  }
-
-  // =========================================================================
-  // DENSITY VARIANTS
-  // =========================================================================
 
-  // Default density (40px height)
-  // Uses CSS custom properties set by default
-
-  // Comfortable density (36px height)
-  &--density-comfortable {
-    --button-group-height: 36px;
-    --button-group-radius: 18px;
-
-    > .#{base.$prefix}-button {
-      height: 36px;
-      padding: 0 20px;
-
-      .#{base.$prefix}-button-text {
-        font-size: 0.8125rem;
+    // Square connected groups: the outer corners take the inner corner size
+    &.#{$component}--square {
+      > .#{$component}__button--first,
+      > .#{$component}__button--last,
+      > .#{$component}__button--single {
+        #{$shape}: var(--button-group-inner-corner);
+        #{$shape}-pressed: var(--button-group-pressed-corner);
       }
     }
-  }
 
-  // Compact density (32px height)
-  &--density-compact {
-    --button-group-height: 32px;
-    --button-group-radius: 16px;
-
-    > .#{base.$prefix}-button {
-      height: 32px;
-      padding: 0 16px;
-      min-width: 48px;
-
-      .#{base.$prefix}-button-text {
-        font-size: 0.75rem;
-      }
-
-      .#{base.$prefix}-button-icon {
-        svg {
-          width: 18px;
-          height: 18px;
-        }
+    // xs and s connected groups keep a 48dp minimum width per button
+    &.#{$component}--size-xs,
+    &.#{$component}--size-s {
+      > .#{$button},
+      > .#{$icon-button} {
+        min-width: 48px;
       }
     }
   }
 
-  // =========================================================================
-  // EQUAL WIDTH OPTION
-  // =========================================================================
-
-  &--equal-width {
-    > .#{base.$prefix}-button {
-      flex: 1 1 0;
-      justify-content: center;
-    }
-  }
-
-  // =========================================================================
-  // DISABLED STATE
-  // =========================================================================
-
-  &--disabled {
-    opacity: 0.38;
-    pointer-events: none;
-
-    > .#{base.$prefix}-button {
-      pointer-events: none;
-    }
-  }
-
-  // =========================================================================
-  // BUTTON POSITION CLASSES
-  // =========================================================================
-
-  &__button {
-    // Base button in group styling
-    position: relative;
-
-    &--first,
-    &--middle,
-    &--last,
-    &--single {
-      // Position-specific styles are handled above in orientation variants
-    }
-  }
-}
-
-// =============================================================================
-// DARK THEME ADJUSTMENTS
-// =============================================================================
-
-html[data-theme-mode=dark] {
-  .#{$component} {
-    &--outlined {
-      > .#{base.$prefix}-button {
-        border-color: t.color('outline');
-      }
-    }
-
-    &--elevated {
-      background-color: t.color('surface-container-high');
-
-      > .#{base.$prefix}-button {
-        background-color: transparent;
+  // ---------------------------------------------------------------------------
+  // Labels shown on the selected button only: buttons with icon and text
+  // collapse to the icon and the selected one widens to reveal its label
+  // ---------------------------------------------------------------------------
+  &--labels-selected {
+    > .#{$button} {
+      gap: 0;
+      min-width: var(--button-group-height);
+      padding: 0 calc((var(--button-group-height) - var(--button-group-icon)) / 2);
+
+      .#{$button}-text {
+        display: inline-block;
+        max-width: 0;
+        opacity: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: clip;
+        transition:
+          max-width v.motion('spring-fast-spatial-duration') v.motion('spring-fast-spatial-easing'),
+          opacity v.motion('spring-default-effects-duration') v.motion('spring-default-effects-easing');
+      }
+    }
+
+    > .#{$component}__button--selected {
+      gap: v.button('icon-gap-s');
+      padding: 0 v.button('padding-s');
+
+      .#{$button}-text {
+        max-width: 12em;
+        opacity: 1;
       }
     }
   }