@phcdevworks/spectre-components 1.1.0 → 1.3.0

package/dist/index.cjs

@@ -1,17 +1,63 @@
 'use strict';
 
+var spectreUi = require('@phcdevworks/spectre-ui');
 var lit = require('lit');
 var ifDefined_js = require('lit/directives/if-defined.js');
-var spectreUi = require('@phcdevworks/spectre-ui');
 var live_js = require('lit/directives/live.js');
 
-// src/components/button/sp-button.ts
+// src/utils/form.ts
+var spectreInputSizes = ["sm", "md", "lg"];
+function isInputSize(value) {
+  return spectreInputSizes.includes(value);
+}
+var spectreButtonVariants = [
+  "primary",
+  "secondary",
+  "ghost",
+  "danger",
+  "success",
+  "cta",
+  "accent"
+];
+function isButtonVariant(value) {
+  return spectreButtonVariants.includes(value);
+}
+var spectreButtonTypes = ["button", "submit", "reset"];
+function isButtonType(value) {
+  return spectreButtonTypes.includes(value);
+}
+var spectreInputTypes = [
+  "text",
+  "email",
+  "password",
+  "search",
+  "tel",
+  "url",
+  "number",
+  "date",
+  "datetime-local",
+  "month",
+  "time",
+  "week"
+];
+function isInputType(value) {
+  return spectreInputTypes.includes(value);
+}
+function normalizeInt(value, fallback, min = 0) {
+  if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
+    return fallback;
+  }
+  return value;
+}
 var SpectreBaseElement = class extends lit.LitElement {
   constructor() {
     super(...arguments);
     this._ariaLabel = null;
     this._ariaLabelledBy = null;
     this._ariaDescribedBy = null;
+    this._autocapitalize = "";
+    this._autofocus = false;
+    this._spellcheck = null;
     this._title = "";
     this._id = "";
   }
@@ -48,6 +94,29 @@ var SpectreBaseElement = class extends lit.LitElement {
     this._removeHostAttribute("aria-describedby");
     this.requestUpdate();
   }
+  get autocapitalize() {
+    return this._autocapitalize;
+  }
+  set autocapitalize(value) {
+    const normalizedValue = value ?? "";
+    if (this._autocapitalize === normalizedValue) {
+      return;
+    }
+    this._autocapitalize = normalizedValue;
+    this._removeHostAttribute("autocapitalize");
+    this.requestUpdate();
+  }
+  get spellcheck() {
+    return this._spellcheck ?? super.spellcheck;
+  }
+  set spellcheck(value) {
+    if (this._spellcheck === value) {
+      return;
+    }
+    this._spellcheck = value ?? null;
+    this._removeHostAttribute("spellcheck");
+    this.requestUpdate();
+  }
   get title() {
     return this._title;
   }
@@ -72,6 +141,18 @@ var SpectreBaseElement = class extends lit.LitElement {
     this._removeHostAttribute("id");
     this.requestUpdate();
   }
+  get autofocus() {
+    return this._autofocus;
+  }
+  set autofocus(value) {
+    const normalizedValue = !!value;
+    if (this._autofocus === normalizedValue) {
+      return;
+    }
+    this._autofocus = normalizedValue;
+    this._removeHostAttribute("autofocus");
+    this.requestUpdate();
+  }
   // Spectre components intentionally render in light DOM so the global
   // `@phcdevworks/spectre-ui` styling contract can apply directly.
   createRenderRoot() {
@@ -82,6 +163,9 @@ var SpectreBaseElement = class extends lit.LitElement {
     const proxiedAttributes = [
       "id",
       "title",
+      "autocapitalize",
+      "autofocus",
+      "spellcheck",
       "aria-label",
       "aria-labelledby",
       "aria-describedby"
@@ -99,6 +183,12 @@ var SpectreBaseElement = class extends lit.LitElement {
         return this.id || null;
       case "title":
         return this.title || null;
+      case "autocapitalize":
+        return this.autocapitalize || null;
+      case "autofocus":
+        return this.autofocus ? "" : null;
+      case "spellcheck":
+        return this._spellcheck !== null ? String(this._spellcheck) : null;
       case "aria-label":
         return this.ariaLabel;
       case "aria-labelledby":
@@ -115,6 +205,12 @@ var SpectreBaseElement = class extends lit.LitElement {
         return this.id !== "";
       case "title":
         return this.title !== "";
+      case "autocapitalize":
+        return this.autocapitalize !== "";
+      case "autofocus":
+        return this.autofocus;
+      case "spellcheck":
+        return this._spellcheck !== null;
       case "aria-label":
         return this.ariaLabel !== null;
       case "aria-labelledby":
@@ -133,6 +229,15 @@ var SpectreBaseElement = class extends lit.LitElement {
       case "title":
         this.title = value;
         break;
+      case "autocapitalize":
+        this.autocapitalize = value;
+        break;
+      case "autofocus":
+        this.autofocus = true;
+        break;
+      case "spellcheck":
+        this.spellcheck = value !== "false";
+        break;
       case "aria-label":
         this.ariaLabel = value;
         break;
@@ -154,6 +259,15 @@ var SpectreBaseElement = class extends lit.LitElement {
       case "title":
         this.title = "";
         break;
+      case "autocapitalize":
+        this.autocapitalize = "";
+        break;
+      case "autofocus":
+        this.autofocus = false;
+        break;
+      case "spellcheck":
+        this.spellcheck = null;
+        break;
       case "aria-label":
         this.ariaLabel = null;
         break;
@@ -265,32 +379,12 @@ var SpectreProjectableElement = class extends SpectreBaseElement {
     this.contentObserver = void 0;
   }
 };
-var spectreButtonVariants = [
-  "primary",
-  "secondary",
-  "ghost",
-  "danger",
-  "success",
-  "cta",
-  "accent"
-];
-var spectreButtonSizes = ["sm", "md", "lg"];
-var spectreButtonTypes = ["button", "submit", "reset"];
-function isButtonVariant(value) {
-  return spectreButtonVariants.includes(value);
-}
-function isButtonSize(value) {
-  return spectreButtonSizes.includes(value);
-}
-function isButtonType(value) {
-  return spectreButtonTypes.includes(value);
-}
 var SpectreButtonElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
+    this.iconOnly = false;
     this.loading = false;
     this.loadingLabel = "Loading";
     this.pill = false;
@@ -299,6 +393,24 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     this.variant = "primary";
     this.value = "";
   }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-button-native]");
   }
@@ -310,13 +422,28 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-button-native") || el.hasAttribute("data-sp-button-loading-label") || el.hasAttribute("data-sp-button-label-fallback");
   }
   willUpdate(changedProperties) {
-    if (changedProperties.has("variant") && !isButtonVariant(this.variant)) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("iconOnly") && this.iconOnly == null) {
+      this.iconOnly = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("pill") && this.pill == null) {
+      this.pill = false;
+    }
+    if (changedProperties.has("variant") && (this.variant == null || !isButtonVariant(this.variant))) {
       this.variant = "primary";
     }
-    if (changedProperties.has("size") && !isButtonSize(this.size)) {
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
       this.size = "md";
     }
-    if (changedProperties.has("type") && !isButtonType(this.type)) {
+    if (changedProperties.has("type") && (this.type == null || !isButtonType(this.type))) {
       this.type = "button";
     }
     if (changedProperties.has("loadingLabel")) {
@@ -331,15 +458,16 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   get buttonClasses() {
     return spectreUi.getButtonClasses({
       disabled: this.isDisabled,
-      fullWidth: this.fullWidth,
-      loading: this.loading,
-      pill: this.pill,
+      fullWidth: this.fullWidth ?? false,
+      iconOnly: this.iconOnly ?? false,
+      loading: this.loading ?? false,
+      pill: this.pill ?? false,
       size: this.size,
       variant: this.variant
     });
   }
   get isDisabled() {
-    return this.disabled || this.loading;
+    return (this.disabled ?? false) || (this.loading ?? false);
   }
   get visibleLabelFallback() {
     const trimmedLabel = this.label?.trim();
@@ -353,12 +481,18 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
   renderButtonContent() {
     if (this.loading) {
-      return lit.html`<span data-sp-button-loading-label>${this.loadingLabel}</span>`;
+      return lit.html`<span
+        class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
+        data-sp-button-loading-label
+      >${this.loadingLabel}</span>`;
     }
     if (this.hasProjectedContent) {
       return this.projectedContent;
     }
-    return this.visibleLabelFallback ? lit.html`<span data-sp-button-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
+    return this.visibleLabelFallback ? lit.html`<span
+          class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
+          data-sp-button-label-fallback
+        >${this.visibleLabelFallback}</span>` : lit.nothing;
   }
   render() {
     return lit.html`<button
@@ -375,17 +509,17 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
       name="${ifDefined_js.ifDefined(this.name || void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
       type="${this.type}"
-      value="${ifDefined_js.ifDefined(this.value || void 0)}"
+      value="${ifDefined_js.ifDefined(this.value)}"
     >
       ${this.renderButtonContent()}
     </button>`;
   }
 };
 SpectreButtonElement.properties = {
-  autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  iconOnly: { attribute: "icon-only", type: Boolean, reflect: true },
   label: { type: String, reflect: true },
   loading: { type: Boolean, reflect: true },
   loadingLabel: { attribute: "loading-label", type: String, reflect: true },
@@ -404,37 +538,9 @@ function defineSpectreButton(tagName = "sp-button") {
   customElements.define(tagName, SpectreButtonElement);
   return SpectreButtonElement;
 }
-var spectreInputSizes = ["sm", "md", "lg"];
-function isInputSize(value) {
-  return spectreInputSizes.includes(value);
-}
-var spectreInputTypes = [
-  "text",
-  "email",
-  "password",
-  "search",
-  "tel",
-  "url",
-  "number",
-  "date",
-  "datetime-local",
-  "month",
-  "time",
-  "week"
-];
-function isInputType(value) {
-  return spectreInputTypes.includes(value);
-}
-function normalizeInt(value, fallback, min = 0) {
-  if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
-    return fallback;
-  }
-  return value;
-}
 var SpectreInputElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
     this.invalid = false;
@@ -447,11 +553,65 @@ var SpectreInputElement = class extends SpectreBaseElement {
     this.type = "text";
     this.value = "";
   }
+  get autocapitalize() {
+    return super.autocapitalize;
+  }
+  set autocapitalize(value) {
+    super.autocapitalize = value;
+  }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get spellcheck() {
+    return super.spellcheck;
+  }
+  set spellcheck(value) {
+    super.spellcheck = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
   willUpdate(changedProperties) {
-    if (changedProperties.has("size") && !isInputSize(this.size)) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("invalid") && this.invalid == null) {
+      this.invalid = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("pill") && this.pill == null) {
+      this.pill = false;
+    }
+    if (changedProperties.has("readonly") && this.readonly == null) {
+      this.readonly = false;
+    }
+    if (changedProperties.has("required") && this.required == null) {
+      this.required = false;
+    }
+    if (changedProperties.has("success") && this.success == null) {
+      this.success = false;
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
       this.size = "md";
     }
-    if (changedProperties.has("type") && !isInputType(this.type)) {
+    if (changedProperties.has("type") && (this.type == null || !isInputType(this.type))) {
       this.type = "text";
     }
     if (changedProperties.has("value") && this.value == null) {
@@ -466,14 +626,14 @@ var SpectreInputElement = class extends SpectreBaseElement {
   }
   get inputClasses() {
     return spectreUi.getInputClasses({
-      fullWidth: this.fullWidth,
-      pill: this.pill,
+      fullWidth: this.fullWidth ?? false,
+      pill: this.pill ?? false,
       size: this.size,
       state: this.isDisabled ? this.disabled ? "disabled" : "loading" : this.invalid ? "error" : this.success ? "success" : "default"
     });
   }
   get isDisabled() {
-    return this.disabled || this.loading;
+    return (this.disabled ?? false) || (this.loading ?? false);
   }
   get nativeInput() {
     return this.querySelector("[data-sp-input-native]");
@@ -499,22 +659,27 @@ var SpectreInputElement = class extends SpectreBaseElement {
       aria-invalid="${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      autocapitalize="${ifDefined_js.ifDefined(this.autocapitalize || void 0)}"
       autocomplete="${ifDefined_js.ifDefined(this.autocomplete || void 0)}"
       ?autofocus="${this.autofocus}"
       class="${this.inputClasses}"
       data-sp-input-native
       ?disabled="${this.isDisabled}"
+      enterkeyhint="${ifDefined_js.ifDefined(this.enterkeyhint || void 0)}"
       form="${ifDefined_js.ifDefined(this.form || void 0)}"
       ?readonly="${this.readonly}"
       ?required="${this.required}"
       id="${ifDefined_js.ifDefined(this.id || void 0)}"
       inputmode="${ifDefined_js.ifDefined(this.inputmode || void 0)}"
+      list="${ifDefined_js.ifDefined(this.list || void 0)}"
       max="${ifDefined_js.ifDefined(this.max || void 0)}"
       maxlength="${ifDefined_js.ifDefined(this.maxlength)}"
       min="${ifDefined_js.ifDefined(this.min || void 0)}"
       minlength="${ifDefined_js.ifDefined(this.minlength)}"
       name="${ifDefined_js.ifDefined(this.name || void 0)}"
+      pattern="${ifDefined_js.ifDefined(this.pattern || void 0)}"
       placeholder="${ifDefined_js.ifDefined(this.placeholder || void 0)}"
+      spellcheck="${ifDefined_js.ifDefined(this.getAttribute("spellcheck") ?? void 0)}"
       step="${ifDefined_js.ifDefined(this.step || void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
       type="${this.type}"
@@ -526,18 +691,20 @@ var SpectreInputElement = class extends SpectreBaseElement {
 };
 SpectreInputElement.properties = {
   autocomplete: { type: String, reflect: true },
-  autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
+  enterkeyhint: { type: String, reflect: true },
   form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   inputmode: { type: String, reflect: true },
   invalid: { type: Boolean, reflect: true },
+  list: { type: String, reflect: true },
   loading: { type: Boolean, reflect: true },
   max: { type: String, reflect: true },
   maxlength: { type: Number, reflect: true },
   min: { type: String, reflect: true },
   minlength: { type: Number, reflect: true },
   name: { type: String, reflect: true },
+  pattern: { type: String, reflect: true },
   pill: { type: Boolean, reflect: true },
   placeholder: { type: String, reflect: true },
   readonly: { type: Boolean, reflect: true },
@@ -560,7 +727,6 @@ var DEFAULT_ROWS = 2;
 var SpectreTextareaElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
     this.invalid = false;
@@ -573,8 +739,62 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
     this.success = false;
     this.value = "";
   }
+  get autocapitalize() {
+    return super.autocapitalize;
+  }
+  set autocapitalize(value) {
+    super.autocapitalize = value;
+  }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get spellcheck() {
+    return super.spellcheck;
+  }
+  set spellcheck(value) {
+    super.spellcheck = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
   willUpdate(changedProperties) {
-    if (changedProperties.has("size") && !isInputSize(this.size)) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("invalid") && this.invalid == null) {
+      this.invalid = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("pill") && this.pill == null) {
+      this.pill = false;
+    }
+    if (changedProperties.has("readonly") && this.readonly == null) {
+      this.readonly = false;
+    }
+    if (changedProperties.has("required") && this.required == null) {
+      this.required = false;
+    }
+    if (changedProperties.has("success") && this.success == null) {
+      this.success = false;
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
       this.size = "md";
     }
     if (changedProperties.has("rows")) {
@@ -592,14 +812,14 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
   }
   get textareaClasses() {
     return spectreUi.getInputClasses({
-      fullWidth: this.fullWidth,
-      pill: this.pill,
+      fullWidth: this.fullWidth ?? false,
+      pill: this.pill ?? false,
       size: this.size,
       state: this.isDisabled ? this.disabled ? "disabled" : "loading" : this.invalid ? "error" : this.success ? "success" : "default"
     });
   }
   get isDisabled() {
-    return this.disabled || this.loading;
+    return (this.disabled ?? false) || (this.loading ?? false);
   }
   get nativeTextarea() {
     return this.querySelector("[data-sp-textarea-native]");
@@ -625,11 +845,13 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
       aria-invalid="${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      autocapitalize="${ifDefined_js.ifDefined(this.autocapitalize || void 0)}"
       autocomplete="${ifDefined_js.ifDefined(this.autocomplete || void 0)}"
       ?autofocus="${this.autofocus}"
       class="${this.textareaClasses}"
       data-sp-textarea-native
       ?disabled="${this.isDisabled}"
+      enterkeyhint="${ifDefined_js.ifDefined(this.enterkeyhint || void 0)}"
       form="${ifDefined_js.ifDefined(this.form || void 0)}"
       inputmode="${ifDefined_js.ifDefined(this.inputmode || void 0)}"
       ?readonly="${this.readonly}"
@@ -640,6 +862,7 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
       name="${ifDefined_js.ifDefined(this.name || void 0)}"
       placeholder="${ifDefined_js.ifDefined(this.placeholder || void 0)}"
       rows="${this.rows}"
+      spellcheck="${ifDefined_js.ifDefined(this.getAttribute("spellcheck") ?? void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
       .value="${live_js.live(this.value)}"
       @change="${this.handleChange}"
@@ -649,8 +872,8 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
 };
 SpectreTextareaElement.properties = {
   autocomplete: { type: String, reflect: true },
-  autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
+  enterkeyhint: { type: String, reflect: true },
   form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   inputmode: { type: String, reflect: true },
@@ -663,7 +886,7 @@ SpectreTextareaElement.properties = {
   placeholder: { type: String, reflect: true },
   readonly: { type: Boolean, reflect: true },
   required: { type: Boolean, reflect: true },
-  rows: { type: Number },
+  rows: { type: Number, reflect: true },
   size: { type: String, reflect: true },
   success: { type: Boolean, reflect: true },
   value: { type: String }
@@ -679,7 +902,6 @@ function defineSpectreTextarea(tagName = "sp-textarea") {
 var SpectreSelectElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
     this.invalid = false;
@@ -690,6 +912,24 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
     this.success = false;
     this.value = "";
   }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-select-native]");
   }
@@ -701,7 +941,28 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-select-native");
   }
   willUpdate(changedProperties) {
-    if (changedProperties.has("size") && !isInputSize(this.size)) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("invalid") && this.invalid == null) {
+      this.invalid = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("pill") && this.pill == null) {
+      this.pill = false;
+    }
+    if (changedProperties.has("required") && this.required == null) {
+      this.required = false;
+    }
+    if (changedProperties.has("success") && this.success == null) {
+      this.success = false;
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
       this.size = "md";
     }
     if (changedProperties.has("value") && this.value == null) {
@@ -714,8 +975,12 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
     if (!nativeSelect) {
       return;
     }
-    if (this.value !== "" && nativeSelect.value !== this.value) {
-      nativeSelect.value = this.value;
+    const valueChanged = changedProperties.has("value");
+    const oldValue = changedProperties.get("value");
+    if (valueChanged && this.value !== void 0 && (this.value !== "" || oldValue !== void 0 || this.hasAttribute("value"))) {
+      if (nativeSelect.value !== this.value) {
+        nativeSelect.value = this.value;
+      }
     }
     if (this.value === "" && !this.hasAttribute("value")) {
       const nativeValue = nativeSelect.value ?? "";
@@ -730,14 +995,14 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
   }
   get selectClasses() {
     return spectreUi.getInputClasses({
-      fullWidth: this.fullWidth,
-      pill: this.pill,
+      fullWidth: this.fullWidth ?? false,
+      pill: this.pill ?? false,
       size: this.size,
       state: this.isDisabled ? this.disabled ? "disabled" : "loading" : this.invalid ? "error" : this.success ? "success" : "default"
     });
   }
   get isDisabled() {
-    return this.disabled || this.loading;
+    return (this.disabled ?? false) || (this.loading ?? false);
   }
   handleInput(event) {
     const select = event.currentTarget;
@@ -780,7 +1045,6 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
 };
 SpectreSelectElement.properties = {
   autocomplete: { type: String, reflect: true },
-  autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
@@ -804,7 +1068,6 @@ function defineSpectreSelect(tagName = "sp-select") {
 var SpectreCheckboxElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.checked = false;
     this.disabled = false;
     this.invalid = false;
@@ -813,6 +1076,24 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
     this.success = false;
     this.value = "on";
   }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-checkbox-label]");
   }
@@ -824,6 +1105,24 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-checkbox-label") || el.hasAttribute("data-sp-checkbox-native") || el.hasAttribute("data-sp-checkbox-label-fallback") || el.hasAttribute("data-sp-checkbox-indicator");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("checked") && this.checked == null) {
+      this.checked = false;
+    }
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("invalid") && this.invalid == null) {
+      this.invalid = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("required") && this.required == null) {
+      this.required = false;
+    }
+    if (changedProperties.has("success") && this.success == null) {
+      this.success = false;
+    }
     if (changedProperties.has("value") && this.value == null) {
       this.value = "on";
     }
@@ -832,7 +1131,7 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
     return this.querySelector("[data-sp-checkbox-native]");
   }
   get isDisabled() {
-    return this.disabled || this.loading;
+    return (this.disabled ?? false) || (this.loading ?? false);
   }
   get visibleLabelFallback() {
     const trimmedLabel = this.label?.trim();
@@ -853,7 +1152,10 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
     this.nativeInput?.blur();
   }
   render() {
-    const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? lit.html`<span class="sp-label" data-sp-checkbox-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
+    const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? lit.html`<span
+            class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
+            data-sp-checkbox-label-fallback
+          >${this.visibleLabelFallback}</span>` : lit.nothing;
     return lit.html`<label data-sp-checkbox-label>
       <input
         aria-busy="${this.loading ? "true" : "false"}"
@@ -881,7 +1183,6 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
   }
 };
 SpectreCheckboxElement.properties = {
-  autofocus: { type: Boolean, reflect: true },
   checked: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
@@ -904,7 +1205,6 @@ function defineSpectreCheckbox(tagName = "sp-checkbox") {
 var SpectreRadioElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.checked = false;
     this.disabled = false;
     this.invalid = false;
@@ -913,6 +1213,24 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     this.success = false;
     this.value = "on";
   }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-radio-label]");
   }
@@ -924,6 +1242,24 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-radio-label") || el.hasAttribute("data-sp-radio-native") || el.hasAttribute("data-sp-radio-label-fallback") || el.hasAttribute("data-sp-radio-indicator");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("checked") && this.checked == null) {
+      this.checked = false;
+    }
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("invalid") && this.invalid == null) {
+      this.invalid = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("required") && this.required == null) {
+      this.required = false;
+    }
+    if (changedProperties.has("success") && this.success == null) {
+      this.success = false;
+    }
     if (changedProperties.has("value") && this.value == null) {
       this.value = "on";
     }
@@ -932,7 +1268,7 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     return this.querySelector("[data-sp-radio-native]");
   }
   get isDisabled() {
-    return this.disabled || this.loading;
+    return (this.disabled ?? false) || (this.loading ?? false);
   }
   get visibleLabelFallback() {
     const trimmedLabel = this.label?.trim();
@@ -946,6 +1282,26 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     const input = event.currentTarget;
     this.checked = input.checked;
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if ((changedProperties.has("checked") || changedProperties.has("name")) && this.checked && this.name) {
+      this.syncGroup();
+    }
+  }
+  syncGroup() {
+    if (!this.name || !this.checked) {
+      return;
+    }
+    const root = this.getRootNode();
+    const radios = root.querySelectorAll(
+      "sp-radio"
+    );
+    radios.forEach((radio) => {
+      if (radio !== this && radio.name === this.name && radio.checked) {
+        radio.checked = false;
+      }
+    });
+  }
   focus(options) {
     this.nativeInput?.focus(options);
   }
@@ -953,7 +1309,10 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     this.nativeInput?.blur();
   }
   render() {
-    const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? lit.html`<span class="sp-label" data-sp-radio-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
+    const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? lit.html`<span
+            class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
+            data-sp-radio-label-fallback
+          >${this.visibleLabelFallback}</span>` : lit.nothing;
     return lit.html`<label data-sp-radio-label>
       <input
         aria-busy="${this.loading ? "true" : "false"}"
@@ -981,7 +1340,6 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
   }
 };
 SpectreRadioElement.properties = {
-  autofocus: { type: Boolean, reflect: true },
   checked: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
@@ -1002,6 +1360,30 @@ function defineSpectreRadio(tagName = "sp-radio") {
   return SpectreRadioElement;
 }
 var SpectreLabelElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+  }
+  get isDisabled() {
+    return this.disabled ?? false;
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-label-native]");
   }
@@ -1023,7 +1405,7 @@ var SpectreLabelElement = class extends SpectreProjectableElement {
       aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
-      class="sp-label"
+      class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
       data-sp-label-native
       for="${ifDefined_js.ifDefined(this.htmlFor || void 0)}"
       id="${ifDefined_js.ifDefined(this.id || void 0)}"
@@ -1034,6 +1416,7 @@ var SpectreLabelElement = class extends SpectreProjectableElement {
   }
 };
 SpectreLabelElement.properties = {
+  disabled: { type: Boolean, reflect: true },
   htmlFor: { attribute: "for", type: String, reflect: true }
 };
 function defineSpectreLabel(tagName = "sp-label") {
@@ -1048,6 +1431,34 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
     this.disabled = false;
+    this.invalid = false;
+    this.loading = false;
+    this.success = false;
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
+  get visibleLegend() {
+    const trimmedLegend = this.legend?.trim();
+    return trimmedLegend ? trimmedLegend : void 0;
+  }
+  get isDisabled() {
+    return (this.disabled ?? false) || (this.loading ?? false);
   }
   getContentContainer() {
     return this.querySelector("[data-sp-fieldset-native]");
@@ -1059,6 +1470,20 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
     const el = node;
     return el.hasAttribute("data-sp-fieldset-native") || el.hasAttribute("data-sp-fieldset-legend");
   }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("invalid") && this.invalid == null) {
+      this.invalid = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("success") && this.success == null) {
+      this.success = false;
+    }
+  }
   focus(options) {
     this.getContentContainer()?.focus(options);
   }
@@ -1067,17 +1492,23 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
   }
   render() {
     return lit.html`<fieldset
+      aria-busy="${this.loading ? "true" : "false"}"
       aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-invalid="${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      ?autofocus="${this.autofocus}"
       data-sp-fieldset-native
-      ?disabled="${this.disabled}"
+      ?disabled="${this.isDisabled}"
       form="${ifDefined_js.ifDefined(this.form || void 0)}"
       id="${ifDefined_js.ifDefined(this.id || void 0)}"
       name="${ifDefined_js.ifDefined(this.name || void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
     >
-      ${this.legend ? lit.html`<legend class="sp-label" data-sp-fieldset-legend>${this.legend}</legend>` : lit.nothing}
+      ${this.visibleLegend ? lit.html`<legend
+            class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
+            data-sp-fieldset-legend
+          >${this.visibleLegend}</legend>` : lit.nothing}
       ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
     </fieldset>`;
   }
@@ -1085,8 +1516,11 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
 SpectreFieldsetElement.properties = {
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
+  invalid: { type: Boolean, reflect: true },
   legend: { type: String, reflect: true },
-  name: { type: String, reflect: true }
+  loading: { type: Boolean, reflect: true },
+  name: { type: String, reflect: true },
+  success: { type: Boolean, reflect: true }
 };
 function defineSpectreFieldset(tagName = "sp-fieldset") {
   const existingElement = customElements.get(tagName);
@@ -1126,7 +1560,7 @@ exports.defineSpectreLabel = defineSpectreLabel;
 exports.defineSpectreRadio = defineSpectreRadio;
 exports.defineSpectreSelect = defineSpectreSelect;
 exports.defineSpectreTextarea = defineSpectreTextarea;
-exports.spectreButtonSizes = spectreButtonSizes;
+exports.spectreButtonSizes = spectreInputSizes;
 exports.spectreButtonTypes = spectreButtonTypes;
 exports.spectreButtonVariants = spectreButtonVariants;
 exports.spectreInputSizes = spectreInputSizes;