@latty-ds/web 0.10.4 → 1.0.0

package/dist/components/checkbox/index.js

@@ -34,6 +34,13 @@ __decorateClass([
   property({ reflect: true })
 ], ThemeableElement.prototype, "theme", 2);
 
+// src/utils/dev-warn.ts
+var devWarn = (tag, message) => {
+  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    console.warn(`[${tag}] ${message}`);
+  }
+};
+
 // src/components/checkbox/checkbox.ts
 import { customElement, property as property2, query } from "lit/decorators.js";
 
@@ -62,7 +69,10 @@ var checkboxStyles = css`
     flex-direction: row-reverse;
   }
 
-  :host([disabled]) .checkbox-wrapper {
+  /* :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]) .checkbox-wrapper,
+  :host(:disabled) .checkbox-wrapper {
     cursor: not-allowed;
     opacity: 0.6;
   }
@@ -195,13 +205,63 @@ var checkboxStyles = css`
     background: var(--lt-interactive-info-bg-hover);
     border-color: var(--lt-interactive-info-bg-hover);
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    input[type='checkbox'] {
+      transition: none;
+    }
+  }
 `;
 
+// 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/checkbox/checkbox.ts
 import "@latty-ds/icons";
+var DEFAULT_LABELS = {
+  validationMessage: "Please check this box"
+};
 var Checkbox = class extends ThemeableElement {
   constructor() {
     super();
+    this._default = new FormDefaultController(this, () => this.checked);
+    this._fieldsetDisabled = new FormDisabledController(this);
     this.variant = "primary";
     this.size = "md";
     this.checked = false;
@@ -212,21 +272,32 @@ var Checkbox = class extends ThemeableElement {
     this.labelPosition = "right";
     this.name = "";
     this.value = "on";
+    this.labels = {};
     this._internals = this.attachInternals();
   }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
   updated(changedProperties) {
     if (changedProperties.has("indeterminate") && this.input) {
       this.input.indeterminate = this.indeterminate;
     }
     this._internals.setFormValue(this.checked ? this.value : null);
     if (this.required && !this.checked && this.input) {
-      this._internals.setValidity({ valueMissing: true }, "Please check this box", this.input);
+      this._internals.setValidity({ valueMissing: true }, this._labels.validationMessage, this.input);
     } else {
       this._internals.setValidity({});
     }
   }
   formResetCallback() {
-    this.checked = false;
+    this.checked = 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();
@@ -269,6 +340,9 @@ var Checkbox = class extends ThemeableElement {
     }
     return html``;
   }
+  firstUpdated() {
+    if (!this.label) devWarn("lt-checkbox", "no `label` \u2014 the checkbox has no accessible name");
+  }
   render() {
     return html`
       <label class="checkbox-wrapper">
@@ -276,7 +350,7 @@ var Checkbox = class extends ThemeableElement {
           <input
             type="checkbox"
             .checked=${this.checked}
-            ?disabled=${this.disabled}
+            ?disabled=${this._isDisabled}
             ?required=${this.required}
             name=${this.name}
             value=${this.value}
@@ -300,7 +374,7 @@ __decorateClass([
   property2({ reflect: true })
 ], Checkbox.prototype, "size", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true })
