@phcdevworks/spectre-components 0.0.1 → 1.1.0

package/dist/index.js

@@ -1,9 +1,268 @@
-import { LitElement, nothing, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { getButtonClasses, getInputClasses } from '@phcdevworks/spectre-ui';
 import { live } from 'lit/directives/live.js';
 
 // src/components/button/sp-button.ts
+var SpectreBaseElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._ariaLabel = null;
+    this._ariaLabelledBy = null;
+    this._ariaDescribedBy = null;
+    this._title = "";
+    this._id = "";
+  }
+  get ariaLabel() {
+    return this._ariaLabel;
+  }
+  set ariaLabel(value) {
+    if (this._ariaLabel === value) {
+      return;
+    }
+    this._ariaLabel = value;
+    this._removeHostAttribute("aria-label");
+    this.requestUpdate();
+  }
+  get ariaLabelledBy() {
+    return this._ariaLabelledBy;
+  }
+  set ariaLabelledBy(value) {
+    if (this._ariaLabelledBy === value) {
+      return;
+    }
+    this._ariaLabelledBy = value;
+    this._removeHostAttribute("aria-labelledby");
+    this.requestUpdate();
+  }
+  get ariaDescribedBy() {
+    return this._ariaDescribedBy;
+  }
+  set ariaDescribedBy(value) {
+    if (this._ariaDescribedBy === value) {
+      return;
+    }
+    this._ariaDescribedBy = value;
+    this._removeHostAttribute("aria-describedby");
+    this.requestUpdate();
+  }
+  get title() {
+    return this._title;
+  }
+  set title(value) {
+    const normalizedValue = value ?? "";
+    if (this._title === normalizedValue) {
+      return;
+    }
+    this._title = normalizedValue;
+    this._removeHostAttribute("title");
+    this.requestUpdate();
+  }
+  get id() {
+    return this._id;
+  }
+  set id(value) {
+    const normalizedValue = value ?? "";
+    if (this._id === normalizedValue) {
+      return;
+    }
+    this._id = normalizedValue;
+    this._removeHostAttribute("id");
+    this.requestUpdate();
+  }
+  // Spectre components intentionally render in light DOM so the global
+  // `@phcdevworks/spectre-ui` styling contract can apply directly.
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const proxiedAttributes = [
+      "id",
+      "title",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby"
+    ];
+    proxiedAttributes.forEach((attr) => {
+      const value = super.getAttribute(attr);
+      if (value !== null) {
+        this.setAttribute(attr, value);
+      }
+    });
+  }
+  getAttribute(qualifiedName) {
+    switch (qualifiedName) {
+      case "id":
+        return this.id || null;
+      case "title":
+        return this.title || null;
+      case "aria-label":
+        return this.ariaLabel;
+      case "aria-labelledby":
+        return this.ariaLabelledBy;
+      case "aria-describedby":
+        return this.ariaDescribedBy;
+      default:
+        return super.getAttribute(qualifiedName);
+    }
+  }
+  hasAttribute(qualifiedName) {
+    switch (qualifiedName) {
+      case "id":
+        return this.id !== "";
+      case "title":
+        return this.title !== "";
+      case "aria-label":
+        return this.ariaLabel !== null;
+      case "aria-labelledby":
+        return this.ariaLabelledBy !== null;
+      case "aria-describedby":
+        return this.ariaDescribedBy !== null;
+      default:
+        return super.hasAttribute(qualifiedName);
+    }
+  }
+  setAttribute(qualifiedName, value) {
+    switch (qualifiedName) {
+      case "id":
+        this.id = value;
+        break;
+      case "title":
+        this.title = value;
+        break;
+      case "aria-label":
+        this.ariaLabel = value;
+        break;
+      case "aria-labelledby":
+        this.ariaLabelledBy = value;
+        break;
+      case "aria-describedby":
+        this.ariaDescribedBy = value;
+        break;
+      default:
+        super.setAttribute(qualifiedName, value);
+    }
+  }
+  removeAttribute(qualifiedName) {
+    switch (qualifiedName) {
+      case "id":
+        this.id = "";
+        break;
+      case "title":
+        this.title = "";
+        break;
+      case "aria-label":
+        this.ariaLabel = null;
+        break;
+      case "aria-labelledby":
+        this.ariaLabelledBy = null;
+        break;
+      case "aria-describedby":
+        this.ariaDescribedBy = null;
+        break;
+      default:
+        super.removeAttribute(qualifiedName);
+    }
+  }
+  _removeHostAttribute(name) {
+    const host = this;
+    if (HTMLElement.prototype.hasAttribute.call(host, name)) {
+      HTMLElement.prototype.removeAttribute.call(host, name);
+    }
+  }
+  get forwardedAriaLabel() {
+    const value = this.ariaLabel?.trim();
+    return value ? value : void 0;
+  }
+  get forwardedAriaLabelledBy() {
+    const value = this.ariaLabelledBy?.trim();
+    return value ? value : void 0;
+  }
+  get forwardedAriaDescribedBy() {
+    const value = this.ariaDescribedBy?.trim();
+    return value ? value : void 0;
+  }
+};
+SpectreBaseElement.properties = {};
+
+// src/utils/dom.ts
+function hasMeaningfulContent(nodes) {
+  return nodes.some((node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      return true;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      return (node.textContent?.trim().length ?? 0) > 0;
+    }
+    return false;
+  });
+}
+
+// src/utils/projectable.ts
+var SpectreProjectableElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.projectedContent = [];
+  }
+  get hasProjectedContent() {
+    return hasMeaningfulContent(this.projectedContent);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.syncProjectedContent();
+    this.startContentObserver();
+  }
+  disconnectedCallback() {
+    this.stopContentObserver();
+    super.disconnectedCallback();
+  }
+  update(changedProperties) {
+    this.stopContentObserver();
+    super.update(changedProperties);
+    this.startContentObserver();
+  }
+  syncProjectedContent() {
+    const nextProjectedContent = [];
+    const sourceNodes = [
+      ...this.childNodes,
+      ...this.getContentContainer()?.childNodes ?? []
+    ];
+    sourceNodes.forEach((node) => {
+      if (!this.isInternalNode(node) && !nextProjectedContent.includes(node)) {
+        nextProjectedContent.push(node);
+      }
+    });
+    const hasChanged = nextProjectedContent.length !== this.projectedContent.length || nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);
+    if (hasChanged) {
+      this.projectedContent = nextProjectedContent;
+    }
+    return hasChanged;
+  }
+  startContentObserver() {
+    if (this.contentObserver) {
+      return;
+    }
+    this.contentObserver = new MutationObserver((mutations) => {
+      const isInternalMovement = mutations.every(
+        (mutation) => [...mutation.removedNodes].every(
+          (node) => this.isInternalNode(node) || this.contains(node)
+        ) && [...mutation.addedNodes].every((node) => this.isInternalNode(node))
+      );
+      if (isInternalMovement) {
+        return;
+      }
+      if (this.syncProjectedContent()) {
+        this.requestUpdate();
+      }
+    });
+    this.contentObserver.observe(this, { childList: true });
+  }
+  stopContentObserver() {
+    this.contentObserver?.disconnect();
+    this.contentObserver = void 0;
+  }
+};
 var spectreButtonVariants = [
   "primary",
   "secondary",
@@ -24,23 +283,9 @@ function isButtonSize(value) {
 function isButtonType(value) {
   return spectreButtonTypes.includes(value);
 }
-function hasMeaningfulContent(nodes) {
-  return nodes.some((node) => {
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      return true;
-    }
-    if (node.nodeType === Node.TEXT_NODE) {
-      return (node.textContent?.trim().length ?? 0) > 0;
-    }
-    return false;
-  });
-}
-var SpectreButtonElement = class extends LitElement {
+var SpectreButtonElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.ariaLabelledBy = null;
-    this.ariaDescribedBy = null;
     this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
@@ -48,68 +293,19 @@ var SpectreButtonElement = class extends LitElement {
     this.loadingLabel = "Loading";
     this.pill = false;
     this.size = "md";
-    this.title = "";
     this.type = "button";
     this.variant = "primary";
-    // Native slot projection is a Shadow DOM feature, so in light DOM we keep
-    // host-provided content reactive by tracking and reusing the host nodes.
-    this.projectedContent = [];
-  }
-  get id() {
-    return this._id ?? "";
-  }
-  set id(value) {
-    if ((this._id ?? "") === value) {
-      return;
-    }
-    this._id = value;
-    const host = this;
-    if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
-      HTMLElement.prototype.removeAttribute.call(host, "id");
-    }
-    this.requestUpdate();
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
-    }
-    this.syncProjectedContent();
-    this.startContentObserver();
-  }
-  getAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id || null;
-    }
-    return super.getAttribute(qualifiedName);
-  }
-  hasAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id !== "";
-    }
-    return super.hasAttribute(qualifiedName);
+    this.value = "";
   }
