@duro-app/ui 5.0.0 → 5.2.0

package/dist/index.native.d.ts

@@ -28,5 +28,6 @@ export { Stack, type SpacingKey } from './components/Stack/Stack';
 export { Inline } from './components/Inline/Inline';
 export { Cluster } from './components/Cluster/Cluster';
 export { Grid } from './components/Grid/Grid';
+export type { GridTrack } from './shared/length';
 export { ThemeProvider, usePortalMount, type ThemeName, } from './components/ThemeProvider/ThemeProvider';
 //# sourceMappingURL=index.native.d.ts.map

package/dist/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../src/index.native.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAC,MAAM,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAC,MAAM,4BAA4B,CAAA;AACtF,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAC,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EAAC,QAAQ,EAAC,MAAM,gCAAgC,CAAA;AACvD,OAAO,EAAC,OAAO,EAAE,KAAK,cAAc,EAAC,MAAM,8BAA8B,CAAA;AACzE,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAC7E,OAAO,EAAC,QAAQ,EAAE,KAAK,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAG7E,OAAO,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAA;AAC9C,OAAO,EAAC,UAAU,EAAC,MAAM,oCAAoC,CAAA;AAG7D,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,8BAA8B,CAAA;AACpD,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAI3C,OAAO,EACL,aAAa,EACb,cAAc,EACd,KAAK,SAAS,GACf,MAAM,0CAA0C,CAAA"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../src/index.native.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAC,MAAM,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAC,MAAM,4BAA4B,CAAA;AACtF,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAC,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EAAC,QAAQ,EAAC,MAAM,gCAAgC,CAAA;AACvD,OAAO,EAAC,OAAO,EAAE,KAAK,cAAc,EAAC,MAAM,8BAA8B,CAAA;AACzE,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAC7E,OAAO,EAAC,QAAQ,EAAE,KAAK,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAG7E,OAAO,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAA;AAC9C,OAAO,EAAC,UAAU,EAAC,MAAM,oCAAoC,CAAA;AAG7D,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,8BAA8B,CAAA;AACpD,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAC3C,YAAY,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAA;AAI9C,OAAO,EACL,aAAa,EACb,cAAc,EACd,KAAK,SAAS,GACf,MAAM,0CAA0C,CAAA"}

package/dist/shared/length.d.ts

@@ -7,18 +7,23 @@ import { SizeToken } from '@duro-app/tokens/keys';
 export type RelativeLength = 0 | '0' | 'auto' | 'none' | 'min-content' | 'max-content' | 'fit-content' | `${number}%` | `${number}vh` | `${number}vw` | `${number}dvh` | `${number}svh` | `${number}lvh` | `${number}em` | `${number}rem` | `${number}ch`;
 /** A measure prop: a `sizes` token key (`"gridColMd"`) or a relative length. */
 export type Length = SizeToken | RelativeLength;
+/** A Length written as a string, as it appears inside a track function. */
+type LengthString = Exclude<Length, number>;
+/** One argument of `minmax()`: a Length or a fraction. */
+type TrackBreadth = LengthString | `${number}fr`;
 /**
- * A CSS grid track: a Length, a fraction, or a track function. The arguments
- * of `minmax()` / `fit-content()` are not checked by the type — pass tokens
- * through `resolveLength` or `sizes.*` when building one.
- *
- * holds-until: a structured track type (`{min: Length, max: GridTrack}`)
- * replaces the template-literal functions; a type cannot see inside
- * `minmax(${string})`, so a px there is the one measure lint and types miss.
+ * A CSS grid track: a Length, a fraction, or a track function whose
+ * arguments are themselves Lengths or fractions — `'minmax(gridColSm, 1fr)'`,
+ * `'minmax(0, 2fr)'`, `'fit-content(labelMinW)'`. A px inside is a type
+ * error, as it is anywhere else. Arguments are separated by `, `.
  */
