@deepfuture/dui-components 1.2.1 → 1.4.0

package/all.d.ts

@@ -37,13 +37,16 @@ import "./sidebar/index.js";
 import "./slider/index.js";
 import "./spinner/index.js";
 import "./split-button/index.js";
+import "./splitter/index.js";
 import "./stepper/index.js";
 import "./switch/index.js";
 import "./tabs/index.js";
 import "./textarea/index.js";
+import "./toast/index.js";
 import "./toggle/index.js";
 import "./toolbar/index.js";
 import "./tooltip/index.js";
+import "./tree/index.js";
 import "./trunc/index.js";
 export { DuiAccordion } from "./accordion/index.js";
 export { DuiAccordionItem } from "./accordion/index.js";
@@ -119,6 +122,9 @@ export { DuiSidebarTrigger } from "./sidebar/index.js";
 export { DuiSlider } from "./slider/index.js";
 export { DuiSpinner } from "./spinner/index.js";
 export { DuiSplitButton } from "./split-button/index.js";
+export { DuiSplitter } from "./splitter/index.js";
+export { DuiSplitterHandle } from "./splitter/index.js";
+export { DuiSplitterPanel } from "./splitter/index.js";
 export { DuiStepper } from "./stepper/index.js";
 export { DuiSwitch } from "./switch/index.js";
 export { DuiTab } from "./tabs/index.js";
@@ -127,12 +133,15 @@ export { DuiTabsIndicator } from "./tabs/index.js";
 export { DuiTabsList } from "./tabs/index.js";
 export { DuiTabsPanel } from "./tabs/index.js";
 export { DuiTextarea } from "./textarea/index.js";
+export { DuiToast, DuiToastAction, DuiToastClose, DuiToastRegion, toast, } from "./toast/index.js";
 export { DuiToggle } from "./toggle/index.js";
 export { DuiToggleGroup } from "./toggle/index.js";
 export { DuiToolbar } from "./toolbar/index.js";
 export { DuiTooltip } from "./tooltip/index.js";
 export { DuiTooltipPopup } from "./tooltip/index.js";
 export { DuiTooltipTrigger } from "./tooltip/index.js";
+export { DuiTree } from "./tree/index.js";
+export { DuiTreeItem } from "./tree/index.js";
 export { DuiTrunc } from "./trunc/index.js";
 export type { AccordionContext } from "@deepfuture/dui-primitives/accordion";
 export type { AlertDialogOpenChangeDetail } from "@deepfuture/dui-primitives/alert-dialog";
@@ -154,8 +163,10 @@ export type { PreviewCardContext, PreviewCardSide } from "@deepfuture/dui-primit
 export type { RadioGroupContext } from "@deepfuture/dui-primitives/radio";
 export type { SidebarOpenChangeDetail } from "@deepfuture/dui-primitives/sidebar";
 export type { SidebarContext } from "@deepfuture/dui-primitives/sidebar";
+export type { SplitterContext, SplitterHandleAria, SplitterHandleMeta, SplitterPanelMeta } from "@deepfuture/dui-primitives/splitter";
 export type { TabsContext } from "@deepfuture/dui-primitives/tabs";
 export type { TextareaResize } from "@deepfuture/dui-primitives/textarea";
 export type { ToggleGroupContext } from "@deepfuture/dui-primitives/toggle";
 export type { TooltipOpenChangeDetail } from "@deepfuture/dui-primitives/tooltip";
 export type { TooltipContext, TooltipSide } from "@deepfuture/dui-primitives/tooltip";
+export type { SelectionMode, TreeContext } from "@deepfuture/dui-primitives/tree";

package/all.js

@@ -37,13 +37,16 @@ import "./sidebar/index.js";
 import "./slider/index.js";
 import "./spinner/index.js";
 import "./split-button/index.js";
+import "./splitter/index.js";
 import "./stepper/index.js";
 import "./switch/index.js";
 import "./tabs/index.js";
 import "./textarea/index.js";
+import "./toast/index.js";
 import "./toggle/index.js";
 import "./toolbar/index.js";
 import "./tooltip/index.js";
+import "./tree/index.js";
 import "./trunc/index.js";
 export { DuiAccordion } from "./accordion/index.js";
 export { DuiAccordionItem } from "./accordion/index.js";
@@ -119,6 +122,9 @@ export { DuiSidebarTrigger } from "./sidebar/index.js";
 export { DuiSlider } from "./slider/index.js";
 export { DuiSpinner } from "./spinner/index.js";
 export { DuiSplitButton } from "./split-button/index.js";
