@oddkin/components 0.0.0-stage → 1.0.0-beta.0

package/dist/dialog/dialog.d.ts

@@ -0,0 +1,68 @@
+import { OddkinElement } from '@oddkin/core/element';
+import { type Readable } from '@oddkin/core/reactive';
+import type { Scope } from '@oddkin/core/scope';
+export declare const DIALOG_STRINGS: {
+    close: string;
+};
+declare const OddkinDialog_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly alert: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly closedBy: import("@oddkin/core/element").PropDefinition<"any" | "closerequest" | "none">;
+    readonly noClose: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly open: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        close: string;
+    }> | undefined>;
+}>;
+/**
+ * A modal dialog: a native `<dialog>` shown modally, so the rest of the page is inert until it
+ * closes. Escape closes it unless `closedby="none"`; with `closedby="any"`, so does a press
+ * on the backdrop. A `<form method="dialog">` inside closes it with the value of the button that
+ * submitted it.
+ *
+ * @slot - The body.
+ * @slot header - Under the title: a subtitle or a status.
+ * @slot footer - The actions, at the inline end.
+ * @csspart dialog - The `<dialog>` surface.
+ * @csspart header - The title, the header slot, and the close button.
+ * @csspart title - The title.
+ * @csspart body - The body.
+ * @csspart footer - The actions, under a divider; hidden while the slot is empty.
+ * @csspart close - The close button.
+ * @cssprop --odd-dialog-inline-size - Its width, within the viewport.
+ * @a11y A `dialog`, or an `alertdialog` with `alert`, named by `label` (the title); an alert dialog is also described by its body. Opening it moves focus to the slotted element with `autofocus`, else the first control in the body or footer, else the close button. Everything outside is inert while it is open. Closing it returns focus to the element that had it when it opened. The close button is named by `strings.close`.
+ * @keyboard Tab and Shift+Tab move through its controls only. Escape closes it unless `closedby="none"`.
+ * @previewRole dialog
+ * @previewRole alertDialog
+ * @useFor A task or decision that must be finished or dismissed before going on: a short form, a confirmation, a destructive action.
+ * @notFor Extra detail next to its trigger (use odd-popover); a panel beside the page (use odd-drawer); a passing confirmation (use odd-toast).
+ * @category Overlays
+ * @customization 1 2 3
+ */
+export declare class OddkinDialog extends OddkinDialog_base {
+    #private;
+    /** @internal The built-in text with the author's overrides. */
+    readonly _strings: Readable<typeof DIALOG_STRINGS>;
+    /** @internal True while the footer slot has content; read by the template. */
+    readonly _hasFooter: import("@oddkin/core/reactive").Signal<boolean>;
+    /** @internal Slot change handler used by the template. */
+    readonly _onSlotChange: (event: Event) => void;
+    /** The `close()` argument, or the value of the button that submitted its form. */
+    get returnValue(): string;
+    set returnValue(value: string);
+    /** Opens it. */
+    show(): void;
+    /** Closes it; `returnValue` becomes the argument when there is one. */
+    close(returnValue?: string): void;
+    /** Whether it opens modally; read at each opening. odd-drawer overrides it. */
+    protected _modal(): boolean;
+    protected mounted(scope: Scope): void;
+    protected updated(changes: ReadonlyMap<string, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-dialog': OddkinDialog;
+    }
+}
+export {};
+//# sourceMappingURL=dialog.d.ts.map

package/dist/dialog/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAQ,MAAM,sBAAsB,CAAC;AAE3D,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAGhD,eAAO,MAAM,cAAc;IACzB,KAAK;CACN,CAAC;;;;;;;;;;;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,YAAa,SAAQ,iBAmBhC;;IAGA,+DAA+D;IAC/D,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,cAAc,CAAC,CAEhD;IAEF,8EAA8E;IAC9E,QAAQ,CAAC,UAAU,kDAAiB;IAEpC,0DAA0D;IAC1D,QAAQ,CAAC,aAAa,UAAW,KAAK,KAAG,IAAI,CAK3C;IAEF,kFAAkF;IAClF,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,EAE5B;IAED,gBAAgB;IAChB,IAAI,IAAI,IAAI,CAEX;IAED,uEAAuE;IACvE,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAEhC;IAED,+EAA+E;IAC/E,SAAS,CAAC,MAAM,IAAI,OAAO,CAE1B;IAiBD,UAAmB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAE7C;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAItE;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,YAAY,CAAC;KAC5B;CACF"}

