@ds-gn/ui 0.9.0 → 0.11.0

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

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

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

@@ -0,0 +1,19 @@
+import { type SizeType } from '../../../common/props/size/size.props.js';
+/** One choice in a `dsgn-select`. */
+export interface SelectOption {
+    /** Submitted with the form and reported in `dsgn-change`. */
+    value: string;
+    /** Visible text, also used for typeahead. */
+    label: string;
+    /** Shown but not selectable; skipped by the keyboard. */
+    disabled?: boolean;
+    /** Short trailing note, for example why the option is unavailable. */
+    tag?: string;
+}
+export declare const selectSizeValues: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export type SelectSizeType = SizeType;
+export declare const selectSizeProps: import("lit").PropertyDeclaration<unknown, unknown>;

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

@@ -0,0 +1,40 @@
+// common/helpers/enum-validator.ts
+var enumValidator = (propName, enumSet, candidateValue) => {
+  if (!enumSet.has(candidateValue)) {
+    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
+  }
+};
+
+// common/helpers/enum-creator.ts
+var enumCreator = (acceptableValues, propName, type, other = {}) => {
+  const acceptableValuesSet = new Set(acceptableValues);
+  return {
+    type,
+    hasChanged(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        enumValidator(propName, acceptableValuesSet, newValue);
+        return true;
+      }
+      return false;
+    },
+    ...other
+  };
+};
+
+// common/props/size/size.props.ts
+var sizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+var sizeProps = enumCreator(Object.values(sizeValues), "size", String, {
+  reflect: true
+});
+
+// components/Select/src/Select.props.ts
+var selectSizeValues = sizeValues;
+var selectSizeProps = sizeProps;
+export {
+  selectSizeProps,
+  selectSizeValues
+};

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

@@ -0,0 +1,30 @@
+import type { OverlayPlacement } from '../../../common/controllers/OverlayPositionController.js';
+import { type OverlayPanelState } from '../../../common/styles/overlay-panel.styles.js';
+import { type SelectSizeType } from './Select.props.js';
+/**
+ * Visual state of the trigger. Exactly one applies, so the border and
+ * background utilities never compete: disabled wins over open, which wins over
+ * invalid. The trigger matches `dsgn-input` state for state.
+ */
+export type SelectState = 'default' | 'open' | 'invalid' | 'disabled';
+export declare const triggerClasses: (size: SelectSizeType, state: SelectState) => string;
+export declare const valueClasses: (isPlaceholder: boolean) => string;
+export declare const chevronClasses: (size: SelectSizeType, open: boolean) => string;
+export declare const anchorClasses: () => string;
+/**
+ * The listbox: the shared overlay panel (see `common/styles`), as wide as the
+ * trigger — never so narrow that labels truncate on a compact trigger, which
+ * is what the position shift is for — and scrolling past ten or so options.
+ */
+export declare const listboxClasses: (panel: OverlayPanelState, placement: OverlayPlacement) => string;
+export declare const optionClasses: (size: SelectSizeType, { active, selected, disabled, }: Record<"active" | "selected" | "disabled", boolean>) => string;
+export declare const checkClasses: () => string;
+export declare const checkSlotClasses: () => string;
+export declare const optionLabelClasses: () => string;
+export declare const optionTagClasses: () => string;
+export declare const wrapperClasses: () => string;
+export declare const labelClasses: (size: SelectSizeType, disabled: boolean) => string;
+export declare const requiredClasses: () => string;
+export declare const hintClasses: (size: SelectSizeType) => string;
+export declare const errorClasses: (size: SelectSizeType) => string;
+export declare const errorIconClasses: () => string;

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

@@ -0,0 +1,93 @@
+import '../../../types/global.d.ts';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type SizeType } from '../../../common/props/size/size.props.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type TableColumn, type TableRow, type TableSort } from './Table.props.js';
+/**
+ * A semantic data table with sortable columns.
+ *
+ * The table never sorts data itself. Clicking a sortable header fires
+ * `dsgn-sort`; the consumer reorders `rows` and passes the new state back as
+ * `sort`, which drives `aria-sort` and the header icons. A column that is not
+ * the current sort sorts ascending; the current ascending column sorts
+ * descending. There is no unsorted step.
+ *
+ * Every cell renders `row[column.key]` as text. To put markup in a cell — a
+ * badge, an avatar, a menu button — slot an element into
+ * `cell:<rowKey>:<columnKey>`, where `rowKey` is the row's `row-key` field.
+ * Slotted content stays in the light DOM, so consumer styles, handlers and
+ * framework components work as usual.
+ *
+ * The table scrolls sideways below its natural width. The first column stays
+ * pinned while it scrolls (see `TableColumn.pin`), and the side with more
+ * content shows an edge fade.
+ *
+ * @fires dsgn-sort - Fired when a sortable header is clicked; `detail` is `{ column, direction }`, the sort the consumer should apply.
+ *
+ * @slot empty - Shown in a single full-width cell when `rows` is empty. Headers stay visible.
+ * @slot cell:<rowKey>:<columnKey> - Replaces the text of one cell.
+ *
+ * @csspart container - The bordered outer box.
+ * @csspart caption - The title bar above the table.
+ * @csspart scroller - The horizontally scrolling region around the table.
+ * @csspart table - The `<table>` element.
+ * @csspart header-cell - Each column header `<th>`.
+ * @csspart sort-button - The button inside a sortable header.
+ * @csspart row - Each body `<tr>`.
+ * @csspart cell - Each body cell, including row headers.
+ * @csspart row-header - Each body `<th scope="row">`.
+ * @csspart empty - The full-width cell holding the `empty` slot.
+ */
+export declare class Table extends Base {
+    static styles: CSSResultGroup;
+    surface: SurfaceType;
+    size: SizeType;
+    /** Column definitions, in display order. */
+    columns: TableColumn[];
+    /** Row data, already in the order to display. */
+    rows: TableRow[];
+    /** Row field that identifies a row in cell slot names. Falls back to the row index. */
+    rowKey: string;
+    /** The current sort, as applied by the consumer. `null` when unsorted. */
+    sort: TableSort | null;
+    /** Visible title. Labels the table and its scroll region. */
+    caption: string;
+    /** Secondary text beside the caption, such as a row count. */
+    captionMeta: string;
+    /**
+     * Accessible name used when there is no visible `caption`, for a table
+     * titled by a heading outside the component.
+     */
+    label: string;
+    private _overflow;
+    private _moreStart;
+    private _moreEnd;
+    private _scroller;
+    private _resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private _observeSize;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /** Mirrors which sides have hidden content, for the pinned edge and fades. */
+    private _updateEdges;
+    private _handleSort;
+    private get _rowHeaderKey();
+    private _isPinned;
+    private _alignOf;
+    private _ariaSort;
+    private _keyOf;
+    private _renderSortIcon;
+    private _renderHeaderContent;
+    private _renderHeaderCell;
+    private _renderCell;
+    private _renderBody;
+    private _renderCaption;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-table': Table;
+    }
+}