@latty-ds/web 0.3.0 → 0.4.0

package/dist/components/accordion/index.js

@@ -434,7 +434,7 @@ var Accordion = class extends ThemeableElement {
 };
 Accordion.styles = accordionStyles;
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Accordion.prototype, "label", 2);
 __decorateClass([
   property3({ attribute: "icon-start" })

package/dist/components/avatar/index.js

@@ -197,7 +197,7 @@ __decorateClass([
   property2()
 ], Avatar.prototype, "src", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Avatar.prototype, "name", 2);
 __decorateClass([
   property2()

package/dist/components/checkbox/checkbox.d.ts

@@ -6,7 +6,7 @@ import '@latty-ds/icons';
  *
  * @element lt-checkbox
  *
- * @fires {CustomEvent<{checked: boolean, indeterminate: boolean}>} change - Dispatched when the checked state changes
+ * @fires {CustomEvent<{checked: boolean}>} change - Dispatched when the checked state changes
  *
  * @example
  * ```html
@@ -33,6 +33,9 @@ import '@latty-ds/icons';
  */
 export declare class Checkbox extends ThemeableElement {
     static styles: import("lit").CSSResult;
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     /**
      * Visual variant that determines the color when checked.
      * @default 'primary'
@@ -89,11 +92,10 @@ export declare class Checkbox extends ThemeableElement {
      * @private
      */
     private input;
-    /**
-     * Handles changes to the indeterminate property.
-     * Updates the native input's indeterminate state.
-     */
     updated(changedProperties: Map<string, unknown>): void;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     /**
      * Handles checkbox change events.
      * Updates the checked state and dispatches a custom change event.

package/dist/components/checkbox/index.js

@@ -201,7 +201,7 @@ var checkboxStyles = css`
 import "@latty-ds/icons";
 var Checkbox = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.variant = "primary";
     this.size = "md";
     this.checked = false;
@@ -212,15 +212,27 @@ var Checkbox = class extends ThemeableElement {
     this.labelPosition = "right";
     this.name = "";
     this.value = "on";
+    this._internals = this.attachInternals();
   }
-  /**
-   * Handles changes to the indeterminate property.
-   * Updates the native input's indeterminate state.
-   */
   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);
+    } else {
+      this._internals.setValidity({});
+    }
+  }
+  formResetCallback() {
+    this.checked = false;
+  }
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
   }
   /**
    * Handles checkbox change events.
@@ -235,7 +247,7 @@ var Checkbox = class extends ThemeableElement {
     this.indeterminate = false;
     this.dispatchEvent(
       new CustomEvent("change", {
-        detail: { checked: this.checked, indeterminate: this.indeterminate },
+        detail: { checked: this.checked },
         bubbles: true,
         composed: true
       })
@@ -279,6 +291,7 @@ var Checkbox = class extends ThemeableElement {
   }
 };
 Checkbox.styles = checkboxStyles;
+Checkbox.formAssociated = true;
 __decorateClass([
   property2({ reflect: true })
 ], Checkbox.prototype, "variant", 2);
@@ -298,16 +311,16 @@ __decorateClass([
   property2({ type: Boolean, reflect: true })
 ], Checkbox.prototype, "required", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Checkbox.prototype, "label", 2);
 __decorateClass([
   property2({ attribute: "label-position", reflect: true })
 ], Checkbox.prototype, "labelPosition", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Checkbox.prototype, "name", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Checkbox.prototype, "value", 2);
 __decorateClass([
   query('input[type="checkbox"]')

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

@@ -19,6 +19,9 @@ import '../text/text';
  */
 export declare class ColorInput extends ThemeableElement {
     static styles: import("lit").CSSResult;
+    static formAssociated: boolean;
+    private _internals;
+    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.
@@ -45,11 +48,25 @@ export declare class ColorInput extends ThemeableElement {
      * @default false
      */
     disabled: boolean;
+    /**
+     * Whether the field is required.
+     * @default false
+     */
+    required: boolean;
+    /**
+     * Name used when submitting a form.
+     * @default ''
+     */
+    name: string;
     /**
      * Size of the input — affects height and padding.
      * @default 'md'
      */
     size: ColorInputSize;
+    updated(): void;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     private _handleChange;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -421,13 +421,34 @@ function formatColor(hex, format) {
 }
 var ColorInput = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.value = "";
     this.format = "hex";
     this.label = "";
     this.placeholder = "Pick a color";
     this.disabled = false;
+    this.required = false;
+    this.name = "";
     this.size = "md";
+    this._internals = this.attachInternals();
+  }
+  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);
+    } else {
+      this._internals.setValidity({});
+    }
+  }
+  formResetCallback() {
+    this.value = "";
+  }
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
   }
   _handleChange(e) {
     const pickerHex = e.target.value;
@@ -463,21 +484,28 @@ var ColorInput = class extends ThemeableElement {
   }
 };
 ColorInput.styles = colorInputStyles;