package/dist/dialog/dialog.define.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="dialog.d.ts" preserve="true" />
+export {};
+//# sourceMappingURL=dialog.define.d.ts.map

package/dist/dialog/dialog.define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.define.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.define.ts"],"names":[],"mappings":""}

package/dist/dialog/dialog.define.js

@@ -0,0 +1,5 @@
+/// <reference path="./dialog.ts" preserve="true" />
+import { define } from '@oddkin/core/element';
+import { dialogDefinition } from './dialog.definition.js';
+define(dialogDefinition);
+//# sourceMappingURL=dialog.define.js.map

package/dist/dialog/dialog.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.define.js","sourceRoot":"","sources":["../../src/dialog/dialog.define.ts"],"names":[],"mappings":"AAAA,oDAAoD;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,CAAC,gBAAgB,CAAC,CAAC"}

package/dist/dialog/dialog.definition.d.ts

@@ -0,0 +1,3 @@
+import { OddkinDialog } from './dialog.js';
+export declare const dialogDefinition: import("@oddkin/core/element").ElementDefinition<OddkinDialog>;
+//# sourceMappingURL=dialog.definition.d.ts.map

package/dist/dialog/dialog.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.definition.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.definition.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK3C,eAAO,MAAM,gBAAgB,gEAa3B,CAAC"}

package/dist/dialog/dialog.definition.js

@@ -0,0 +1,25 @@
+import { compose } from '@oddkin/core/element';
+import { overlaySurfaceStructuralStyles } from '../styles/overlay-surface.structural.styles.js';
+import { glyphStyles } from '../styles/glyphs.js';
+import { focusRingStyles } from '../styles/focus-ring.styles.js';
+import { overlaySurfaceStyles } from '../styles/overlay-surface.styles.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { OddkinDialog } from './dialog.js';
+import { dialogStructuralStyles } from './dialog.structural.styles.js';
+import { dialogStyles } from './dialog.styles.js';
+import { dialogTemplate } from './dialog.template.js';
+export const dialogDefinition = compose({
+    name: 'odd-dialog',
+    element: OddkinDialog,
+    template: dialogTemplate,
+    styles: [
+        hostStyles,
+        dialogStructuralStyles,
+        overlaySurfaceStructuralStyles,
+        glyphStyles,
+        focusRingStyles,
+        overlaySurfaceStyles,
+        dialogStyles,
+    ],
+});
+//# sourceMappingURL=dialog.definition.js.map

package/dist/dialog/dialog.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.definition.js","sourceRoot":"","sources":["../../src/dialog/dialog.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,8BAA8B,EAAE,MAAM,gDAAgD,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACtC,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,YAAY;IACrB,QAAQ,EAAE,cAAc;IACxB,MAAM,EAAE;QACN,UAAU;QACV,sBAAsB;QACtB,8BAA8B;QAC9B,WAAW;QACX,eAAe;QACf,oBAAoB;QACpB,YAAY;KACb;CACF,CAAC,CAAC"}

package/dist/dialog/dialog.js

