@deepfuture/dui-components 1.3.0 → 1.4.1

package/toast/toast-region.js

@@ -0,0 +1,307 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+import { DuiToastRegionPrimitive } from "@deepfuture/dui-primitives/toast";
+import "../_install.js";
+const styles = css `
+  /* ── Region-scoped tokens ──
+  *
+  * Bump the default region width (primitive ships 22rem; 24rem reads
+  * better with action + close affordances).
+  *
+  * Stack-visual knobs (peek, scale falloff, expanded gap) are exposed for
+  * consumer tuning without rewriting the cascade transforms.
+  */
+  :host {
+    --toast-region-width: 24rem;
+    --toast-stack-peek: var(--space-3_5);
+    --toast-stack-scale-step: 0.05;
+    --toast-expanded-gap: var(--space-2);
+  }
+
+  /* ── theme="light|dark" overrides ──
+  *
+  * Re-declare the four Layer-1 primitives AND every Layer-2 derivation on
+  * the host. Custom-property var() references resolve at the *declaring*
+  * element's scope, so the recipes in tokens.css (declared on :root) bake
+  * in :root's --background/--foreground at definition time. Descendants
+  * inherit the already-resolved values, not the recipes themselves. To
+  * make scoped theme overrides actually work we re-declare the recipes
+  * here so they resolve against the host's overridden Layer-1 values.
+  *
+  * If other components want scoped theme overrides later, we promote this
+  * to tokens.css (selectors that match :root[data-theme] AND nested
+  * [data-theme]).
+  */
+  :host([data-theme="light"]) {
+    --background: oklch(0.97 0 0);
+    --foreground: oklch(0.15 0 0);
+    --accent: oklch(0.55 0.25 260);
+    --destructive: oklch(0.55 0.22 25);
+    --success: oklch(0.55 0.18 145);
+    --warning: oklch(0.65 0.18 70);
+    --info: oklch(0.55 0.18 230);
+  }
+
+  :host([data-theme="dark"]) {
+    --background: oklch(0.15 0.015 260);
+    --foreground: oklch(0.93 0 0);
+    --accent: oklch(0.75 0.18 260);
+    --destructive: oklch(0.70 0.18 25);
+    --success: oklch(0.72 0.16 145);
+    --warning: oklch(0.78 0.15 70);
+    --info: oklch(0.72 0.15 230);
+  }
+
+  /* Layer-2 derivations re-declared at the host so they pick up the
+    overridden Layer-1 values above. */
+  :host([data-theme="light"]),
+  :host([data-theme="dark"]) {
+    --sunken-2: oklch(from var(--background) calc(l - 0.03) c h);
+    --sunken-1: oklch(from var(--background) calc(l - 0.01) c h);
+    --surface-1: oklch(from var(--background) calc(l + 0.02) c h);
+    --surface-2: oklch(from var(--background) calc(l + 0.05) c h);
+    --surface-3: oklch(from var(--background) calc(l + 0.09) c h);
+
+    --border: oklch(from var(--foreground) l c h / 0.15);
+    --border-strong: oklch(from var(--foreground) l c h / 0.25);
+
+    --text-1: oklch(from var(--foreground) l c h / 0.90);
+    --text-2: oklch(from var(--foreground) l c h / 0.63);
+    --text-3: oklch(from var(--foreground) l c h / 0.45);
+
+    --accent-subtle: oklch(from var(--accent) l c h / 0.10);
+    --accent-text: oklch(from var(--accent) calc(l * 1.1) calc(c * 0.8) h);
+
+    --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);
+    --destructive-text: var(--destructive);
+
+    --success-subtle: oklch(from var(--success) l c h / 0.10);
+    --success-text: oklch(from var(--success) calc(l * 1.05) calc(c * 0.9) h);
+
+    --warning-subtle: oklch(from var(--warning) l c h / 0.10);
+    --warning-text: oklch(from var(--warning) calc(l * 1.05) calc(c * 0.9) h);
+
+    --info-subtle: oklch(from var(--info) l c h / 0.10);
+    --info-text: oklch(from var(--info) calc(l * 1.05) calc(c * 0.9) h);
+
+    --scrim: oklch(from var(--foreground) l c h / 0.35);
+  }
+
+  /* ── List layout (cascade stacking on by default) ──
+  *
+  * Toasts overlap via position: absolute and use the HOST as their
+  * containing block, so they pin to the region's anchored edge regardless
+  * of stack size. The list itself stays in normal flow with a min-height
+  * so the region is a viable hover target when collapsed.
+  *
+  * IMPORTANT: do NOT make the list position: relative. Doing so would make
+  * IT the containing block; since the absolute toasts don't contribute to
+  * its height, the list collapses to min-height (60px) and toasts pin to
+  * a 60px box instead of the (potentially taller) region. The host's
+  * position: fixed (auto-region) or position: relative (declarative,
+  * scoped use) is the right containing block.
+  */
+  [part="list"] {
+    min-height: 60px;
+    /* Override primitive's default flex gap — we position absolutely. */
+    gap: 0;
+  }
+
+  /* ── Toast stacking transforms (collapsed) ──
+  *
+  * Bottom-anchored: each older toast lifts up + scales down a step.
+  * Top-anchored: mirror image — older toasts drop down + scale down.
+  */
+  ::slotted(dui-toast) {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    transform-origin: bottom center;
+    transform: translateY(
+      calc(var(--toast-index, 0) * -1 * var(--toast-stack-peek))
+    ) scale(calc(1 - var(--toast-index, 0) * var(--toast-stack-scale-step)));
+    transition:
+      transform var(--duration-normal) var(--ease-out-3),
+      opacity var(--duration-normal) var(--ease-out-3);
+    }
+
+    :host([data-position^="top-"]) ::slotted(dui-toast) {
+      top: 0;
+      bottom: auto;
+      transform-origin: top center;
+      transform: translateY(calc(var(--toast-index, 0) * var(--toast-stack-peek)))
+        scale(calc(1 - var(--toast-index, 0) * var(--toast-stack-scale-step)));
+      }
+
+      /* Front toast and any toast inside an expanded region are interactive. */
+      ::slotted(dui-toast[data-front]),
+      ::slotted(dui-toast[data-region-expanded]) {
+        pointer-events: auto;
+      }
+
+      /* ── Expanded layout: real cumulative-height layout ── */
+      ::slotted(dui-toast[data-region-expanded]) {
+        transform: translateY(
+          calc(
+            -1 * var(--toasts-before-height, 0px) -
+              var(--toast-index, 0) * var(--toast-expanded-gap)
+            )
+          );
+        }
+
+        :host([data-position^="top-"]) ::slotted(dui-toast[data-region-expanded]) {
+          transform: translateY(
+            calc(
+              var(--toasts-before-height, 0px) +
+                var(--toast-index, 0) * var(--toast-expanded-gap)
+              )
+            );
+          }
+
+          /* ── Overflow: hide toasts past max-visible when collapsed ── */
+          ::slotted(dui-toast[data-overflow]) {
+            opacity: 0;
+            pointer-events: none;
+          }
+
+          ::slotted(dui-toast[data-overflow][data-region-expanded]) {
+            opacity: 1;
+            pointer-events: auto;
+          }
+
+          /* ── Reduced motion ── */
+          @media (prefers-reduced-motion: reduce) {
+            ::slotted(dui-toast) {
+              transition-duration: 0s;
+            }
+          }
+        `;
+/**
+ * `<dui-toast-region>` — Styled toast viewport.
+ *
+ * Extends the primitive with:
+ * - Sonner-style cascade-and-expand stacking (default-on)
+ * - Wider 24rem default width
+ * - Consumer-tunable stack visuals (`--toast-stack-peek`,
+ *   `--toast-stack-scale-step`, `--toast-expanded-gap`)
+ * - Optional `theme="light|dark|inverted"` palette override
+ *
+ * Default position is the primitive's `bottom-right`; flip via the inherited
+ * `position` attribute. Imperative `toast()` calls land here automatically.
+ *
+ * @attr theme - `"light" | "dark" | "inverted"`. Unset = inherit page theme.
+ *   `inverted` resolves at runtime to the opposite of the document's
+ *   `<html data-theme>` attribute.
+ */
+let DuiToastRegion = (() => {
+    let _classSuper = DuiToastRegionPrimitive;
+    let _theme_decorators;
+    let _theme_initializers = [];
+    let _theme_extraInitializers = [];
+    return class DuiToastRegion extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _theme_decorators = [property({ type: String, reflect: true })];
+            __esDecorate(this, null, _theme_decorators, { kind: "accessor", name: "theme", static: false, private: false, access: { has: obj => "theme" in obj, get: obj => obj.theme, set: (obj, value) => { obj.theme = value; } }, metadata: _metadata }, _theme_initializers, _theme_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [...DuiToastRegionPrimitive.styles, styles];
+        #theme_accessor_storage = __runInitializers(this, _theme_initializers, undefined);
+        /**
+         * Optional palette override. Unset = inherit page theme. `inverted`
+         * resolves at runtime to the opposite of `<html>`'s `data-theme`.
+         */
+        get theme() { return this.#theme_accessor_storage; }
+        set theme(value) { this.#theme_accessor_storage = value; }
+        /** Watcher for the document-level theme so `inverted` stays correct. */
+        #docThemeObserver = __runInitializers(this, _theme_extraInitializers);
+        connectedCallback() {
+            super.connectedCallback();
+            this.#applyTheme();
+            if (this.theme === "inverted")
+                this.#observeDocTheme();
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.#stopObservingDocTheme();
+        }
+        willUpdate(changed) {
+            super.willUpdate(changed);
+            if (changed.has("theme")) {
+                this.#applyTheme();
+                if (this.theme === "inverted")
+                    this.#observeDocTheme();
+                else
+                    this.#stopObservingDocTheme();
+            }
+        }
+        /**
+         * Resolve the `theme` property into a `data-theme` attribute on the host.
+         * For `inverted`, read `<html>`'s `data-theme` and flip.
+         */
+        #applyTheme() {
+            if (!this.theme) {
+                this.removeAttribute("data-theme");
+                return;
+            }
+            if (this.theme === "inverted") {
+                const docTheme = document.documentElement.getAttribute("data-theme");
+                const inverted = docTheme === "dark" ? "light" : "dark";
+                this.setAttribute("data-theme", inverted);
+                return;
+            }
+            this.setAttribute("data-theme", this.theme);
+        }
+        #observeDocTheme() {
+            if (this.#docThemeObserver)
+                return;
+            this.#docThemeObserver = new MutationObserver(() => this.#applyTheme());
+            this.#docThemeObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ["data-theme"],
+            });
+        }
+        #stopObservingDocTheme() {
+            this.#docThemeObserver?.disconnect();
+            this.#docThemeObserver = undefined;
+        }
+    };
+})();
+export { DuiToastRegion };
+customElements.define(DuiToastRegion.tagName, DuiToastRegion);