+ColorInput.formAssociated = true;
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], ColorInput.prototype, "value", 2);
 __decorateClass([
   property3({ reflect: true })
 ], ColorInput.prototype, "format", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], ColorInput.prototype, "label", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], ColorInput.prototype, "placeholder", 2);
 __decorateClass([
   property3({ type: Boolean, reflect: true })
 ], ColorInput.prototype, "disabled", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], ColorInput.prototype, "required", 2);
+__decorateClass([
+  property3({ reflect: true })
+], ColorInput.prototype, "name", 2);
 __decorateClass([
   property3({ reflect: true })
 ], ColorInput.prototype, "size", 2);

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

@@ -7,7 +7,7 @@ import '../text/text';
  *
  * @element lt-combobox
  *
- * @fires {CustomEvent<{value: string, label: string}>} change - Fired when the selected value changes.
+ * @fires {CustomEvent<{value: string}>} change - Fired when the selected value changes.
  *
  * @example
  * ```html
@@ -20,6 +20,9 @@ import '../text/text';
  */
 export declare class Combobox extends ThemeableElement {
     static styles: import("lit").CSSResult[];
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     /** Array of selectable options. Set as a JS property (`.options`). */
     options: ComboboxOption[];
     /** Currently selected value. */
@@ -55,5 +58,9 @@ export declare class Combobox extends ThemeableElement {
     private handleKeydown;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    updated(): void;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/combobox/index.js

@@ -1801,7 +1801,7 @@ Text = __decorateClass([
 // src/components/combobox/combobox.ts
 var Combobox = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.options = [];
     this.value = "";
     this.label = "";
@@ -1817,6 +1817,7 @@ var Combobox = class extends ThemeableElement {
     this.activeIndex = -1;
     this._cleanupClickOutside = null;
     this._floatingCleanup = null;
+    this._internals = this.attachInternals();
   }
   get selectedLabel() {
     return this.options.find((o) => o.value === this.value)?.label ?? "";
@@ -1849,7 +1850,7 @@ var Combobox = class extends ThemeableElement {
     if (opt.disabled) return;
     this.value = opt.value;
     this.closeDropdown();
-    dispatch(this, "change", { value: opt.value, label: opt.label });
+    dispatch(this, "change", { value: opt.value });
   }
   handleInput(e) {
     this.query = e.target.value;
@@ -1887,6 +1888,24 @@ var Combobox = class extends ThemeableElement {
     this._floatingCleanup?.();
     this._floatingCleanup = null;
   }
+  updated() {
+    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);
+    } else {
+      this._internals.setValidity({});
+    }
+  }
+  formResetCallback() {
+    this.value = "";
+  }
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
   render() {
     const opts = this.filtered;
     const displayValue = this.open ? this.query : this.selectedLabel;
@@ -1899,7 +1918,6 @@ var Combobox = class extends ThemeableElement {
           aria-autocomplete="list"
           aria-required=${this.required}
           autocomplete="off"
-          name=${this.name || nothing}
           placeholder=${this.open ? this.placeholder : this.selectedLabel || this.placeholder}
           .value=${displayValue}
           ?disabled=${this.disabled}
@@ -1941,17 +1959,18 @@ var Combobox = class extends ThemeableElement {
   }
 };
 Combobox.styles = comboboxStyles;
+Combobox.formAssociated = true;
 __decorateClass([
   property3({ type: Array })
 ], Combobox.prototype, "options", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Combobox.prototype, "value", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Combobox.prototype, "label", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Combobox.prototype, "placeholder", 2);
 __decorateClass([
   property3({ attribute: "helper-text" })
@@ -1969,7 +1988,7 @@ __decorateClass([
   property3({ type: Boolean, reflect: true })
 ], Combobox.prototype, "required", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Combobox.prototype, "name", 2);
 __decorateClass([
   state()

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

@@ -23,6 +23,9 @@ import type { Calendar } from '../calendar/calendar';
  */
 export declare class DateInput extends ThemeableElement {
     static styles: import("lit").CSSResult[];
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     /** Selected date in ISO format (YYYY-MM-DD). */
     value: string;
     /** Minimum selectable date (ISO format). Dates before this are disabled. */
@@ -62,5 +65,9 @@ export declare class DateInput extends ThemeableElement {
     disconnectedCallback(): void;
     private _handleCalendarChange;
     private _handleDropdownKeyDown;
+    updated(): void;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -2688,7 +2688,7 @@ var dateInputStyles = [
 // src/components/date-input/date-input.ts
 var DateInput = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.value = "";
     this.min = "";
     this.max = "";
@@ -2708,6 +2708,7 @@ var DateInput = class extends ThemeableElement {
     this._open = false;
     this._cleanupClickOutside = null;
     this._floatingCleanup = null;
+    this._internals = this.attachInternals();
   }
   get _displayValue() {
     if (!this.value) return "";
@@ -2755,6 +2756,24 @@ var DateInput = class extends ThemeableElement {
       this.shadowRoot?.querySelector(".field-btn")?.focus();
     }
   }
+  updated() {
+    this._internals.setFormValue(this.value || null);
+    const btn = this.shadowRoot?.querySelector("#field-btn");
+    if (this.required && !this.value && btn) {
+      this._internals.setValidity({ valueMissing: true }, "Please select a date", btn);
+    } else {
+      this._internals.setValidity({});
+    }
+  }
+  formResetCallback() {
+    this.value = "";
+  }
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
   render() {
     const displayText = this._displayValue || this.placeholder;
     const isPlaceholder = !this._displayValue;
@@ -2803,13 +2822,13 @@ var DateInput = class extends ThemeableElement {
           </div>
         </div>
 
-        ${this.name ? html3`<input type="hidden" name=${this.name} .value=${this.value} />` : nothing}
         ${this.helperText ? html3`<span class="helper-text">${this.helperText}</span>` : nothing}
       </div>
     `;
   }
 };
 DateInput.styles = dateInputStyles;
