@zyncat/ui 0.11.0 → 0.12.0

package/dist/dialog.css

@@ -1,183 +1,187 @@
-/* dialog.css - the styled dialog surface (the modal shell owns modality + motion). */
+@layer zyncat.tokens, zyncat.components;
 
-/* Modal placement - the shell layer centers the panel with breathing room. */
-.overlay-layer--dialog {
-  place-items: center;
-  padding: var(--space-6);
-}
-.overlay-panel--dialog {
-  max-width: 100%;
-  max-height: 100%;
-}
+@layer zyncat.components {
+  /* dialog.css - the styled dialog surface (the modal shell owns modality + motion). */
 
-/* The panel - flex column so the body scrolls between a pinned header + footer; padding lives on the parts. */
-.dialog {
-  --dialog-w: 32rem;
-  position: relative;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  width: var(--dialog-w);
-  max-width: 100%;
-  max-height: min(85dvh, 44rem);
-  padding: 0;
-  overflow: hidden;
-  background: var(--bg-surface);
-  border: var(--border-hairline) solid var(--border-default);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-xl);
-  color: var(--text-body);
-  font-family: var(--font-sans);
-}
+  /* Modal placement - the shell layer centers the panel with breathing room. */
+  .overlay-layer--dialog {
+    place-items: center;
+    padding: var(--space-6);
+  }
+  .overlay-panel--dialog {
+    max-width: 100%;
+    max-height: 100%;
+  }
 
-.dialog[data-size='sm'] {
-  --dialog-w: 25rem;
-}
-.dialog[data-size='lg'] {
-  --dialog-w: 40rem;
-}
+  /* The panel - flex column so the body scrolls between a pinned header + footer; padding lives on the parts. */
+  .dialog {
+    --dialog-w: 32rem;
+    position: relative;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    width: var(--dialog-w);
+    max-width: 100%;
+    max-height: min(85dvh, 44rem);
+    padding: 0;
+    overflow: hidden;
+    background: var(--bg-surface);
+    border: var(--border-hairline) solid var(--border-default);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-xl);
+    color: var(--text-body);
+    font-family: var(--font-sans);
+  }
 
-/* Header - icon - heading - close; flex-start keeps a tall heading top-aligned with the badge. */
-.dialog__header {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-3);
-  padding: var(--space-5) var(--space-5) var(--space-4);
-  transition:
-    border-color var(--duration-base) var(--ease-standard),
-    box-shadow var(--duration-base) var(--ease-standard);
-  border-bottom: var(--border-hairline) solid transparent;
-}
-/* divider + faint lift appears only once the body is scrolled under it */
-.dialog:has(.dialog__body[data-scroll-top]) .dialog__header {
-  border-bottom-color: var(--border-subtle);
-  box-shadow: var(--shadow-xs);
-}
+  .dialog[data-size='sm'] {
+    --dialog-w: 25rem;
+  }
+  .dialog[data-size='lg'] {
+    --dialog-w: 40rem;
+  }
 
-.dialog__icon {
-  flex: 0 0 auto;
-  display: grid;
-  place-items: center;
-  width: 2.25rem;
-  height: 2.25rem;
-  border-radius: var(--radius-md);
-  background: var(--accent-subtle);
-  color: var(--text-accent);
-  font-size: var(--icon-md);
-}
-.dialog[data-tone='danger'] .dialog__icon {
-  background: var(--danger-subtle);
-  color: var(--danger-text);
-}
+  /* Header - icon - heading - close; flex-start keeps a tall heading top-aligned with the badge. */
+  .dialog__header {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-5) var(--space-5) var(--space-4);
+    transition:
+      border-color var(--duration-base) var(--ease-standard),
+      box-shadow var(--duration-base) var(--ease-standard);
+    border-bottom: var(--border-hairline) solid transparent;
+  }
+  /* divider + faint lift appears only once the body is scrolled under it */
+  .dialog:has(.dialog__body[data-scroll-top]) .dialog__header {
+    border-bottom-color: var(--border-subtle);
+    box-shadow: var(--shadow-xs);
+  }
 