package/toast/toast.d.ts

@@ -0,0 +1,52 @@
+/**
+ * `<dui-toast>` — Styled toast item.
+ *
+ * NOTE: This is the only DUI component that overrides `render()`. The styled
+ * layer's contract is normally "extend with CSS only" — toasts are an
+ * exception because we ship built-in default icons keyed off `data-type`,
+ * which require a new shadow-DOM slot (`icon`) the primitive doesn't have.
+ * The override carefully preserves the primitive's full markup (root, title,
+ * description, default slot, action slot, close slot, ARIA wiring,
+ * `data-*` state attributes) so consumer-facing parts/slots stay stable.
+ */
+import { type TemplateResult } from "lit";
+import { DuiToastPrimitive } from "@deepfuture/dui-primitives/toast";
+import "../_install.js";
+import "../spinner/index.js";
+/**
+ * `<dui-toast>` — Styled toast item.
+ *
+ * Extends the primitive with:
+ * - Sonner-default look (neutral surface, colored icon, title + description)
+ * - Built-in default icons per `type` (success/info/warning/error/loading);
+ *   slot `icon` to override
+ * - `appearance="rich"` for tinted-surface mode
+ * - CSS Grid layout with full slot/part preservation
+ * - Hover-visible close button (always visible on touch)
+ *
+ * @slot title - Title text (auto-wires aria-labelledby).
+ * @slot description - Description text (auto-wires aria-describedby).
+ * @slot - Default custom content (Tier-2 escape hatch).
+ * @slot icon - Custom icon to replace the type-default. Empty = built-in.
+ * @slot action - Action button(s); typically a `<dui-toast-action>` wrapper.
+ * @slot close - Close affordance; typically a `<dui-toast-close>` wrapper.
+ *
+ * @csspart root - The toast container.
+ * @csspart icon - The icon container.
+ * @csspart title - The title wrapper.
+ * @csspart description - The description wrapper.
+ * @csspart action-wrapper - The action slot's grid cell.
+ * @csspart close-wrapper - The close slot's absolute-positioned container.
+ *
+ * @attr appearance - `"default" | "rich"`. Rich tints surface + border
+ *   by type color. Default keeps the surface neutral.
+ */
+export declare class DuiToast extends DuiToastPrimitive {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Override the primitive's render to inject an `icon` slot with built-in
+     * defaults. Preserves all other parts/slots/ARIA wiring exactly.
+     */
+    render(): TemplateResult;
+}