+DateInput.formAssociated = true;
 __decorateClass([
   property4({ reflect: true })
 ], DateInput.prototype, "value", 2);
@@ -2829,10 +2848,10 @@ __decorateClass([
   property4({ attribute: "week-start", reflect: true })
 ], DateInput.prototype, "weekStart", 2);
 __decorateClass([
-  property4()
+  property4({ reflect: true })
 ], DateInput.prototype, "label", 2);
 __decorateClass([
-  property4()
+  property4({ reflect: true })
 ], DateInput.prototype, "placeholder", 2);
 __decorateClass([
   property4({ attribute: "helper-text" })
@@ -2850,7 +2869,7 @@ __decorateClass([
   property4({ type: Boolean, reflect: true })
 ], DateInput.prototype, "required", 2);
 __decorateClass([
-  property4()
+  property4({ reflect: true })
 ], DateInput.prototype, "name", 2);
 __decorateClass([
   state2()

package/dist/components/datepicker/datepicker.d.ts

@@ -1,3 +1,4 @@
+import { type PropertyValues } from 'lit';
 import { ThemeableElement } from '../../base';
 import type { DatepickerType, DatepickerSize, DatepickerVariant } from './datepicker.types';
 import '../text/text';
@@ -21,6 +22,9 @@ import '../text/text';
  */
 export declare class Datepicker extends ThemeableElement {
     static styles: import("lit").CSSResult;
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     /** Native input type. */
     type: DatepickerType;
     /** Current value in the format required by the native input (`YYYY-MM-DD`, `HH:MM`, or `YYYY-MM-DDTHH:MM`). */
@@ -46,6 +50,10 @@ export declare class Datepicker extends ThemeableElement {
     /** Name used in form submission. */
     name: string;
     private input;
+    protected updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     private handleChange;
     private handleInput;
     render(): import("lit").TemplateResult<1>;

package/dist/components/datepicker/index.js

@@ -320,7 +320,7 @@ Text = __decorateClass([
 // src/components/datepicker/datepicker.ts
 var Datepicker = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.type = "date";
     this.value = "";
     this.min = "";
@@ -333,6 +333,26 @@ var Datepicker = class extends ThemeableElement {
     this.required = false;
     this.readonly = false;
     this.name = "";
+    this._internals = this.attachInternals();
+  }
+  updated(changed) {
+    if (changed.has("value") || changed.has("required")) {
+      this._internals.setFormValue(this.value || null);
+      if (this.required && !this.value) {
+        this._internals.setValidity({ valueMissing: true }, "Please select a date", this.input);
+      } else {
+        this._internals.setValidity({});
+      }
+    }
+  }
+  formResetCallback() {
+    this.value = "";
+  }
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
   }
   handleChange() {
     this.value = this.input.value;
@@ -349,7 +369,6 @@ var Datepicker = class extends ThemeableElement {
         .value=${this.value}
         min=${this.min || nothing}
         max=${this.max || nothing}
-        name=${this.name || nothing}
         ?disabled=${this.disabled}
         ?required=${this.required}
         ?readonly=${this.readonly}
@@ -369,20 +388,21 @@ var Datepicker = class extends ThemeableElement {
   }
 };
 Datepicker.styles = datepickerStyles;
+Datepicker.formAssociated = true;
 __decorateClass([
   property3({ reflect: true })
 ], Datepicker.prototype, "type", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Datepicker.prototype, "value", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Datepicker.prototype, "min", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Datepicker.prototype, "max", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Datepicker.prototype, "label", 2);
 __decorateClass([
   property3({ attribute: "helper-text" })
@@ -403,7 +423,7 @@ __decorateClass([
   property3({ type: Boolean, reflect: true })
 ], Datepicker.prototype, "readonly", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Datepicker.prototype, "name", 2);
 __decorateClass([
   query("input")

package/dist/components/dialog/dialog.d.ts

@@ -23,8 +23,10 @@ import '../text/text';
  * @slot header - Custom header content (overrides title prop)
  * @slot footer - Footer content (typically for action buttons)
  *
- * @fires dialog-open - Fired when dialog opens
- * @fires dialog-close - Fired when dialog closes
+ * @fires open - Fired when dialog opens
+ * @fires close - Fired when dialog closes
+ * @fires dialog-open - Fired when dialog opens (deprecated, use `open`)
+ * @fires dialog-close - Fired when dialog closes (deprecated, use `close`)
  *
  * @example
  * ```html

package/dist/components/dialog/index.js

@@ -807,22 +807,15 @@ var Dialog = class extends ThemeableElement {
     this.updateComplete.then(() => {
       this.dialogElement?.focus();
     });
-    this.dispatchEvent(
-      new CustomEvent("dialog-open", {
-        bubbles: true,
-        composed: true
-      })
-    );
+    const openEvent = new CustomEvent("open", { bubbles: true, composed: true });
+    this.dispatchEvent(openEvent);
+    this.dispatchEvent(new CustomEvent("dialog-open", { bubbles: true, composed: true }));
   }
   handleClose() {
     document.body.style.overflow = "";
     this.restoreFocus();
-    this.dispatchEvent(
-      new CustomEvent("dialog-close", {
-        bubbles: true,
-        composed: true
-      })
-    );
+    this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
+    this.dispatchEvent(new CustomEvent("dialog-close", { bubbles: true, composed: true }));
   }
   restoreFocus() {
     if (this.previouslyFocusedElement) {

package/dist/components/divider/index.js

@@ -139,7 +139,7 @@ __decorateClass([
   property2({ reflect: true })
 ], Divider.prototype, "appearance", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Divider.prototype, "label", 2);
 Divider = __decorateClass([
   customElement("lt-divider")

package/dist/components/nav/index.js

@@ -279,7 +279,7 @@ __decorateClass([
   property2()
 ], NavItem.prototype, "href", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], NavItem.prototype, "label", 2);
 __decorateClass([
   property2({ attribute: "icon-start" })
@@ -331,7 +331,7 @@ var Nav = class extends ThemeableElement {
 };
 Nav.styles = navStyles;
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Nav.prototype, "label", 2);
 __decorateClass([
   property3({ reflect: true })

package/dist/components/progress/index.js

@@ -145,7 +145,7 @@ var Progress = class extends ThemeableElement {
 };
 Progress.styles = progressStyles;
 __decorateClass([
-  property2({ type: Number })
+  property2({ type: Number, reflect: true })
 ], Progress.prototype, "value", 2);
 __decorateClass([
   property2({ reflect: true })
@@ -154,7 +154,7 @@ __decorateClass([
   property2({ reflect: true })
 ], Progress.prototype, "size", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Progress.prototype, "label", 2);
 __decorateClass([
   property2({ type: Boolean, reflect: true })