@duro-app/ui 5.6.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"}