@duro-app/ui 5.7.0 → 5.8.0

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

@@ -0,0 +1,187 @@
+import { css } from 'react-strict-dom';
+export declare const styles: Readonly<{
+    readonly container: Readonly<{
+        readonly containerType: css.StyleXClassNameFor<"containerType", "inline-size">;
+        readonly position: css.StyleXClassNameFor<"position", "relative">;
+        readonly minWidth: css.StyleXClassNameFor<"minWidth", 0>;
+    }>;
+    readonly grid: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "grid">;
+        readonly minHeight: css.StyleXClassNameFor<"minHeight", "100dvh">;
+        readonly color: css.StyleXClassNameFor<"color", string>;
+        readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
+        readonly gridTemplateRows: css.StyleXClassNameFor<"gridTemplateRows", "auto 1fr">;
+    }>;
+    readonly gridSm: Readonly<{
+        readonly gridTemplateColumns: css.StyleXClassNameFor<"gridTemplateColumns", string>;
+        readonly gridTemplateAreas: css.StyleXClassNameFor<"gridTemplateAreas", "\"bar\" \"main\"" | "\"rail bar\" \"rail main\"">;
+        readonly '--duro-app-shell-bar': css.StyleXClassNameFor<"--duro-app-shell-bar", string>;
+    }>;
+    readonly gridMd: Readonly<{
+        readonly gridTemplateColumns: css.StyleXClassNameFor<"gridTemplateColumns", string>;
+        readonly gridTemplateAreas: css.StyleXClassNameFor<"gridTemplateAreas", "\"bar\" \"main\"" | "\"rail bar\" \"rail main\"">;
+        readonly '--duro-app-shell-bar': css.StyleXClassNameFor<"--duro-app-shell-bar", string>;
+    }>;
+    readonly gridLg: Readonly<{
+        readonly gridTemplateColumns: css.StyleXClassNameFor<"gridTemplateColumns", string>;
+        readonly gridTemplateAreas: css.StyleXClassNameFor<"gridTemplateAreas", "\"bar\" \"main\"" | "\"rail bar\" \"rail main\"">;
+        readonly '--duro-app-shell-bar': css.StyleXClassNameFor<"--duro-app-shell-bar", string>;
+    }>;
+    readonly skip: Readonly<{
+        readonly position: css.StyleXClassNameFor<"position", "absolute">;
+        readonly top: css.StyleXClassNameFor<"top", string>;
+        readonly left: css.StyleXClassNameFor<"left", string>;
+        readonly zIndex: css.StyleXClassNameFor<"zIndex", number>;
+        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 borderRadius: css.StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
+        readonly transform: css.StyleXClassNameFor<"transform", "none" | "translateY(-200%)">;
+        readonly opacity: css.StyleXClassNameFor<"opacity", 0 | 1>;
+    }>;
+    readonly rail: Readonly<{
+        readonly gridArea: css.StyleXClassNameFor<"gridArea", "rail">;
+        readonly alignSelf: css.StyleXClassNameFor<"alignSelf", "start">;
+        readonly position: css.StyleXClassNameFor<"position", "sticky">;
+        readonly top: css.StyleXClassNameFor<"top", 0>;
+        readonly height: css.StyleXClassNameFor<"height", "100dvh">;
+        readonly flexDirection: css.StyleXClassNameFor<"flexDirection", "column">;
+        readonly minWidth: css.StyleXClassNameFor<"minWidth", 0>;
+        readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderRightWidth: css.StyleXClassNameFor<"borderRightWidth", string>;
+        readonly borderRightStyle: css.StyleXClassNameFor<"borderRightStyle", "solid">;
+        readonly borderRightColor: css.StyleXClassNameFor<"borderRightColor", string>;
+    }>;
+    readonly railSm: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex" | "none">;
+    }>;
+    readonly railMd: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex" | "none">;
+    }>;
+    readonly railLg: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex" | "none">;
+    }>;
+    readonly railBrand: Readonly<{
+        readonly flexShrink: css.StyleXClassNameFor<"flexShrink", 0>;
+        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 railBody: Readonly<{
+        readonly flexGrow: css.StyleXClassNameFor<"flexGrow", 1>;
+        readonly minHeight: css.StyleXClassNameFor<"minHeight", 0>;
+        readonly overflowY: css.StyleXClassNameFor<"overflowY", "auto">;
+        readonly overscrollBehavior: css.StyleXClassNameFor<"overscrollBehavior", "contain">;
+    }>;
+    readonly railFooter: Readonly<{
+        readonly flexShrink: css.StyleXClassNameFor<"flexShrink", 0>;
+        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 borderTopWidth: css.StyleXClassNameFor<"borderTopWidth", string>;
+        readonly borderTopStyle: css.StyleXClassNameFor<"borderTopStyle", "solid">;
+        readonly borderTopColor: css.StyleXClassNameFor<"borderTopColor", string>;
+    }>;
+    readonly drawerFooter: Readonly<{
+        readonly marginTop: css.StyleXClassNameFor<"marginTop", string>;
+        readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
+        readonly borderTopWidth: css.StyleXClassNameFor<"borderTopWidth", string>;
+        readonly borderTopStyle: css.StyleXClassNameFor<"borderTopStyle", "solid">;
+        readonly borderTopColor: css.StyleXClassNameFor<"borderTopColor", string>;
+    }>;
+    readonly bar: Readonly<{
+        readonly gridArea: css.StyleXClassNameFor<"gridArea", "bar">;
+        readonly display: css.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+        readonly minWidth: css.StyleXClassNameFor<"minWidth", 0>;
+        readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderBottomWidth: css.StyleXClassNameFor<"borderBottomWidth", string>;
+        readonly borderBottomStyle: css.StyleXClassNameFor<"borderBottomStyle", "solid">;
+        readonly borderBottomColor: css.StyleXClassNameFor<"borderBottomColor", string>;
+    }>;
+    readonly barSm: Readonly<{
+        readonly position: css.StyleXClassNameFor<"position", "static" | "sticky">;
+        readonly top: css.StyleXClassNameFor<"top", 0>;
+        readonly zIndex: css.StyleXClassNameFor<"zIndex", number | "auto">;
+        readonly height: css.StyleXClassNameFor<"height", 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 barMd: Readonly<{
+        readonly position: css.StyleXClassNameFor<"position", "static" | "sticky">;
+        readonly top: css.StyleXClassNameFor<"top", 0>;
+        readonly zIndex: css.StyleXClassNameFor<"zIndex", number | "auto">;
+        readonly height: css.StyleXClassNameFor<"height", 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 barLg: Readonly<{
+        readonly position: css.StyleXClassNameFor<"position", "static" | "sticky">;
+        readonly top: css.StyleXClassNameFor<"top", 0>;
+        readonly zIndex: css.StyleXClassNameFor<"zIndex", number | "auto">;
+        readonly height: css.StyleXClassNameFor<"height", 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 barEmptySm: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex" | "none">;
+    }>;
+    readonly barEmptyMd: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex" | "none">;
+    }>;
+    readonly barEmptyLg: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex" | "none">;
+    }>;
+    readonly narrowSm: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex" | "none">;
+    }>;
+    readonly narrowMd: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex" | "none">;
+    }>;
+    readonly narrowLg: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex" | "none">;
+    }>;
+    readonly narrowItem: Readonly<{
+        readonly flexShrink: css.StyleXClassNameFor<"flexShrink", 0>;
+        readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
+        readonly minWidth: css.StyleXClassNameFor<"minWidth", 0>;
+    }>;
+    readonly header: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+        readonly flexGrow: css.StyleXClassNameFor<"flexGrow", 1>;
+        readonly minWidth: css.StyleXClassNameFor<"minWidth", 0>;
+    }>;
+    readonly main: Readonly<{
+        readonly gridArea: css.StyleXClassNameFor<"gridArea", "main">;
+        readonly minWidth: css.StyleXClassNameFor<"minWidth", 0>;
+        readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
+        readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
+        readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "none">;
+    }>;
+    readonly mainSm: Readonly<{
+        readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
+        readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
+    }>;
+    readonly mainMd: Readonly<{
+        readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
+        readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
+    }>;
+    readonly mainLg: Readonly<{
+        readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
+        readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
+    }>;
+}>;
+//# sourceMappingURL=styles.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAkCpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwLjB,CAAA"}

