@phcdevworks/spectre-components 0.0.1 → 1.0.0

package/dist/index.js

@@ -1,59 +1,15 @@
-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 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);
-}
-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 SpectreBaseElement = class extends LitElement {
   constructor() {
     super(...arguments);
     this.ariaLabel = null;
     this.ariaLabelledBy = null;
     this.ariaDescribedBy = null;
-    this.autofocus = false;
-    this.disabled = false;
-    this.fullWidth = false;
-    this.loading = false;
-    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 ?? "";
@@ -69,6 +25,8 @@ var SpectreButtonElement = class extends LitElement {
     }
     this.requestUpdate();
   }
+  // Spectre components intentionally render in light DOM so the global
+  // `@phcdevworks/spectre-ui` styling contract can apply directly.
   createRenderRoot() {
     return this;
   }
@@ -78,8 +36,6 @@ var SpectreButtonElement = class extends LitElement {
     if (hostId !== null) {
       this.id = hostId;
     }
-    this.syncProjectedContent();
-    this.startContentObserver();
   }
   getAttribute(qualifiedName) {
     if (qualifiedName === "id") {
@@ -107,10 +63,147 @@ var SpectreButtonElement = class extends LitElement {
     }
     super.removeAttribute(qualifiedName);
   }
+  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 = {
+  ariaLabel: { attribute: "aria-label", type: String },
+  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
+  ariaDescribedBy: { attribute: "aria-describedby", type: String }
+};
+
+// 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) => Array.from(mutation.removedNodes).every(
+          (node) => this.isInternalNode(node) || this.contains(node)
+        ) && Array.from(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",
+  "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.loading = false;
+    this.loadingLabel = "Loading";
+    this.pill = false;
+    this.size = "md";
+    this.title = "";
+    this.type = "button";
+    this.variant = "primary";
+    this.value = "";
+  }
+  getContentContainer() {
+    return this.querySelector("[data-sp-button-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    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)) {
       this.variant = "primary";
@@ -126,11 +219,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,89 +236,24 @@ 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`
@@ -240,6 +266,7 @@ var SpectreButtonElement = class extends LitElement {
         class=${this.buttonClasses}
         data-sp-button-native
         ?disabled=${this.isDisabled}
+        form=${ifDefined(this.form)}
         id=${ifDefined(this.id || void 0)}
         name=${ifDefined(this.name)}
         title=${ifDefined(this.title || void 0)}
@@ -252,11 +279,9 @@ var SpectreButtonElement = class extends LitElement {
   }
 };
 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 },
@@ -277,6 +302,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 +320,12 @@ var spectreInputTypes = [
   "time",
   "week"
 ];
-var spectreInputSizes = ["sm", "md", "lg"];
 function isInputType(value) {
   return spectreInputTypes.includes(value);
 }
-function isInputSize(value) {
-  return spectreInputSizes.includes(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;
@@ -318,65 +340,15 @@ var SpectreInputElement = class extends LitElement {
     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");
+  willUpdate(changedProperties) {
+    if (changedProperties.has("size") && !isInputSize(this.size)) {
+      this.size = "md";
     }
-    this.requestUpdate();
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
+    if (changedProperties.has("type") && !isInputType(this.type)) {
+      this.type = "text";
     }
-  }
-  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("type") && !isInputType(this.type)) {
-      this.type = "text";
-    }
-    if (changedProperties.has("value") && this.value == null) {
-      this.value = "";
+    if (changedProperties.has("value") && this.value == null) {
+      this.value = "";
     }
     if (changedProperties.has("maxlength")) {
       if (this.maxlength == null || !Number.isInteger(this.maxlength) || this.maxlength < 0) {
@@ -403,18 +375,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;
@@ -442,6 +402,7 @@ var SpectreInputElement = class extends LitElement {
         class=${this.inputClasses}
         data-sp-input-native
         ?disabled=${this.isDisabled}
+        form=${ifDefined(this.form)}
         ?readonly=${this.readonly}
         ?required=${this.required}
         id=${ifDefined(this.id || void 0)}
@@ -463,27 +424,25 @@ var SpectreInputElement = class extends LitElement {
   }
 };
 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 },
@@ -498,12 +457,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;
@@ -518,56 +474,6 @@ var SpectreTextareaElement = class extends LitElement {
     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";
@@ -605,18 +511,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;
@@ -644,6 +538,7 @@ var SpectreTextareaElement = class extends LitElement {
         class=${this.textareaClasses}
         data-sp-textarea-native
         ?disabled=${this.isDisabled}
+        form=${ifDefined(this.form)}
         inputmode=${ifDefined(this.inputmode)}
         ?readonly=${this.readonly}
         ?required=${this.required}
@@ -662,21 +557,19 @@ var SpectreTextareaElement = class extends LitElement {
   }
 };
 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 },
@@ -693,26 +586,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;
@@ -724,91 +600,42 @@ var SpectreSelectElement = class extends LitElement {
     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;
+          }
+        });
       }
     }
   }
@@ -823,70 +650,6 @@ var SpectreSelectElement = class extends LitElement {
   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;
-  }
-  isInternalSelectNode(node) {
-    return node.nodeType === Node.ELEMENT_NODE && node.hasAttribute("data-sp-select-native");
-  }
   handleInput(event) {
     const select = event.currentTarget;
     this.value = select.value;
@@ -896,10 +659,10 @@ 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`
@@ -909,10 +672,12 @@ var SpectreSelectElement = class extends LitElement {
         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.selectClasses}
         data-sp-select-native
         ?disabled=${this.isDisabled}
+        form=${ifDefined(this.form)}
         id=${ifDefined(this.id || void 0)}
         name=${ifDefined(this.name)}
         ?required=${this.required}
@@ -921,21 +686,20 @@ var SpectreSelectElement = class extends LitElement {
         @change=${this.handleChange}
         @input=${this.handleInput}
       >
-        ${this.projectedOptions.length > 0 ? this.projectedOptions : nothing}
+        ${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 },
@@ -951,90 +715,43 @@ 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.success = false;
     this.title = "";
     this.value = "on";
   }
-  get id() {
-    return this._id ?? "";
+  getContentContainer() {
+    return this.querySelector("[data-sp-checkbox-label]");
   }
-  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");
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
     }
-    this.requestUpdate();
-  }
-  createRenderRoot() {
-    return this;
+    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");
   }
-  connectedCallback() {
-    super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
+  willUpdate(changedProperties) {
+    if (changedProperties.has("value") && this.value == null) {
+      this.value = "on";
     }
   }
-  getAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id || null;
-    }
-    return super.getAttribute(qualifiedName);
+  get nativeInput() {
+    return this.querySelector("[data-sp-checkbox-native]");
   }
-  hasAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id !== "";
-    }
-    return super.hasAttribute(qualifiedName);
+  get isDisabled() {
+    return this.disabled || this.loading;
   }
-  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("value") && this.value == null) {
-      this.value = "on";
-    }
-  }
-  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 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,17 +768,20 @@ var SpectreCheckboxElement = class extends LitElement {
     this.nativeInput?.blur();
   }
   render() {
+    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>
+      <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=${this.checked}
-          ?disabled=${this.disabled}
+          .checked=${live(this.checked)}
+          ?disabled=${this.isDisabled}
+          form=${ifDefined(this.form)}
           id=${ifDefined(this.id || void 0)}
           name=${ifDefined(this.name)}
           ?required=${this.required}
@@ -1071,22 +791,23 @@ var SpectreCheckboxElement = class extends LitElement {
           @change=${this.handleChange}
           @input=${this.handleInput}
         />
-        <span class='sp-label'>${this.label}</span>
+        <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 },
+  success: { type: Boolean, reflect: true },
   title: { type: String, reflect: true },
   value: { type: String }
 };
