@fairgarden/design 0.1.0-alpha.0

package/components/Dialog/Dialog.d.ts

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type ButtonProps } from '../Button';
+import { type FieldPreset } from '../../utils/scope';
+export declare const dialog: (props?: ({
+    wide?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The Backdrop part: colorless by default; `covered` is the opaque solid cover (from --md-n-above). */
+export declare const dialogBackdrop: (props?: ({
+    covered?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type DialogVariants = VariantProps<typeof dialog>;
+/** Props for Dialog: Base UI Dialog.Root props (`open`, `onOpenChange`, `modal` …). */
+export type DialogProps<Payload = unknown> = BaseDialog.Root.Props<Payload>;
+/**
+ * Groups the parts of a dialog (Base UI Dialog.Root). Modal by default: the
+ * page stays visible, inert and scroll-locked, never dimmed [D24 → D121].
+ */
+export declare function Dialog<Payload = unknown>(props: DialogProps<Payload>): React.JSX.Element;
+/** Props for DialogTrigger: Button props plus Base UI's trigger `handle` and `payload`. */
+export type DialogTriggerProps = ButtonProps & {
+    /** Associates a detached trigger with a Dialog created by `Dialog.createHandle`. */
+    handle?: BaseDialog.Trigger.Props['handle'];
+    /** A payload handed to the Dialog's children function when this trigger opens it. */
+    payload?: unknown;
+};
+/** Opens the dialog. Renders a Button (§9.2); author its label in title case [D160]. */
+export declare function DialogTrigger(props: DialogTriggerProps): React.JSX.Element;
+/** Props for DialogPopup: Base UI Dialog.Popup props plus the panel axes, the cover and the portal options. */
+export type DialogPopupProps = BaseDialog.Popup.Props & {
+    /** `true`: the detail-view width, --ds-measure-reading, from --md-n-above. Default `false`. */
+    wide?: DialogVariants['wide'];
+    /**
+     * Primary Radix scale inside the panel's `white` scope: text, frame and
+     * rules. Omitted, the white preset's default; never the trigger's [D133].
+     */
+    primary?: DialogVariants['primary'];
+    /** Secondary Radix scale inside the panel: accents only. Omitted, the white preset's default. */
+    secondary?: DialogVariants['secondary'];
+    /**
+     * The optional solid cover, from --md-n-above: the page ground's
+     * companion field [D177] (paper, white, meadow and pollen → `forest`;
+     * tide and heather → `royal`; apricot and rose → `brick`; see
+     * `companionField` from Ground). It renders as a `kind="field"` Ground of
+     * that preset at full-viewport geometry with no edge, fully opaque,
+     * hiding the page [D88 → D121]. Omitted (default), no backdrop is painted.
+     */
+    cover?: FieldPreset;
+    /** The element the portal renders into. Default: `document.body`. */
+    container?: BaseDialog.Portal.Props['container'];
+    /** Keeps the portal mounted while closed. */
+    keepMounted?: boolean;
+};
+/**
+ * The modal panel, rendered in its Base UI Portal as a nested `white` scope
+ * with the --ds-stroke-3 --primary12 frame. Below --md-n-above it is a
+ * full-screen opaque sheet; from --md-n-above it is centered, at least
+ * --ds-space-40 from every edge. It opens instantly or with a clip reveal,
+ * never a fade. Compose `DialogTopBar` (eyebrow, title, close), `DialogBody`
+ * and `DialogActions` inside it.
+ *
+ * Focus moves to the first field in the body, else to Base UI's default
+ * (the first tabbable element); pass `initialFocus` to override.
+ */
+export declare function DialogPopup(props: DialogPopupProps): React.JSX.Element;
+/** Props for DialogTopBar: `div` props and `render`. */
+export type DialogTopBarProps = useRender.ComponentProps<'div'>;
+/**
+ * The titled top bar: an optional `DialogEyebrow`, the `DialogTitle` and the
+ * `DialogClose` X. At least --ds-size-control-xl tall; on the sheet a
+ * --ds-stroke-3 --primary12 rule runs under it.
+ */
+export declare function DialogTopBar(props: DialogTopBarProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for DialogEyebrow: `p` props and `render`. */
+export type DialogEyebrowProps = useRender.ComponentProps<'p'>;
+/** An optional eyebrow above the title, in tracked caps (`type-eyebrow`); dropped below 360 px. */
+export declare function DialogEyebrow(props: DialogEyebrowProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for DialogTitle: Base UI Dialog.Title props. */
+export type DialogTitleProps = BaseDialog.Title.Props;
+/**
+ * The dialog's title and accessible name (Base UI Dialog.Title, an `h2`),
+ * in `type-itemhead`. Every dialog has one.
+ */
+export declare function DialogTitle(props: DialogTitleProps): React.JSX.Element;
+/** Props for DialogDescription: Base UI Dialog.Description props. */
+export type DialogDescriptionProps = BaseDialog.Description.Props;
+/** The dialog's description (Base UI Dialog.Description), in `type-body-ui` --primary12. */
+export declare function DialogDescription(props: DialogDescriptionProps): React.JSX.Element;
+/** Props for DialogClose: Base UI Dialog.Close props plus the X's accessible name. */
+export type DialogCloseProps = BaseDialog.Close.Props & {
+    /** The close X's accessible name, visually hidden. Default "Close". */
+    label?: string;
+};
+/**
+ * Closes the dialog. By default the top bar's X: an icon-only Button with
+ * the inline-tier `close` glyph and a --ds-size-hit target (§9.2). Pass
+ * `render` (for example `<Button variant="outline">Cancel</Button>`) to
+ * close from an action instead; `label` is then ignored.
+ */
+export declare function DialogClose(props: DialogCloseProps): React.JSX.Element;
+/** Props for DialogBody: `div` props and `render`. */
+export type DialogBodyProps = useRender.ComponentProps<'div'>;
+/**
+ * The scrolling body: description and content. While content is hidden
+ * above or below, a --border-size-2 --role-rule edge shows under the top
+ * bar or above the action bar (the §10.19 overflow edge), never a fade.
+ */
+export declare function DialogBody(props: DialogBodyProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for DialogActions: `div` props and `render`. */
+export type DialogActionsProps = useRender.ComponentProps<'div'>;
+/**
+ * The action bar: a `solid` Button first, then its outline twin, each
+ * hugging its label. Stacked and docked at the bottom of the sheet below
+ * --md-n-above; one row from it [D106].
+ */
+export declare function DialogActions(props: DialogActionsProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Dialog.d.ts.map

package/components/Dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}

package/components/Dialog/Dialog.js

@@ -0,0 +1,240 @@
+'use client';
+import * as React from 'react';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Button } from '../Button';
+import { Ground } from '../Ground';
+import { cx, resolveClassName } from '../../utils/className';
+import { OverlayScope, overlayActionClassName, overlayAttributes, overlayScales, } from '../../utils/overlay';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { GroundContext, rootScope } from '../../utils/scope';
+import styles from './dialog.module.css';
+/*
+ * Dialog (§10.14): a focused sub-task in a modal panel.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: dialog.module.css; CVA functions `dialog` (the popup panel) and
+ *   `dialogBackdrop` (the optional solid cover). Alert Dialog composes this
+ *   panel and adds its glyph (alert-dialog.module.css).
+ * - Axes: `wide` → `wide` (width --ds-measure-reading from --md-n-above);
+ *   `primary`, `secondary` → scales module classes, applied inside the
+ *   panel's scope. `dialogBackdrop`: `covered` → `covered`.
+ * - Compound variants: none. Defaults: `wide: false`; color axes: none.
+ * - Color fallback: the panel takes the `white` preset's defaults; explicit
+ *   props apply inside it. Actions are §9.2 Buttons.
+ * - States: Popup data-starting-style / data-ending-style → the clip reveal,
+ *   instant under --motionNotOK [D91]; data-nested-dialog-open → the lower
+ *   dialog stays visible, framed and inert, never dimmed; body
+ *   data-overflow-y-start / -end (the §10.19 Scroll Area names, set here)
+ *   → the scroll-edge rules; Close is an icon-only Button (§9.2 states).
+ * - Parts: base, topBar, eyebrow, title, close, body, description, actions,
+ *   backdrop.
+ * - Scope: the popup renders in its Base UI Portal as a nested `white`
+ *   scope (`page` scheme, no data-theme) with the --ds-stroke-3 --primary12
+ *   frame [D92, D139, D156]. The cover renders as a `kind="field"` Ground
+ *   of the page ground's companion field, which writes its own data-theme
+ *   [D148, D177, D178].
+ * - Container: none; the dialog is page frame and uses the viewport media:
+ *   a full-screen sheet below --md-n-above, centered from it [D121].
+ */
+export const dialog = cva(styles.base, {
+    variants: {
+        wide: {
+            true: styles.wide,
+        },
+        // Color axes: never defaulted [D133]; DialogPopup computes the overlay preset's defaults.
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        wide: false,
+    },
+});
+/** The Backdrop part: colorless by default; `covered` is the opaque solid cover (from --md-n-above). */
+export const dialogBackdrop = cva(styles.backdrop, {
+    variants: {
+        covered: {
+            true: styles.covered,
+        },
+    },
+    defaultVariants: {
+        covered: false,
+    },
+});
+/**
+ * Groups the parts of a dialog (Base UI Dialog.Root). Modal by default: the
+ * page stays visible, inert and scroll-locked, never dimmed [D24 → D121].
+ */
+export function Dialog(props) {
+    return React.createElement(BaseDialog.Root, { ...props });
+}
+/** Opens the dialog. Renders a Button (§9.2); author its label in title case [D160]. */
+export function DialogTrigger(props) {
+    const { handle, payload, ...buttonProps } = props;
+    return (React.createElement(BaseDialog.Trigger, { handle: handle, payload: payload, render: React.createElement(Button, { ...buttonProps }) }));
+}
+/** Where focus lands on open: the first field in the body, else Base UI's default [§10.14 States]. */
+const fieldSelector = [
+    'input:not([type="hidden"]):not(:disabled)',
+    'select:not(:disabled)',
+    'textarea:not(:disabled)',
+    '[role="combobox"]:not([aria-disabled="true"])',
+    '[role="textbox"]',
+    '[contenteditable="true"]',
+].join(',');
+const DialogContext = React.createContext(null);
+/**
+ * The modal panel, rendered in its Base UI Portal as a nested `white` scope
+ * with the --ds-stroke-3 --primary12 frame. Below --md-n-above it is a
+ * full-screen opaque sheet; from --md-n-above it is centered, at least
+ * --ds-space-40 from every edge. It opens instantly or with a clip reveal,
+ * never a fade. Compose `DialogTopBar` (eyebrow, title, close), `DialogBody`
+ * and `DialogActions` inside it.
+ *
+ * Focus moves to the first field in the body, else to Base UI's default
+ * (the first tabbable element); pass `initialFocus` to override.
+ */
+export function DialogPopup(props) {
+    const { wide, primary, secondary, cover, container, keepMounted, className, initialFocus, children, ...rest } = props;
+    const bodyRef = React.useRef(null);
+    const context = React.useMemo(() => ({ bodyRef }), []);
+    const scales = overlayScales(primary, secondary);
+    const focusFirstField = React.useCallback((interaction) => {
+        // Opened by touch: Base UI focuses the popup so no keyboard opens.
+        if (interaction === 'touch')
+            return true;
+        return bodyRef.current?.querySelector(fieldSelector) ?? true;
+    }, []);
+    return (React.createElement(BaseDialog.Portal, { container: container, keepMounted: keepMounted },
+        cover ? React.createElement(DialogCover, { preset: cover }) : null,
+        React.createElement(BaseDialog.Popup, { ...rest, ...overlayAttributes, initialFocus: initialFocus ?? focusFirstField, className: resolveClassName(className, (extra) => dialog({
+                wide,
+                primary: scales.primary,
+                secondary: scales.secondary,
+                className: cx(overlayActionClassName, extra),
+            })) },
+            React.createElement(DialogContext.Provider, { value: context },
+                React.createElement(OverlayScope, null, children)))));
+}
+/**
+ * The solid cover: the Backdrop rendered as a `kind="field"` Ground of the
+ * companion field [D177, D178]. Ground writes the field's fixed mode; the
+ * Dialog writes no data-theme, and its `covered` class replaces the field's
+ * inset geometry and edge with the full viewport. Base UI renders it for
+ * the lowest dialog only, so an Alert over a Dialog never adds a second
+ * cover.
+ */
+function DialogCover({ preset }) {
+    return (React.createElement(GroundContext.Provider, { value: rootScope },
+        React.createElement(BaseDialog.Backdrop, { className: dialogBackdrop({ covered: true }), render: React.createElement(Ground, { kind: "field", preset: preset, render: React.createElement("div", null) }) })));
+}
+/**
+ * The titled top bar: an optional `DialogEyebrow`, the `DialogTitle` and the
+ * `DialogClose` X. At least --ds-size-control-xl tall; on the sheet a
+ * --ds-stroke-3 --primary12 rule runs under it.
+ */
+export function DialogTopBar(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.topBar, className) }, rest),
+    });
+}
+/** An optional eyebrow above the title, in tracked caps (`type-eyebrow`); dropped below 360 px. */
+export function DialogEyebrow(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.eyebrow, className) }, rest),
+    });
+}
+/**
+ * The dialog's title and accessible name (Base UI Dialog.Title, an `h2`),
+ * in `type-itemhead`. Every dialog has one.
+ */
+export function DialogTitle(props) {
+    const { className, ...rest } = props;
+    return (React.createElement(BaseDialog.Title, { ...rest, className: resolveClassName(className, (extra) => cx(styles.title, extra)) }));
+}
+/** The dialog's description (Base UI Dialog.Description), in `type-body-ui` --primary12. */
+export function DialogDescription(props) {
+    const { className, ...rest } = props;
+    return (React.createElement(BaseDialog.Description, { ...rest, className: resolveClassName(className, (extra) => cx(styles.description, extra)) }));
+}
+/**
+ * Closes the dialog. By default the top bar's X: an icon-only Button with
+ * the inline-tier `close` glyph and a --ds-size-hit target (§9.2). Pass
+ * `render` (for example `<Button variant="outline">Cancel</Button>`) to
+ * close from an action instead; `label` is then ignored.
+ */
+export function DialogClose(props) {
+    const { label = 'Close', render, className, children, ...rest } = props;
+    if (render) {
+        return (React.createElement(BaseDialog.Close, { ...rest, className: className, render: render }, children));
+    }
+    return (React.createElement(BaseDialog.Close, { ...rest, className: resolveClassName(className, (extra) => cx(styles.close, extra)), render: React.createElement(Button, { variant: "outline", iconOnly: true, icon: "close" }, label) }));
+}
+/**
+ * The scrolling body: description and content. While content is hidden
+ * above or below, a --border-size-2 --role-rule edge shows under the top
+ * bar or above the action bar (the §10.19 overflow edge), never a fade.
+ */
+export function DialogBody(props) {
+    const { render, ref, className, ...rest } = props;
+    const context = React.useContext(DialogContext);
+    const localRef = React.useRef(null);
+    useOverflowEdges(localRef);
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref: context ? [ref ?? null, localRef, context.bodyRef] : [ref ?? null, localRef],
+        props: mergeProps({ className: cx(styles.body, className) }, rest),
+    });
+}
+/**
+ * The action bar: a `solid` Button first, then its outline twin, each
+ * hugging its label. Stacked and docked at the bottom of the sheet below
+ * --md-n-above; one row from it [D106].
+ */
+export function DialogActions(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.actions, className) }, rest),
+    });
+}
+/**
+ * Writes data-overflow-y-start / data-overflow-y-end on a scroll container
+ * while content is hidden in that direction (the §10.19 Scroll Area names).
+ */
+function useOverflowEdges(ref) {
+    React.useEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return undefined;
+        const update = () => {
+            const start = node.scrollTop > 0;
+            const end = node.scrollTop + node.clientHeight < node.scrollHeight - 1;
+            node.toggleAttribute('data-overflow-y-start', start);
+            node.toggleAttribute('data-overflow-y-end', end);
+        };
+        update();
+        node.addEventListener('scroll', update, { passive: true });
+        const observer = new ResizeObserver(update);
+        observer.observe(node);
+        Array.from(node.children).forEach((child) => observer.observe(child));
+        return () => {
+            node.removeEventListener('scroll', update);
+            observer.disconnect();
+        };
+    }, [ref]);
+}
+//# sourceMappingURL=Dialog.js.map

