@expressivecss/expressive 0.10.0 → 0.11.0

package/dist/js/expressive.mjs

@@ -1,9 +1,9 @@
 import {
   version
-} from "./chunks/chunk-PB5L3EXF.mjs";
+} from "./chunks/chunk-PMBPAFAS.mjs";
 import {
   AutoInit
-} from "./chunks/chunk-ZIZVUWRL.mjs";
+} from "./chunks/chunk-7GKXUG4B.mjs";
 import "./chunks/chunk-WWPAPHMA.mjs";
 import {
   Slider
@@ -13,7 +13,7 @@ import {
 } from "./chunks/chunk-GY2Z5CJ2.mjs";
 import {
   Tabs
-} from "./chunks/chunk-YFXEJ7GR.mjs";
+} from "./chunks/chunk-IMUPRRI6.mjs";
 import {
   Timepicker
 } from "./chunks/chunk-D4UZ4HFN.mjs";
@@ -31,7 +31,7 @@ import {
 } from "./chunks/chunk-XDB3G6RL.mjs";
 import {
   ScrollSpy
-} from "./chunks/chunk-TZZ24ZQS.mjs";
+} from "./chunks/chunk-FRB7TOCS.mjs";
 import {
   ButtonGroup
 } from "./chunks/chunk-XO5WX3TK.mjs";
@@ -43,23 +43,23 @@ import {
 } from "./chunks/chunk-7UXHSYIA.mjs";
 import {
   Carousel
-} from "./chunks/chunk-AOGFNMXS.mjs";
+} from "./chunks/chunk-I5KR22BY.mjs";
 import {
   CharacterCounter
 } from "./chunks/chunk-PIIAEYAJ.mjs";
 import {
   Chips
-} from "./chunks/chunk-ZZBZI2XN.mjs";
+} from "./chunks/chunk-CDW6WIRT.mjs";
 import {
   Autocomplete
-} from "./chunks/chunk-7MM4VJJO.mjs";
+} from "./chunks/chunk-AYYYWUJ4.mjs";
 import {
   Datepicker
-} from "./chunks/chunk-QYCYP443.mjs";
+} from "./chunks/chunk-74N6U5JJ.mjs";
 import "./chunks/chunk-SLFNPY5M.mjs";
 import {
   FormSelect
-} from "./chunks/chunk-G576EP5O.mjs";
+} from "./chunks/chunk-XFJ452AZ.mjs";
 import {
   Menu
 } from "./chunks/chunk-TK6PX2GC.mjs";

package/dist/js/internal/components/autocomplete.mjs

@@ -1,6 +1,6 @@
 import {
   Autocomplete
-} from "../../chunks/chunk-7MM4VJJO.mjs";
+} from "../../chunks/chunk-AYYYWUJ4.mjs";
 import "../../chunks/chunk-TK6PX2GC.mjs";
 import "../../chunks/chunk-MISGHDUU.mjs";
 import "../../chunks/chunk-QSQ24FYT.mjs";

package/dist/js/internal/components/carousel.mjs

@@ -1,6 +1,6 @@
 import {
   Carousel
-} from "../../chunks/chunk-AOGFNMXS.mjs";
+} from "../../chunks/chunk-I5KR22BY.mjs";
 import "../../chunks/chunk-MISGHDUU.mjs";
 import "../../chunks/chunk-QSQ24FYT.mjs";
 export {

package/dist/js/internal/components/chips.mjs

@@ -1,7 +1,7 @@
 import {
   Chips
-} from "../../chunks/chunk-ZZBZI2XN.mjs";
-import "../../chunks/chunk-7MM4VJJO.mjs";
+} from "../../chunks/chunk-CDW6WIRT.mjs";
+import "../../chunks/chunk-AYYYWUJ4.mjs";
 import "../../chunks/chunk-TK6PX2GC.mjs";
 import "../../chunks/chunk-MISGHDUU.mjs";
 import "../../chunks/chunk-QSQ24FYT.mjs";

package/dist/js/internal/components/datepicker.mjs

@@ -1,8 +1,8 @@
 import {
   Datepicker
-} from "../../chunks/chunk-QYCYP443.mjs";
+} from "../../chunks/chunk-74N6U5JJ.mjs";
 import "../../chunks/chunk-SLFNPY5M.mjs";