@@ -1098,70 +819,28 @@ 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.success = false;
     this.title = "";
     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);
+  getContentContainer() {
+    return this.querySelector("[data-sp-radio-label]");
   }
-  setAttribute(qualifiedName, value) {
-    if (qualifiedName === "id") {
-      this.id = value;
-      return;
-    }
-    super.setAttribute(qualifiedName, value);
-  }
-  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 +850,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,17 +872,20 @@ var SpectreRadioElement = class extends LitElement {
     this.nativeInput?.blur();
   }
   render() {
+    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>
+      <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=${this.checked}
-          ?disabled=${this.disabled}
+          .checked=${live(this.checked)}
+          ?disabled=${this.isDisabled}
+          form=${ifDefined(this.form)}
           id=${ifDefined(this.id || void 0)}
           name=${ifDefined(this.name)}
           ?required=${this.required}
@@ -1218,22 +895,23 @@ var SpectreRadioElement = class extends LitElement {
           @change=${this.handleChange}
           @input=${this.handleInput}
         />
-        <span class='sp-label'>${this.label}</span>
+        <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 },
+  success: { type: Boolean, reflect: true },
   title: { type: String, reflect: true },
   value: { type: String }
 };
@@ -1245,142 +923,48 @@ function defineSpectreRadio(tagName = "sp-radio") {
   customElements.define(tagName, SpectreRadioElement);
   return SpectreRadioElement;
 }
-var SpectreLabelElement = class extends LitElement {
+var SpectreLabelElement = class extends SpectreProjectableElement {
   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();
+    this.title = "";
   }
-  get nativeLabel() {
+  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
+        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)}
         id=${ifDefined(this.id || void 0)}
         tabindex='-1'
+        title=${ifDefined(this.title || void 0)}
       >
-        ${this.projectedContent.length > 0 ? this.projectedContent : nothing}
+        ${this.hasProjectedContent ? this.projectedContent : nothing}
       </label>
     `;
   }
 };
 SpectreLabelElement.properties = {
-  htmlFor: { attribute: "for", type: String }
+  htmlFor: { attribute: "for", type: String, reflect: true },
+  title: { type: String, reflect: true }
 };
 function defineSpectreLabel(tagName = "sp-label") {
   const existingElement = customElements.get(tagName);
@@ -1390,142 +974,28 @@ 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();
+    this.title = "";
   }
-  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`
@@ -1535,20 +1005,23 @@ var SpectreFieldsetElement = class extends LitElement {
         aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
         data-sp-fieldset-native
         ?disabled=${this.disabled}
+        form=${ifDefined(this.form)}
         id=${ifDefined(this.id || void 0)}
+        name=${ifDefined(this.name)}
+        title=${ifDefined(this.title || void 0)}
       >
-        ${this.legend ? html`<legend class='sp-label'>${this.legend}</legend>` : nothing}
-        ${this.projectedContent.length > 0 ? this.projectedContent : nothing}
+        ${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 },
+  title: { type: String, reflect: true }
 };
 function defineSpectreFieldset(tagName = "sp-fieldset") {
   const existingElement = customElements.get(tagName);
@@ -1571,6 +1044,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