+export { DuiSplitter } from "./splitter/index.js";
+export { DuiSplitterHandle } from "./splitter/index.js";
+export { DuiSplitterPanel } from "./splitter/index.js";
 export { DuiStepper } from "./stepper/index.js";
 export { DuiSwitch } from "./switch/index.js";
 export { DuiTab } from "./tabs/index.js";
@@ -127,10 +133,13 @@ export { DuiTabsIndicator } from "./tabs/index.js";
 export { DuiTabsList } from "./tabs/index.js";
 export { DuiTabsPanel } from "./tabs/index.js";
 export { DuiTextarea } from "./textarea/index.js";
+export { DuiToast, DuiToastAction, DuiToastClose, DuiToastRegion, toast, } from "./toast/index.js";
 export { DuiToggle } from "./toggle/index.js";
 export { DuiToggleGroup } from "./toggle/index.js";
 export { DuiToolbar } from "./toolbar/index.js";
 export { DuiTooltip } from "./tooltip/index.js";
 export { DuiTooltipPopup } from "./tooltip/index.js";
 export { DuiTooltipTrigger } from "./tooltip/index.js";
+export { DuiTree } from "./tree/index.js";
+export { DuiTreeItem } from "./tree/index.js";
 export { DuiTrunc } from "./trunc/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepfuture/dui-components",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "DUI styled web components — extends dui-primitives with design tokens and variant CSS",
   "type": "module",
   "license": "MIT",
@@ -154,6 +154,10 @@
       "import": "./split-button/index.js",
       "types": "./split-button/index.d.ts"
     },
+    "./splitter": {
+      "import": "./splitter/index.js",
+      "types": "./splitter/index.d.ts"
+    },
     "./stepper": {
       "import": "./stepper/index.js",
       "types": "./stepper/index.d.ts"
@@ -174,6 +178,10 @@
       "import": "./theme/index.js",
       "types": "./theme/index.d.ts"
     },
+    "./toast": {
+      "import": "./toast/index.js",
+      "types": "./toast/index.d.ts"
+    },
     "./toggle": {
       "import": "./toggle/index.js",
       "types": "./toggle/index.d.ts"
@@ -186,6 +194,10 @@
       "import": "./tooltip/index.js",
       "types": "./tooltip/index.d.ts"
     },
+    "./tree": {
+      "import": "./tree/index.js",
+      "types": "./tree/index.d.ts"
+    },
     "./tokens": {
       "import": "./tokens/tokens.js",
       "types": "./tokens/tokens.d.ts"
@@ -210,7 +222,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@deepfuture/dui-primitives": "1.1.0",
+    "@deepfuture/dui-primitives": "1.6.0",
     "lit": "^3.3.2",
     "@lit/context": "^1.1.3"
   },

package/splitter/index.d.ts

@@ -0,0 +1,8 @@
+import "./splitter.js";
+import "./splitter-panel.js";
+import "./splitter-handle.js";
+export { DuiSplitter } from "./splitter.js";
+export { DuiSplitterPanel } from "./splitter-panel.js";
+export { DuiSplitterHandle } from "./splitter-handle.js";
+export type { SplitterContext, SplitterHandleAria, SplitterHandleMeta, SplitterPanelMeta, } from "@deepfuture/dui-primitives/splitter";
+export { collapseChangeEvent, valueChangeEvent } from "@deepfuture/dui-primitives/splitter";

package/splitter/index.js

@@ -0,0 +1,7 @@
+import "./splitter.js";
+import "./splitter-panel.js";
+import "./splitter-handle.js";
+export { DuiSplitter } from "./splitter.js";
+export { DuiSplitterPanel } from "./splitter-panel.js";
+export { DuiSplitterHandle } from "./splitter-handle.js";
+export { collapseChangeEvent, valueChangeEvent } from "@deepfuture/dui-primitives/splitter";

package/splitter/splitter-handle.d.ts