-export type GridTrack = Length | `${number}fr` | `minmax(${string})` | `fit-content(${string})`;
+export type GridTrack = Length | `${number}fr` | `minmax(${TrackBreadth}, ${TrackBreadth})` | `fit-content(${LengthString})`;
 /** The CSS value for a Length: a size token key becomes its variable. */
 export declare function resolveLength(value: Length): string | number;
-/** The CSS value for a GridTrack: a size token key becomes its variable. */
+/**
+ * The CSS value for a GridTrack: a size token key becomes its variable, also
+ * as an argument of `minmax()` / `fit-content()`.
+ */
 export declare function resolveTrack(track: GridTrack): string | number;
+export {};
 //# sourceMappingURL=length.d.ts.map

package/dist/shared/length.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"length.d.ts","sourceRoot":"","sources":["../../src/shared/length.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,SAAS,EAAC,MAAM,uBAAuB,CAAA;AAE/D;;;;GAIG;AACH,MAAM,MAAM,cAAc,GACtB,CAAC,GACD,GAAG,GACH,MAAM,GACN,MAAM,GACN,aAAa,GACb,aAAa,GACb,aAAa,GACb,GAAG,MAAM,GAAG,GACZ,GAAG,MAAM,IAAI,GACb,GAAG,MAAM,IAAI,GACb,GAAG,MAAM,KAAK,GACd,GAAG,MAAM,KAAK,GACd,GAAG,MAAM,KAAK,GACd,GAAG,MAAM,IAAI,GACb,GAAG,MAAM,KAAK,GACd,GAAG,MAAM,IAAI,CAAA;AAEjB,gFAAgF;AAChF,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,cAAc,CAAA;AAE/C;;;;;;;;GAQG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,GAAG,MAAM,IAAI,GAAG,UAAU,MAAM,GAAG,GAAG,eAAe,MAAM,GAAG,CAAA;AAI/F,yEAAyE;AACzE,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAE5D;AAED,4EAA4E;AAC5E,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAE9D"}
+{"version":3,"file":"length.d.ts","sourceRoot":"","sources":["../../src/shared/length.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,SAAS,EAAC,MAAM,uBAAuB,CAAA;AAE/D;;;;GAIG;AACH,MAAM,MAAM,cAAc,GACtB,CAAC,GACD,GAAG,GACH,MAAM,GACN,MAAM,GACN,aAAa,GACb,aAAa,GACb,aAAa,GACb,GAAG,MAAM,GAAG,GACZ,GAAG,MAAM,IAAI,GACb,GAAG,MAAM,IAAI,GACb,GAAG,MAAM,KAAK,GACd,GAAG,MAAM,KAAK,GACd,GAAG,MAAM,KAAK,GACd,GAAG,MAAM,IAAI,GACb,GAAG,MAAM,KAAK,GACd,GAAG,MAAM,IAAI,CAAA;AAEjB,gFAAgF;AAChF,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,cAAc,CAAA;AAE/C,2EAA2E;AAC3E,KAAK,YAAY,GAAG,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE3C,0DAA0D;AAC1D,KAAK,YAAY,GAAG,YAAY,GAAG,GAAG,MAAM,IAAI,CAAA;AAEhD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,GAAG,MAAM,IAAI,GACb,UAAU,YAAY,KAAK,YAAY,GAAG,GAC1C,eAAe,YAAY,GAAG,CAAA;AAIlC,yEAAyE;AACzE,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAE5D;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAW9D"}

package/dist/shared/length.typecheck.d.ts

@@ -15,6 +15,9 @@ export declare const trackForms: Assignable<'iconButton' | '2fr' | 'max-content'
 export declare const lengthPxString: Assignable<'280px', Length>;
 export declare const lengthPxNumber: Assignable<44, Length>;
 export declare const trackPx: Assignable<'40px', GridTrack>;
+export declare const trackMinmaxPx: Assignable<'minmax(40px, 1fr)', GridTrack>;
+export declare const trackFitPx: Assignable<'fit-content(120px)', GridTrack>;
+export declare const trackMinmaxTokens: Assignable<'minmax(gridColSm, 1fr)' | 'minmax(0, 2fr)' | 'minmax(labelMinW, auto)' | 'fit-content(labelMinW)', GridTrack>;
 export declare const gridMin: Assignable<'280px', Prop<typeof Grid, 'minColumnWidth'>>;
 export declare const gridMinToken: Assignable<'gridColMd', Prop<typeof Grid, 'minColumnWidth'>>;
 export declare const addonMin: Assignable<80, Prop<typeof InputGroup.Addon, 'minWidth'>>;

package/dist/shared/length.typecheck.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"length.typecheck.d.ts","sourceRoot":"","sources":["../../src/shared/length.typecheck.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,yBAAyB,CAAA;AACjD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,qCAAqC,CAAA;AACnE,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,qCAAqC,CAAA;AACnE,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,2BAA2B,CAAA;AACpD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,yCAAyC,CAAA;AACzE,OAAO,KAAK,EAAC,SAAS,EAAE,MAAM,EAAC,MAAM,UAAU,CAAA;AAE/C,wDAAwD;AACxD,KAAK,UAAU,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,KAAK,CAAA;AAEtD,4CAA4C;AAC5C,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,OAAO,GAAG,CAAC,GAAG,KAAK,CAAA;AACnE,KAAK,IAAI,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,OAAO,CAAC,CAAC,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAGrE,eAAO,MAAM,YAAY,EAAE,UAAU,CAAC,WAAW,GAAG,aAAa,EAAE,MAAM,CAAQ,CAAA;AACjF,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,CAAC,GAAG,GAAG,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,MAAM,CAAQ,CAAA;AACnG,eAAO,MAAM,UAAU,EAAE,UAAU,CACjC,YAAY,GAAG,KAAK,GAAG,aAAa,GAAG,gBAAgB,EACvD,SAAS,CACH,CAAA;AAGR,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,OAAO,EAAE,MAAM,CAAS,CAAA;AAChE,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,EAAE,EAAE,MAAM,CAAS,CAAA;AAC3D,eAAO,MAAM,OAAO,EAAE,UAAU,CAAC,MAAM,EAAE,SAAS,CAAS,CAAA;AAG3D,eAAO,MAAM,OAAO,EAAE,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,EAAE,gBAAgB,CAAC,CAAS,CAAA;AACtF,eAAO,MAAM,YAAY,EAAE,UAAU,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,IAAI,EAAE,gBAAgB,CAAC,CAAQ,CAAA;AAC9F,eAAO,MAAM,QAAQ,EAAE,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,CAAS,CAAA;AACxF,eAAO,MAAM,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,UAAU,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAS,CAAA;AAChG,eAAO,MAAM,gBAAgB,EAAE,UAAU,CACvC,UAAU,EACV,IAAI,CAAC,OAAO,UAAU,CAAC,QAAQ,EAAE,WAAW,CAAC,CACvC,CAAA;AACR,eAAO,MAAM,QAAQ,EAAE,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAS,CAAA;AACzF,eAAO,MAAM,WAAW,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,CAAC,UAAU,EAAE,OAAO,CAAC,CAAS,CAAA;AAC5F,eAAO,MAAM,gBAAgB,EAAE,UAAU,CACvC,YAAY,EACZ,IAAI,CAAC,OAAO,KAAK,CAAC,UAAU,EAAE,OAAO,CAAC,CAChC,CAAA;AACR,eAAO,MAAM,UAAU,EAAE,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,YAAY,EAAE,WAAW,CAAC,CAAS,CAAA"}
+{"version":3,"file":"length.typecheck.d.ts","sourceRoot":"","sources":["../../src/shared/length.typecheck.tsx"],"names":[],"mappings":"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"}

package/dist/styles/visually-hidden.css.d.ts

@@ -6,5 +6,11 @@ export declare const visuallyHidden: Readonly<{
         readonly height: css.StyleXClassNameFor<"height", 1>;
         readonly overflow: css.StyleXClassNameFor<"overflow", "hidden">;
     }>;
+    readonly text: Readonly<{
+        readonly clip: css.StyleXClassNameFor<"clip", "rect(0, 0, 0, 0)">;
+        readonly whiteSpace: css.StyleXClassNameFor<"whiteSpace", "nowrap">;
+        readonly borderWidth: css.StyleXClassNameFor<"borderWidth", 0>;
+        readonly padding: css.StyleXClassNameFor<"padding", 0>;
+    }>;
 }>;
 //# sourceMappingURL=visually-hidden.css.d.ts.map

