@duro-app/ui 0.35.2 → 0.35.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.35.2",
+  "version": "0.35.4",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.35.2"
+    "@duro-app/tokens": "^0.35.4"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/ColorInput/ColorInput.meta.ts

@@ -0,0 +1,22 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'A styled native color swatch (<input type="color">) for picking a hex color. Field-context aware like Input.',
+  whenToUse: [
+    'Picking an accent/brand/category color in a form (e.g. a zone or tag color)',
+    'Inside a Field.Root, where it adopts the label, invalid state, and disabled',
+  ],
+  whenNotToUse: [
+    'Free-text hex entry with validation — use Input with a pattern instead',
+    'A full palette/gradient picker — out of scope; this is the native swatch',
+  ],
+  relatedTo: [
+    {component: 'Input', relationship: 'Sibling form control; same Field-context contract'},
+    {component: 'Field', relationship: 'Wrap in Field.Root for label + error wiring'},
+  ],
+  example: `<Field.Root>
+  <Field.Label>Accent</Field.Label>
+  <ColorInput value={accent} onChange={(e) => setAccent(e.target.value)} />
+</Field.Root>`,
+}

package/src/components/ColorInput/ColorInput.tsx

@@ -0,0 +1,73 @@
+import {html} from 'react-strict-dom'
+import {useFieldContext} from '../Field/FieldContext'
+import {styles} from './styles.css'
+
+interface ColorInputProps {
+  /** Hex color, controlled (e.g. "#cfc8ba"). */
+  value?: string
+  defaultValue?: string
+  name?: string
+  /** Explicit id — overrides the Field-context controlId when set. */
+  id?: string
+  disabled?: boolean
+  required?: boolean
+  /** Accessible name when there is no associated <Field.Label>. */
+  'aria-label'?: string
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onBlur?: () => void
+  ref?: React.Ref<HTMLInputElement>
+}
+
+/**
+ * A styled native `<input type="color">` swatch. Mirrors <Input>'s native
+ * surface (value/defaultValue/name/onChange/ref/disabled/required) and adopts
+ * the parent <Field.Root> context (controlId for label association, value/
+ * onChange when bound to a Form, invalid border, disabled) — so it drops into a
+ * <Field> exactly like <Input>. The text <Input> can't render type=color, hence
+ * a dedicated leaf.
+ */
+export function ColorInput({
+  value,
+  defaultValue,
+  name,
+  id,
+  disabled,
+  required,
+  'aria-label': ariaLabel,
+  onChange,
+  onBlur,
+  ref,
+}: ColorInputProps) {
+  const ctx = useFieldContext()
+  const fieldCtx = ctx?.field
+
+  const effectiveName = name ?? fieldCtx?.name
+  const effectiveValue = value ?? (fieldCtx ? String(fieldCtx.value ?? '') : undefined)
+  const effectiveOnChange = onChange ?? fieldCtx?.onChange
+  const effectiveOnBlur = onBlur ?? fieldCtx?.onBlur
+  const effectiveRef = ref ?? fieldCtx?.ref
+  const effectiveDisabled = disabled ?? ctx?.disabled
+
+  return (
+    <html.input
+      type="color"
+      id={id ?? ctx?.controlId}
+      name={effectiveName}
+      value={effectiveValue}
+      defaultValue={defaultValue}
+      disabled={effectiveDisabled}
+      required={required}
+      aria-label={ariaLabel}
+      aria-invalid={ctx?.invalid || undefined}
+      aria-describedby={
+        ctx
+          ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim() || undefined
+          : undefined
+      }
+      onChange={effectiveOnChange as React.ComponentProps<typeof html.input>['onChange']}
+      onBlur={effectiveOnBlur as React.ComponentProps<typeof html.input>['onBlur']}
+      ref={effectiveRef as React.Ref<HTMLInputElement>}
+      style={[styles.base, ctx?.invalid && styles.invalid, effectiveDisabled && styles.disabled]}
+    />
+  )
+}

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

@@ -0,0 +1,40 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {radii} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  base: {
+    width: 44,
+    height: 34,
+    padding: 2,
+    backgroundColor: colors.bg,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: {
+      default: colors.border,
+      ':hover': colors.textMuted,
+    },
+    borderRadius: radii.sm,
+    cursor: 'pointer',
+    outlineWidth: {
+      default: 0,
+      ':focus-visible': 2,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-visible': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-visible': colors.accent,
+    },
+    outlineOffset: 1,
+  },
+  invalid: {
+    borderColor: colors.error,
+  },
+  disabled: {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  },
+})

package/src/components/ConfirmDialog/ConfirmDialog.meta.ts

@@ -0,0 +1,37 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Destructive-confirmation dialog with an optional type-a-phrase gate. DS owns layout + gating; the app owns the submit (confirmSlot) so it composes with form libraries.',
+  whenToUse: [
+    'Confirming an irreversible action (delete org, delete account, drop a record with cascades)',
+    'High-impact actions that should require typing a phrase (the slug/name) before enabling confirm',
+  ],
+  whenNotToUse: [
+    'Routine confirmations — use a Dialog with a plain confirm button',
+    'Non-destructive flows — a Dialog or inline action is enough',
+  ],
+  anatomy: {
+    required: ['title', 'children (warning body)'],
+    optional: ['confirmPhrase', 'promptLabel', 'confirmSlot', 'onConfirm', 'confirmLabel'],
+  },
+  relatedTo: [
+    {component: 'Dialog', relationship: 'Built on Dialog; this adds the phrase gate + footer'},
+    {component: 'Button', relationship: 'The confirm/cancel actions'},
+  ],
+  example: `<ConfirmDialog
+  open={open}
+  onOpenChange={setOpen}
+  title="Delete organization?"
+  confirmPhrase={org.name}
+  promptLabel={<>Type <b>{org.name}</b> to confirm</>}
+  confirmSlot={({satisfied}) => (
+    <fetcher.Form method="post">
+      <input type="hidden" name="intent" value="delete-org" />
+      <Button type="submit" variant="danger" disabled={!satisfied}>Delete</Button>
+    </fetcher.Form>
+  )}
+>
+  This deletes the org and all its landscapes. This cannot be undone.
+</ConfirmDialog>`,
+}

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -0,0 +1,99 @@
+import {type ReactNode, useState} from 'react'
+import {Dialog} from '../Dialog/Dialog'
+import {Button} from '../Button/Button'
+import {Input} from '../Input/Input'
+import {Field} from '../Field/Field'
+
+type DialogSize = 'sm' | 'md' | 'lg'
+
+interface ConfirmDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: ReactNode
+  /** Warning / cascade body. */
+  children?: ReactNode
+  /** When set, the confirm action stays DISABLED until the user types this
+   *  exact phrase (org name, slug…). The typed value is a client-side gate
+   *  only — it is never submitted. */
+  confirmPhrase?: string
+  /** Prompt shown above the phrase input. */
+  promptLabel?: ReactNode
+  cancelLabel?: ReactNode
+  /**
+   * App-owned confirm control. Receives whether the phrase gate is satisfied,
+   * so the app can render its OWN <Button type="submit"> INSIDE its form
+   * (e.g. a react-router fetcher.Form with hidden intent fields) — the DS does
+   * NOT own the submit, avoiding a fight with the app's form flow. Takes
+   * precedence over onConfirm/confirmLabel.
+   */
+  confirmSlot?: (gate: {satisfied: boolean}) => ReactNode
+  /** Simple case (no app form): the DS renders a danger Button calling this. */
+  onConfirm?: () => void
+  confirmLabel?: ReactNode
+  size?: DialogSize
+}
+
+/**
+ * Generic destructive-confirmation dialog: layout + an optional type-a-phrase
+ * gate. The DS owns the shell and the gate; the APP owns the actual submit
+ * (via `confirmSlot`) so it composes with form libraries instead of forcing a
+ * callback. Domain warning text goes in `children`.
+ */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  children,
+  confirmPhrase,
+  promptLabel,
+  cancelLabel = 'Cancel',
+  confirmSlot,
+  onConfirm,
+  confirmLabel = 'Confirm',
+  size = 'sm',
+}: ConfirmDialogProps) {
+  const [typed, setTyped] = useState('')
+  const satisfied = !confirmPhrase || typed.trim() === confirmPhrase
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) setTyped('') // reset the gate when the dialog closes
+    onOpenChange(next)
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={handleOpenChange}>
+      <Dialog.Portal size={size}>
+        <Dialog.Header>
+          <Dialog.Title>{title}</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.Body>
+          {children}
+          {confirmPhrase ? (
+            <Field.Root>
+              {promptLabel ? <Field.Label>{promptLabel}</Field.Label> : null}
+              <Input
+                font="mono"
+                value={typed}
+                onChange={(e) => setTyped(e.target.value)}
+                autoFocus
+                aria-label="confirmation phrase"
+              />
+            </Field.Root>
+          ) : null}
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Button variant="secondary" onClick={() => handleOpenChange(false)}>
+            {cancelLabel}
+          </Button>
+          {confirmSlot ? (
+            confirmSlot({satisfied})
+          ) : onConfirm ? (
+            <Button variant="danger" disabled={!satisfied} onClick={onConfirm}>
+              {confirmLabel}
+            </Button>
+          ) : null}
+        </Dialog.Footer>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