@@ -0,0 +1,24 @@
+import { DuiSplitterHandlePrimitive } from "@deepfuture/dui-primitives/splitter";
+import "../_install.js";
+/**
+ * `<dui-splitter-handle>` — Styled draggable separator.
+ *
+ * Default appearance: 8px interaction target with a centered 1px line that
+ * brightens on hover and turns accent-colored when dragged or keyboard-focused.
+ *
+ * Customize via CSS vars on the handle, the splitter, or any ancestor:
+ *
+ * ```css
+ * .my-splitter {
+ *   --splitter-handle-size: 12px;          // interaction target thickness
+ *   --splitter-handle-visible-size: 0;     // invisible bar with a fat target
+ *   --splitter-handle-color: var(--border);
+ *   --splitter-handle-hover-color: var(--border-strong);
+ *   --splitter-handle-active-color: var(--accent);
+ *   --splitter-handle-radius: var(--radius-full);
+ * }
+ * ```
+ */
+export declare class DuiSplitterHandle extends DuiSplitterHandlePrimitive {
+    static styles: import("lit").CSSResult[];
+}

package/splitter/splitter-handle.js

@@ -0,0 +1,113 @@
+import { css } from "lit";
+import { DuiSplitterHandlePrimitive } from "@deepfuture/dui-primitives/splitter";
+import "../_install.js";
+/**
+ * Two-layer handle styling:
+ *
+ *   • The host element is the **interaction target**. Its cross-axis size
+ *     (--splitter-handle-size) defines how easy the handle is to grab.
+ *   • A ::before pseudo on [part="root"] draws the **visible line**, centered
+ *     in the target, with its own thickness (--splitter-handle-visible-size).
+ *
+ * This decouples hit area from drawn width — set the visible line to 1px
+ * (or 0 for an invisible-but-grabbable handle) while keeping a fat 8px+
+ * target.
+ *
+ * Defaults are applied via `var(name, fallback)` at every consumption site
+ * rather than via a `:host { --x: default }` declarations block. The latter
+ * sets the value *directly* on the host element, which silently overrides
+ * any value the consumer inherits down from an ancestor (e.g. a wrapper
+ * with `.fat-handles { --splitter-handle-size: 16px }`). The fallback
+ * pattern keeps every var overridable from anywhere in the cascade.
+ */
+const styles = css `
+  /* Host = interaction target. Cross-axis size depends on orientation. */
+  :host([data-orientation="horizontal"]) {
+    width: var(--splitter-handle-size, var(--space-2));
+  }
+  :host([data-orientation="vertical"]) {
+    height: var(--splitter-handle-size, var(--space-2));
+  }
+
+  [part="root"] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Visible line — centered in the interaction target. */
+  [part="root"]::before {
+    content: "";
+    display: block;
+    background: var(--splitter-handle-color, var(--border));
+    border-radius: var(--splitter-handle-radius, var(--radius-full));
+    transition:
+      background-color var(--splitter-handle-transition-duration, var(--duration-fast)) ease,
+      width var(--splitter-handle-transition-duration, var(--duration-fast)) ease,
+      height var(--splitter-handle-transition-duration, var(--duration-fast)) ease;
+  }
+
+  :host([data-orientation="horizontal"]) [part="root"]::before {
+    width: var(--splitter-handle-visible-size, var(--border-width-thin));
+    height: 100%;
+  }
+  :host([data-orientation="vertical"]) [part="root"]::before {
+    width: 100%;
+    height: var(--splitter-handle-visible-size, var(--border-width-thin));
+  }
+
+  /* Hover — brighten the line. :where(:hover) keeps the specificity at
+     (0,1,0) so the dragging rule below can win the tie via source order;
+     otherwise hovering during a drag would override the active color. */
+  :host(:where(:hover):not([data-disabled])) [part="root"]::before {
+    background: var(--splitter-handle-hover-color, var(--border-strong));
+  }
+
+  /* Active states. The primitive defaultPrevents focus-on-mousedown so
+     pointer clicks no longer steal focus — [data-focused] reflects keyboard
+     focus only, matching :focus-visible semantics. */
+  :host([data-dragging]) [part="root"]::before,
+  :host([data-focused]) [part="root"]::before {
+    background: var(--splitter-handle-active-color, var(--accent));
+  }
+
+  /* Keyboard focus also fattens the line so the active state is unambiguous
+     even when --splitter-handle-visible-size is 0. The combined attribute
+     selector beats the orientation-specific size rule above on specificity. */
+  :host([data-orientation="horizontal"][data-focused]) [part="root"]::before {
+    width: var(--space-1);
+  }
+  :host([data-orientation="vertical"][data-focused]) [part="root"]::before {
+    height: var(--space-1);
+  }
+
+  /* Disabled — mute the bar. */
+  :host([data-disabled]) [part="root"]::before {
+    background: var(--border);
+    opacity: 0.5;
+  }
+`;
+/**
+ * `<dui-splitter-handle>` — Styled draggable separator.
+ *
+ * Default appearance: 8px interaction target with a centered 1px line that
+ * brightens on hover and turns accent-colored when dragged or keyboard-focused.
+ *
+ * Customize via CSS vars on the handle, the splitter, or any ancestor:
+ *
+ * ```css
+ * .my-splitter {
+ *   --splitter-handle-size: 12px;          // interaction target thickness
+ *   --splitter-handle-visible-size: 0;     // invisible bar with a fat target
+ *   --splitter-handle-color: var(--border);
+ *   --splitter-handle-hover-color: var(--border-strong);
+ *   --splitter-handle-active-color: var(--accent);
+ *   --splitter-handle-radius: var(--radius-full);
+ * }
+ * ```
+ */
+export class DuiSplitterHandle extends DuiSplitterHandlePrimitive {
+    static styles = [...DuiSplitterHandlePrimitive.styles, styles];
+}
+customElements.define(DuiSplitterHandle.tagName, DuiSplitterHandle);