package/dist/styles/visually-hidden.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visually-hidden.css.d.ts","sourceRoot":"","sources":["../../src/styles/visually-hidden.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAQpC,eAAO,MAAM,cAAc;;;;;;;EAOzB,CAAA"}
+{"version":3,"file":"visually-hidden.css.d.ts","sourceRoot":"","sources":["../../src/styles/visually-hidden.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAQpC,eAAO,MAAM,cAAc;;;;;;;;;;;;;EAezB,CAAA"}

package/dist/table.js

@@ -1,4 +1,4 @@
-import { M as F, a as xt, R as rt, H as kt, c as pt, B as bt, d as ft, C as mt, b as ht, e as yt, r as St, f as Tt } from "./Table-BKN_d-mp.js";
+import { M as F, g as xt, R as rt, H as kt, h as pt, B as bt, j as ft, C as mt, e as ht, k as yt, r as St, l as Tt } from "./Table-C70zdSkM.js";
 import { jsx as u, jsxs as q } from "react/jsx-runtime";
 import { c as H, m as p, d as b } from "./compiler-runtime-B2IcI8_O.js";
 import { flexRender as E, useReactTable as it, getPaginationRowModel as Ct, getFilteredRowModel as vt, getSortedRowModel as at, getCoreRowModel as st } from "@tanstack/react-table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^5.0.0"
+    "@duro-app/tokens": "^5.2.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Button/Button.stories.tsx

@@ -1,5 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
+import {useRef, useState} from 'react'
 import {css, html} from 'react-strict-dom'
 import {Button} from './Button'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
@@ -129,3 +130,43 @@ export const AllVariants: Story = {
     await expect(disabledButtons.length).toBe(3)
   },
 }