-import "../../chunks/chunk-G576EP5O.mjs";
+import "../../chunks/chunk-XFJ452AZ.mjs";
 import "../../chunks/chunk-TK6PX2GC.mjs";
 import "../../chunks/chunk-MISGHDUU.mjs";
 import "../../chunks/chunk-QSQ24FYT.mjs";

package/dist/js/internal/components/index.mjs

@@ -7,7 +7,7 @@ import {
 } from "../../chunks/chunk-GY2Z5CJ2.mjs";
 import {
   Tabs
-} from "../../chunks/chunk-YFXEJ7GR.mjs";
+} from "../../chunks/chunk-IMUPRRI6.mjs";
 import {
   Timepicker
 } from "../../chunks/chunk-D4UZ4HFN.mjs";
@@ -25,7 +25,7 @@ import {
 } from "../../chunks/chunk-XDB3G6RL.mjs";
 import {
   ScrollSpy
-} from "../../chunks/chunk-TZZ24ZQS.mjs";
+} from "../../chunks/chunk-FRB7TOCS.mjs";
 import {
   ButtonGroup
 } from "../../chunks/chunk-XO5WX3TK.mjs";
@@ -37,23 +37,23 @@ import {
 } from "../../chunks/chunk-7UXHSYIA.mjs";
 import {
   Carousel
-} from "../../chunks/chunk-AOGFNMXS.mjs";
+} from "../../chunks/chunk-I5KR22BY.mjs";
 import {
   CharacterCounter
 } from "../../chunks/chunk-PIIAEYAJ.mjs";
 import {
   Chips
-} from "../../chunks/chunk-ZZBZI2XN.mjs";
+} from "../../chunks/chunk-CDW6WIRT.mjs";
 import {
   Autocomplete
-} from "../../chunks/chunk-7MM4VJJO.mjs";
+} from "../../chunks/chunk-AYYYWUJ4.mjs";
 import {
   Datepicker
-} from "../../chunks/chunk-QYCYP443.mjs";
+} from "../../chunks/chunk-74N6U5JJ.mjs";
 import "../../chunks/chunk-SLFNPY5M.mjs";
 import {
   FormSelect
-} from "../../chunks/chunk-G576EP5O.mjs";
+} from "../../chunks/chunk-XFJ452AZ.mjs";
 import {
   Menu
 } from "../../chunks/chunk-TK6PX2GC.mjs";

package/dist/js/internal/components/registry.mjs

@@ -1,27 +1,27 @@
 import {
   AUTO_INIT_COMPONENTS,
   AutoInit
-} from "../../chunks/chunk-ZIZVUWRL.mjs";
+} from "../../chunks/chunk-7GKXUG4B.mjs";
 import "../../chunks/chunk-WWPAPHMA.mjs";
 import "../../chunks/chunk-JKNPQQWY.mjs";
 import "../../chunks/chunk-GY2Z5CJ2.mjs";
-import "../../chunks/chunk-YFXEJ7GR.mjs";
+import "../../chunks/chunk-IMUPRRI6.mjs";
 import "../../chunks/chunk-D4UZ4HFN.mjs";
 import "../../chunks/chunk-JODJAGFS.mjs";
 import "../../chunks/chunk-N3UHGN3N.mjs";
 import "../../chunks/chunk-JNPIWFJT.mjs";
 import "../../chunks/chunk-XDB3G6RL.mjs";
-import "../../chunks/chunk-TZZ24ZQS.mjs";
+import "../../chunks/chunk-FRB7TOCS.mjs";
 import "../../chunks/chunk-XO5WX3TK.mjs";
 import "../../chunks/chunk-VAS6JQ6P.mjs";
 import "../../chunks/chunk-7UXHSYIA.mjs";
-import "../../chunks/chunk-AOGFNMXS.mjs";
+import "../../chunks/chunk-I5KR22BY.mjs";
 import "../../chunks/chunk-PIIAEYAJ.mjs";
-import "../../chunks/chunk-ZZBZI2XN.mjs";
-import "../../chunks/chunk-7MM4VJJO.mjs";
-import "../../chunks/chunk-QYCYP443.mjs";
+import "../../chunks/chunk-CDW6WIRT.mjs";
+import "../../chunks/chunk-AYYYWUJ4.mjs";
+import "../../chunks/chunk-74N6U5JJ.mjs";
 import "../../chunks/chunk-SLFNPY5M.mjs";
-import "../../chunks/chunk-G576EP5O.mjs";
+import "../../chunks/chunk-XFJ452AZ.mjs";
 import "../../chunks/chunk-TK6PX2GC.mjs";
 import "../../chunks/chunk-MISGHDUU.mjs";
 import "../../chunks/chunk-EP3CVKB5.mjs";

