@ds-gn/ui 0.9.0 → 0.11.0

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

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

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

@@ -0,0 +1,47 @@
+import { type SizeType } from '../../../common/props/size/size.props.js';
+import type { IconName } from '../../Icon/src/icons/icon-names.js';
+export declare const dropdownMenuItemVariantValues: {
+    readonly DEFAULT: "default";
+    readonly DANGER: "danger";
+};
+export type DropdownMenuItemVariantType = (typeof dropdownMenuItemVariantValues)[keyof typeof dropdownMenuItemVariantValues];
+/** One action in a `dsgn-dropdown-menu`. */
+export interface DropdownMenuItem {
+    /** Reported in `dsgn-select` when the item is activated. */
+    value: string;
+    /** Visible text, also the accessible name and the typeahead target. */
+    label: string;
+    /**
+     * Leading icon, by registered name (see `Icon.registerIcons`). Drawn at the
+     * menu's icon size; unregistered names render no icon.
+     */
+    icon?: IconName;
+    /**
+     * Trailing shortcut hint, such as `⌘C`. Display only: the menu does not bind
+     * the keys.
+     */
+    shortcut?: string;
+    /** Focusable but not activatable; marked `aria-disabled`. */
+    disabled?: boolean;
+    /** `danger` for destructive actions. Defaults to `default`. */
+    variant?: DropdownMenuItemVariantType;
+}
+/** A divider between groups of items. */
+export interface DropdownMenuSeparator {
+    separator: true;
+}
+export type DropdownMenuEntry = DropdownMenuItem | DropdownMenuSeparator;
+export declare const isDropdownMenuSeparator: (entry: DropdownMenuEntry) => entry is DropdownMenuSeparator;
+export declare const dropdownMenuAlignValues: {
+    readonly START: "start";
+    readonly END: "end";
+};
+export type DropdownMenuAlignType = (typeof dropdownMenuAlignValues)[keyof typeof dropdownMenuAlignValues];
+export declare const dropdownMenuAlignProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const dropdownMenuSizeValues: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export type DropdownMenuSizeType = SizeType;
+export declare const dropdownMenuSizeProps: import("lit").PropertyDeclaration<unknown, unknown>;

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

@@ -0,0 +1,54 @@
+// 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/DropdownMenu/src/DropdownMenu.props.ts
+var dropdownMenuItemVariantValues = {
+  DEFAULT: "default",
+  DANGER: "danger"
+};
+var isDropdownMenuSeparator = (entry) => ("separator" in entry) && entry.separator === true;
+var dropdownMenuAlignValues = {
+  START: "start",
+  END: "end"
+};
+var dropdownMenuAlignProps = enumCreator(Object.values(dropdownMenuAlignValues), "align", String, { reflect: true });
+var dropdownMenuSizeValues = sizeValues;
+var dropdownMenuSizeProps = sizeProps;
+export {
+  dropdownMenuAlignProps,
+  dropdownMenuAlignValues,
+  dropdownMenuItemVariantValues,
+  dropdownMenuSizeProps,
+  dropdownMenuSizeValues,
+  isDropdownMenuSeparator
+};

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

@@ -0,0 +1,20 @@
+import type { OverlayPlacement } from '../../../common/controllers/OverlayPositionController.js';
+import { type OverlayPanelState } from '../../../common/styles/overlay-panel.styles.js';
+import { type DropdownMenuSizeType } from './DropdownMenu.props.js';
+/** Anchors the menu's no-Popover-API fallback to the trigger. */
+export declare const anchorClasses: () => string;
+/**
+ * The menu: the panel shared with `dsgn-select`'s listbox, at least 232px wide
+ * and free to grow wider than its trigger, never past the viewport gutters.
+ */
+export declare const menuClasses: (panel: OverlayPanelState, placement: OverlayPlacement) => string;
+export declare const itemClasses: (size: DropdownMenuSizeType, { active, disabled, danger, }: Record<"active" | "disabled" | "danger", boolean>) => string;
+/**
+ * Leading icon. Secondary text colour on a default item; a disabled or
+ * destructive item's icon follows its text.
+ */
+export declare const itemIconClasses: (size: DropdownMenuSizeType, plain: boolean) => string;
+export declare const itemLabelClasses: () => string;
+/** Trailing shortcut hint, coloured like the icon. */
+export declare const itemShortcutClasses: (plain: boolean) => string;
+export declare const separatorClasses: () => string;

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

