@expressivecss/expressive 0.7.0-rc.0 → 0.8.0

package/src/sass/components/_toolbar.scss

@@ -2,63 +2,102 @@
 
 // Toolbars (M3 Expressive).
 //
-// Anatomy is the HTML. A <nav class="toolbar"> is the bar. Direct
+// Anatomy is the HTML. A <div class="toolbar"> is the bar. Direct
 // <button> / <a> children are the actions. An <i> is the icon; wrap a
 // label in <span>. .active marks the selected action. A .filled action
 // is the emphasized control (the in-bar FAB). Helpers are only for
-// variants markup cannot express: .docked, .vibrant / .filled (on the
-// nav), .vertical, .fixed, .top, .bottom.
+// variants markup cannot express: .docked, .vibrant, .vertical, .fixed,
+// .top, .bottom.
 //
-// Two variants:
-//   floating   default. Hugs its actions, 64dp, 32dp stadium,
-//              surface-container, elevation 2. Horizontal or .vertical.
-//   docked     .docked (or .max). Full width, 64dp, square, no
-//              elevation. Replaces the bottom app bar.
+// Four variants, from two independent axes - shape and color:
 //
-// Color: standard (surface-container) or .vibrant (primary-container).
-// Pair a floating bar with a FAB via .toolbar-group. Do not show a
-// toolbar at the same time as nav.navigation-bar.
+//            standard                    vibrant
+//   floating surface-container, 32dp,    primary-container, 32dp,
+//            elevation 3, hugs its       elevation 3
+//            actions
+//   docked   surface-container, square,  primary-container, square,
+//            full width, no lift         full width, no lift
 //
-// Tokens follow https://m3.material.io/components/toolbars/specs
-//   action     48dp target, 24dp icon, transparent at rest
-//   selected   secondary-container (standard) / surface (vibrant)
-//   emphasized 48dp, 16dp corners, primary / on-primary
+// Neither default needs a class. Each default arm is the *absence* of the
+// other side, so a bar that names nothing still lands on it - and each also
+// names its own class, so `.floating` and `.standard` are spellings a grep of
+// the compiled sheet finds rather than prose the docs assert about nothing.
+// All four variants can therefore be written out in full, and the two
+// non-default arms are declared after their defaults so that markup naming
+// both sides of an axis resolves to the more specific one on source order
+// rather than on a specificity accident.
 //
-// nav.toolbar only — do not style every <nav>. div.fixed-action-btn.toolbar
+// Tokens follow the 34.0.21 sets md.comp.toolbar.{standard, vibrant, docked,
+// floating, floating.fab}; https://m3.material.io/components/toolbars/specs
+// is the prose behind them. M3 splits them into a shape/size pair (docked,
+// floating) and a color pair (standard, vibrant), which is the same two axes
+// as above; floating.fab is the companion FAB, not the in-bar .filled action.
+//
+// Color: `.vibrant` is M3's own toolbar-vibrant set - primary-container - and
+// it is deliberately *not* also spelled `[vibrant]`. That attribute is the
+// emphasis foundation, whose one ramp is tertiary; a bar carrying it is
+// repainted by the foundation alone, with no toolbar-specific code, because
+// every colour below is a --md-comp-toolbar-* token pointed at a
+// --md-sys-color-* role. Matching the attribute here as well would give one
+// variant two renderings - the class's primary chip against the foundation's
+// tertiary one - and would contradict tokens/_vibrant.scss, which states that
+// a component carrying its own .vibrant class keeps the colours its own M3
+// token set gives it. Nothing collides either way: selection is
+// secondary-container, which the foundation does not remap.
+//
+// Do not show a toolbar at the same time as nav.navigation-bar.
+//
+// #{$_toolbar} only - do not style every <nav>. div.fixed-action-btn.toolbar
 // is the FAB-to-toolbar transition, not this component.
 
