@latty-ds/web 0.2.0 → 0.4.0

package/dist/index.js

@@ -432,7 +432,7 @@ var Accordion = class extends ThemeableElement {
 };
 Accordion.styles = accordionStyles;
 __decorateClass([
-  property3()
+  property3({ reflect: true })
 ], Accordion.prototype, "label", 2);
 __decorateClass([
   property3({ attribute: "icon-start" })
@@ -1315,7 +1315,7 @@ var checkboxStyles = css6`
 import "@latty-ds/icons";
 var Checkbox = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.variant = "primary";
     this.size = "md";
     this.checked = false;
@@ -1326,15 +1326,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.
@@ -1349,7 +1361,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
       })
@@ -1393,6 +1405,7 @@ var Checkbox = class extends ThemeableElement {
   }
 };
 Checkbox.styles = checkboxStyles;
+Checkbox.formAssociated = true;
 __decorateClass([
   property7({ reflect: true })
 ], Checkbox.prototype, "variant", 2);
@@ -1412,16 +1425,16 @@ __decorateClass([
   property7({ type: Boolean, reflect: true })
 ], Checkbox.prototype, "required", 2);
 __decorateClass([
-  property7()
+  property7({ reflect: true })
 ], Checkbox.prototype, "label", 2);
 __decorateClass([
   property7({ attribute: "label-position", reflect: true })
 ], Checkbox.prototype, "labelPosition", 2);
 __decorateClass([
-  property7()
+  property7({ reflect: true })
 ], Checkbox.prototype, "name", 2);
 __decorateClass([
-  property7()
+  property7({ reflect: true })
 ], Checkbox.prototype, "value", 2);
 __decorateClass([
   query2('input[type="checkbox"]')
@@ -2029,22 +2042,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) {
@@ -2529,7 +2535,7 @@ var radioStyles = css13`
 // src/components/radio/radio.ts
 var Radio = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.variant = "primary";
     this.size = "md";
     this.checked = false;
@@ -2539,6 +2545,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.
@@ -2580,6 +2605,7 @@ var Radio = class extends ThemeableElement {
   }
 };
 Radio.styles = radioStyles;
+Radio.formAssociated = true;
 __decorateClass([
   property13({ reflect: true })
 ], Radio.prototype, "variant", 2);
@@ -2596,16 +2622,16 @@ __decorateClass([
   property13({ type: Boolean, reflect: true })
 ], Radio.prototype, "required", 2);
 __decorateClass([
-  property13()
+  property13({ reflect: true })
 ], Radio.prototype, "label", 2);
 __decorateClass([
   property13({ attribute: "label-position", reflect: true })
 ], Radio.prototype, "labelPosition", 2);
 __decorateClass([
-  property13()
+  property13({ reflect: true })
 ], Radio.prototype, "name", 2);
 __decorateClass([
-  property13()
+  property13({ reflect: true })
 ], Radio.prototype, "value", 2);
 Radio = __decorateClass([
   customElement12("lt-radio")
@@ -2759,13 +2785,13 @@ var RadioGroup = class extends ThemeableElement {
 };
 RadioGroup.styles = radioGroupStyles;
 __decorateClass([
-  property14()
+  property14({ reflect: true })
 ], RadioGroup.prototype, "label", 2);
 __decorateClass([
-  property14()
+  property14({ reflect: true })
 ], RadioGroup.prototype, "name", 2);
 __decorateClass([
-  property14()
+  property14({ reflect: true })
 ], RadioGroup.prototype, "value", 2);
 __decorateClass([
   property14({ reflect: true })
@@ -4384,12 +4410,13 @@ var selectStyles = [
 import "@latty-ds/icons";
 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;
@@ -4397,6 +4424,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.
@@ -4482,16 +4510,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 {
@@ -4501,6 +4533,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);
@@ -4559,6 +4600,7 @@ var Select = class extends ThemeableElement {
   }
 };
 Select.styles = selectStyles;
+Select.formAssociated = true;
 __decorateClass([
   property15({ reflect: true })
 ], Select.prototype, "variant", 2);
@@ -4566,14 +4608,17 @@ __decorateClass([
   property15({ reflect: true })
 ], Select.prototype, "size", 2);
 __decorateClass([
-  property15()
+  property15({ reflect: true })
 ], Select.prototype, "value", 2);
 __decorateClass([
-  property15()
+  property15({ reflect: true })
 ], Select.prototype, "placeholder", 2);
 __decorateClass([
-  property15()
+  property15({ reflect: true })
 ], Select.prototype, "label", 2);
+__decorateClass([
+  property15({ reflect: true })
+], Select.prototype, "name", 2);
 __decorateClass([
   property15({ attribute: "helper-text" })
 ], Select.prototype, "helperText", 2);
@@ -4765,7 +4810,7 @@ var switchStyles = css17`
 // src/components/switch/switch.ts
 var Switch = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.variant = "primary";
     this.size = "md";
     this.checked = false;
@@ -4775,6 +4820,7 @@ var Switch = class extends ThemeableElement {
     this.labelPosition = "right";
     this.name = "";
     this.value = "on";
+    this._internals = this.attachInternals();
   }
   /**
    * Handles switch change events.
@@ -4783,6 +4829,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;
@@ -4818,6 +4882,7 @@ var Switch = class extends ThemeableElement {
   }
 };
 Switch.styles = switchStyles;
+Switch.formAssociated = true;
 __decorateClass([
   property16({ reflect: true })
 ], Switch.prototype, "variant", 2);
@@ -4834,16 +4899,16 @@ __decorateClass([
   property16({ type: Boolean, reflect: true })
 ], Switch.prototype, "required", 2);
 __decorateClass([
-  property16()
+  property16({ reflect: true })
 ], Switch.prototype, "label", 2);
 __decorateClass([
   property16({ attribute: "label-position", reflect: true })
 ], Switch.prototype, "labelPosition", 2);
 __decorateClass([
-  property16()
+  property16({ reflect: true })
 ], Switch.prototype, "name", 2);
 __decorateClass([
-  property16()
+  property16({ reflect: true })
 ], Switch.prototype, "value", 2);
 Switch = __decorateClass([
   customElement15("lt-switch")
@@ -5004,10 +5069,10 @@ var Tab = class extends ThemeableElement {
 };
 Tab.styles = tabStyles;
 __decorateClass([
-  property17()
+  property17({ reflect: true })
 ], Tab.prototype, "label", 2);
 __decorateClass([
-  property17()
+  property17({ reflect: true })
 ], Tab.prototype, "value", 2);
 __decorateClass([
   property17({ attribute: "icon-start" })
@@ -5235,7 +5300,7 @@ var TabGroup = class extends ThemeableElement {
 };
 TabGroup.styles = tabGroupStyles;
 __decorateClass([
-  property19()
+  property19({ reflect: true })
 ], TabGroup.prototype, "value", 2);
 __decorateClass([
   property19({ reflect: true })
@@ -6051,13 +6116,14 @@ var textfieldStyles = css22`
 import "@latty-ds/icons";
 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;
@@ -6076,6 +6142,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.
@@ -6173,6 +6240,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);
@@ -6247,6 +6330,7 @@ var Textfield = class extends ThemeableElement {
   }
 };
 Textfield.styles = textfieldStyles;
+Textfield.formAssociated = true;
 __decorateClass([
   property21({ reflect: true })
 ], Textfield.prototype, "variant", 2);
@@ -6257,14 +6341,17 @@ __decorateClass([
   property21({ reflect: true })
 ], Textfield.prototype, "type", 2);
 __decorateClass([
-  property21()
+  property21({ reflect: true })
 ], Textfield.prototype, "value", 2);
 __decorateClass([
-  property21()
+  property21({ reflect: true })
 ], Textfield.prototype, "placeholder", 2);
 __decorateClass([
-  property21()
+  property21({ reflect: true })
 ], Textfield.prototype, "label", 2);
+__decorateClass([
+  property21({ reflect: true })
+], Textfield.prototype, "name", 2);
 __decorateClass([
   property21({ attribute: "helper-text" })
 ], Textfield.prototype, "helperText", 2);
@@ -6469,7 +6556,7 @@ __decorateClass([
   property22()
 ], Avatar.prototype, "src", 2);
 __decorateClass([
-  property22()
+  property22({ reflect: true })
 ], Avatar.prototype, "name", 2);
 __decorateClass([
   property22()
@@ -7489,7 +7576,7 @@ var sliderStyles = css28`
 // src/components/slider/slider.ts
 var Slider = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.size = "md";
     this.disabled = false;
     this.tooltip = false;
@@ -7499,6 +7586,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;
@@ -7515,6 +7603,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();
@@ -7568,6 +7667,7 @@ var Slider = class extends ThemeableElement {
   }
 };
 Slider.styles = sliderStyles;
+Slider.formAssociated = true;
 __decorateClass([
   property27({ reflect: true })
 ], Slider.prototype, "size", 2);
@@ -7587,13 +7687,13 @@ __decorateClass([
   property27({ type: Number })
 ], Slider.prototype, "step", 2);
 __decorateClass([
-  property27({ type: Number })
+  property27({ type: Number, reflect: true })
 ], Slider.prototype, "value", 2);
 __decorateClass([
-  property27()
+  property27({ reflect: true })
 ], Slider.prototype, "label", 2);
 __decorateClass([
-  property27()
+  property27({ reflect: true })
 ], Slider.prototype, "name", 2);
 __decorateClass([
   query5("input")
@@ -8175,7 +8275,7 @@ __decorateClass([
   property31()
 ], NavItem.prototype, "href", 2);
 __decorateClass([
-  property31()
+  property31({ reflect: true })
 ], NavItem.prototype, "label", 2);
 __decorateClass([
   property31({ attribute: "icon-start" })
@@ -8227,7 +8327,7 @@ var Nav = class extends ThemeableElement {
 };
 Nav.styles = navStyles;
 __decorateClass([
-  property32()
+  property32({ reflect: true })
 ], Nav.prototype, "label", 2);
 __decorateClass([
   property32({ reflect: true })
@@ -8541,7 +8641,7 @@ __decorateClass([
   property35({ reflect: true })
 ], Divider.prototype, "appearance", 2);
 __decorateClass([
-  property35()
+  property35({ reflect: true })
 ], Divider.prototype, "label", 2);
 Divider = __decorateClass([
   customElement34("lt-divider")
@@ -8659,7 +8759,7 @@ var Progress = class extends ThemeableElement {
 };
 Progress.styles = progressStyles;
 __decorateClass([
-  property36({ type: Number })
+  property36({ type: Number, reflect: true })
 ], Progress.prototype, "value", 2);
 __decorateClass([
   property36({ reflect: true })
@@ -8668,7 +8768,7 @@ __decorateClass([
   property36({ reflect: true })
 ], Progress.prototype, "size", 2);
 __decorateClass([
-  property36()
+  property36({ reflect: true })
 ], Progress.prototype, "label", 2);
 __decorateClass([
   property36({ type: Boolean, reflect: true })
@@ -8993,7 +9093,7 @@ __decorateClass([
   property38()
 ], SidePanel.prototype, "size", 2);
 __decorateClass([
-  property38()
+  property38({ reflect: true })
 ], SidePanel.prototype, "label", 2);
 __decorateClass([
   property38({ type: Boolean, attribute: "no-close-button" })
@@ -9358,7 +9458,7 @@ var datepickerStyles = css41`
 // src/components/datepicker/datepicker.ts
 var Datepicker = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.type = "date";
     this.value = "";
     this.min = "";
@@ -9371,6 +9471,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;
@@ -9387,7 +9507,6 @@ var Datepicker = class extends ThemeableElement {
         .value=${this.value}
         min=${this.min || nothing11}
         max=${this.max || nothing11}
-        name=${this.name || nothing11}
         ?disabled=${this.disabled}
         ?required=${this.required}
         ?readonly=${this.readonly}
@@ -9407,20 +9526,21 @@ var Datepicker = class extends ThemeableElement {
   }
 };
 Datepicker.styles = datepickerStyles;
+Datepicker.formAssociated = true;
 __decorateClass([
   property41({ reflect: true })
 ], Datepicker.prototype, "type", 2);
 __decorateClass([
-  property41()
+  property41({ reflect: true })
 ], Datepicker.prototype, "value", 2);
 __decorateClass([
-  property41()
+  property41({ reflect: true })
 ], Datepicker.prototype, "min", 2);
 __decorateClass([
-  property41()
+  property41({ reflect: true })
 ], Datepicker.prototype, "max", 2);
 __decorateClass([
-  property41()
+  property41({ reflect: true })
 ], Datepicker.prototype, "label", 2);
 __decorateClass([
   property41({ attribute: "helper-text" })
@@ -9441,7 +9561,7 @@ __decorateClass([
   property41({ type: Boolean, reflect: true })
 ], Datepicker.prototype, "readonly", 2);
 __decorateClass([
-  property41()
+  property41({ reflect: true })
 ], Datepicker.prototype, "name", 2);
 __decorateClass([
   query7("input")
@@ -10531,7 +10651,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 = "";
@@ -10551,6 +10671,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 "";
@@ -10598,6 +10719,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;
@@ -10646,13 +10785,13 @@ var DateInput = class extends ThemeableElement {
           </div>
         </div>
 
-        ${this.name ? html42`<input type="hidden" name=${this.name} .value=${this.value} />` : nothing12}
         ${this.helperText ? html42`<span class="helper-text">${this.helperText}</span>` : nothing12}
       </div>
     `;
   }
 };
 DateInput.styles = dateInputStyles;
+DateInput.formAssociated = true;
 __decorateClass([
   property43({ reflect: true })
 ], DateInput.prototype, "value", 2);
@@ -10672,10 +10811,10 @@ __decorateClass([
   property43({ attribute: "week-start", reflect: true })
 ], DateInput.prototype, "weekStart", 2);
 __decorateClass([
-  property43()
+  property43({ reflect: true })
 ], DateInput.prototype, "label", 2);
 __decorateClass([
-  property43()
+  property43({ reflect: true })
 ], DateInput.prototype, "placeholder", 2);
 __decorateClass([
   property43({ attribute: "helper-text" })
@@ -10693,7 +10832,7 @@ __decorateClass([
   property43({ type: Boolean, reflect: true })
 ], DateInput.prototype, "required", 2);
 __decorateClass([
-  property43()
+  property43({ reflect: true })
 ], DateInput.prototype, "name", 2);
 __decorateClass([
   state6()
@@ -10894,7 +11033,7 @@ var comboboxStyles = [
 import "@latty-ds/icons";
 var Combobox = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.options = [];
     this.value = "";
     this.label = "";
@@ -10910,6 +11049,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 ?? "";
@@ -10942,7 +11082,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;
@@ -10980,6 +11120,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;
@@ -10992,7 +11150,6 @@ var Combobox = class extends ThemeableElement {
           aria-autocomplete="list"
           aria-required=${this.required}
           autocomplete="off"
-          name=${this.name || nothing13}
           placeholder=${this.open ? this.placeholder : this.selectedLabel || this.placeholder}
           .value=${displayValue}
           ?disabled=${this.disabled}
@@ -11034,17 +11191,18 @@ var Combobox = class extends ThemeableElement {
   }
 };
 Combobox.styles = comboboxStyles;
+Combobox.formAssociated = true;
 __decorateClass([
   property44({ type: Array })
 ], Combobox.prototype, "options", 2);
 __decorateClass([
-  property44()
+  property44({ reflect: true })
 ], Combobox.prototype, "value", 2);
 __decorateClass([
-  property44()
+  property44({ reflect: true })
 ], Combobox.prototype, "label", 2);
 __decorateClass([
-  property44()
+  property44({ reflect: true })
 ], Combobox.prototype, "placeholder", 2);
 __decorateClass([
   property44({ attribute: "helper-text" })
@@ -11062,7 +11220,7 @@ __decorateClass([
   property44({ type: Boolean, reflect: true })
 ], Combobox.prototype, "required", 2);
 __decorateClass([
-  property44()
+  property44({ reflect: true })
 ], Combobox.prototype, "name", 2);
 __decorateClass([
   state7()
@@ -11293,13 +11451,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;
@@ -11335,21 +11514,28 @@ var ColorInput = class extends ThemeableElement {
   }
 };
 ColorInput.styles = colorInputStyles;
+ColorInput.formAssociated = true;
 __decorateClass([
-  property45()
+  property45({ reflect: true })
 ], ColorInput.prototype, "value", 2);
 __decorateClass([
   property45({ reflect: true })
 ], ColorInput.prototype, "format", 2);
 __decorateClass([
-  property45()
+  property45({ reflect: true })
 ], ColorInput.prototype, "label", 2);
 __decorateClass([
-  property45()
+  property45({ reflect: true })
 ], ColorInput.prototype, "placeholder", 2);
 __decorateClass([
   property45({ type: Boolean, reflect: true })
 ], ColorInput.prototype, "disabled", 2);
+__decorateClass([
+  property45({ type: Boolean, reflect: true })
+], ColorInput.prototype, "required", 2);
+__decorateClass([
+  property45({ reflect: true })
+], ColorInput.prototype, "name", 2);
 __decorateClass([
   property45({ reflect: true })
 ], ColorInput.prototype, "size", 2);