@@ -0,0 +1,39 @@
+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';
+/**
+ * Pairs one form control with its label, hint and error message.
+ *
+ * Field is not form-associated and renders nothing visible itself. Because
+ * `aria-labelledby`/`aria-describedby` cannot cross shadow roots, it writes
+ * `label`, `hint`, `error`, `required`, `invalid` (from a non-empty `error`)
+ * and `size` onto the slotted control, which renders them and wires the ARIA
+ * inside its own shadow root. Field is the source of truth for those
+ * properties: values set directly on the control are overwritten.
+ *
+ * Validation timing is the consumer's: Field shows whatever `error` it is given.
+ *
+ * @slot - One form control that implements the Field contract, such as `<dsgn-input>`.
+ */
+export declare class Field extends Base {
+    static styles: CSSResultGroup;
+    label: string;
+    /** Supporting text. Stays visible alongside an error. */
+    hint: string;
+    /** Error message. A non-empty value marks the control invalid. */
+    error: string;
+    required: boolean;
+    size: SizeType;
+    private _assigned;
+    private _control;
+    private _handleSlotChange;
+    private _syncControl;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-field': Field;
+    }
+}

package/dist/components/Field/src/Field.js

@@ -0,0 +1,203 @@
+var __legacyDecorateClassTS = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1;i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+// components/Field/src/Field.ts
+import { html as html2 } from "lit";
+import { property, queryAssignedElements } from "lit/decorators.js";
+
+// common/Base/Base.ts
+import { html, LitElement } from "lit";
+
+// common/helpers/define-element.ts
+var defineElement = (tag, ctor) => {
+  if (typeof customElements === "undefined")
+    return;
+  if (!customElements.get(tag))
+    customElements.define(tag, ctor);
+};
+
+// common/Base/Base.css
+import { css } from "lit";
+var styles = css`/* Base reset in @layer base ensures it comes before utilities in Tailwind v4 cascade
+   This prevents the reset from overriding component utility classes */
+@layer base {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(
+      --default-font-family,
+      var(--font-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  :host h1,
+  :host h2,
+  :host h3,
+  :host h4,
+  :host h5,
+  :host h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+`;
+var Base_default = styles;
+
+// common/Base/Base.ts
+class Base extends LitElement {
+  static styles = Base_default;
+  updateTheme(changedProperties, surface) {
+    if (changedProperties.has("surface")) {
+      if (surface) {
+        this.setAttribute("data-theme", surface);
+      } else {
+        this.removeAttribute("data-theme");
+      }
+    }
+  }
+  emit(name, detail, options = {}) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: options.cancelable ?? false
+    }));
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+defineElement("dsgn-base", Base);
+
+// common/helpers/field-control.ts
+var FIELD_CONTROL = Symbol.for("dsgn.field-control");
+var isFieldControl = (element) => element.constructor[FIELD_CONTROL] === true;
+
+// 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/Field/src/Field.styles.ts
+import { css as css2 } from "lit";
+var hostStyles = css2`
+  :host {
+    display: block;
+  }
+`;
+
+// components/Field/src/Field.ts
+class Field extends Base {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.hint = "";
+    this.error = "";
+    this.required = false;
+    this.size = sizeValues.MD;
+    this._control = null;
+  }
+  static styles = [Base.styles, hostStyles];
+  _handleSlotChange() {
+    this._control = this._assigned.find(isFieldControl) ?? null;
+    this._syncControl();
+    if (this._control)
+      return;
+    for (const element of this._assigned) {
+      const tag = element.localName;
+      if (tag.includes("-") && !customElements.get(tag)) {
+        customElements.whenDefined(tag).then(() => this._handleSlotChange());
+      }
+    }
+  }
+  _syncControl() {
+    const control = this._control;
+    if (!control)
+      return;
+    control.label = this.label;
+    control.hint = this.hint;
+    control.error = this.error;
+    control.required = this.required;
+    control.invalid = !!this.error;
+    control.size = this.size;
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this._syncControl();
+  }
+  render() {
+    return html2`<slot @slotchange=${this._handleSlotChange}></slot>`;
+  }
+}
+__legacyDecorateClassTS([
+  property({ type: String })
+], Field.prototype, "label", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Field.prototype, "hint", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Field.prototype, "error", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Field.prototype, "required", undefined);
+__legacyDecorateClassTS([
+  property({ ...sizeProps })
+], Field.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  queryAssignedElements()
+], Field.prototype, "_assigned", undefined);
+defineElement("dsgn-field", Field);
+export {
+  Field
+};

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * Field has no visuals of its own: the control renders the label, hint and
+ * error next to the element they describe (see `field-control.ts`). The host
+ * is only a block-level slot for one control.
+ */
+export declare const hostStyles: import("lit").CSSResult;

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

