@phcdevworks/spectre-components 1.0.0 → 1.1.0

package/dist/index.cjs

@@ -9,22 +9,67 @@ var live_js = require('lit/directives/live.js');
 var SpectreBaseElement = class extends lit.LitElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.ariaLabelledBy = null;
-    this.ariaDescribedBy = null;
+    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 ?? "";
+    return this._id;
   }
   set id(value) {
-    if ((this._id ?? "") === value) {
+    const normalizedValue = value ?? "";
+    if (this._id === normalizedValue) {
       return;
     }
-    this._id = value;
-    const host = this;
-    if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
-      HTMLElement.prototype.removeAttribute.call(host, "id");
-    }
+    this._id = normalizedValue;
+    this._removeHostAttribute("id");
     this.requestUpdate();
   }
   // Spectre components intentionally render in light DOM so the global
@@ -34,36 +79,99 @@ var SpectreBaseElement = class extends lit.LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
-    }
+    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) {
-    if (qualifiedName === "id") {
-      return this.id || null;
+    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);
     }
-    return super.getAttribute(qualifiedName);
   }
   hasAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id !== "";
+    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);
     }
-    return super.hasAttribute(qualifiedName);
   }
   setAttribute(qualifiedName, value) {
-    if (qualifiedName === "id") {
-      this.id = value;
-      return;
+    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);
     }
-    super.setAttribute(qualifiedName, value);
   }
   removeAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      this.id = "";
-      return;
+    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);
     }