package/dist/js/internal/components/scrollspy.mjs

@@ -1,6 +1,6 @@
 import {
   ScrollSpy
-} from "../../chunks/chunk-TZZ24ZQS.mjs";
+} from "../../chunks/chunk-FRB7TOCS.mjs";
 import "../../chunks/chunk-QSQ24FYT.mjs";
 export {
   ScrollSpy

package/dist/js/internal/components/select.mjs

@@ -1,6 +1,6 @@
 import {
   FormSelect
-} from "../../chunks/chunk-G576EP5O.mjs";
+} from "../../chunks/chunk-XFJ452AZ.mjs";
 import "../../chunks/chunk-TK6PX2GC.mjs";
 import "../../chunks/chunk-MISGHDUU.mjs";
 import "../../chunks/chunk-QSQ24FYT.mjs";

package/dist/js/internal/components/tabs.mjs

@@ -1,7 +1,7 @@
 import {
   Tabs
-} from "../../chunks/chunk-YFXEJ7GR.mjs";
-import "../../chunks/chunk-AOGFNMXS.mjs";
+} from "../../chunks/chunk-IMUPRRI6.mjs";
+import "../../chunks/chunk-I5KR22BY.mjs";
 import "../../chunks/chunk-MISGHDUU.mjs";
 import "../../chunks/chunk-QSQ24FYT.mjs";
 export {

package/dist/js/modular.mjs

@@ -1,9 +1,9 @@
 import {
   version
-} from "./chunks/chunk-PB5L3EXF.mjs";
+} from "./chunks/chunk-PMBPAFAS.mjs";
 import {
   AutoInit
-} from "./chunks/chunk-ZIZVUWRL.mjs";
+} from "./chunks/chunk-7GKXUG4B.mjs";
 import "./chunks/chunk-WWPAPHMA.mjs";
 import {
   Slider
@@ -13,7 +13,7 @@ import {
 } from "./chunks/chunk-GY2Z5CJ2.mjs";
 import {
   Tabs
-} from "./chunks/chunk-YFXEJ7GR.mjs";
+} from "./chunks/chunk-IMUPRRI6.mjs";
 import {
   Timepicker
 } from "./chunks/chunk-D4UZ4HFN.mjs";
@@ -31,7 +31,7 @@ import {
 } from "./chunks/chunk-XDB3G6RL.mjs";
 import {
   ScrollSpy
-} from "./chunks/chunk-TZZ24ZQS.mjs";
+} from "./chunks/chunk-FRB7TOCS.mjs";
 import {
   ButtonGroup
 } from "./chunks/chunk-XO5WX3TK.mjs";
@@ -43,23 +43,23 @@ import {
 } from "./chunks/chunk-7UXHSYIA.mjs";
 import {
   Carousel
-} from "./chunks/chunk-AOGFNMXS.mjs";
+} from "./chunks/chunk-I5KR22BY.mjs";
 import {
   CharacterCounter
 } from "./chunks/chunk-PIIAEYAJ.mjs";
 import {
   Chips
-} from "./chunks/chunk-ZZBZI2XN.mjs";
+} from "./chunks/chunk-CDW6WIRT.mjs";
 import {
   Autocomplete
-} from "./chunks/chunk-7MM4VJJO.mjs";
+} from "./chunks/chunk-AYYYWUJ4.mjs";
 import {
   Datepicker
-} from "./chunks/chunk-QYCYP443.mjs";
+} from "./chunks/chunk-74N6U5JJ.mjs";
 import "./chunks/chunk-SLFNPY5M.mjs";
 import {
   FormSelect
-} from "./chunks/chunk-G576EP5O.mjs";
+} from "./chunks/chunk-XFJ452AZ.mjs";
 import {
   Menu
 } from "./chunks/chunk-TK6PX2GC.mjs";

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

@@ -135,7 +135,8 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     _setupMenu(): void;
     _removeMenu(): void;
     _handleInputBlur: () => void;
-    _handleInputKeyup: (e: KeyboardEvent) => void;
+    _handleInputKeyup: () => void;
+    _handleInput: () => void;
     _handleInputFocus: () => void;
     _inputChangeDetection: (value: string) => void;
     _handleInputKeydown: (e: KeyboardEvent) => void;

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