@@ -0,0 +1,108 @@
+import { OddkinElement, prop } from '@oddkin/core/element';
+import { strings } from '@oddkin/core/i18n';
+import { computed, signal } from '@oddkin/core/reactive';
+import { ModalDialog } from '../overlay/dialog.js';
+export const DIALOG_STRINGS = {
+    close: 'Close',
+};
+/**
+ * A modal dialog: a native `<dialog>` shown modally, so the rest of the page is inert until it
+ * closes. Escape closes it unless `closedby="none"`; with `closedby="any"`, so does a press
+ * on the backdrop. A `<form method="dialog">` inside closes it with the value of the button that
+ * submitted it.
+ *
+ * @slot - The body.
+ * @slot header - Under the title: a subtitle or a status.
+ * @slot footer - The actions, at the inline end.
+ * @csspart dialog - The `<dialog>` surface.
+ * @csspart header - The title, the header slot, and the close button.
+ * @csspart title - The title.
+ * @csspart body - The body.
+ * @csspart footer - The actions, under a divider; hidden while the slot is empty.
+ * @csspart close - The close button.
+ * @cssprop --odd-dialog-inline-size - Its width, within the viewport.
+ * @a11y A `dialog`, or an `alertdialog` with `alert`, named by `label` (the title); an alert dialog is also described by its body. Opening it moves focus to the slotted element with `autofocus`, else the first control in the body or footer, else the close button. Everything outside is inert while it is open. Closing it returns focus to the element that had it when it opened. The close button is named by `strings.close`.
+ * @keyboard Tab and Shift+Tab move through its controls only. Escape closes it unless `closedby="none"`.
+ * @previewRole dialog
+ * @previewRole alertDialog
+ * @useFor A task or decision that must be finished or dismissed before going on: a short form, a confirmation, a destructive action.
+ * @notFor Extra detail next to its trigger (use odd-popover); a panel beside the page (use odd-drawer); a passing confirmation (use odd-toast).
+ * @category Overlays
+ * @customization 1 2 3
+ */
+export class OddkinDialog extends OddkinElement.with({
+    label: prop.string({ default: '', description: 'The title, which names the dialog. Required.' }),
+    alert: prop.boolean({
+        description: 'Makes it an alert dialog: an urgent message that needs a response, such as confirming that something is deleted. Its body describes it.',
+    }),
+    closedBy: prop.enum(['closerequest', 'any', 'none'], {
+        attribute: 'closedby',
+        default: 'closerequest',
+        description: 'What closes it besides its controls: Escape (`closerequest`), also a press on the backdrop (`any`), or neither (`none`). The browser does it where it can; elsewhere the dialog does.',
+    }),
+    noClose: prop.boolean({
+        description: 'Hides the close button. Keep another way out, such as a Cancel button.',
+    }),
+    open: prop.boolean({ reflect: true, description: 'Whether it is open.' }),
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    #dialog = this.#createDialog();
+    /** @internal The built-in text with the author's overrides. */
+    _strings = computed(() => strings(DIALOG_STRINGS, this.strings));
+    /** @internal True while the footer slot has content; read by the template. */
+    _hasFooter = signal(false);
+    /** @internal Slot change handler used by the template. */
+    _onSlotChange = (event) => {
+        const slot = event.target;
+        this._hasFooter.value = slot
+            .assignedNodes({ flatten: true })
+            .some((node) => node.nodeType === Node.ELEMENT_NODE || !!node.textContent?.trim());
+    };
+    /** The `close()` argument, or the value of the button that submitted its form. */
+    get returnValue() {
+        return this.#dialog.returnValue;
+    }
+    set returnValue(value) {
+        this.#dialog.returnValue = value;
+    }
+    /** Opens it. */
+    show() {
+        this.#dialog.show();
+    }
+    /** Closes it; `returnValue` becomes the argument when there is one. */
+    close(returnValue) {
+        this.#dialog.close(returnValue);
+    }
+    /** Whether it opens modally; read at each opening. odd-drawer overrides it. */
+    _modal() {
+        return true;
+    }
+    #createDialog() {
+        const host = this;
+        return new ModalDialog({
+            host,
+            dialog: () => host.shadowRoot?.querySelector('dialog'),
+            get modal() {
+                return host._modal();
+            },
+            get closedBy() {
+                return host.closedBy;
+            },
+            onToggle: (open) => (host.open = open),
+        });
+    }
+    mounted(scope) {
+        scope.use(this.#dialog);
+    }
+    updated(changes) {
+        if (!changes.has('open'))
+            return;
+        if (this.open)
+            this.#dialog.show();
+        else
+            this.#dialog.close();
+    }
+}
+//# sourceMappingURL=dialog.js.map

package/dist/dialog/dialog.js.map

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

package/dist/dialog/dialog.structural.styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A column of header, body, and footer inside the `<dialog>`: the body scrolls when the dialog
+ * reaches its maximum height (a scroll container's automatic minimum size is zero, so it shrinks),
+ * and the header and footer stay. The browser's rules show and hide the dialog (`display` is set
+ * only while it is open). A form slotted into the footer lays out its actions like direct
+ * children. The divider above the actions is `.footer::before`; in forced colours, which paint
+ * backgrounds as Canvas, it is a border instead. No brand or visual tokens.
+ */
+export declare const dialogStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=dialog.structural.styles.d.ts.map

package/dist/dialog/dialog.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.structural.styles.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,yCAmDlC,CAAC"}

package/dist/dialog/dialog.structural.styles.js

@@ -0,0 +1,62 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * A column of header, body, and footer inside the `<dialog>`: the body scrolls when the dialog
+ * reaches its maximum height (a scroll container's automatic minimum size is zero, so it shrinks),
+ * and the header and footer stay. The browser's rules show and hide the dialog (`display` is set
+ * only while it is open). A form slotted into the footer lays out its actions like direct
+ * children. The divider above the actions is `.footer::before`; in forced colours, which paint
+ * backgrounds as Canvas, it is a border instead. No brand or visual tokens.
+ */
+export const dialogStructuralStyles = css `
+  .dialog {
+    box-sizing: border-box;
+    inline-size: min(var(--odd-dialog-inline-size, 32rem), 100%);
+    overflow-wrap: anywhere;
+  }
+  .dialog[open] {
+    display: flex;
+    flex-direction: column;
+  }
+  .header {
+    display: flex;
+    flex: none;
+    align-items: flex-start;
+  }
+  .heading {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  .title {
+    margin: 0;
+  }
+  .body {
+    flex: 1 1 auto;
+    overflow: auto;
+  }
+  .footer {
+    position: relative;
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+  .footer[hidden] {
+    display: none;
+  }
+  .footer ::slotted(form) {
+    display: contents;
+  }
+  .footer::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+  }
+  @media (forced-colors: active) {
+    .dialog .footer::before {
+      block-size: 0;
+      border-block-start: 1px solid CanvasText;
+    }
+  }
+`;
+//# sourceMappingURL=dialog.structural.styles.js.map

package/dist/dialog/dialog.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.structural.styles.js","sourceRoot":"","sources":["../../src/dialog/dialog.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDxC,CAAC"}

package/dist/dialog/dialog.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Oddkin's default dialog: Figma `dialog` and `alertDialog` (the shared sheet look from the
+ * overlay-surface module, the title in the Card title style, the body in secondary text, and the
+ * actions under a divider in the default border colour). It keeps a margin from every edge of the
+ * viewport, measured with dynamic viewport units so mobile toolbars do not cover it.
+ */
+export declare const dialogStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=dialog.styles.d.ts.map

