@ds-gn/ui 0.10.0 → 0.11.0

package/dist/components/Toaster/src/Toaster.playground.d.ts

@@ -0,0 +1,2 @@
+import type { PlaygroundDefinition } from '../../../playground/types.js';
+export declare const playground: PlaygroundDefinition;

package/dist/components/Toaster/src/Toaster.props.d.ts

@@ -0,0 +1,14 @@
+import { type ToastVariantType } from './toast.js';
+export { type ToastAction, type ToastActionAppearanceType, toastActionAppearanceValues, type ToastDismissReasonType, toastDismissReasonValues, type ToastLink, type ToastOptions, type ToastVariantType, toastVariantValues, } from './toast.js';
+/** Toasts shown at once before the rest queue. Persistent toasts don't count. */
+export declare const TOASTER_MAX_VISIBLE = 3;
+/** Default auto-dismiss per variant, in milliseconds; `0` persists. */
+export declare const toastDurations: Readonly<Record<ToastVariantType, number>>;
+/** Gap between toasts when the stack is expanded. */
+export declare const TOAST_GAP = 8;
+/** How far each card behind the front one peeks out, collapsed. */
+export declare const TOAST_PEEK = 10;
+/** Scale of the front card and the two that peek behind it, collapsed. */
+export declare const toastStackScales: readonly [1, 0.94, 0.88];
+/** `{count}` in `queued-label` is replaced with the number waiting. */
+export declare const QUEUED_COUNT_TOKEN = "{count}";

package/dist/components/Toaster/src/Toaster.props.js

@@ -0,0 +1,81 @@
+// components/Toaster/src/toast.ts
+var toastVariantValues = {
+  INFO: "info",
+  SUCCESS: "success",
+  WARNING: "warning",
+  ERROR: "error"
+};
+var toastDismissReasonValues = {
+  TIMEOUT: "timeout",
+  CLOSE: "close",
+  ACTION: "action",
+  PROGRAMMATIC: "programmatic"
+};
+var toastActionAppearanceValues = {
+  PRIMARY: "primary",
+  SECONDARY: "secondary"
+};
+var TOAST_EVENT = "dsgn-toast";
+var TOAST_PENDING_LIMIT = 20;
+var TOAST_PENDING_KEY = Symbol.for("dsgn.toast.pending");
+var TOAST_ID_KEY = Symbol.for("dsgn.toast.counter");
+var nextToastId = () => {
+  const store = globalThis;
+  const id = (store[TOAST_ID_KEY] ?? 0) + 1;
+  store[TOAST_ID_KEY] = id;
+  return `dsgn-toast-${id}`;
+};
+var hold = (request) => {
+  const store = globalThis;
+  const pending = store[TOAST_PENDING_KEY] ?? [];
+  if (request.type === "dismiss") {
+    store[TOAST_PENDING_KEY] = request.id === undefined ? [] : pending.filter((held) => held.type !== "show" || held.id !== request.id);
+    return;
+  }
+  pending.push(request);
+  store[TOAST_PENDING_KEY] = pending.slice(-TOAST_PENDING_LIMIT);
+};
+var send = (request) => {
+  if (typeof document === "undefined")
+    return;
+  const handled = !document.dispatchEvent(new CustomEvent(TOAST_EVENT, { detail: request, cancelable: true }));
+  if (!handled)
+    hold(request);
+};
+var show = (options) => {
+  const id = nextToastId();
+  send({ type: "show", id, options });
+  return id;
+};
+var shortcut = (variant) => (title, options = {}) => show({ ...options, title, variant });
+var toast = Object.assign(show, {
+  info: shortcut(toastVariantValues.INFO),
+  success: shortcut(toastVariantValues.SUCCESS),
+  warning: shortcut(toastVariantValues.WARNING),
+  error: shortcut(toastVariantValues.ERROR),
+  dismiss: (id) => send({ type: "dismiss", id })
+});
+
+// components/Toaster/src/Toaster.props.ts
+var TOASTER_MAX_VISIBLE = 3;
+var toastDurations = {
+  [toastVariantValues.INFO]: 5000,
+  [toastVariantValues.SUCCESS]: 5000,
+  [toastVariantValues.WARNING]: 7000,
+  [toastVariantValues.ERROR]: 0
+};
+var TOAST_GAP = 8;
+var TOAST_PEEK = 10;
+var toastStackScales = [1, 0.94, 0.88];
+var QUEUED_COUNT_TOKEN = "{count}";
+export {
+  QUEUED_COUNT_TOKEN,
+  TOASTER_MAX_VISIBLE,
+  TOAST_GAP,
+  TOAST_PEEK,
+  toastActionAppearanceValues,
+  toastDismissReasonValues,
+  toastDurations,
+  toastStackScales,
+  toastVariantValues
+};

