@phcdevworks/spectre-components 1.2.0 → 1.3.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { getButtonClasses, getInputClasses, getInputLabelClasses } from '@phcdevworks/spectre-ui';
+import { getButtonClasses, getInputLabelClasses, getInputClasses } from '@phcdevworks/spectre-ui';
 import { LitElement, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
@@ -54,6 +54,7 @@ var SpectreBaseElement = class extends LitElement {
     this._ariaLabelledBy = null;
     this._ariaDescribedBy = null;
     this._autocapitalize = "";
+    this._autofocus = false;
     this._spellcheck = null;
     this._title = "";
     this._id = "";
@@ -138,6 +139,18 @@ var SpectreBaseElement = class extends 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() {
@@ -149,6 +162,7 @@ var SpectreBaseElement = class extends LitElement {
       "id",
       "title",
       "autocapitalize",
+      "autofocus",
       "spellcheck",
       "aria-label",
       "aria-labelledby",
@@ -169,6 +183,8 @@ var SpectreBaseElement = class extends LitElement {
         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":
@@ -189,6 +205,8 @@ var SpectreBaseElement = class extends LitElement {
         return this.title !== "";
       case "autocapitalize":
         return this.autocapitalize !== "";
+      case "autofocus":
+        return this.autofocus;
       case "spellcheck":
         return this._spellcheck !== null;
       case "aria-label":
@@ -212,6 +230,9 @@ var SpectreBaseElement = class extends LitElement {
       case "autocapitalize":
         this.autocapitalize = value;
         break;
+      case "autofocus":
+        this.autofocus = true;
+        break;
       case "spellcheck":
         this.spellcheck = value !== "false";
         break;
@@ -239,6 +260,9 @@ var SpectreBaseElement = class extends LitElement {
       case "autocapitalize":
         this.autocapitalize = "";
         break;
+      case "autofocus":
+        this.autofocus = false;
+        break;
       case "spellcheck":
         this.spellcheck = null;
         break;
@@ -356,7 +380,6 @@ var SpectreProjectableElement = class extends SpectreBaseElement {
 var SpectreButtonElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
     this.iconOnly = false;
@@ -380,6 +403,12 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   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]");
   }
@@ -391,6 +420,21 @@ 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("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";
     }
@@ -435,12 +479,18 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
   renderButtonContent() {
     if (this.loading) {
-      return html`<span class="sp-label" data-sp-button-loading-label>${this.loadingLabel}</span>`;
+      return html`<span
+        class="${getInputLabelClasses({ disabled: this.isDisabled })}"
+        data-sp-button-loading-label
+      >${this.loadingLabel}</span>`;
     }
     if (this.hasProjectedContent) {
       return this.projectedContent;
     }
-    return this.visibleLabelFallback ? html`<span class="sp-label" data-sp-button-label-fallback>${this.visibleLabelFallback}</span>` : nothing;
+    return this.visibleLabelFallback ? html`<span
+          class="${getInputLabelClasses({ disabled: this.isDisabled })}"
+          data-sp-button-label-fallback
+        >${this.visibleLabelFallback}</span>` : nothing;
   }
   render() {
     return html`<button
@@ -464,7 +514,6 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
 };
 SpectreButtonElement.properties = {
-  autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
@@ -490,7 +539,6 @@ function defineSpectreButton(tagName = "sp-button") {
 var SpectreInputElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
     this.invalid = false;
@@ -509,6 +557,12 @@ var SpectreInputElement = class extends SpectreBaseElement {
   set autocapitalize(value) {
     super.autocapitalize = value;
   }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
   get id() {
     return super.id;
   }
@@ -528,6 +582,30 @@ var SpectreInputElement = class extends SpectreBaseElement {
     super.title = value;
   }
   willUpdate(changedProperties) {
+    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";
     }
@@ -599,9 +677,7 @@ var SpectreInputElement = class extends SpectreBaseElement {
       name="${ifDefined(this.name || void 0)}"
       pattern="${ifDefined(this.pattern || void 0)}"
       placeholder="${ifDefined(this.placeholder || void 0)}"
-      spellcheck="${ifDefined(
-      this.spellcheck === void 0 ? void 0 : String(this.spellcheck)
-    )}"
+      spellcheck="${ifDefined(this.getAttribute("spellcheck") ?? void 0)}"
       step="${ifDefined(this.step || void 0)}"
       title="${ifDefined(this.title || void 0)}"
       type="${this.type}"
@@ -612,9 +688,7 @@ var SpectreInputElement = class extends SpectreBaseElement {
   }
 };
 SpectreInputElement.properties = {
-  autocapitalize: { type: String, reflect: true },
   autocomplete: { type: String, reflect: true },
-  autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   enterkeyhint: { type: String, reflect: true },
   form: { type: String },
@@ -634,7 +708,6 @@ SpectreInputElement.properties = {
   readonly: { type: Boolean, reflect: true },
   required: { type: Boolean, reflect: true },
   size: { type: String, reflect: true },
-  spellcheck: { type: Boolean, reflect: true },
   step: { type: String, reflect: true },
   success: { type: Boolean, reflect: true },
   type: { type: String, reflect: true },
@@ -652,7 +725,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;
@@ -671,6 +743,12 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
   set autocapitalize(value) {
     super.autocapitalize = value;
   }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
   get id() {
     return super.id;
   }
@@ -690,6 +768,30 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
     super.title = value;
   }
   willUpdate(changedProperties) {
+    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";
     }
@@ -758,9 +860,7 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
       name="${ifDefined(this.name || void 0)}"
       placeholder="${ifDefined(this.placeholder || void 0)}"
       rows="${this.rows}"
-      spellcheck="${ifDefined(
-      this.spellcheck === void 0 ? void 0 : String(this.spellcheck)
-    )}"
+      spellcheck="${ifDefined(this.getAttribute("spellcheck") ?? void 0)}"
       title="${ifDefined(this.title || void 0)}"
       .value="${live(this.value)}"
       @change="${this.handleChange}"
@@ -769,9 +869,7 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
   }
 };
 SpectreTextareaElement.properties = {
-  autocapitalize: { type: String, reflect: true },
   autocomplete: { type: String, reflect: true },
-  autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   enterkeyhint: { type: String, reflect: true },
   form: { type: String },
@@ -788,7 +886,6 @@ SpectreTextareaElement.properties = {
   required: { type: Boolean, reflect: true },
   rows: { type: Number, reflect: true },
   size: { type: String, reflect: true },
-  spellcheck: { type: Boolean, reflect: true },
   success: { type: Boolean, reflect: true },
   value: { type: String }
 };
@@ -803,7 +900,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;
@@ -826,6 +922,12 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
   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]");
   }
@@ -837,6 +939,27 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-select-native");
   }
   willUpdate(changedProperties) {
+    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";
     }
@@ -920,7 +1043,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 },
@@ -944,7 +1066,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;
@@ -965,6 +1086,12 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
   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]");
   }
@@ -976,6 +1103,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";
     }
@@ -1036,7 +1181,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 },
@@ -1059,7 +1203,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;
@@ -1080,6 +1223,12 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
   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]");
   }
@@ -1091,6 +1240,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";
     }
@@ -1125,10 +1292,10 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     }
     const root = this.getRootNode();
     const radios = root.querySelectorAll(
-      `sp-radio[name="${this.name}"]`
+      "sp-radio"
     );
     radios.forEach((radio) => {
-      if (radio !== this && radio.checked) {
+      if (radio !== this && radio.name === this.name && radio.checked) {
         radio.checked = false;
       }
     });
@@ -1171,7 +1338,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 },
@@ -1196,6 +1362,11 @@ var SpectreLabelElement = class extends SpectreProjectableElement {
     super(...arguments);
     this.disabled = false;
   }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+  }
   get isDisabled() {
     return this.disabled ?? false;
   }
@@ -1274,6 +1445,12 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
   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;
@@ -1318,6 +1495,7 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
       aria-invalid="${ifDefined(this.invalid ? "true" : void 0)}"
       aria-label="${ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      ?autofocus="${this.autofocus}"
       data-sp-fieldset-native
       ?disabled="${this.isDisabled}"
       form="${ifDefined(this.form || void 0)}"