-nav.toolbar {
-  --md-comp-toolbar-container-color: var(--md-sys-color-surface-container);
-  --md-comp-toolbar-container-shape: 32px;
+// The host. A toolbar holds commands, not destinations, so it is not a <nav>
+// (rule 4) - and not role="toolbar" either, because that is a composite role
+// promising arrow-key navigation nothing here implements (rule 2). The <nav>
+// form is the older markup and still works.
+//
+// Wrapped in :is() so it stays one compound selector: interpolating a bare
+// comma-separated list breaks out of its context. That mistake shipped once
+// already, in $_bar.
+$_toolbar: ":is(nav.toolbar, .toolbar:not(.fixed-action-btn):not(.fab))";
+
+// The two axes. `.max` is BeerCSS's name for docked; `.filled` is the older
+// name for vibrant. Both stay in the :is() lists.
+$_floating: "#{$_toolbar}:is(.floating, :not(.docked, .max))";
+$_docked: "#{$_toolbar}:is(.docked, .max)";
+$_standard: "#{$_toolbar}:is(.standard, :not(.vibrant, .filled))";
+$_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
+
+#{$_toolbar} {
+  // Shared across all four variants. --md-comp-toolbar-color stands for
+  // md.comp.toolbar.*.icon.color and .label-text.color, which M3 gives the
+  // same value in both color sets.
   --md-comp-toolbar-container-height: 64px;
-  --md-comp-toolbar-leading-space: 12px;
+  --md-comp-toolbar-between-space: 4px;
   --md-comp-toolbar-action-size: 48px;
   --md-comp-toolbar-icon-size: 24px;
-  --md-comp-toolbar-selected-container-color: var(--md-sys-color-secondary-container);
-  --md-comp-toolbar-selected-color: var(--md-sys-color-on-secondary-container);
 
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: var(--md-comp-toolbar-between-space);
   min-height: var(--md-comp-toolbar-container-height);
   min-width: var(--md-comp-toolbar-container-height);
   margin: 0;
-  padding: 8px var(--md-comp-toolbar-leading-space);
+  padding-block: 8px;
+  padding-inline: var(--md-comp-toolbar-leading-space) var(--md-comp-toolbar-trailing-space);
   border: none;
   border-radius: var(--md-comp-toolbar-container-shape);
   background-color: var(--md-comp-toolbar-container-color);
-  color: var(--md-sys-color-on-surface);
-  @include z-depth("2");
+  color: var(--md-comp-toolbar-color);
 
   & + & {
     margin-block-start: 16px;
   }
 
-  // Actions — transparent at rest so they sit on the container, not filled.
+  // Actions - transparent at rest so they sit on the container, not filled.
   // .extra is the 56dp companion FAB; leave it alone.
-  > :is(a, button):not(.extra) {
+  > :is(a, button):not(.extra, .icon-button) {
     box-sizing: border-box;
     display: inline-flex;
     flex: 0 0 auto;
@@ -79,10 +118,9 @@ nav.toolbar {
     cursor: pointer;
     appearance: none;
     @include typescale("label-large");
-    font-family: $font-stack;
     @include focus-visible;
 
-    > i {
+    > #{$icon} {
       flex: 0 0 auto;
       font-size: var(--md-comp-toolbar-icon-size);
       width: var(--md-comp-toolbar-icon-size);
@@ -90,12 +128,14 @@ nav.toolbar {
       line-height: var(--md-comp-toolbar-icon-size);
     }
 
+    // The state layer is the content color in both color sets, which is
+    // what currentColor already is on an action that has not been filled.
     &:hover:not(.active, .filled) {
-      background-color: color-mix(in oklab, currentColor 8%, transparent);
+      background-color: color-mix(in oklab, currentColor state-opacity("hover"), transparent);
     }
 
     &:active:not(.active, .filled) {
-      background-color: color-mix(in oklab, currentColor 10%, transparent);
+      background-color: color-mix(in oklab, currentColor state-opacity("pressed"), transparent);
     }
 
     &.active {
@@ -104,6 +144,8 @@ nav.toolbar {
     }
 
     &:disabled {
+      // 0.38, md.comp.toolbar.*.disabled.{icon,label-text}.opacity. Left as a
+      // literal because it is the global disabled figure, not a toolbar knob.
       color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
       background-color: transparent;
       box-shadow: none;
@@ -111,15 +153,15 @@ nav.toolbar {
     }
   }
 
-  // Icon-only — .circle, or an <i> with no <span> sibling.
-  > :is(a, button):not(.extra):is(.circle, :has(> i):not(:has(> span))) {
+  // Icon-only - .circle, or an icon with no label beside it.
+  > :is(a, button):not(.extra, .icon-button):is(.circle, :has(> #{$icon}):not(:has(> #{$icon-label}))) {
     width: var(--md-comp-toolbar-action-size);
     padding: 0;
     border-radius: 50%;
   }
 
   // Emphasized action (the in-bar FAB). 48dp, 16dp corners, primary.
-  > :is(a, button).filled:not(.extra) {
+  > :is(a, button).filled:not(.extra, .icon-button) {
     background-color: var(--md-sys-color-primary);
     color: var(--md-sys-color-on-primary);
     border-radius: 16px;
@@ -128,7 +170,7 @@ nav.toolbar {
     &:hover {
       background-color: color-mix(
         in oklab,
-        var(--md-sys-color-on-primary) 8%,
+        var(--md-sys-color-on-primary) state-opacity("hover"),
         var(--md-sys-color-primary)
       );
     }
@@ -136,13 +178,13 @@ nav.toolbar {
     &:active {
       background-color: color-mix(
         in oklab,
-        var(--md-sys-color-on-primary) 10%,
+        var(--md-sys-color-on-primary) state-opacity("pressed"),
         var(--md-sys-color-primary)
       );
     }
   }
 
-  > :is(a, button).filled:not(.extra):has(> span) {
+  > :is(a, button).filled:not(.extra):has(> #{$icon-label}) {
     height: 40px;
     min-height: 40px;
     padding: 0 24px;
@@ -158,7 +200,8 @@ nav.toolbar {
     margin: 0;
   }
 
-  // Spacer between leading and trailing actions.
+  // Spacer between leading and trailing actions. `.max` on a *child* is the
+  // spacer; on the bar itself it is the docked alias.
   > .max {
     flex: 1 1 auto;
     align-self: stretch;
@@ -167,21 +210,69 @@ nav.toolbar {
   }
 }
 
-// Vibrant color style. Pair .active with surface so it still contrasts.
-nav.toolbar.vibrant,
-nav.toolbar.filled {
+// Floating shape. Hugs its actions, stadium, lifted. 32px rather than a
+// corner-full keyword because it has to be half the *short* side: on a
+// vertical bar the container is 64dp wide and arbitrarily tall, where 9999px
+// would round the long edge into an oval.
+#{$_floating} {
+  --md-comp-toolbar-container-shape: 32px;
+  --md-comp-toolbar-leading-space: 8px;
+  --md-comp-toolbar-trailing-space: 8px;
+  --md-comp-toolbar-external-space: 16px;
+
+  @include z-depth("3");
+}
+
+// Docked shape. Full width, square, no lift. M3's replacement for the bottom
+// app bar, and shorter than it (64dp, not 80).
+//
+// min-spacing and max-spacing bound how far apart the actions sit as the bar
+// widens, which is a clamped gap on a centered row - space-around would add
+// its own distribution on top of both bounds and honour neither. A child
+// .max spacer still takes the slack.
+#{$_docked} {
+  --md-comp-toolbar-container-shape: 0;
+  --md-comp-toolbar-leading-space: 16px;
+  --md-comp-toolbar-trailing-space: 16px;
+  --md-comp-toolbar-min-spacing: 4px;
+  --md-comp-toolbar-max-spacing: 32px;
+
+  display: flex;
+  width: 100%;
+  // 4vw is the growth rate between the two bounds, and has no token behind it
+  // because M3 states the bounds and not the ramp. The viewport unit is honest
+  // here and only here: a docked bar is full width by definition.
+  gap: clamp(var(--md-comp-toolbar-min-spacing), 4vw, var(--md-comp-toolbar-max-spacing));
+  @include z-depth("0");
+}
+
+// Standard color style, the same in both shapes.
+#{$_standard} {
+  --md-comp-toolbar-container-color: var(--md-sys-color-surface-container);
+  --md-comp-toolbar-color: var(--md-sys-color-on-surface-variant);
+  --md-comp-toolbar-selected-container-color: var(--md-sys-color-secondary-container);
+  --md-comp-toolbar-selected-color: var(--md-sys-color-on-secondary-container);
+}
+
+// Vibrant color style, the same in both shapes. Selection moves to a neutral
+// chip so it still reads against the accent container.
+#{$_vibrant} {
   --md-comp-toolbar-container-color: var(--md-sys-color-primary-container);
-  --md-comp-toolbar-selected-container-color: var(--md-sys-color-surface);
+  --md-comp-toolbar-color: var(--md-sys-color-on-primary-container);
+  --md-comp-toolbar-selected-container-color: var(--md-sys-color-surface-container);
   --md-comp-toolbar-selected-color: var(--md-sys-color-on-surface);
-  color: var(--md-sys-color-on-primary-container);
 }
 
-// Vertical floating bar.
-nav.toolbar.vertical {
+// Vertical floating bar. Only floating goes vertical - a docked bar is a
+// full-width strip by definition.
+#{$_floating}.vertical {
+  --md-comp-toolbar-external-space: 24px;
+
   flex-direction: column;
   min-width: var(--md-comp-toolbar-container-height);
   min-height: var(--md-comp-toolbar-container-height);
-  padding: var(--md-comp-toolbar-leading-space) 8px;
+  padding-block: var(--md-comp-toolbar-leading-space) var(--md-comp-toolbar-trailing-space);
+  padding-inline: 8px;
 
   > .max {
     min-width: 0;
@@ -190,68 +281,103 @@ nav.toolbar.vertical {
   }
 }
 
-// Docked — full width, square, no lift. M3's replacement for the bottom
-// app bar. Shorter than that bar (64dp, not 80). .max is the BeerCSS
-// name; .docked is the M3 name.
-nav.toolbar.max,
-nav.toolbar.docked {
-  display: flex;
-  width: 100%;
-  --md-comp-toolbar-container-shape: 0;
-  justify-content: space-around;
-  @include z-depth("0");
-}
-
-// Pair a floating toolbar with a companion FAB. The FAB is a sibling,
-// not a child — typically .extra.circle.
+// The companion FAB. It is a sibling of the bar, not a child, and it stays a
+// FAB: md.comp.toolbar.floating.fab restates md.comp.fab's 56dp container,
+// 24dp icon and 16dp corner, which .extra.circle already draws. Only three
+// values are its own - the 8dp gap, the level-1 lift (the bar beside it is
+// level 3), and a color pair that follows the bar's color style.
 .toolbar-group {
+  --md-comp-toolbar-floating-fab-between-space: 8px;
+  --md-comp-toolbar-floating-fab-container-color: var(--md-sys-color-secondary-container);
+  --md-comp-toolbar-floating-fab-icon-color: var(--md-sys-color-on-secondary-container);
+
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--md-comp-toolbar-floating-fab-between-space);
 
   &.vertical {
     flex-direction: column;
   }
 
-  > nav.toolbar {
+  > #{$_toolbar} {
     margin: 0;
   }
+
+  > .extra {
+    background-color: var(--md-comp-toolbar-floating-fab-container-color);
+    color: var(--md-comp-toolbar-floating-fab-icon-color);
+    @include z-depth("1");
+
+    // One opacity per state. All three arms are needed, bare `:focus`
+    // included: .extra.circle draws its own `:active, :focus` tint over
+    // primary-container, and leaving either uncovered would flash the FAB's
+    // default colour through a click on this one.
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-toolbar-floating-fab-icon-color) state-opacity("hover"),
+        var(--md-comp-toolbar-floating-fab-container-color)
+      );
+      @include z-depth("2");
+    }
+
+    &:focus {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-toolbar-floating-fab-icon-color) state-opacity("focus"),
+        var(--md-comp-toolbar-floating-fab-container-color)
+      );
+    }
+
+    &:active {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-toolbar-floating-fab-icon-color) state-opacity("pressed"),
+        var(--md-comp-toolbar-floating-fab-container-color)
+      );
+    }
+  }
 }
 
-// Pin to the viewport. Floating defaults to bottom-center; docked
-// defaults to the bottom edge.
-nav.toolbar.fixed {
+// A vibrant bar takes a vibrant FAB. The author marks the bar, not the group,
+// so the group reads it - the same one class drives both.
+.toolbar-group:has(> #{$_vibrant}) > .extra {
+  --md-comp-toolbar-floating-fab-container-color: var(--md-sys-color-tertiary-container);
+  --md-comp-toolbar-floating-fab-icon-color: var(--md-sys-color-on-tertiary-container);
+}
+
+// Pin to the viewport. The inset is the variant's own external space:
+// 16dp for a horizontal floating bar, 24dp for a vertical one, 0 for a
+// docked bar, which states its own and so declares no external space at all.
+// Bottom is the default, so `.bottom`
+// has no rule - a bar naming it falls through to the one above.
+#{$_toolbar}.fixed {
   position: fixed;
   z-index: 996;
-  inset: auto auto 16px 50%;
+  inset: auto auto var(--md-comp-toolbar-external-space) 50%;
   transform: translateX(-50%);
 }
 
-nav.toolbar.fixed.top {
-  inset: 16px auto auto 50%;
-}
-
-nav.toolbar.fixed.bottom {
-  inset: auto auto 16px 50%;
+#{$_toolbar}.fixed.top {
+  inset: var(--md-comp-toolbar-external-space) auto auto 50%;
 }
 
-nav.toolbar.vertical.fixed {
-  inset: 50% auto auto 16px;
+#{$_floating}.vertical.fixed {
+  inset: 50% auto auto var(--md-comp-toolbar-external-space);
   transform: translateY(-50%);
 }
 
-nav.toolbar.vertical.fixed.right {
-  inset: 50% 16px auto auto;
+#{$_floating}.vertical.fixed.right {
+  inset: 50% var(--md-comp-toolbar-external-space) auto auto;
 }
 
-nav.toolbar:is(.max, .docked).fixed,
-nav.toolbar:is(.max, .docked).fixed.bottom {
+#{$_docked}.fixed {
   inset: auto 0 0 0;
   transform: none;
   padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
 }
 
-nav.toolbar:is(.max, .docked).fixed.top {
+#{$_docked}.fixed.top {
   inset: 0 0 auto 0;
   transform: none;
   padding-bottom: 8px;

package/src/sass/components/forms/_checkboxes.scss

@@ -39,19 +39,21 @@ label:has(> [type="checkbox"]):not(.switch),
   -webkit-tap-highlight-color: transparent;
   color: var(--md-sys-color-on-surface);
   @include typescale("body-large");
-  font-family: $font-stack;
 }
 
-nav:has(> label > [type="checkbox"]:not(.switch *)),
-nav:has(> .checkbox) {
+// A row of checkboxes is a group of controls, not navigation - see rule 4 in
+// SEMANTICS.md. `.inline` is the documented hook; the bare <nav> is the older
+// markup and still works. _radio-buttons.scss carries the same pair.
+:is(nav, .inline):has(> label > [type="checkbox"]:not(.switch *)),
+:is(nav, .inline):has(> .checkbox) {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 24px;
 }
 
-nav > label:has(> [type="checkbox"]):not(.switch),
-nav > .checkbox {
+:is(nav, .inline) > label:has(> [type="checkbox"]):not(.switch),
+:is(nav, .inline) > .checkbox {
   display: inline-flex;
 }
 
@@ -80,17 +82,32 @@ label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
   }
 
   &:hover {
-    box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+    @include state-layer-ring(
+    var(--md-comp-checkbox-state-layer-size),
+    var(--md-comp-checkbox-container-size),
+    var(--md-sys-color-on-surface),
+    "hover"
+  );
   }
 
   &:checked:hover,
   &:indeterminate:hover {
-    box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+    @include state-layer-ring(
+    var(--md-comp-checkbox-state-layer-size),
+    var(--md-comp-checkbox-container-size),
+    var(--md-sys-color-primary),
+    "hover"
+  );
   }
 
   &:focus-visible,
   &.tabbed:focus {
-    box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+    @include state-layer-ring(
+    var(--md-comp-checkbox-state-layer-size),
+    var(--md-comp-checkbox-container-size),
+    var(--md-sys-color-primary),
+    "focus"
+  );
     outline: none;
   }
 
@@ -109,7 +126,12 @@ label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
 
   &.invalid:hover,
   &[aria-invalid="true"]:hover {
-    box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-error) 8%, transparent);
+    @include state-layer-ring(
+    var(--md-comp-checkbox-state-layer-size),
+    var(--md-comp-checkbox-container-size),
+    var(--md-sys-color-error),
+    "hover"
+  );
   }
 
   &:disabled {
@@ -239,16 +261,31 @@ $_cb-span: "*:not(.switch) > [type='checkbox'] + span:not(.lever, .supporting-te
 }
 
 *:not(.switch) > [type="checkbox"]:hover + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
-  box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  @include state-layer-ring(
+    var(--md-comp-checkbox-state-layer-size),
+    var(--md-comp-checkbox-container-size),
+    var(--md-sys-color-on-surface),
+    "hover"
+  );
 }
 
 *:not(.switch) > [type="checkbox"]:is(:checked, :indeterminate):hover + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
-  box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+  @include state-layer-ring(
+    var(--md-comp-checkbox-state-layer-size),
+    var(--md-comp-checkbox-container-size),
+    var(--md-sys-color-primary),
+    "hover"
+  );
 }
 
 *:not(.switch) > [type="checkbox"]:focus-visible + span:not(.lever, .supporting-text, .character-counter, .file-path)::before,
 *:not(.switch) > [type="checkbox"].tabbed:focus + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