package/splitter/splitter-panel.d.ts

@@ -0,0 +1,11 @@
+import { DuiSplitterPanelPrimitive } from "@deepfuture/dui-primitives/splitter";
+import "../_install.js";
+/**
+ * `<dui-splitter-panel>` — A single resizable panel.
+ *
+ * The host owns `flex-basis` (set inline by the parent splitter); consumers
+ * paint content onto `::part(root)`. No default aesthetic styling — panels
+ * are content surfaces and should adopt the surrounding application's look.
+ */
+export declare class DuiSplitterPanel extends DuiSplitterPanelPrimitive {
+}

package/splitter/splitter-panel.js

@@ -0,0 +1,12 @@
+import { DuiSplitterPanelPrimitive } from "@deepfuture/dui-primitives/splitter";
+import "../_install.js";
+/**
+ * `<dui-splitter-panel>` — A single resizable panel.
+ *
+ * The host owns `flex-basis` (set inline by the parent splitter); consumers
+ * paint content onto `::part(root)`. No default aesthetic styling — panels
+ * are content surfaces and should adopt the surrounding application's look.
+ */
+export class DuiSplitterPanel extends DuiSplitterPanelPrimitive {
+}
+customElements.define(DuiSplitterPanel.tagName, DuiSplitterPanel);

package/splitter/splitter.d.ts

@@ -0,0 +1,11 @@
+import { DuiSplitterPrimitive } from "@deepfuture/dui-primitives/splitter";
+import "../_install.js";
+/**
+ * `<dui-splitter>` — Resizable panel group.
+ *
+ * The root element is layout-only; all aesthetic styling lives on
+ * `<dui-splitter-handle>` and (optionally) on each `<dui-splitter-panel>`'s
+ * `::part(root)` content surface.
+ */
+export declare class DuiSplitter extends DuiSplitterPrimitive {
+}

package/splitter/splitter.js

@@ -0,0 +1,12 @@
+import { DuiSplitterPrimitive } from "@deepfuture/dui-primitives/splitter";
+import "../_install.js";
+/**
+ * `<dui-splitter>` — Resizable panel group.
+ *
+ * The root element is layout-only; all aesthetic styling lives on
+ * `<dui-splitter-handle>` and (optionally) on each `<dui-splitter-panel>`'s
+ * `::part(root)` content surface.
+ */
+export class DuiSplitter extends DuiSplitterPrimitive {
+}
+customElements.define(DuiSplitter.tagName, DuiSplitter);

package/toast/default-icons.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Default icon templates for `<dui-toast>`, keyed by `data-type`.
+ *
+ * SVGs are sized to 14×16 with `currentColor` so they inherit the toast's
+ * `--toast-icon-color` (which resolves per-type via `--toast-type-color`).
+ *
+ * The `loading` type uses `<dui-spinner>` instead of an inline SVG for
+ * consistency with the rest of `@dui/components` (and free reduced-motion
+ * handling).
+ */
+import { type TemplateResult } from "lit";
+import type { ToastType } from "@deepfuture/dui-primitives/toast";
+/**
+ * Returns the default icon template for a given toast type, or `null` if the
+ * type doesn't ship with a built-in icon (`default`, or any unknown value).
+ */
+export declare function defaultIconFor(type: ToastType): TemplateResult | null;