-    super.removeAttribute(qualifiedName);
   }
   get forwardedAriaLabel() {
     const value = this.ariaLabel?.trim();
@@ -78,11 +186,7 @@ var SpectreBaseElement = class extends lit.LitElement {
     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 }
-};
+SpectreBaseElement.properties = {};
 
 // src/utils/dom.ts
 function hasMeaningfulContent(nodes) {
@@ -143,9 +247,9 @@ var SpectreProjectableElement = class extends SpectreBaseElement {
     }
     this.contentObserver = new MutationObserver((mutations) => {
       const isInternalMovement = mutations.every(
-        (mutation) => Array.from(mutation.removedNodes).every(
+        (mutation) => [...mutation.removedNodes].every(
           (node) => this.isInternalNode(node) || this.contains(node)
-        ) && Array.from(mutation.addedNodes).every((node) => this.isInternalNode(node))
+        ) && [...mutation.addedNodes].every((node) => this.isInternalNode(node))
       );
       if (isInternalMovement) {
         return;
@@ -191,7 +295,6 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     this.loadingLabel = "Loading";
     this.pill = false;
     this.size = "md";
-    this.title = "";
     this.type = "button";
     this.variant = "primary";
     this.value = "";
@@ -258,26 +361,24 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     return this.visibleLabelFallback ? lit.html`<span data-sp-button-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
   }
   render() {
-    return lit.html`
-      <button
-        aria-busy=${this.loading ? "true" : "false"}
-        aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
-        aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
-        ?autofocus=${this.autofocus}
-        class=${this.buttonClasses}
-        data-sp-button-native
-        ?disabled=${this.isDisabled}
-        form=${ifDefined_js.ifDefined(this.form)}
-        id=${ifDefined_js.ifDefined(this.id || void 0)}
-        name=${ifDefined_js.ifDefined(this.name)}
-        title=${ifDefined_js.ifDefined(this.title || void 0)}
-        type=${this.type}
-        value=${ifDefined_js.ifDefined(this.value)}
-      >
-        ${this.renderButtonContent() || lit.nothing}
-      </button>
-    `;
+    return lit.html`<button
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      ?autofocus="${this.autofocus}"
+      class="${this.buttonClasses}"
+      data-sp-button-native
+      ?disabled="${this.isDisabled}"
+      form="${ifDefined_js.ifDefined(this.form || void 0)}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      name="${ifDefined_js.ifDefined(this.name || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      type="${this.type}"
+      value="${ifDefined_js.ifDefined(this.value || void 0)}"
+    >
+      ${this.renderButtonContent()}
+    </button>`;
   }
 };
 SpectreButtonElement.properties = {
@@ -291,10 +392,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);
@@ -325,6 +425,12 @@ var spectreInputTypes = [
 function isInputType(value) {
   return spectreInputTypes.includes(value);
 }
+function normalizeInt(value, fallback, min = 0) {
+  if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
+    return fallback;
+  }
+  return value;
+}
 var SpectreInputElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
@@ -338,7 +444,6 @@ var SpectreInputElement = class extends SpectreBaseElement {
     this.required = false;
     this.size = "md";
     this.success = false;
-    this.title = "";
     this.type = "text";
     this.value = "";
   }
@@ -353,14 +458,10 @@ var SpectreInputElement = class extends SpectreBaseElement {
       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() {
@@ -392,37 +493,35 @@ var SpectreInputElement = class extends SpectreBaseElement {
     this.nativeInput?.blur();
   }
   render() {
-    return lit.html`
-      <input
-        aria-busy=${this.loading ? "true" : "false"}
-        aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
-        aria-invalid=${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}
-        aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
-        autocomplete=${ifDefined_js.ifDefined(this.autocomplete)}
-        ?autofocus=${this.autofocus}
-        class=${this.inputClasses}
-        data-sp-input-native
-        ?disabled=${this.isDisabled}
-        form=${ifDefined_js.ifDefined(this.form)}
-        ?readonly=${this.readonly}
-        ?required=${this.required}
-        id=${ifDefined_js.ifDefined(this.id || void 0)}
-        inputmode=${ifDefined_js.ifDefined(this.inputmode)}
-        max=${ifDefined_js.ifDefined(this.max)}
-        maxlength=${ifDefined_js.ifDefined(this.maxlength)}
-        min=${ifDefined_js.ifDefined(this.min)}
-        minlength=${ifDefined_js.ifDefined(this.minlength)}
-        name=${ifDefined_js.ifDefined(this.name)}
-        placeholder=${ifDefined_js.ifDefined(this.placeholder)}
-        step=${ifDefined_js.ifDefined(this.step)}
-        title=${ifDefined_js.ifDefined(this.title || void 0)}
-        type=${this.type}
-        .value=${live_js.live(this.value)}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-      />
-    `;
+    return lit.html`<input
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-invalid="${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      autocomplete="${ifDefined_js.ifDefined(this.autocomplete || void 0)}"
+      ?autofocus="${this.autofocus}"
+      class="${this.inputClasses}"
+      data-sp-input-native
+      ?disabled="${this.isDisabled}"
+      form="${ifDefined_js.ifDefined(this.form || void 0)}"
+      ?readonly="${this.readonly}"
+      ?required="${this.required}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      inputmode="${ifDefined_js.ifDefined(this.inputmode || void 0)}"
+      max="${ifDefined_js.ifDefined(this.max || void 0)}"
+      maxlength="${ifDefined_js.ifDefined(this.maxlength)}"
+      min="${ifDefined_js.ifDefined(this.min || void 0)}"
+      minlength="${ifDefined_js.ifDefined(this.minlength)}"
+      name="${ifDefined_js.ifDefined(this.name || void 0)}"
+      placeholder="${ifDefined_js.ifDefined(this.placeholder || void 0)}"
+      step="${ifDefined_js.ifDefined(this.step || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      type="${this.type}"
+      .value="${live_js.live(this.value)}"
+      @change="${this.handleChange}"
+      @input="${this.handleInput}"
+    />`;
   }
 };
 SpectreInputElement.properties = {
@@ -446,7 +545,6 @@ SpectreInputElement.properties = {
   size: { type: String, reflect: true },
   step: { type: String, reflect: true },
   success: { type: Boolean, reflect: true },
-  title: { type: String, reflect: true },
   type: { type: String, reflect: true },
   value: { type: String }
 };
@@ -473,7 +571,6 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
     this.rows = DEFAULT_ROWS;
     this.size = "md";
     this.success = false;
-    this.title = "";
     this.value = "";
   }
   willUpdate(changedProperties) {
@@ -481,22 +578,16 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
       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() {
@@ -528,34 +619,32 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
     this.nativeTextarea?.blur();
   }
   render() {
-    return lit.html`
-      <textarea
-        aria-busy=${this.loading ? "true" : "false"}
-        aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
-        aria-invalid=${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}
-        aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
-        autocomplete=${ifDefined_js.ifDefined(this.autocomplete)}
-        ?autofocus=${this.autofocus}
-        class=${this.textareaClasses}
-        data-sp-textarea-native
-        ?disabled=${this.isDisabled}
-        form=${ifDefined_js.ifDefined(this.form)}
-        inputmode=${ifDefined_js.ifDefined(this.inputmode)}
-        ?readonly=${this.readonly}
-        ?required=${this.required}
-        id=${ifDefined_js.ifDefined(this.id || void 0)}
-        maxlength=${ifDefined_js.ifDefined(this.maxlength)}
-        minlength=${ifDefined_js.ifDefined(this.minlength)}
-        name=${ifDefined_js.ifDefined(this.name)}
-        placeholder=${ifDefined_js.ifDefined(this.placeholder)}
-        rows=${this.rows}
-        title=${ifDefined_js.ifDefined(this.title || void 0)}
-        .value=${live_js.live(this.value)}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-      ></textarea>
-    `;
+    return lit.html`<textarea
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-invalid="${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      autocomplete="${ifDefined_js.ifDefined(this.autocomplete || void 0)}"
+      ?autofocus="${this.autofocus}"
+      class="${this.textareaClasses}"
+      data-sp-textarea-native
+      ?disabled="${this.isDisabled}"
+      form="${ifDefined_js.ifDefined(this.form || void 0)}"
+      inputmode="${ifDefined_js.ifDefined(this.inputmode || void 0)}"
+      ?readonly="${this.readonly}"
+      ?required="${this.required}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      maxlength="${ifDefined_js.ifDefined(this.maxlength)}"
+      minlength="${ifDefined_js.ifDefined(this.minlength)}"
+      name="${ifDefined_js.ifDefined(this.name || void 0)}"
+      placeholder="${ifDefined_js.ifDefined(this.placeholder || void 0)}"
+      rows="${this.rows}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      .value="${live_js.live(this.value)}"
+      @change="${this.handleChange}"
+      @input="${this.handleInput}"
+    ></textarea>`;
   }
 };
 SpectreTextareaElement.properties = {
@@ -577,7 +666,6 @@ SpectreTextareaElement.properties = {
   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") {
@@ -600,7 +688,6 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
     this.required = false;
     this.size = "md";
     this.success = false;
-    this.title = "";
     this.value = "";
   }
   getContentContainer() {
@@ -667,30 +754,28 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
     this.getContentContainer()?.blur();
   }
   render() {
-    return lit.html`
-      <select
-        aria-busy=${this.loading ? "true" : "false"}
-        aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
-        aria-invalid=${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}
-        aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
-        autocomplete=${ifDefined_js.ifDefined(this.autocomplete)}
-        ?autofocus=${this.autofocus}
-        class=${this.selectClasses}
-        data-sp-select-native
-        ?disabled=${this.isDisabled}
-        form=${ifDefined_js.ifDefined(this.form)}
-        id=${ifDefined_js.ifDefined(this.id || void 0)}
-        name=${ifDefined_js.ifDefined(this.name)}
-        ?required=${this.required}
-        title=${ifDefined_js.ifDefined(this.title || void 0)}
-        .value=${live_js.live(this.value)}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-      >
-        ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
-      </select>
-    `;
+    return lit.html`<select
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-invalid="${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      autocomplete="${ifDefined_js.ifDefined(this.autocomplete || void 0)}"
+      ?autofocus="${this.autofocus}"
+      class="${this.selectClasses}"
+      data-sp-select-native
+      ?disabled="${this.isDisabled}"
+      form="${ifDefined_js.ifDefined(this.form || void 0)}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      name="${ifDefined_js.ifDefined(this.name || void 0)}"
+      ?required="${this.required}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      .value="${live_js.live(this.value)}"
+      @change="${this.handleChange}"
+      @input="${this.handleInput}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </select>`;
   }
 };
 SpectreSelectElement.properties = {
@@ -706,7 +791,6 @@ SpectreSelectElement.properties = {
   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") {
@@ -727,7 +811,6 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
     this.loading = false;
     this.required = false;
     this.success = false;
-    this.title = "";
     this.value = "on";
   }
   getContentContainer() {
@@ -770,33 +853,31 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
     this.nativeInput?.blur();
   }
   render() {
-    const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? lit.html`<span class='sp-label' data-sp-checkbox-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
-    return lit.html`
-      <label data-sp-checkbox-label>
-        <input
-          aria-busy=${this.loading ? "true" : "false"}
-          aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
-          aria-invalid=${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}
-          aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
-          aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
-          ?autofocus=${this.autofocus}
-          data-sp-checkbox-native
-          .checked=${live_js.live(this.checked)}
-          ?disabled=${this.isDisabled}
-          form=${ifDefined_js.ifDefined(this.form)}
-          id=${ifDefined_js.ifDefined(this.id || void 0)}
-          name=${ifDefined_js.ifDefined(this.name)}
-          ?required=${this.required}
-          title=${ifDefined_js.ifDefined(this.title || void 0)}
-          type='checkbox'
-          value=${ifDefined_js.ifDefined(this.value || void 0)}
-          @change=${this.handleChange}
-          @input=${this.handleInput}
-        />
-        <span class="sp-checkbox-indicator" data-sp-checkbox-indicator></span>
-        ${labelContent}
-      </label>
-    `;
+    const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? lit.html`<span class="sp-label" data-sp-checkbox-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
+    return lit.html`<label data-sp-checkbox-label>
+      <input
+        aria-busy="${this.loading ? "true" : "false"}"
+        aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-invalid="${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}"
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+        ?autofocus="${this.autofocus}"
+        data-sp-checkbox-native
+        .checked="${live_js.live(this.checked)}"
+        ?disabled="${this.isDisabled}"
+        form="${ifDefined_js.ifDefined(this.form || void 0)}"
+        id="${ifDefined_js.ifDefined(this.id || void 0)}"
+        name="${ifDefined_js.ifDefined(this.name || void 0)}"
+        ?required="${this.required}"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+        type="checkbox"
+        value="${ifDefined_js.ifDefined(this.value)}"
+        @change="${this.handleChange}"
+        @input="${this.handleInput}"
+      />
+      <span class="sp-checkbox-indicator" data-sp-checkbox-indicator></span>
+      ${labelContent}
+    </label>`;
   }
 };
 SpectreCheckboxElement.properties = {
@@ -810,7 +891,6 @@ SpectreCheckboxElement.properties = {
   name: { type: String, reflect: true },
   required: { type: Boolean, reflect: true },
   success: { type: Boolean, reflect: true },
-  title: { type: String, reflect: true },
   value: { type: String }
 };
 function defineSpectreCheckbox(tagName = "sp-checkbox") {
@@ -831,7 +911,6 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     this.loading = false;
     this.required = false;
     this.success = false;
-    this.title = "";
     this.value = "on";
   }
   getContentContainer() {
@@ -874,33 +953,31 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     this.nativeInput?.blur();
   }
   render() {
-    const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? lit.html`<span class='sp-label' data-sp-radio-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
-    return lit.html`
-      <label data-sp-radio-label>
-        <input
-          aria-busy=${this.loading ? "true" : "false"}
-          aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
-          aria-invalid=${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}
-          aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
-          aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
-          ?autofocus=${this.autofocus}
-          data-sp-radio-native
-          .checked=${live_js.live(this.checked)}
-          ?disabled=${this.isDisabled}
-          form=${ifDefined_js.ifDefined(this.form)}
-          id=${ifDefined_js.ifDefined(this.id || void 0)}
-          name=${ifDefined_js.ifDefined(this.name)}
-          ?required=${this.required}
-          title=${ifDefined_js.ifDefined(this.title || void 0)}
-          type='radio'
-          value=${ifDefined_js.ifDefined(this.value || void 0)}
-          @change=${this.handleChange}
-          @input=${this.handleInput}
-        />
-        <span class="sp-radio-indicator" data-sp-radio-indicator></span>
-        ${labelContent}
-      </label>
-    `;
+    const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? lit.html`<span class="sp-label" data-sp-radio-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
+    return lit.html`<label data-sp-radio-label>
+      <input
+        aria-busy="${this.loading ? "true" : "false"}"
+        aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-invalid="${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}"
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+        ?autofocus="${this.autofocus}"
+        data-sp-radio-native
+        .checked="${live_js.live(this.checked)}"
+        ?disabled="${this.isDisabled}"
+        form="${ifDefined_js.ifDefined(this.form || void 0)}"
+        id="${ifDefined_js.ifDefined(this.id || void 0)}"
+        name="${ifDefined_js.ifDefined(this.name || void 0)}"
+        ?required="${this.required}"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+        type="radio"
+        value="${ifDefined_js.ifDefined(this.value)}"
+        @change="${this.handleChange}"
+        @input="${this.handleInput}"
+      />
+      <span class="sp-radio-indicator" data-sp-radio-indicator></span>
+      ${labelContent}
+    </label>`;
   }
 };
 SpectreRadioElement.properties = {
@@ -914,7 +991,6 @@ SpectreRadioElement.properties = {
   name: { type: String, reflect: true },
   required: { type: Boolean, reflect: true },
   success: { type: Boolean, reflect: true },
-  title: { type: String, reflect: true },
   value: { type: String }
 };
 function defineSpectreRadio(tagName = "sp-radio") {
@@ -926,10 +1002,6 @@ function defineSpectreRadio(tagName = "sp-radio") {
   return SpectreRadioElement;
 }
 var SpectreLabelElement = class extends SpectreProjectableElement {
-  constructor() {
-    super(...arguments);
-    this.title = "";
-  }
   getContentContainer() {
     return this.querySelector("[data-sp-label-native]");
   }
@@ -947,26 +1019,22 @@ var SpectreLabelElement = class extends SpectreProjectableElement {
     this.getContentContainer()?.blur();
   }
   render() {
-    return lit.html`
-      <label
-        aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
-        aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
-        class='sp-label'
-        data-sp-label-native
-        for=${ifDefined_js.ifDefined(this.htmlFor)}
-        id=${ifDefined_js.ifDefined(this.id || void 0)}
-        tabindex='-1'
-        title=${ifDefined_js.ifDefined(this.title || void 0)}
-      >
-        ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
-      </label>
-    `;
+    return lit.html`<label
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="sp-label"
+      data-sp-label-native
+      for="${ifDefined_js.ifDefined(this.htmlFor || void 0)}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </label>`;
   }
 };
 SpectreLabelElement.properties = {
-  htmlFor: { attribute: "for", type: String, reflect: true },
-  title: { type: String, reflect: true }
+  htmlFor: { attribute: "for", type: String, reflect: true }
 };
 function defineSpectreLabel(tagName = "sp-label") {
   const existingElement = customElements.get(tagName);
@@ -980,8 +1048,6 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
     this.disabled = false;
-    this.legend = "";
-    this.title = "";
   }
   getContentContainer() {
     return this.querySelector("[data-sp-fieldset-native]");
@@ -1000,30 +1066,27 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
     this.getContentContainer()?.blur();
   }
   render() {
-    return lit.html`
-      <fieldset
-        aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
-        aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
-        data-sp-fieldset-native
-        ?disabled=${this.disabled}
-        form=${ifDefined_js.ifDefined(this.form)}
-        id=${ifDefined_js.ifDefined(this.id || void 0)}
-        name=${ifDefined_js.ifDefined(this.name)}
-        title=${ifDefined_js.ifDefined(this.title || void 0)}
-      >
-        ${this.legend ? lit.html`<legend class='sp-label' data-sp-fieldset-legend>${this.legend}</legend>` : lit.nothing}
-        ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
-      </fieldset>
-    `;
+    return lit.html`<fieldset
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      data-sp-fieldset-native
+      ?disabled="${this.disabled}"
+      form="${ifDefined_js.ifDefined(this.form || void 0)}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      name="${ifDefined_js.ifDefined(this.name || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.legend ? lit.html`<legend class="sp-label" data-sp-fieldset-legend>${this.legend}</legend>` : lit.nothing}
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </fieldset>`;
   }
 };
 SpectreFieldsetElement.properties = {
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
   legend: { type: String, reflect: true },
-  name: { type: String, reflect: true },
-  title: { type: String, reflect: true }
+  name: { type: String, reflect: true }
 };
 function defineSpectreFieldset(tagName = "sp-fieldset") {
   const existingElement = customElements.get(tagName);