-  setAttribute(qualifiedName, value) {
-    if (qualifiedName === "id") {
-      this.id = value;
-      return;
-    }
-    super.setAttribute(qualifiedName, value);
+  getContentContainer() {
+    return this.querySelector("[data-sp-button-native]");
   }
-  removeAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      this.id = "";
-      return;
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
     }
-    super.removeAttribute(qualifiedName);
-  }
-  disconnectedCallback() {
-    this.stopContentObserver();
-    super.disconnectedCallback();
+    const el = node;
+    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)) {
@@ -126,11 +322,9 @@ var SpectreButtonElement = class extends LitElement {
         this.loadingLabel = "Loading";
       }
     }
-  }
-  update(changedProperties) {
-    this.stopContentObserver();
-    super.update(changedProperties);
-    this.startContentObserver();
+    if (changedProperties.has("value") && this.value == null) {
+      this.value = "";
+    }
   }
   get buttonClasses() {
     return getButtonClasses({
@@ -145,118 +339,50 @@ var SpectreButtonElement = class extends LitElement {
   get isDisabled() {
     return this.disabled || this.loading;
   }
-  get hasProjectedContent() {
-    return hasMeaningfulContent(this.projectedContent);
-  }
   get visibleLabelFallback() {
     const trimmedLabel = this.label?.trim();
     return trimmedLabel ? trimmedLabel : void 0;
   }
-  get forwardedAriaLabel() {
-    const ariaLabel = this.ariaLabel?.trim();
-    return ariaLabel ? ariaLabel : void 0;
-  }
-  get forwardedAriaLabelledBy() {
-    const ariaLabelledBy = this.ariaLabelledBy?.trim();
-    return ariaLabelledBy ? ariaLabelledBy : void 0;
-  }
-  get forwardedAriaDescribedBy() {
-    const ariaDescribedBy = this.ariaDescribedBy?.trim();
-    return ariaDescribedBy ? ariaDescribedBy : void 0;
-  }
-  startContentObserver() {
-    if (this.contentObserver) {
-      return;
-    }
-    this.contentObserver = new MutationObserver((mutations) => {
-      const isInternalMovement = mutations.every((mutation) => {
-        return Array.from(mutation.removedNodes).every(
-          (node) => this.isInternalButtonNode(node) || this.contains(node)
-        ) && Array.from(mutation.addedNodes).every((node) => this.isInternalButtonNode(node));
-      });
-      if (isInternalMovement) {
-        return;
-      }
-      if (this.syncProjectedContent()) {
-        this.requestUpdate();
-      }
-    });
-    this.contentObserver.observe(this, {
-      childList: true
-    });
-  }
-  stopContentObserver() {
-    this.contentObserver?.disconnect();
-    this.contentObserver = void 0;
-  }
-  syncProjectedContent() {
-    const nextProjectedContent = [];
-    Array.from(this.childNodes).forEach((node) => {
-      if (this.isInternalButtonNode(node)) {
-        this.projectedContent.forEach((pNode) => {
-          if (pNode.parentNode !== this && this.contains(pNode)) {
-            nextProjectedContent.push(pNode);
-          }
-        });
-      } else {
-        nextProjectedContent.push(node);
-      }
-    });
-    const hasChanged = nextProjectedContent.length !== this.projectedContent.length || nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);
-    if (hasChanged) {
-      this.projectedContent = nextProjectedContent;
-    }
-    return hasChanged;
-  }
-  isInternalButtonNode(node) {
-    return node.nodeType === Node.ELEMENT_NODE && node.hasAttribute("data-sp-button-native");
-  }
-  get nativeButton() {
-    return this.querySelector("[data-sp-button-native]");
-  }
   focus(options) {
-    this.nativeButton?.focus(options);
+    this.getContentContainer()?.focus(options);
   }
   blur() {
-    this.nativeButton?.blur();
+    this.getContentContainer()?.blur();
   }
   renderButtonContent() {
     if (this.loading) {
-      return this.loadingLabel;
+      return html`<span data-sp-button-loading-label>${this.loadingLabel}</span>`;
     }
     if (this.hasProjectedContent) {
       return this.projectedContent;
     }
-    return this.visibleLabelFallback ?? "";
+    return this.visibleLabelFallback ? html`<span data-sp-button-label-fallback>${this.visibleLabelFallback}</span>` : nothing;
   }
   render() {
-    return html`
-      <button
-        aria-busy=${this.loading ? "true" : "false"}
-        aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}
-        aria-label=${ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
-        ?autofocus=${this.autofocus}
-        class=${this.buttonClasses}
-        data-sp-button-native
-        ?disabled=${this.isDisabled}
-        id=${ifDefined(this.id || void 0)}
-        name=${ifDefined(this.name)}
-        title=${ifDefined(this.title || void 0)}
-        type=${this.type}
-        value=${ifDefined(this.value)}
-      >
-        ${this.renderButtonContent() || nothing}
-      </button>
-    `;
+    return html`<button
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      ?autofocus="${this.autofocus}"
+      class="${this.buttonClasses}"
+      data-sp-button-native
+      ?disabled="${this.isDisabled}"
+      form="${ifDefined(this.form || void 0)}"
+      id="${ifDefined(this.id || void 0)}"
+      name="${ifDefined(this.name || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+      type="${this.type}"
+      value="${ifDefined(this.value || void 0)}"
+    >
+      ${this.renderButtonContent()}
+    </button>`;
   }
 };
 SpectreButtonElement.properties = {
-  ariaLabel: { attribute: "aria-label", type: String },
-  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
-  ariaDescribedBy: { attribute: "aria-describedby", type: String },
   autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
+  form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   label: { type: String, reflect: true },
   loading: { type: Boolean, reflect: true },
@@ -264,10 +390,9 @@ SpectreButtonElement.properties = {
   name: { type: String, reflect: true },
   pill: { type: Boolean, reflect: true },
   size: { type: String, reflect: true },
-  title: { type: String, reflect: true },
   type: { type: String, reflect: true },
   variant: { type: String, reflect: true },
-  value: { type: String, reflect: true }
+  value: { type: String }
 };
 function defineSpectreButton(tagName = "sp-button") {
   const existingElement = customElements.get(tagName);
@@ -277,6 +402,10 @@ 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",
@@ -291,19 +420,18 @@ var spectreInputTypes = [
   "time",
   "week"
 ];
-var spectreInputSizes = ["sm", "md", "lg"];
 function isInputType(value) {
   return spectreInputTypes.includes(value);
 }
-function isInputSize(value) {
-  return spectreInputSizes.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 LitElement {
+var SpectreInputElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.ariaLabelledBy = null;
-    this.ariaDescribedBy = null;
     this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
@@ -314,60 +442,9 @@ var SpectreInputElement = class extends LitElement {
     this.required = false;
     this.size = "md";
     this.success = false;
-    this.title = "";
     this.type = "text";
     this.value = "";
   }
-  get id() {
-    return this._id ?? "";
-  }
-  set id(value) {
-    if ((this._id ?? "") === value) {
-      return;
-    }
-    this._id = value;
-    const host = this;
-    if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
-      HTMLElement.prototype.removeAttribute.call(host, "id");
-    }
-    this.requestUpdate();
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
-    }
-  }
-  getAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id || null;
-    }
-    return super.getAttribute(qualifiedName);
-  }
-  hasAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id !== "";
-    }
-    return super.hasAttribute(qualifiedName);
-  }
-  setAttribute(qualifiedName, value) {
-    if (qualifiedName === "id") {
-      this.id = value;
-      return;
-    }
-    super.setAttribute(qualifiedName, value);
-  }
-  removeAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      this.id = "";
-      return;
-    }
-    super.removeAttribute(qualifiedName);
-  }
   willUpdate(changedProperties) {
     if (changedProperties.has("size") && !isInputSize(this.size)) {
       this.size = "md";
@@ -379,14 +456,10 @@ var SpectreInputElement = class extends LitElement {
       this.value = "";
     }
     if (changedProperties.has("maxlength")) {
-      if (this.maxlength == null || !Number.isInteger(this.maxlength) || this.maxlength < 0) {
-        this.maxlength = void 0;
-      }
+      this.maxlength = normalizeInt(this.maxlength, void 0);
     }
     if (changedProperties.has("minlength")) {
-      if (this.minlength == null || !Number.isInteger(this.minlength) || this.minlength < 0) {
-        this.minlength = void 0;
-      }
+      this.minlength = normalizeInt(this.minlength, void 0);
     }
   }
   get inputClasses() {
@@ -403,18 +476,6 @@ var SpectreInputElement = class extends LitElement {
   get nativeInput() {
     return this.querySelector("[data-sp-input-native]");
   }
-  get forwardedAriaLabel() {
-    const ariaLabel = this.ariaLabel?.trim();
-    return ariaLabel ? ariaLabel : void 0;
-  }
-  get forwardedAriaLabelledBy() {
-    const ariaLabelledBy = this.ariaLabelledBy?.trim();
-    return ariaLabelledBy ? ariaLabelledBy : void 0;
-  }
-  get forwardedAriaDescribedBy() {
-    const ariaDescribedBy = this.ariaDescribedBy?.trim();
-    return ariaDescribedBy ? ariaDescribedBy : void 0;
-  }
   handleInput(event) {
     const input = event.currentTarget;
     this.value = input.value;
@@ -430,62 +491,58 @@ var SpectreInputElement = class extends LitElement {
     this.nativeInput?.blur();
   }
   render() {
-    return html`
-      <input
-        aria-busy=${this.loading ? "true" : "false"}
-        aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}
-        aria-invalid=${ifDefined(this.invalid ? "true" : void 0)}
-        aria-label=${ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
-        autocomplete=${ifDefined(this.autocomplete)}
-        ?autofocus=${this.autofocus}
-        class=${this.inputClasses}
-        data-sp-input-native
-        ?disabled=${this.isDisabled}
-        ?readonly=${this.readonly}
-        ?required=${this.required}
-        id=${ifDefined(this.id || void 0)}
-        inputmode=${ifDefined(this.inputmode)}
-        max=${ifDefined(this.max)}
-        maxlength=${ifDefined(this.maxlength)}
-        min=${ifDefined(this.min)}
-        minlength=${ifDefined(this.minlength)}
-        name=${ifDefined(this.name)}
-        placeholder=${ifDefined(this.placeholder)}
-        step=${ifDefined(this.step)}
-        title=${ifDefined(this.title || void 0)}
-        type=${this.type}
-        .value=${live(this.value)}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-      />
-    `;
+    return html`<input
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-invalid="${ifDefined(this.invalid ? "true" : void 0)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      autocomplete="${ifDefined(this.autocomplete || void 0)}"
+      ?autofocus="${this.autofocus}"
+      class="${this.inputClasses}"
+      data-sp-input-native
+      ?disabled="${this.isDisabled}"
+      form="${ifDefined(this.form || void 0)}"
+      ?readonly="${this.readonly}"
+      ?required="${this.required}"
+      id="${ifDefined(this.id || void 0)}"
+      inputmode="${ifDefined(this.inputmode || void 0)}"
+      max="${ifDefined(this.max || void 0)}"
+      maxlength="${ifDefined(this.maxlength)}"
+      min="${ifDefined(this.min || void 0)}"
+      minlength="${ifDefined(this.minlength)}"
+      name="${ifDefined(this.name || void 0)}"
+      placeholder="${ifDefined(this.placeholder || void 0)}"
+      step="${ifDefined(this.step || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+      type="${this.type}"
+      .value="${live(this.value)}"
+      @change="${this.handleChange}"
+      @input="${this.handleInput}"
+    />`;
   }
 };
 SpectreInputElement.properties = {
-  ariaLabel: { attribute: "aria-label", type: String },
-  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
-  ariaDescribedBy: { attribute: "aria-describedby", type: String },
-  autocomplete: { type: String },
+  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 },
-  inputmode: { type: String },
+  inputmode: { type: String, reflect: true },
   invalid: { type: Boolean, reflect: true },
   loading: { type: Boolean, reflect: true },
-  max: { type: String },
-  maxlength: { type: Number },
-  min: { type: String },
-  minlength: { type: Number },
-  name: { type: String },
+  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 },
   pill: { type: Boolean, reflect: true },
-  placeholder: { type: String },
+  placeholder: { type: String, reflect: true },
   readonly: { type: Boolean, reflect: true },
   required: { type: Boolean, reflect: true },
   size: { type: String, reflect: true },
-  step: { type: String },
+  step: { type: String, reflect: true },
   success: { type: Boolean, reflect: true },
-  title: { type: String, reflect: true },
   type: { type: String, reflect: true },
   value: { type: String }
 };
@@ -498,12 +555,9 @@ function defineSpectreInput(tagName = "sp-input") {
   return SpectreInputElement;
 }
 var DEFAULT_ROWS = 2;
-var SpectreTextareaElement = class extends LitElement {
+var SpectreTextareaElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.ariaLabelledBy = null;
-    this.ariaDescribedBy = null;
     this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
@@ -515,80 +569,23 @@ var SpectreTextareaElement = class extends LitElement {
     this.rows = DEFAULT_ROWS;
     this.size = "md";
     this.success = false;
-    this.title = "";
     this.value = "";
   }
-  get id() {
-    return this._id ?? "";
-  }
-  set id(value) {
-    if ((this._id ?? "") === value) {
-      return;
-    }
-    this._id = value;
-    const host = this;
-    if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
-      HTMLElement.prototype.removeAttribute.call(host, "id");
-    }
-    this.requestUpdate();
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
-    }
-  }
-  getAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id || null;
-    }
-    return super.getAttribute(qualifiedName);
-  }
-  hasAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id !== "";
-    }
-    return super.hasAttribute(qualifiedName);
-  }
-  setAttribute(qualifiedName, value) {
-    if (qualifiedName === "id") {
-      this.id = value;
-      return;
-    }
-    super.setAttribute(qualifiedName, value);
-  }
-  removeAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      this.id = "";
-      return;
-    }
-    super.removeAttribute(qualifiedName);
-  }
   willUpdate(changedProperties) {
     if (changedProperties.has("size") && !isInputSize(this.size)) {
       this.size = "md";
     }
     if (changedProperties.has("rows")) {
-      if (this.rows == null || !Number.isInteger(this.rows) || this.rows < 1) {
-        this.rows = DEFAULT_ROWS;
-      }
+      this.rows = normalizeInt(this.rows, DEFAULT_ROWS, 1);
     }
     if (changedProperties.has("value") && this.value == null) {
       this.value = "";
     }
     if (changedProperties.has("maxlength")) {
-      if (this.maxlength == null || !Number.isInteger(this.maxlength) || this.maxlength < 0) {
-        this.maxlength = void 0;
-      }
+      this.maxlength = normalizeInt(this.maxlength, void 0);
     }
     if (changedProperties.has("minlength")) {
-      if (this.minlength == null || !Number.isInteger(this.minlength) || this.minlength < 0) {
-        this.minlength = void 0;
-      }
+      this.minlength = normalizeInt(this.minlength, void 0);
     }
   }
   get textareaClasses() {
@@ -605,18 +602,6 @@ var SpectreTextareaElement = class extends LitElement {
   get nativeTextarea() {
     return this.querySelector("[data-sp-textarea-native]");
   }
-  get forwardedAriaLabel() {
-    const ariaLabel = this.ariaLabel?.trim();
-    return ariaLabel ? ariaLabel : void 0;
-  }
-  get forwardedAriaLabelledBy() {
-    const ariaLabelledBy = this.ariaLabelledBy?.trim();
-    return ariaLabelledBy ? ariaLabelledBy : void 0;
-  }
-  get forwardedAriaDescribedBy() {
-    const ariaDescribedBy = this.ariaDescribedBy?.trim();
-    return ariaDescribedBy ? ariaDescribedBy : void 0;
-  }
   handleInput(event) {
     const textarea = event.currentTarget;
     this.value = textarea.value;
@@ -632,57 +617,53 @@ var SpectreTextareaElement = class extends LitElement {
     this.nativeTextarea?.blur();
   }
   render() {
-    return html`
-      <textarea
-        aria-busy=${this.loading ? "true" : "false"}
-        aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}
-        aria-invalid=${ifDefined(this.invalid ? "true" : void 0)}
-        aria-label=${ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
-        autocomplete=${ifDefined(this.autocomplete)}
-        ?autofocus=${this.autofocus}
-        class=${this.textareaClasses}
-        data-sp-textarea-native
-        ?disabled=${this.isDisabled}
-        inputmode=${ifDefined(this.inputmode)}
-        ?readonly=${this.readonly}
-        ?required=${this.required}
-        id=${ifDefined(this.id || void 0)}
-        maxlength=${ifDefined(this.maxlength)}
-        minlength=${ifDefined(this.minlength)}
-        name=${ifDefined(this.name)}
-        placeholder=${ifDefined(this.placeholder)}
-        rows=${this.rows}
-        title=${ifDefined(this.title || void 0)}
-        .value=${live(this.value)}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-      ></textarea>
-    `;
+    return html`<textarea
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-invalid="${ifDefined(this.invalid ? "true" : void 0)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      autocomplete="${ifDefined(this.autocomplete || void 0)}"
+      ?autofocus="${this.autofocus}"
+      class="${this.textareaClasses}"
+      data-sp-textarea-native
+      ?disabled="${this.isDisabled}"
+      form="${ifDefined(this.form || void 0)}"
+      inputmode="${ifDefined(this.inputmode || void 0)}"
+      ?readonly="${this.readonly}"
+      ?required="${this.required}"
+      id="${ifDefined(this.id || void 0)}"
+      maxlength="${ifDefined(this.maxlength)}"
+      minlength="${ifDefined(this.minlength)}"
+      name="${ifDefined(this.name || void 0)}"
+      placeholder="${ifDefined(this.placeholder || void 0)}"
+      rows="${this.rows}"
+      title="${ifDefined(this.title || void 0)}"
+      .value="${live(this.value)}"
+      @change="${this.handleChange}"
+      @input="${this.handleInput}"
+    ></textarea>`;
   }
 };
 SpectreTextareaElement.properties = {
-  ariaLabel: { attribute: "aria-label", type: String },
-  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
-  ariaDescribedBy: { attribute: "aria-describedby", type: String },
-  autocomplete: { type: String },
+  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 },
-  inputmode: { type: String },
+  inputmode: { type: String, reflect: true },
   invalid: { type: Boolean, reflect: true },
   loading: { type: Boolean, reflect: true },
-  maxlength: { type: Number },
-  minlength: { type: Number },
-  name: { type: String },
+  maxlength: { type: Number, reflect: true },
+  minlength: { type: Number, reflect: true },
+  name: { type: String, reflect: true },
   pill: { type: Boolean, reflect: true },
-  placeholder: { type: String },
+  placeholder: { type: String, reflect: true },
   readonly: { type: Boolean, reflect: true },
   required: { type: Boolean, reflect: true },
   rows: { type: Number },
   size: { type: String, reflect: true },
   success: { type: Boolean, reflect: true },
-  title: { type: String, reflect: true },
   value: { type: String }
 };
 function defineSpectreTextarea(tagName = "sp-textarea") {
@@ -693,26 +674,9 @@ function defineSpectreTextarea(tagName = "sp-textarea") {
   customElements.define(tagName, SpectreTextareaElement);
   return SpectreTextareaElement;
 }
-var spectreSelectSizes = ["sm", "md", "lg"];
-function isSelectSize(value) {
-  return spectreSelectSizes.includes(value);
-}
-function isSelectableContent(node) {
-  if (node.nodeType === Node.ELEMENT_NODE) {
-    const tagName = node.tagName;
-    return tagName === "OPTION" || tagName === "OPTGROUP";
-  }
-  if (node.nodeType === Node.TEXT_NODE) {
-    return (node.textContent?.trim().length ?? 0) > 0;
-  }
-  return false;
-}
-var SpectreSelectElement = class extends LitElement {
+var SpectreSelectElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.ariaLabelledBy = null;
-    this.ariaDescribedBy = null;
     this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
@@ -722,93 +686,43 @@ var SpectreSelectElement = class extends LitElement {
     this.required = false;
     this.size = "md";
     this.success = false;
-    this.title = "";
     this.value = "";
-    this.projectedOptions = [];
-  }
-  get id() {
-    return this._id ?? "";
   }
-  set id(value) {
-    if ((this._id ?? "") === value) {
-      return;
-    }
-    this._id = value;
-    const host = this;
-    if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
-      HTMLElement.prototype.removeAttribute.call(host, "id");
-    }
-    this.requestUpdate();
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
-    }
-    this.syncProjectedOptions();
-    this.startContentObserver();
-  }
-  disconnectedCallback() {
-    this.stopContentObserver();
-    super.disconnectedCallback();
-  }
-  getAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id || null;
-    }
-    return super.getAttribute(qualifiedName);
-  }
-  hasAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id !== "";
-    }
-    return super.hasAttribute(qualifiedName);
-  }
-  setAttribute(qualifiedName, value) {
-    if (qualifiedName === "id") {
-      this.id = value;
-      return;
-    }
-    super.setAttribute(qualifiedName, value);
+  getContentContainer() {
+    return this.querySelector("[data-sp-select-native]");
   }
-  removeAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      this.id = "";
-      return;
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
     }