package/components/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}

package/components/Dialog/dialog.module.css

@@ -0,0 +1,257 @@
+/*
+ * Dialog (§10.14). CVA functions `dialog` (the panel) and `dialogBackdrop`
+ * (the optional solid cover) in Dialog.tsx; Alert Dialog composes this panel.
+ * Parts: base (the popup panel), topBar, eyebrow, title, close, body,
+ * description, actions, backdrop.
+ *
+ * The face is the `white` overlay scope's --primary1 and the frame is
+ * --ds-stroke-3 --primary12 in both modes, never --role-rule [D92, D156].
+ * No tinted backdrop: the frame, the titled top bar, the inert page and the
+ * full-screen sheet carry the modal state [D24 → D121]. Below --md-n-above
+ * the panel is a full-screen opaque sheet; from it, centered. Motion is
+ * instant or a clip reveal, never a fade [D91]. Colors are role variables
+ * only; local custom properties carry dimensions only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.base {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.eyebrow {
+  composes: typeEyebrow from '../../utils/type.module.css';
+}
+
+.title {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.description {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* The sheet (base): full screen, opaque, square, no outer frame. */
+  .base {
+    --dialog-inset: var(--size-px-3);
+    --dialog-clip-from: inset(0 0 100% 0);
+
+    position: fixed;
+    inset: 0;
+    z-index: var(--layer-4);
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0 solid var(--primary12);
+    border-radius: var(--ds-radius-none);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    clip-path: inset(0);
+  }
+
+  /* Centered panel: --size-sm wide, at least --ds-space-40 from every edge, framed. */
+  @media (min-width: 768px) {
+    .base {
+      inline-size: min(var(--size-sm), calc(100% - 2 * var(--ds-space-40)));
+      block-size: fit-content;
+      max-block-size: calc(100% - 2 * var(--ds-space-40));
+      margin: auto;
+      border-width: var(--ds-stroke-3);
+      border-radius: var(--ds-radius-8);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .base {
+      --dialog-inset: var(--size-px-7);
+    }
+  }
+
+  /* Top bar: title, optional eyebrow and close; the sheet draws its rule underneath. */
+  .topBar {
+    flex: none;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    column-gap: var(--size-px-3);
+    min-block-size: var(--ds-size-control-xl);
+    padding: var(--dialog-inset);
+    border-block-end: var(--ds-stroke-3) solid var(--primary12);
+  }
+
+  @media (min-width: 768px) {
+    .topBar {
+      border-block-end-width: 0;
+    }
+  }
+
+  .eyebrow {
+    grid-column: 1;
+    color: var(--primary12);
+  }
+
+  /* The title is an item head, not a section head [D60]. */
+  .title {
+    grid-column: 1;
+    color: var(--primary12);
+  }
+
+  .close {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+  }
+
+  /*
+   * Body: scrolls between the bars. Its block edges are the §10.19 overflow
+   * rules, drawn in the face color (invisible, as an edge equal to its fill
+   * is [D12]) until content is hidden in that direction.
+   */
+  .body {
+    flex: 1 1 auto;
+    display: grid;
+    align-content: start;
+    row-gap: var(--size-px-3);
+    min-block-size: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--dialog-inset);
+    border-block: var(--border-size-2) solid var(--primary1);
+    border-block-start-width: 0;
+  }
+
+  @media (min-width: 768px) {
+    .body {
+      padding-block-start: 0;
+      border-block-start-width: var(--border-size-2);
+    }
+  }
+
+  .description {
+    color: var(--primary12);
+  }
+
+  /* Action bar: stacked, solid action first, each hugging its label [D106]; docked at the sheet's foot. */
+  .actions {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ds-space-12);
+    padding: var(--dialog-inset);
+  }
+
+  @media (min-width: 768px) {
+    .actions {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+  }
+
+  /* Stack guard: the eyebrow drops; the action bar already stacks at base [D73]. */
+  @media (max-width: 359.98px) {
+    .eyebrow {
+      display: none;
+    }
+  }
+
+  /* Colorless by default: it only catches outside presses. */
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--layer-4);
+  }
+
+  /* The clip reveal: the edge wipes open from the top [D91]. */
+  @media (prefers-reduced-motion: no-preference) {
+    .base {
+      transition-property: clip-path;
+      transition-duration: var(--ds-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Wide: the detail-view width, --ds-measure-reading, from --md-n-above. */
+  @media (min-width: 768px) {
+    .wide {
+      inline-size: min(var(--ds-measure-reading), calc(100% - 2 * var(--ds-space-40)));
+    }
+  }
+
+  /*
+   * Solid cover [D88 → D121]: a `kind="field"` Ground of the companion field
+   * paints it, fully opaque, at full-viewport geometry with no edge [D177].
+   * Below --md-n-above the sheet already covers the page.
+   */
+  .covered {
+    display: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+  }
+
+  @media (min-width: 768px) {
+    .covered {
+      display: block;
+    }
+  }
+}
+
+@layer states {
+  .base[data-starting-style],
+  .base[data-ending-style] {
+    clip-path: var(--dialog-clip-from);
+  }
+
+  /* Focus parked on the panel itself (opened by touch): the ring sits inside the frame. */
+  .base:focus-visible {
+    outline: var(--ds-focus-width) solid var(--primary12);
+    outline-offset: calc(-2 * var(--ds-focus-width));
+  }
+
+  /* Overflow edges: --border-size-2 --role-rule while content is hidden in that direction (§10.19). */
+  .body[data-overflow-y-start] {
+    border-block-start-color: var(--role-rule);
+  }
+
+  .body[data-overflow-y-end] {
+    border-block-end-color: var(--role-rule);
+  }
+}
+
+@layer print {
+  @media print {
+    /* An open modal prints alone [D174]: every other child of the body drops. */
+    :global(body):has(.base[data-open]) > :not(:has(.base)) {
+      display: none;
+    }
+
+    /* The panel flows at full height; its frame prints through the remap. */
+    .base {
+      position: static;
+      inline-size: auto;
+      block-size: auto;
+      max-block-size: none;
+      margin: 0;
+      clip-path: none;
+    }
+
+    .body {
+      overflow: visible;
+      border-block-width: 0;
+    }
+
+    .backdrop {
+      display: none;
+    }
+  }
+}

package/components/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dialog';
+//# sourceMappingURL=index.d.ts.map

package/components/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/components/Dialog/index.js

@@ -0,0 +1,2 @@
+export * from './Dialog';
+//# sourceMappingURL=index.js.map

package/components/Dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}