-.dialog__heading {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  /* nudge text to optical-center against the 36px icon badge when present */
-  padding-top: var(--space-px);
-}
-.dialog__title {
-  margin: 0;
-  color: var(--text-strong);
-  font: var(--weight-semibold) var(--size-heading)/var(--leading-heading) var(--font-sans);
-  letter-spacing: var(--tracking-tight);
-  text-wrap: pretty;
-}
-.dialog__desc {
-  margin: 0;
-  color: var(--text-muted);
-  font: var(--type-body);
-  text-wrap: pretty;
-}
+  .dialog__icon {
+    flex: 0 0 auto;
+    display: grid;
+    place-items: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: var(--radius-md);
+    background: var(--accent-subtle);
+    color: var(--text-accent);
+    font-size: var(--icon-md);
+  }
+  .dialog[data-tone='danger'] .dialog__icon {
+    background: var(--danger-subtle);
+    color: var(--danger-text);
+  }
 
-/* close - a quiet ghost icon button; the hit box is bigger than the glyph */
-.dialog__close {
-  flex: 0 0 auto;
-  appearance: none;
-  margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) 0 0;
-  display: grid;
-  place-items: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-md);
-  background: transparent;
-  color: var(--text-subtle);
-  cursor: pointer;
-  font-size: var(--icon-sm);
-  transition: var(--transition-control);
-}
-.dialog__close:hover {
-  background: var(--neutral-wash);
-  color: var(--text-strong);
-}
-.dialog__close:active {
-  background: var(--bg-muted);
-}
-.dialog__close:focus-visible {
-  outline: none;
-  color: var(--text-strong);
-  box-shadow: var(--ring-accent);
-}
+  .dialog__heading {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    /* nudge text to optical-center against the 36px icon badge when present */
+    padding-top: var(--space-px);
+  }
+  .dialog__title {
+    margin: 0;
+    color: var(--text-strong);
+    font: var(--weight-semibold) var(--size-heading)/var(--leading-heading) var(--font-sans);
+    letter-spacing: var(--tracking-tight);
+    text-wrap: pretty;
+  }
+  .dialog__desc {
+    margin: 0;
+    color: var(--text-muted);
+    font: var(--type-body);
+    text-wrap: pretty;
+  }
 
-/* Body - the scroll region; min-height:0 lets it shrink so header/footer stay pinned. */
-.dialog__body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: 0 var(--space-5) var(--space-5);
-  color: var(--text-body);
-  font: var(--type-body);
-}
-.dialog__body:first-child {
-  padding-top: var(--space-5);
-}
-.dialog:has(.dialog__icon) .dialog__body {
-  padding-left: calc(var(--space-5) + 2.25rem + var(--space-3));
-}
-.dialog:has(.dialog__footer) .dialog__body {
-  padding-bottom: var(--space-4);
-}
-.dialog__body > :first-child {
-  margin-top: 0;
-}
-.dialog__body > :last-child {
-  margin-bottom: 0;
-}
+  /* close - a quiet ghost icon button; the hit box is bigger than the glyph */
+  .dialog__close {
+    flex: 0 0 auto;
+    appearance: none;
+    margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) 0 0;
+    display: grid;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--text-subtle);
+    cursor: pointer;
+    font-size: var(--icon-sm);
+    transition: var(--transition-control);
+  }
+  .dialog__close:hover {
+    background: var(--neutral-wash);
+    color: var(--text-strong);
+  }
+  .dialog__close:active {
+    background: var(--bg-muted);
+  }
+  .dialog__close:focus-visible {
+    outline: none;
+    color: var(--text-strong);
+    box-shadow: var(--ring-accent);
+  }
 
-.dialog__body {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-strong) transparent;
-}
-.dialog__body::-webkit-scrollbar {
-  width: 10px;
-}
-.dialog__body::-webkit-scrollbar-thumb {
-  background: var(--border-strong);
-  border-radius: var(--radius-full);
-  border: 3px solid var(--bg-surface);
-  background-clip: padding-box;
-}
+  /* Body - the scroll region; min-height:0 lets it shrink so header/footer stay pinned. */
+  .dialog__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 0 var(--space-5) var(--space-5);
+    color: var(--text-body);
+    font: var(--type-body);
+  }
+  .dialog__body:first-child {
+    padding-top: var(--space-5);
+  }
+  .dialog:has(.dialog__icon) .dialog__body {
+    padding-left: calc(var(--space-5) + 2.25rem + var(--space-3));
+  }
+  .dialog:has(.dialog__footer) .dialog__body {
+    padding-bottom: var(--space-4);
+  }
+  .dialog__body > :first-child {
+    margin-top: 0;
+  }
+  .dialog__body > :last-child {
+    margin-bottom: 0;
+  }
 