-    super.removeAttribute(qualifiedName);
+    const el = node;
+    return el.hasAttribute("data-sp-select-native");
   }
   willUpdate(changedProperties) {
-    if (changedProperties.has("size") && !isSelectSize(this.size)) {
+    if (changedProperties.has("size") && !isInputSize(this.size)) {
       this.size = "md";
     }
     if (changedProperties.has("value") && this.value == null) {
       this.value = "";
     }
   }
-  update(changedProperties) {
-    this.stopContentObserver();
-    super.update(changedProperties);
-    this.startContentObserver();
-  }
   updated(changedProperties) {
     super.updated(changedProperties);
-    const nativeSelect = this.nativeSelect;
+    const nativeSelect = this.getContentContainer();
     if (!nativeSelect) {
       return;
     }
     if (this.value !== "" && nativeSelect.value !== this.value) {
       nativeSelect.value = this.value;
-      return;
     }
     if (this.value === "" && !this.hasAttribute("value")) {
       const nativeValue = nativeSelect.value ?? "";
-      if (nativeValue !== "") {
-        this.value = nativeValue;
+      if (nativeValue !== "" && nativeValue !== this.value) {
+        this.updateComplete.then(() => {
+          if (this.value === "" && !this.hasAttribute("value")) {
+            this.value = nativeValue;
+          }
+        });
       }
     }
   }
@@ -817,75 +731,11 @@ var SpectreSelectElement = class extends LitElement {
       fullWidth: this.fullWidth,
       pill: this.pill,
       size: this.size,
-      state: this.isDisabled ? this.disabled ? "disabled" : "loading" : this.invalid ? "error" : this.success ? "success" : "default"
-    });
-  }
-  get isDisabled() {
-    return this.disabled || this.loading;
-  }
-  get nativeSelect() {
-    return this.querySelector("[data-sp-select-native]");
-  }
-  get forwardedAriaLabel() {
-    const ariaLabel = this.ariaLabel?.trim();
-    return ariaLabel ? ariaLabel : void 0;
-  }
-  get forwardedAriaLabelledBy() {
-    const ariaLabelledBy = this.ariaLabelledBy?.trim();
-    return ariaLabelledBy ? ariaLabelledBy : void 0;
-  }
-  get forwardedAriaDescribedBy() {
-    const ariaDescribedBy = this.ariaDescribedBy?.trim();
-    return ariaDescribedBy ? ariaDescribedBy : void 0;
-  }
-  startContentObserver() {
-    if (this.contentObserver) {
-      return;
-    }
-    this.contentObserver = new MutationObserver((mutations) => {
-      const isInternalMovement = mutations.every((mutation) => {
-        return Array.from(mutation.removedNodes).every(
-          (node) => this.isInternalSelectNode(node) || this.contains(node)
-        ) && Array.from(mutation.addedNodes).every((node) => this.isInternalSelectNode(node));
-      });
-      if (isInternalMovement) {
-        return;
-      }
-      if (this.syncProjectedOptions()) {
-        this.requestUpdate();
-      }
-    });
-    this.contentObserver.observe(this, {
-      childList: true
-    });
-  }
-  stopContentObserver() {
-    this.contentObserver?.disconnect();
-    this.contentObserver = void 0;
-  }
-  syncProjectedOptions() {
-    const nextProjectedOptions = [];
-    Array.from(this.childNodes).forEach((node) => {
-      if (this.isInternalSelectNode(node)) {
-        this.projectedOptions.forEach((projectedNode) => {
-          if (projectedNode.parentNode !== this && this.contains(projectedNode)) {
-            nextProjectedOptions.push(projectedNode);
-          }
-        });
-        return;
-      }
-      if (isSelectableContent(node)) {
-        nextProjectedOptions.push(node);
-      }
-    });
-    const hasChanged = nextProjectedOptions.length !== this.projectedOptions.length || nextProjectedOptions.some((node, index) => node !== this.projectedOptions[index]);
-    if (hasChanged) {
-      this.projectedOptions = nextProjectedOptions;
-    }
-    return hasChanged;
+      state: this.isDisabled ? this.disabled ? "disabled" : "loading" : this.invalid ? "error" : this.success ? "success" : "default"
+    });
   }