package/dist/components/Toaster/src/Toaster.styles.d.ts

@@ -0,0 +1,52 @@
+import { type ToastVariantType } from './Toaster.props.js';
+/**
+ * Both the `dsgn-toaster` host and the region's own container render nothing
+ * of their own: the region is fixed to the viewport, in the top layer where
+ * the Popover API exists.
+ */
+export declare const hostStyles: import("lit").CSSResult;
+/**
+ * The labelled region, fixed bottom-end: 24px from the corner and 380px wide,
+ * or 16px and the full width less 32px under 640px. `inset-auto`, `m-0`,
+ * `p-0`, `border-0`, `bg-transparent` and `overflow-visible` undo the
+ * user-agent popover styles. Only the toasts take pointer events, so an empty
+ * region never blocks the page.
+ */
+export declare const regionClasses: (expanded: boolean) => string;
+export declare const liveRegionClasses: () => string;
+/** The "+N queued · paused" pill above the stack. */
+export declare const queueClasses: () => string;
+/**
+ * The stack. Its height is set from the toasts it holds, so the hover area
+ * covers the gaps between expanded toasts.
+ */
+export declare const listClasses: () => string;
+/**
+ * One toast's slot in the stack, pinned to the bottom. Its place is the
+ * `translate` and `scale` the toaster writes inline: moves between places
+ * are played by the motion engine on `transform`, which composes with them,
+ * and only the collapsed scale eases by transition. A card behind the front
+ * one is clipped to the front card's height, so only its edge peeks out.
+ */
+export declare const itemClasses: () => string;
+/**
+ * The popover surface. A title-only toast centres its row and tightens the
+ * padding, as in the design's "with action · title only" state.
+ */
+export declare const toastClasses: (compact: boolean) => string;
+export declare const iconClasses: (variant: ToastVariantType, compact: boolean) => string;
+export declare const bodyClasses: () => string;
+export declare const titleClasses: () => string;
+export declare const descriptionClasses: () => string;
+export declare const linksClasses: () => string;
+/** The action row: 10px under the text, or inline in a title-only toast. */
+export declare const actionsClasses: (inline: boolean) => string;
+/**
+ * Action and dismiss buttons stay 32px but take a 44px hit area on touch
+ * screens: a pseudo-element on the `dsgn-button` host, so a press on it lands
+ * on the host and activates the button.
+ */
+export declare const touchTargetClasses: () => string;
+export declare const dismissClasses: (compact: boolean) => string;
+/** The 2px time-remaining bar; neutral while the timers are paused. */
+export declare const progressClasses: (variant: ToastVariantType, paused: boolean) => string;

package/dist/components/Toaster/src/toast.d.ts

