@latty-ds/web 0.2.0 → 0.4.0

package/dist/components/radio/index.js

@@ -208,7 +208,7 @@ var radioStyles = css`
 // src/components/radio/radio.ts
 var Radio = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.variant = "primary";
     this.size = "md";
     this.checked = false;
@@ -218,6 +218,25 @@ var Radio = class extends ThemeableElement {
     this.labelPosition = "right";
     this.name = "";
     this.value = "";
+    this._internals = this.attachInternals();
+  }
+  updated() {
+    this._internals.setFormValue(this.checked ? this.value : null);
+    const input = this.shadowRoot?.querySelector("input");
+    if (this.required && !this.checked && input) {
+      this._internals.setValidity({ valueMissing: true }, "Please select this option", input);
+    } else {
+      this._internals.setValidity({});
+    }
+  }
+  formResetCallback() {
+    this.checked = false;
+  }
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
   }
   /**
    * Handles radio change events.
@@ -259,6 +278,7 @@ var Radio = class extends ThemeableElement {
   }
 };
 Radio.styles = radioStyles;
+Radio.formAssociated = true;
 __decorateClass([
   property2({ reflect: true })
 ], Radio.prototype, "variant", 2);
@@ -275,16 +295,16 @@ __decorateClass([
   property2({ type: Boolean, reflect: true })
 ], Radio.prototype, "required", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Radio.prototype, "label", 2);
 __decorateClass([
   property2({ attribute: "label-position", reflect: true })
 ], Radio.prototype, "labelPosition", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Radio.prototype, "name", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Radio.prototype, "value", 2);
 Radio = __decorateClass([
   customElement("lt-radio")

package/dist/components/radio/radio.d.ts

@@ -38,6 +38,9 @@ import { RadioSize, RadioVariant, RadioLabelPosition } from './radio.types';
  */
 export declare class Radio extends ThemeableElement {
     static styles: import("lit").CSSResult;
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     /**
      * Visual variant that determines the color when checked.
      * @default 'primary'
@@ -84,6 +87,10 @@ export declare class Radio extends ThemeableElement {
      * @default ''
      */
     value: string;
+    updated(): void;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     /**
      * Handles radio change events.
      * Updates the checked state and dispatches a custom change event.

package/dist/components/radio-group/index.js

@@ -353,13 +353,13 @@ var RadioGroup = class extends ThemeableElement {
 };
 RadioGroup.styles = radioGroupStyles;
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], RadioGroup.prototype, "label", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], RadioGroup.prototype, "name", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], RadioGroup.prototype, "value", 2);
 __decorateClass([
   property3({ reflect: true })

package/dist/components/select/index.js

@@ -1910,12 +1910,13 @@ Text = __decorateClass([
 // src/components/select/select.ts
 var Select = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.variant = "default";
     this.size = "md";
     this.value = "";
     this.placeholder = "Select an option";
     this.label = "";
+    this.name = "";
     this.helperText = "";
     this.disabled = false;
     this.required = false;
@@ -1923,6 +1924,7 @@ var Select = class extends ThemeableElement {
     this.isOpen = false;
     this._cleanupClickOutside = null;
     this._floatingCleanup = null;
+    this._internals = this.attachInternals();
   }
   /**
    * Toggles the dropdown open/closed state.
@@ -2008,16 +2010,20 @@ var Select = class extends ThemeableElement {
     const selected = this.options.find((opt) => opt.value === this.value);
     return selected ? selected.label : "";
   }
-  /**
-   * Reflects the open state as an attribute for CSS styling.
-   */
   updated(changedProperties) {
+    this._internals.setFormValue(this.value || null);
+    const trigger = this.shadowRoot?.querySelector(".select-trigger");
+    if (this.required && !this.value && trigger) {
+      this._internals.setValidity({ valueMissing: true }, "Please select an option", trigger);
+    } else {
+      this._internals.setValidity({});
+    }
     if (!changedProperties.has("isOpen")) return;
     if (this.isOpen) {
       this.setAttribute("open", "");
-      const trigger = this.shadowRoot.querySelector(".select-trigger");
+      const selectTrigger = this.shadowRoot.querySelector(".select-trigger");
       const listbox = this.shadowRoot.querySelector("lt-surface.dropdown");
-      openFloating(trigger, listbox, { matchWidth: true }).then((cleanup) => {
+      openFloating(selectTrigger, listbox, { matchWidth: true }).then((cleanup) => {
         this._floatingCleanup = cleanup;
       });
     } else {
@@ -2027,6 +2033,15 @@ var Select = class extends ThemeableElement {
       this._floatingCleanup = null;
     }
   }
+  formResetCallback() {
+    this.value = "";
+  }
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
   render() {
     const selectedLabel = this.getSelectedLabel();
     const hasValue = Boolean(this.value && selectedLabel);
@@ -2085,6 +2100,7 @@ var Select = class extends ThemeableElement {
   }
 };
 Select.styles = selectStyles;
+Select.formAssociated = true;
 __decorateClass([
   property4({ reflect: true })
 ], Select.prototype, "variant", 2);
@@ -2092,14 +2108,17 @@ __decorateClass([
   property4({ reflect: true })
 ], Select.prototype, "size", 2);
 __decorateClass([
-  property4()
+  property4({ reflect: true })
 ], Select.prototype, "value", 2);
 __decorateClass([
-  property4()
+  property4({ reflect: true })
 ], Select.prototype, "placeholder", 2);
 __decorateClass([
-  property4()
+  property4({ reflect: true })
 ], Select.prototype, "label", 2);
+__decorateClass([
+  property4({ reflect: true })
+], Select.prototype, "name", 2);
 __decorateClass([
   property4({ attribute: "helper-text" })
 ], Select.prototype, "helperText", 2);

package/dist/components/select/select.d.ts

@@ -36,6 +36,9 @@ import '../text/text';
  */
 export declare class Select extends ThemeableElement {
     static styles: import("lit").CSSResult[];
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     /**
      * Visual variant that determines styling.
      * @default 'default'
@@ -61,6 +64,11 @@ export declare class Select extends ThemeableElement {
      * @default ''
      */
     label: string;
+    /**
+     * Name used when submitting a form.
+     * @default ''
+     */
+    name: string;
     /**
      * Helper text displayed below the select. Color changes based on variant.
      * @default ''
@@ -121,9 +129,9 @@ export declare class Select extends ThemeableElement {
      * @private
      */
     private getSelectedLabel;
-    /**
-     * Reflects the open state as an attribute for CSS styling.
-     */
     updated(changedProperties: Map<string, unknown>): void;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/sidepanel/index.js

@@ -749,7 +749,7 @@ __decorateClass([
   property4()
 ], SidePanel.prototype, "size", 2);
 __decorateClass([
-  property4()
+  property4({ reflect: true })
 ], SidePanel.prototype, "label", 2);
 __decorateClass([
   property4({ type: Boolean, attribute: "no-close-button" })

package/dist/components/slider/index.js

@@ -518,7 +518,7 @@ Tooltip = __decorateClass([
 // src/components/slider/slider.ts
 var Slider = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.size = "md";
     this.disabled = false;
     this.tooltip = false;
@@ -528,6 +528,7 @@ var Slider = class extends ThemeableElement {
     this.value = 0;
     this.label = "";
     this.name = "";
+    this._internals = this.attachInternals();
   }
   get _fillPercent() {
     return (this.value - this.min) / (this.max - this.min) * 100;
@@ -544,6 +545,17 @@ var Slider = class extends ThemeableElement {
       const centerPx = fill / 100 * (trackW - thumbPx) + thumbPx / 2;
       this.style.setProperty("--_thumb-left", `${centerPx / trackW * 100}%`);
     }
+    this._internals.setFormValue(String(this.value));
+    this._internals.setValidity({});
+  }
+  formResetCallback() {
+    this.value = this.min;
+  }
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
   }
   _onInput(e) {
     e.stopPropagation();
@@ -597,6 +609,7 @@ var Slider = class extends ThemeableElement {
   }
 };
 Slider.styles = sliderStyles;
+Slider.formAssociated = true;
 __decorateClass([
   property4({ reflect: true })
 ], Slider.prototype, "size", 2);
@@ -616,13 +629,13 @@ __decorateClass([
   property4({ type: Number })
 ], Slider.prototype, "step", 2);
 __decorateClass([
-  property4({ type: Number })
+  property4({ type: Number, reflect: true })
 ], Slider.prototype, "value", 2);
 __decorateClass([
-  property4()
+  property4({ reflect: true })
 ], Slider.prototype, "label", 2);
 __decorateClass([
-  property4()
+  property4({ reflect: true })
 ], Slider.prototype, "name", 2);
 __decorateClass([
   query2("input")

package/dist/components/slider/slider.d.ts

@@ -11,6 +11,9 @@ import '../text/text';
  */
 export declare class Slider extends ThemeableElement {
     static styles: import("lit").CSSResult;
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     size: SliderSize;
     disabled: boolean;
     /** Show the current value in a tooltip above the thumb. */
@@ -27,6 +30,9 @@ export declare class Slider extends ThemeableElement {
     private get _fillPercent();
     private _thumbSizePx;
     updated(): void;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     private _onInput;
     private _onChange;
     render(): import("lit").TemplateResult<1>;

package/dist/components/switch/index.js

@@ -205,7 +205,7 @@ var switchStyles = css`
 // src/components/switch/switch.ts
 var Switch = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.variant = "primary";
     this.size = "md";
     this.checked = false;