+  property2({ type: Boolean })
 ], Checkbox.prototype, "checked", 2);
 __decorateClass([
   property2({ type: Boolean, reflect: true })
@@ -323,6 +397,9 @@ __decorateClass([
 __decorateClass([
   property2({ reflect: true })
 ], Checkbox.prototype, "value", 2);
+__decorateClass([
+  property2({ type: Object })
+], Checkbox.prototype, "labels", 2);
 __decorateClass([
   query('input[type="checkbox"]')
 ], Checkbox.prototype, "input", 2);

package/dist/components/chip/chip.d.ts

@@ -1,6 +1,6 @@
 import { ThemeableElement } from '../../base';
 import '@latty-ds/icons';
-import type { ChipVariant, ChipSize, ChipAppearance } from './chip.types';
+import type { ChipVariant, ChipSize, ChipAppearance, ChipLabels } from './chip.types';
 /**
  * Compact label element for tags, filters, and attributes.
  *
@@ -29,6 +29,9 @@ export declare class Chip extends ThemeableElement {
     deletable: boolean;
     /** Background color override. Accepts a hex value (#1a1a2e) or a CSS token name (--lt-color-primary-600). */
     background: string;
+    /** Overridable UI text (the delete button's accessible name), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<ChipLabels>;
+    private get _labels();
     private get _deleteIconSize();
     private _handleDelete;
     render(): import("lit").TemplateResult<1>;

package/dist/components/chip/chip.types.d.ts

@@ -1,3 +1,8 @@
 export type ChipVariant = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
 export type ChipSize = 'sm' | 'md' | 'lg';
 export type ChipAppearance = 'filled' | 'outlined';
+/** Overridable UI text, for i18n — English defaults; override only the keys you need. */
+export interface ChipLabels {
+    /** Accessible label for the delete/remove button. */
+    remove: string;
+}

package/dist/components/chip/index.js

@@ -82,6 +82,10 @@ var chipStyles = css`
     display: inline-flex;
     flex-shrink: 0;
     justify-content: center;
+    /* WCAG 2.5.8: a 24px target. The negative margin gives the extra size back, so the chip layout is unchanged. */
+    margin: -6px;
+    min-height: 24px;
+    min-width: 24px;
     opacity: 0.6;
     padding: 0;
     transition:
@@ -89,6 +93,11 @@ var chipStyles = css`
       background-color 120ms ease;
   }
 
+  /* The large chip's icon is 16px rather than 12px, so it needs less negative margin to keep the same layout. */
+  :host([size='lg']) .delete {
+    margin: -4px;
+  }
+
   .delete:hover:not(:disabled) {
     opacity: 1;
   }
@@ -210,6 +219,15 @@ var chipStyles = css`
     border-color: var(--lt-border-info-strong);
     color: var(--lt-text-info);
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    span[part='base'],
+    .delete {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/chip/chip.ts
@@ -222,6 +240,9 @@ var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(
 var resolveColorValue = (value) => value.startsWith("--") ? `var(${value})` : value;
 
 // src/components/chip/chip.ts
+var DEFAULT_LABELS = {
+  remove: "Remove"
+};
 var Chip = class extends ThemeableElement {
   constructor() {
     super(...arguments);
@@ -231,6 +252,10 @@ var Chip = class extends ThemeableElement {
     this.disabled = false;
     this.deletable = false;
     this.background = "";
+    this.labels = {};
+  }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
   }
   get _deleteIconSize() {
     return this.size === "lg" ? "sm" : "xs";
@@ -249,7 +274,7 @@ var Chip = class extends ThemeableElement {
                 class="delete"
                 part="delete-button"
                 ?disabled=${this.disabled}
-                aria-label="Remove"
+                aria-label=${this._labels.remove}
                 @click=${this._handleDelete}
               >
                 <lt-icon name="xmark" size=${this._deleteIconSize}></lt-icon>
@@ -278,6 +303,9 @@ __decorateClass([
 __decorateClass([
   property2({ reflect: true })
 ], Chip.prototype, "background", 2);
+__decorateClass([
+  property2({ type: Object })
+], Chip.prototype, "labels", 2);
 Chip = __decorateClass([
   customElement("lt-chip")
 ], Chip);

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

@@ -1,5 +1,5 @@
 import { ThemeableElement } from '../../base';
-import { ColorInputFormat, ColorInputSize } from './color-input.types';
+import { ColorInputFormat, ColorInputSize, type ColorInputLabels } from './color-input.types';
 import '@latty-ds/icons';
 import '../text/text';
 /**
@@ -21,10 +21,13 @@ export declare class ColorInput extends ThemeableElement {
     static styles: import("lit").CSSResult;
     static formAssociated: boolean;
     private _internals;
+    private _default;
+    private _fieldsetDisabled;
     constructor();
     /**
      * The current color value. Accepts hex (`#7c3aed`), rgb (`rgb(124, 58, 237)`),
-     * or hsl (`hsl(263, 70%, 58%)`). Emitted values match the `format` prop.
+     * or hsl (`hsl(263, 70%, 58%)`). Emitted values match the `format` prop. Not reflected as an attribute —
+     * read the property, or the `change` event's `detail.value`, instead of `getAttribute('value')`/`[value]`.
      * @default ''
      */
     value: string;
@@ -63,8 +66,14 @@ export declare class ColorInput extends ThemeableElement {
      * @default 'md'
      */
     size: ColorInputSize;
+    /** Overridable UI text (the required-field validation message), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<ColorInputLabels>;
+    private get _labels();
     updated(): 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;
     private _handleChange;

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

@@ -1,2 +1,7 @@
 export type ColorInputSize = 'sm' | 'md' | 'lg';
 export type ColorInputFormat = 'hex' | 'rgb' | 'hsl';
+/** Overridable UI text for `lt-color-input`, for i18n. */
+export interface ColorInputLabels {
+    /** Validation message shown when a required field has no color selected. */
+    validationMessage: string;
+}

package/dist/components/color-input/index.js

@@ -53,7 +53,10 @@ var colorInputStyles = css`
     cursor: pointer;
   }
 
-  :host([disabled]) .wrapper {
+  /* :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]) .wrapper,
+  :host(:disabled) .wrapper {
     cursor: not-allowed;
   }
 
@@ -86,7 +89,8 @@ var colorInputStyles = css`
     outline: none;
   }
 
-  :host([disabled]) .input-container {
+  :host([disabled]) .input-container,
+  :host(:disabled) .input-container {
     background: var(--lt-bg-surface);
   }
 
@@ -117,7 +121,8 @@ var colorInputStyles = css`
     color: var(--lt-text-muted);
   }
 
-  :host([disabled]) .display-value {
+  :host([disabled]) .display-value,
+  :host(:disabled) .display-value {
     color: var(--lt-text-muted);
   }
 
@@ -185,8 +190,53 @@ var colorInputStyles = css`
     width: 24px;
     height: 24px;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .input-container {
+      transition: none;
+    }
+  }
 `;
 
+// 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/color-input/color-input.ts
 import "@latty-ds/icons";
 
@@ -359,6 +409,20 @@ var textStyles = css2`
 `;
 
 // 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",
@@ -383,7 +447,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}>`;
   }
 };
@@ -456,9 +521,14 @@ function formatColor(hex, format) {
   }
   return hex;
 }
