@zyncat/ui 0.9.1 → 0.10.0

package/dist/{chunk-LDC3RIYA.js → chunk-ZCOUPPTI.js}

@@ -1,4 +1,4 @@
-'use client';import { ovIsTop, ovInOverlayAbove } from './chunk-GY7JOPUQ.js';
+'use client';import { ovIsTop, ovInOverlayAbove } from './chunk-RCONNA7I.js';
 import { useEffect } from 'react';
 
 function useReturnFocus(nodeRef) {
@@ -58,5 +58,5 @@ function useFocusTrap({ panelRef, entry }) {
 }
 
 export { useFocusTrap, useReturnFocus };
-//# sourceMappingURL=chunk-LDC3RIYA.js.map
-//# sourceMappingURL=chunk-LDC3RIYA.js.map
+//# sourceMappingURL=chunk-ZCOUPPTI.js.map
+//# sourceMappingURL=chunk-ZCOUPPTI.js.map

package/dist/{chunk-LDC3RIYA.js.map → chunk-ZCOUPPTI.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/internal/overlay/focus.ts"],"names":[],"mappings":"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","file":"chunk-LDC3RIYA.js","sourcesContent":["'use client';\n\nimport { useEffect, type RefObject } from 'react';\nimport { type OverlayEntry, ovIsTop, ovInOverlayAbove } from './layer';\n\nexport function useReturnFocus(nodeRef: RefObject<HTMLElement>) {\n  useEffect(() => {\n    const prev = document.activeElement as HTMLElement | null;\n    return () => {\n      const a = document.activeElement;\n      const orphaned = !a || a === document.body || (nodeRef.current && nodeRef.current.contains(a));\n      if (orphaned && prev && prev.isConnected && typeof prev.focus === 'function') {\n        queueMicrotask(() => {\n          if (prev.isConnected) prev.focus({ preventScroll: true });\n        });\n      }\n    };\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nconst OV_FOCUSABLE =\n  'a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), ' +\n  'select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport function useFocusTrap({ panelRef, entry }: { panelRef: RefObject<HTMLElement>; entry: OverlayEntry }) {\n  useEffect(() => {\n    const panel = panelRef.current;\n    if (!panel) return undefined;\n    const focusables = () =>\n      Array.from(panel.querySelectorAll<HTMLElement>(OV_FOCUSABLE)).filter(\n        (el) => el.offsetParent !== null || el === document.activeElement,\n      );\n\n    const seed = panel.querySelector<HTMLElement>('[autofocus], [data-autofocus]') || focusables()[0] || panel;\n    seed.focus({ preventScroll: true });\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const f = focusables();\n      if (f.length === 0) {\n        e.preventDefault();\n        return;\n      }\n      const cur = document.activeElement;\n      if (e.shiftKey) {\n        if (cur === f[0] || cur === panel) {\n          e.preventDefault();\n          f[f.length - 1].focus();\n        }\n      } else if (cur === f[f.length - 1]) {\n        e.preventDefault();\n        f[0].focus();\n      }\n    };\n    const onFocusIn = (e: FocusEvent) => {\n      if (panel.contains(e.target as Node)) return;\n      if (!ovIsTop(entry) || ovInOverlayAbove(entry, e.target)) return;\n      (focusables()[0] || panel).focus({ preventScroll: true });\n    };\n\n    panel.addEventListener('keydown', onKeyDown);\n    document.addEventListener('focusin', onFocusIn);\n    return () => {\n      panel.removeEventListener('keydown', onKeyDown);\n      document.removeEventListener('focusin', onFocusIn);\n    };\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n}\n"]}
+{"version":3,"sources":["../src/components/internal/overlay/focus.ts"],"names":[],"mappings":"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","file":"chunk-ZCOUPPTI.js","sourcesContent":["'use client';\n\nimport { useEffect, type RefObject } from 'react';\nimport { type OverlayEntry, ovIsTop, ovInOverlayAbove } from './layer';\n\nexport function useReturnFocus(nodeRef: RefObject<HTMLElement>) {\n  useEffect(() => {\n    const prev = document.activeElement as HTMLElement | null;\n    return () => {\n      const a = document.activeElement;\n      const orphaned = !a || a === document.body || (nodeRef.current && nodeRef.current.contains(a));\n      if (orphaned && prev && prev.isConnected && typeof prev.focus === 'function') {\n        queueMicrotask(() => {\n          if (prev.isConnected) prev.focus({ preventScroll: true });\n        });\n      }\n    };\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nconst OV_FOCUSABLE =\n  'a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), ' +\n  'select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport function useFocusTrap({ panelRef, entry }: { panelRef: RefObject<HTMLElement>; entry: OverlayEntry }) {\n  useEffect(() => {\n    const panel = panelRef.current;\n    if (!panel) return undefined;\n    const focusables = () =>\n      Array.from(panel.querySelectorAll<HTMLElement>(OV_FOCUSABLE)).filter(\n        (el) => el.offsetParent !== null || el === document.activeElement,\n      );\n\n    const seed = panel.querySelector<HTMLElement>('[autofocus], [data-autofocus]') || focusables()[0] || panel;\n    seed.focus({ preventScroll: true });\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const f = focusables();\n      if (f.length === 0) {\n        e.preventDefault();\n        return;\n      }\n      const cur = document.activeElement;\n      if (e.shiftKey) {\n        if (cur === f[0] || cur === panel) {\n          e.preventDefault();\n          f[f.length - 1].focus();\n        }\n      } else if (cur === f[f.length - 1]) {\n        e.preventDefault();\n        f[0].focus();\n      }\n    };\n    const onFocusIn = (e: FocusEvent) => {\n      if (panel.contains(e.target as Node)) return;\n      if (!ovIsTop(entry) || ovInOverlayAbove(entry, e.target)) return;\n      (focusables()[0] || panel).focus({ preventScroll: true });\n    };\n\n    panel.addEventListener('keydown', onKeyDown);\n    document.addEventListener('focusin', onFocusIn);\n    return () => {\n      panel.removeEventListener('keydown', onKeyDown);\n      document.removeEventListener('focusin', onFocusIn);\n    };\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n}\n"]}

package/dist/date-field.js

@@ -1,10 +1,10 @@
 'use client';import { DtpPanel } from './chunk-Y7AJQVWJ.js';
 import './chunk-TCUCYFT7.js';
+import { Popover } from './chunk-FTOAUJL5.js';
+import './chunk-62P3KD57.js';
 import { FieldTrigger, displayDay, FieldShell } from './chunk-YGGCQNNU.js';
-import { Popover } from './chunk-W5YM2FV4.js';
-import './chunk-EQ32F2QJ.js';
-import './chunk-LDC3RIYA.js';
-import './chunk-GY7JOPUQ.js';
+import './chunk-ZCOUPPTI.js';
+import './chunk-RCONNA7I.js';
 import './chunk-UE63OOVG.js';
 import './chunk-WM5J5TDI.js';
 import './chunk-NEF5XAHG.js';

package/dist/date-range-field.js

@@ -1,11 +1,11 @@
-'use client';import { Sheet } from './chunk-GLT5IKQY.js';
+'use client';import { Sheet } from './chunk-UXONUUPI.js';
 import { useDayFocus } from './chunk-TCUCYFT7.js';
+import { Popover } from './chunk-FTOAUJL5.js';
+import './chunk-62P3KD57.js';
 import { FieldShell, FieldTrigger, parse, today, tzLabel, MONTHS, pad, toKey, add, grid, DOW, col, within } from './chunk-YGGCQNNU.js';
-import './chunk-FLO4A6BI.js';
-import { Popover } from './chunk-W5YM2FV4.js';
-import './chunk-EQ32F2QJ.js';
-import './chunk-LDC3RIYA.js';
-import './chunk-GY7JOPUQ.js';
+import './chunk-K5X2GCXU.js';
+import './chunk-ZCOUPPTI.js';
+import './chunk-RCONNA7I.js';
 import './chunk-UE63OOVG.js';
 import { useGlide, GlidePill } from './chunk-WM5J5TDI.js';
 import './chunk-NEF5XAHG.js';

package/dist/datetime-field.js

@@ -1,11 +1,11 @@
 'use client';import { DtpPanel } from './chunk-Y7AJQVWJ.js';
 import './chunk-TCUCYFT7.js';
+import { Popover } from './chunk-FTOAUJL5.js';
+import './chunk-62P3KD57.js';
 import { TimeSegments, disp12 } from './chunk-64UU4LGU.js';
 import { displayDay, FieldShell, FieldTrigger, pad } from './chunk-YGGCQNNU.js';
-import { Popover } from './chunk-W5YM2FV4.js';
-import './chunk-EQ32F2QJ.js';
-import './chunk-LDC3RIYA.js';
-import './chunk-GY7JOPUQ.js';
+import './chunk-ZCOUPPTI.js';
+import './chunk-RCONNA7I.js';
 import './chunk-UE63OOVG.js';
 import './chunk-WM5J5TDI.js';
 import './chunk-NEF5XAHG.js';

package/dist/dialog.css

@@ -136,6 +136,9 @@
   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));
 }

package/dist/dialog.d.ts

@@ -25,6 +25,9 @@ interface DialogProps {
     icon?: ReactNode;
     /** Close button + backdrop/Esc dismissal. Default true. */
     dismissible?: boolean;
+    /** Center inside this element instead of the viewport - it must be positioned (`position: relative` or similar).
+     *  Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */
+    container?: HTMLElement | null;
     /** Action row - a node, or a render fn `(close) => node` so uncontrolled dialogs can dismiss. */
     footer?: ReactNode | ((close: () => void) => ReactNode);
     /** Dialog body - scrolls when tall; its scroll edges flag the header lift + footer divider. */
@@ -37,6 +40,6 @@ interface DialogProps {
     /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */
     animation?: DisableableAnimation;
 }
-declare function Dialog({ open: controlledOpen, defaultOpen, onOpenChange, trigger, title, description, size, tone, icon, dismissible, footer, children, id, htmlProps, animation, }: DialogProps): react.JSX.Element;
+declare function Dialog({ open: controlledOpen, defaultOpen, onOpenChange, trigger, title, description, size, tone, icon, dismissible, container, footer, children, id, htmlProps, animation, }: DialogProps): react.JSX.Element;
 
 export { Dialog, type DialogProps };

package/dist/dialog.js

@@ -1,7 +1,7 @@
 'use client';import { useScrollEdges } from './chunk-BIDVNLJO.js';
-import { ModalShell } from './chunk-FLO4A6BI.js';
-import './chunk-LDC3RIYA.js';
-import { ovCloneTrigger, OverlayPortal } from './chunk-GY7JOPUQ.js';
+import { ModalShell } from './chunk-K5X2GCXU.js';
+import './chunk-ZCOUPPTI.js';
+import { ovCloneTrigger, OverlayPortal } from './chunk-RCONNA7I.js';
 import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
 import { Presence } from './chunk-356HZMT4.js';
 import './chunk-XWUWYSCT.js';
@@ -52,7 +52,7 @@ function DialogSurface({
       "aria-labelledby": title ? titleId : void 0,
       "aria-describedby": description ? descId : void 0,
       children: [
-        /* @__PURE__ */ jsxs("header", { className: "dialog__header", children: [
+        (icon || title || description || dismissible) && /* @__PURE__ */ jsxs("header", { className: "dialog__header", children: [
           icon && /* @__PURE__ */ jsx("span", { className: "dialog__icon", children: /* @__PURE__ */ jsx(IconSlot, { size: "md", children: icon }) }),
           /* @__PURE__ */ jsxs("div", { className: "dialog__heading", children: [
             title && /* @__PURE__ */ jsx("h2", { className: "dialog__title", id: titleId, children: title }),
@@ -77,6 +77,7 @@ function Dialog({
   tone = "default",
   icon = null,
   dismissible = true,
+  container = null,
   footer = null,
   children,
   id,
@@ -91,7 +92,7 @@ function Dialog({
   const timings = resolveMotionTiming(animation, DIALOG_TIMING);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: "dialog", triggerRef }),
-    /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
+    /* @__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 },
@@ -100,6 +101,7 @@ function Dialog({
         panelClass: "overlay-panel--dialog",
         panelId,
         dismissible,
+        container,
         requestClose: close,
         children: /* @__PURE__ */ jsx(
           DialogSurface,

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  /** 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      <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      <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  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>\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              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';\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"]}

package/dist/modal.css

@@ -0,0 +1,9 @@
+/* modal.css - the unpainted modal surface: the shell layer centers the panel and
+   constrains it to the layer box. Everything else is the consumer's paint. */
+.overlay-layer--modal {
+  place-items: center;
+}
+.overlay-panel--modal {
+  max-width: 100%;
+  max-height: 100%;
+}

package/dist/modal.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ReactElement, HTMLAttributes, ReactNode } from 'react';
+import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+import './motion-scale-Canq4stZ.js';
+
+interface ModalProps {
+    /** Controlled open state. Omit to stay uncontrolled. */
+    open?: boolean;
+    /** Initial state when uncontrolled. Default false. */
+    defaultOpen?: boolean;
+    /** Fires whenever the open state changes. Pair with `open` for controlled use. */
+    onOpenChange?: (open: boolean) => void;
+    /** Cloned to open the modal on click. */
+    trigger?: ReactElement | null;
+    /** Scrim/Esc dismissal. Default true. */
+    dismissible?: boolean;
+    /** Mount inside this element instead of the viewport - it must be positioned (`position: relative` or similar).
+     *  Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */
+    container?: HTMLElement | null;
+    /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */
+    id?: string;
+    /** Standard attributes (className, style, data-*, ...) forwarded to the panel - this is where your paint goes.
+     *  Centered by default; `width: 100%; height: 100%` makes it full-bleed. */
+    htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    /** Standard attributes forwarded to the layer behind the panel - set `--bg-overlay` here to retint the scrim. */
+    layerProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */
+    animation?: DisableableAnimation;
+    /** The ENTIRE surface - paint AND semantics (`role="dialog"`, a label). Nothing is painted for you. */
+    children: ReactNode;
+}
+declare function Modal({ open: controlledOpen, defaultOpen, onOpenChange, trigger, dismissible, container, id, htmlProps, layerProps, animation, children, }: ModalProps): react.JSX.Element;
+
+export { Modal, type ModalProps };

package/dist/modal.js

@@ -0,0 +1,63 @@
+'use client';import { ModalShell } from './chunk-K5X2GCXU.js';
+import './chunk-ZCOUPPTI.js';
+import { ovCloneTrigger, OverlayPortal } from './chunk-RCONNA7I.js';
+import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
+import { Presence } from './chunk-356HZMT4.js';
+import './chunk-XWUWYSCT.js';
+import './chunk-YGCVWGUG.js';
+import { useControllable } from './chunk-MMRIQNEN.js';
+import './chunk-S5ZTZANS.js';
+import './chunk-VTJTGVZZ.js';
+import './chunk-QGNC7LH5.js';
+import './modal.css';
+import { useRef, useId, Fragment } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MODAL_TIMING = {
+  open: { duration: "slow", ease: "entrance" },
+  close: { duration: "base", ease: "standard" }
+};
+function Modal({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  trigger = null,
+  dismissible = true,
+  container = null,
+  id,
+  htmlProps,
+  layerProps,
+  animation,
+  children
+}) {
+  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);
+  const triggerRef = useRef(null);
+  const autoId = useId();
+  const panelId = id || "modal-" + autoId;
+  const close = () => setOpen(false);
+  const timings = resolveMotionTiming(animation, MODAL_TIMING);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: "dialog", triggerRef }),
+    /* @__PURE__ */ jsx(OverlayPortal, { container, children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
+      ModalShell,
+      {
+        animate: { opacity: [0, 1], scale: [0.98, 1], timing: timings.open },
+        exit: { opacity: [0], scale: [0.98], timing: timings.close },
+        layerClass: "overlay-layer--modal",
+        panelClass: "overlay-panel--modal",
+        panelId,
+        dismissible,
+        container,
+        requestClose: close,
+        panelProps: htmlProps,
+        layerProps,
+        children
+      },
+      "modal"
+    ) }) })
+  ] });
+}
+
+export { Modal };
+//# sourceMappingURL=modal.js.map
+//# sourceMappingURL=modal.js.map

package/dist/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAYA,IAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA,EAAW;AAAA,EAC3C,KAAA,EAAO,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA;AACnC,CAAA;AAiCO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA,EAAM,cAAA;AAAA,EACN,WAAA,GAAc,KAAA;AAAA,EACd,YAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,WAAA,GAAc,IAAA;AAAA,EACd,SAAA,GAAY,IAAA;AAAA,EACZ,EAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAe;AACb,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,IAAI,eAAA,CAAgB,cAAA,EAAgB,aAAa,YAAY,CAAA;AACjF,EAAA,MAAM,UAAA,GAAa,OAAoB,IAAI,CAAA;AAC3C,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,OAAA,GAAU,MAAM,QAAA,GAAW,MAAA;AACjC,EAAA,MAAM,KAAA,GAAQ,MAAM,OAAA,CAAQ,KAAK,CAAA;AACjC,EAAA,MAAM,OAAA,GAAU,mBAAA,CAAoB,SAAA,EAAW,YAAY,CAAA;AAE3D,EAAA,4BACG,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,cAAA,CAAe,OAAA,EAAS,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA,EAAG,OAAA,EAAS,QAAA,EAAU,QAAA,EAAU,UAAA,EAAY,CAAA;AAAA,oBACxG,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,YACE,QAAA,EAAA,IAAA,oBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAEC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAC,GAAG,CAAC,CAAA,EAAG,KAAA,EAAO,CAAC,IAAA,EAAM,CAAC,CAAA,EAAG,MAAA,EAAQ,QAAQ,IAAA,EAAK;AAAA,QACnE,IAAA,EAAM,EAAE,OAAA,EAAS,CAAC,CAAC,CAAA,EAAG,KAAA,EAAO,CAAC,IAAI,CAAA,EAAG,MAAA,EAAQ,OAAA,CAAQ,KAAA,EAAM;AAAA,QAC3D,UAAA,EAAW,sBAAA;AAAA,QACX,UAAA,EAAW,sBAAA;AAAA,QACX,OAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA;AAAA,QACA,YAAA,EAAc,KAAA;AAAA,QACd,UAAA,EAAY,SAAA;AAAA,QACZ,UAAA;AAAA,QAEC;AAAA,OAAA;AAAA,MAZG;AAAA,OAeV,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"modal.js","sourcesContent":["'use client';\n\nimport './modal.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 type { DataAttributes } from '../../../dom-props';\n\nconst MODAL_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'base', ease: 'standard' },\n} as const;\n\nexport interface ModalProps {\n  /** Controlled open state. Omit to stay uncontrolled. */\n  open?: boolean;\n  /** Initial 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\n  /** Cloned to open the modal on click. */\n  trigger?: ReactElement | null;\n\n  /** Scrim/Esc dismissal. Default true. */\n  dismissible?: boolean;\n\n  /** Mount 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\n  /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */\n  id?: string;\n  /** Standard attributes (className, style, data-*, ...) forwarded to the panel - this is where your paint goes.\n   *  Centered by default; `width: 100%; height: 100%` makes it full-bleed. */\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Standard attributes forwarded to the layer behind the panel - set `--bg-overlay` here to retint the scrim. */\n  layerProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */\n  animation?: DisableableAnimation;\n  /** The ENTIRE surface - paint AND semantics (`role=\"dialog\"`, a label). Nothing is painted for you. */\n  children: ReactNode;\n}\n\nexport function Modal({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = null,\n  dismissible = true,\n  container = null,\n  id,\n  htmlProps,\n  layerProps,\n  animation,\n  children,\n}: ModalProps) {\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const triggerRef = useRef<HTMLElement>(null);\n  const autoId = useId();\n  const panelId = id || 'modal-' + autoId;\n  const close = () => setOpen(false);\n  const timings = resolveMotionTiming(animation, MODAL_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=\"modal\"\n              animate={{ opacity: [0, 1], scale: [0.98, 1], timing: timings.open }}\n              exit={{ opacity: [0], scale: [0.98], timing: timings.close }}\n              layerClass=\"overlay-layer--modal\"\n              panelClass=\"overlay-panel--modal\"\n              panelId={panelId}\n              dismissible={dismissible}\n              container={container}\n              requestClose={close}\n              panelProps={htmlProps}\n              layerProps={layerProps}\n            >\n              {children}\n            </ModalShell>\n          )}\n        </Presence>\n      </OverlayPortal>\n    </Fragment>\n  );\n}\n"]}

package/dist/multi-select.js

@@ -1,6 +1,6 @@
-'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-45XJ75GZ.js';
-import './chunk-EQ32F2QJ.js';
-import './chunk-GY7JOPUQ.js';
+'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-OMHQ4U4J.js';
+import './chunk-62P3KD57.js';
+import './chunk-RCONNA7I.js';
 import './chunk-UE63OOVG.js';
 import './chunk-WM5J5TDI.js';
 import './chunk-NEF5XAHG.js';

package/dist/overlay.css

@@ -8,6 +8,9 @@
   inset: 0;
   display: grid;
 }
+.overlay-layer--scoped {
+  position: absolute;
+}
 .overlay-scrim {
   position: absolute;
   inset: 0;

package/dist/popover.d.ts

@@ -4,6 +4,10 @@ import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
 import { D as DataAttributes } from './dom-props-C0jrllBw.js';
 import './motion-scale-Canq4stZ.js';
 
+interface VirtualAnchor {
+    getBoundingClientRect(): DOMRect;
+}
+
 interface PopoverProps {
     /** Controlled open state. Omit to stay uncontrolled. */
     open?: boolean;
@@ -11,8 +15,11 @@ interface PopoverProps {
     defaultOpen?: boolean;
     /** Fires whenever the open state changes. Pair with `open` for controlled use. */
     onOpenChange?: (open: boolean) => void;
-    /** Cloned to toggle the panel; required as the anchor. */
+    /** Cloned to toggle the panel, and used as the anchor unless `anchor` is set. */
     trigger?: ReactElement | null;
+    /** Anchor to an arbitrary rect instead of the trigger - any `{ getBoundingClientRect() }`, which an element also satisfies.
+     *  Drive `open` yourself; pass a new object to re-place a moving anchor. */
+    anchor?: VirtualAnchor | null;
     /** Preferred side; flips to the opposite side when cramped. Default 'bottom'. */
     side?: 'top' | 'bottom' | 'left' | 'right';
     /** Cross-axis alignment against the trigger. Default 'start'. */
@@ -30,6 +37,6 @@ interface PopoverProps {
     /** The ENTIRE surface - paint AND semantics. Drive dismissal with `open`/`onOpenChange`. */
     children: ReactNode;
 }
-declare function Popover({ open: controlledOpen, defaultOpen, onOpenChange, trigger, side, align, arrow, dismissible, id, htmlProps, animation, children, }: PopoverProps): react.JSX.Element;
+declare function Popover({ open: controlledOpen, defaultOpen, onOpenChange, trigger, anchor, side, align, arrow, dismissible, id, htmlProps, animation, children, }: PopoverProps): react.JSX.Element;
 
-export { Popover, type PopoverProps };
+export { Popover, type PopoverProps, type VirtualAnchor };

package/dist/popover.js

@@ -1,7 +1,7 @@
-'use client';export { Popover } from './chunk-W5YM2FV4.js';
-import './chunk-EQ32F2QJ.js';
-import './chunk-LDC3RIYA.js';
-import './chunk-GY7JOPUQ.js';
+'use client';export { Popover } from './chunk-FTOAUJL5.js';
+import './chunk-62P3KD57.js';
+import './chunk-ZCOUPPTI.js';
+import './chunk-RCONNA7I.js';
 import './chunk-UE63OOVG.js';
 import './chunk-NEF5XAHG.js';
 import './chunk-356HZMT4.js';

package/dist/select.js

@@ -1,6 +1,6 @@
-'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-45XJ75GZ.js';
-import './chunk-EQ32F2QJ.js';
-import './chunk-GY7JOPUQ.js';
+'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-OMHQ4U4J.js';
+import './chunk-62P3KD57.js';
+import './chunk-RCONNA7I.js';
 import './chunk-UE63OOVG.js';
 import './chunk-WM5J5TDI.js';
 import './chunk-NEF5XAHG.js';

package/dist/sheet.d.ts

@@ -17,6 +17,9 @@ interface SheetProps {
     side?: 'right' | 'bottom';
     /** Scrim/Esc dismissal + drag-to-edge. Default true. */
     dismissible?: boolean;
+    /** Dock inside this element instead of the viewport - it must be positioned (`position: relative` or similar).
+     *  Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */
+    container?: HTMLElement | null;
     /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */
     id?: string;
     /** Standard attributes (className, style, data-*, ...) forwarded to the sheet panel. */
@@ -26,6 +29,6 @@ interface SheetProps {
     /** The ENTIRE surface - paint AND semantics. Drive dismissal with `open`/`onOpenChange`. */
     children: ReactNode;
 }
-declare function Sheet({ open: controlledOpen, defaultOpen, onOpenChange, trigger, side, dismissible, id, htmlProps, animation, children, }: SheetProps): react.JSX.Element;
+declare function Sheet({ open: controlledOpen, defaultOpen, onOpenChange, trigger, side, dismissible, container, id, htmlProps, animation, children, }: SheetProps): react.JSX.Element;
 
 export { Sheet, type SheetProps };

package/dist/sheet.js

@@ -1,7 +1,7 @@
-'use client';export { Sheet } from './chunk-GLT5IKQY.js';
-import './chunk-FLO4A6BI.js';
-import './chunk-LDC3RIYA.js';
-import './chunk-GY7JOPUQ.js';
+'use client';export { Sheet } from './chunk-UXONUUPI.js';
+import './chunk-K5X2GCXU.js';
+import './chunk-ZCOUPPTI.js';
+import './chunk-RCONNA7I.js';
 import './chunk-NEF5XAHG.js';
 import './chunk-356HZMT4.js';
 import './chunk-XWUWYSCT.js';

package/llms.txt

@@ -169,16 +169,39 @@ Tooltip - @zyncat/ui/tooltip
   <Tooltip content="Save changes" shortcut="⌘S"><Button>Save</Button></Tooltip>
 
 Dialog - @zyncat/ui/dialog
-  Styled modal: scrim, focus trap, scroll lock. open/onOpenChange, tone, icon, title, description, footer: (close) => node.
+  DEFAULT CHOICE for modals - the styled surface: header (icon/title/description/close), scrolling body,
+  footer actions, on top of scrim + focus trap + scroll lock. Reach for Modal only if this chrome is wrong.
+  open/onOpenChange, tone, icon, title, description, footer: (close) => node. Header is omitted entirely
+  when there is no icon/title/description and dismissible={false}.
+  container mounts it inside a positioned element instead of the viewport; scrim, scroll lock and
+  inert then scope to that box and the rest of the page stays live.
   <Dialog open={o} onOpenChange={setO} tone="danger" title="Delete this project?" footer={(close) => <>...</>}>...</Dialog>
 
+Modal - @zyncat/ui/modal
+  The SAME modality as Dialog (scrim, focus trap, scroll lock, inert, Esc, motion) with ZERO paint - no
+  header, no body padding, no width cap, no border/radius/shadow. You supply the whole surface AND its
+  semantics (role="dialog" + a label).
+  Use it ONLY when Dialog's chrome is the problem: lightbox / image viewer, full-bleed media, video,
+  a custom layout that owns its own edges. If the content is a title + text + buttons, use Dialog instead.
+  htmlProps paints the panel (centered by default; width+height 100% = full-bleed), layerProps reaches the
+  box behind it (set --bg-overlay to retint the scrim). Also takes trigger, dismissible, container, animation.
+  <Modal open={!!src} onOpenChange={() => setSrc(null)} htmlProps={{ className: 'lightbox' }} layerProps={{ style: { '--bg-overlay': 'rgb(0 0 0 / 0.92)' } }}>
+    <div role="dialog" aria-label="Image viewer"><img src={src} alt="" /></div>
+  </Modal>
+
 Popover - @zyncat/ui/popover
-  Headless anchored panel, non-modal. side, align, arrow, trigger (node), asChild; children: ({ close }) => node.
-  <Popover side="bottom" align="start" trigger={<Button>Actions</Button>}>{({ close }) => <menu>...</menu>}</Popover>
+  Headless anchored panel, non-modal. side, align, arrow, trigger (node), dismissible.
+  Anchor without a trigger: pass anchor - anything with getBoundingClientRect (a DOMRect source, an
+  element) - and drive open yourself. Pass a new object to re-place a moving anchor.
+  <Popover side="bottom" align="start" trigger={<Button>Actions</Button>}><menu>...</menu></Popover>
+  <Popover open={!!spot} onOpenChange={dismiss} anchor={spot} side="right"><menu>...</menu></Popover>
 
 Sheet - @zyncat/ui/sheet
-  Edge-docked modal panel, drag-to-dismiss. side right|bottom, trigger (node), asChild; children: ({ close }) => node.
-  <Sheet side="right" trigger={<Button>Filters</Button>}>{({ close }) => <div role="dialog">...</div>}</Sheet>
+  Edge-docked modal panel, drag-to-dismiss. side right|bottom, trigger (node), dismissible.
+  container docks it inside a positioned element instead of the viewport; scrim, scroll lock and
+  inert then scope to that box and the rest of the page stays live.
+  <Sheet side="right" trigger={<Button>Filters</Button>}><div role="dialog">...</div></Sheet>
+  <Sheet side="bottom" container={panel} open={o} onOpenChange={setO}><div role="dialog">...</div></Sheet>
 
 ============================================================ DEV TOOLS
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zyncat/ui",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "A React 19 design system: accessible, animated UI components built on a small, closed CSS design-token vocabulary. No Tailwind, no CSS-in-JS.",
   "keywords": [
     "react",
@@ -181,6 +181,11 @@
       "types": "./dist/dialog.d.ts",
       "import": "./dist/dialog.js"
     },
+    "./modal": {
+      "source": "./src/components/composites/modal/Modal.tsx",
+      "types": "./dist/modal.d.ts",
+      "import": "./dist/modal.js"
+    },
     "./tooltip": {
       "source": "./src/components/composites/tooltip/Tooltip.tsx",
       "types": "./dist/tooltip.d.ts",
@@ -247,7 +252,7 @@
     "typescript": "~6.0.3"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "NODE_OPTIONS=--max-old-space-size=8192 tsup",
     "typecheck": "tsc --noEmit && tsc -p tsconfig.node.json",
     "check:css": "node scripts/check-css-graph.mjs",
     "check:llms": "node scripts/check-llms.mjs",