-  box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+  @include state-layer-ring(
+    var(--md-comp-checkbox-state-layer-size),
+    var(--md-comp-checkbox-container-size),
+    var(--md-sys-color-primary),
+    "focus"
+  );
 }
 
 *:not(.switch) > [type="checkbox"].invalid + span:not(.lever, .supporting-text, .character-counter, .file-path)::before,

package/src/sass/components/forms/_fieldset.scss

@@ -4,7 +4,7 @@
 //
 // Anatomy is the HTML. A <fieldset> is the group. A <legend> is the
 // headline. Direct children are the fields — .field, radios, switches,
-// a <nav> of radios, a trailing <small> as supporting text. No wrapper
+// a .inline row of radios, a trailing <small> as supporting text. No wrapper
 // class. .filled / .border / .rounded are helpers markup cannot express.
 //
 // M3 has no fieldset component. Tokens follow the outlined grouping
@@ -49,7 +49,7 @@ fieldset {
     background-color: transparent;
     @include typescale("title-small");
 
-    > i {
+    > #{$icon} {
       font-size: 18px;
       width: 18px;
       height: 18px;
@@ -64,7 +64,7 @@ fieldset {
     margin-block-start: 16px;
   }
 
-  // Switches are inline-flex. Make a bare group stack; a <nav> keeps
+  // Switches are inline-flex. Make a bare group stack; .inline keeps
   // radios on one line. Consecutive 48dp rows don't need the 16dp gap.
   > label,
   > .switch {
@@ -112,7 +112,7 @@ fieldset[disabled] {
     transparent
   );
 
-  > legend > i {
+  > legend > #{$icon} {
     color: var(--md-comp-fieldset-legend-color);
   }
 }

package/src/sass/components/forms/_file-input.scss

@@ -12,6 +12,10 @@
 
   input.file-path { width: 100%; }
 
+  // The trigger. `label.button` is the documented form - it wraps the file
+  // input, which is how clicking it opens the picker with no script. <button>
+  // and .btn are the older markup and still work.
+  > label.button,
   > button,
   > .btn {
     position: relative;
@@ -24,7 +28,10 @@
     cursor: pointer;
   }
 
-  input[type=file] {
+  // Scoped to the trigger, not to .file-field. `inset: 0` against the field
+  // stretched the invisible input across the whole row, so clicking the path
+  // display - or any empty space - opened the file picker.
+  :is(label.button, button, .btn) input[type=file] {
     position: absolute;
     inset: 0;
     cursor: pointer;

package/src/sass/components/forms/_index.scss

@@ -4,7 +4,7 @@
 @forward 'switches';
 @forward 'select';
 @forward 'file-input';
-@forward 'range';
+@forward 'slider';
 @forward 'fieldset';
 
 label {