@@ -21,6 +21,11 @@ export declare class Icon extends Base {
      *   Icon.registerIcons({ myIcon: svg`<path d="..."/>` });
      */
     static registerIcons(registry: Record<string, SVGTemplateResult>): void;
+    /**
+     * The registered icon for `name`, or `undefined`. For components that take
+     * icons by name as data (a menu's items) but draw the `<svg>` themselves.
+     */
+    static resolve(name: string): SVGTemplateResult | undefined;
     /**
      * Surface theme variant (light or dark)
      */

package/dist/components/Icon/src/Icon.js

@@ -250,6 +250,9 @@ class Icon extends Base {
   static registerIcons(registry) {
     Icon._registry = { ...Icon._registry, ...registry };
   }
+  static resolve(name) {
+    return Icon._registry[name];
+  }
   willUpdate(changedProperties) {
     if (changedProperties.has("iconName") && !changedProperties.has("icon")) {
       this.icon = this.iconName ? Icon._registry[this.iconName] : undefined;

package/dist/components/Icon/src/icons/arrow-down.d.ts

@@ -0,0 +1 @@
+export declare const arrowDown: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/arrow-down.js

@@ -0,0 +1,6 @@
+// arrow-down.ts
+import { svg } from "lit";
+var arrowDown = svg`<path d="M12 5v14" /><path d="m19 12-7 7-7-7" />`;
+export {
+  arrowDown
+};

package/dist/components/Icon/src/icons/arrow-up.d.ts

@@ -0,0 +1 @@
+export declare const arrowUp: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/arrow-up.js

@@ -0,0 +1,6 @@
+// arrow-up.ts
+import { svg } from "lit";
+var arrowUp = svg`<path d="m5 12 7-7 7 7" /><path d="M12 19V5" />`;
+export {
+  arrowUp
+};

package/dist/components/Icon/src/icons/chevrons-up-down.d.ts

@@ -0,0 +1 @@
+export declare const chevronsUpDown: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/chevrons-up-down.js

@@ -0,0 +1,6 @@
+// chevrons-up-down.ts
+import { svg } from "lit";
+var chevronsUpDown = svg`<path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" />`;
+export {
+  chevronsUpDown
+};

package/dist/components/Icon/src/icons/cookie.d.ts

@@ -0,0 +1 @@
+export declare const cookie: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/cookie.js

@@ -0,0 +1,6 @@
+// cookie.ts
+import { svg } from "lit";
+var cookie = svg`<path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5" /><path d="M8.5 8.5v.01" /><path d="M16 15.5v.01" /><path d="M12 12v.01" /><path d="M11 17v.01" /><path d="M7 14v.01" />`;
+export {
+  cookie
+};

package/dist/components/Icon/src/icons/icon-names.d.ts

@@ -1,2 +1,2 @@
-export type IconName = 'arrowLeft' | 'arrowRight' | 'calendar' | 'check' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'circleAlert' | 'circleCheck' | 'circleX' | 'copy' | 'download' | 'ellipsis' | 'ellipsisVertical' | 'externalLink' | 'eye' | 'eyeOff' | 'info' | 'loader' | 'mail' | 'menu' | 'minus' | 'pencil' | 'plus' | 'search' | 'settings' | 'trash2' | 'triangleAlert' | 'upload' | 'user' | 'x';
+export type IconName = 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'calendar' | 'check' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'chevronsUpDown' | 'circleAlert' | 'circleCheck' | 'circleX' | 'cookie' | 'copy' | 'download' | 'ellipsis' | 'ellipsisVertical' | 'externalLink' | 'eye' | 'eyeOff' | 'info' | 'loader' | 'mail' | 'menu' | 'minus' | 'pencil' | 'plus' | 'search' | 'settings' | 'trash2' | 'triangleAlert' | 'upload' | 'user' | 'x';
 export declare const iconNames: IconName[];

package/dist/components/Icon/src/icons/icon-names.js

@@ -1,17 +1,21 @@
 // Auto-generated by build/generate-icons.ts — do not edit manually
 
 export const iconNames = [
+  'arrowDown',
   'arrowLeft',
   'arrowRight',
+  'arrowUp',
   'calendar',
   'check',
   'chevronDown',
   'chevronLeft',
   'chevronRight',
   'chevronUp',
+  'chevronsUpDown',
   'circleAlert',
   'circleCheck',
   'circleX',
+  'cookie',
   'copy',
   'download',
   'ellipsis',

package/dist/components/Icon/src/icons/index.d.ts

@@ -1,14 +1,18 @@
+export { arrowDown } from './arrow-down';
 export { arrowLeft } from './arrow-left';
 export { arrowRight } from './arrow-right';
+export { arrowUp } from './arrow-up';
 export { calendar } from './calendar';
 export { check } from './check';
 export { chevronDown } from './chevron-down';
 export { chevronLeft } from './chevron-left';
 export { chevronRight } from './chevron-right';
 export { chevronUp } from './chevron-up';
+export { chevronsUpDown } from './chevrons-up-down';
 export { circleAlert } from './circle-alert';
 export { circleCheck } from './circle-check';
 export { circleX } from './circle-x';
+export { cookie } from './cookie';
 export { copy } from './copy';
 export { download } from './download';
 export { ellipsis } from './ellipsis';

package/dist/components/Icon/src/icons/index.js

@@ -1,16 +1,20 @@
 // Auto-generated by build/generate-icons.ts — do not edit manually
 
+export { arrowDown } from './arrow-down.js';
 export { arrowLeft } from './arrow-left.js';
 export { arrowRight } from './arrow-right.js';
+export { arrowUp } from './arrow-up.js';
 export { calendar } from './calendar.js';
 export { check } from './check.js';
 export { chevronDown } from './chevron-down.js';
 export { chevronLeft } from './chevron-left.js';
 export { chevronRight } from './chevron-right.js';
 export { chevronUp } from './chevron-up.js';
+export { chevronsUpDown } from './chevrons-up-down.js';
 export { circleAlert } from './circle-alert.js';
 export { circleCheck } from './circle-check.js';
 export { circleX } from './circle-x.js';
+export { cookie } from './cookie.js';
 export { copy } from './copy.js';
 export { download } from './download.js';
 export { ellipsis } from './ellipsis.js';

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

@@ -4,19 +4,49 @@ import { Base } from '../../../common/Base/Base.js';
 import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
 import { type InputSizeType, type InputTypeType } from './Input.props.js';
 /**
+ * Form-associated text field. Renders its own label, hint and error inside the
+ * shadow root, next to the native `<input>` they describe, so the label is
+ * associated with `for` and the messages with `aria-describedby` (error first,
+ * then hint). Inside a `<dsgn-field>`, Field supplies `label`, `hint`, `error`,
+ * `required`, `invalid` and `size`; see `common/helpers/field-control.ts`.
+ *
  * @fires dsgn-input - Fired when the value changes; `detail` is `{ value, name }`.
+ *
+ * @csspart label - The visible `<label>`.
+ * @csspart required-indicator - The `*` appended to the label when `required`. Hidden from assistive technology; `required` on the input is what is announced.
+ * @csspart input - The native `<input>`.
+ * @csspart hint - Persistent hint text below the input.
+ * @csspart error - Error message, icon and text, below the hint.
  */
 export declare class Input extends Base {
     #private;
     static styles: CSSResultGroup;
     static formAssociated: boolean;
+    /**
+     * `focus()` on the host (and a click on a `<label>` pointing at it) moves
+     * focus to the inner `<input>`, so consumers can focus the field after
+     * setting an error and have it announced.
+     */
+    static shadowRootOptions: ShadowRootInit;
     constructor();
     surface: SurfaceType;
     type: InputTypeType;
     placeholder: string;
     label: string;
+    /**
+     * Accessible name for a field with no visible `label`. Ignored when `label`
+     * is set, so the visible text and the announced name cannot disagree.
+     */
     ariaLabel: string;
+    /** Supporting text below the input. Stays visible alongside an error. */
+    hint: string;
+    /** Error message. A non-empty value also marks the field invalid. */
     error: string;
+    /**
+     * Marks the field invalid (`aria-invalid` and error styling) without a
+     * message, for example when the error is reported elsewhere on the page.
+     */
+    invalid: boolean;
     size: InputSizeType;
     /**
      * Current value. Deliberately not reflected: a native `<input>`'s `value`
@@ -34,6 +64,8 @@ export declare class Input extends Base {
     name: string;
     disabled: boolean;
     required: boolean;
+    /** Focusable and copyable, but not editable. */
+    readOnly: boolean;
     /**
      * Disabled state inherited from an ancestor `<fieldset>`/form owner, kept
      * separate from the authored `disabled` property. Writing the inherited state
@@ -46,11 +78,16 @@ export declare class Input extends Base {
     private _formDisabled;
     /** Authored `disabled` combined with any state inherited from the form. */
     private get isDisabled();
+    private get isInvalid();
+    private get state();
     private _syncValidity;
     private _handleInput;
     formResetCallback(): void;
     formDisabledCallback(disabled: boolean): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private _renderLabel;
+    private _renderHint;
+    private _renderError;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {