@latty-ds/web 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -1744,7 +1744,7 @@ var Accordion = class extends ThemeableElement {
 };
 Accordion.styles = accordionStyles;
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Accordion.prototype, "label", 2);
 __decorateClass([
   n4({ attribute: "icon-start" })
@@ -2657,7 +2657,7 @@ var checkboxStyles = i`
 var import_icons4 = require("@latty-ds/icons");
 var Checkbox = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.variant = "primary";
     this.size = "md";
     this.checked = false;
@@ -2668,15 +2668,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.
@@ -2691,7 +2703,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
       })
@@ -2735,6 +2747,7 @@ var Checkbox = class extends ThemeableElement {
   }
 };
 Checkbox.styles = checkboxStyles;
+Checkbox.formAssociated = true;
 __decorateClass([
   n4({ reflect: true })
 ], Checkbox.prototype, "variant", 2);
@@ -2754,16 +2767,16 @@ __decorateClass([
   n4({ type: Boolean, reflect: true })
 ], Checkbox.prototype, "required", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Checkbox.prototype, "label", 2);
 __decorateClass([
   n4({ attribute: "label-position", reflect: true })
 ], Checkbox.prototype, "labelPosition", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Checkbox.prototype, "name", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Checkbox.prototype, "value", 2);
 __decorateClass([
   e4('input[type="checkbox"]')
@@ -3353,22 +3366,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) {
@@ -3837,7 +3843,7 @@ var radioStyles = i`
 // src/components/radio/radio.ts
 var Radio = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.variant = "primary";
     this.size = "md";
     this.checked = false;
@@ -3847,6 +3853,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.
@@ -3888,6 +3913,7 @@ var Radio = class extends ThemeableElement {
   }
 };
 Radio.styles = radioStyles;
+Radio.formAssociated = true;
 __decorateClass([
   n4({ reflect: true })
 ], Radio.prototype, "variant", 2);
@@ -3904,16 +3930,16 @@ __decorateClass([
   n4({ type: Boolean, reflect: true })
 ], Radio.prototype, "required", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Radio.prototype, "label", 2);
 __decorateClass([
   n4({ attribute: "label-position", reflect: true })
 ], Radio.prototype, "labelPosition", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Radio.prototype, "name", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Radio.prototype, "value", 2);
 Radio = __decorateClass([
   t3("lt-radio")
@@ -4062,13 +4088,13 @@ var RadioGroup = class extends ThemeableElement {
 };
 RadioGroup.styles = radioGroupStyles;
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], RadioGroup.prototype, "label", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], RadioGroup.prototype, "name", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], RadioGroup.prototype, "value", 2);
 __decorateClass([
   n4({ reflect: true })
@@ -5679,12 +5705,13 @@ var selectStyles = [
 var import_icons7 = require("@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;
@@ -5692,6 +5719,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.
@@ -5777,16 +5805,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 {
@@ -5796,6 +5828,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);
@@ -5854,6 +5895,7 @@ var Select = class extends ThemeableElement {
   }
 };
 Select.styles = selectStyles;
+Select.formAssociated = true;
 __decorateClass([
   n4({ reflect: true })
 ], Select.prototype, "variant", 2);
@@ -5861,14 +5903,17 @@ __decorateClass([
   n4({ reflect: true })
 ], Select.prototype, "size", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Select.prototype, "value", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Select.prototype, "placeholder", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Select.prototype, "label", 2);
+__decorateClass([
+  n4({ reflect: true })
+], Select.prototype, "name", 2);
 __decorateClass([
   n4({ attribute: "helper-text" })
 ], Select.prototype, "helperText", 2);
@@ -6055,7 +6100,7 @@ var switchStyles = i`
 // src/components/switch/switch.ts
 var Switch = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.variant = "primary";
     this.size = "md";
     this.checked = false;
@@ -6065,6 +6110,7 @@ var Switch = class extends ThemeableElement {
     this.labelPosition = "right";
     this.name = "";
     this.value = "on";
+    this._internals = this.attachInternals();
   }
   /**
    * Handles switch change events.
@@ -6073,6 +6119,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(e7) {
     const target = e7.target;
     this.checked = target.checked;
@@ -6108,6 +6172,7 @@ var Switch = class extends ThemeableElement {
   }
 };
 Switch.styles = switchStyles;
+Switch.formAssociated = true;
 __decorateClass([
   n4({ reflect: true })
 ], Switch.prototype, "variant", 2);
@@ -6124,16 +6189,16 @@ __decorateClass([
   n4({ type: Boolean, reflect: true })
 ], Switch.prototype, "required", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Switch.prototype, "label", 2);
 __decorateClass([
   n4({ attribute: "label-position", reflect: true })
 ], Switch.prototype, "labelPosition", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Switch.prototype, "name", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Switch.prototype, "value", 2);
 Switch = __decorateClass([
   t3("lt-switch")
@@ -6289,10 +6354,10 @@ var Tab = class extends ThemeableElement {
 };
 Tab.styles = tabStyles;
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Tab.prototype, "label", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Tab.prototype, "value", 2);
 __decorateClass([
   n4({ attribute: "icon-start" })
@@ -6510,7 +6575,7 @@ var TabGroup = class extends ThemeableElement {
 };
 TabGroup.styles = tabGroupStyles;
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], TabGroup.prototype, "value", 2);
 __decorateClass([
   n4({ reflect: true })
@@ -7422,13 +7487,14 @@ var textfieldStyles = i`
 var import_icons10 = require("@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;
@@ -7447,6 +7513,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.
@@ -7544,6 +7611,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);
@@ -7618,6 +7701,7 @@ var Textfield = class extends ThemeableElement {
   }
 };
 Textfield.styles = textfieldStyles;
+Textfield.formAssociated = true;
 __decorateClass([
   n4({ reflect: true })
 ], Textfield.prototype, "variant", 2);
@@ -7628,14 +7712,17 @@ __decorateClass([
   n4({ reflect: true })
 ], Textfield.prototype, "type", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Textfield.prototype, "value", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Textfield.prototype, "placeholder", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Textfield.prototype, "label", 2);
+__decorateClass([
+  n4({ reflect: true })
+], Textfield.prototype, "name", 2);
 __decorateClass([
   n4({ attribute: "helper-text" })
 ], Textfield.prototype, "helperText", 2);
@@ -7835,7 +7922,7 @@ __decorateClass([
   n4()
 ], Avatar.prototype, "src", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Avatar.prototype, "name", 2);
 __decorateClass([
   n4()
@@ -8828,7 +8915,7 @@ var sliderStyles = i`
 // src/components/slider/slider.ts
 var Slider = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.size = "md";
     this.disabled = false;
     this.tooltip = false;
@@ -8838,6 +8925,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;
@@ -8854,6 +8942,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(e7) {
     e7.stopPropagation();
@@ -8907,6 +9006,7 @@ var Slider = class extends ThemeableElement {
   }
 };
 Slider.styles = sliderStyles;
+Slider.formAssociated = true;
 __decorateClass([
   n4({ reflect: true })
 ], Slider.prototype, "size", 2);
@@ -8926,13 +9026,13 @@ __decorateClass([
   n4({ type: Number })
 ], Slider.prototype, "step", 2);
 __decorateClass([
-  n4({ type: Number })
+  n4({ type: Number, reflect: true })
 ], Slider.prototype, "value", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Slider.prototype, "label", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Slider.prototype, "name", 2);
 __decorateClass([
   e4("input")
@@ -9492,7 +9592,7 @@ __decorateClass([
   n4()
 ], NavItem.prototype, "href", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], NavItem.prototype, "label", 2);
 __decorateClass([
   n4({ attribute: "icon-start" })
@@ -9544,7 +9644,7 @@ var Nav = class extends ThemeableElement {
 };
 Nav.styles = navStyles;
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Nav.prototype, "label", 2);
 __decorateClass([
   n4({ reflect: true })
@@ -9845,7 +9945,7 @@ __decorateClass([
   n4({ reflect: true })
 ], Divider.prototype, "appearance", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Divider.prototype, "label", 2);
 Divider = __decorateClass([
   t3("lt-divider")
@@ -9958,7 +10058,7 @@ var Progress = class extends ThemeableElement {
 };
 Progress.styles = progressStyles;
 __decorateClass([
-  n4({ type: Number })
+  n4({ type: Number, reflect: true })
 ], Progress.prototype, "value", 2);
 __decorateClass([
   n4({ reflect: true })
@@ -9967,7 +10067,7 @@ __decorateClass([
   n4({ reflect: true })
 ], Progress.prototype, "size", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Progress.prototype, "label", 2);
 __decorateClass([
   n4({ type: Boolean, reflect: true })
@@ -10281,7 +10381,7 @@ __decorateClass([
   n4()
 ], SidePanel.prototype, "size", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], SidePanel.prototype, "label", 2);
 __decorateClass([
   n4({ type: Boolean, attribute: "no-close-button" })
@@ -10631,7 +10731,7 @@ var datepickerStyles = i`
 // src/components/datepicker/datepicker.ts
 var Datepicker = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.type = "date";
     this.value = "";
     this.min = "";
@@ -10644,6 +10744,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;
@@ -10660,7 +10780,6 @@ var Datepicker = class extends ThemeableElement {
         .value=${this.value}
         min=${this.min || A}
         max=${this.max || A}
-        name=${this.name || A}
         ?disabled=${this.disabled}
         ?required=${this.required}
         ?readonly=${this.readonly}
@@ -10680,20 +10799,21 @@ var Datepicker = class extends ThemeableElement {
   }
 };
 Datepicker.styles = datepickerStyles;
+Datepicker.formAssociated = true;
 __decorateClass([
   n4({ reflect: true })
 ], Datepicker.prototype, "type", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Datepicker.prototype, "value", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Datepicker.prototype, "min", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Datepicker.prototype, "max", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Datepicker.prototype, "label", 2);
 __decorateClass([
   n4({ attribute: "helper-text" })
@@ -10714,7 +10834,7 @@ __decorateClass([
   n4({ type: Boolean, reflect: true })
 ], Datepicker.prototype, "readonly", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Datepicker.prototype, "name", 2);
 __decorateClass([
   e4("input")
@@ -11798,7 +11918,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 = "";
@@ -11818,6 +11938,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 "";
@@ -11865,6 +11986,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;
@@ -11913,13 +12052,13 @@ var DateInput = class extends ThemeableElement {
           </div>
         </div>
 
-        ${this.name ? T`<input type="hidden" name=${this.name} .value=${this.value} />` : A}
         ${this.helperText ? T`<span class="helper-text">${this.helperText}</span>` : A}
       </div>
     `;
   }
 };
 DateInput.styles = dateInputStyles;
+DateInput.formAssociated = true;
 __decorateClass([
   n4({ reflect: true })
 ], DateInput.prototype, "value", 2);
@@ -11939,10 +12078,10 @@ __decorateClass([
   n4({ attribute: "week-start", reflect: true })
 ], DateInput.prototype, "weekStart", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], DateInput.prototype, "label", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], DateInput.prototype, "placeholder", 2);
 __decorateClass([
   n4({ attribute: "helper-text" })
@@ -11960,7 +12099,7 @@ __decorateClass([
   n4({ type: Boolean, reflect: true })
 ], DateInput.prototype, "required", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], DateInput.prototype, "name", 2);
 __decorateClass([
   r5()
@@ -12156,7 +12295,7 @@ var comboboxStyles = [
 var import_icons18 = require("@latty-ds/icons");
 var Combobox = class extends ThemeableElement {
   constructor() {
-    super(...arguments);
+    super();
     this.options = [];
     this.value = "";
     this.label = "";
@@ -12172,6 +12311,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((o10) => o10.value === this.value)?.label ?? "";
@@ -12204,7 +12344,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(e7) {
     this.query = e7.target.value;
@@ -12242,6 +12382,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;
@@ -12254,7 +12412,6 @@ var Combobox = class extends ThemeableElement {
           aria-autocomplete="list"
           aria-required=${this.required}
           autocomplete="off"
-          name=${this.name || A}
           placeholder=${this.open ? this.placeholder : this.selectedLabel || this.placeholder}
           .value=${displayValue}
           ?disabled=${this.disabled}
@@ -12296,17 +12453,18 @@ var Combobox = class extends ThemeableElement {
   }
 };
 Combobox.styles = comboboxStyles;
+Combobox.formAssociated = true;
 __decorateClass([
   n4({ type: Array })
 ], Combobox.prototype, "options", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Combobox.prototype, "value", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Combobox.prototype, "label", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Combobox.prototype, "placeholder", 2);
 __decorateClass([
   n4({ attribute: "helper-text" })
@@ -12324,7 +12482,7 @@ __decorateClass([
   n4({ type: Boolean, reflect: true })
 ], Combobox.prototype, "required", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], Combobox.prototype, "name", 2);
 __decorateClass([
   r5()
@@ -12550,13 +12708,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(e7) {
     const pickerHex = e7.target.value;
@@ -12592,21 +12771,28 @@ var ColorInput = class extends ThemeableElement {
   }
 };
 ColorInput.styles = colorInputStyles;
+ColorInput.formAssociated = true;
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], ColorInput.prototype, "value", 2);
 __decorateClass([
   n4({ reflect: true })
 ], ColorInput.prototype, "format", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], ColorInput.prototype, "label", 2);
 __decorateClass([
-  n4()
+  n4({ reflect: true })
 ], ColorInput.prototype, "placeholder", 2);
 __decorateClass([
   n4({ type: Boolean, reflect: true })
 ], ColorInput.prototype, "disabled", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ColorInput.prototype, "required", 2);
+__decorateClass([
+  n4({ reflect: true })
+], ColorInput.prototype, "name", 2);
 __decorateClass([
   n4({ reflect: true })
 ], ColorInput.prototype, "size", 2);