package/dist/dialog/dialog.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,yCAiCxB,CAAC"}

package/dist/dialog/dialog.styles.js

@@ -0,0 +1,43 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default dialog: Figma `dialog` and `alertDialog` (the shared sheet look from the
+ * overlay-surface module, the title in the Card title style, the body in secondary text, and the
+ * actions under a divider in the default border colour). It keeps a margin from every edge of the
+ * viewport, measured with dynamic viewport units so mobile toolbars do not cover it.
+ */
+export const dialogStyles = css `
+  .dialog {
+    max-inline-size: calc(100% - 2 * ${token('space.md')});
+    max-block-size: calc(100dvh - 2 * ${token('space.md')});
+  }
+  .header {
+    gap: ${token('space.sm')};
+    padding: ${token('space.lg')} ${token('space.lg')} ${token('space.sm')};
+  }
+  .title {
+    color: ${token('color.text.primary')};
+    font-family: ${token('type.title.family')};
+    font-size: ${token('type.title.size')};
+    font-weight: ${token('type.title.weight')};
+    line-height: ${token('type.title.line-height')};
+    letter-spacing: ${token('type.title.letter-spacing')};
+  }
+  .overlay-close {
+    margin-block-start: calc(-1 * ${token('space.xs')});
+    margin-inline-end: calc(-1 * ${token('space.sm')});
+  }
+  .body {
+    padding: 0 ${token('space.lg')} ${token('space.lg')};
+    color: ${token('color.text.secondary')};
+  }
+  .footer {
+    gap: ${token('space.sm')};
+    padding: ${token('space.md')} ${token('space.lg')};
+  }
+  .footer::before {
+    block-size: ${token('border.width.default')};
+    background: ${token('color.border.default')};
+  }
+`;
+//# sourceMappingURL=dialog.styles.js.map