-  isInternalSelectNode(node) {
-    return node.nodeType === Node.ELEMENT_NODE && node.hasAttribute("data-sp-select-native");
+  get isDisabled() {
+    return this.disabled || this.loading;
   }
   handleInput(event) {
     const select = event.currentTarget;
@@ -896,51 +746,49 @@ var SpectreSelectElement = class extends LitElement {
     this.value = select.value;
   }
   focus(options) {
-    this.nativeSelect?.focus(options);
+    this.getContentContainer()?.focus(options);
   }
   blur() {
-    this.nativeSelect?.blur();
+    this.getContentContainer()?.blur();
   }
   render() {
-    return html`
-      <select
-        aria-busy=${this.loading ? "true" : "false"}
-        aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}
-        aria-invalid=${ifDefined(this.invalid ? "true" : void 0)}
-        aria-label=${ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
-        ?autofocus=${this.autofocus}
-        class=${this.selectClasses}
-        data-sp-select-native
-        ?disabled=${this.isDisabled}
-        id=${ifDefined(this.id || void 0)}
-        name=${ifDefined(this.name)}
-        ?required=${this.required}
-        title=${ifDefined(this.title || void 0)}
-        .value=${live(this.value)}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-      >
-        ${this.projectedOptions.length > 0 ? this.projectedOptions : nothing}
-      </select>
-    `;
+    return html`<select
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-invalid="${ifDefined(this.invalid ? "true" : void 0)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      autocomplete="${ifDefined(this.autocomplete || void 0)}"
+      ?autofocus="${this.autofocus}"
+      class="${this.selectClasses}"
+      data-sp-select-native
+      ?disabled="${this.isDisabled}"
+      form="${ifDefined(this.form || void 0)}"
+      id="${ifDefined(this.id || void 0)}"
+      name="${ifDefined(this.name || void 0)}"
+      ?required="${this.required}"
+      title="${ifDefined(this.title || void 0)}"
+      .value="${live(this.value)}"
+      @change="${this.handleChange}"
+      @input="${this.handleInput}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : nothing}
+    </select>`;
   }
 };
 SpectreSelectElement.properties = {
-  ariaLabel: { attribute: "aria-label", type: String },
-  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
-  ariaDescribedBy: { attribute: "aria-describedby", type: String },
+  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 },
   invalid: { type: Boolean, reflect: true },
   loading: { type: Boolean, reflect: true },
-  name: { type: String },
+  name: { type: String, reflect: true },
   pill: { type: Boolean, reflect: true },
   required: { type: Boolean, reflect: true },
   size: { type: String, reflect: true },
   success: { type: Boolean, reflect: true },
-  title: { type: String, reflect: true },
   value: { type: String }
 };
 function defineSpectreSelect(tagName = "sp-select") {
@@ -951,70 +799,27 @@ function defineSpectreSelect(tagName = "sp-select") {
   customElements.define(tagName, SpectreSelectElement);
   return SpectreSelectElement;
 }
-var SpectreCheckboxElement = class extends LitElement {
+var SpectreCheckboxElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.ariaLabelledBy = null;
-    this.ariaDescribedBy = null;
     this.autofocus = false;
     this.checked = false;
     this.disabled = false;
     this.invalid = false;
-    this.label = "";
+    this.loading = false;
     this.required = false;
-    this.title = "";
+    this.success = false;
     this.value = "on";
   }
-  get id() {
-    return this._id ?? "";
-  }
-  set id(value) {
-    if ((this._id ?? "") === value) {
-      return;
-    }
-    this._id = value;
-    const host = this;
-    if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
-      HTMLElement.prototype.removeAttribute.call(host, "id");
-    }
-    this.requestUpdate();
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
-    }
-  }
-  getAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id || null;
-    }
-    return super.getAttribute(qualifiedName);
-  }
-  hasAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id !== "";
-    }
-    return super.hasAttribute(qualifiedName);
-  }
-  setAttribute(qualifiedName, value) {
-    if (qualifiedName === "id") {
-      this.id = value;
-      return;
-    }
-    super.setAttribute(qualifiedName, value);
+  getContentContainer() {
+    return this.querySelector("[data-sp-checkbox-label]");
   }
-  removeAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      this.id = "";
-      return;
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
     }
