@charcuterie/ui 4.21.0 → 4.22.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Ghadyani
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -210,7 +210,7 @@ M5 spent an hour on the second and third of these, so M5b and M6 do not have to:
 // the PROJECT ROOT — `ui` declares its siblings as `workspace:*`, and that
 // descriptor cannot resolve outside charcuterie's own workspace. Bare keys, not
 // `@charcuterie/ui/@charcuterie/tokens`: the scoped form yields a different
-// locator string from the app's own dependency on the same directory, and Yarn
+// locator string from the app's own dependency on the same directory, and pnpm
 // rejects the pair as conflicting.
 "resolutions": {
   "@charcuterie/logic": "portal:../charcuterie/packages/logic",
@@ -233,7 +233,7 @@ TypeError: Cannot read properties of null (reading 'useRef')
 ```
 
 which mentions neither symlinks nor React identity. Keep the line after publish: it costs
-nothing with one copy, and it is the difference between a working `yarn link` session and
+nothing with one copy, and it is the difference between a working `pnpm link` session and
 an hour of confusion.
 
 ## How a component is put together
@@ -256,9 +256,9 @@ and fails on any candidate Tailwind cannot generate.
 ## Tests
 
 ```bash
-yarn vitest run --project ui         # Node: class maps, status switches, clamping, boundaries
-yarn vitest run --project ui-dom     # chromium: Component.test.tsx — behaviour, keyboard, ARIA
-yarn vitest run --project storybook  # chromium: every story renders, axe at test: "error"
+pnpm vitest run --project ui         # Node: class maps, status switches, clamping, boundaries
+pnpm vitest run --project ui-dom     # chromium: Component.test.tsx — behaviour, keyboard, ARIA
+pnpm vitest run --project storybook  # chromium: every story renders, axe at test: "error"
 ```
 
 **Stories are demos and carry no assertions**
@@ -319,7 +319,7 @@ rename breaks only the rendered page).
    from effects, so before those run a `RovingFocus` has no active value and a
    `SinglePicker` / `VisibilityGroup` has no selected key — only a pending one. Two of M4's
    four bugs were exactly that, and the isolated story runner saw neither —
-   `yarn smoke:storybook` did.
+   `pnpm smoke:storybook` did.
 7. **If it declares `@container`, every `StoryCell` holding it needs `align="stretch"`.**
    `container-type: inline-size` forbids the element from being sized by its own
    contents, so a default (shrink-to-fit) cell collapses it to min-content and every

package/dist/AdaptiveGrid/AdaptiveGrid.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { GridLayout } from "./chooseColumns.ts";
 import type { BlockSizeResolver } from "./useAdaptiveColumns.ts";
 export type AdaptiveGridProps = {
     /**
@@ -35,6 +36,8 @@ export type AdaptiveGridProps = {
      * would be worse than one that is an item out.
      */
     itemCount?: number;
+    /** Fill the container with readable columns instead of spending height first. */
+    layout?: GridLayout;
     /** The most columns the automatic answer will take. */
     maxColumns?: number;
     /** The narrowest a column may be, in CSS px. */
@@ -90,5 +93,5 @@ export type AdaptiveGridProps = {
  * need every count to survive the scan; an inline style needs
  * none.
  */
-export declare const AdaptiveGrid: ({ blockSizeResolver, children, chromeBlockSize, className, columns, itemBlockSize, itemCount, maxColumns, minColumnInlineSize, storageKey, }: AdaptiveGridProps) => ReactNode;
+export declare const AdaptiveGrid: ({ blockSizeResolver, children, chromeBlockSize, className, columns, itemBlockSize, itemCount, layout: gridLayout, maxColumns, minColumnInlineSize, storageKey, }: AdaptiveGridProps) => ReactNode;
 //# sourceMappingURL=AdaptiveGrid.d.ts.map

package/dist/AdaptiveGrid/AdaptiveGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdaptiveGrid.d.ts","sourceRoot":"","sources":["../../src/AdaptiveGrid/AdaptiveGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAGhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;OAKG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gDAAgD;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,YAAY,GAAI,8IAW1B,iBAAiB,KAAG,SAuCtB,CAAA"}
+{"version":3,"file":"AdaptiveGrid.d.ts","sourceRoot":"","sources":["../../src/AdaptiveGrid/AdaptiveGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAGhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;OAKG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iFAAiF;IACjF,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gDAAgD;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,YAAY,GAAI,kKAY1B,iBAAiB,KAAG,SAyCtB,CAAA"}

package/dist/AdaptiveGrid/AdaptiveGrid.js

@@ -48,12 +48,13 @@ import { useAdaptiveColumns } from "./useAdaptiveColumns.js";
  * need every count to survive the scan; an inline style needs
  * none.
  */
-export const AdaptiveGrid = ({ blockSizeResolver, children, chromeBlockSize, className, columns, itemBlockSize, itemCount, maxColumns, minColumnInlineSize, storageKey, }) => {
+export const AdaptiveGrid = ({ blockSizeResolver, children, chromeBlockSize, className, columns, itemBlockSize, itemCount, layout: gridLayout = "height-first", maxColumns, minColumnInlineSize, storageKey, }) => {
     const layout = useAdaptiveColumns({
         blockSizeResolver,
         chromeBlockSize,
         itemBlockSize,
         itemCount: itemCount ?? Children.count(children),
+        layout: gridLayout,
         maxAutoColumns: maxColumns,
         minColumnInlineSize,
         storageKey,
@@ -64,6 +65,7 @@ export const AdaptiveGrid = ({ blockSizeResolver, children, chromeBlockSize, cla
     // a one-column cap is the same bug as no cap at all, upside down.
     const contentMaxInlineSize = getContentMaxInlineSize({
         columns: drawnColumns,
+        layout: gridLayout,
     });
     return (_jsx("div", { className: toClassName("flex justify-center", className), ref: layout.containerRef, children: _jsx("div", { className: "grid w-full gap-4 [&>*]:min-w-0", style: {
                 gridTemplateColumns: `repeat(${drawnColumns}, minmax(0, 1fr))`,

package/dist/AdaptiveGrid/AdaptiveGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdaptiveGrid.js","sourceRoot":"","sources":["../../src/AdaptiveGrid/AdaptiveGrid.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAgD5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,iBAAiB,EACjB,QAAQ,EACR,eAAe,EACf,SAAS,EACT,OAAO,EACP,aAAa,EACb,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,UAAU,GACQ,EAAa,EAAE;IACjC,MAAM,MAAM,GAAG,kBAAkB,CAAC;QAChC,iBAAiB;QACjB,eAAe;QACf,aAAa;QACb,SAAS,EAAE,SAAS,IAAI,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;QAChD,cAAc,EAAE,UAAU;QAC1B,mBAAmB;QACnB,UAAU;KACX,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,OAAO,IAAI,MAAM,CAAC,OAAO,CAAA;IAE9C,iEAAiE;IACjE,kEAAkE;IAClE,kEAAkE;IAClE,MAAM,oBAAoB,GAAG,uBAAuB,CAAC;QACnD,OAAO,EAAE,YAAY;KACtB,CAAC,CAAA;IAEF,OAAO,CACL,cACE,SAAS,EAAE,WAAW,CACpB,qBAAqB,EACrB,SAAS,CACV,EACD,GAAG,EAAE,MAAM,CAAC,YAAY,YAExB,cACE,SAAS,EAAC,iCAAiC,EAC3C,KAAK,EAAE;gBACL,mBAAmB,EAAE,UAAU,YAAY,mBAAmB;gBAC9D,aAAa,EAAE,oBAAoB;aACpC,YAEA,QAAQ,GACL,GACF,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"AdaptiveGrid.js","sourceRoot":"","sources":["../../src/AdaptiveGrid/AdaptiveGrid.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAkD5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,iBAAiB,EACjB,QAAQ,EACR,eAAe,EACf,SAAS,EACT,OAAO,EACP,aAAa,EACb,SAAS,EACT,MAAM,EAAE,UAAU,GAAG,cAAc,EACnC,UAAU,EACV,mBAAmB,EACnB,UAAU,GACQ,EAAa,EAAE;IACjC,MAAM,MAAM,GAAG,kBAAkB,CAAC;QAChC,iBAAiB;QACjB,eAAe;QACf,aAAa;QACb,SAAS,EAAE,SAAS,IAAI,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;QAChD,MAAM,EAAE,UAAU;QAClB,cAAc,EAAE,UAAU;QAC1B,mBAAmB;QACnB,UAAU;KACX,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,OAAO,IAAI,MAAM,CAAC,OAAO,CAAA;IAE9C,iEAAiE;IACjE,kEAAkE;IAClE,kEAAkE;IAClE,MAAM,oBAAoB,GAAG,uBAAuB,CAAC;QACnD,OAAO,EAAE,YAAY;QACrB,MAAM,EAAE,UAAU;KACnB,CAAC,CAAA;IAEF,OAAO,CACL,cACE,SAAS,EAAE,WAAW,CACpB,qBAAqB,EACrB,SAAS,CACV,EACD,GAAG,EAAE,MAAM,CAAC,YAAY,YAExB,cACE,SAAS,EAAC,iCAAiC,EAC3C,KAAK,EAAE;gBACL,mBAAmB,EAAE,UAAU,YAAY,mBAAmB;gBAC9D,aAAa,EAAE,oBAAoB;aACpC,YAEA,QAAQ,GACL,GACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/AdaptiveGrid/chooseColumns.d.ts

@@ -98,11 +98,13 @@ export declare const DEFAULT_MIN_COLUMN_INLINE_SIZE_PX: number;
  * `"auto"`, or the number of columns a person explicitly asked for.
  */
 export type ColumnChoice = "auto" | number;
+/** Fill is an explicit width-first layout for media galleries and fleets. */
+export type GridLayout = "height-first" | "fill";
 /**
  * The column count the automatic rule wants, for one measured space
  * and one set of items.
  */
-export declare const chooseColumns: ({ availableBlockSize, availableInlineSize, chromeBlockSize, itemBlockSize, itemCount, maxColumns, minColumnInlineSize, }: {
+export declare const chooseColumns: ({ availableBlockSize, availableInlineSize, chromeBlockSize, itemBlockSize, itemCount, gap, layout, maxColumns, minColumnInlineSize, }: {
     /**
      * The block size the layout has to spend, in CSS px — the
      * viewport's, not the grid's.
@@ -153,6 +155,10 @@ export declare const chooseColumns: ({ availableBlockSize, availableInlineSize,
      * finished loading would be worse than one that is an item out.
      */
     itemCount: number;
+    /** Height-first by default; fill spends the available container width. */
+    layout?: GridLayout;
+    /** Space between tracks, in CSS px, used by fill. */
+    gap?: number;
     /** @see DEFAULT_MAX_AUTO_COLUMNS */
     maxColumns?: number;
     /** @see DEFAULT_MIN_COLUMN_INLINE_SIZE_PX */
@@ -183,12 +189,14 @@ export declare const chooseColumns: ({ availableBlockSize, availableInlineSize,
  * dense tables and an app of prose disagree about a measure and
  * neither is wrong.
  */
-export declare const getContentMaxInlineSize: ({ columnInlineSize, columns, gutterInlineSize, singleInlineSize, }: {
+export declare const getContentMaxInlineSize: ({ columnInlineSize, columns, gutterInlineSize, layout, singleInlineSize, }: {
     /** What one column is worth, once there are several. */
     columnInlineSize?: string;
     columns: number;
     /** Slack added on top of a multi-column cap, for the gaps. */
     gutterInlineSize?: string;
+    /** Fill uses all available width once there are multiple columns. */
+    layout?: GridLayout;
     /** The cap when there is only one column. */
     singleInlineSize?: string;
 }) => string;

package/dist/AdaptiveGrid/chooseColumns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chooseColumns.d.ts","sourceRoot":"","sources":["../../src/AdaptiveGrid/chooseColumns.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,wBAAwB,IAAI,CAAA;AAEzC;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,IAAI,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,iCAAiC,QACH,CAAA;AAE3C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAA;AAE1C;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,0HAQ3B;IACD;;;;;;;;OAQG;IACH,kBAAkB,EAAE,MAAM,CAAA;IAC1B;;;;;;;;;;;;OAYG;IACH,mBAAmB,EAAE,MAAM,CAAA;IAC3B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;;;;;;;OAUG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6CAA6C;IAC7C,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,KAAG,MA4BH,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,uBAAuB,GAAI,oEAKrC;IACD,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,OAAO,EAAE,MAAM,CAAA;IACf,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,KAAG,MAG6F,CAAA;AAEjG;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,iBAE9B;IACD,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,KAAG,YAAY,EAMf,CAAA"}
+{"version":3,"file":"chooseColumns.d.ts","sourceRoot":"","sources":["../../src/AdaptiveGrid/chooseColumns.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,wBAAwB,IAAI,CAAA;AAEzC;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,IAAI,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,iCAAiC,QACH,CAAA;AAE3C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAA;AAE1C,6EAA6E;AAC7E,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,MAAM,CAAA;AAEhD;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,uIAU3B;IACD;;;;;;;;OAQG;IACH,kBAAkB,EAAE,MAAM,CAAA;IAC1B;;;;;;;;;;;;OAYG;IACH,mBAAmB,EAAE,MAAM,CAAA;IAC3B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;;;;;;;OAUG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,qDAAqD;IACrD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6CAA6C;IAC7C,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,KAAG,MA0CH,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,uBAAuB,GAAI,4EAMrC;IACD,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,OAAO,EAAE,MAAM,CAAA;IACf,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,qEAAqE;IACrE,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,KAAG,MAK+F,CAAA;AAEnG;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,iBAE9B;IACD,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,KAAG,YAAY,EAMf,CAAA"}

package/dist/AdaptiveGrid/chooseColumns.js

@@ -99,13 +99,18 @@ export const DEFAULT_MIN_COLUMN_INLINE_SIZE_PX = Number.parseFloat(containerQuer
  * The column count the automatic rule wants, for one measured space
  * and one set of items.
  */
-export const chooseColumns = ({ availableBlockSize, availableInlineSize, chromeBlockSize = 0, itemBlockSize, itemCount, maxColumns = DEFAULT_MAX_AUTO_COLUMNS, minColumnInlineSize = DEFAULT_MIN_COLUMN_INLINE_SIZE_PX, }) => {
+export const chooseColumns = ({ availableBlockSize, availableInlineSize, chromeBlockSize = 0, itemBlockSize, itemCount, gap = 16, layout = "height-first", maxColumns = DEFAULT_MAX_AUTO_COLUMNS, minColumnInlineSize = DEFAULT_MIN_COLUMN_INLINE_SIZE_PX, }) => {
     // Inline size is a CAP, never a reason. This is the "don't go
     // 9-wide just because you're on an ultrawide" half of the rule.
     const inlineSizeCap = Math.max(1, Math.min(maxColumns, Math.floor(availableInlineSize / minColumnInlineSize)));
     if (itemCount <= 1) {
         return 1;
     }
+    if (layout === "fill") {
+        const columnsThatFit = Math.max(1, Math.floor((availableInlineSize + gap) /
+            (minColumnInlineSize + gap)));
+        return Math.max(1, Math.min(maxColumns, itemCount, columnsThatFit));
+    }
     // Block size is the reason. How many items stack in the space,
     // then how many stacks that many items need.
     const rowsThatFit = Math.max(1, Math.floor((availableBlockSize - chromeBlockSize) /
@@ -138,9 +143,11 @@ export const chooseColumns = ({ availableBlockSize, availableInlineSize, chromeB
  * dense tables and an app of prose disagree about a measure and
  * neither is wrong.
  */
-export const getContentMaxInlineSize = ({ columnInlineSize = contentInlineSize.column, columns, gutterInlineSize = contentInlineSize.gutter, singleInlineSize = contentInlineSize.single, }) => columns <= 1
+export const getContentMaxInlineSize = ({ columnInlineSize = contentInlineSize.column, columns, gutterInlineSize = contentInlineSize.gutter, layout = "height-first", singleInlineSize = contentInlineSize.single, }) => columns <= 1
     ? singleInlineSize
-    : `${Number.parseFloat(columnInlineSize) * columns + Number.parseFloat(gutterInlineSize)}rem`;
+    : layout === "fill"
+        ? "none"
+        : `${Number.parseFloat(columnInlineSize) * columns + Number.parseFloat(gutterInlineSize)}rem`;
 /**
  * The choices a manual picker offers: `"auto"`, then every count up
  * to `maxColumns`.

package/dist/AdaptiveGrid/chooseColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"chooseColumns.js","sourceRoot":"","sources":["../../src/AdaptiveGrid/chooseColumns.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,iBAAiB,GAClB,MAAM,cAAc,CAAA;AAErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,CAAA;AAEzC;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAC5C,MAAM,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,CAAA;AAO3C;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,GAAG,CAAC,EACnB,aAAa,EACb,SAAS,EACT,UAAU,GAAG,wBAAwB,EACrC,mBAAmB,GAAG,iCAAiC,GAwDxD,EAAU,EAAE;IACX,8DAA8D;IAC9D,gEAAgE;IAChE,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAC5B,CAAC,EACD,IAAI,CAAC,GAAG,CACN,UAAU,EACV,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,mBAAmB,CAAC,CACtD,CACF,CAAA;IAED,IAAI,SAAS,IAAI,CAAC,EAAE,CAAC;QACnB,OAAO,CAAC,CAAA;IACV,CAAC;IAED,+DAA+D;IAC/D,6CAA6C;IAC7C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAC1B,CAAC,EACD,IAAI,CAAC,KAAK,CACR,CAAC,kBAAkB,GAAG,eAAe,CAAC;QACpC,aAAa,CAChB,CACF,CAAA;IAED,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC,CAAA;IAExD,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAA;AAC5D,CAAC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,gBAAgB,GAAG,iBAAiB,CAAC,MAAM,EAC3C,OAAO,EACP,gBAAgB,GAAG,iBAAiB,CAAC,MAAM,EAC3C,gBAAgB,GAAG,iBAAiB,CAAC,MAAM,GAS5C,EAAU,EAAE,CACX,OAAO,IAAI,CAAC;IACV,CAAC,CAAC,gBAAgB;IAClB,CAAC,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAA;AAEjG;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,UAAU,GAAG,0BAA0B,GAGxC,EAAkB,EAAE,CAAC;IACpB,MAAM;IACN,GAAG,KAAK,CAAC,IAAI,CACX,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,CAAC,EAAE,EACnC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,CACxB;CACF,CAAA"}
+{"version":3,"file":"chooseColumns.js","sourceRoot":"","sources":["../../src/AdaptiveGrid/chooseColumns.ts"],"names":[],"mappings":"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"}

package/dist/AdaptiveGrid/useAdaptiveColumns.d.ts

@@ -1,5 +1,5 @@
 import type { RefObject } from "react";
-import type { ColumnChoice } from "./chooseColumns.ts";
+import type { ColumnChoice, GridLayout } from "./chooseColumns.ts";
 /**
  * The height-first column rule, wired to a real element.
  *
@@ -96,7 +96,7 @@ export declare const readStoredChoice: ({ maxColumns, persistence, }: {
     maxColumns?: number;
     persistence: ColumnPersistence | undefined;
 }) => ColumnChoice;
-export declare const useAdaptiveColumns: <ContainerElement extends HTMLElement = HTMLDivElement>({ blockSizeResolver, chromeBlockSize, columnInlineSize, gutterInlineSize, itemBlockSize, itemCount, maxAutoColumns, maxManualColumns, minColumnInlineSize, persistence, singleInlineSize, storageKey, }: {
+export declare const useAdaptiveColumns: <ContainerElement extends HTMLElement = HTMLDivElement>({ blockSizeResolver, chromeBlockSize, columnInlineSize, gutterInlineSize, gap, itemBlockSize, itemCount, layout, maxAutoColumns, maxManualColumns, minColumnInlineSize, persistence, singleInlineSize, storageKey, }: {
     /** @see BlockSizeResolver. Defaults to the viewport. */
     blockSizeResolver?: BlockSizeResolver;
     /** Everything down the page that is not this grid, in CSS px. */
@@ -105,10 +105,14 @@ export declare const useAdaptiveColumns: <ContainerElement extends HTMLElement =
     columnInlineSize?: string;
     /** Override `contentInlineSize.gutter`. */
     gutterInlineSize?: string;
+    /** Space between tracks for the fill layout. */
+    gap?: number;
     /** One item's block size in CSS px. Measure it; err high. */
     itemBlockSize: number;
     /** How many items the grid is being asked to fit. */
     itemCount: number;
+    /** Opt in to width-first media layout. */
+    layout?: GridLayout;
     /** The most columns the automatic answer will take. */
     maxAutoColumns?: number;
     /** The most a person may ask for. One above the auto cap. */

package/dist/AdaptiveGrid/useAdaptiveColumns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAdaptiveColumns.d.ts","sourceRoot":"","sources":["../../src/AdaptiveGrid/useAdaptiveColumns.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAStC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAStD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH;;;;;;;;;GASG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE,MAAM,MAAM,CAAA;IACjB,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;CAChD,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACzB,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,QAChC,iBAgBF,CAAA;AAEJ;;;;;;GAMG;AACH,eAAO,MAAM,6BAA6B,GACxC,KAAK,MAAM,KACV,iBAeD,CAAA;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,8BAG9B;IACD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,iBAAiB,GAAG,SAAS,CAAA;CAC3C,KAAG,YAkBH,CAAA;AAED,eAAO,MAAM,kBAAkB,GAC7B,gBAAgB,SAAS,WAAW,GAAG,cAAc,EACrD,yMAaC;IACD,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,iEAAiE;IACjE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,6DAA6D;IAC7D,aAAa,EAAE,MAAM,CAAA;IACrB,qDAAqD;IACrD,SAAS,EAAE,MAAM,CAAA;IACjB,uDAAuD;IACvD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gDAAgD;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,KAAG;IACF,+CAA+C;IAC/C,WAAW,EAAE,MAAM,CAAA;IACnB,oBAAoB;IACpB,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,oBAAoB,EAAE,MAAM,CAAA;IAC5B;;;;OAIG;IACH,YAAY,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAChD;;;;;;;;;;;;;;OAcG;IACH,SAAS,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,MAAM,EAAE,YAAY,CAAA;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;CA+G1C,CAAA"}
+{"version":3,"file":"useAdaptiveColumns.d.ts","sourceRoot":"","sources":["../../src/AdaptiveGrid/useAdaptiveColumns.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAStC,OAAO,KAAK,EACV,YAAY,EACZ,UAAU,EACX,MAAM,oBAAoB,CAAA;AAS3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH;;;;;;;;;GASG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE,MAAM,MAAM,CAAA;IACjB,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;CAChD,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACzB,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,QAChC,iBAgBF,CAAA;AAEJ;;;;;;GAMG;AACH,eAAO,MAAM,6BAA6B,GACxC,KAAK,MAAM,KACV,iBAeD,CAAA;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,8BAG9B;IACD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,iBAAiB,GAAG,SAAS,CAAA;CAC3C,KAAG,YAkBH,CAAA;AAED,eAAO,MAAM,kBAAkB,GAC7B,gBAAgB,SAAS,WAAW,GAAG,cAAc,EACrD,sNAeC;IACD,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,iEAAiE;IACjE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gDAAgD;IAChD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6DAA6D;IAC7D,aAAa,EAAE,MAAM,CAAA;IACrB,qDAAqD;IACrD,SAAS,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,uDAAuD;IACvD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gDAAgD;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,KAAG;IACF,+CAA+C;IAC/C,WAAW,EAAE,MAAM,CAAA;IACnB,oBAAoB;IACpB,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,oBAAoB,EAAE,MAAM,CAAA;IAC5B;;;;OAIG;IACH,YAAY,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAChD;;;;;;;;;;;;;;OAcG;IACH,SAAS,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,MAAM,EAAE,YAAY,CAAA;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;CAkH1C,CAAA"}

package/dist/AdaptiveGrid/useAdaptiveColumns.js

@@ -70,7 +70,7 @@ export const readStoredChoice = ({ maxColumns = DEFAULT_MAX_MANUAL_COLUMNS, pers
     }
     return parsed;
 };
-export const useAdaptiveColumns = ({ blockSizeResolver, chromeBlockSize, columnInlineSize, gutterInlineSize, itemBlockSize, itemCount, maxAutoColumns = DEFAULT_MAX_AUTO_COLUMNS, maxManualColumns = DEFAULT_MAX_MANUAL_COLUMNS, minColumnInlineSize = DEFAULT_MIN_COLUMN_INLINE_SIZE_PX, persistence, singleInlineSize, storageKey, }) => {
+export const useAdaptiveColumns = ({ blockSizeResolver, chromeBlockSize, columnInlineSize, gutterInlineSize, gap, itemBlockSize, itemCount, layout = "height-first", maxAutoColumns = DEFAULT_MAX_AUTO_COLUMNS, maxManualColumns = DEFAULT_MAX_MANUAL_COLUMNS, minColumnInlineSize = DEFAULT_MIN_COLUMN_INLINE_SIZE_PX, persistence, singleInlineSize, storageKey, }) => {
     const containerRef = useRef(null);
     // Built once, so the `resize` subscription and the storage
     // handle survive re-renders and StrictMode's double mount — the
@@ -132,6 +132,8 @@ export const useAdaptiveColumns = ({ blockSizeResolver, chromeBlockSize, columnI
         chromeBlockSize,
         itemBlockSize,
         itemCount,
+        gap,
+        layout,
         maxColumns: maxAutoColumns,
         minColumnInlineSize,
     });
@@ -145,6 +147,7 @@ export const useAdaptiveColumns = ({ blockSizeResolver, chromeBlockSize, columnI
             columnInlineSize,
             columns,
             gutterInlineSize,
+            layout,
             singleInlineSize,
         }),
         isLaidOut: availableInlineSize > 0,

package/dist/AdaptiveGrid/useAdaptiveColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAdaptiveColumns.js","sourceRoot":"","sources":["../../src/AdaptiveGrid/useAdaptiveColumns.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useAdaptiveColumns.js","sourceRoot":"","sources":["../../src/AdaptiveGrid/useAdaptiveColumns.ts"],"names":[],"mappings":"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"}

package/dist/Overlay/useAnchoredOverlay.d.ts

@@ -132,10 +132,10 @@ export declare const useAnchoredOverlay: ({ anchorRef, isEscapeDismissable, isHe
     clonedTrigger: ReactElement<Record<string, unknown>, string | import("react").JSXElementConstructor<any>> | null;
     context: {
         placement: Placement;
-        strategy: import("@floating-ui/utils").Strategy;
+        strategy: import("@floating-ui/react").Strategy;
         x: number;
         y: number;
-        middlewareData: import("@floating-ui/core").MiddlewareData;
+        middlewareData: import("@floating-ui/react").MiddlewareData;
         isPositioned: boolean;
         update: () => void;
         floatingStyles: React.CSSProperties;

package/dist/Picker/Picker.d.ts

@@ -84,6 +84,21 @@ export type PickerProps = Omit<ComponentPropsWithRef<"button">, "disabled" | "on
  * mux-magic both moved to it while `id` was still being replaced — but
  * `id` is no longer a trap. Everything else on the button (`data-*`,
  * `onClick`, `form`, …) passes straight through.
+ *
+ * ### A stretched trigger reads like a select, not a button
+ *
+ * `Button` centers its content, which is right for an action and wrong
+ * for a value. Inside a `Field` (a `flex-col`, so the child stretches)
+ * or under `w-full`, the trigger used to become a bar with the value
+ * floating in the middle and the chevron beside it. The value now sits
+ * at the inline start, in a span that grows into the spare width and
+ * ends in an ellipsis when there is too little, and the chevron sits at
+ * the inline end. `justify-between` is passed through `className`, which
+ * `toClassName` merges over `Button`'s `justify-center` rather than
+ * leaving the two to stylesheet order — and the growing span makes the
+ * result correct even if a caller's `className` overrides it. A trigger
+ * at its content width has no spare width to distribute, so it renders
+ * exactly as it did before.
  */
 export declare const Picker: ({ appearance, className, iconEnd, intent, isDisabled, label, onChange, options, placement, placeholder, size, value, ...buttonProps }: PickerProps) => ReactNode;
 //# sourceMappingURL=Picker.d.ts.map

package/dist/Picker/Picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../src/Picker/Picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACX,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAGzD,MAAM,MAAM,YAAY,GAAG,WAAW,CAAA;AAwBtC,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,UAAU,GAAG,OAAO,CAClC,GAAG;IACF,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,MAAM,GAAI,uIAcpB,WAAW,KAAG,SAoDhB,CAAA"}
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../src/Picker/Picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACX,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAIzD,MAAM,MAAM,YAAY,GAAG,WAAW,CAAA;AAwBtC,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,UAAU,GAAG,OAAO,CAClC,GAAG;IACF,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,eAAO,MAAM,MAAM,GAAI,uIAcpB,WAAW,KAAG,SA2EhB,CAAA"}

package/dist/Picker/Picker.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useVisibility } from "@charcuterie/logic";
 import { Button } from "../Button/Button.js";
 import { Listbox } from "../Listbox/Listbox.js";
+import { toClassName } from "../toClassName.js";
 /**
  * A constant element rather than a component, for the same reason
  * `Select` inlines its own: a second component in this file trips the
@@ -62,6 +63,21 @@ const CHEVRON_DOWN = (_jsx("svg", { "aria-hidden": "true", className: "size-4",
  * mux-magic both moved to it while `id` was still being replaced — but
  * `id` is no longer a trap. Everything else on the button (`data-*`,
  * `onClick`, `form`, …) passes straight through.
+ *
+ * ### A stretched trigger reads like a select, not a button
+ *
+ * `Button` centers its content, which is right for an action and wrong
+ * for a value. Inside a `Field` (a `flex-col`, so the child stretches)
+ * or under `w-full`, the trigger used to become a bar with the value
+ * floating in the middle and the chevron beside it. The value now sits
+ * at the inline start, in a span that grows into the spare width and
+ * ends in an ellipsis when there is too little, and the chevron sits at
+ * the inline end. `justify-between` is passed through `className`, which
+ * `toClassName` merges over `Button`'s `justify-center` rather than
+ * leaving the two to stylesheet order — and the growing span makes the
+ * result correct even if a caller's `className` overrides it. A trigger
+ * at its content width has no spare width to distribute, so it renders
+ * exactly as it did before.
  */
 export const Picker = ({ appearance = "outline", className, iconEnd = CHEVRON_DOWN, intent = "neutral", isDisabled = false, label, onChange, options, placement, placeholder, size, value, ...buttonProps }) => {
     const { hide, isVisible, toggle } = useVisibility();
@@ -73,6 +89,14 @@ export const Picker = ({ appearance = "outline", className, iconEnd = CHEVRON_DO
                 ? currentOption.label
                 : undefined));
     const triggerText = currentText ?? placeholder ?? "";
+    const triggerContent = currentOption === undefined
+        ? placeholder
+        : currentOption.label;
+    // No content, no span: an empty flex item would still earn a `gap`
+    // before the chevron and widen a content-width trigger.
+    const hasTriggerContent = triggerContent !== undefined &&
+        triggerContent !== null &&
+        triggerContent !== "";
     return (_jsx(Listbox
     // A disabled control must not open, and hiding the panel is a
     // truer way to say that than trusting the trigger's click alone —
@@ -81,11 +105,9 @@ export const Picker = ({ appearance = "outline", className, iconEnd = CHEVRON_DO
         // A disabled control must not open, and hiding the panel is a
         // truer way to say that than trusting the trigger's click alone —
         // Escape and outside-press both route through `onDismiss`.
-        isVisible: isVisible && !isDisabled, onDismiss: hide, onSelect: onChange, options: options, placement: placement, selectedValue: value, trigger: _jsx(Button, { ...buttonProps, appearance: appearance, "aria-label": `${label}: ${triggerText}`, className: className, iconEnd: iconEnd, intent: intent, isDisabled: isDisabled, onClick: (clickEvent) => {
+        isVisible: isVisible && !isDisabled, onDismiss: hide, onSelect: onChange, options: options, placement: placement, selectedValue: value, trigger: _jsx(Button, { ...buttonProps, appearance: appearance, "aria-label": `${label}: ${triggerText}`, className: toClassName("justify-between", className), iconEnd: iconEnd, intent: intent, isDisabled: isDisabled, onClick: (clickEvent) => {
                 buttonProps.onClick?.(clickEvent);
                 toggle();
-            }, size: size, type: "button", children: currentOption === undefined
-                ? placeholder
-                : currentOption.label }) }));
+            }, size: size, type: "button", children: hasTriggerContent ? (_jsx("span", { className: "-mx-1 min-w-0 grow overflow-x-clip px-1 text-start text-ellipsis whitespace-nowrap", children: triggerContent })) : null }) }));
 };
 //# sourceMappingURL=Picker.js.map

package/dist/Picker/Picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../src/Picker/Picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAWlD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAA;AAG7C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAwB,CAAA;AAIhD;;;;GAIG;AACH,MAAM,YAAY,GAAG,CACnB,6BACc,MAAM,EAClB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,YAElC,eAAM,CAAC,EAAC,cAAc,GAAG,GACrB,CACP,CAAA;AAgCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,OAAO,GAAG,YAAY,EACtB,MAAM,GAAG,SAAS,EAClB,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,WAAW,EACX,IAAI,EACJ,KAAK,EACL,GAAG,WAAW,EACF,EAAa,EAAE;IAC3B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAEnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAChC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CACnC,CAAA;IAED,MAAM,WAAW,GACf,aAAa,KAAK,SAAS;QACzB,CAAC,CAAC,WAAW;QACb,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS;YACxB,CAAC,OAAO,aAAa,CAAC,KAAK,KAAK,QAAQ;gBACtC,CAAC,CAAC,aAAa,CAAC,KAAK;gBACrB,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IAErB,MAAM,WAAW,GAAG,WAAW,IAAI,WAAW,IAAI,EAAE,CAAA;IAEpD,OAAO,CACL,KAAC,OAAO;IACN,8DAA8D;IAC9D,kEAAkE;IAClE,2DAA2D;;QAF3D,8DAA8D;QAC9D,kEAAkE;QAClE,2DAA2D;QAC3D,SAAS,EAAE,SAAS,IAAI,CAAC,UAAU,EACnC,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,KAAK,EACpB,OAAO,EACL,KAAC,MAAM,OACD,WAAW,EACf,UAAU,EAAE,UAAU,gBACV,GAAG,KAAK,KAAK,WAAW,EAAE,EACtC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE;gBACtB,WAAW,CAAC,OAAO,EAAE,CAAC,UAAU,CAAC,CAAA;gBAEjC,MAAM,EAAE,CAAA;YACV,CAAC,EACD,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,YAEZ,aAAa,KAAK,SAAS;gBAC1B,CAAC,CAAC,WAAW;gBACb,CAAC,CAAC,aAAa,CAAC,KAAK,GAChB,GAEX,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../src/Picker/Picker.tsx"],"names":[],"mappings":"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"}

package/dist/VirtualizedGrid/VirtualizedGrid.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { GridLayout } from "../AdaptiveGrid/chooseColumns.ts";
 import type { BlockSizeResolver } from "../AdaptiveGrid/useAdaptiveColumns.ts";
 export type VirtualizedGridProps<Item> = {
     /**
@@ -46,6 +47,8 @@ export type VirtualizedGridProps<Item> = {
      * is one whose length a reader cannot count for itself.
      */
     label?: string;
+    /** Opt in to width-first media layout. */
+    layout?: GridLayout;
     /** The most columns the automatic answer will take. */
     maxColumns?: number;
     /** The narrowest a column may be, in CSS px. */
@@ -176,5 +179,5 @@ export type VirtualizedGridProps<Item> = {
  * a cache — the same thing a routed tab does, and the reason a
  * routed tab never had this bug.
  */
-export declare const VirtualizedGrid: <Item>({ blockSizeResolver, chromeBlockSize, className, columns, gap, getItemKey, itemBlockSize, items, label, maxColumns, minColumnInlineSize, overscanRows, renderItem, storageKey, }: VirtualizedGridProps<Item>) => ReactNode;
+export declare const VirtualizedGrid: <Item>({ blockSizeResolver, chromeBlockSize, className, columns, gap, getItemKey, itemBlockSize, items, label, layout: gridLayout, maxColumns, minColumnInlineSize, overscanRows, renderItem, storageKey, }: VirtualizedGridProps<Item>) => ReactNode;
 //# sourceMappingURL=VirtualizedGrid.d.ts.map

package/dist/VirtualizedGrid/VirtualizedGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedGrid.d.ts","sourceRoot":"","sources":["../../src/VirtualizedGrid/VirtualizedGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAY9E,MAAM,MAAM,oBAAoB,CAAC,IAAI,IAAI;IACvC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kDAAkD;IAClD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,KACV,MAAM,GAAG,MAAM,CAAA;IACpB;;;;;;;;OAQG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB,kCAAkC;IAClC,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gDAAgD;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,qBAAqB;IACrB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IACpD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,EAAG,kLAepC,oBAAoB,CAAC,IAAI,CAAC,KAAG,SAiE/B,CAAA"}
+{"version":3,"file":"VirtualizedGrid.d.ts","sourceRoot":"","sources":["../../src/VirtualizedGrid/VirtualizedGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAY9E,MAAM,MAAM,oBAAoB,CAAC,IAAI,IAAI;IACvC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kDAAkD;IAClD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,KACV,MAAM,GAAG,MAAM,CAAA;IACpB;;;;;;;;OAQG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB,kCAAkC;IAClC,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gDAAgD;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,qBAAqB;IACrB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IACpD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,EAAG,sMAgBpC,oBAAoB,CAAC,IAAI,CAAC,KAAG,SAmE/B,CAAA"}

package/dist/VirtualizedGrid/VirtualizedGrid.js

@@ -113,12 +113,14 @@ import { WindowGrid } from "./WindowGrid.js";
  * a cache — the same thing a routed tab does, and the reason a
  * routed tab never had this bug.
  */
-export const VirtualizedGrid = ({ blockSizeResolver, chromeBlockSize, className, columns, gap = DEFAULT_GRID_GAP_PX, getItemKey, itemBlockSize, items, label, maxColumns, minColumnInlineSize, overscanRows = 4, renderItem, storageKey, }) => {
+export const VirtualizedGrid = ({ blockSizeResolver, chromeBlockSize, className, columns, gap = DEFAULT_GRID_GAP_PX, getItemKey, itemBlockSize, items, label, layout: gridLayout, maxColumns, minColumnInlineSize, overscanRows = 4, renderItem, storageKey, }) => {
     const layout = useAdaptiveColumns({
         blockSizeResolver,
         chromeBlockSize,
         itemBlockSize,
         itemCount: items.length,
+        gap,
+        layout: gridLayout,
         maxAutoColumns: maxColumns,
         minColumnInlineSize,
         storageKey,

package/dist/VirtualizedGrid/VirtualizedGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedGrid.js","sourceRoot":"","sources":["../../src/VirtualizedGrid/VirtualizedGrid.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAK5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAA;AA2E7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAQ,EACrC,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,OAAO,EACP,GAAG,GAAG,mBAAmB,EACzB,UAAU,EACV,aAAa,EACb,KAAK,EACL,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,YAAY,GAAG,CAAC,EAChB,UAAU,EACV,UAAU,GACiB,EAAa,EAAE;IAC1C,MAAM,MAAM,GAAG,kBAAkB,CAAC;QAChC,iBAAiB;QACjB,eAAe;QACf,aAAa;QACb,SAAS,EAAE,KAAK,CAAC,MAAM;QACvB,cAAc,EAAE,UAAU;QAC1B,mBAAmB;QACnB,UAAU;KACX,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,OAAO,IAAI,MAAM,CAAC,OAAO,CAAA;IAE9C,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC,CAAA;IAEvD;;;;;OAKG;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GACjC,QAAQ,CAAqB,IAAI,CAAC,CAAA;IAEpC,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAA;QAE3C,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAM;QACR,CAAC;QAED,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAA;IAC1C,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAA;IAEzB,MAAM,SAAS,GAA0B;QACvC,YAAY;QACZ,GAAG;QACH,UAAU;QACV,aAAa;QACb,KAAK;QACL,KAAK;QACL,YAAY;QACZ,UAAU;QACV,QAAQ;KACT,CAAA;IAED,OAAO,CACL,cACE,SAAS,EAAE,WAAW,CACpB,qBAAqB,EACrB,SAAS,CACV,EACD,GAAG,EAAE,MAAM,CAAC,YAAY,YAEvB,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI;YAC3C,SAAS,CAAC,CAAC,CAAC,CACZ,KAAC,WAAW,OACN,SAAS,EACb,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACnC,KAAC,UAAU,OAAK,SAAS,GAAI,CAC9B,CAAC,CAAC,CAAC,IAAI,GACJ,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"VirtualizedGrid.js","sourceRoot":"","sources":["../../src/VirtualizedGrid/VirtualizedGrid.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAIjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAK5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAA;AA6E7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAQ,EACrC,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,OAAO,EACP,GAAG,GAAG,mBAAmB,EACzB,UAAU,EACV,aAAa,EACb,KAAK,EACL,KAAK,EACL,MAAM,EAAE,UAAU,EAClB,UAAU,EACV,mBAAmB,EACnB,YAAY,GAAG,CAAC,EAChB,UAAU,EACV,UAAU,GACiB,EAAa,EAAE;IAC1C,MAAM,MAAM,GAAG,kBAAkB,CAAC;QAChC,iBAAiB;QACjB,eAAe;QACf,aAAa;QACb,SAAS,EAAE,KAAK,CAAC,MAAM;QACvB,GAAG;QACH,MAAM,EAAE,UAAU;QAClB,cAAc,EAAE,UAAU;QAC1B,mBAAmB;QACnB,UAAU;KACX,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,OAAO,IAAI,MAAM,CAAC,OAAO,CAAA;IAE9C,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC,CAAA;IAEvD;;;;;OAKG;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GACjC,QAAQ,CAAqB,IAAI,CAAC,CAAA;IAEpC,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAA;QAE3C,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAM;QACR,CAAC;QAED,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAA;IAC1C,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAA;IAEzB,MAAM,SAAS,GAA0B;QACvC,YAAY;QACZ,GAAG;QACH,UAAU;QACV,aAAa;QACb,KAAK;QACL,KAAK;QACL,YAAY;QACZ,UAAU;QACV,QAAQ;KACT,CAAA;IAED,OAAO,CACL,cACE,SAAS,EAAE,WAAW,CACpB,qBAAqB,EACrB,SAAS,CACV,EACD,GAAG,EAAE,MAAM,CAAC,YAAY,YAEvB,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI;YAC3C,SAAS,CAAC,CAAC,CAAC,CACZ,KAAC,WAAW,OACN,SAAS,EACb,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACnC,KAAC,UAAU,OAAK,SAAS,GAAI,CAC9B,CAAC,CAAC,CAAC,IAAI,GACJ,CACP,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.21.0",
+  "version": "4.22.1",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -56,12 +56,6 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json && node scripts/copyStyles.ts",
-    "prepack": "yarn build",
-    "test": "vitest",
-    "typecheck": "tsc --noEmit"
-  },
   "dependencies": {
     "@charcuterie/logic": "2.10.0",
     "@charcuterie/tokens": "1.10.2",
@@ -161,11 +155,19 @@
     "storybook": "^10.3.6",
     "tailwindcss": "^4.3.0",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.8",
+    "axe-core": "4.12.1",
+    "@vitest/browser": "^4.1.8",
+    "@storybook/addon-docs": "^10.3.6"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Sawtaytoes/charcuterie.git",
     "directory": "packages/ui"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/copyStyles.ts",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
   }
 }

package/src/AdaptiveGrid/AdaptiveGrid.mdx

@@ -16,6 +16,16 @@ across an ultrawide and nothing below the fold.
 
 <Canvas of={AdaptiveGridStories.Playground} />
 
+## Fill a media workspace
+
+Opt in with `layout="fill"` when a gallery or printer fleet should spend the
+available width even if its cards would fit in a taller stack. Set `maxColumns`
+and `minColumnInlineSize` for the content. The shared 16px gap counts toward the
+column floor. Multiple columns use the whole container; a lone column retains
+its reading measure. The default remains height-first.
+
+<Canvas of={AdaptiveGridStories.Fill} />
+
 ## Props
 
 <Controls />

package/src/AdaptiveGrid/AdaptiveGrid.stories.tsx

@@ -240,3 +240,20 @@ export const Interactive: Story = {
     )
   },
 }
+
+/** A small fleet and a gallery opt in to spending width first. */
+export const Fill: Story = {
+  args: {
+    layout: "fill",
+    minColumnInlineSize: 300,
+    maxColumns: 6,
+    blockSizeResolver: fixedBlockSize(1920),
+  },
+  render: (gridProps) => (
+    <AdaptiveGrid {...gridProps}>
+      {NINE_ITEMS.slice(0, 6).map((label) => (
+        <Item key={label} label={label} />
+      ))}
+    </AdaptiveGrid>
+  ),
+}

package/src/AdaptiveGrid/AdaptiveGrid.test.tsx

@@ -36,8 +36,13 @@ import * as stories from "./AdaptiveGrid.stories.tsx"
  * all.
  */
 
-const { AllStates, AllVariants, Playground, Responsive } =
-  composeStories(stories)
+const {
+  AllStates,
+  AllVariants,
+  Fill,
+  Playground,
+  Responsive,
+} = composeStories(stories)
 
 /**
  * The grids this component drew.
@@ -241,3 +246,32 @@ test("the inline size is read from the container, not the window", async () => {
     ).toEqual([1, 2, 3])
   })
 })
+
+test("fill uses the available container width and keeps its column floor", async () => {
+  const { canvasElement } = await mountAtInlineSize(
+    Fill,
+    1900,
+  )
+  await waitFor(async () => {
+    const grid = getGrid(canvasElement)
+    await expect(getTrackCount(grid)).toBe(6)
+    await expect(grid.style.maxInlineSize).toBe("none")
+    await expect(grid.getBoundingClientRect().width).toBe(
+      1900,
+    )
+  })
+  canvasElement.style.inlineSize = "700px"
+  await waitFor(
+    async () =>
+      await expect(
+        getTrackCount(getGrid(canvasElement)),
+      ).toBe(2),
+  )
+  canvasElement.style.inlineSize = "384px"
+  await waitFor(
+    async () =>
+      await expect(
+        getTrackCount(getGrid(canvasElement)),
+      ).toBe(1),
+  )
+})

package/src/AdaptiveGrid/AdaptiveGrid.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react"
 import { Children } from "react"
 
 import { toClassName } from "../toClassName.ts"
+import type { GridLayout } from "./chooseColumns.ts"
 import { getContentMaxInlineSize } from "./chooseColumns.ts"
 import type { BlockSizeResolver } from "./useAdaptiveColumns.ts"
 import { useAdaptiveColumns } from "./useAdaptiveColumns.ts"
@@ -41,6 +42,8 @@ export type AdaptiveGridProps = {
    * would be worse than one that is an item out.
    */
   itemCount?: number
+  /** Fill the container with readable columns instead of spending height first. */
+  layout?: GridLayout
   /** The most columns the automatic answer will take. */
   maxColumns?: number
   /** The narrowest a column may be, in CSS px. */
@@ -105,6 +108,7 @@ export const AdaptiveGrid = ({
   columns,
   itemBlockSize,
   itemCount,
+  layout: gridLayout = "height-first",
   maxColumns,
   minColumnInlineSize,
   storageKey,
@@ -114,6 +118,7 @@ export const AdaptiveGrid = ({
     chromeBlockSize,
     itemBlockSize,
     itemCount: itemCount ?? Children.count(children),
+    layout: gridLayout,
     maxAutoColumns: maxColumns,
     minColumnInlineSize,
     storageKey,
@@ -126,6 +131,7 @@ export const AdaptiveGrid = ({
   // a one-column cap is the same bug as no cap at all, upside down.
   const contentMaxInlineSize = getContentMaxInlineSize({
     columns: drawnColumns,
+    layout: gridLayout,
   })
 
   return (

package/src/AdaptiveGrid/chooseColumns.ts

@@ -109,6 +109,9 @@ export const DEFAULT_MIN_COLUMN_INLINE_SIZE_PX =
  */
 export type ColumnChoice = "auto" | number
 
+/** Fill is an explicit width-first layout for media galleries and fleets. */
+export type GridLayout = "height-first" | "fill"
+
 /**
  * The column count the automatic rule wants, for one measured space
  * and one set of items.
@@ -119,6 +122,8 @@ export const chooseColumns = ({
   chromeBlockSize = 0,
   itemBlockSize,
   itemCount,
+  gap = 16,
+  layout = "height-first",
   maxColumns = DEFAULT_MAX_AUTO_COLUMNS,
   minColumnInlineSize = DEFAULT_MIN_COLUMN_INLINE_SIZE_PX,
 }: {
@@ -172,6 +177,10 @@ export const chooseColumns = ({
    * finished loading would be worse than one that is an item out.
    */
   itemCount: number
+  /** Height-first by default; fill spends the available container width. */
+  layout?: GridLayout
+  /** Space between tracks, in CSS px, used by fill. */
+  gap?: number
   /** @see DEFAULT_MAX_AUTO_COLUMNS */
   maxColumns?: number
   /** @see DEFAULT_MIN_COLUMN_INLINE_SIZE_PX */
@@ -191,6 +200,20 @@ export const chooseColumns = ({
     return 1
   }
 
+  if (layout === "fill") {
+    const columnsThatFit = Math.max(
+      1,
+      Math.floor(
+        (availableInlineSize + gap) /
+          (minColumnInlineSize + gap),
+      ),
+    )
+    return Math.max(
+      1,
+      Math.min(maxColumns, itemCount, columnsThatFit),
+    )
+  }
+
   // Block size is the reason. How many items stack in the space,
   // then how many stacks that many items need.
   const rowsThatFit = Math.max(
@@ -235,6 +258,7 @@ export const getContentMaxInlineSize = ({
   columnInlineSize = contentInlineSize.column,
   columns,
   gutterInlineSize = contentInlineSize.gutter,
+  layout = "height-first",
   singleInlineSize = contentInlineSize.single,
 }: {
   /** What one column is worth, once there are several. */
@@ -242,12 +266,16 @@ export const getContentMaxInlineSize = ({
   columns: number
   /** Slack added on top of a multi-column cap, for the gaps. */
   gutterInlineSize?: string
+  /** Fill uses all available width once there are multiple columns. */
+  layout?: GridLayout
   /** The cap when there is only one column. */
   singleInlineSize?: string
 }): string =>
   columns <= 1
     ? singleInlineSize
-    : `${Number.parseFloat(columnInlineSize) * columns + Number.parseFloat(gutterInlineSize)}rem`
+    : layout === "fill"
+      ? "none"
+      : `${Number.parseFloat(columnInlineSize) * columns + Number.parseFloat(gutterInlineSize)}rem`
 
 /**
  * The choices a manual picker offers: `"auto"`, then every count up

package/src/AdaptiveGrid/useAdaptiveColumns.ts

@@ -7,7 +7,10 @@ import {
   useSyncExternalStore,
 } from "react"
 
-import type { ColumnChoice } from "./chooseColumns.ts"
+import type {
+  ColumnChoice,
+  GridLayout,
+} from "./chooseColumns.ts"
 import {
   chooseColumns,
   DEFAULT_MAX_AUTO_COLUMNS,
@@ -180,8 +183,10 @@ export const useAdaptiveColumns = <
   chromeBlockSize,
   columnInlineSize,
   gutterInlineSize,
+  gap,
   itemBlockSize,
   itemCount,
+  layout = "height-first",
   maxAutoColumns = DEFAULT_MAX_AUTO_COLUMNS,
   maxManualColumns = DEFAULT_MAX_MANUAL_COLUMNS,
   minColumnInlineSize = DEFAULT_MIN_COLUMN_INLINE_SIZE_PX,
@@ -197,10 +202,14 @@ export const useAdaptiveColumns = <
   columnInlineSize?: string
   /** Override `contentInlineSize.gutter`. */
   gutterInlineSize?: string
+  /** Space between tracks for the fill layout. */
+  gap?: number
   /** One item's block size in CSS px. Measure it; err high. */
   itemBlockSize: number
   /** How many items the grid is being asked to fit. */
   itemCount: number
+  /** Opt in to width-first media layout. */
+  layout?: GridLayout
   /** The most columns the automatic answer will take. */
   maxAutoColumns?: number
   /** The most a person may ask for. One above the auto cap. */
@@ -349,6 +358,8 @@ export const useAdaptiveColumns = <
     chromeBlockSize,
     itemBlockSize,
     itemCount,
+    gap,
+    layout,
     maxColumns: maxAutoColumns,
     minColumnInlineSize,
   })
@@ -364,6 +375,7 @@ export const useAdaptiveColumns = <
       columnInlineSize,
       columns,
       gutterInlineSize,
+      layout,
       singleInlineSize,
     }),
     isLaidOut: availableInlineSize > 0,

package/src/CopyButton/CopyButton.test.tsx

@@ -46,8 +46,12 @@ test("copies the value and confirms in place", async () => {
   await expect(copy).toHaveBeenCalledWith("335590")
   // The press and its proof are the same object — no toast, no
   // second place to look.
+  //
+  // `findBy`: `copy` is async, so the label changes a render after
+  // the click resolves. A synchronous read lost that race in CI's
+  // ultrawide window (master run 37298376242).
   await expect(
-    canvas.getByRole("button", { name: "Copied" }),
+    await canvas.findByRole("button", { name: "Copied" }),
   ).toBeVisible()
 })
 
@@ -73,7 +77,9 @@ test("says so when the clipboard refuses", async () => {
   )
 
   await expect(
-    canvas.getByRole("button", { name: "Copy failed" }),
+    await canvas.findByRole("button", {
+      name: "Copy failed",
+    }),
   ).toBeVisible()
   await expect(onCopy).toHaveBeenCalledWith(false, "335590")
 })
@@ -103,26 +109,30 @@ test("tells the caller what happened, both ways", async () => {
 test("announces the outcome in a status region", async () => {
   const { canvas } = await mountStory(Confirmed)
 
-  await expect(
-    canvas.getByRole("status"),
-  ).toHaveTextContent("Copied to the clipboard.")
+  await waitFor(async () => {
+    await expect(
+      canvas.getByRole("status"),
+    ).toHaveTextContent("Copied to the clipboard.")
+  })
 })
 
 test("the failure says what to do instead", async () => {
   const { canvas } = await mountStory(Refused)
 
-  await expect(
-    canvas.getByRole("status"),
-  ).toHaveTextContent(
-    "The clipboard refused. Select the value and press Control C.",
-  )
+  await waitFor(async () => {
+    await expect(
+      canvas.getByRole("status"),
+    ).toHaveTextContent(
+      "The clipboard refused. Select the value and press Control C.",
+    )
+  })
 })
 
 /** The confirmation goes back on its own. */
 test("returns to the resting label", async () => {
   const { canvas } = await mountStory(
     composeStory(
-      { args: { confirmDuration: 20, copy: () => true } },
+      { args: { confirmDuration: 500, copy: () => true } },
       meta,
     ),
   )
@@ -130,8 +140,11 @@ test("returns to the resting label", async () => {
   await userEvent.click(
     canvas.getByRole("button", { name: "Copy" }),
   )
+  // 500ms, not 20: on a loaded runner a 20ms confirmation can come
+  // and go before the test looks, which fails the read below for the
+  // opposite reason to the race above.
   await expect(
-    canvas.getByRole("button", { name: "Copied" }),
+    await canvas.findByRole("button", { name: "Copied" }),
   ).toBeVisible()
 
   await waitFor(async () => {

package/src/Picker/Picker.mdx

@@ -77,6 +77,20 @@ all flush; they are all the same trap.
 
 <Canvas of={PickerStories.NextToText} />
 
+## A stretched trigger reads like a select
+
+`Picker` is a `Button`, and a `Button` centers its content. Inside a `Field` — a `flex-col`,
+so the trigger stretches to the column — or under `w-full`, that used to give a full-width bar
+with the value floating in the middle. The trigger now lays its value out at the **inline
+start** and the chevron at the **inline end**, and a value wider than the trigger truncates
+with an ellipsis rather than pushing the chevron out. The full value stays in the accessible
+name and in the open list.
+
+The width still comes from the container: a trigger the parent does not stretch keeps its
+content width and renders exactly as before.
+
+<Canvas of={PickerStories.Responsive} />
+
 ## `id` does not survive; `data-testid` does
 
 `useAnchoredOverlay` overwrites the trigger's `id` with a generated one so the portalled

package/src/Picker/Picker.stories.tsx

@@ -10,6 +10,7 @@ import {
 } from "../argTypes.storyHelpers.ts"
 import { Badge } from "../Badge/Badge.tsx"
 import {
+  ContainerBoard,
   StoryRow,
   StorySection,
 } from "../board.storyHelpers.tsx"
@@ -258,3 +259,48 @@ export const NextToText: Story = {
     </div>
   ),
 }
+
+/**
+ * One value long enough to outgrow the narrowest container, so the
+ * board shows the truncation as well as the stretch.
+ */
+const SUBTITLES: PickerOption[] = [
+  { label: "Off", value: "off" },
+  {
+    label: "English (SDH, signs and songs, full dialogue)",
+    value: "eng-sdh",
+  },
+]
+
+/**
+ * Inside a `Field` the trigger stretches to the container, the way a
+ * select does: the value sits at the inline start, the chevron at the
+ * inline end, and a value wider than the container truncates rather
+ * than pushing the chevron out.
+ */
+export const Responsive: Story = {
+  render: () => (
+    <ContainerBoard>
+      {(width) => (
+        <div className="flex flex-col gap-4">
+          <Field label={`Language at ${width}`}>
+            <Picker
+              label={`Language at ${width}`}
+              onChange={() => undefined}
+              options={LANGUAGES}
+              value="eng"
+            />
+          </Field>
+          <Field label={`Subtitles at ${width}`}>
+            <Picker
+              label={`Subtitles at ${width}`}
+              onChange={() => undefined}
+              options={SUBTITLES}
+              value="eng-sdh"
+            />
+          </Field>
+        </div>
+      )}
+    </ContainerBoard>
+  ),
+}

package/src/Picker/Picker.test.tsx

@@ -7,8 +7,13 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Picker.stories.tsx"
 
-const { AllStates, Playground, Interactive, NextToText } =
-  composeStories(stories)
+const {
+  AllStates,
+  Playground,
+  Interactive,
+  NextToText,
+  Responsive,
+} = composeStories(stories)
 
 test("the trigger's accessible name carries the current value", async () => {
   const { canvas, canvasElement } =
@@ -108,3 +113,87 @@ test("a rich option label keeps a plain-string trigger via textValue", async ()
 
   await expectNoAxeViolations(canvasElement)
 })
+
+test("a stretched trigger puts the value at the start and the chevron at the end", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Responsive)
+
+  const trigger = expectAgentDrivable(canvas, {
+    name: "Language at 34rem: English",
+    role: "button",
+  })
+
+  const valueElement = canvas
+    .getAllByText("English")
+    .find((element: HTMLElement) =>
+      trigger.contains(element),
+    ) as HTMLElement
+
+  // The text's own box, not the span's: the span grows to fill the
+  // trigger, so its box would sit at the start even with centered text.
+  const valueRange = document.createRange()
+
+  valueRange.selectNodeContents(valueElement)
+
+  const valueBox = valueRange.getBoundingClientRect()
+  const triggerBox = trigger.getBoundingClientRect()
+  const chevronBox = (
+    trigger.querySelector("svg") as SVGElement
+  ).getBoundingClientRect()
+
+  const triggerStyle = getComputedStyle(trigger)
+  const contentStart =
+    triggerBox.left +
+    Number.parseFloat(triggerStyle.borderInlineStartWidth) +
+    Number.parseFloat(triggerStyle.paddingInlineStart)
+  const contentEnd =
+    triggerBox.right -
+    Number.parseFloat(triggerStyle.borderInlineEndWidth) -
+    Number.parseFloat(triggerStyle.paddingInlineEnd)
+
+  // The `Field` stretched the trigger well past its content, so a
+  // centered value would start far from the inline start.
+  await expect(
+    triggerBox.width - valueBox.width - chevronBox.width,
+  ).toBeGreaterThan(200)
+  await expect(
+    Math.abs(valueBox.left - contentStart),
+  ).toBeLessThan(1)
+  await expect(
+    Math.abs(chevronBox.right - contentEnd),
+  ).toBeLessThan(1)
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("a value wider than the trigger truncates and keeps the chevron inside", async () => {
+  const { canvas } = await mountStory(Responsive)
+
+  const trigger = expectAgentDrivable(canvas, {
+    name: "Subtitles at 15rem: English (SDH, signs and songs, full dialogue)",
+    role: "button",
+  })
+
+  const valueElement = canvas
+    .getAllByText(
+      "English (SDH, signs and songs, full dialogue)",
+    )
+    .find((element: HTMLElement) =>
+      trigger.contains(element),
+    ) as HTMLElement
+
+  const triggerBox = trigger.getBoundingClientRect()
+  const chevronBox = (
+    trigger.querySelector("svg") as SVGElement
+  ).getBoundingClientRect()
+
+  await expect(valueElement.scrollWidth).toBeGreaterThan(
+    valueElement.clientWidth,
+  )
+  await expect(trigger.scrollWidth).toBe(
+    trigger.clientWidth,
+  )
+  await expect(chevronBox.right).toBeLessThanOrEqual(
+    triggerBox.right,
+  )
+})

package/src/Picker/Picker.tsx

@@ -13,6 +13,7 @@ import { Button } from "../Button/Button.tsx"
 import type { IntentAppearance } from "../intentStyles.ts"
 import type { ListboxItem } from "../Listbox/Listbox.tsx"
 import { Listbox } from "../Listbox/Listbox.tsx"
+import { toClassName } from "../toClassName.ts"
 
 export type PickerOption = ListboxItem
 
@@ -122,6 +123,21 @@ export type PickerProps = Omit<
  * mux-magic both moved to it while `id` was still being replaced — but
  * `id` is no longer a trap. Everything else on the button (`data-*`,
  * `onClick`, `form`, …) passes straight through.
+ *
+ * ### A stretched trigger reads like a select, not a button
+ *
+ * `Button` centers its content, which is right for an action and wrong
+ * for a value. Inside a `Field` (a `flex-col`, so the child stretches)
+ * or under `w-full`, the trigger used to become a bar with the value
+ * floating in the middle and the chevron beside it. The value now sits
+ * at the inline start, in a span that grows into the spare width and
+ * ends in an ellipsis when there is too little, and the chevron sits at
+ * the inline end. `justify-between` is passed through `className`, which
+ * `toClassName` merges over `Button`'s `justify-center` rather than
+ * leaving the two to stylesheet order — and the growing span makes the
+ * result correct even if a caller's `className` overrides it. A trigger
+ * at its content width has no spare width to distribute, so it renders
+ * exactly as it did before.
  */
 export const Picker = ({
   appearance = "outline",
@@ -154,6 +170,18 @@ export const Picker = ({
 
   const triggerText = currentText ?? placeholder ?? ""
 
+  const triggerContent =
+    currentOption === undefined
+      ? placeholder
+      : currentOption.label
+
+  // No content, no span: an empty flex item would still earn a `gap`
+  // before the chevron and widen a content-width trigger.
+  const hasTriggerContent =
+    triggerContent !== undefined &&
+    triggerContent !== null &&
+    triggerContent !== ""
+
   return (
     <Listbox
       // A disabled control must not open, and hiding the panel is a
@@ -170,7 +198,10 @@ export const Picker = ({
           {...buttonProps}
           appearance={appearance}
           aria-label={`${label}: ${triggerText}`}
-          className={className}
+          className={toClassName(
+            "justify-between",
+            className,
+          )}
           iconEnd={iconEnd}
           intent={intent}
           isDisabled={isDisabled}
@@ -182,9 +213,17 @@ export const Picker = ({
           size={size}
           type="button"
         >
-          {currentOption === undefined
-            ? placeholder
-            : currentOption.label}
+          {hasTriggerContent ? (
+            // Not `truncate`. Its `overflow: hidden` clips the
+            // anti-aliased edge pixels of glyphs and a rich label's
+            // badge, so a content-width trigger stopped rendering
+            // pixel-identically to the unwrapped one. `overflow-x-clip`
+            // leaves the block axis alone, and `-mx-1 px-1` moves the
+            // inline clip edge 4px outward without moving the text.
+            <span className="-mx-1 min-w-0 grow overflow-x-clip px-1 text-start text-ellipsis whitespace-nowrap">
+              {triggerContent}
+            </span>
+          ) : null}
         </Button>
       }
     />

package/src/VirtualizedGrid/VirtualizedGrid.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react"
 import { useLayoutEffect, useState } from "react"
 
+import type { GridLayout } from "../AdaptiveGrid/chooseColumns.ts"
 import type { BlockSizeResolver } from "../AdaptiveGrid/useAdaptiveColumns.ts"
 import { useAdaptiveColumns } from "../AdaptiveGrid/useAdaptiveColumns.ts"
 import { toClassName } from "../toClassName.ts"
@@ -62,6 +63,8 @@ export type VirtualizedGridProps<Item> = {
    * is one whose length a reader cannot count for itself.
    */
   label?: string
+  /** Opt in to width-first media layout. */
+  layout?: GridLayout
   /** The most columns the automatic answer will take. */
   maxColumns?: number
   /** The narrowest a column may be, in CSS px. */
@@ -203,6 +206,7 @@ export const VirtualizedGrid = <Item,>({
   itemBlockSize,
   items,
   label,
+  layout: gridLayout,
   maxColumns,
   minColumnInlineSize,
   overscanRows = 4,
@@ -214,6 +218,8 @@ export const VirtualizedGrid = <Item,>({
     chromeBlockSize,
     itemBlockSize,
     itemCount: items.length,
+    gap,
+    layout: gridLayout,
     maxAutoColumns: maxColumns,
     minColumnInlineSize,
     storageKey,

package/src/markdownEditorCodeMirror/MarkdownView.test.tsx

@@ -349,11 +349,16 @@ test("inline markup in link text does not drop the document to raw source", asyn
   // No raw source anywhere in the document.
   const article = canvas.getByRole("article")
 
-  await expect(article.textContent).not.toContain("](")
+  // The heading can paint before lower link decorations finish parsing.
+  // Retry the complete contract rather than treating that partial paint
+  // as the final document; all three source-marker assertions still apply.
+  await waitFor(async () => {
+    await expect(article.textContent).not.toContain("](")
 
-  await expect(article.textContent).not.toContain("**")
+    await expect(article.textContent).not.toContain("**")
 
-  await expect(article.textContent).not.toContain("~~")
+    await expect(article.textContent).not.toContain("~~")
+  })
 })
 
 /**
@@ -420,6 +425,14 @@ test("a code span is smaller than the prose it sits in", async () => {
 
   const article = canvas.getByRole("article")
 
+  // CodeMirror can finish its syntax decorations after the story mounts.
+  // Wait for the measured span itself rather than capturing a stale null.
+  await waitFor(() => {
+    expect(
+      article.querySelector(".cm-md-code"),
+    ).not.toBeNull()
+  })
+
   const code = article.querySelector(".cm-md-code")
 
   await expect(code).not.toBeNull()

package/src/mdxReferences.test.ts

@@ -6,7 +6,7 @@
  * and does not fail `vitest` — MDX resolves `of` at *runtime*, so a
  * renamed story turns into `of={undefined}` and the docs page
  * renders Storybook's "component failed to render" panel instead of
- * the page. `yarn smoke:storybook` catches it, which is good, but
+ * the page. `pnpm smoke:storybook` catches it, which is good, but
  * only after a full Storybook build; this catches it in under a
  * second, which is the difference between noticing during the edit
  * and noticing in CI.