package/toast/default-icons.js

@@ -0,0 +1,96 @@
+/**
+ * Default icon templates for `<dui-toast>`, keyed by `data-type`.
+ *
+ * SVGs are sized to 14×16 with `currentColor` so they inherit the toast's
+ * `--toast-icon-color` (which resolves per-type via `--toast-type-color`).
+ *
+ * The `loading` type uses `<dui-spinner>` instead of an inline SVG for
+ * consistency with the rest of `@dui/components` (and free reduced-motion
+ * handling).
+ */
+import { html } from "lit";
+const success = html `
+  <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+    <path
+      d="M3 8.5l3 3 6.5-7"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;
+const error = html `
+  <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+    <path
+      d="M4 4l8 8M12 4l-8 8"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+  </svg>
+`;
+const warning = html `
+  <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+    <path
+      d="M8 1.5L14.5 13.5h-13z"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8 6v3.5"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+    <circle cx="8" cy="11.5" r="0.9" fill="currentColor" />
+  </svg>
+`;
+const info = html `
+  <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+    <circle
+      cx="8"
+      cy="8"
+      r="6.5"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+    <path
+      d="M8 7.5v4"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+    <circle cx="8" cy="4.7" r="0.9" fill="currentColor" />
+  </svg>
+`;
+const loading = html `
+  <dui-spinner part="spinner" aria-hidden="true"></dui-spinner>
+`;
+/**
+ * Returns the default icon template for a given toast type, or `null` if the
+ * type doesn't ship with a built-in icon (`default`, or any unknown value).
+ */
+export function defaultIconFor(type) {
+    switch (type) {
+        case "success":
+            return success;
+        case "error":
+            return error;
+        case "warning":
+            return warning;
+        case "info":
+            return info;
+        case "loading":
+            return loading;
+        default:
+            return null;
+    }
+}

package/toast/index.d.ts

@@ -0,0 +1,12 @@
+import "./toast-region.js";
+import "./toast.js";
+import "./toast-action.js";
+import "./toast-close.js";
+import { toast } from "@deepfuture/dui-primitives/toast";
+export { DuiToastRegion } from "./toast-region.js";
+export { DuiToast } from "./toast.js";
+export { DuiToastAction } from "./toast-action.js";
+export { DuiToastClose } from "./toast-close.js";
+export { toast };
+export type { PromiseMessages, ToastAction, ToastApi, ToastConfig, ToastDismissDetail, ToastDismissReason, ToastItemContext, ToastOpenChangeDetail, ToastOptions, ToastPosition, ToastPriority, ToastRegionContext, ToastType, } from "@deepfuture/dui-primitives/toast";
+export { toastDismissEvent, toastOpenChangeEvent, toastRegionDismissEvent, } from "@deepfuture/dui-primitives/toast";

package/toast/index.js

@@ -0,0 +1,11 @@
+import "./toast-region.js";
+import "./toast.js";
+import "./toast-action.js";
+import "./toast-close.js";
+import { toast } from "@deepfuture/dui-primitives/toast";
+export { DuiToastRegion } from "./toast-region.js";
+export { DuiToast } from "./toast.js";
+export { DuiToastAction } from "./toast-action.js";
+export { DuiToastClose } from "./toast-close.js";
+export { toast };
+export { toastDismissEvent, toastOpenChangeEvent, toastRegionDismissEvent, } from "@deepfuture/dui-primitives/toast";

package/toast/toast-action.d.ts

@@ -0,0 +1,16 @@
+import { DuiToastActionPrimitive } from "@deepfuture/dui-primitives/toast";
+import "../_install.js";
+/**
+ * `<dui-toast-action>` — Styled action button wrapper.
+ *
+ * Wraps a slotted button (typically an auto-created `<button>` from the
+ * imperative `toast()` facade, or a consumer-provided `<button>` /
+ * `<dui-button>`). Clicking the slotted control dismisses the toast with
+ * reason `"action"` (handled by the primitive).
+ *
+ * Bare `<button>` children are styled as a small filled neutral button.
+ * Slotted `<dui-button>` retains its own styling.
+ */
+export declare class DuiToastAction extends DuiToastActionPrimitive {
+    static styles: import("lit").CSSResult[];
+}

package/toast/toast-action.js

@@ -0,0 +1,52 @@
+import { css } from "lit";
+import { DuiToastActionPrimitive } from "@deepfuture/dui-primitives/toast";
+import "../_install.js";
+const styles = css `
+  /* Style any slotted <button> uniformly — works for both the imperative
+    facade's auto-created <button>s and consumer-slotted ones. Native
+    ::slotted() can't reach into shadow trees, but this targets light-DOM
+    children of <dui-toast-action>. */
+  ::slotted(button) {
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-medium);
+    line-height: 1;
+    padding: var(--space-1_5) var(--space-2_5);
+    border: var(--border-width-thin) solid transparent;
+    border-radius: var(--radius-sm);
+    background: var(--foreground);
+    color: var(--background);
+    cursor: pointer;
+    transition:
+      background var(--duration-fast) var(--ease-out-3),
+      filter var(--duration-fast) var(--ease-out-3);
+    }
+
+    ::slotted(button:hover) {
+      filter: brightness(0.88);
+    }
+
+    ::slotted(button:active) {
+      filter: brightness(0.78);
+    }
+
+    ::slotted(button:focus-visible) {
+      outline: var(--focus-ring-width) solid var(--focus-ring-color);
+      outline-offset: var(--focus-ring-offset);
+    }
+  `;
+/**
+ * `<dui-toast-action>` — Styled action button wrapper.
+ *
+ * Wraps a slotted button (typically an auto-created `<button>` from the
+ * imperative `toast()` facade, or a consumer-provided `<button>` /
+ * `<dui-button>`). Clicking the slotted control dismisses the toast with
+ * reason `"action"` (handled by the primitive).
+ *
+ * Bare `<button>` children are styled as a small filled neutral button.
+ * Slotted `<dui-button>` retains its own styling.
+ */
+export class DuiToastAction extends DuiToastActionPrimitive {
+    static styles = [...DuiToastActionPrimitive.styles, styles];
+}
+customElements.define(DuiToastAction.tagName, DuiToastAction);

package/toast/toast-close.d.ts

@@ -0,0 +1,16 @@
+import { DuiToastClosePrimitive } from "@deepfuture/dui-primitives/toast";
+import "../_install.js";
+/**
+ * `<dui-toast-close>` — Styled close button wrapper.
+ *
+ * Wraps a slotted close control (typically an auto-created `<button>×</button>`
+ * from the imperative `toast()` facade, or a consumer-provided one). Clicking
+ * dismisses the toast with reason `"close"` (handled by the primitive).
+ *
+ * Bare `<button>` children are styled as a square ghost-icon button. The
+ * parent `<dui-toast>` controls visibility (hover-only on devices with
+ * hover, always visible on touch).
+ */
+export declare class DuiToastClose extends DuiToastClosePrimitive {
+    static styles: import("lit").CSSResult[];
+}

package/toast/toast-close.js

@@ -0,0 +1,52 @@
+import { css } from "lit";
+import { DuiToastClosePrimitive } from "@deepfuture/dui-primitives/toast";
+import "../_install.js";
+const styles = css `
+  /* Style any slotted <button> as a small ghost-icon close affordance.
+    Hover-to-show behavior lives on the parent <dui-toast> (close-wrapper
+    part); this just renders the button itself. */
+  ::slotted(button) {
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    line-height: 1;
+    width: var(--space-5);
+    height: var(--space-5);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text-2);
+    cursor: pointer;
+    transition:
+      background var(--duration-fast) var(--ease-out-3),
+      color var(--duration-fast) var(--ease-out-3);
+    }
+
+    ::slotted(button:hover) {
+      background: oklch(from var(--foreground) l c h / 0.08);
+      color: var(--text-1);
+    }
+
+    ::slotted(button:focus-visible) {
+      outline: var(--focus-ring-width) solid var(--focus-ring-color);
+      outline-offset: var(--focus-ring-offset);
+    }
+  `;
+/**
+ * `<dui-toast-close>` — Styled close button wrapper.
+ *
+ * Wraps a slotted close control (typically an auto-created `<button>×</button>`
+ * from the imperative `toast()` facade, or a consumer-provided one). Clicking
+ * dismisses the toast with reason `"close"` (handled by the primitive).
+ *
+ * Bare `<button>` children are styled as a square ghost-icon button. The
+ * parent `<dui-toast>` controls visibility (hover-only on devices with
+ * hover, always visible on touch).
+ */
+export class DuiToastClose extends DuiToastClosePrimitive {
+    static styles = [...DuiToastClosePrimitive.styles, styles];
+}
+customElements.define(DuiToastClose.tagName, DuiToastClose);