-    super.removeAttribute(qualifiedName);
+    const el = node;
+    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("value") && this.value == null) {
@@ -1024,17 +829,12 @@ var SpectreCheckboxElement = class extends LitElement {
   get nativeInput() {
     return this.querySelector("[data-sp-checkbox-native]");
   }
-  get forwardedAriaLabel() {
-    const value = this.ariaLabel?.trim();
-    return value ? value : void 0;
-  }
-  get forwardedAriaLabelledBy() {
-    const value = this.ariaLabelledBy?.trim();
-    return value ? value : void 0;
+  get isDisabled() {
+    return this.disabled || this.loading;
   }
-  get forwardedAriaDescribedBy() {
-    const value = this.ariaDescribedBy?.trim();
-    return value ? value : void 0;
+  get visibleLabelFallback() {
+    const trimmedLabel = this.label?.trim();
+    return trimmedLabel ? trimmedLabel : void 0;
   }
   handleInput(event) {
     const input = event.currentTarget;
@@ -1051,43 +851,44 @@ var SpectreCheckboxElement = class extends LitElement {
     this.nativeInput?.blur();
   }
   render() {
-    return html`
-      <label>
-        <input
-          aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}
-          aria-invalid=${ifDefined(this.invalid ? "true" : void 0)}
-          aria-label=${ifDefined(this.forwardedAriaLabel)}
-          aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
-          ?autofocus=${this.autofocus}
-          data-sp-checkbox-native
-          ?checked=${this.checked}
-          ?disabled=${this.disabled}
-          id=${ifDefined(this.id || void 0)}
-          name=${ifDefined(this.name)}
-          ?required=${this.required}
-          title=${ifDefined(this.title || void 0)}
-          type='checkbox'
-          value=${ifDefined(this.value || void 0)}
-          @change=${this.handleChange}
-          @input=${this.handleInput}
-        />
-        <span class='sp-label'>${this.label}</span>
-      </label>
-    `;
+    const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? html`<span class="sp-label" data-sp-checkbox-label-fallback>${this.visibleLabelFallback}</span>` : nothing;
+    return html`<label data-sp-checkbox-label>
+      <input
+        aria-busy="${this.loading ? "true" : "false"}"
+        aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-invalid="${ifDefined(this.invalid ? "true" : void 0)}"
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+        ?autofocus="${this.autofocus}"
+        data-sp-checkbox-native
+        .checked="${live(this.checked)}"
+        ?disabled="${this.isDisabled}"
+        form="${ifDefined(this.form || void 0)}"
+        id="${ifDefined(this.id || void 0)}"
+        name="${ifDefined(this.name || void 0)}"
+        ?required="${this.required}"
+        title="${ifDefined(this.title || void 0)}"
+        type="checkbox"
+        value="${ifDefined(this.value)}"
+        @change="${this.handleChange}"
+        @input="${this.handleInput}"
+      />
+      <span class="sp-checkbox-indicator" data-sp-checkbox-indicator></span>
+      ${labelContent}
+    </label>`;
   }
 };
 SpectreCheckboxElement.properties = {
-  ariaLabel: { attribute: "aria-label", type: String },
-  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
-  ariaDescribedBy: { attribute: "aria-describedby", type: String },
   autofocus: { type: Boolean, reflect: true },
   checked: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
+  form: { type: String },
   invalid: { type: Boolean, reflect: true },
+  loading: { type: Boolean, reflect: true },
   label: { type: String, reflect: true },
-  name: { type: String },
+  name: { type: String, reflect: true },
   required: { type: Boolean, reflect: true },
-  title: { type: String, reflect: true },
+  success: { type: Boolean, reflect: true },
   value: { type: String }
 };
 function defineSpectreCheckbox(tagName = "sp-checkbox") {
@@ -1098,70 +899,27 @@ function defineSpectreCheckbox(tagName = "sp-checkbox") {
   customElements.define(tagName, SpectreCheckboxElement);
   return SpectreCheckboxElement;
 }
-var SpectreRadioElement = class extends LitElement {
+var SpectreRadioElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.ariaLabelledBy = null;
-    this.ariaDescribedBy = null;
     this.autofocus = false;
     this.checked = false;
     this.disabled = false;
     this.invalid = false;
-    this.label = "";
+    this.loading = false;
     this.required = false;
-    this.title = "";
+    this.success = false;
     this.value = "on";
   }
-  get id() {
-    return this._id ?? "";
-  }
-  set id(value) {
-    if ((this._id ?? "") === value) {
-      return;
-    }
-    this._id = value;
-    const host = this;
-    if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
-      HTMLElement.prototype.removeAttribute.call(host, "id");
-    }
-    this.requestUpdate();
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
-    }
-  }
-  getAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id || null;
-    }
-    return super.getAttribute(qualifiedName);
-  }
-  hasAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id !== "";
-    }
-    return super.hasAttribute(qualifiedName);
-  }
-  setAttribute(qualifiedName, value) {
-    if (qualifiedName === "id") {
-      this.id = value;
-      return;
-    }
-    super.setAttribute(qualifiedName, value);
+  getContentContainer() {
+    return this.querySelector("[data-sp-radio-label]");
   }
-  removeAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      this.id = "";
-      return;
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
     }