+var DEFAULT_LABELS = {
+  validationMessage: "Please select a color"
+};
 var ColorInput = class extends ThemeableElement {
   constructor() {
     super();
+    this._default = new FormDefaultController(this, () => this.value);
+    this._fieldsetDisabled = new FormDisabledController(this);
     this.value = "";
     this.format = "hex";
     this.label = "";
@@ -467,19 +537,30 @@ var ColorInput = class extends ThemeableElement {
     this.required = false;
     this.name = "";
     this.size = "md";
+    this.labels = {};
     this._internals = this.attachInternals();
   }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
   updated() {
     this._internals.setFormValue(this.value || null);
     const input = this.shadowRoot?.querySelector('input[type="color"]');
     if (this.required && !this.value && input) {
-      this._internals.setValidity({ valueMissing: true }, "Please select a color", 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();
@@ -513,7 +594,7 @@ var ColorInput = class extends ThemeableElement {
             class="native-picker"
             .value=${hex || "#000000"}
             name=${ifDefined(this.name || void 0)}
-            ?disabled=${this.disabled}
+            ?disabled=${this._isDisabled}
             aria-label=${this.label || this.placeholder}
             @change=${this._handleChange}
           />
@@ -525,7 +606,7 @@ var ColorInput = class extends ThemeableElement {
 ColorInput.styles = colorInputStyles;
 ColorInput.formAssociated = true;
 __decorateClass([
-  property3({ reflect: true })
+  property3()
 ], ColorInput.prototype, "value", 2);
 __decorateClass([
   property3({ reflect: true })
@@ -548,6 +629,9 @@ __decorateClass([
 __decorateClass([
   property3({ reflect: true })
 ], ColorInput.prototype, "size", 2);
+__decorateClass([
+  property3({ type: Object })
+], ColorInput.prototype, "labels", 2);
 ColorInput = __decorateClass([
   customElement2("lt-color-input")
 ], ColorInput);

package/dist/components/combobox/combobox.d.ts

@@ -1,5 +1,5 @@
 import { ThemeableElement } from '../../base';
-import type { ComboboxOption, ComboboxSize, ComboboxVariant } from './combobox.types';
+import type { ComboboxOption, ComboboxSize, ComboboxVariant, ComboboxLabels } from './combobox.types';
 import '@latty-ds/icons';
 import '../text/text';
 /**
@@ -22,10 +22,15 @@ export declare class Combobox extends ThemeableElement {
     static styles: import("lit").CSSResult[];
     static formAssociated: boolean;
     private _internals;
+    private _default;
+    private _fieldsetDisabled;
+    private readonly _uid;
     constructor();
     /** Array of selectable options. Set as a JS property (`.options`). */
     options: ComboboxOption[];
-    /** Currently selected value. */
+    /** Currently selected value. Not reflected as an attribute — read the property, or the `change` event's
+     * `detail.value`, instead of `getAttribute('value')`/`[value]` (consistent with the rest of the form
+     * controls; see `lt-textfield`'s equivalent doc comment for why). */
     value: string;
     /** Field label displayed above the input. */
     label: string;
@@ -43,23 +48,34 @@ export declare class Combobox extends ThemeableElement {
     required: boolean;
     /** Name used in form submission. */
     name: string;
+    /** Overridable UI text (validation message, "no results" text), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<ComboboxLabels>;
+    private get _labels();
     private query;
     private open;
     private activeIndex;
     private _cleanupClickOutside;
     private _floatingCleanup;
+    private readonly _fieldIds;
     private get selectedLabel();
     private get filtered();
+    private get enabledOpts();
+    private _idFor;
+    private _preventFocusSteal;
     private openDropdown;
     private closeDropdown;
     private selectOption;
     private handleInput;
     private handleFocus;
     private handleKeydown;
+    private _onFocusOut;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(): 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/combobox/combobox.types.d.ts

@@ -5,3 +5,10 @@ export interface ComboboxOption {
     label: string;
     disabled?: boolean;
 }
+/** Overridable UI text for `lt-combobox`, for i18n. */
+export interface ComboboxLabels {
+    /** Validation message shown when a required combobox has no option selected. */
+    validationMessage: string;
+    /** Shown in the dropdown when no options match the current search text. */
+    noResults: string;
+}