@ds-gn/ui 0.9.0 → 0.11.0

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

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

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

@@ -0,0 +1,53 @@
+export declare const tableAlignValues: {
+    readonly START: "start";
+    readonly END: "end";
+};
+export type TableAlignType = (typeof tableAlignValues)[keyof typeof tableAlignValues];
+export declare const tablePinValues: {
+    readonly START: "start";
+    readonly NONE: "none";
+};
+export type TablePinType = (typeof tablePinValues)[keyof typeof tablePinValues];
+export declare const tableSortDirectionValues: {
+    readonly ASCENDING: "ascending";
+    readonly DESCENDING: "descending";
+};
+export type TableSortDirection = (typeof tableSortDirectionValues)[keyof typeof tableSortDirectionValues];
+/** One column of a `dsgn-table`. */
+export interface TableColumn {
+    /** Field read from each row, and the column part of a cell slot name. */
+    key: string;
+    /** Header text. Also the sort button's accessible name. */
+    label: string;
+    /** Text alignment. Defaults to `end` for numeric columns, `start` otherwise. */
+    align?: TableAlignType;
+    /** Numbers, dates, sizes and amounts: monospace, tabular figures, end-aligned. */
+    numeric?: boolean;
+    /** Renders a sort button in the header and sets `aria-sort`. */
+    sortable?: boolean;
+    /**
+     * Renders this column's body cells as `<th scope="row">`. Defaults to the
+     * first column when no column sets it.
+     */
+    rowHeader?: boolean;
+    /**
+     * Keeps the column visible while the table scrolls sideways. Honoured on the
+     * first column only, and defaults to `start` there when it is the row header.
+     */
+    pin?: TablePinType;
+    /** CSS width for the column, e.g. `'140px'`. */
+    width?: string;
+    /** Keeps the header text for assistive technology but hides it visually. */
+    hideLabel?: boolean;
+    /** Lets body text wrap. Cells stay on one line by default. */
+    wrap?: boolean;
+}
+/** One row of data. Values are read by column `key`. */
+export type TableRow = Record<string, unknown>;
+/** The current sort, owned by the consumer and passed back in. */
+export interface TableSort {
+    column: string;
+    direction: TableSortDirection;
+}
+/** `detail` of the `dsgn-sort` event. */
+export type TableSortEventDetail = TableSort;

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

@@ -0,0 +1,18 @@
+// components/Table/src/Table.props.ts
+var tableAlignValues = {
+  START: "start",
+  END: "end"
+};
+var tablePinValues = {
+  START: "start",
+  NONE: "none"
+};
+var tableSortDirectionValues = {
+  ASCENDING: "ascending",
+  DESCENDING: "descending"
+};
+export {
+  tableAlignValues,
+  tablePinValues,
+  tableSortDirectionValues
+};

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

@@ -0,0 +1,33 @@
+import { type SizeType } from '../../../common/props/size/size.props.js';
+import { type TableAlignType } from './Table.props.js';
+export declare const containerClasses: () => string;
+export declare const captionClasses: () => string;
+export declare const captionTitleClasses: () => string;
+export declare const captionMetaClasses: () => string;
+export declare const frameClasses: () => string;
+export declare const scrollerClasses: () => string;
+export declare const tableClasses: (size: SizeType) => string;
+export declare const headerCellClasses: ({ size, align, sortable, }: {
+    size: SizeType;
+    align: TableAlignType;
+    sortable: boolean;
+}) => string;
+export declare const sortButtonClasses: (size: SizeType, active: boolean) => string;
+export declare const sortIconClasses: (active: boolean) => string;
+export declare const rowClasses: () => string;
+export declare const cellClasses: ({ size, align, numeric, rowHeader, wrap, }: {
+    size: SizeType;
+    align: TableAlignType;
+    numeric: boolean;
+    rowHeader: boolean;
+    wrap: boolean;
+}) => string;
+export declare const emptyCellClasses: () => string;
+export declare const fadeClasses: (edge: "start" | "end") => string;
+export declare const srOnlyClasses: () => string;
+/**
+ * Rules utilities can't express: the last row has no divider, pinned cells
+ * need a solid background beneath the sticky offset, and the pinned edge and
+ * scroll fades depend on scroll state the component mirrors onto the frame.
+ */
+export declare const structuralStyles: import("lit").CSSResult;

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

