@duro-app/ui 5.6.0 → 5.8.0

package/dist/components/DragDrop/DragDrop.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { SpacingToken } from '@duro-app/tokens/keys';
 export interface DragDropItemData<T = unknown> {
     readonly id: string;
     readonly zone: string;
@@ -14,36 +15,100 @@ export interface DragDropEvent<T = unknown> {
     readonly item: DragDropItemData<T>;
     readonly target: DragDropTarget;
 }
+/** What a zone's `accepts` answers: `true` takes the item, `false` lets it
+ *  pass silently (an outer zone may take it), and `{ok: false, reason}`
+ *  refuses it out loud — the reason is shown on the ghost and announced. */
+export type DragDropVerdict = boolean | {
+    readonly ok: false;
+    readonly reason: string;
+};
+export interface DragDropRefusal {
+    readonly zone: string;
+    readonly reason: string;
+}
+export interface DragDropOverEvent<T = unknown> {
+    readonly item: DragDropItemData<T>;
+    /** Where the item would land now; null over nothing that accepts it. */
+    readonly target: DragDropTarget | null;
+    /** The innermost zone that refused with a reason, when nothing accepted. */
+    readonly refused: DragDropRefusal | null;
+    readonly keyboard: boolean;
+}
+export interface DragDropAnnouncement {
+    readonly kind: 'pick' | 'move' | 'drop' | 'cancel' | 'refuse';
+    /** The item's label. */
+    readonly item: string;
+    /** The zone's label (pick, move, drop, refuse). */
+    readonly zone?: string;
+    /** 1-based position in the zone, counting the item itself. */
+    readonly position?: number;
+    /** How many items the zone holds with the item in it. */
+    readonly count?: number;
+    /** The zone's refusal (refuse). */
+    readonly reason?: string;
+    /** Whether the drag is a keyboard one. */
+    readonly keyboard: boolean;
+}
+export interface DragDropPlaceholderInfo {
+    readonly zone: string;
+    readonly index: number;
+    /** The zone's label, e.g. for "→ In progress". */
+    readonly label: string;
+}
+export type DragDropRenderPlaceholder = (info: DragDropPlaceholderInfo) => ReactNode;
 export interface DragDropRootProps<T = unknown> {
-    /** Called when an item is released over a zone that accepts it. Reordering
-     *  inside the item's own zone arrives here too, with the new index. */
+    /** Called when an item is released over a zone that accepts it (or dropped
+     *  with Space/Enter). Reordering inside the item's own zone arrives here
+     *  too, with the new index. */
     onDrop: (event: DragDropEvent<T>) => void;
-    /** Overrides the default screen-reader announcements. */
-    announce?: (event: {
-        kind: 'pick' | 'drop' | 'cancel';
-        item: string;
-        zone?: string;
-    }) => string;
+    /** Called whenever the target under the drag changes — a new zone or
+     *  index, nothing, or a refusal. */
+    onDragOver?: (event: DragDropOverEvent<T>) => void;
+    /** Supplies every live-region string (pick, move, drop, cancel, refuse),
+     *  e.g. from the app's message catalog. Defaults to English. */
+    announce?: (event: DragDropAnnouncement) => string;
+    /** What marks the insertion point in a zone while dragging; a Zone's own
+     *  renderPlaceholder wins. Without one, only the zone lights up. */
+    renderPlaceholder?: DragDropRenderPlaceholder;
+    /** Read by screen readers on a focused Handle. */
+    instructions?: string;
     children: ReactNode;
 }
-declare function Root<T = unknown>({ onDrop, announce, children }: DragDropRootProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Root<T = unknown>({ onDrop, onDragOver, announce, renderPlaceholder, instructions, children, }: DragDropRootProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface DragDropZoneProps<T = unknown> {
     id: string;
-    /** Read to screen readers when an item is dropped here. */
+    /** Read to screen readers when an item moves or drops here; the list's
+     *  accessible name with `list`. */
     label: string;
     /** Which axis items flow along; decides how the insertion index is read
      *  from the pointer. */
     orientation?: 'horizontal' | 'vertical';
-    /** Refuse an item; the zone then never lights up for it. */
-    accepts?: (item: DragDropItemData<T>) => boolean;
+    /** Take the item (`true`), let it pass to an outer zone (`false`), or
+     *  refuse it with a reason that is shown and announced
+     *  (`{ok: false, reason}`). Omitted: every item is taken. */
+    accepts?: (item: DragDropItemData<T>) => DragDropVerdict;
+    /** Keyboard order across zones (Left/Right); zones without one follow, in
+     *  DOM order. */
+    order?: number;
+    /** Marks the insertion point in this zone; overrides the Root's. */
+    renderPlaceholder?: DragDropRenderPlaceholder;
+    /** Render the zone as a labelled list (`role="list"`) laid out along
+     *  `orientation`, its Items as list items. Put the Items directly in it. */
+    list?: boolean;
+    /** Gap between the Items of a `list` zone. */
+    gap?: SpacingToken;
+    /** Stretch to fill the parent (a Timeline bar, a card) instead of sizing
+     *  to the content. */
+    fill?: boolean;
     children: ReactNode;
 }
-declare function Zone<T = unknown>({ id, label, orientation, accepts, children, }: DragDropZoneProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Zone<T = unknown>({ id, label, orientation, accepts, order, renderPlaceholder, list, gap, fill, children, }: DragDropZoneProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface DragDropItemProps<T = unknown> {
     id: string;
     /** The zone this item currently lives in. */
     zone: string;
-    /** Read to screen readers when picked up or dropped. */
+    /** Read to screen readers when picked up or dropped; a Handle's default
+     *  accessible name. */
     label: string;
     /** Carried to onDrop untouched. */
     data?: T;
@@ -53,15 +118,31 @@ export interface DragDropItemProps<T = unknown> {
     children: ReactNode;
 }
 declare function Item<T = unknown>({ id, zone, label, data, preview, disabled, children, }: DragDropItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface DragDropHandleProps {
+    /** Defaults to the Item's label. */
+    'aria-label'?: string;
+    /** What the handle shows: a grip, or the item's whole face. Keep other
+     *  controls out of it — a handle is one widget. */
+    children: ReactNode;
+}
+/**
+ * The keyboard path into an Item: one focusable widget (`role="button"`) per
+ * item, a roving tab stop per zone. Space picks the item up, the arrow keys
+ * move it, Space or Enter drops it, Escape cancels.
+ */
+declare function Handle({ 'aria-label': ariaLabel, children }: DragDropHandleProps): import("react/jsx-runtime").JSX.Element;
 /** Current drag, for consumers that render their own placeholder or ghost. */
 export declare function useDragDrop(): {
     readonly dragging: string | null;
     readonly over: DragDropTarget | null;
+    readonly refused: DragDropRefusal | null;
+    readonly keyboard: boolean;
 };
 export declare const DragDrop: {
     Root: typeof Root;
     Zone: typeof Zone;
     Item: typeof Item;
+    Handle: typeof Handle;
 };
 export {};
 //# sourceMappingURL=DragDrop.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DragDrop.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AA6Bd,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,OAAO;IAC3C,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAA;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB;4EACwE;IACxE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO;IACxC,QAAQ,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAA;IAClC,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAA;CAChC;AAqED,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,OAAO;IAC5C;2EACuE;IACvE,MAAM,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IACzC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,MAAM,CAAA;IAC7F,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,CAAC,GAAG,OAAO,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiP5E;AAMD,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,OAAO;IAC5C,EAAE,EAAE,MAAM,CAAA;IACV,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb;4BACwB;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,4DAA4D;IAC5D,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,OAAO,CAAA;IAChD,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,CAAC,GAAG,OAAO,EAAE,EACzB,EAAE,EACF,KAAK,EACL,WAA0B,EAC1B,OAAO,EACP,QAAQ,GACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA0BtB;AAMD,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,OAAO;IAC5C,EAAE,EAAE,MAAM,CAAA;IACV,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAA;IACZ,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,IAAI,CAAC,EAAE,CAAC,CAAA;IACR,0DAA0D;IAC1D,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,IAAI,CAAC,CAAC,GAAG,OAAO,EAAE,EACzB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAgB,EAChB,QAAQ,GACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA4CtB;AAED,8EAA8E;AAC9E,wBAAgB,WAAW,IAAI;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,CAAA;CACrC,CAGA;AAED,eAAO,MAAM,QAAQ;;;;CAAqB,CAAA"}
+{"version":3,"file":"DragDrop.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDrop.tsx"],"names":[],"mappings":"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"}

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

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

package/dist/components/DragDrop/DragDropBoard.stories.d.ts

@@ -0,0 +1,69 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DragDropEvent, DragDropOverEvent } from './DragDrop';
+/**
+ * The board shapes DragDrop 5.x is for: columns that are labelled lists,
+ * cards with a keyboard handle, a card zone nested in a column zone (attach),
+ * a refusal with a reason, edge auto-scroll, and a 300-card board for the
+ * render budget.
+ */
+interface Args {
+    onDrop?: (e: DragDropEvent<Card>) => void;
+    onDragOver?: (e: DragDropOverEvent<Card>) => void;
+}
+declare const meta: Meta<Args>;
+export default meta;
+type Story = StoryObj<Args>;
+interface Card {
+    readonly id: string;
+    readonly title: string;
+    readonly kind: 'task' | 'activity';
+}
+/** Three labelled list columns. Tab reaches one card per column; arrows walk
+ *  the cards; Space picks a card up, arrows move it, Space drops, Escape
+ *  cancels. Mouse drags show the same placeholder. */
+export declare const Kanban3: Story;
+/** Space, arrows, Space: the card moves; announcements are list-style and
+ *  focus comes back to the card. */
+export declare const KeyboardMove: Story;
+/** Escape puts the card back, focused, and nothing is dropped. */
+export declare const KeyboardCancel: Story;
+/** Arrow keys walk the handles without picking: Up/Down in a column,
+ *  Left/Right across columns. */
+export declare const KeyboardRoving: Story;
+/** `order` decides Left/Right, not the DOM: here Done comes before In
+ *  progress. */
+export declare const ExplicitZoneOrder: Story;
+/** A mouse drag shows the placeholder where the card would land, calls
+ *  onDragOver as the target changes, and drops there. */
+export declare const PointerReorder: Story;
+/** An inbox of activities beside two columns of tasks. Drop an activity on a
+ *  task card to attach it (the card's zone sits inside the column's); drop
+ *  it on a column and the column refuses, with its reason. */
+export declare const NestedZones: Story;
+/** The card's own zone wins over its column (innermost zone): an activity
+ *  dropped on a card attaches to it. */
+export declare const NestedAttach: Story;
+/** A task dragged over another task passes through the card's zone (it
+ *  only takes activities) to the column, which reorders. */
+export declare const NestedFallsThrough: Story;
+/** A column refuses an activity with a reason: the ghost shows it, it is
+ *  announced, and releasing there drops nothing. */
+export declare const RefusalWithReason: Story;
+/** A 30-card column that scrolls: hold a dragged card near its edge. */
+export declare const ScrollingColumn: Story;
+/** Holding a card near the bottom edge of a scrolling column scrolls it, and
+ *  the drop lands among the cards scrolled into view. */
+export declare const EdgeAutoScroll: Story;
+declare global {
+    interface Window {
+        __dragDropRenders?: number;
+    }
+}
+/**
+ * 300 cards. A pointer drag across a column re-renders at most a handful of
+ * zones and items per frame (the two around the moving placeholder); the
+ * ghost moves without rendering. The play function counts Profiler commits
+ * per frame and asserts fewer than 5.
+ */
+export declare const Perf300: Story;
+//# sourceMappingURL=DragDropBoard.stories.d.ts.map

package/dist/components/DragDrop/DragDropBoard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropBoard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDropBoard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAIpD,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAA;AASnB;;;;;GAKG;AACH,UAAU,IAAI;IACZ,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA;IACzC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA;CAClD;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,IAAI,CAIpB,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;AA4D3B,UAAU,IAAI;IACZ,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,CAAA;CACnC;AAkMD;;sDAEsD;AACtD,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAA;AAED;oCACoC;AACpC,eAAO,MAAM,YAAY,EAAE,KAqC1B,CAAA;AAED,kEAAkE;AAClE,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAA;AAED;iCACiC;AACjC,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAA;AAED;gBACgB;AAChB,eAAO,MAAM,iBAAiB,EAAE,KAW/B,CAAA;AAED;yDACyD;AACzD,eAAO,MAAM,cAAc,EAAE,KAmB5B,CAAA;AAgDD;;8DAE8D;AAC9D,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAA;AAED;wCACwC;AACxC,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAA;AAED;4DAC4D;AAC5D,eAAO,MAAM,kBAAkB,EAAE,KAYhC,CAAA;AAED;oDACoD;AACpD,eAAO,MAAM,iBAAiB,EAAE,KAmB/B,CAAA;AAqBD,wEAAwE;AACxE,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAA;AAED;yDACyD;AACzD,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAA;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,iBAAiB,CAAC,EAAE,MAAM,CAAA;KAC3B;CACF;AAyCD;;;;;GAKG;AACH,eAAO,MAAM,OAAO,EAAE,KAwCrB,CAAA"}

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

@@ -15,12 +15,59 @@ export declare const styles: Readonly<{
         readonly opacity: css.StyleXClassNameFor<"opacity", 0.4>;
         readonly cursor: css.StyleXClassNameFor<"cursor", "grabbing">;
     }>;
+    readonly handle: Readonly<{
+        readonly borderRadius: css.StyleXClassNameFor<"borderRadius", string>;
+        readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "none" | "solid">;
+        readonly outlineWidth: css.StyleXClassNameFor<"outlineWidth", string>;
+        readonly outlineColor: css.StyleXClassNameFor<"outlineColor", string>;
+        readonly outlineOffset: css.StyleXClassNameFor<"outlineOffset", string>;
+    }>;
+    readonly handlePicked: Readonly<{
+        readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "dashed">;
+    }>;
     readonly zone: Readonly<{
         readonly borderRadius: css.StyleXClassNameFor<"borderRadius", string>;
         readonly transitionProperty: css.StyleXClassNameFor<"transitionProperty", "box-shadow, background-color">;
         readonly transitionDuration: css.StyleXClassNameFor<"transitionDuration", string>;
         readonly transitionTimingFunction: css.StyleXClassNameFor<"transitionTimingFunction", string>;
     }>;
+    readonly listVertical: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: css.StyleXClassNameFor<"flexDirection", "column">;
+    }>;
+    readonly listHorizontal: Readonly<{
+        readonly display: css.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: css.StyleXClassNameFor<"flexDirection", "row">;
+    }>;
+    readonly gapXs: Readonly<{
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly gapSm: Readonly<{
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly gapMs: Readonly<{
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly gapMd: Readonly<{
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly gapLg: Readonly<{
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly gapXl: Readonly<{
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly gapXxl: Readonly<{
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly gapXxxl: Readonly<{
+        readonly gap: css.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly fill: Readonly<{
+        readonly boxSizing: css.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly width: css.StyleXClassNameFor<"width", "100%">;
+        readonly height: css.StyleXClassNameFor<"height", "100%">;
+    }>;
     readonly zoneReady: Readonly<{
         readonly boxShadow: css.StyleXClassNameFor<"boxShadow", string>;
         readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "solid">;
@@ -36,6 +83,16 @@ export declare const styles: Readonly<{
         readonly outlineColor: css.StyleXClassNameFor<"outlineColor", "transparent">;
         readonly outlineOffset: css.StyleXClassNameFor<"outlineOffset", `calc(-1 * ${css.StyleXVar<string>})`>;
     }>;
+    readonly zoneRefused: Readonly<{
+        readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
+        readonly outlineStyle: css.StyleXClassNameFor<"outlineStyle", "dashed">;
+        readonly outlineWidth: css.StyleXClassNameFor<"outlineWidth", string>;
+        readonly outlineColor: css.StyleXClassNameFor<"outlineColor", string>;
+        readonly outlineOffset: css.StyleXClassNameFor<"outlineOffset", `calc(-1 * ${css.StyleXVar<string>})`>;
+    }>;
+    readonly placeholder: Readonly<{
+        readonly flexShrink: css.StyleXClassNameFor<"flexShrink", 0>;
+    }>;
     readonly ghost: Readonly<{
         readonly position: css.StyleXClassNameFor<"position", "fixed">;
         readonly top: css.StyleXClassNameFor<"top", 0>;
@@ -45,10 +102,30 @@ export declare const styles: Readonly<{
         readonly opacity: css.StyleXClassNameFor<"opacity", 0.9>;
         readonly cursor: css.StyleXClassNameFor<"cursor", "grabbing">;
     }>;
-    readonly ghostAt: (x: number, y: number, width: number, height: number) => readonly [Readonly<{
+    readonly ghostTilt: Readonly<{
+        readonly transform: css.StyleXClassNameFor<"transform", "none" | "rotate(2deg)">;
+    }>;
+    readonly refusal: Readonly<{
+        readonly marginTop: css.StyleXClassNameFor<"marginTop", 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 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 color: css.StyleXClassNameFor<"color", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly boxShadow: css.StyleXClassNameFor<"boxShadow", string>;
+        readonly width: css.StyleXClassNameFor<"width", "max-content">;
+        readonly maxWidth: css.StyleXClassNameFor<"maxWidth", "100%">;
+    }>;
+    readonly ghostSize: (width: number, height: number) => readonly [Readonly<{
         width: css.StyleXClassNameFor<"width", number>;
-        height: css.StyleXClassNameFor<"height", number>;
-        transform: css.StyleXClassNameFor<"transform", string>;
+        minHeight: css.StyleXClassNameFor<"minHeight", number>;
     }>, css.InlineStyles];
 }>;
 //# sourceMappingURL=styles.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAQpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8DjB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AASpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmIjB,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"}

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

@@ -33,6 +33,9 @@ export declare const styles: Readonly<{
     readonly splitWide: Readonly<{
         readonly gridTemplateColumns: css.StyleXClassNameFor<"gridTemplateColumns", "1fr" | `minmax(${css.StyleXVar<string>}, 1fr) minmax(0, 3fr)`>;
     }>;
+    readonly contentAside: Readonly<{
+        readonly gridTemplateColumns: css.StyleXClassNameFor<"gridTemplateColumns", "minmax(0, 1fr)" | `minmax(0, 1fr) ${css.StyleXVar<string>}`>;
+    }>;
     readonly template: (tracks: string) => readonly [Readonly<{
         gridTemplateColumns: css.StyleXClassNameFor<"gridTemplateColumns", string>;
     }>, css.InlineStyles];

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

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

package/dist/components/Heading/Heading.d.ts

@@ -5,8 +5,10 @@ interface HeadingProps {
     variant?: HeadingVariant;
     color?: 'default' | 'muted' | 'accent';
     align?: 'start' | 'center' | 'end';
+    /** The heading's id: an in-page link's target (`href="#id"`), an `aria-labelledby` reference. */
+    id?: string;
     children: ReactNode;
 }
-export declare function Heading({ level, variant, color, align, children }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export declare function Heading({ level, variant, color, align, id, children }: HeadingProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Heading.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AAKpC,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAA;AAEf,UAAU,YAAY;IACpB,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAiBD,wBAAgB,OAAO,CAAC,EAAC,KAAK,EAAE,OAAO,EAAE,KAAiB,EAAE,KAAK,EAAE,QAAQ,EAAC,EAAE,YAAY,2CAUzF"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AAKpC,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAA;AAEf,UAAU,YAAY;IACpB,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,iGAAiG;IACjG,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,SAAS,CAAA;CACpB;AAiBD,wBAAgB,OAAO,CAAC,EAAC,KAAK,EAAE,OAAO,EAAE,KAAiB,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAC,EAAE,YAAY,2CAuC7F"}

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Levels: Story;
+/** `id` makes a heading the target of an in-page link (a table of contents)
+ *  or of `aria-labelledby`. */
+export declare const WithId: Story;
+//# sourceMappingURL=Heading.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/Heading.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAOpD,QAAA,MAAM,IAAI,EAAE,IAIX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAErB,eAAO,MAAM,MAAM,EAAE,KAepB,CAAA;AAED;+BAC+B;AAC/B,eAAO,MAAM,MAAM,EAAE,KAepB,CAAA"}

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

@@ -18,4 +18,11 @@ export declare const AllVariants: Story;
 export declare const ClientNavigation: StoryObj<{
     onNavigate: OnNavigate;
 }>;
+/**
+ * A touch screen gets 44px links, default and small alike (5.6, as Button);
+ * a mouse keeps the compact control.
+ * It drives Chrome's touch emulation through Vitest's CDP session, so it runs
+ * as a test and stays out of the dev sidebar (there is no Vitest there).
+ */
+export declare const TouchTargets: Story;
 //# sourceMappingURL=LinkButton.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAGpD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AAGvC,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAA;AAGrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAcjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAA;AAOD,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC;IAAC,UAAU,EAAE,UAAU,CAAA;CAAC,CA+B/D,CAAA"}
+{"version":3,"file":"LinkButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAGpD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AAGvC,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAA;AAKrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAcjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAA;AAOD,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC;IAAC,UAAU,EAAE,UAAU,CAAA;CAAC,CA+B/D,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KA8B1B,CAAA"}

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

@@ -15,12 +15,14 @@ export declare const styles: Readonly<{
         readonly transitionProperty: css.StyleXClassNameFor<"transitionProperty", "background-color, border-color, color">;
         readonly transitionDuration: css.StyleXClassNameFor<"transitionDuration", string>;
         readonly transitionTimingFunction: css.StyleXClassNameFor<"transitionTimingFunction", string>;
+        readonly minWidth: css.StyleXClassNameFor<"minWidth", string | null>;
     }>;
     readonly sizeDefault: 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 minHeight: css.StyleXClassNameFor<"minHeight", string | null>;
     }>;
     readonly sizeSmall: Readonly<{
         readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;

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

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

package/dist/components/LiveRegion/LiveRegion.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+export type LiveRegionPoliteness = 'polite' | 'assertive';
+interface LiveRegionProps {
+    /**
+     * What to announce. Change it to announce; leave it empty when there is
+     * nothing to say — never unmount the region to clear it.
+     */
+    children?: ReactNode;
+    /**
+     * `polite` (default) waits for the screen reader to finish (`role="status"`):
+     * "Copied", "3 results". `assertive` interrupts (`role="alert"`): only for
+     * what the person must hear now, such as an error that blocks them.
+     */
+    politeness?: LiveRegionPoliteness;
+    /** Keeps the region off screen and in the accessibility tree. Default false. */
+    visuallyHidden?: boolean;
+    id?: string;
+}
+/**
+ * LiveRegion — tells assistive tech about a change that has no focus move to
+ * go with it ("Link copied", "Answer ready"). A screen reader only announces
+ * a change to a region that was already in the page, so render it from the
+ * start (empty) and change its content; a region mounted together with its
+ * message is often not read at all.
+ */
+export declare function LiveRegion({ children, politeness, visuallyHidden, id, }: LiveRegionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LiveRegion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion.d.ts","sourceRoot":"","sources":["../../../src/components/LiveRegion/LiveRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AAIpC,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,CAAA;AAEzD,UAAU,eAAe;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,oBAAoB,CAAA;IACjC,gFAAgF;IAChF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,UAAqB,EACrB,cAAsB,EACtB,EAAE,GACH,EAAE,eAAe,2CAYjB"}

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

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

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

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