-    super.removeAttribute(qualifiedName);
+    const el = node;
+    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("value") && this.value == null) {
@@ -1171,17 +929,12 @@ var SpectreRadioElement = class extends LitElement {
   get nativeInput() {
     return this.querySelector("[data-sp-radio-native]");
   }
-  get forwardedAriaLabel() {
-    const value = this.ariaLabel?.trim();
-    return value ? value : void 0;
-  }
-  get forwardedAriaLabelledBy() {
-    const value = this.ariaLabelledBy?.trim();
-    return value ? value : void 0;
+  get isDisabled() {
+    return this.disabled || this.loading;
   }
-  get forwardedAriaDescribedBy() {
-    const value = this.ariaDescribedBy?.trim();
-    return value ? value : void 0;
+  get visibleLabelFallback() {
+    const trimmedLabel = this.label?.trim();
+    return trimmedLabel ? trimmedLabel : void 0;
   }
   handleInput(event) {
     const input = event.currentTarget;
@@ -1198,43 +951,44 @@ var SpectreRadioElement = class extends LitElement {
     this.nativeInput?.blur();
   }
   render() {
-    return html`
-      <label>
-        <input
-          aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}
-          aria-invalid=${ifDefined(this.invalid ? "true" : void 0)}
-          aria-label=${ifDefined(this.forwardedAriaLabel)}
-          aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
-          ?autofocus=${this.autofocus}
-          data-sp-radio-native
-          ?checked=${this.checked}
-          ?disabled=${this.disabled}
-          id=${ifDefined(this.id || void 0)}
-          name=${ifDefined(this.name)}
-          ?required=${this.required}
-          title=${ifDefined(this.title || void 0)}
-          type='radio'
-          value=${ifDefined(this.value || void 0)}
-          @change=${this.handleChange}
-          @input=${this.handleInput}
-        />
-        <span class='sp-label'>${this.label}</span>
-      </label>
-    `;
+    const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? html`<span class="sp-label" data-sp-radio-label-fallback>${this.visibleLabelFallback}</span>` : nothing;
+    return html`<label data-sp-radio-label>
+      <input
+        aria-busy="${this.loading ? "true" : "false"}"
+        aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-invalid="${ifDefined(this.invalid ? "true" : void 0)}"
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+        ?autofocus="${this.autofocus}"
+        data-sp-radio-native
+        .checked="${live(this.checked)}"
+        ?disabled="${this.isDisabled}"
+        form="${ifDefined(this.form || void 0)}"
+        id="${ifDefined(this.id || void 0)}"
+        name="${ifDefined(this.name || void 0)}"
+        ?required="${this.required}"
+        title="${ifDefined(this.title || void 0)}"
+        type="radio"
+        value="${ifDefined(this.value)}"
+        @change="${this.handleChange}"
+        @input="${this.handleInput}"
+      />
+      <span class="sp-radio-indicator" data-sp-radio-indicator></span>
+      ${labelContent}
+    </label>`;
   }
 };
 SpectreRadioElement.properties = {
-  ariaLabel: { attribute: "aria-label", type: String },
-  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
-  ariaDescribedBy: { attribute: "aria-describedby", type: String },
   autofocus: { type: Boolean, reflect: true },
   checked: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
+  form: { type: String },
   invalid: { type: Boolean, reflect: true },
+  loading: { type: Boolean, reflect: true },
   label: { type: String, reflect: true },
-  name: { type: String },
+  name: { type: String, reflect: true },
   required: { type: Boolean, reflect: true },
-  title: { type: String, reflect: true },
+  success: { type: Boolean, reflect: true },
   value: { type: String }
 };
 function defineSpectreRadio(tagName = "sp-radio") {
@@ -1245,142 +999,40 @@ function defineSpectreRadio(tagName = "sp-radio") {
   customElements.define(tagName, SpectreRadioElement);
   return SpectreRadioElement;
 }
-var SpectreLabelElement = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.projectedContent = [];
-  }
-  get id() {
-    return this._id ?? "";
-  }
-  set id(value) {
-    if ((this._id ?? "") === value) {
-      return;
-    }
-    this._id = value;
-    const host = this;
-    if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
-      HTMLElement.prototype.removeAttribute.call(host, "id");
-    }
-    this.requestUpdate();
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
-    }
-    this.syncProjectedContent();
-    this.startContentObserver();
-  }
-  disconnectedCallback() {
-    this.stopContentObserver();
-    super.disconnectedCallback();
-  }
-  getAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id || null;
-    }
-    return super.getAttribute(qualifiedName);
-  }
-  hasAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id !== "";
-    }
-    return super.hasAttribute(qualifiedName);
-  }
-  setAttribute(qualifiedName, value) {
-    if (qualifiedName === "id") {
-      this.id = value;
-      return;
-    }
-    super.setAttribute(qualifiedName, value);
-  }
-  removeAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      this.id = "";
-      return;
-    }
-    super.removeAttribute(qualifiedName);
-  }
-  update(changedProperties) {
-    this.stopContentObserver();
-    super.update(changedProperties);
-    this.startContentObserver();
-  }
-  get nativeLabel() {
+var SpectreLabelElement = class extends SpectreProjectableElement {
+  getContentContainer() {
     return this.querySelector("[data-sp-label-native]");
   }
-  startContentObserver() {
-    if (this.contentObserver) {
-      return;
-    }
-    this.contentObserver = new MutationObserver((mutations) => {
-      const isInternalMovement = mutations.every((mutation) => {
-        return Array.from(mutation.removedNodes).every(
-          (node) => this.isInternalLabelNode(node) || this.contains(node)
-        ) && Array.from(mutation.addedNodes).every((node) => this.isInternalLabelNode(node));
-      });
-      if (isInternalMovement) {
-        return;
-      }
-      if (this.syncProjectedContent()) {
-        this.requestUpdate();
-      }
-    });
-    this.contentObserver.observe(this, { childList: true });
-  }
-  stopContentObserver() {
-    this.contentObserver?.disconnect();
-    this.contentObserver = void 0;
-  }
-  syncProjectedContent() {
-    const nextProjectedContent = [];
-    Array.from(this.childNodes).forEach((node) => {
-      if (this.isInternalLabelNode(node)) {
-        this.projectedContent.forEach((projectedNode) => {
-          if (projectedNode.parentNode !== this && this.contains(projectedNode)) {
-            nextProjectedContent.push(projectedNode);
-          }
-        });
-        return;
-      }
-      nextProjectedContent.push(node);
-    });
-    if (nextProjectedContent.length === this.projectedContent.length && nextProjectedContent.every((node, index) => node === this.projectedContent[index])) {
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
       return false;
     }
-    this.projectedContent = nextProjectedContent;
-    return true;
-  }
-  isInternalLabelNode(node) {
-    return node === this.nativeLabel;
+    const el = node;
+    return el.hasAttribute("data-sp-label-native");
   }
   focus(options) {
-    this.nativeLabel?.focus(options);
+    this.getContentContainer()?.focus(options);
   }
   blur() {
-    this.nativeLabel?.blur();
+    this.getContentContainer()?.blur();
   }
   render() {
-    return html`
-      <label
-        class='sp-label'
-        data-sp-label-native
-        for=${ifDefined(this.htmlFor)}
-        id=${ifDefined(this.id || void 0)}
-        tabindex='-1'
-      >
-        ${this.projectedContent.length > 0 ? this.projectedContent : nothing}
-      </label>
-    `;
+    return html`<label
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="sp-label"
+      data-sp-label-native
+      for="${ifDefined(this.htmlFor || void 0)}"
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : nothing}
+    </label>`;
   }
 };
 SpectreLabelElement.properties = {
-  htmlFor: { attribute: "for", type: String }
+  htmlFor: { attribute: "for", type: String, reflect: true }
 };
 function defineSpectreLabel(tagName = "sp-label") {
   const existingElement = customElements.get(tagName);
@@ -1390,165 +1042,49 @@ function defineSpectreLabel(tagName = "sp-label") {
   customElements.define(tagName, SpectreLabelElement);
   return SpectreLabelElement;
 }
-var SpectreFieldsetElement = class extends LitElement {
+var SpectreFieldsetElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.ariaLabelledBy = null;
-    this.ariaDescribedBy = null;
     this.disabled = false;
-    this.legend = "";
-    this.projectedContent = [];
-  }
-  get id() {
-    return this._id ?? "";
-  }
-  set id(value) {
-    if ((this._id ?? "") === value) {
-      return;
-    }
-    this._id = value;
-    const host = this;
-    if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
-      HTMLElement.prototype.removeAttribute.call(host, "id");
-    }
-    this.requestUpdate();
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
-    }
-    this.syncProjectedContent();
-    this.startContentObserver();
-  }
-  disconnectedCallback() {
-    this.stopContentObserver();
-    super.disconnectedCallback();
-  }
-  getAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id || null;
-    }
-    return super.getAttribute(qualifiedName);
-  }
-  hasAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id !== "";
-    }
-    return super.hasAttribute(qualifiedName);
-  }
-  setAttribute(qualifiedName, value) {
-    if (qualifiedName === "id") {
-      this.id = value;
-      return;
-    }
-    super.setAttribute(qualifiedName, value);
-  }
-  removeAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      this.id = "";
-      return;
-    }
-    super.removeAttribute(qualifiedName);
-  }
-  update(changedProperties) {
-    this.stopContentObserver();
-    super.update(changedProperties);
-    this.startContentObserver();
   }