@@ -215,6 +215,7 @@ var Switch = class extends ThemeableElement {
     this.labelPosition = "right";
     this.name = "";
     this.value = "on";
+    this._internals = this.attachInternals();
   }
   /**
    * Handles switch change events.
@@ -223,6 +224,24 @@ var Switch = class extends ThemeableElement {
    * @param e - The native change event
    * @private
    */
+  updated() {
+    this._internals.setFormValue(this.checked ? this.value : null);
+    const input = this.shadowRoot?.querySelector("input");
+    if (this.required && !this.checked && input) {
+      this._internals.setValidity({ valueMissing: true }, "Please check this switch", input);
+    } else {
+      this._internals.setValidity({});
+    }
+  }
+  formResetCallback() {
+    this.checked = false;
+  }
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
   handleChange(e) {
     const target = e.target;
     this.checked = target.checked;
@@ -258,6 +277,7 @@ var Switch = class extends ThemeableElement {
   }
 };
 Switch.styles = switchStyles;
+Switch.formAssociated = true;
 __decorateClass([
   property2({ reflect: true })
 ], Switch.prototype, "variant", 2);
@@ -274,16 +294,16 @@ __decorateClass([
   property2({ type: Boolean, reflect: true })
 ], Switch.prototype, "required", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Switch.prototype, "label", 2);
 __decorateClass([
   property2({ attribute: "label-position", reflect: true })
 ], Switch.prototype, "labelPosition", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Switch.prototype, "name", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Switch.prototype, "value", 2);
 Switch = __decorateClass([
   customElement("lt-switch")

package/dist/components/switch/switch.d.ts

@@ -33,6 +33,9 @@ import { SwitchSize, SwitchVariant, SwitchLabelPosition } from './switch.types';
  */
 export declare class Switch extends ThemeableElement {
     static styles: import("lit").CSSResult;
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     /**
      * Visual variant that determines the color when checked.
      * @default 'primary'
@@ -85,6 +88,10 @@ export declare class Switch extends ThemeableElement {
      * @param e - The native change event
      * @private
      */
+    updated(): void;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     private handleChange;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/tab/index.js

@@ -188,10 +188,10 @@ var Tab = class extends ThemeableElement {
 };
 Tab.styles = tabStyles;
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Tab.prototype, "label", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Tab.prototype, "value", 2);
 __decorateClass([
   property2({ attribute: "icon-start" })

package/dist/components/tab-group/index.js

@@ -248,10 +248,10 @@ var Tab = class extends ThemeableElement {
 };
 Tab.styles = tabStyles;
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Tab.prototype, "label", 2);
 __decorateClass([
-  property2()
+  property2({ reflect: true })
 ], Tab.prototype, "value", 2);
 __decorateClass([
   property2({ attribute: "icon-start" })
@@ -419,7 +419,7 @@ var TabGroup = class extends ThemeableElement {
 };
 TabGroup.styles = tabGroupStyles;
 __decorateClass([
-  property4()
+  property4({ reflect: true })
 ], TabGroup.prototype, "value", 2);
 __decorateClass([
   property4({ reflect: true })

package/dist/components/textfield/index.js

@@ -460,13 +460,14 @@ Text = __decorateClass([
 // src/components/textfield/textfield.ts
 var Textfield = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.variant = "default";
     this.size = "md";
     this.type = "text";
     this.value = "";
     this.placeholder = "";
     this.label = "";
+    this.name = "";
     this.helperText = "";
     this.disabled = false;
     this.required = false;
@@ -485,6 +486,7 @@ var Textfield = class extends ThemeableElement {
       this._touched = true;
       this._autoError = !this._validate();
     };
+    this._internals = this.attachInternals();
   }
   /**
    * Handles input events from the native input or textarea element.
@@ -582,6 +584,22 @@ var Textfield = class extends ThemeableElement {
   updated(changed) {
     super.updated(changed);
     this.toggleAttribute("data-invalid", this._autoError);
+    this._internals.setFormValue(this.value || null);
+    const anchor = this.shadowRoot.querySelector("input") ?? this.shadowRoot.querySelector("textarea");
+    if (this.required && !this.value && anchor) {
+      this._internals.setValidity({ valueMissing: true }, "Please fill in this field", anchor);
+    } else {
+      this._internals.setValidity({});
+    }
+  }
+  formResetCallback() {
+    this.value = "";
+  }
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
   }
   render() {
     const hasStartIcon = Boolean(this.iconStart);
@@ -656,6 +674,7 @@ var Textfield = class extends ThemeableElement {
   }
 };
 Textfield.styles = textfieldStyles;
+Textfield.formAssociated = true;
 __decorateClass([
   property3({ reflect: true })
 ], Textfield.prototype, "variant", 2);
@@ -666,14 +685,17 @@ __decorateClass([
   property3({ reflect: true })
 ], Textfield.prototype, "type", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Textfield.prototype, "value", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Textfield.prototype, "placeholder", 2);
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Textfield.prototype, "label", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Textfield.prototype, "name", 2);
 __decorateClass([
   property3({ attribute: "helper-text" })
 ], Textfield.prototype, "helperText", 2);

package/dist/components/textfield/textfield.d.ts

@@ -44,6 +44,9 @@ import '../text/text';
  */
 export declare class Textfield extends ThemeableElement {
     static styles: import("lit").CSSResult;
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     /**
      * Visual variant that determines styling and automatic end icon.
      * @default 'default'
@@ -74,6 +77,11 @@ export declare class Textfield extends ThemeableElement {
      * @default ''
      */
     label: string;
+    /**
+     * Name used when submitting a form.
+     * @default ''
+     */
+    name: string;
     /**
      * Helper text displayed below the input. Can be a static string or a function
      * that receives the current error state and returns the string to display.
@@ -164,5 +172,8 @@ export declare class Textfield extends ThemeableElement {
      */
     private getEndIconName;
     updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     render(): import("lit").TemplateResult<1>;
 }