package/dist/dialog/dialog.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;uCAEQ,KAAK,CAAC,UAAU,CAAC;wCAChB,KAAK,CAAC,UAAU,CAAC;;;WAG9C,KAAK,CAAC,UAAU,CAAC;eACb,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC;;;aAG7D,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,mBAAmB,CAAC;iBAC5B,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,mBAAmB,CAAC;mBAC1B,KAAK,CAAC,wBAAwB,CAAC;sBAC5B,KAAK,CAAC,2BAA2B,CAAC;;;oCAGpB,KAAK,CAAC,UAAU,CAAC;mCAClB,KAAK,CAAC,UAAU,CAAC;;;iBAGnC,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC;aAC1C,KAAK,CAAC,sBAAsB,CAAC;;;WAG/B,KAAK,CAAC,UAAU,CAAC;eACb,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC;;;kBAGnC,KAAK,CAAC,sBAAsB,CAAC;kBAC7B,KAAK,CAAC,sBAAsB,CAAC;;CAE9C,CAAC"}

package/dist/dialog/dialog.template.d.ts

@@ -0,0 +1,9 @@
+import type { OddkinDialog } from './dialog.js';
+/**
+ * Anatomy: `part="dialog"`, a native `<dialog>` with the shared sheet look, holds the `header`
+ * (the `title`, the header slot, and, unless `no-close`, the `close` button), the `body` with the
+ * default slot, and the `footer` with the footer slot, hidden while it is empty. The title names
+ * the dialog; the body describes an alert dialog.
+ */
+export declare const dialogTemplate: (dialog: OddkinDialog) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=dialog.template.d.ts.map

package/dist/dialog/dialog.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.template.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,WAAY,YAAY,mDAmBvC,CAAC"}

package/dist/dialog/dialog.template.js

@@ -0,0 +1,28 @@
+import { html } from '@oddkin/core/template';
+import { closeButton } from '../overlay/overlay.js';
+/**
+ * Anatomy: `part="dialog"`, a native `<dialog>` with the shared sheet look, holds the `header`
+ * (the `title`, the header slot, and, unless `no-close`, the `close` button), the `body` with the
+ * default slot, and the `footer` with the footer slot, hidden while it is empty. The title names
+ * the dialog; the body describes an alert dialog.
+ */
+export const dialogTemplate = (dialog) => html `<dialog
+    part="dialog"
+    class="overlay-surface sheet dialog"
+    role=${dialog.alert ? 'alertdialog' : null}
+    aria-labelledby="title"
+    aria-describedby=${dialog.alert ? 'body' : null}
+  >
+    <div part="header" class="header">
+      <div class="heading">
+        <h2 part="title" id="title" class="title">${dialog.label}</h2>
+        <slot name="header"></slot>
+      </div>
+      ${dialog.noClose ? '' : closeButton(dialog._strings.value.close, () => dialog.close())}
+    </div>
+    <div part="body" id="body" class="body"><slot></slot></div>
+    <div part="footer" class="footer" ?hidden=${!dialog._hasFooter.value}>
+      <slot name="footer" @slotchange=${dialog._onSlotChange}></slot>
+    </div>
+  </dialog>`;
+//# sourceMappingURL=dialog.template.js.map

package/dist/dialog/dialog.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAoB,EAAE,EAAE,CACrD,IAAI,CAAA;;;WAGK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI;;uBAEvB,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;;;;oDAIC,MAAM,CAAC,KAAK;;;QAGxD,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;;;gDAG5C,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK;wCAChC,MAAM,CAAC,aAAa;;YAEhD,CAAC"}

package/dist/dialog/foundation.d.ts