@@ -0,0 +1,174 @@
+import '../../../types/global.d.ts';
+import '../../Button/src/Button.js';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type ToastOptions } from './Toaster.props.js';
+/**
+ * The page's notification region. Code anywhere shows a toast with the
+ * `toast()` function from `@ds-gn/ui/toast` (or this element's `show()`);
+ * mount one toaster per app.
+ *
+ * **Announcements.** Both live regions — `role="status"` (polite) and
+ * `role="alert"` (assertive, errors only) — exist from the moment the toaster
+ * connects, so screen readers have registered them before the first message.
+ * A toast is announced as "Title. Description." when it becomes visible, not
+ * when it is queued. Toasts never take focus.
+ *
+ * **Queue.** Up to `max-visible` timed toasts show at once; more wait, first in
+ * first out, behind a "+N queued" pill, and their timers do not start until
+ * they show. Persistent toasts (errors, and anything with `duration: 0`) skip
+ * the queue and don't count toward the limit, so they can never stall it.
+ *
+ * **Timing.** Info and success dismiss after 5s, warning after 7s; errors
+ * persist. Hovering or focusing anywhere in the region pauses every timer and
+ * fans the stack out.
+ *
+ * **Top layer.** The region renders into a container this element owns and is
+ * shown with `popover="manual"`, above page stacking contexts. A modal
+ * `<dialog>` makes everything outside it inert, top layer included, so while a
+ * `dsgn-modal` is open the container moves into that modal (its `toaster`
+ * slot) and is shown again above it; it moves back when the modal closes.
+ *
+ * **Copy.** All copy is supplied: the region's `label`, the dismiss button's
+ * `dismiss-label`, and the pill's `queued-label` and `paused-label`.
+ *
+ * @fires dsgn-dismiss - Fired when a toast is dismissed; `detail` is `{ id, reason }`, `reason` one of `timeout`, `close`, `action` or `programmatic`. React: `onDsgnDismiss`.
+ *
+ * @csspart region - The labelled notification region.
+ * @csspart queue - The "+N queued" pill.
+ * @csspart list - The stack of toasts.
+ * @csspart toast - Each toast's surface.
+ * @csspart icon - A toast's variant icon.
+ * @csspart title - A toast's title.
+ * @csspart description - A toast's description.
+ * @csspart links - A toast's row of links.
+ * @csspart actions - A toast's row of actions.
+ * @csspart action - Each action button.
+ * @csspart dismiss - The dismiss button.
+ * @csspart progress - The time-remaining bar.
+ */
+export declare class Toaster extends Base {
+    static styles: CSSResultGroup;
+    surface: SurfaceType;
+    /** Timed toasts shown at once before the rest queue. */
+    maxVisible: number;
+    /** Accessible name for the region, e.g. "Notifications". */
+    label: string;
+    /** Accessible name for each toast's dismiss button. */
+    dismissLabel: string;
+    /**
+     * The pill's text while toasts wait; `{count}` becomes the number waiting,
+     * e.g. "+{count} queued". Empty shows just "+N".
+     */
+    queuedLabel: string;
+    /** Added to the pill while the timers are paused, e.g. "paused". */
+    pausedLabel: string;
+    private _toasts;
+    private _hovered;
+    private _focused;
+    private _polite;
+    private _assertive;
+    private readonly _motion;
+    private readonly _topLayer;
+    /** The light-DOM element the region renders into; see "Top layer". */
+    private _container?;
+    private _containerRoot?;
+    /** Open `dsgn-modal`s, innermost last. */
+    private _modals;
+    /**
+     * Announcements held while the live regions settle after a move: a region
+     * that has just been inserted can miss a message written in the same frame.
+     */
+    private _held;
+    private _settling;
+    private _settleRun;
+    /** Show the region again on the next render, above a newer top layer. */
+    private _reraise;
+    /** Toasts whose entrance runs after the next render. */
+    private readonly _entering;
+    private _resize?;
+    private get _paused();
+    /** Show a toast and return its id. */
+    show(options: ToastOptions): string;
+    /** Dismiss one toast, or every toast (shown and queued) with no id. */
+    dismiss(id?: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /** The host renders nothing; the region renders into its own container. */
+    render(): import("lit").TemplateResult<1>;
+    private readonly _handleToastEvent;
+    private _handle;
+    private _add;
+    /**
+     * Show what may show: every persistent toast, and queued timed toasts while
+     * fewer than `maxVisible` timed toasts are showing.
+     */
+    private _promote;
+    private _reveal;
+    private _dismiss;
+    private _exit;
+    private _remove;
+    private _startTimer;
+    private _stopTimer;
+    private _syncTimers;
+    /** Drive the bar from the time left; the timer itself stays authoritative. */
+    private _startBar;
+    private _handlePointerEnter;
+    private _handlePointerLeave;
+    private _handleFocusIn;
+    private _handleFocusOut;
+    /**
+     * Dismissing the toast that holds focus removes its buttons, so focus moves
+     * to the next toast's dismiss button — the next older, else the next newer —
+     * or to the region itself, never to `<body>`.
+     */
+    private _moveFocusFrom;
+    private _announce;
+    private _write;
+    /** Drop a dismissed toast's text, so browsing the region finds only live ones. */
+    private _withdraw;
+    private _settle;
+    private readonly _handleModalOpen;
+    private readonly _handleModalClose;
+    /** The innermost open modal still in the document, if any. */
+    private _modalHome;
+    /** Create the region's container and keep it where it can be reached. */
+    private _place;
+    /** Into the top layer, above anything shown before it. */
+    private _raise;
+    /** Shown and leaving toasts, newest first. */
+    private _stack;
+    private _region;
+    private _itemFor;
+    private _cardFor;
+    /**
+     * Place each toast. Collapsed, the front toast sits at the bottom with up to
+     * two cards peeking 10px and 20px behind it at 94% and 88%; expanded, the
+     * stack fans out with an 8px gap. Toasts that changed place are moved from
+     * where they were by the motion engine (it measures the bottom edge, which
+     * scaling about the bottom leaves alone), so reduced motion jumps instead.
+     */
+    private _layout;
+    private _renderRegion;
+    private _observeCards;
+    private _startEntrances;
+    private _queueText;
+    private _regionTemplate;
+    private _toastTemplate;
+    private _bodyTemplate;
+    /**
+     * Its own template, as in DropdownMenu: the icon is the only part, so an
+     * engine that drops a child part inside `<svg>` cannot shift the others.
+     */
+    private _iconTemplate;
+    private _actionsTemplate;
+    private _linkTemplate;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-toaster': Toaster;
+    }
+}