+
+// A disclosure: aria-expanded / aria-controls pass through, and the ref
+// reaches the <button> (to return focus to it).
+function DisclosureDemo() {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLButtonElement>(null)
+  return (
+    <html.div>
+      <Button
+        ref={ref}
+        variant="secondary"
+        aria-expanded={open}
+        aria-controls="filters-panel"
+        onClick={() => setOpen(!open)}
+      >
+        Filters
+      </Button>
+      {open && (
+        <html.div id="filters-panel" role="region" aria-label="Filters panel">
+          <Button variant="link" onClick={() => ref.current?.focus()}>
+            Back to Filters
+          </Button>
+        </html.div>
+      )}
+    </html.div>
+  )
+}
+
+export const RefAndDisclosure: Story = {
+  render: () => <DisclosureDemo />,
+  play: async ({canvas, userEvent}) => {
+    const toggle = canvas.getByRole('button', {name: 'Filters'})
+    await expect(toggle).toHaveAttribute('aria-expanded', 'false')
+    await userEvent.click(toggle)
+    await expect(toggle).toHaveAttribute('aria-expanded', 'true')
+    await expect(toggle).toHaveAttribute('aria-controls', 'filters-panel')
+    await userEvent.click(canvas.getByRole('button', {name: 'Back to Filters'}))
+    await expect(toggle).toHaveFocus()
+  },
+}

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import type {ReactNode} from 'react'
+import type {ReactNode, Ref} from 'react'
 import {html} from 'react-strict-dom'
 import {isNative} from '../../platform'
 import {styles} from './styles.css'