-  get nativeFieldset() {
+  getContentContainer() {
     return this.querySelector("[data-sp-fieldset-native]");
   }
-  get forwardedAriaLabel() {
-    const value = this.ariaLabel?.trim();
-    return value ? value : void 0;
-  }
-  get forwardedAriaLabelledBy() {
-    const value = this.ariaLabelledBy?.trim();
-    return value ? value : void 0;
-  }
-  get forwardedAriaDescribedBy() {
-    const value = this.ariaDescribedBy?.trim();
-    return value ? value : void 0;
-  }
-  startContentObserver() {
-    if (this.contentObserver) {
-      return;
-    }
-    this.contentObserver = new MutationObserver((mutations) => {
-      const isInternalMovement = mutations.every((mutation) => {
-        return Array.from(mutation.removedNodes).every(
-          (node) => this.isInternalFieldsetNode(node) || this.contains(node)
-        ) && Array.from(mutation.addedNodes).every((node) => this.isInternalFieldsetNode(node));
-      });
-      if (isInternalMovement) {
-        return;
-      }
-      if (this.syncProjectedContent()) {
-        this.requestUpdate();
-      }
-    });
-    this.contentObserver.observe(this, { childList: true });
-  }
-  stopContentObserver() {
-    this.contentObserver?.disconnect();
-    this.contentObserver = void 0;
-  }
-  syncProjectedContent() {
-    const nextProjectedContent = [];
-    Array.from(this.childNodes).forEach((node) => {
-      if (this.isInternalFieldsetNode(node)) {
-        this.projectedContent.forEach((projectedNode) => {
-          if (projectedNode.parentNode !== this && this.contains(projectedNode)) {
-            nextProjectedContent.push(projectedNode);
-          }
-        });
-        return;
-      }
-      nextProjectedContent.push(node);
-    });
-    if (nextProjectedContent.length === this.projectedContent.length && nextProjectedContent.every((node, index) => node === this.projectedContent[index])) {
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
       return false;
     }
-    this.projectedContent = nextProjectedContent;
-    return true;
-  }
-  isInternalFieldsetNode(node) {
-    return node === this.nativeFieldset;
+    const el = node;
+    return el.hasAttribute("data-sp-fieldset-native") || el.hasAttribute("data-sp-fieldset-legend");
   }
   focus(options) {
-    this.nativeFieldset?.focus(options);
+    this.getContentContainer()?.focus(options);
   }
   blur() {
-    this.nativeFieldset?.blur();
+    this.getContentContainer()?.blur();
   }
   render() {
-    return html`
-      <fieldset
-        aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}
-        aria-label=${ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
-        data-sp-fieldset-native
-        ?disabled=${this.disabled}
-        id=${ifDefined(this.id || void 0)}
-      >
-        ${this.legend ? html`<legend class='sp-label'>${this.legend}</legend>` : nothing}
-        ${this.projectedContent.length > 0 ? this.projectedContent : nothing}
-      </fieldset>
-    `;
+    return html`<fieldset
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      data-sp-fieldset-native
+      ?disabled="${this.disabled}"
+      form="${ifDefined(this.form || void 0)}"
+      id="${ifDefined(this.id || void 0)}"
+      name="${ifDefined(this.name || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.legend ? html`<legend class="sp-label" data-sp-fieldset-legend>${this.legend}</legend>` : nothing}
+      ${this.hasProjectedContent ? this.projectedContent : nothing}
+    </fieldset>`;
   }
 };
 SpectreFieldsetElement.properties = {
-  ariaLabel: { attribute: "aria-label", type: String },
-  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
-  ariaDescribedBy: { attribute: "aria-describedby", type: String },
   disabled: { type: Boolean, reflect: true },
-  legend: { type: String, reflect: true }
+  form: { type: String },
+  legend: { type: String, reflect: true },
+  name: { type: String, reflect: true }
 };
 function defineSpectreFieldset(tagName = "sp-fieldset") {
   const existingElement = customElements.get(tagName);
@@ -1571,6 +1107,6 @@ function defineSpectreComponents() {
   defineSpectreFieldset();
 }
 
-export { SpectreButtonElement, SpectreCheckboxElement, SpectreFieldsetElement, SpectreInputElement, SpectreLabelElement, SpectreRadioElement, SpectreSelectElement, SpectreTextareaElement, defineSpectreButton, defineSpectreCheckbox, defineSpectreComponents, defineSpectreFieldset, defineSpectreInput, defineSpectreLabel, defineSpectreRadio, defineSpectreSelect, defineSpectreTextarea, spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreInputSizes, spectreInputTypes, spectreSelectSizes };
+export { SpectreButtonElement, SpectreCheckboxElement, SpectreFieldsetElement, SpectreInputElement, SpectreLabelElement, SpectreRadioElement, SpectreSelectElement, SpectreTextareaElement, defineSpectreButton, defineSpectreCheckbox, defineSpectreComponents, defineSpectreFieldset, defineSpectreInput, defineSpectreLabel, defineSpectreRadio, defineSpectreSelect, defineSpectreTextarea, spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreInputSizes, spectreInputTypes };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map