@latty-ds/web 0.10.4 → 1.0.0

package/dist/components/combobox/index.js

@@ -9,6 +9,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 
+// src/components/shared/form-field.ts
+var fieldCount = 0;
+var createFieldIds = () => ({ helper: `lt-field-${fieldCount++}-helper` });
+
 // src/components/combobox/combobox.ts
 import { html as html2, nothing } from "lit";
 
@@ -1447,8 +1451,8 @@ var comboboxStyles = [
     }
 
     .required-indicator {
-      color: var(--lt-color-error-500);
-      margin-left: 2px;
+      color: var(--lt-text-error);
+      margin-inline-start: 2px;
     }
 
     .input-wrap {
@@ -1473,7 +1477,7 @@ var comboboxStyles = [
     }
 
     :host([variant='error']) .input-wrap {
-      border-color: var(--lt-color-error-500);
+      border-color: var(--lt-text-error);
     }
     :host([variant='error'][open]) .input-wrap,
     :host([variant='error']) .input-wrap:focus-within {
@@ -1486,7 +1490,10 @@ var comboboxStyles = [
       border-color: var(--lt-color-warning-500);
     }
 
-    :host([disabled]) .input-wrap {
+    /* :host(:disabled) — the browser matches this automatically for a form-associated element inside a
+       disabled <fieldset>, no JS required; :host([disabled]) covers the component's own explicit attribute. */
+    :host([disabled]) .input-wrap,
+    :host(:disabled) .input-wrap {
       background: var(--lt-bg-neutral-subtle);
       cursor: not-allowed;
       pointer-events: none;
@@ -1506,7 +1513,8 @@ var comboboxStyles = [
       color: var(--lt-text-placeholder, var(--lt-color-neutral-400));
     }
 
-    :host([disabled]) input {
+    :host([disabled]) input,
+    :host(:disabled) input {
       color: var(--lt-text-subtle);
       cursor: not-allowed;
     }
@@ -1567,16 +1575,21 @@ var comboboxStyles = [
       font-family: inherit;
       font-size: 0.9375rem;
       padding: var(--lt-spacing-2) var(--lt-spacing-3);
-      text-align: left;
+      text-align: start;
       width: 100%;
     }
 
     .option:hover {
       background: var(--lt-bg-neutral-subtle);
     }
+    .option[data-active='true'] {
+      background: var(--lt-bg-neutral-subtle);
+      outline: 2px solid var(--lt-interactive-primary-bg);
+      outline-offset: -2px;
+    }
     .option[aria-selected='true'] {
       background: var(--lt-bg-primary-subtle);
-      color: var(--lt-color-primary-700);
+      color: var(--lt-text-primary);
       font-weight: 500;
     }
     .option[disabled] {
@@ -1598,13 +1611,22 @@ var comboboxStyles = [
     }
 
     :host([variant='error']) .helper-text {
-      color: var(--lt-color-error-600);
+      color: var(--lt-text-error);
     }
     :host([variant='success']) .helper-text {
-      color: var(--lt-color-success-600);
+      color: var(--lt-text-success);
     }
     :host([variant='warning']) .helper-text {
-      color: var(--lt-color-warning-700);
+      color: var(--lt-text-warning);
+    }
+
+    /* ── Reduced motion ───────────────────────────────────────────────────── */
+
+    @media (prefers-reduced-motion: reduce) {
+      .input-wrap,
+      .chevron {
+        transition: none;
+      }
     }
   `
 ];
@@ -1795,6 +1817,20 @@ var textStyles = css3`
 `;
 
 // src/components/text/text.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "div",
+  "label",
+  "strong",
+  "em"
+]);
 var VARIANT_TAG = {
   "display-2xl": "p",
   "display-xl": "p",
@@ -1819,7 +1855,8 @@ var Text = class extends ThemeableElement {
     this.as = "";
   }
   render() {
-    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    const requested = this.as && ALLOWED_TAGS.has(this.as) ? this.as : "";
+    const tag = unsafeStatic(requested || VARIANT_TAG[this.variant] || "p");
     return html`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };
@@ -1834,10 +1871,56 @@ Text = __decorateClass([
   customElement("lt-text")
 ], Text);
 
+// src/components/shared/form-default.ts
+var FormDefaultController = class {
+  constructor(host, get) {
+    this._captured = false;
+    this._get = get;
+    host.addController(this);
+  }
+  hostConnected() {
+    if (this._captured) return;
+    this._captured = true;
+    this.value = this._get();
+  }
+};
+
+// src/components/shared/form-disabled.ts
+var FormDisabledController = class {
+  constructor(host) {
+    this._fieldsetDisabled = false;
+    this._host = host;
+    host.addController(this);
+  }
+  // No-op — this controller has no connect-time work of its own (formDisabledCallback drives it instead), but
+  // ReactiveController's members are all optional, and a class satisfying an all-optional interface with no
+  // members in common is a TS error (TS2559); this gives it one.
+  hostConnected() {
+  }
+  /** Whether an ancestor `<fieldset>` is currently disabled. */
+  get fieldsetDisabled() {
+    return this._fieldsetDisabled;
+  }
+  setFieldsetDisabled(disabled) {
+    if (this._fieldsetDisabled === disabled) return;
+    this._fieldsetDisabled = disabled;
+    this._host.requestUpdate();
+  }
+};
+
 // src/components/combobox/combobox.ts
+var comboboxCount = 0;
+var DEFAULT_LABELS = {
+  validationMessage: "Please select an option",
+  noResults: "No results"
+};
 var Combobox = class extends ThemeableElement {
   constructor() {
     super();
+    this._default = new FormDefaultController(this, () => this.value);
+    this._fieldsetDisabled = new FormDisabledController(this);
+    // Scopes generated option/listbox ids to this instance, so two comboboxes on the same page don't collide.
+    this._uid = `lt-combobox-${comboboxCount++}`;
     this.options = [];
     this.value = "";
     this.label = "";
@@ -1848,13 +1931,24 @@ var Combobox = class extends ThemeableElement {
     this.disabled = false;
     this.required = false;
     this.name = "";
+    this.labels = {};
     this.query = "";
     this.open = false;
     this.activeIndex = -1;
     this._cleanupClickOutside = null;
     this._floatingCleanup = null;
+    this._fieldIds = createFieldIds();
+    // Now that options are tabindex="-1" (see SEL-3/CMB-1), the input is the only focusable thing in this
+    // component's shadow root — so any focusout while open means focus is leaving the combobox entirely, unlike
+    // lt-dropdown, which has to check where focus actually went.
+    this._onFocusOut = () => {
+      if (this.open) this.closeDropdown();
+    };
     this._internals = this.attachInternals();
   }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
   get selectedLabel() {
     return this.options.find((o) => o.value === this.value)?.label ?? "";
   }
@@ -1862,8 +1956,26 @@ var Combobox = class extends ThemeableElement {
     const q = this.query.toLowerCase();
     return this.options.filter((o) => o.label.toLowerCase().includes(q));
   }
+  // `activeIndex` counts positions in this list (enabled options only) — using the same list here and in
+  // handleKeydown for both is what keeps the highlighted option and the one Enter selects in agreement (they
+  // used to disagree once any option was disabled: the index came from this list, but the id/highlight below
+  // used to come from the unfiltered one).
+  get enabledOpts() {
+    return this.filtered.filter((o) => !o.disabled);
+  }
+  // Ids are derived from position in the unfiltered (but query-filtered) list, since that's what's actually
+  // rendered — every option, enabled or not, gets one.
+  _idFor(opt) {
+    return `${this._uid}-option-${this.filtered.indexOf(opt)}`;
+  }
+  // Clicking an option button would otherwise focus it first (the default mousedown action) — a button that
+  // momentarily takes focus, then vanishes as the dropdown closes, drops focus off the input. Suppressing just
+  // that default action leaves the click itself (and selectOption) untouched, and the input stays focused.
+  _preventFocusSteal(e) {
+    e.preventDefault();
+  }
   async openDropdown() {
-    if (this.disabled) return;
+    if (this._isDisabled || this.open) return;
     this.open = true;
     this.setAttribute("open", "");
     this.query = "";
@@ -1899,11 +2011,21 @@ var Combobox = class extends ThemeableElement {
     this.openDropdown();
   }
   handleKeydown(e) {
-    const opts = this.filtered.filter((o) => !o.disabled);
     if (e.key === "Escape") {
-      this.closeDropdown();
+      if (this.open) {
+        e.preventDefault();
+        this.closeDropdown();
+      }
+      return;
+    }
+    if (!this.open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        this.openDropdown();
+      }
       return;
     }
+    const opts = this.enabledOpts;
     if (e.key === "ArrowDown") {
       e.preventDefault();
       this.activeIndex = Math.min(this.activeIndex + 1, opts.length - 1);
@@ -1918,9 +2040,11 @@ var Combobox = class extends ThemeableElement {
   connectedCallback() {
     super.connectedCallback();
     this._cleanupClickOutside = createClickOutsideHandler(this, () => this.closeDropdown(), { event: "click" });
+    this.addEventListener("focusout", this._onFocusOut);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeEventListener("focusout", this._onFocusOut);
     this._cleanupClickOutside?.();
     this._cleanupClickOutside = null;
     this._floatingCleanup?.();
@@ -1930,13 +2054,20 @@ var Combobox = class extends ThemeableElement {
     this._internals.setFormValue(this.value || null);
     const input = this.shadowRoot?.querySelector("input");
     if (this.required && !this.value && input) {
-      this._internals.setValidity({ valueMissing: true }, "Please select an option", input);
+      this._internals.setValidity({ valueMissing: true }, this._labels.validationMessage, input);
     } else {
       this._internals.setValidity({});
     }
   }
   formResetCallback() {
-    this.value = "";
+    this.value = this._default.value;
+  }
+  formDisabledCallback(disabled) {
+    this._fieldsetDisabled.setFieldsetDisabled(disabled);
+  }
+  /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+  get _isDisabled() {
+    return this.disabled || this._fieldsetDisabled.fieldsetDisabled;
   }
   checkValidity() {
     return this._internals.checkValidity();
@@ -1946,6 +2077,7 @@ var Combobox = class extends ThemeableElement {
   }
   render() {
     const opts = this.filtered;
+    const activeOption = this.enabledOpts[this.activeIndex];
     const displayValue = this.open ? this.query : this.selectedLabel;
     const inputRow = html2`
       <div class="input-wrap" @click=${this.openDropdown}>
@@ -1954,11 +2086,14 @@ var Combobox = class extends ThemeableElement {
           role="combobox"
           aria-expanded=${this.open}
           aria-autocomplete="list"
+          aria-describedby=${this.helperText ? this._fieldIds.helper : nothing}
           aria-required=${this.required}
+          aria-controls=${this.open ? `${this._uid}-listbox` : nothing}
+          aria-activedescendant=${this.open && activeOption ? this._idFor(activeOption) : nothing}
           autocomplete="off"
           placeholder=${this.open ? this.placeholder : this.selectedLabel || this.placeholder}
           .value=${displayValue}
-          ?disabled=${this.disabled}
+          ?disabled=${this._isDisabled}
           @focus=${this.handleFocus}
           @input=${this.handleInput}
           @keydown=${this.handleKeydown}
@@ -1974,24 +2109,27 @@ var Combobox = class extends ThemeableElement {
             </label>` : nothing}
         ${inputRow}
         ${this.open ? html2`
-              <div class="dropdown" popover="manual" role="listbox">
+              <div class="dropdown" id=${`${this._uid}-listbox`} popover="manual" role="listbox">
                 ${opts.length > 0 ? opts.map(
-      (opt, i) => html2`
+      (opt) => html2`
                         <button
+                          id=${this._idFor(opt)}
                           class="option"
                           role="option"
+                          tabindex="-1"
                           aria-selected=${opt.value === this.value}
                           ?disabled=${opt.disabled}
-                          data-active=${i === this.activeIndex}
+                          data-active=${opt === activeOption}
+                          @mousedown=${this._preventFocusSteal}
                           @click=${() => this.selectOption(opt)}
                         >
                           ${opt.label}
                         </button>
                       `
-    ) : html2`<p class="no-results">No results</p>`}
+    ) : html2`<p class="no-results">${this._labels.noResults}</p>`}
               </div>
             ` : nothing}
-        ${this.helperText ? html2`<span class="helper-text">${this.helperText}</span>` : nothing}
+        ${this.helperText ? html2`<span id=${this._fieldIds.helper} class="helper-text">${this.helperText}</span>` : nothing}
       </div>
     `;
   }
@@ -2002,7 +2140,7 @@ __decorateClass([
   property3({ type: Array })
 ], Combobox.prototype, "options", 2);
 __decorateClass([
-  property3({ reflect: true })
+  property3()
 ], Combobox.prototype, "value", 2);
 __decorateClass([
   property3({ reflect: true })
@@ -2028,6 +2166,9 @@ __decorateClass([
 __decorateClass([
   property3({ reflect: true })
 ], Combobox.prototype, "name", 2);
+__decorateClass([
+  property3({ type: Object })
+], Combobox.prototype, "labels", 2);
 __decorateClass([
   state()
 ], Combobox.prototype, "query", 2);

package/dist/components/date-input/date-input.d.ts

@@ -2,8 +2,9 @@ import { ThemeableElement } from '../../base';
 import '@latty-ds/icons';
 import '../calendar/calendar';
 import '../text/text';
-import type { DateInputSize, DateInputVariant, DateInputFormat } from './date-input.types';
+import type { DateInputSize, DateInputVariant, DateInputFormat, DateInputLabels } from './date-input.types';
 import type { Calendar } from '../calendar/calendar';
+import type { CalendarWeekStart } from '../calendar/calendar.types';
 /**
  * A text field that opens an `lt-calendar` popover for visual date selection.
  *
@@ -25,8 +26,11 @@ export declare class DateInput extends ThemeableElement {
     static styles: import("lit").CSSResult[];
     static formAssociated: boolean;
     private _internals;
+    private _default;
+    private _fieldsetDisabled;
     constructor();
-    /** Selected date in ISO format (YYYY-MM-DD). */
+    /** Selected date in ISO format (YYYY-MM-DD). Not reflected as an attribute — read the property, or the
+     * `change` event's `detail.value`, instead of `getAttribute('value')`/`[value]`. */
     value: string;
     /** Minimum selectable date (ISO format). Dates before this are disabled. */
     min: string;
@@ -36,8 +40,12 @@ export declare class DateInput extends ThemeableElement {
     locale: string;
     /** How to format the selected date in the trigger field. Maps to `Intl.DateTimeFormat` `dateStyle`. */
     format: DateInputFormat;
-    /** First day of the week in the calendar. 0 = Sunday, 1 = Monday. */
-    weekStart: '0' | '1';
+    /**
+     * First day of the week in the calendar (0 = Sunday … 6 = Saturday). Defaults to whatever `locale` implies —
+     * set this explicitly only to override that. Forwarded as-is to the internal `lt-calendar`, which does the
+     * actual derivation when this is left unset.
+     */
+    weekStart?: CalendarWeekStart;
     /** Field label displayed above the trigger. */
     label: string;
     /** Placeholder text shown when no date is selected. */
@@ -52,21 +60,28 @@ export declare class DateInput extends ThemeableElement {
     disabled: boolean;
     /** Whether the field is required. */
     required: boolean;
-    /** Name used in form submission via a hidden input. */
+    /** Name used in form submission (through `ElementInternals`, so no hidden input is rendered). */
     name: string;
-    /** Individual dates to disable in the calendar, as Date objects. */
+    /** Individual dates to disable in the calendar, as Date objects. Set as a JS property (`.disabledDates`). */
     disabledDates: Calendar['disabledDates'];
+    /** Overridable UI text (validation message, calendar popover's accessible label), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<DateInputLabels>;
+    private get _labels();
     private _open;
     private _cleanupClickOutside;
     private _floatingCleanup;
+    private readonly _fieldIds;
     private get _displayValue();
     private _openDropdown;
     private _closeDropdown;
     disconnectedCallback(): void;
     private _handleCalendarChange;
     private _handleDropdownKeyDown;
-    updated(): void;
+    updated(changed: Map<string, unknown>): void;
     formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+    private get _isDisabled();
     checkValidity(): boolean;
     reportValidity(): boolean;
     render(): import("lit").TemplateResult<1>;

package/dist/components/date-input/date-input.types.d.ts

@@ -1,3 +1,10 @@
 export type DateInputSize = 'sm' | 'md' | 'lg';
 export type DateInputVariant = 'default' | 'success' | 'warning' | 'error';
 export type DateInputFormat = 'short' | 'medium' | 'long' | 'full';
+/** Overridable UI text for `lt-date-input`, for i18n. */
+export interface DateInputLabels {
+    /** Validation message shown when a required field has no date selected. */
+    validationMessage: string;
+    /** Accessible label for the calendar popover dialog. */
+    datePicker: string;
+}