-/* Footer - right-aligned actions; gains a top divider only when the body scrolls under it. */
-.dialog__footer {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-  padding: var(--space-4) var(--space-5) var(--space-5);
-  border-top: var(--border-hairline) solid transparent;
-  transition: border-color var(--duration-base) var(--ease-standard);
-}
-.dialog:has(.dialog__body[data-scroll-bottom]) .dialog__footer {
-  border-top-color: var(--border-subtle);
+  .dialog__body {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-strong) transparent;
+  }
+  .dialog__body::-webkit-scrollbar {
+    width: 10px;
+  }
+  .dialog__body::-webkit-scrollbar-thumb {
+    background: var(--border-strong);
+    border-radius: var(--radius-full);
+    border: 3px solid var(--bg-surface);
+    background-clip: padding-box;
+  }
+
+  /* Footer - right-aligned actions; gains a top divider only when the body scrolls under it. */
+  .dialog__footer {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+    padding: var(--space-4) var(--space-5) var(--space-5);
+    border-top: var(--border-hairline) solid transparent;
+    transition: border-color var(--duration-base) var(--ease-standard);
+  }
+  .dialog:has(.dialog__body[data-scroll-bottom]) .dialog__footer {
+    border-top-color: var(--border-subtle);
+  }
 }

package/dist/dialog.js

@@ -1,25 +1,22 @@
 'use client';import { useScrollEdges } from './chunk-BIDVNLJO.js';
-import { ModalShell } from './chunk-WFHRAKN3.js';
-import './chunk-DKVUPFQR.js';
-import { ovCloneTrigger, OverlayPortal } from './chunk-U4MHX3KH.js';
-import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
-import { Presence } from './chunk-NGTA34V2.js';
-import './chunk-XWUWYSCT.js';
-import './chunk-YGCVWGUG.js';
-import { IconSlot } from './chunk-2ERBBFZS.js';
-import { Icon } from './chunk-3SBCBYB7.js';
+import { OV_TAKEOVER_TIMING, ModalShell } from './chunk-FONOS5RN.js';
+import './chunk-A5WTZACK.js';
+import { ovCloneTrigger, OverlayPortal } from './chunk-VAXCXZ53.js';
+import './chunk-JY6A2ZJZ.js';
+import { Presence } from './chunk-DDRSMHN4.js';
+import { resolveMotionTiming } from './chunk-TUTXXC3W.js';
+import './chunk-M43IOM5C.js';
+import './chunk-IJS7TPGV.js';
+import { IconSlot } from './chunk-3MPF7FZV.js';
+import { Icon } from './chunk-EAI4POPB.js';
 import { useControllable } from './chunk-MMRIQNEN.js';