package/dist/components/Aside/Aside.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode, Ref } from 'react';
+import { SpacingToken } from '@duro-app/tokens/keys';
+interface AsideProps {
+    /** Names the landmark ("Page outline"); required, from your text catalog. */
+    'aria-label': string;
+    /**
+     * The gap kept above the aside while it is stuck, and below it when it is
+     * taller than the viewport. Default `lg`.
+     */
+    offset?: SpacingToken;
+    /** The `aside` element. */
+    ref?: Ref<HTMLElement>;
+    children: ReactNode;
+}
+/**
+ * Aside — content beside the main reading column (a table of contents,
+ * related pages): a labelled `aside` landmark that sticks within the viewport
+ * while the page scrolls and scrolls on its own when it is taller than the
+ * viewport. Put it in the second track of `Grid layout="content-aside"`.
+ */
+export declare function Aside({ 'aria-label': ariaLabel, offset, ref, children }: AsideProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Aside.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Aside.d.ts","sourceRoot":"","sources":["../../../src/components/Aside/Aside.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAE,GAAG,EAAC,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAGvD,UAAU,UAAU;IAClB,6EAA6E;IAC7E,YAAY,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,2BAA2B;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;IACtB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAaD;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EAAC,YAAY,EAAE,SAAS,EAAE,MAAa,EAAE,GAAG,EAAE,QAAQ,EAAC,EAAE,UAAU,2CAMxF"}

package/dist/components/Aside/Aside.meta.d.ts

@@ -0,0 +1,3 @@
+import { ComponentMeta } from '../component-meta';
+export declare const meta: ComponentMeta;
+//# sourceMappingURL=Aside.meta.d.ts.map

package/dist/components/Aside/Aside.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Aside.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Aside/Aside.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,aA8BlB,CAAA"}

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

@@ -0,0 +1,45 @@
+import { StoryObj } from '@storybook/react';
+import { SpacingToken } from '@duro-app/tokens/keys';
+interface AsideArgs {
+    'aria-label': string;
+    /** The gap kept between the viewport's top and the Aside while it sticks. */
+    offset: SpacingToken;
+}
+declare const meta: {
+    title: string;
+    args: {
+        'aria-label': string;
+        offset: "lg";
+    };
+    argTypes: {
+        'aria-label': {
+            control: "text";
+        };
+        offset: {
+            control: "select";
+            options: ("xs" | "sm" | "md" | "lg" | "xl" | "ms" | "xxl" | "xxxl")[];
+        };
+    };
+    parameters: {
+        a11y: {
+            test: string;
+        };
+    };
+    decorators: import('@storybook/react').Decorator[];
+    render: (args: AsideArgs) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * A long page with its outline beside it. Scroll the canvas: the Aside sticks
+ * `offset` below the viewport's top and scrolls on its own, being taller than
+ * the viewport. Change `offset` to move where it sticks.
+ */
+export declare const Playground: Story;
+/**
+ * Sticks within the viewport while the page scrolls, and scrolls on its own
+ * when it is taller than the viewport; a labelled complementary landmark.
+ * It scrolls the page, so it runs as a test only.
+ */
+export declare const StickyAndScrolling: Story;
+//# sourceMappingURL=Aside.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Aside.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Aside/Aside.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAIpD,OAAO,EAA2B,KAAK,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAQjF,UAAU,SAAS;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,6EAA6E;IAC7E,MAAM,EAAE,YAAY,CAAA;CACrB;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;CAUiB,CAAA;AAE3B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAkClC;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAAU,CAAA;AAEnC;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,KA4BhC,CAAA"}

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

@@ -0,0 +1,44 @@
+import { css } from 'react-strict-dom';
+export declare const styles: Readonly<{
+    readonly root: Readonly<{
+        readonly position: css.StyleXClassNameFor<"position", "sticky">;
+        readonly alignSelf: css.StyleXClassNameFor<"alignSelf", "start">;
+        readonly zIndex: css.StyleXClassNameFor<"zIndex", number>;
+        readonly overflowY: css.StyleXClassNameFor<"overflowY", "auto">;
+        readonly overscrollBehavior: css.StyleXClassNameFor<"overscrollBehavior", "contain">;
+        readonly minWidth: css.StyleXClassNameFor<"minWidth", 0>;
+    }>;
+    readonly offsetXs: Readonly<{
+        readonly top: css.StyleXClassNameFor<"top", `calc(var(--duro-app-shell-bar, 0px) + ${css.StyleXVar<string>})`>;
+        readonly maxHeight: css.StyleXClassNameFor<"maxHeight", `calc(100dvh - var(--duro-app-shell-bar, 0px) - 2 * ${css.StyleXVar<string>})`>;
+    }>;
+    readonly offsetSm: Readonly<{
+        readonly top: css.StyleXClassNameFor<"top", `calc(var(--duro-app-shell-bar, 0px) + ${css.StyleXVar<string>})`>;
+        readonly maxHeight: css.StyleXClassNameFor<"maxHeight", `calc(100dvh - var(--duro-app-shell-bar, 0px) - 2 * ${css.StyleXVar<string>})`>;
+    }>;
+    readonly offsetMs: Readonly<{
+        readonly top: css.StyleXClassNameFor<"top", `calc(var(--duro-app-shell-bar, 0px) + ${css.StyleXVar<string>})`>;
+        readonly maxHeight: css.StyleXClassNameFor<"maxHeight", `calc(100dvh - var(--duro-app-shell-bar, 0px) - 2 * ${css.StyleXVar<string>})`>;
+    }>;
+    readonly offsetMd: Readonly<{
+        readonly top: css.StyleXClassNameFor<"top", `calc(var(--duro-app-shell-bar, 0px) + ${css.StyleXVar<string>})`>;
+        readonly maxHeight: css.StyleXClassNameFor<"maxHeight", `calc(100dvh - var(--duro-app-shell-bar, 0px) - 2 * ${css.StyleXVar<string>})`>;
+    }>;
+    readonly offsetLg: Readonly<{
+        readonly top: css.StyleXClassNameFor<"top", `calc(var(--duro-app-shell-bar, 0px) + ${css.StyleXVar<string>})`>;
+        readonly maxHeight: css.StyleXClassNameFor<"maxHeight", `calc(100dvh - var(--duro-app-shell-bar, 0px) - 2 * ${css.StyleXVar<string>})`>;
+    }>;
+    readonly offsetXl: Readonly<{
+        readonly top: css.StyleXClassNameFor<"top", `calc(var(--duro-app-shell-bar, 0px) + ${css.StyleXVar<string>})`>;
+        readonly maxHeight: css.StyleXClassNameFor<"maxHeight", `calc(100dvh - var(--duro-app-shell-bar, 0px) - 2 * ${css.StyleXVar<string>})`>;
+    }>;
+    readonly offsetXxl: Readonly<{
+        readonly top: css.StyleXClassNameFor<"top", `calc(var(--duro-app-shell-bar, 0px) + ${css.StyleXVar<string>})`>;
+        readonly maxHeight: css.StyleXClassNameFor<"maxHeight", `calc(100dvh - var(--duro-app-shell-bar, 0px) - 2 * ${css.StyleXVar<string>})`>;
+    }>;
+    readonly offsetXxxl: Readonly<{
+        readonly top: css.StyleXClassNameFor<"top", `calc(var(--duro-app-shell-bar, 0px) + ${css.StyleXVar<string>})`>;
+        readonly maxHeight: css.StyleXClassNameFor<"maxHeight", `calc(100dvh - var(--duro-app-shell-bar, 0px) - 2 * ${css.StyleXVar<string>})`>;
+    }>;
+}>;
+//# sourceMappingURL=styles.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Aside/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAQpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDjB,CAAA"}

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

@@ -18,6 +18,7 @@ export declare const styles: Readonly<{
         readonly transitionTimingFunction: css.StyleXClassNameFor<"transitionTimingFunction", string>;
         readonly textDecoration: css.StyleXClassNameFor<"textDecoration", "none">;
         readonly whiteSpace: css.StyleXClassNameFor<"whiteSpace", "nowrap">;
+        readonly minWidth: css.StyleXClassNameFor<"minWidth", string | null>;
         readonly transform: css.StyleXClassNameFor<"transform", "scale(1)" | "scale(0.97)">;
         readonly outlineWidth: css.StyleXClassNameFor<"outlineWidth", string | 0>;
         readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "none" | "solid">;
@@ -29,6 +30,7 @@ export declare const styles: Readonly<{
         readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
         readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
         readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
+        readonly minHeight: css.StyleXClassNameFor<"minHeight", string | null>;
     }>;
     readonly sizeSmall: Readonly<{
         readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Button/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAQpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiIjB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Button/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAQpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsIjB,CAAA"}

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

@@ -37,8 +37,8 @@ export declare const AttachedMixedSmall: Story;
  *  them): every one is controlSm tall whatever it holds, with Toggle's
  *  padding and font. The ghost Menu trigger is the small icon-button size. */
 export declare const SmallTriggersRow: Story;
-/** The same row under a coarse pointer: Toggle and the three triggers reach
- *  touchTarget, the ghost Menu too. Button has no touch size at any size, so the small Button stays
- *  controlSm (the 5.5 plan's addendum). */
+/** The same row under a coarse pointer: every control reaches touchTarget —
+ *  Toggle, the three triggers, the ghost Menu, and since 5.6 Button too (the
+ *  5.5 addendum had left Button out; the person chose to close it). */
 export declare const SmallTriggersRowCoarsePointer: Story;
 //# sourceMappingURL=ButtonGroup.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonGroup/ButtonGroup.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAWpD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AAazC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CASlC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KActB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAA;AA2ED,sEAAsE;AACtE,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAA;AAED;yDACyD;AACzD,eAAO,MAAM,oBAAoB,EAAE,KAMlC,CAAA;AAID,eAAO,MAAM,qBAAqB,EAAE,KAkBnC,CAAA;AAED,2EAA2E;AAC3E,eAAO,MAAM,mBAAmB,EAAE,KAgBjC,CAAA;AAkDD;oCACoC;AACpC,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA;AAED;mCACmC;AACnC,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAA;AAiBD,2EAA2E;AAC3E,eAAO,MAAM,wBAAwB,EAAE,KAwBtC,CAAA;AAED;sEACsE;AACtE,eAAO,MAAM,sBAAsB,EAAE,KAwBpC,CAAA;AAQD,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAA;AAED;+BAC+B;AAC/B,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAA;AAkDD;;;8EAG8E;AAC9E,eAAO,MAAM,gBAAgB,EAAE,KA4B9B,CAAA;AAED;;2CAE2C;AAC3C,eAAO,MAAM,6BAA6B,EAAE,KAmB3C,CAAA"}
+{"version":3,"file":"ButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonGroup/ButtonGroup.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAWpD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AAazC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CASlC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KActB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAA;AA2ED,sEAAsE;AACtE,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAA;AAED;yDACyD;AACzD,eAAO,MAAM,oBAAoB,EAAE,KAMlC,CAAA;AAID,eAAO,MAAM,qBAAqB,EAAE,KAkBnC,CAAA;AAED,2EAA2E;AAC3E,eAAO,MAAM,mBAAmB,EAAE,KAgBjC,CAAA;AAkDD;oCACoC;AACpC,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA;AAED;mCACmC;AACnC,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAA;AAiBD,2EAA2E;AAC3E,eAAO,MAAM,wBAAwB,EAAE,KAwBtC,CAAA;AAED;sEACsE;AACtE,eAAO,MAAM,sBAAsB,EAAE,KAwBpC,CAAA;AAQD,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAA;AAED;+BAC+B;AAC/B,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAA;AAkDD;;;8EAG8E;AAC9E,eAAO,MAAM,gBAAgB,EAAE,KA4B9B,CAAA;AAED;;uEAEuE;AACvE,eAAO,MAAM,6BAA6B,EAAE,KAkB3C,CAAA"}

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+interface CodeBlockProps {
+    /**
+     * The code: text, or the `<code>` element a Markdown renderer produced
+     * (highlighted spans included). What is copied is its text content.
+     */
+    children: ReactNode;
+    /** The copy button's label ("Copy"), from your text catalog. */
+    copyLabel: string;
+    /**
+     * The label while the copy is confirmed ("Copied"), also announced to
+     * screen readers.
+     */
+    copiedLabel: string;
+    /** How long the confirmation stays, in milliseconds. Default 2000. */
+    copiedDuration?: number;
+    /** Called when the clipboard refuses the write (an insecure context, a denied permission). */
+    onCopyError?: (error: unknown) => void;
+}
+/**
+ * CodeBlock — a block of code with a copy button: a `pre` that scrolls
+ * sideways when a line is long (and is then focusable, so a keyboard can
+ * scroll it), and a Button that copies its text and
+ * confirms ("Copied") on the button and through a polite LiveRegion. Inside
+ * `Prose`, pass it as the Markdown renderer's `pre`.
+ */
+export declare function CodeBlock({ children, copyLabel, copiedLabel, copiedDuration, onCopyError, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CodeBlock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../src/components/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAO9E,UAAU,cAAc;IACtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB,gEAAgE;IAChE,SAAS,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB,sEAAsE;IACtE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,8FAA8F;IAC9F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,cAAqB,EACrB,WAAW,GACZ,EAAE,cAAc,2CA2DhB"}

package/dist/components/CodeBlock/CodeBlock.meta.d.ts

@@ -0,0 +1,3 @@
+import { ComponentMeta } from '../component-meta';
+export declare const meta: ComponentMeta;
+//# sourceMappingURL=CodeBlock.meta.d.ts.map

package/dist/components/CodeBlock/CodeBlock.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.meta.d.ts","sourceRoot":"","sources":["../../../src/components/CodeBlock/CodeBlock.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,aA0BlB,CAAA"}

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

@@ -0,0 +1,67 @@
+import { StoryObj } from '@storybook/react';
+interface CodeBlockArgs {
+    /** The code shown (and copied). */
+    code: string;
+    copyLabel: string;
+    copiedLabel: string;
+    /** How long the copied label stays, in ms. */
+    copiedDuration: number;
+    /** A refused clipboard (permission denied, an insecure page). */
+    onCopyError: (error: unknown) => void;
+}
+declare const meta: {
+    title: string;
+    args: {
+        code: string;
+        copyLabel: string;
+        copiedLabel: string;
+        copiedDuration: number;
+        onCopyError: import('storybook/test').Mock<(...args: any[]) => any>;
+    };
+    argTypes: {
+        code: {
+            control: "text";
+        };
+        copyLabel: {
+            control: "text";
+        };
+        copiedLabel: {
+            control: "text";
+        };
+        copiedDuration: {
+            control: {
+                type: "number";
+                min: number;
+                step: number;
+            };
+        };
+    };
+    parameters: {
+        a11y: {
+            test: string;
+        };
+    };
+    decorators: import('@storybook/react').Decorator[];
+    render: ({ code, ...args }: CodeBlockArgs) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Press the copy button: the label changes to `copiedLabel` for
+ * `copiedDuration` ms and a polite region announces it. A refused clipboard
+ * shows up in Actions as `onCopyError`.
+ */
+export declare const Playground: Story;
+/** Playground's checks, kept off the visible story so a Control change cannot fail them. */
+export declare const PlaygroundChecks: Story;
+/** A long line scrolls inside the block instead of widening the page. */
+export declare const LongLineScrolls: Story;
+/** LongLineScrolls's checks, kept off the visible story so a Control change cannot fail them. */
+export declare const LongLineScrollsChecks: Story;
+/** Copies the text, confirms on the button and announces it, then resets. */
+export declare const CopiesAndAnnounces: Story;
+/** A refused clipboard confirms nothing and reports the error. */
+export declare const CopyRefused: Story;
+/** Without onCopyError, a refused clipboard still reaches the console. */
+export declare const CopyRefusedWithoutHandler: Story;
+//# sourceMappingURL=CodeBlock.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.stories.d.ts","sourceRoot":"","sources":["../../../src/components/CodeBlock/CodeBlock.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAMpD,UAAU,aAAa;IACrB,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,8CAA8C;IAC9C,cAAc,EAAE,MAAM,CAAA;IACtB,iEAAiE;IACjE,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACtC;AAKD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBqB,CAAA;AAE/B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAQlC;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAAU,CAAA;AAEnC,4FAA4F;AAC5F,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAA;AAED,yEAAyE;AACzE,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAA;AAED,iGAAiG;AACjG,eAAO,MAAM,qBAAqB,EAAE,KAUnC,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,kBAAkB,EAAE,KAsBhC,CAAA;AAED,kEAAkE;AAClE,eAAO,MAAM,WAAW,EAAE,KAezB,CAAA;AAED,0EAA0E;AAC1E,eAAO,MAAM,yBAAyB,EAAE,KAsBvC,CAAA"}

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

@@ -0,0 +1,32 @@
+import { css } from 'react-strict-dom';
+export declare const styles: Readonly<{
+    readonly root: Readonly<{
+        readonly position: css.StyleXClassNameFor<"position", "relative">;
+        readonly minWidth: css.StyleXClassNameFor<"minWidth", 0>;
+    }>;
+    readonly pre: Readonly<{
+        readonly margin: css.StyleXClassNameFor<"margin", 0>;
+        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 overflowX: css.StyleXClassNameFor<"overflowX", "auto">;
+        readonly color: css.StyleXClassNameFor<"color", string>;
+        readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderWidth: css.StyleXClassNameFor<"borderWidth", string>;
+        readonly borderStyle: css.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: css.StyleXClassNameFor<"borderColor", string>;
+        readonly borderRadius: css.StyleXClassNameFor<"borderRadius", string>;
+        readonly whiteSpace: css.StyleXClassNameFor<"whiteSpace", "pre">;
+        readonly outlineWidth: css.StyleXClassNameFor<"outlineWidth", string | 0>;
+        readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "none" | "solid">;
+        readonly outlineColor: css.StyleXClassNameFor<"outlineColor", string>;
+        readonly outlineOffset: css.StyleXClassNameFor<"outlineOffset", string | 0>;
+    }>;
+    readonly copy: Readonly<{
+        readonly position: css.StyleXClassNameFor<"position", "absolute">;
+        readonly top: css.StyleXClassNameFor<"top", string>;
+        readonly right: css.StyleXClassNameFor<"right", string>;
+    }>;
+}>;
+//# sourceMappingURL=styles.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/CodeBlock/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAKpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BjB,CAAA"}

package/dist/components/Grid/Grid.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 import { GridColumns } from './columns';
 import { SpacingToken } from '@duro-app/tokens/keys';
 import { GridTrack, Length } from '../../shared/length';
-export type GridLayout = 'split' | 'split-wide';
+export type GridLayout = 'split' | 'split-wide' | 'content-aside';
 interface GridProps {
     gap?: SpacingToken;
     /** A column count (equal columns) or weights: `[1, 2]` gives a one-third /
@@ -20,7 +20,9 @@ interface GridProps {
      * column on the width of its OWN container — `split` below `sm` (640px),
      * `split-wide` below `md` (768px) — so a split nested inside another
      * split, or beside an open DetailPanel, collapses when it runs out of room
-     * rather than when the window does. Wins over `columns` / `minColumnWidth`.
+     * rather than when the window does. `content-aside` is a reading column
+     * beside an `Aside` (`asideW`, 320px), one column below `md`. Wins over
+     * `columns` / `minColumnWidth`.
      */
     layout?: GridLayout;
     /**
@@ -32,8 +34,15 @@ interface GridProps {
      * wins over it.
      */
     tracks?: readonly GridTrack[];
+    /**
+     * The Grid's outer element: with a `layout`, the wrapper its container
+     * query measures (hand it to `useContainerBelow` to follow the same
+     * collapse); otherwise the grid itself. Web only: on native the ref is not
+     * attached.
+     */
+    ref?: Ref<HTMLDivElement>;
     children: ReactNode;
 }
-export declare function Grid({ gap, columns, minColumnWidth, layout, tracks, children }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ gap, columns, minColumnWidth, layout, tracks, ref, children, }: GridProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Grid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAI9C,OAAO,EAAuD,KAAK,WAAW,EAAC,MAAM,WAAW,CAAA;AAChG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE5F,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,YAAY,CAAA;AAE/C,UAAU,SAAS;IACjB,GAAG,CAAC,EAAE,YAAY,CAAA;IAClB;;+DAE2D;IAC3D,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB;;;oCAGgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,SAAS,SAAS,EAAE,CAAA;IAC7B,QAAQ,EAAE,SAAS,CAAA;CACpB;AA0DD,wBAAgB,IAAI,CAAC,EAAC,GAAU,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAC,EAAE,SAAS,2CA8B9F"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;AAIxD,OAAO,EAAuD,KAAK,WAAW,EAAC,MAAM,WAAW,CAAA;AAChG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE5F,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,eAAe,CAAA;AAEjE,UAAU,SAAS;IACjB,GAAG,CAAC,EAAE,YAAY,CAAA;IAClB;;+DAE2D;IAC3D,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB;;;oCAGgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,SAAS,SAAS,EAAE,CAAA;IAC7B;;;;;OAKG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACzB,QAAQ,EAAE,SAAS,CAAA;CACpB;AA4DD,wBAAgB,IAAI,CAAC,EACnB,GAAU,EACV,OAAO,EACP,cAAc,EACd,MAAM,EACN,MAAM,EACN,GAAG,EACH,QAAQ,GACT,EAAE,SAAS,2CAwCX"}

package/dist/components/Grid/Grid.meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,aAiDlB,CAAA"}
+{"version":3,"file":"Grid.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,aAkDlB,CAAA"}

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

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Grid } from './Grid';
+import { SpacingToken } from '@duro-app/tokens/keys';
 declare const meta: Meta<typeof Grid>;
 export default meta;
 type Story = StoryObj<typeof Grid>;
@@ -25,4 +26,31 @@ export declare const WeightedColumns: Story;
 export declare const WithContainerQuery: Story;
 export declare const TracksWithAside: Story;
 export declare const TracksWithMinmax: Story;
+interface ContentAsideArgs {
+    /** The gap between the reading column and the Aside. */
+    gap: SpacingToken;
+    /** The frame's width in px: the container the Grid measures. */
+    width: number;
+}
+/**
+ * A reading column beside an Aside (asideW); one column below md (768px),
+ * measured on the Grid's own container. Drag `width` across 768 to see it
+ * collapse: the column reports what `useContainerBelow` sees.
+ */
+export declare const ContentAside: StoryObj<ContentAsideArgs>;
+/** ContentAside's checks, kept off the visible story so a Control change cannot fail them. */
+export declare const ContentAsideChecks: StoryObj<ContentAsideArgs>;
+/** ContentAside's checks below md (pageSm, 600px): the Aside stacks under the column. */
+export declare const ContentAsideStackedChecks: StoryObj<ContentAsideArgs>;
+/** A wide page and a narrow one, side by side: beside, then stacked. */
+export declare const ContentAsideWideAndNarrow: Story;
+/**
+ * The collapse and `useContainerBelow` follow the Grid's container, not the
+ * window: in a 1440px viewport the 600px page stacks and reports "below md",
+ * the 1200px one does not. The forwarded ref is the container the query
+ * measures. Sizes the browser through Vitest, so it runs as a test only.
+ */
+export declare const ContentAsideFollowsItsContainer: Story;
+/** `ref` reaches the grid element itself when there is no named layout. */
+export declare const RefWithoutLayout: Story;
 //# sourceMappingURL=Grid.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAGpD,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAA;AAU3B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAgB3B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AA2BlC,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAiBnB,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,EAAE,KAqC1B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAsBhC,CAAA;AAID,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAA"}
+{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAGpD,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAA;AAI3B,OAAO,EAAyB,KAAK,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAU/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAgB3B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AA2BlC,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAiBnB,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,EAAE,KAqC1B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAsBhC,CAAA;AAID,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAA;AAuDD,UAAU,gBAAgB;IACxB,wDAAwD;IACxD,GAAG,EAAE,YAAY,CAAA;IACjB,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAanD,CAAA;AAED,8FAA8F;AAC9F,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,gBAAgB,CAiBzD,CAAA;AAED,yFAAyF;AACzF,eAAO,MAAM,yBAAyB,EAAE,QAAQ,CAAC,gBAAgB,CAGhE,CAAA;AAED,wEAAwE;AACxE,eAAO,MAAM,yBAAyB,EAAE,KA2BvC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,+BAA+B,EAAE,KA2C7C,CAAA;AAID,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB,EAAE,KAY9B,CAAA"}