package/src/components/Input/Input.tsx

@@ -10,11 +10,26 @@ export type InputVariant = 'default' | 'error'
 
 interface InputProps {
   variant?: InputVariant
+  /** Orthogonal to variant — `mono` keeps the error border but uses the
+   *  monospace family (slugs, identifiers, hashes). */
+  font?: 'mono'
   type?: InputType
+  /** Explicit id — overrides the Field-context controlId when set (e.g. a
+   *  control used outside a Field that still needs a stable id). */
+  id?: string
   name?: string
   placeholder?: string
   required?: boolean
+  readOnly?: boolean
   minLength?: number
+  maxLength?: number
+  /** Numeric/range hints — forwarded to the native input (date/number/etc). */
+  min?: string | number
+  max?: string | number
+  step?: string | number
+  inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
+  /** id of a <datalist> for native typeahead. */
+  list?: string
   pattern?: string
   autoComplete?:
     | 'on'
@@ -30,6 +45,10 @@ interface InputProps {
   defaultValue?: string
   disabled?: boolean
   autoFocus?: boolean
+  /** Accessible name when there's no associated <Field.Label>. */
+  'aria-label'?: string
+  /** Extra describedby ids (merged with the Field context's, if any). */
+  'aria-describedby'?: string
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   onBlur?: () => void
   ref?: React.Ref<HTMLInputElement>
@@ -37,17 +56,28 @@ interface InputProps {
 
 export function Input({
   variant = 'default',
+  font,
   type = 'text',
+  id,
   name,
   placeholder,
   required,
+  readOnly,
   minLength,
+  maxLength,
+  min,
+  max,
+  step,
+  inputMode,
+  list,
   pattern,
   autoComplete,
   value,
   defaultValue,
   disabled,
   autoFocus,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedby,
   onChange,
   onBlur,
   ref,
@@ -63,16 +93,29 @@ export function Input({
   const effectiveRef = ref ?? fieldCtx?.ref
   const effectiveDisabled = disabled ?? ctx?.disabled
   const effectiveVariant = ctx?.invalid ? 'error' : variant
+  // Field context owns describedby (description + error); fall back to the
+  // explicit prop only when standalone.
+  const describedBy = ctx
+    ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim()
+    : ariaDescribedby
 
   // react-strict-dom omits some web-only props from its types, but the
   // underlying DOM element supports them. Type-assert to pass them through.
   const extraProps: Record<string, unknown> = {}
   if (pattern !== undefined) extraProps.pattern = pattern
   if (autoFocus) extraProps.autoFocus = true
+  if (readOnly) extraProps.readOnly = true
+  if (maxLength !== undefined) extraProps.maxLength = maxLength
+  if (min !== undefined) extraProps.min = min
+  if (max !== undefined) extraProps.max = max
+  if (step !== undefined) extraProps.step = step
+  if (inputMode !== undefined) extraProps.inputMode = inputMode
+  if (list !== undefined) extraProps.list = list
+  if (ariaLabel !== undefined) extraProps['aria-label'] = ariaLabel
 
   return (
     <html.input
-      id={ctx?.controlId}
+      id={id ?? ctx?.controlId}
       type={type}
       name={effectiveName}
       placeholder={placeholder}
@@ -82,14 +125,17 @@ export function Input({
       value={effectiveValue}
       defaultValue={defaultValue}
       disabled={effectiveDisabled}
-      aria-describedby={
-        ctx ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim() : undefined
-      }
+      aria-describedby={describedBy || undefined}
       aria-invalid={ctx?.invalid || variant === 'error' || undefined}
       onChange={effectiveOnChange as StrictInputProps['onChange']}
       onBlur={effectiveOnBlur as StrictInputProps['onBlur']}
       ref={effectiveRef as React.Ref<HTMLInputElement>}
-      style={[styles.base, styles[effectiveVariant], groupCtx?.inGroup && styles.inGroup]}
+      style={[
+        styles.base,
+        styles[effectiveVariant],
+        font === 'mono' && styles.mono,
+        groupCtx?.inGroup && styles.inGroup,
+      ]}
       {...extraProps}
     />
   )

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

@@ -56,4 +56,9 @@ export const styles = css.create({
     borderRadius: 0,
     outlineWidth: 0,
   },
+  // orthogonal to variant (default/error) — composes on top so a mono field
+  // still shows its error border. For slugs, identifiers, hashes.
+  mono: {
+    fontFamily: typography.fontFamilyMono,
+  },
 })

package/src/components/Select/Select.stories.tsx

@@ -1,5 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect, fn} from 'storybook/test'
+import {expect, fn, screen} from 'storybook/test'
+import {Dialog} from '../Dialog/Dialog'
 import {Select} from './Select'
 
 const meta: Meta = {
@@ -62,13 +63,16 @@ export const OpenAndSelect: Story = {
 
     await userEvent.click(trigger)
     await expect(trigger).toHaveAttribute('aria-expanded', 'true')
-    const options = canvas.getAllByRole('option')
+    // The popup portals to the ThemeProvider mount (outside the story canvas),
+    // so query the whole document via `screen`.
+    const options = screen.getAllByRole('option')
     await expect(options.length).toBe(3)
     await expect(options[0]).toHaveAttribute('aria-selected', 'true')
 
     await userEvent.click(options[1])
     await expect(trigger).toHaveTextContent(/Francais/)
-    await expect(canvas.queryByRole('listbox')).not.toBeInTheDocument()
+    // Closed listbox is aria-hidden, so it's no longer exposed by role.
+    await expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
   },
 }
 
@@ -101,9 +105,9 @@ export const WithPlaceholder: Story = {
     // Shows placeholder when nothing selected
     await expect(trigger).toHaveTextContent(/Choose a language\.\.\./)
 
-    // Open and select
+    // Open and select (options portal to the ThemeProvider mount → use screen)
     await userEvent.click(trigger)
-    const options = canvas.getAllByRole('option')
+    const options = screen.getAllByRole('option')
     await expect(options.length).toBe(4)
 
     // None selected initially
@@ -111,7 +115,7 @@ export const WithPlaceholder: Story = {
       await expect(opt).toHaveAttribute('aria-selected', 'false')
     }
 
-    await userEvent.click(canvas.getByText('Vue'))
+    await userEvent.click(screen.getByText('Vue'))
     await expect(trigger).toHaveTextContent(/Vue/)
   },
 }
@@ -139,6 +143,54 @@ export const KeyboardNavigation: Story = {
   play: async ({canvas, userEvent}) => {
     const trigger = canvas.getByRole('combobox')
     await userEvent.click(trigger)
-    await expect(canvas.getByRole('listbox')).toBeInTheDocument()
+    await expect(screen.getByRole('listbox')).toBeInTheDocument()
+  },
+}
+
+// Regression: a Select inside a Dialog. The Dialog clips its content
+// (overflow: hidden + body overflowY: auto), so an in-tree absolutely
+// positioned popup would be cropped. The popup must portal to the
+// ThemeProvider mount (z-index above the Dialog) and render in full.
+export const InsideDialog: Story = {
+  render: () => (
+    <Dialog.Root open onOpenChange={() => {}}>
+      <Dialog.Portal>
+        <Dialog.Header>
+          <Dialog.Title>Add a zone</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Select.Root defaultValue="">
+            <Select.Trigger aria-label="Macro-zone">
+              <Select.Value placeholder="— No macro-zone —" />
+              <Select.Icon />
+            </Select.Trigger>
+            <Select.Popup>
+              <Select.Item value="">
+                <Select.ItemText>— No macro-zone —</Select.ItemText>
+              </Select.Item>
+              <Select.Item value="north">
+                <Select.ItemText>North</Select.ItemText>
+              </Select.Item>
+              <Select.Item value="south">
+                <Select.ItemText>South</Select.ItemText>
+              </Select.Item>
+            </Select.Popup>
+          </Select.Root>
+        </Dialog.Body>
+      </Dialog.Portal>
+    </Dialog.Root>
+  ),
+  play: async ({userEvent}) => {
+    // Both the trigger and the (portaled) popup live outside the story canvas:
+    // the Dialog itself portals. Query the whole document.
+    const trigger = screen.getByRole('combobox', {name: 'Macro-zone'})
+    await userEvent.click(trigger)
+    const options = screen.getAllByRole('option')
+    await expect(options.length).toBe(3)
+    // The popup escapes the Dialog: it renders into the portal mount, which is
+    // a sibling of (and stacks above) the Dialog — not clipped by it.
+    const listbox = screen.getByRole('listbox')
+    await expect(listbox).toBeInTheDocument()
+    await expect(listbox.closest('[role="dialog"]')).toBeNull()
   },
 }

package/src/components/Select/Select.tsx

@@ -1,8 +1,11 @@
-import {type ReactNode, useRef, useId, useEffect} from 'react'
+import {type ReactNode, useRef, useId, useEffect, useLayoutEffect, useState} from 'react'
+import {createPortal} from 'react-dom'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {SelectContext, useSelect} from './SelectContext'
 import {useSelectRoot} from './useSelectRoot'
+import {useFieldContext} from '../Field/FieldContext'
+import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 
 // --- Root ---
 interface RootProps {
@@ -37,6 +40,13 @@ function Trigger({
 }) {
   const {open, toggle, listboxId, highlightedId, triggerRef} = useSelect()
   const localRef = useRef<HTMLButtonElement>(null)
+  // Inside a <Field.Root>, adopt its controlId so <Field.Label for={controlId}>
+  // labels the trigger (a labelable <button>) — no manual aria-label needed; and
+  // surface the field's description/error + invalid state, mirroring <Input>.
+  const fieldCtx = useFieldContext()
+  const describedBy = fieldCtx
+    ? `${fieldCtx.descriptionId} ${fieldCtx.invalid ? fieldCtx.errorId : ''}`.trim()
+    : undefined
 
   // Sync local ref to context triggerRef
   useEffect(() => {
@@ -46,6 +56,7 @@ function Trigger({
   return (
     <html.button
       ref={localRef}
+      id={fieldCtx?.controlId}
       type="button"
       role={'combobox' as 'listbox'}
       onClick={toggle}
@@ -54,6 +65,8 @@ function Trigger({
       aria-haspopup="listbox"
       aria-controls={open ? listboxId : undefined}
       aria-activedescendant={highlightedId ?? undefined}
+      aria-describedby={describedBy || undefined}
+      aria-invalid={fieldCtx?.invalid || undefined}
       style={styles.trigger}
     >
       {children}
@@ -97,22 +110,58 @@ function Icon({children}: {children?: ReactNode}) {
 }
 
 // --- Popup ---
+// Rendered into the ThemeProvider portal mount and positioned with viewport
+// coordinates (measured off the trigger) so it escapes ancestor
+// `overflow: hidden` / `transform` containing blocks (notably Dialog/Drawer).
+// The listbox stays mounted while closed (display: none) so Items can register
+// their labels from DOM text before the popup is ever opened.
 function Popup({children}: {children: ReactNode}) {
-  const {open, close, listboxId} = useSelect()
-
-  return (
+  const {open, close, listboxId, triggerRef} = useSelect()
+  const mount = usePortalMount()
+  const [coords, setCoords] = useState<{top: number; left: number; width: number} | null>(null)
+
+  // Measure the trigger when the popup opens, and re-measure on scroll/resize so
+  // the dropdown follows it. Capture-phase scroll catches scroll on any ancestor
+  // (e.g. a Dialog body).
+  useLayoutEffect(() => {
+    if (!open) return
+    const update = () => {
+      const el = triggerRef.current
+      if (!el) return
+      const rect = el.getBoundingClientRect()
+      // `xs` token = 4px gap below the trigger.
+      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, triggerRef])
+
+  const node = (
     <>
       {open && <html.div style={styles.backdrop} onClick={close} />}
       <html.div
         id={listboxId}
         role="listbox"
         aria-hidden={!open}
-        style={[styles.popup, !open && styles.hidden]}
+        style={[
+          styles.popup,
+          (!open || !coords) && styles.hidden,
+          coords && styles.popupPosition(coords.top, coords.left, coords.width),
+        ]}
       >
         {children}
       </html.div>
     </>
   )
+
+  // SSR / pre-mount fallback: render inline (hidden under overflow parents but
+  // won't crash). Once the mount exists, portal into it.
+  return mount ? createPortal(node, mount) : node
 }
 
 // --- Item ---

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

@@ -51,12 +51,15 @@ export const styles = css.create({
     right: 0,
     bottom: 0,
     zIndex: 49,
+    // The portal mount is pointer-events: none, so re-enable here to catch
+    // outside clicks that close the popup.
+    pointerEvents: 'auto',
   },
   popup: {
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    marginTop: spacing.xs,
+    // Position is `fixed` and top/left/minWidth are applied inline by Popup
+    // (computed from the trigger's bounding rect) so the dropdown escapes any
+    // ancestor with `overflow: hidden` / `transform` (notably inside a Dialog).
+    position: 'fixed',
     backgroundColor: colors.bgCard,
     borderWidth: 1,
     borderStyle: 'solid',
@@ -66,8 +69,17 @@ export const styles = css.create({
     paddingTop: spacing.xs,
     paddingBottom: spacing.xs,
     minWidth: 120,
+    maxHeight: 280,
+    overflowY: 'auto',
     zIndex: 50,
+    // Re-enable pointer events: the portal mount is pointer-events: none.
+    pointerEvents: 'auto',
   },
+  popupPosition: (top: number, left: number, minWidth: number) => ({
+    top,
+    left,
+    minWidth,
+  }),
   item: {
     display: 'flex',
     alignItems: 'center',

package/src/index.ts

@@ -13,6 +13,8 @@ export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
 export {Checkbox} from './components/Checkbox/Checkbox'
 export {CheckboxGroup} from './components/CheckboxGroup/CheckboxGroup'
+export {ColorInput} from './components/ColorInput/ColorInput'
+export {ConfirmDialog} from './components/ConfirmDialog/ConfirmDialog'
 export {Dialog, type DialogSize} from './components/Dialog/Dialog'
 export {DetailPanel, type DetailPanelSize} from './components/DetailPanel/DetailPanel'
 export {Drawer, type DrawerAnchor, type DrawerSize} from './components/Drawer/Drawer'