@@ -243,6 +243,7 @@ export declare class Datepicker extends Component<DatepickerOptions> {
      */
     static _escape(value: unknown): string;
     static _isDate(obj: any): boolean;
+    private static _parseDate;
     static _isWeekend(date: any): boolean;
     /**
      * @deprecated as this function has no effect without any return statement or global parameter setter.

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

@@ -31,17 +31,18 @@ export interface ScrollSpyOptions extends BaseOptions {
  */
 export declare class ScrollSpy extends Component<ScrollSpyOptions> {
     static _elements: ScrollSpy[];
-    private static _observer;
-    private static _ratios;
     private static _active;
+    private _observer;
+    private _ratio;
+    private _link;
+    private _offset;
+    private _offsetPriority;
     constructor(el: HTMLElement, options: Partial<ScrollSpyOptions>);
     static get defaults(): ScrollSpyOptions;
     static init(el: HTMLElement, options?: Partial<ScrollSpyOptions>): ScrollSpy;
     static init(els: InitElements<InitElement>, options?: Partial<ScrollSpyOptions>): ScrollSpy[];
     static getInstance(el: HTMLElement): ScrollSpy;
     destroy(): void;
-    private static _ensureObserver;
-    private static _onIntersect;
     private static _syncActive;
     private static _nearestAbove;
     private static _clearActive;

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

@@ -36,9 +36,11 @@ export declare class FormSelect extends Component<FormSelectOptions> {
     selectOptions: (HTMLOptionElement | HTMLOptGroupElement)[];
     private _values;
     private _createdWrapper;
-    private _originalLabelFor;
+    private _originalLabels;
+    private _labelPlaceholder;
     private _form;
     private _resetTimer;
+    private _validationMessage;
     nativeTabIndex: number;
     constructor(el: HTMLSelectElement, options: FormSelectOptions);
     static get defaults(): FormSelectOptions;
@@ -71,6 +73,10 @@ export declare class FormSelect extends Component<FormSelectOptions> {
     private _setupOptionHandlers;
     private _removeOptionHandlers;
     _handleSelectChange: () => void;
+    private _handleInvalid;
+    private _handleNativeFocus;
+    private _syncValidationError;
+    private _clearValidationError;
     private _handleReset;
     _handleOptionKeydown: (e: KeyboardEvent) => void;
     _handleOptionClick: (e: MouseEvent | KeyboardEvent) => 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.10.0";
+export declare const version = "0.11.0";
 export type * from './components/autocomplete';
 export type * from './components/appBar';
 export type * from './components/buttons';

package/package.json

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

package/src/sass/abstracts/_mixins.scss

@@ -183,17 +183,25 @@ $_state-layers: ("hover", "focus", "pressed", "dragged");
 // label is drawn elsewhere - a hidden radio that cannot be focused has no
 // arrow-key model left.
 //
-// _chips.scss and _navigation-rail.scss each carry their own copy of this and
-// predate the mixin; fold them in when either is next touched.
-@mixin visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
+// `$important` is for the `.visually-hidden` utility, which has to beat a
+// consumer's own `position` or `padding` the way `.hide` beats their
+// `display`. Component rules leave it off.
+//
+// _navigation-rail.scss carries its own copy, which predates the mixin and
+// omits the margin and white-space; fold it in when it is next touched.
+@mixin visually-hidden($important: false) {
+  $flag: null;
+  @if $important { $flag: !important; }
+
+  position: absolute $flag;
+  width: 1px $flag;
+  height: 1px $flag;
+  margin: -1px $flag;
+  padding: 0 $flag;
+  border: 0 $flag;
+  overflow: hidden $flag;
+  clip-path: inset(50%) $flag;
+  white-space: nowrap $flag;
 }
 
 // Focus with Keyboard

package/src/sass/components/_buttons.scss

@@ -346,3 +346,48 @@ $_extend-sizes: (
 :where(#{$_btn}).disabled {
   @include btn-disabled;
 }
+
+// Reflow. A label that does not fit (enlarged text, 200% zoom, a narrow
+// column) wraps between words and the container grows, instead of running
+// out of the button or out of its parent. The size's container height becomes
+// a minimum, so a label that fits renders exactly as before. The 4dp block
+// padding only shows once the label wraps: it keeps the lines off the edges
+// and fits inside every size's height with an outline and a line to spare.
+//
+// A minimum rather than a padding-derived height, because hosts restate
+// `padding` far more often than `height`: a clear action or a list's trailing
+// button that sets `padding: 0 12px` would otherwise collapse to one line of
+// text. The cost is the other way round - a rule that sets a smaller `height`
+// has to set `min-height` too, or name the size with the container-height
+// token instead.
+//
+// `break-word`, not `anywhere`: `anywhere` also lowers the min-content width
+// to a single character, so two buttons in a row a few pixels too narrow both
+// shrink and split mid-word ("Cance|l") where they used to sit at full width.
+// With `min-width: 0` on the label <span>, `break-word` still splits a single
+// word longer than the parent. A bare text label has no element to take that
+// minimum, so such a word overflows as it always did.
+//
+// Fixed geometry keeps `nowrap` and the fixed height: `.circle` and the FABs,
+// the extended FAB, the chip's delete button, the carousel's dots, Timepicker's
+// AM/PM controls, and hosts whose layout assumes one line. Button groups set item widths in
+// script and would rewrap mid-press; a split button's two halves share one
+// height; toolbars, the top app bar, dialog and sheet headers, navigation
+// bars and rails, tabs, pagination and snackbar actions are fixed-height
+// slots. `:where()` keeps the whole rule at zero specificity; it only has to
+// come after the base rule above, whose `height` and `nowrap` it replaces.
+$_fixed: ".circle, .extend, .indicator-item, .chip .close, :is(.timepicker-container, .time-picker-container) :is(.am-btn, .pm-btn), :is(.button-group, .split-button, .toolbar, .navigation-bar, .navigation-rail, .snackbar) > *, header > :is(nav, .bar) > *, :is(.pagination, .tabs, .snackbar > nav, dialog > header) *";
+
+:where(#{$_btn}):where(:not(#{$_fixed})) {
+  height: auto;
+  min-height: var(--md-comp-filled-button-container-height);
+  max-width: 100%;
+  padding-block: 4px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  text-align: center;
+
+  > * {
+    min-width: 0;
+  }
+}

package/src/sass/components/_chips.scss

@@ -21,6 +21,10 @@
   margin: 0;
   min-height: 32px;
   height: auto;
+  // 4dp keeps wrapped lines off the edges. It is also exactly what a 24dp
+  // avatar or delete target leaves in the 32dp container, so a chip that fits
+  // on one line keeps its height.
+  padding-block: 4px;
   padding-left: var(--padding);
   padding-right: var(--padding);
   font-size: var(--font-size);
@@ -65,15 +69,7 @@
 // Filter chip. The checkbox carries the state and the form value; the label is
 // the chip. Kept focusable rather than `display: none` so it stays reachable.
 .chip-input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
+  @include visually-hidden;
 }
 
 .chip-input:checked + .chip {

package/src/sass/components/_dialog.scss

@@ -141,13 +141,6 @@ dialog > :is(form, nav):last-child {
   padding: 0 24px 24px;
   border: 0;
   background: none;
-
-  > :is(button, a.button):not(.icon-button, .circle, .extend) {
-    max-width: 100%;
-    height: auto;
-    min-height: var(--md-comp-filled-button-container-height, 40px);
-    white-space: normal;
-  }
 }
 
 dialog:not(

package/src/sass/components/_navbar.scss

@@ -5,7 +5,7 @@
 // Anatomy is the HTML. A header whose child is a nav is a top app bar.
 // Headings are the headline, icon-only links/buttons are the leading and
 // trailing actions, <menu> / <ul> hold text destinations. Helpers are only
-// for variants the markup cannot express: .center, .medium, .large, .fixed.
+// for variants the markup cannot express: .center, .medium, .large.
 // `.medium` and `.large` are the Expressive flexible bars.
 // Destinations at the bottom of the screen are nav.navigation-bar, not this.
 //
@@ -490,12 +490,12 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
   }
 }
 
-// Pin the bar. On scroll, fill with surface-container so it separates
+// Pin every top app bar. On scroll, fill with surface-container so it separates
 // from the body (M3 Expressive). The animation only drives the mix
 // progress; a utility class on the header sets background-color itself
 // and is not overwritten. Without animation-timeline the bar stays at
 // rest (surface), the spec default.
-header.fixed:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
+header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
   position: sticky;
   top: 0;
   z-index: 997;

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

@@ -5,7 +5,8 @@
 // Anatomy is the HTML. A <fieldset> is the group. A <legend> is the
 // headline. Direct children are the fields — .field, radios, switches,
 // a .inline row of radios, a trailing <small> as supporting text. No wrapper
-// class. .filled / .border / .rounded are helpers markup cannot express.
+// class. .filled / .border / .rounded / .plain are helpers markup cannot
+// express.
 //
 // M3 has no fieldset component. Tokens follow the outlined grouping
 // container used around related form content, and the outlined text-field
@@ -99,6 +100,24 @@ fieldset.rounded {
   --md-comp-fieldset-container-shape: 12px;
 }
 
+// Plain groups radios or checkboxes inside a surface that already frames them,
+// such as a card, a dialog or a filled section. No outline, fill, padding or
+// sibling margin, and the legend starts where the content starts instead of
+// sitting in a notch 4dp outside it.
+fieldset.plain {
+  --md-comp-fieldset-container-color: transparent;
+  --md-comp-fieldset-outline-width: 0;
+
+  margin: 0;
+  padding: 0;
+
+  > legend {
+    max-width: 100%;
+    margin-inline-start: 0;
+    padding-inline: 0;
+  }
+}
+
 fieldset:disabled,
 fieldset[disabled] {
   --md-comp-fieldset-outline-color: color-mix(

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

@@ -2,7 +2,9 @@
 
 .file-field {
   display: grid;
-  grid-template-columns: min-content auto;
+  // Short triggers keep their intrinsic width; long labels leave room for
+  // the selected filename instead of consuming the entire field.
+  grid-template-columns: fit-content(50%) minmax(0, 1fr);
   gap: 10px;
   //position: relative;
 
@@ -18,10 +20,16 @@
   > label.button,
   > button,
   > .btn {
+    display: block;
+    align-content: center;
+    overflow-wrap: break-word;
     position: relative;
     overflow: hidden;
-    height: 3rem;
-    line-height: 3rem;
+    // A minimum rather than a height, so a wrapped label grows the trigger.
+    // `start` keeps the grid from stretching it to the 56dp text field.
+    align-self: start;
+    min-height: 3rem;
+    min-width: 0;
   }
 
   span {

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

@@ -112,8 +112,9 @@ select.browser-default {
     transform: rotate(180deg);
   }
 
-  // Keep the native select in the field's box so constraint-validation
-  // bubbles land on the control, not at (0, 0).
+  // Keep native validation focus available and its geometry at the field.
+  // The aria-hidden wrapper excludes it from the accessibility tree; JS
+  // forwards native focus to the visible combobox after reporting finishes.
   .hide-select {
     position: absolute;
     inset: 0;

package/src/sass/utilities/_helpers.scss

@@ -7,6 +7,24 @@
 // Positioning
 .valign-wrapper { display: flex; align-items: center; }
 
+// Flex layout. One declaration each; combine on the container, and pair with
+// .gap-* from _spacing.scss for the space between items. Row direction and
+// start alignment are the flex defaults, so only the overrides get a class.
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.flex-column { flex-direction: column; }
+.flex-wrap { flex-wrap: wrap; }
+.justify-start { justify-content: flex-start; }
+.justify-center { justify-content: center; }
+.justify-end { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.align-start { align-items: flex-start; }
+.align-center { align-items: center; }
+.align-end { align-items: flex-end; }
+.align-stretch { align-items: stretch; }
+.flex-1 { flex: 1 1 0; }
+.flex-none { flex: none; }
+
 // Text alignment
 .left-align { text-align: left; }
 .right-align { text-align: right }

package/src/sass/utilities/_spacing.scss

@@ -1,4 +1,4 @@
-// Margin and padding scale: .m-3, .pt-2, .px-4, .my-auto, ...
+// Margin, padding and gap scale: .m-3, .pt-2, .px-4, .my-auto, .gap-2, ...
 //
 // Shortcut x value x direction, all !important so a helper wins over the
 // component it is applied to. Edit the maps here to change the scale.
@@ -37,3 +37,10 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
     }
   }
 }
+
+// Gap on the same scale for flex and grid containers: .gap-0 ... .gap-6.
+@each $name, $value in $spacing-values {
+  @if $name != "auto" {
+    .gap-#{$name} { gap: $value !important; }
+  }
+}

package/src/sass/utilities/_visibility.scss

@@ -5,6 +5,11 @@
 
 .hide { display: none !important; }
 
+// Hidden from sight, still announced: a visible label's longer twin, an
+// icon-only control's name, a live region's text. Important for the same
+// reason `.hide` is.
+.visually-hidden { @include visually-hidden(true); }
+
 .hide-on-compact-only,
 .hide-on-small-only,
 .hide-on-small-and-down {