@@ -15,6 +15,15 @@ interface ButtonProps {
   onClick?: () => void
   /** Accessible name override — e.g. for buttons whose visible text isn't unique. */
   'aria-label'?: string
+  /** For a button that shows or hides another element (a disclosure, a panel). */
+  'aria-expanded'?: boolean
+  /** Id of the element this button controls. */
+  'aria-controls'?: string
+  /**
+   * The underlying <button>, e.g. to anchor a Popover or return focus to it.
+   * Web only: on native the ref is not attached.
+   */
+  ref?: Ref<HTMLButtonElement>
   children: ReactNode
 }
 
@@ -31,14 +40,20 @@ export function Button({
   type = 'button',
   onClick,
   'aria-label': ariaLabel,
+  'aria-expanded': ariaExpanded,
+  'aria-controls': ariaControls,
+  ref,
   children,
 }: ButtonProps) {
   return (
     <html.button
+      ref={isNative ? undefined : ref}
       type={type}
       disabled={disabled}
       onClick={onClick}
       aria-label={ariaLabel}
+      aria-expanded={ariaExpanded}
+      aria-controls={ariaControls}
       style={[
         styles.base,
         isNative && styles.nativeFlex,

package/src/components/Card/Card.stories.tsx

@@ -5,6 +5,7 @@ import {Card} from './Card'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta<typeof Card> = {
   title: 'Components/Card',
@@ -86,7 +87,7 @@ export const Full: Story = {
 const gridStyles = css.create({
   grid: {
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes.gridColSm}, 1fr))`,
     gap: spacing.md,
   },
   stack: {display: 'flex', flexDirection: 'column', gap: spacing.md},

package/src/components/Combobox/Combobox.tsx

@@ -1,11 +1,9 @@
-import {type ReactNode, useRef, useId, useEffect, useLayoutEffect, useState} from 'react'
-import {createPortal} from 'react-dom'
+import {type ReactNode, useCallback, useRef, useId, useEffect, useState} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {ComboboxContext, useCombobox} from './ComboboxContext'
 import {useComboboxRoot} from './useComboboxRoot'
-import {usePortalMount} from '../ThemeProvider/ThemeProvider'
-import {usePopoverLayer} from '../Popover/PopoverLayerContext'
+import {Listbox, getAnchorProps} from '../Listbox/Listbox'
 
 // --- Root ---
 interface RootProps {
@@ -54,6 +52,7 @@ function Input({placeholder, children}: {placeholder?: string; children?: ReactN
     useCombobox()
   const localRef = useRef<HTMLInputElement>(null)
   const [focused, setFocused] = useState(false)
+  const anchor = getAnchorProps({id: listboxId, open, highlightedId})
 
   useEffect(() => {
     inputRef.current = localRef.current
@@ -67,10 +66,10 @@ function Input({placeholder, children}: {placeholder?: string; children?: ReactN
         role={'combobox' as 'listbox'}
         value={inputValue}
         placeholder={placeholder}
-        aria-expanded={open}
+        aria-expanded={anchor['aria-expanded']}
         aria-haspopup="listbox"
-        aria-controls={open ? listboxId : undefined}
-        aria-activedescendant={highlightedId ?? undefined}
+        aria-controls={anchor['aria-controls']}
+        aria-activedescendant={anchor['aria-activedescendant']}
         aria-autocomplete={'list' as 'none'}
         autoComplete="off"
         style={styles.input}
@@ -132,58 +131,27 @@ function Trigger({children}: {children?: ReactNode}) {
 }
 
 // --- Popup ---
-// Rendered into the ThemeProvider portal mount and positioned with viewport
-// coordinates so it escapes ancestor `overflow: hidden` / `transform`
-// containing blocks (notably Dialog and Drawer).
+// A Listbox placed under the input, as wide as the field: rendered into the
+// ThemeProvider portal mount so it escapes ancestor `overflow: hidden` /
+// `transform` containing blocks (notably Dialog and Drawer).
 function Popup({children}: {children: ReactNode}) {
-  const {open, listboxId, rootRef} = useCombobox()
-  const mount = usePortalMount()
-  const listboxRef = useRef<HTMLDivElement>(null)
-  const [coords, setCoords] = useState<{top: number; left: number; width: number} | null>(null)
+  const {open, listboxId, rootRef, highlightedId, setHighlightedId, setValue} = useCombobox()
+  const anchor = useCallback(() => rootRef.current?.getBoundingClientRect(), [rootRef])
 
-  // Measure the root each time the popup opens, and re-measure on scroll/resize
-  // so the dropdown follows the input. Capture-phase scroll listener catches
-  // scroll on any ancestor (e.g. Dialog body).
-  useLayoutEffect(() => {
-    if (!open) {
-      setCoords(null)
-      return
-    }
-    const update = () => {
-      const el = rootRef.current
-      if (!el) return
-      const rect = el.getBoundingClientRect()
-      // Position immediately below the input with a small gap. `xs` token = 4px.
-      setCoords({top: rect.bottom + 4, left: rect.left, width: rect.width})
-    }
-    update()
-    window.addEventListener('resize', update)
-    window.addEventListener('scroll', update, true)
-    return () => {
-      window.removeEventListener('resize', update)
-      window.removeEventListener('scroll', update, true)
-    }
-  }, [open, rootRef])
-
-  usePopoverLayer(listboxRef, {active: open && coords !== null})
-
-  if (!open || !coords) return null
-
-  const node = (
-    <html.div
-      ref={listboxRef}
+  return (
+    <Listbox.Root
       id={listboxId}
-      role="listbox"
-      style={[styles.popup, styles.popupPosition(coords.top, coords.left, coords.width)]}
+      open={open}
+      anchor={anchor}
+      matchAnchorWidth
+      highlightedId={highlightedId}
+      onHighlight={setHighlightedId}
+      onSelect={setValue}
+      maxHeight="listMaxHSm"
     >
       {children}
-    </html.div>
+    </Listbox.Root>
   )
-
-  // SSR / pre-mount fallback: render inline (will be invisible under
-  // overflow:hidden parents but won't crash). Once the mount is available,
-  // portal into it.
-  return mount ? createPortal(node, mount) : node
 }
 
 // --- Item ---
@@ -193,20 +161,10 @@ interface ItemProps {
 }
 
 function Item({value: itemValue, children}: ItemProps) {
-  const {
-    value: selectedValue,
-    setValue,
-    inputValue,
-    labels,
-    registerLabel,
-    highlightedId,
-    setHighlightedId,
-    registerItem,
-  } = useCombobox()
+  const {value: selectedValue, inputValue, labels, registerLabel, registerItem} = useCombobox()
   const id = useId()
   const ref = useRef<HTMLDivElement>(null)
   const isSelected = selectedValue === itemValue
-  const isHighlighted = highlightedId === id
 
   // Filter: check if this item matches the input
   const label = labels[itemValue] ?? itemValue
@@ -229,21 +187,9 @@ function Item({value: itemValue, children}: ItemProps) {
   if (!isVisible) return null
 
   return (
-    <html.div
-      ref={ref}
-      id={id}
-      role="option"
-      aria-selected={isSelected}
-      onClick={() => setValue(itemValue)}
-      onPointerEnter={() => setHighlightedId(id)}
-      style={[
-        styles.item,
-        isSelected && styles.itemSelected,
-        isHighlighted && styles.itemHighlighted,
-      ]}
-    >
+    <Listbox.Option ref={ref} id={id} value={itemValue} selected={isSelected}>
       {children}
-    </html.div>
+    </Listbox.Option>
   )
 }
 
@@ -266,7 +212,7 @@ function Empty({children}: {children: ReactNode}) {
 
   if (hasVisibleItems) return null
 
-  return <html.div style={styles.empty}>{children}</html.div>
+  return <Listbox.Empty>{children}</Listbox.Empty>
 }
 
 export const Combobox = {

package/src/components/Combobox/styles.css.ts

@@ -2,9 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
-import {shadows} from '@duro-app/tokens/tokens/shadows.css'
 import {duration} from '@duro-app/tokens/tokens/motion.css'
-import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
@@ -57,76 +55,4 @@ export const styles = css.create({
     color: colors.textMuted,
     cursor: 'pointer',
   },
-  backdrop: {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    // Above Dialog/Drawer (1000/1001): they portal into the same mount, so a
-    // popup opened from inside a dialog must out-rank the dialog itself.
-    zIndex: 1049,
-  },
-  popup: {
-    // Position is `fixed` and the top/left/width are applied inline by Popup
-    // (computed from the root's bounding rect) so the dropdown can escape any
-    // ancestor with `overflow: hidden` or `transform` (e.g. inside a Dialog).
-    position: 'fixed',
-    backgroundColor: colors.bgCard,
-    borderWidth: borders.hairline,
-    borderStyle: 'solid',
-    borderColor: colors.border,
-    borderRadius: radii.sm,
-    boxShadow: shadows.md,
-    paddingTop: spacing.xs,
-    paddingBottom: spacing.xs,
-    maxHeight: sizes.listMaxHSm,
-    overflowY: 'auto',
-    zIndex: 1050,
-    // Re-enable pointer events: the portal mount is pointer-events: none so
-    // clicks fall through except on the popup itself.
-    pointerEvents: 'auto',
-  },
-  item: {
-    display: 'flex',
-    alignItems: 'center',
-    paddingTop: spacing.sm,
-    paddingBottom: spacing.sm,
-    paddingLeft: spacing.md,
-    paddingRight: spacing.md,
-    fontSize: typography.fontSizeSm,
-    fontFamily: typography.fontFamily,
-    color: colors.text,
-    cursor: 'pointer',
-    backgroundColor: 'transparent',
-    transitionProperty: 'background-color',
-    transitionDuration: duration.fast,
-  },
-  itemSelected: {
-    color: colors.accent,
-    fontWeight: typography.fontWeightMedium,
-  },
-  itemHighlighted: {
-    backgroundColor: colors.bgCardHover,
-  },
-  itemHidden: {
-    display: 'none',
-  },
-  empty: {
-    paddingTop: spacing.sm,
-    paddingBottom: spacing.sm,
-    paddingLeft: spacing.md,
-    paddingRight: spacing.md,
-    fontSize: typography.fontSizeSm,
-    color: colors.textMuted,
-  },
-  hidden: {
-    display: 'none',
-  },
-  // Dynamic position — applied at runtime from the input's bounding rect.
-  popupPosition: (top: number, left: number, width: number) => ({
-    top,
-    left,
-    width,
-  }),
 })

package/src/components/Dialog/Dialog.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Modal dialog with backdrop overlay. Centered on screen with scale+fade animation. Traps focus, dismisses on backdrop click or Escape. Use for confirmations, forms, or content that requires user attention before continuing.',
+    'Modal dialog with backdrop overlay. Centered on screen with scale+fade animation. Moves focus in on open (initialFocus, else the first focusable element, else the dialog) and back on close; dismisses on backdrop click (dismissable) or Escape (closeOnEscape, independent of dismissable). Use for confirmations, forms, or content that requires user attention before continuing.',
   whenToUse: [
     'Confirmation prompts (delete, revoke, destructive actions)',
     'Short forms or data entry that blocks the main flow',

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,7 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect, within, userEvent} from 'storybook/test'
+import {expect, screen, waitFor, within, userEvent} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
-import {useState} from 'react'
+import {useRef, useState} from 'react'
 import {Dialog} from './Dialog'
 import {Button} from '../Button/Button'
 import {Text} from '../Text/Text'
@@ -260,7 +260,7 @@ export const DangerConfirmation: Story = {
 
 export const NonDismissable: Story = {
   render: () => (
-    <Dialog.Root dismissable={false}>
+    <Dialog.Root dismissable={false} closeOnEscape={false}>
       <Dialog.Trigger>
         <Button>Open non-dismissable</Button>
       </Dialog.Trigger>
@@ -454,3 +454,109 @@ export const BackdropClickDismisses: Story = {
     await expect(await canvas.findByText('Last action: Dismissed')).toBeInTheDocument()
   },
 }
+
+// --- Focus and Escape (5.2) ---
+
+// dismissable only governs the backdrop: Escape still closes.
+export const EscapeClosesNonDismissable: Story = {
+  render: () => (
+    <Dialog.Root dismissable={false}>
+      <Dialog.Trigger>
+        <Button>Open terms</Button>
+      </Dialog.Trigger>
+      <Dialog.Portal size="sm">
+        <Dialog.Header>
+          <Dialog.Title>Terms</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Text>Read before continuing.</Text>
+        </Dialog.Body>
+      </Dialog.Portal>
+    </Dialog.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const opener = canvas.getByRole('button', {name: 'Open terms'})
+    await userEvent.click(opener)
+    const dialog = await screen.findByRole('dialog', {name: 'Terms'})
+    // Nothing focusable inside: the dialog itself takes focus.
+    await waitFor(() => expect(dialog).toHaveFocus())
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+    await waitFor(() => expect(opener).toHaveFocus())
+  },
+}
+
+function InitialFocusDemo() {
+  const nameRef = useRef<HTMLInputElement>(null)
+  return (
+    <Dialog.Root initialFocus={nameRef}>
+      <Dialog.Trigger>
+        <Button>Rename</Button>
+      </Dialog.Trigger>
+      <Dialog.Portal size="sm">
+        <Dialog.Header>
+          <Dialog.Title>Rename file</Dialog.Title>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Body>
+          <Field.Root>
+            <Field.Label>Name</Field.Label>
+            <Input ref={nameRef} defaultValue="notes.md" />
+          </Field.Root>
+        </Dialog.Body>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+export const InitialFocus: Story = {
+  render: () => <InitialFocusDemo />,
+  play: async ({canvas, userEvent}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Rename'}))
+    const input = await screen.findByRole('textbox', {name: 'Name'})
+    await waitFor(() => expect(input).toHaveFocus())
+  },
+}
+
+export const FirstFocusableByDefault: Story = {
+  render: () => (
+    <Dialog.Root>
+      <Dialog.Trigger>
+        <Button>Open</Button>
+      </Dialog.Trigger>
+      <Dialog.Portal size="sm">
+        <Dialog.Header>
+          <Dialog.Title>Share</Dialog.Title>
+          <Dialog.Close aria-label="Close share" />
+        </Dialog.Header>
+      </Dialog.Portal>
+    </Dialog.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Open'}))
+    const close = await screen.findByRole('button', {name: 'Close share'})
+    await waitFor(() => expect(close).toHaveFocus())
+  },
+}
+
+export const CloseOnEscapeOff: Story = {
+  render: () => (
+    <Dialog.Root defaultOpen closeOnEscape={false}>
+      <Dialog.Portal size="sm">
+        <Dialog.Header>
+          <Dialog.Title>Required step</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.Footer>
+          <Dialog.Close>
+            <Button>Done</Button>
+          </Dialog.Close>
+        </Dialog.Footer>
+      </Dialog.Portal>
+    </Dialog.Root>
+  ),
+  play: async ({userEvent}) => {
+    await screen.findByRole('dialog', {name: 'Required step'})
+    await userEvent.keyboard('{Escape}')
+    await expect(screen.getByRole('dialog', {name: 'Required step'})).toBeInTheDocument()
+  },
+}