-import './chunk-S5ZTZANS.js';
-import './chunk-VTJTGVZZ.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import './chunk-DMX2F6B4.js';
 import { cx } from './chunk-QGNC7LH5.js';
 import './dialog.css';
 import { useId, useRef, Fragment } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var DIALOG_TIMING = {
-  open: { duration: "slow", ease: "entrance" },
-  close: { duration: "base", ease: "standard" }
-};
 function DialogSurface({
   panelId,
   size,
@@ -71,6 +68,7 @@ function Dialog({
   defaultOpen = false,
   onOpenChange,
   trigger = null,
+  activateOn,
   title,
   description = null,
   size = "md",
@@ -89,14 +87,27 @@ function Dialog({
   const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);
   const triggerRef = useRef(null);
   const close = () => setOpen(false);
-  const timings = resolveMotionTiming(animation, DIALOG_TIMING);
+  const timings = resolveMotionTiming(animation, OV_TAKEOVER_TIMING);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: "dialog", triggerRef }),
+    ovCloneTrigger(trigger, {
+      open,
+      onPress: () => setOpen(true),
+      panelId,
+      haspopup: "dialog",
+      triggerRef,
+      activateOn
+    }),
     /* @__PURE__ */ jsx(OverlayPortal, { container, children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
       ModalShell,
       {
-        animate: { y: [6, 0], scale: [0.98, 1], opacity: [0, 1], timing: timings.open },
-        exit: { y: [6], scale: [0.98], opacity: [0], timing: timings.close },
+        timings,
+        animate: {
+          y: [UIMotion.dist.sm, 0],
+          scale: [UIMotion.scale.panel, 1],
+          opacity: [0, 1],
+          timing: timings.open
+        },
+        exit: { y: [UIMotion.dist.sm], scale: [UIMotion.scale.panel], opacity: [0], timing: timings.close },
         layerClass: "overlay-layer--dialog",
         panelClass: "overlay-panel--dialog",
         panelId,

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/composites/dialog/Dialog.tsx"],"names":[],"mappings":"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","file":"dialog.js","sourcesContent":["'use client';\n\nimport './dialog.css';\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell } from '../../internal/overlay/modal';\nimport { Icon } from '../../internal/icon/Icon';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { useScrollEdges } from '../../internal/hooks/use-scroll-edges';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nconst DIALOG_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'base', ease: 'standard' },\n} as const;\n\nexport interface DialogProps {\n  /** Controlled open state. Omit for uncontrolled (use defaultOpen + trigger). */\n  open?: boolean;\n  /** Initial open state when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Fires whenever the open state changes. Pair with `open` for controlled use. */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional element cloned to open the dialog on click (uncontrolled ergonomics). */\n  trigger?: ReactElement | null;\n  /** Header title - rendered as the `<h2>` and wired to `aria-labelledby`. */\n  title?: ReactNode;\n  /** Subtext under the title - wired to `aria-describedby`. @default null */\n  description?: ReactNode;\n  /** Panel width. @default 'md' */\n  size?: 'sm' | 'md' | 'lg';\n  /** 'danger' tints the header icon badge + is the convention for destructive confirms. */\n  tone?: 'default' | 'danger';\n  /** Your own icon node for the header badge (alert dialogs). */\n  icon?: ReactNode;\n  /** Close button + backdrop/Esc dismissal. Default true. */\n  dismissible?: boolean;\n  /** Center inside this element instead of the viewport - it must be positioned (`position: relative` or similar).\n   *  Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */\n  container?: HTMLElement | null;\n  /** Action row - a node, or a render fn `(close) => node` so uncontrolled dialogs can dismiss. */\n  footer?: ReactNode | ((close: () => void) => ReactNode);\n  /** Dialog body - scrolls when tall; its scroll edges flag the header lift + footer divider. */\n  children?: ReactNode;\n  /** Base id for the panel; drives the trigger's `aria-controls` and the title/desc aria ids.\n   *  Auto-generated when omitted. */\n  id?: string;\n  /** Standard attributes (className, style, data-*, ...) forwarded to the dialog `<section>`. */\n  htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */\n  animation?: DisableableAnimation;\n}\n\ninterface DialogSurfaceProps {\n  panelId: string;\n  size: 'sm' | 'md' | 'lg';\n  tone: 'default' | 'danger';\n  icon: ReactNode;\n  title: ReactNode;\n  description: ReactNode;\n  dismissible: boolean;\n  footerContent: ReactNode;\n  requestClose: () => void;\n  htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n  children?: ReactNode;\n}\n\nfunction DialogSurface({\n  panelId,\n  size,\n  tone,\n  icon,\n  title,\n  description,\n  dismissible,\n  footerContent,\n  requestClose,\n  htmlProps,\n  children,\n}: DialogSurfaceProps) {\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const titleId = panelId + '-title';\n  const descId = panelId + '-desc';\n\n  useScrollEdges(bodyRef, (edges, el) => {\n    el.toggleAttribute('data-scroll-top', edges.top);\n    el.toggleAttribute('data-scroll-bottom', edges.bottom);\n  });\n\n  return (\n    <section\n      {...htmlProps}\n      className={cx('dialog', htmlProps?.className)}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      data-size={size === 'md' ? undefined : size}\n      data-tone={tone === 'default' ? undefined : tone}\n      aria-labelledby={title ? titleId : undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      {(icon || title || description || dismissible) && (\n        <header className=\"dialog__header\">\n          {icon && (\n            <span className=\"dialog__icon\">\n              <IconSlot size=\"md\">{icon}</IconSlot>\n            </span>\n          )}\n          <div className=\"dialog__heading\">\n            {title && (\n              <h2 className=\"dialog__title\" id={titleId}>\n                {title}\n              </h2>\n            )}\n            {description && (\n              <p className=\"dialog__desc\" id={descId}>\n                {description}\n              </p>\n            )}\n          </div>\n          {dismissible && (\n            <button type=\"button\" className=\"dialog__close\" aria-label=\"Close dialog\" onClick={requestClose}>\n              <Icon name=\"x\" size=\"sm\" weight=\"bold\" />\n            </button>\n          )}\n        </header>\n      )}\n\n      <div className=\"dialog__body\" ref={bodyRef}>\n        {children}\n      </div>\n\n      {footerContent && <footer className=\"dialog__footer\">{footerContent}</footer>}\n    </section>\n  );\n}\n\nexport function Dialog({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = null,\n  title,\n  description = null,\n  size = 'md',\n  tone = 'default',\n  icon = null,\n  dismissible = true,\n  container = null,\n  footer = null,\n  children,\n  id,\n  htmlProps,\n  animation,\n}: DialogProps) {\n  const autoId = useId();\n  const panelId = id || 'dialog-' + autoId;\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const triggerRef = useRef<HTMLElement>(null);\n  const close = () => setOpen(false);\n\n  const timings = resolveMotionTiming(animation, DIALOG_TIMING);\n\n  return (\n    <Fragment>\n      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}\n      <OverlayPortal container={container}>\n        <Presence>\n          {open && (\n            <ModalShell\n              key=\"dialog\"\n              animate={{ y: [6, 0], scale: [0.98, 1], opacity: [0, 1], timing: timings.open }}\n              exit={{ y: [6], scale: [0.98], opacity: [0], timing: timings.close }}\n              layerClass=\"overlay-layer--dialog\"\n              panelClass=\"overlay-panel--dialog\"\n              panelId={panelId}\n              dismissible={dismissible}\n              container={container}\n              requestClose={close}\n            >\n              <DialogSurface\n                panelId={panelId}\n                size={size}\n                tone={tone}\n                icon={icon}\n                title={title}\n                description={description}\n                dismissible={dismissible}\n                footerContent={typeof footer === 'function' ? footer(close) : footer}\n                requestClose={close}\n                htmlProps={htmlProps}\n              >\n                {children}\n              </DialogSurface>\n            </ModalShell>\n          )}\n        </Presence>\n      </OverlayPortal>\n    </Fragment>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/composites/dialog/Dialog.tsx"],"names":[],"mappings":"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","file":"dialog.js","sourcesContent":["'use client';\n\nimport './dialog.css';\n\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport { Presence } from '../../../motion/presence';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useScrollEdges } from '../../internal/hooks/use-scroll-edges';\nimport { Icon } from '../../internal/icon/Icon';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell, OV_TAKEOVER_TIMING } from '../../internal/overlay/modal';\nimport type { ActivateOn } from '../../internal/utils/activation';\nimport { cx } from '../../internal/utils/cx';\n\nexport interface DialogProps {\n  /** Controlled open state. Omit for uncontrolled (use defaultOpen + trigger). */\n  open?: boolean;\n  /** Initial open state when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Fires whenever the open state changes. Pair with `open` for controlled use. */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional element cloned to open the dialog (uncontrolled ergonomics). */\n  trigger?: ReactElement | null;\n  /** Whether the trigger fires on `pointerdown` (snappier) or waits for `click`. @default 'click' */\n  activateOn?: ActivateOn;\n  /** Header title - rendered as the `<h2>` and wired to `aria-labelledby`. */\n  title?: ReactNode;\n  /** Subtext under the title - wired to `aria-describedby`. @default null */\n  description?: ReactNode;\n  /** Panel width. @default 'md' */\n  size?: 'sm' | 'md' | 'lg';\n  /** 'danger' tints the header icon badge + is the convention for destructive confirms. */\n  tone?: 'default' | 'danger';\n  /** Your own icon node for the header badge (alert dialogs). */\n  icon?: ReactNode;\n  /** Close button + backdrop/Esc dismissal. Default true. */\n  dismissible?: boolean;\n  /** Center inside this element instead of the viewport - it must be positioned (`position: relative` or similar).\n   *  Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */\n  container?: HTMLElement | null;\n  /** Action row - a node, or a render fn `(close) => node` so uncontrolled dialogs can dismiss. */\n  footer?: ReactNode | ((close: () => void) => ReactNode);\n  /** Dialog body - scrolls when tall; its scroll edges flag the header lift + footer divider. */\n  children?: ReactNode;\n  /** Base id for the panel; drives the trigger's `aria-controls` and the title/desc aria ids.\n   *  Auto-generated when omitted. */\n  id?: string;\n  /** Standard attributes (className, style, data-*, ...) forwarded to the dialog `<section>`. */\n  htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */\n  animation?: DisableableAnimation;\n}\n\ninterface DialogSurfaceProps {\n  panelId: string;\n  size: 'sm' | 'md' | 'lg';\n  tone: 'default' | 'danger';\n  icon: ReactNode;\n  title: ReactNode;\n  description: ReactNode;\n  dismissible: boolean;\n  footerContent: ReactNode;\n  requestClose: () => void;\n  htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n  children?: ReactNode;\n}\n\nfunction DialogSurface({\n  panelId,\n  size,\n  tone,\n  icon,\n  title,\n  description,\n  dismissible,\n  footerContent,\n  requestClose,\n  htmlProps,\n  children,\n}: DialogSurfaceProps) {\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const titleId = panelId + '-title';\n  const descId = panelId + '-desc';\n\n  useScrollEdges(bodyRef, (edges, el) => {\n    el.toggleAttribute('data-scroll-top', edges.top);\n    el.toggleAttribute('data-scroll-bottom', edges.bottom);\n  });\n\n  return (\n    <section\n      {...htmlProps}\n      className={cx('dialog', htmlProps?.className)}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      data-size={size === 'md' ? undefined : size}\n      data-tone={tone === 'default' ? undefined : tone}\n      aria-labelledby={title ? titleId : undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      {(icon || title || description || dismissible) && (\n        <header className=\"dialog__header\">\n          {icon && (\n            <span className=\"dialog__icon\">\n              <IconSlot size=\"md\">{icon}</IconSlot>\n            </span>\n          )}\n          <div className=\"dialog__heading\">\n            {title && (\n              <h2 className=\"dialog__title\" id={titleId}>\n                {title}\n              </h2>\n            )}\n            {description && (\n              <p className=\"dialog__desc\" id={descId}>\n                {description}\n              </p>\n            )}\n          </div>\n          {dismissible && (\n            <button type=\"button\" className=\"dialog__close\" aria-label=\"Close dialog\" onClick={requestClose}>\n              <Icon name=\"x\" size=\"sm\" weight=\"bold\" />\n            </button>\n          )}\n        </header>\n      )}\n\n      <div className=\"dialog__body\" ref={bodyRef}>\n        {children}\n      </div>\n\n      {footerContent && <footer className=\"dialog__footer\">{footerContent}</footer>}\n    </section>\n  );\n}\n\nexport function Dialog({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = null,\n  activateOn,\n  title,\n  description = null,\n  size = 'md',\n  tone = 'default',\n  icon = null,\n  dismissible = true,\n  container = null,\n  footer = null,\n  children,\n  id,\n  htmlProps,\n  animation,\n}: DialogProps) {\n  const autoId = useId();\n  const panelId = id || 'dialog-' + autoId;\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const triggerRef = useRef<HTMLElement>(null);\n  const close = () => setOpen(false);\n\n  const timings = resolveMotionTiming(animation, OV_TAKEOVER_TIMING);\n\n  return (\n    <Fragment>\n      {ovCloneTrigger(trigger, {\n        open,\n        onPress: () => setOpen(true),\n        panelId,\n        haspopup: 'dialog',\n        triggerRef,\n        activateOn,\n      })}\n      <OverlayPortal container={container}>\n        <Presence>\n          {open && (\n            <ModalShell\n              key=\"dialog\"\n              timings={timings}\n              animate={{\n                y: [UIMotion.dist.sm, 0],\n                scale: [UIMotion.scale.panel, 1],\n                opacity: [0, 1],\n                timing: timings.open,\n              }}\n              exit={{ y: [UIMotion.dist.sm], scale: [UIMotion.scale.panel], opacity: [0], timing: timings.close }}\n              layerClass=\"overlay-layer--dialog\"\n              panelClass=\"overlay-panel--dialog\"\n              panelId={panelId}\n              dismissible={dismissible}\n              container={container}\n              requestClose={close}\n            >\n              <DialogSurface\n                panelId={panelId}\n                size={size}\n                tone={tone}\n                icon={icon}\n                title={title}\n                description={description}\n                dismissible={dismissible}\n                footerContent={typeof footer === 'function' ? footer(close) : footer}\n                requestClose={close}\n                htmlProps={htmlProps}\n              >\n                {children}\n              </DialogSurface>\n            </ModalShell>\n          )}\n        </Presence>\n      </OverlayPortal>\n    </Fragment>\n  );\n}\n"]}

package/dist/digit-strip.css

@@ -0,0 +1,65 @@
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  .odo {
+    display: inline-flex;
+    align-items: center;
+  }
+  .odo__col {
+    display: inline-block;
+    height: 1em;
+    line-height: 1;
+    overflow: hidden;
+  }
+  .odo__strip {
+    display: flex;
+    flex-direction: column;
+    transition: transform var(--duration-slow) var(--ease-entrance);
+    will-change: transform;
+  }
+  .odo__strip > span {
+    height: 1em;
+    line-height: 1;
+    display: block;
+    text-align: center;
+  }
+  .odo__fixed {
+    display: inline-block;
+  }
+  .odo__strip--0 {
+    transform: translateY(0);
+  }
+  .odo__strip--1 {
+    transform: translateY(-1em);
+  }
+  .odo__strip--2 {
+    transform: translateY(-2em);
+  }
+  .odo__strip--3 {
+    transform: translateY(-3em);
+  }
+  .odo__strip--4 {
+    transform: translateY(-4em);
+  }
+  .odo__strip--5 {
+    transform: translateY(-5em);
+  }
+  .odo__strip--6 {
+    transform: translateY(-6em);
+  }
+  .odo__strip--7 {
+    transform: translateY(-7em);
+  }
+  .odo__strip--8 {
+    transform: translateY(-8em);
+  }
+  .odo__strip--9 {
+    transform: translateY(-9em);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .odo__strip {
+      transition: none;
+    }
+  }
+}

package/dist/dropdown.css

@@ -0,0 +1,65 @@
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  /* Dropdown deltas on top of the shared menu surface (internal/menu/menu-surface.css):
+   group dividers and the row states a listbox has no use for. */
+
+  .dropdown__menu {
+    --menu-max-width: min(20rem, 92vw);
+    --menu-max-height: min(26rem, 70vh);
+    min-width: 11rem;
+  }
+
+  .dropdown__menu[data-danger-active='true'] {
+    --menu-glide-fill: var(--danger-wash);
+  }
+
+  .dropdown__group + .dropdown__group {
+    border-top: var(--border-hairline) solid var(--border-subtle);
+    margin-top: var(--space-1);
+    padding-top: var(--space-1);
+  }
+
+  .dropdown__item {
+    transition: color var(--duration-fast) var(--ease-standard);
+  }
+  .dropdown__item[data-active='true'] {
+    color: var(--text-strong);
+  }
+
+  .dropdown__item[data-danger='true'],
+  .dropdown__item[data-danger='true'][data-active='true'] {
+    color: var(--danger-text);
+  }
+  .dropdown__item[data-danger='true'] .menu-row__icon {
+    color: var(--danger);
+  }
+
+  .dropdown__item[data-disabled='true'] {
+    cursor: not-allowed;
+    color: var(--text-disabled);
+  }
+  .dropdown__item[data-disabled='true'] .menu-row__icon,
+  .dropdown__item[data-disabled='true'] .dropdown__item-shortcut,
+  .dropdown__item[data-disabled='true'] .menu-row__desc,
+  .dropdown__item[data-disabled='true'] .dropdown__item-caret {
+    color: var(--text-disabled);
+  }
+
+  .dropdown__item-caret {
+    flex: 0 0 auto;
+    color: var(--text-subtle);
+  }
+  .dropdown__item[data-active='true'] .menu-row__icon,
+  .dropdown__item[data-active='true'] .dropdown__item-caret {
+    color: var(--text-body);
+  }
+
+  .dropdown__item-shortcut {
+    flex: 0 0 auto;
+    font: var(--type-mono);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-subtle);
+    padding-left: var(--space-2);
+  }
+}