@@ -0,0 +1,7 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { overlaySurfaceStructuralStyles } from '../styles/overlay-surface.structural.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { OddkinDialog } from './dialog.js';
+export { dialogTemplate } from './dialog.template.js';
+export { dialogStructuralStyles } from './dialog.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/dialog/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/dialog/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,8BAA8B,EAAE,MAAM,gDAAgD,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/dialog/foundation.js

@@ -0,0 +1,9 @@
+// Skin-free foundation: behavior, anatomy, and structural styles (shared host defaults first).
+// Loads no default visual styles and registers nothing (multi-product.md §4).
+export { hostStyles } from '../styles/host.styles.js';
+export { overlaySurfaceStructuralStyles } from '../styles/overlay-surface.structural.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { OddkinDialog } from './dialog.js';
+export { dialogTemplate } from './dialog.template.js';
+export { dialogStructuralStyles } from './dialog.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/dialog/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/dialog/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,8BAA8B,EAAE,MAAM,gDAAgD,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/dialog/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinDialog } from './dialog.js';
+export { dialogTemplate } from './dialog.template.js';
+export { dialogStructuralStyles } from './dialog.structural.styles.js';
+export { dialogStyles } from './dialog.styles.js';
+export { dialogDefinition } from './dialog.definition.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dialog/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/dialog/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/dialog`.
+export { OddkinDialog } from './dialog.js';
+export { dialogTemplate } from './dialog.template.js';
+export { dialogStructuralStyles } from './dialog.structural.styles.js';
+export { dialogStyles } from './dialog.styles.js';
+export { dialogDefinition } from './dialog.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dialog/index.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/disclosure/disclosure.d.ts

@@ -0,0 +1,57 @@
+import { OddkinElement, type ElementEvents } from '@oddkin/core/element';
+import type { Scope } from '@oddkin/core/scope';
+/** Re-dispatched at the host: the native `toggle` of the inner `<details>` stays in the shadow root. */
+export declare const disclosureToggleEvent: import("@oddkin/core/element").EventDefinition<void>;
+declare const OddkinDisclosure_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly open: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly name: import("@oddkin/core/element").PropDefinition<string>;
+    readonly disabled: import("@oddkin/core/element").PropDefinition<boolean>;
+}>;
+/**
+ * One trigger that shows or hides one related region: a native `<details>` and `<summary>`.
+ * Disclosures that share a `name` in the same tree form an accordion: opening one closes the
+ * others, and adjacent ones draw as one surface.
+ *
+ * @slot - The content shown while open.
+ * @csspart base - The surface.
+ * @csspart summary - The native `<summary>`: the button that opens and closes it.
+ * @csspart label - The summary text.
+ * @csspart marker - The chevron.
+ * @csspart content - The region around the default slot.
+ * @cssprop --odd-disclosure-radius - Corner radius of the surface.
+ * @cssprop --odd-disclosure-background - Background of the surface.
+ * @cssstate joined-start - The previous sibling is a disclosure of the same group; the two share a divider.
+ * @cssstate joined-end - The next sibling is a disclosure of the same group.
+ * @a11y The summary is a native disclosure button named by `label`; its expanded state comes from the platform. Content stays in the light DOM and in reading order, and find-in-page opens a closed disclosure that holds a match. Disabled: the summary leaves the Tab order and reports `aria-disabled`.
+ * @keyboard Tab reaches the summary; Enter or Space opens and closes it.
+ * @previewRole disclosure
+ * @useFor Optional detail, advanced settings, and frequently asked questions (an accordion with `name`).
+ * @notFor Switching between views (use odd-tabs); navigation menus; content everyone needs to read.
+ * @category Navigation
+ * @customization 1 2 3
+ */
+export declare class OddkinDisclosure extends OddkinDisclosure_base {
+    #private;
+    static events: {
+        toggle: import("@oddkin/core/element").EventDefinition<void>;
+    };
+    readonly _events?: ElementEvents<typeof OddkinDisclosure>;
+    /** @internal Summary activation: the host's `open` is the one source of the state. */
+    readonly _onClick: (event: MouseEvent) => void;
+    /**
+     * @internal The inner `<details>` changed. The platform may open it itself (find-in-page), so its
+     * state is taken over; the event is reported at the host, where the native one cannot reach.
+     */
+    readonly _onToggle: (event: ToggleEvent) => void;
+    protected connected(scope: Scope): void;
+    protected updated(changes: ReadonlyMap<string, unknown>): void;
+    protected moved(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-disclosure': OddkinDisclosure;
+    }
+}
+export {};
+//# sourceMappingURL=disclosure.d.ts.map