@@ -0,0 +1,115 @@
+/**
+ * The imperative trigger for `dsgn-toaster`: `toast()` and its helpers only
+ * dispatch a `dsgn-toast` event on `document`, and the mounted toaster does the
+ * rest. Nothing here imports Lit or touches the DOM at module evaluation, so
+ * importing it during a server render is a no-op (see packages/ui/CLAUDE.md,
+ * SSR contract); calls made on the server return an id and do nothing.
+ *
+ * Calls made in the browser before a toaster has connected (a toaster that is
+ * still loading behind a client-only boundary, say) are held, up to
+ * {@link TOAST_PENDING_LIMIT}, and shown in order when one connects.
+ */
+export declare const toastVariantValues: {
+    readonly INFO: "info";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+};
+export type ToastVariantType = (typeof toastVariantValues)[keyof typeof toastVariantValues];
+export declare const toastDismissReasonValues: {
+    readonly TIMEOUT: "timeout";
+    readonly CLOSE: "close";
+    readonly ACTION: "action";
+    readonly PROGRAMMATIC: "programmatic";
+};
+export type ToastDismissReasonType = (typeof toastDismissReasonValues)[keyof typeof toastDismissReasonValues];
+export declare const toastActionAppearanceValues: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+};
+export type ToastActionAppearanceType = (typeof toastActionAppearanceValues)[keyof typeof toastActionAppearanceValues];
+/** A button in the toast's action row. Activating it dismisses the toast. */
+export interface ToastAction {
+    label: string;
+    onClick?: () => void;
+    /**
+     * `primary` (solid) or `secondary` (outline). Defaults to `primary` for the
+     * first of two actions and `secondary` otherwise; give both the same
+     * appearance for equal-weight choices.
+     */
+    appearance?: ToastActionAppearanceType;
+}
+/**
+ * A text link under the description. With `href` it navigates; with only
+ * `onClick` it is a button. Links do not dismiss the toast.
+ */
+export interface ToastLink {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface ToastOptions {
+    title: string;
+    description?: string;
+    /** Default `info`. Errors are announced assertively. */
+    variant?: ToastVariantType;
+    /**
+     * Milliseconds before the toast dismisses itself; `0` keeps it until it is
+     * dismissed. Defaults: info and success 5000, warning 7000, error 0.
+     */
+    duration?: number;
+    /** Up to two actions. */
+    actions?: ToastAction[];
+    links?: ToastLink[];
+    /**
+     * A registered icon name (see `Icon.registerIcons`) drawn in place of the
+     * variant's icon. Unregistered names fall back to the variant's icon.
+     */
+    icon?: string;
+    /** Called once the toast is dismissed, with the reason. */
+    onDismiss?: (reason: ToastDismissReasonType) => void;
+}
+export type ToastRequest = {
+    type: 'show';
+    id: string;
+    options: ToastOptions;
+} | {
+    type: 'dismiss';
+    id?: string;
+};
+/** The document-level transport event a `dsgn-toaster` listens for. */
+export declare const TOAST_EVENT = "dsgn-toast";
+/** How many calls are held while no toaster is connected. */
+export declare const TOAST_PENDING_LIMIT = 20;
+/**
+ * Where held calls wait. A global symbol rather than module state, so a
+ * toaster and `toast()` loaded from separate bundles still find each other.
+ */
+export declare const TOAST_PENDING_KEY: unique symbol;
+/** A fresh toast id. */
+export declare const nextToastId: () => string;
+/** Take every held call, oldest first, leaving none behind. */
+export declare const takePendingToasts: () => ToastRequest[];
+type ToastShortcut = (title: string, options?: Omit<ToastOptions, 'title' | 'variant'>) => string;
+interface Toast {
+    (options: ToastOptions): string;
+    info: ToastShortcut;
+    success: ToastShortcut;
+    warning: ToastShortcut;
+    error: ToastShortcut;
+    /** Dismiss one toast, or every toast (shown and queued) with no id. */
+    dismiss: (id?: string) => void;
+}
+/**
+ * Show a toast in the page's `dsgn-toaster` and return its id.
+ *
+ * ```ts
+ * toast.success('Changes saved');
+ * toast.error('Couldn’t publish', {
+ *   description: 'The registry rejected the request.',
+ *   actions: [{ label: 'Retry', onClick: retry }],
+ * });
+ * ```
+ */
+export declare const toast: Toast;
+export {};

package/dist/components/Toaster/src/toast.js

@@ -0,0 +1,74 @@
+// components/Toaster/src/toast.ts
+var toastVariantValues = {
+  INFO: "info",
+  SUCCESS: "success",
+  WARNING: "warning",
+  ERROR: "error"
+};
+var toastDismissReasonValues = {
+  TIMEOUT: "timeout",
+  CLOSE: "close",
+  ACTION: "action",
+  PROGRAMMATIC: "programmatic"
+};
+var toastActionAppearanceValues = {
+  PRIMARY: "primary",
+  SECONDARY: "secondary"
+};
+var TOAST_EVENT = "dsgn-toast";
+var TOAST_PENDING_LIMIT = 20;
+var TOAST_PENDING_KEY = Symbol.for("dsgn.toast.pending");
+var TOAST_ID_KEY = Symbol.for("dsgn.toast.counter");
+var nextToastId = () => {
+  const store = globalThis;
+  const id = (store[TOAST_ID_KEY] ?? 0) + 1;
+  store[TOAST_ID_KEY] = id;
+  return `dsgn-toast-${id}`;
+};
+var takePendingToasts = () => {
+  const store = globalThis;
+  const pending = store[TOAST_PENDING_KEY] ?? [];
+  store[TOAST_PENDING_KEY] = [];
+  return pending;
+};
+var hold = (request) => {
+  const store = globalThis;
+  const pending = store[TOAST_PENDING_KEY] ?? [];
+  if (request.type === "dismiss") {
+    store[TOAST_PENDING_KEY] = request.id === undefined ? [] : pending.filter((held) => held.type !== "show" || held.id !== request.id);
+    return;
+  }
+  pending.push(request);
+  store[TOAST_PENDING_KEY] = pending.slice(-TOAST_PENDING_LIMIT);
+};
+var send = (request) => {
+  if (typeof document === "undefined")
+    return;
+  const handled = !document.dispatchEvent(new CustomEvent(TOAST_EVENT, { detail: request, cancelable: true }));
+  if (!handled)
+    hold(request);
+};
+var show = (options) => {
+  const id = nextToastId();
+  send({ type: "show", id, options });
+  return id;
+};
+var shortcut = (variant) => (title, options = {}) => show({ ...options, title, variant });
+var toast = Object.assign(show, {
+  info: shortcut(toastVariantValues.INFO),
+  success: shortcut(toastVariantValues.SUCCESS),
+  warning: shortcut(toastVariantValues.WARNING),
+  error: shortcut(toastVariantValues.ERROR),
+  dismiss: (id) => send({ type: "dismiss", id })
+});
+export {
+  TOAST_EVENT,
+  TOAST_PENDING_KEY,
+  TOAST_PENDING_LIMIT,
+  nextToastId,
+  takePendingToasts,
+  toast,
+  toastActionAppearanceValues,
+  toastDismissReasonValues,
+  toastVariantValues
+};

package/dist/playground/types.d.ts

@@ -19,6 +19,25 @@ export interface PlaygroundNestedComponent {
     tag: string;
     slot: string;
     label: string;
+    /**
+     * Starting prop values for this use, by prop `name`, overriding the nested
+     * component's own playground defaults — a menu's trigger button reads
+     * "Actions" with a chevron, not the Button playground's "Get started".
+     */
+    props?: Readonly<Record<string, boolean | string>>;
+    /** Starting slot content, keyed by slot name (`default` for the unnamed slot). */
+    slots?: Readonly<Record<string, string>>;
+}
+/**
+ * A button under the preview that calls a component's imperative trigger —
+ * `toast(options)` for the toaster. The label is the call as code, and the
+ * options are JSON: callbacks cannot live in the manifest.
+ */
+export interface PlaygroundTrigger {
+    label: string;
+    options?: Readonly<Record<string, unknown>>;
+    /** Clears instead of showing: `toast.dismiss()`. */
+    dismiss?: boolean;
 }
 export interface PlaygroundDefinition {
     tag: string;
@@ -26,4 +45,12 @@ export interface PlaygroundDefinition {
     props: readonly PlaygroundProp[];
     slots: readonly PlaygroundSlot[];
     nested?: readonly PlaygroundNestedComponent[];
+    /**
+     * Fixed DOM properties with no control, for data a component takes as
+     * objects or arrays (e.g. a table's `columns` and `rows`). Values must be
+     * JSON-serializable: they are written into the generated manifest.
+     */
+    data?: Readonly<Record<string, unknown>>;
+    /** Imperative calls the preview offers as buttons. */
+    triggers?: readonly PlaygroundTrigger[];
 }

package/dist/playground-manifest.d.ts

@@ -1,6 +1,7 @@
 export interface PlaygroundProp { name: string; attribute: string; control: 'boolean' | 'select' | 'text'; default: boolean | string; label: string; options?: readonly string[]; includeDefault?: boolean; }
 export interface PlaygroundSlot { name?: string; default: string; label: string; }
-export interface PlaygroundNestedComponent { tag: string; slot: string; label: string; }
-export interface PlaygroundDefinition { tag: string; module: string; props: readonly PlaygroundProp[]; slots: readonly PlaygroundSlot[]; nested?: readonly PlaygroundNestedComponent[]; }
+export interface PlaygroundNestedComponent { tag: string; slot: string; label: string; props?: Readonly<Record<string, boolean | string>>; slots?: Readonly<Record<string, string>>; }
+export interface PlaygroundTrigger { label: string; options?: Readonly<Record<string, unknown>>; dismiss?: boolean; }
+export interface PlaygroundDefinition { tag: string; module: string; props: readonly PlaygroundProp[]; slots: readonly PlaygroundSlot[]; nested?: readonly PlaygroundNestedComponent[]; data?: Readonly<Record<string, unknown>>; triggers?: readonly PlaygroundTrigger[]; }
 export declare const playgroundManifest: PlaygroundDefinition[];
 export default playgroundManifest;