@duro-app/ui 5.12.0 → 5.14.0

package/dist/components/Drawer/styles.css.d.ts

@@ -67,6 +67,19 @@ export declare const styles: Readonly<{
         readonly borderTopRightRadius: css.StyleXClassNameFor<"borderTopRightRadius", string>;
         readonly maxHeight: css.StyleXClassNameFor<"maxHeight", "85vh">;
     }>;
+    readonly panelSnap: Readonly<{
+        readonly maxHeight: css.StyleXClassNameFor<"maxHeight", "none">;
+        readonly transitionProperty: css.StyleXClassNameFor<"transitionProperty", "height">;
+        readonly transitionDuration: css.StyleXClassNameFor<"transitionDuration", string>;
+        readonly transitionTimingFunction: css.StyleXClassNameFor<"transitionTimingFunction", string>;
+    }>;
+    readonly sheetHeight: (height: number) => readonly [Readonly<{
+        height: css.StyleXClassNameFor<"height", number>;
+    }>, css.InlineStyles];
+    readonly grabberHitWeb: Readonly<{
+        readonly cursor: css.StyleXClassNameFor<"cursor", "grab">;
+        readonly touchAction: css.StyleXClassNameFor<"touchAction", "none">;
+    }>;
     readonly panelLeftBorder: Readonly<{
         readonly borderLeftWidth: css.StyleXClassNameFor<"borderLeftWidth", 0>;
         readonly borderRightWidth: css.StyleXClassNameFor<"borderRightWidth", string>;
@@ -139,32 +152,6 @@ export declare const styles: Readonly<{
     readonly closeDurationSlow: Readonly<{
         readonly animationDuration: css.StyleXClassNameFor<"animationDuration", string>;
     }>;
-    readonly header: Readonly<{
-        readonly display: css.StyleXClassNameFor<"display", "flex">;
-        readonly alignItems: css.StyleXClassNameFor<"alignItems", "flex-start">;
-        readonly justifyContent: css.StyleXClassNameFor<"justifyContent", "space-between">;
-        readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
-        readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
-        readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
-        readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
-        readonly gap: css.StyleXClassNameFor<"gap", string>;
-    }>;
-    readonly title: Readonly<{
-        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
-        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
-        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
-        readonly color: css.StyleXClassNameFor<"color", string>;
-        readonly margin: css.StyleXClassNameFor<"margin", 0>;
-    }>;
-    readonly description: Readonly<{
-        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
-        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
-        readonly color: css.StyleXClassNameFor<"color", string>;
-        readonly margin: css.StyleXClassNameFor<"margin", 0>;
-        readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
-        readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
-        readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
-    }>;
     readonly body: Readonly<{
         readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
         readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
@@ -172,37 +159,9 @@ export declare const styles: Readonly<{
         readonly overflowY: css.StyleXClassNameFor<"overflowY", "auto">;
         readonly flex: css.StyleXClassNameFor<"flex", 1>;
     }>;
-    readonly footer: Readonly<{
-        readonly display: css.StyleXClassNameFor<"display", "flex">;
-        readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
-        readonly justifyContent: css.StyleXClassNameFor<"justifyContent", "flex-end">;
-        readonly gap: css.StyleXClassNameFor<"gap", string>;
-        readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
-        readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
-        readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
-        readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
-        readonly borderTopWidth: css.StyleXClassNameFor<"borderTopWidth", string>;
-        readonly borderTopStyle: css.StyleXClassNameFor<"borderTopStyle", "solid">;
-        readonly borderTopColor: css.StyleXClassNameFor<"borderTopColor", string>;
-    }>;
-    readonly closeButton: Readonly<{
-        readonly display: css.StyleXClassNameFor<"display", "flex">;
-        readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
-        readonly justifyContent: css.StyleXClassNameFor<"justifyContent", "center">;
-        readonly width: css.StyleXClassNameFor<"width", string>;
-        readonly height: css.StyleXClassNameFor<"height", string>;
-        readonly borderRadius: css.StyleXClassNameFor<"borderRadius", string>;
-        readonly borderWidth: css.StyleXClassNameFor<"borderWidth", 0>;
-        readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
-        readonly color: css.StyleXClassNameFor<"color", string>;
-        readonly cursor: css.StyleXClassNameFor<"cursor", "pointer">;
-        readonly padding: css.StyleXClassNameFor<"padding", 0>;
-        readonly flexShrink: css.StyleXClassNameFor<"flexShrink", 0>;
-        readonly transitionProperty: css.StyleXClassNameFor<"transitionProperty", "background-color">;
-        readonly transitionDuration: css.StyleXClassNameFor<"transitionDuration", string>;
-    }>;
-    readonly inlineWrapper: Readonly<{
-        readonly display: css.StyleXClassNameFor<"display", "inline-flex">;
+    readonly bodyFlush: Readonly<{
+        readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", 0>;
+        readonly paddingRight: css.StyleXClassNameFor<"paddingRight", 0>;
     }>;
 }>;
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/components/Drawer/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAUpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6PjB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AASpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuMjB,CAAA"}

package/dist/components/Drawer/touchInput.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Real touch input and viewport control for Storybook interaction tests
+ * (the Drawer's, SplitPane's), through
+ * Chrome DevTools Protocol: synthetic pointer events neither scroll nor go
+ * through touch adjustment the way a finger does.
+ */
+export type Point = {
+    x: number;
+    y: number;
+};
+/**
+ * A CDP command. `vitest/browser` loads only under the test runner, so it is
+ * imported here, at call time: a static import breaks the built Storybook.
+ * `CDPSession` is empty until the provider's typings load; `send` exists at runtime.
+ */
+export declare function cdpSend(method: string, params: object): Promise<unknown>;
+/** Set the page's viewport (test runner only, like `cdpSend`). */
+export declare function setViewport(width: number, height: number): Promise<void>;
+export declare const pause: (ms: number) => Promise<unknown>;
+/**
+ * CDP input lands in top-level page coordinates; the story runs in an iframe
+ * the test runner offsets and may scale to fit. Map a point up every frame.
+ */
+export declare function toPage(p: Point): Point;
+/**
+ * A finger drag from one point to another, in `steps` moves 16 ms apart.
+ * Each move is a round trip to the browser; few of them keep a test well
+ * inside its timeout on a loaded machine.
+ */
+export declare function touchDrag(from: Point, to: Point, steps?: number): Promise<void>;
+/** A finger tap. */
+export declare function touchTap(at: Point): Promise<void>;
+/** The centre of an element, in its own document's coordinates. */
+export declare function centre(el: Element): Point;
+//# sourceMappingURL=touchInput.d.ts.map

package/dist/components/Drawer/touchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touchInput.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/touchInput.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,KAAK,GAAG;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAE1C;;;;GAIG;AACH,wBAAsB,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,oBAI3D;AAED,kEAAkE;AAClE,wBAAsB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,iBAG9D;AAED,eAAO,MAAM,KAAK,GAAI,IAAI,MAAM,qBAA0C,CAAA;AAE1E;;;GAGG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,KAAK,GAAG,KAAK,CAWtC;AASD;;;;GAIG;AACH,wBAAsB,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,SAAI,iBAWhE;AAED,oBAAoB;AACpB,wBAAsB,QAAQ,CAAC,EAAE,EAAE,KAAK,iBAGvC;AAED,mEAAmE;AACnE,wBAAgB,MAAM,CAAC,EAAE,EAAE,OAAO,GAAG,KAAK,CAGzC"}

package/dist/components/Drawer/useDrawerRoot.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { DurationToken } from '@duro-app/tokens/keys';
+import { DrawerAnchor, DrawerContextValue } from './parts';
+import { SnapPoint } from './sheetPhysics';
+export interface DrawerRootProps {
+    children: ReactNode;
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Called when drawer open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Which edge the drawer slides from. Default: 'right' */
+    anchor?: DrawerAnchor;
+    /** Whether clicking backdrop or pressing Escape (Android's back button on native) closes the drawer. Default: true */
+    dismissable?: boolean;
+    /** Whether swipe gesture dismisses the drawer. Default: true */
+    swipeDismiss?: boolean;
+    /** Motion token for the close animation. Default: 'fast' (150ms) */
+    closeAnimationDuration?: DurationToken;
+    /**
+     * Bottom anchor only: the heights the sheet rests at. 'medium' is half the
+     * window, 'large' the window less its top safe-area inset. A drag moves
+     * between them and dismisses below the lowest; the grabber steps through
+     * them on a tap. Without it, a bottom drawer is as tall as its content.
+     */
+    snapPoints?: readonly SnapPoint[];
+    /** The detent the sheet opens at. Default: the lowest of snapPoints */
+    defaultSnapPoint?: SnapPoint;
+}
+/** The state both platforms' Drawer.Root share: open and closing, ids, and the detent. */
+export declare function useDrawerRoot({ open: controlledOpen, defaultOpen, onOpenChange, anchor, dismissable, swipeDismiss, closeAnimationDuration, snapPoints: snapPointsProp, defaultSnapPoint, }: Omit<DrawerRootProps, 'children'>): DrawerContextValue;
+//# sourceMappingURL=useDrawerRoot.d.ts.map

package/dist/components/Drawer/useDrawerRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawerRoot.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/useDrawerRoot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAA8C,MAAM,OAAO,CAAA;AACjF,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EAAC,YAAY,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAC7D,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,gBAAgB,CAAA;AAE7D,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,sHAAsH;IACtH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,oEAAoE;IACpE,sBAAsB,CAAC,EAAE,aAAa,CAAA;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,SAAS,SAAS,EAAE,CAAA;IACjC,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B;AAED,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,MAAgB,EAChB,WAAkB,EAClB,YAAmB,EACnB,sBAA+B,EAC/B,UAAU,EAAE,cAAc,EAC1B,gBAAgB,GACjB,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG,kBAAkB,CA6CxD"}

package/dist/components/Drawer/useSheetHeights.d.ts

@@ -0,0 +1,7 @@
+import { SnapPoint } from './sheetPhysics';
+/**
+ * Web: each detent's height in px, ascending, following the window as it
+ * resizes (a rotated phone, an opened on-screen keyboard).
+ */
+export declare function useSheetHeights(points: readonly SnapPoint[], active: boolean): number[];
+//# sourceMappingURL=useSheetHeights.d.ts.map

package/dist/components/Drawer/useSheetHeights.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetHeights.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/useSheetHeights.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,SAAS,EAAC,MAAM,gBAAgB,CAAA;AAqB3D;;;GAGG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,EAAE,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,CAevF"}

package/dist/components/Drawer/useSwipeDismiss.d.ts

@@ -1,4 +1,13 @@
-import { DrawerAnchor } from './Drawer';
+import { DrawerAnchor } from './parts';
+/** A bottom sheet's detents: the drag moves between them before it dismisses. */
+export interface SwipeSnap {
+    /** Each detent's height in px, ascending */
+    heights: readonly number[];
+    /** The detent the sheet rests at */
+    index: number;
+    /** A drag settled on another detent */
+    onSnap: (index: number) => void;
+}
 interface UseSwipeDismissOptions {
     anchor: DrawerAnchor;
     enabled: boolean;
@@ -9,6 +18,8 @@ interface UseSwipeDismissOptions {
      * exists, and listeners must follow the element that is actually shown.
      */
     panel: HTMLDivElement | null;
+    /** Bottom anchor with snapPoints: drag between detents, dismiss below the lowest */
+    snap?: SwipeSnap | null;
 }
 /**
  * Hook that adds swipe-to-dismiss gesture to a drawer panel.
@@ -17,6 +28,6 @@ interface UseSwipeDismissOptions {
  * Opposite direction: iOS-style — panel stays anchored, shows subtle
  * overscroll feedback (box-shadow intensifies), then snaps back.
  */
-export declare function useSwipeDismiss({ anchor, enabled, onDismiss, panel }: UseSwipeDismissOptions): void;
+export declare function useSwipeDismiss({ anchor, enabled, onDismiss, panel, snap, }: UseSwipeDismissOptions): void;
 export {};
 //# sourceMappingURL=useSwipeDismiss.d.ts.map

package/dist/components/Drawer/useSwipeDismiss.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSwipeDismiss.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/useSwipeDismiss.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,UAAU,CAAA;AAkB1C,UAAU,sBAAsB;IAC9B,MAAM,EAAE,YAAY,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB;;;;OAIG;IACH,KAAK,EAAE,cAAc,GAAG,IAAI,CAAA;CAC7B;AAeD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAC,EAAE,sBAAsB,QAuS1F"}
+{"version":3,"file":"useSwipeDismiss.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/useSwipeDismiss.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAA;AAkBzC,iFAAiF;AACjF,MAAM,WAAW,SAAS;IACxB,4CAA4C;IAC5C,OAAO,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,uCAAuC;IACvC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAED,UAAU,sBAAsB;IAC9B,MAAM,EAAE,YAAY,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB;;;;OAIG;IACH,KAAK,EAAE,cAAc,GAAG,IAAI,CAAA;IAC5B,oFAAoF;IACpF,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;CACxB;AAiBD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,IAAW,GACZ,EAAE,sBAAsB,QA0YxB"}

package/dist/components/Form/FormSubmitContext.d.ts

@@ -0,0 +1,8 @@
+/**
+ * How a `type="submit"` Button submits its Form where there is no DOM submit
+ * event: on native, Form provides its validated submit here. The web Form
+ * provides nothing; the browser's form submission does it.
+ */
+export declare const FormSubmitContext: import('react').Context<(() => void) | null>;
+export declare function useFormSubmit(): (() => void) | null;
+//# sourceMappingURL=FormSubmitContext.d.ts.map

package/dist/components/Form/FormSubmitContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSubmitContext.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormSubmitContext.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,iCAAwB,IAAI,SAAe,CAAA;AAEzE,wBAAgB,aAAa,WAFyB,IAAI,SAIzD"}

package/dist/components/Listbox/native.css.d.ts

@@ -0,0 +1,84 @@
+import { css } from 'react-strict-dom';
+/**
+ * A picker sheet's rows on native (plan N0, C0 direction A "Check"): a
+ * touch-target row per option, the chosen one filled and checked.
+ */
+export declare const sheetStyles: Readonly<{
+    readonly list: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: css.StyleXClassNameFor<"flexDirection", "column">;
+    }>;
+    readonly option: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: css.StyleXClassNameFor<"flexDirection", "row">;
+        readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+        readonly minHeight: css.StyleXClassNameFor<"minHeight", string>;
+        readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
+        readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
+        readonly borderBottomWidth: css.StyleXClassNameFor<"borderBottomWidth", string>;
+        readonly borderBottomStyle: css.StyleXClassNameFor<"borderBottomStyle", "solid">;
+        readonly borderBottomColor: css.StyleXClassNameFor<"borderBottomColor", string>;
+    }>;
+    readonly optionFilled: Readonly<{
+        readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly label: Readonly<{
+        readonly flex: css.StyleXClassNameFor<"flex", 1>;
+        readonly color: css.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+    }>;
+    readonly labelDisabled: Readonly<{
+        readonly color: css.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly check: Readonly<{
+        readonly color: css.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+    }>;
+    readonly empty: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: css.StyleXClassNameFor<"flexDirection", "column">;
+        readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+        readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
+        readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
+        readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
+        readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
+        readonly color: css.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly textAlign: css.StyleXClassNameFor<"textAlign", "center">;
+    }>;
+    readonly search: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: css.StyleXClassNameFor<"flexDirection", "row">;
+        readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+        readonly minHeight: css.StyleXClassNameFor<"minHeight", string>;
+        readonly marginLeft: css.StyleXClassNameFor<"marginLeft", string>;
+        readonly marginRight: css.StyleXClassNameFor<"marginRight", string>;
+        readonly marginBottom: css.StyleXClassNameFor<"marginBottom", string>;
+        readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
+        readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
+        readonly borderRadius: css.StyleXClassNameFor<"borderRadius", string>;
+        readonly borderWidth: css.StyleXClassNameFor<"borderWidth", string>;
+        readonly borderStyle: css.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: css.StyleXClassNameFor<"borderColor", string>;
+        readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly searchInput: Readonly<{
+        readonly flex: css.StyleXClassNameFor<"flex", 1>;
+        readonly color: css.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly borderWidth: css.StyleXClassNameFor<"borderWidth", 0>;
+        readonly '::placeholder': css.StyleXClassNameFor<"::placeholder", {
+            readonly color: css.StyleXVar<string>;
+        }>;
+    }>;
+}>;
+//# sourceMappingURL=native.css.d.ts.map

package/dist/components/Listbox/native.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native.css.d.ts","sourceRoot":"","sources":["../../../src/components/Listbox/native.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAOpC;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+EtB,CAAA"}

package/dist/components/Menu/Menu.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, Ref } from 'react';
+import { OnNavigate } from '../../shared/navigate';
 import { ControlSize } from '../../shared/types';
 interface RootProps {
     children: ReactNode;
@@ -34,9 +35,14 @@ interface ItemProps {
 declare function Item({ onClick, children }: ItemProps): import("react/jsx-runtime").JSX.Element;
 interface LinkItemProps {
     href: string;
+    /**
+     * Called for a plain primary click (ADR-0002): call `event.preventDefault()`,
+     * then your router's navigate. Without it the browser follows the link.
+     */
+    onNavigate?: OnNavigate;
     children: ReactNode;
 }
-declare function LinkItem({ href, children }: LinkItemProps): import("react/jsx-runtime").JSX.Element;
+declare function LinkItem({ href, onNavigate, children }: LinkItemProps): import("react/jsx-runtime").JSX.Element;
 declare function Separator(): import("react/jsx-runtime").JSX.Element;
 export declare const Menu: {
     Root: typeof Root;

package/dist/components/Menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,GAAG,EAOT,MAAM,OAAO,CAAA;AAQd,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAQnD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAED,iBAAS,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAC,EAAE,SAAS,2CAUnE;AAQD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAA;AAEpD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAA;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gFAAgF;IAChF,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,uHAAuH;IACvH,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B;AAED,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,OAAmB,EACnB,IAAgB,EAChB,GAAG,GACJ,EAAE,YAAY,2CAiDd;AAGD,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACxB;AAKD,iBAAS,KAAK,CAAC,EAAC,QAAQ,EAAE,KAAe,EAAC,EAAE,UAAU,sCAkDrD;AAGD,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,EAAE,SAAS,2CA6B3C;AAGD,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,QAAQ,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAC,EAAE,aAAa,2CAyBhD;AAMD,iBAAS,SAAS,4CAEjB;AAED,eAAO,MAAM,IAAI;;;;;;;CAOhB,CAAA"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,GAAG,EAOT,MAAM,OAAO,CAAA;AAQd,OAAO,EAAoC,KAAK,UAAU,EAAC,MAAM,uBAAuB,CAAA;AACxF,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAQnD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAED,iBAAS,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAC,EAAE,SAAS,2CAUnE;AAQD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAA;AAEpD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAA;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gFAAgF;IAChF,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,uHAAuH;IACvH,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B;AAED,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,OAAmB,EACnB,IAAgB,EAChB,GAAG,GACJ,EAAE,YAAY,2CAiDd;AAGD,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACxB;AAKD,iBAAS,KAAK,CAAC,EAAC,QAAQ,EAAE,KAAe,EAAC,EAAE,UAAU,sCAkDrD;AAGD,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,EAAE,SAAS,2CA6B3C;AAGD,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,QAAQ,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAC,EAAE,aAAa,2CA4B5D;AAMD,iBAAS,SAAS,4CAEjB;AAED,eAAO,MAAM,IAAI;;;;;;;CAOhB,CAAA"}

package/dist/components/Menu/native.css.d.ts

@@ -0,0 +1,14 @@
+import { css } from 'react-strict-dom';
+/** Native Menu additions to the shared styles. */
+export declare const nativeStyles: Readonly<{
+    readonly nativeFlex: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex">;
+    }>;
+    readonly popupInPlace: Readonly<{
+        readonly position: css.StyleXClassNameFor<"position", "relative">;
+    }>;
+    readonly itemPressed: Readonly<{
+        readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+}>;
+//# sourceMappingURL=native.css.d.ts.map

package/dist/components/Menu/native.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native.css.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/native.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAGpC,kDAAkD;AAClD,eAAO,MAAM,YAAY;;;;;;;;;;EAavB,CAAA"}

package/dist/components/Menu/useMenuOpen.d.ts

@@ -0,0 +1,16 @@
+export interface MenuOpenOptions {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * The menu's open state, controlled or not, shared by both platforms (plan
+ * N0, Decision 10). Focus, highlight and keys are each platform's adapter:
+ * `useMenuRoot` on the web, Menu.native on native.
+ */
+export declare function useMenuOpen({ open: openProp, defaultOpen, onOpenChange }: MenuOpenOptions): {
+    open: boolean;
+    openRef: import('react').RefObject<boolean>;
+    setOpen: (next: boolean) => void;
+};
+//# sourceMappingURL=useMenuOpen.d.ts.map

package/dist/components/Menu/useMenuOpen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuOpen.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/useMenuOpen.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,WAAmB,EAAE,YAAY,EAAC,EAAE,eAAe;;;oBAUrF,OAAO;EASjB"}

package/dist/components/Menu/useMenuRoot.d.ts

@@ -1,9 +1,6 @@
 import { MenuContextValue } from './MenuContext';
-export interface MenuRootOptions {
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}
+import { MenuOpenOptions } from './useMenuOpen';
+export type MenuRootOptions = MenuOpenOptions;
 /**
  * The menu-button pattern (WAI-ARIA APG): on open, focus moves to the
  * `role="menu"` popup, which carries `aria-activedescendant`; arrows move the
@@ -12,7 +9,7 @@ export interface MenuRootOptions {
  * elsewhere (an editor) are never intercepted, and Escape stops there so an
  * enclosing Popover or Dialog stays open.
  */
-export declare function useMenuRoot({ open: openProp, defaultOpen, onOpenChange }: MenuRootOptions): {
+export declare function useMenuRoot(options: MenuRootOptions): {
     ctx: MenuContextValue;
     rootRef: import('react').RefObject<HTMLDivElement | null>;
 };

package/dist/components/Menu/useMenuRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuRoot.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/useMenuRoot.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AAGnD,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,WAAmB,EAAE,YAAY,EAAC,EAAE,eAAe;;;EAkL/F"}
+{"version":3,"file":"useMenuRoot.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/useMenuRoot.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAc,KAAK,eAAe,EAAC,MAAM,eAAe,CAAA;AAE/D,MAAM,MAAM,eAAe,GAAG,eAAe,CAAA;AAE7C;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,eAAe;;;EAkKnD"}

package/dist/components/Popover/native.css.d.ts

@@ -0,0 +1,11 @@
+import { css } from 'react-strict-dom';
+/** Native Popover additions to the shared styles. */
+export declare const nativeStyles: Readonly<{
+    readonly nativeFlex: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex">;
+    }>;
+    readonly popupInPlace: Readonly<{
+        readonly position: css.StyleXClassNameFor<"position", "relative">;
+    }>;
+}>;
+//# sourceMappingURL=native.css.d.ts.map

package/dist/components/Popover/native.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native.css.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/native.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,qDAAqD;AACrD,eAAO,MAAM,YAAY;;;;;;;EASvB,CAAA"}

package/dist/components/Select/Select.d.ts

@@ -21,9 +21,16 @@ declare function Value({ placeholder }: {
 declare function Icon({ children }: {
     children?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-declare function Popup({ children }: {
+interface PopupProps {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+    /** The list's accessible name; on native also the sheet's title. */
+    label?: string;
+    /** Native only: the sheet header's text button that closes it unchanged. Default: 'Cancel' */
+    cancelLabel?: string;
+    /** Shown in place of the list when there are no items. */
+    empty?: ReactNode;
+}
+declare function Popup({ children, label, empty }: PopupProps): import("react/jsx-runtime").JSX.Element;
 interface ItemProps {
     value: string;
     children: ReactNode;

package/dist/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAAsD,MAAM,OAAO,CAAA;AAYzF,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAGnD,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACtC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,EAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAC,EAAE,SAAS,2CAW3F;AAGD,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,IAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,2CAsCA;AAGD,iBAAS,KAAK,CAAC,EAAC,WAAW,EAAC,EAAE;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAC,2CASnD;AAGD,iBAAS,IAAI,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAC,2CAoB/C;AAQD,iBAAS,KAAK,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAqD/C;AAGD,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,EAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAC,EAAE,SAAS,2CAmDpD;AAGD,iBAAS,QAAQ,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAElD;AAED,eAAO,MAAM,MAAM;;;;;;;;CAQlB,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAsD,MAAM,OAAO,CAAA;AAYnG,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAGnD,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACtC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,EAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAC,EAAE,SAAS,2CAW3F;AAGD,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,IAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,2CAsCA;AAGD,iBAAS,KAAK,CAAC,EAAC,WAAW,EAAC,EAAE;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAC,2CASnD;AAGD,iBAAS,IAAI,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAC,2CAoB/C;AAQD,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8FAA8F;IAC9F,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,iBAAS,KAAK,CAAC,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,EAAE,UAAU,2CA4DlD;AAGD,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,EAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAC,EAAE,SAAS,2CAmDpD;AAGD,iBAAS,QAAQ,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAElD;AAED,eAAO,MAAM,MAAM;;;;;;;;CAQlB,CAAA"}

package/dist/components/Select/Select.stories.d.ts

@@ -9,4 +9,15 @@ export declare const KeyboardNavigation: Story;
 export declare const InsideDialog: Story;
 /** Closed, the trigger opens on ArrowDown or ArrowUp, on the selected option (5.3). */
 export declare const ArrowKeysOpen: Story;
+interface LabelledArgs {
+    label: string;
+    empty: string;
+    itemCount: number;
+    onValueChange?: (value: string | null) => void;
+}
+/**
+ * Popup's label names the list (and titles the native sheet); empty replaces
+ * the list when there are no items. Set itemCount to 0 for the empty state.
+ */
+export declare const LabelledAndEmpty: StoryObj<LabelledArgs>;
 //# sourceMappingURL=Select.stories.d.ts.map

package/dist/components/Select/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAKpD,QAAA,MAAM,IAAI,EAAE,IAEX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAErB,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAoC3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA0C7B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAyBhC,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,KA0C1B,CAAA;AAED,uFAAuF;AACvF,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAA"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAKpD,QAAA,MAAM,IAAI,EAAE,IAEX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAErB,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAoC3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA0C7B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAyBhC,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,KA0C1B,CAAA;AAED,uFAAuF;AACvF,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAA;AAID,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,YAAY,CAiCnD,CAAA"}

package/dist/components/Select/native.css.d.ts

@@ -0,0 +1,11 @@
+import { css } from 'react-strict-dom';
+/** Native Select additions to the shared styles. */
+export declare const nativeStyles: Readonly<{
+    readonly nativeFlex: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex">;
+    }>;
+    readonly iconDown: Readonly<{
+        readonly transform: css.StyleXClassNameFor<"transform", "rotate(90deg)">;
+    }>;
+}>;
+//# sourceMappingURL=native.css.d.ts.map

package/dist/components/Select/native.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/native.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,oDAAoD;AACpD,eAAO,MAAM,YAAY;;;;;;;EASvB,CAAA"}

package/dist/components/Select/selectState.d.ts

@@ -0,0 +1,21 @@
+export interface SelectStateOptions {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string | null) => void;
+    initialLabels?: Record<string, string>;
+}
+/**
+ * The Select's state both platforms share (plan N0, Decision 10): the value
+ * (controlled or not), whether it is open, and each option's label. Focus,
+ * highlight, document order and keys are the web adapter's (useSelectRoot);
+ * native presses and the sheet are Select.native's.
+ */
+export declare function useSelectState({ defaultValue, value: controlledValue, onValueChange, initialLabels, }: SelectStateOptions): {
+    value: string | null;
+    setValue: (v: string | null) => void;
+    open: boolean;
+    setOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    labels: Record<string, string>;
+    registerLabel: (v: string, label: string) => void;
+};
+//# sourceMappingURL=selectState.d.ts.map

package/dist/components/Select/selectState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectState.d.ts","sourceRoot":"","sources":["../../../src/components/Select/selectState.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACvC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,aAAa,GACd,EAAE,kBAAkB;;;;;;uBASmB,MAAM,SAAS,MAAM;EAK5D"}

package/dist/components/Select/styles.css.d.ts

@@ -101,5 +101,15 @@ export declare const styles: Readonly<{
     readonly hidden: Readonly<{
         readonly display: css.StyleXClassNameFor<"display", "none">;
     }>;
+    readonly empty: Readonly<{
+        readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
+        readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
+        readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
+        readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly color: css.StyleXClassNameFor<"color", string>;
+        readonly textAlign: css.StyleXClassNameFor<"textAlign", "center">;
+    }>;
 }>;
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/components/Select/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAUpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoHjB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAUpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+HjB,CAAA"}

package/dist/components/Select/useSelectRoot.d.ts

@@ -1,13 +1,11 @@
 import { SelectContextValue } from './SelectContext';
-interface UseSelectRootOptions {
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string | null) => void;
-    initialLabels?: Record<string, string>;
-}
-export declare function useSelectRoot({ defaultValue, value: controlledValue, onValueChange, initialLabels, }: UseSelectRootOptions): {
+import { SelectStateOptions } from './selectState';
+/**
+ * The web adapter over the shared Select state: the highlighted option,
+ * document order, keys and DOM focus (the WAI-ARIA select-only combobox).
+ */
+export declare function useSelectRoot(options: SelectStateOptions): {
     ctx: SelectContextValue;
     rootRef: import('react').RefObject<HTMLDivElement | null>;
 };
-export {};
 //# sourceMappingURL=useSelectRoot.d.ts.map

package/dist/components/Select/useSelectRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectRoot.d.ts","sourceRoot":"","sources":["../../../src/components/Select/useSelectRoot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAA;AAEvD,UAAU,oBAAoB;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACvC;AAED,wBAAgB,aAAa,CAAC,EAC5B,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,aAAa,GACd,EAAE,oBAAoB;;;EAsLtB"}
+{"version":3,"file":"useSelectRoot.d.ts","sourceRoot":"","sources":["../../../src/components/Select/useSelectRoot.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAiB,KAAK,kBAAkB,EAAC,MAAM,eAAe,CAAA;AAErE;;;GAGG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,kBAAkB;;;EAyKxD"}

package/dist/components/SideNav/Chevron.d.ts

@@ -0,0 +1,4 @@
+import { ChevronProps } from './types';
+/** The group disclosure's chevron, drawn in the trigger's text colour. */
+export declare function Chevron(_props: ChevronProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Chevron.d.ts.map

package/dist/components/SideNav/Chevron.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../src/components/SideNav/Chevron.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAA;AAEzC,0EAA0E;AAC1E,wBAAgB,OAAO,CAAC,MAAM,EAAE,YAAY,2CAe3C"}