package/dist/disclosure/disclosure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.d.ts","sourceRoot":"","sources":["../../src/disclosure/disclosure.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAe,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACtF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEhD,wGAAwG;AACxG,eAAO,MAAM,qBAAqB,sDAOhC,CAAC;;;;;;;AAKH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,gBAAiB,SAAQ,qBAgBpC;;IACA,OAAgB,MAAM;QAAK,MAAM;MAA0B;IAC3D,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,gBAAgB,CAAC,CAAC;IAElE,sFAAsF;IACtF,QAAQ,CAAC,QAAQ,UAAW,UAAU,KAAG,IAAI,CAG3C;IAEF;;;OAGG;IACH,QAAQ,CAAC,SAAS,UAAW,WAAW,KAAG,IAAI,CAO7C;IAEF,UAAmB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAS/C;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAStE;IAED,UAAmB,KAAK,IAAI,IAAI,CAE/B;CA0BF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,gBAAgB,CAAC;KACpC;CACF"}

package/dist/disclosure/disclosure.define.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="disclosure.d.ts" preserve="true" />
+export {};
+//# sourceMappingURL=disclosure.define.d.ts.map

package/dist/disclosure/disclosure.define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.define.d.ts","sourceRoot":"","sources":["../../src/disclosure/disclosure.define.ts"],"names":[],"mappings":""}

package/dist/disclosure/disclosure.define.js

@@ -0,0 +1,5 @@
+/// <reference path="./disclosure.ts" preserve="true" />
+import { define } from '@oddkin/core/element';
+import { disclosureDefinition } from './disclosure.definition.js';
+define(disclosureDefinition);
+//# sourceMappingURL=disclosure.define.js.map

package/dist/disclosure/disclosure.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.define.js","sourceRoot":"","sources":["../../src/disclosure/disclosure.define.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,MAAM,CAAC,oBAAoB,CAAC,CAAC"}

package/dist/disclosure/disclosure.definition.d.ts

@@ -0,0 +1,3 @@
+import { OddkinDisclosure } from './disclosure.js';
+export declare const disclosureDefinition: import("@oddkin/core/element").ElementDefinition<OddkinDisclosure>;
+//# sourceMappingURL=disclosure.definition.d.ts.map

package/dist/disclosure/disclosure.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.definition.d.ts","sourceRoot":"","sources":["../../src/disclosure/disclosure.definition.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKnD,eAAO,MAAM,oBAAoB,oEAK/B,CAAC"}

package/dist/disclosure/disclosure.definition.js

@@ -0,0 +1,14 @@
+import { compose } from '@oddkin/core/element';
+import { glyphStyles } from '../styles/glyphs.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { OddkinDisclosure } from './disclosure.js';
+import { disclosureStructuralStyles } from './disclosure.structural.styles.js';
+import { disclosureStyles } from './disclosure.styles.js';
+import { disclosureTemplate } from './disclosure.template.js';
+export const disclosureDefinition = compose({
+    name: 'odd-disclosure',
+    element: OddkinDisclosure,
+    template: disclosureTemplate,
+    styles: [hostStyles, disclosureStructuralStyles, glyphStyles, disclosureStyles],
+});
+//# sourceMappingURL=disclosure.definition.js.map

package/dist/disclosure/disclosure.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.definition.js","sourceRoot":"","sources":["../../src/disclosure/disclosure.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,OAAO,CAAC;IAC1C,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,gBAAgB;IACzB,QAAQ,EAAE,kBAAkB;IAC5B,MAAM,EAAE,CAAC,UAAU,EAAE,0BAA0B,EAAE,WAAW,EAAE,gBAAgB,CAAC;CAChF,CAAC,CAAC"}