@phcdevworks/spectre-components 1.2.0 → 1.4.0

package/dist/index.cjs

@@ -43,6 +43,46 @@ var spectreInputTypes = [
 function isInputType(value) {
   return spectreInputTypes.includes(value);
 }
+var spectreBadgeVariants = [
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "neutral",
+  "info",
+  "ghost",
+  "outline",
+  "accent",
+  "cta"
+];
+function isBadgeVariant(value) {
+  return spectreBadgeVariants.includes(value);
+}
+var spectreCardVariants = ["elevated", "flat", "outline", "ghost"];
+function isCardVariant(value) {
+  return spectreCardVariants.includes(value);
+}
+var spectreIconBoxVariants = [
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "neutral",
+  "ghost",
+  "accent",
+  "cta",
+  "outline"
+];
+function isIconBoxVariant(value) {
+  return spectreIconBoxVariants.includes(value);
+}
+var spectreTestimonialVariants = ["elevated", "flat", "outline", "ghost"];
+function isTestimonialVariant(value) {
+  return spectreTestimonialVariants.includes(value);
+}
 function normalizeInt(value, fallback, min = 0) {
   if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
     return fallback;
@@ -56,6 +96,7 @@ var SpectreBaseElement = class extends lit.LitElement {
     this._ariaLabelledBy = null;
     this._ariaDescribedBy = null;
     this._autocapitalize = "";
+    this._autofocus = false;
     this._spellcheck = null;
     this._title = "";
     this._id = "";
@@ -140,6 +181,18 @@ var SpectreBaseElement = class extends lit.LitElement {
     this._removeHostAttribute("id");
     this.requestUpdate();
   }
+  get autofocus() {
+    return this._autofocus;
+  }
+  set autofocus(value) {
+    const normalizedValue = !!value;
+    if (this._autofocus === normalizedValue) {
+      return;
+    }
+    this._autofocus = normalizedValue;
+    this._removeHostAttribute("autofocus");
+    this.requestUpdate();
+  }
   // Spectre components intentionally render in light DOM so the global
   // `@phcdevworks/spectre-ui` styling contract can apply directly.
   createRenderRoot() {
@@ -151,6 +204,7 @@ var SpectreBaseElement = class extends lit.LitElement {
       "id",
       "title",
       "autocapitalize",
+      "autofocus",
       "spellcheck",
       "aria-label",
       "aria-labelledby",
@@ -171,6 +225,8 @@ var SpectreBaseElement = class extends lit.LitElement {
         return this.title || null;
       case "autocapitalize":
         return this.autocapitalize || null;
+      case "autofocus":
+        return this.autofocus ? "" : null;
       case "spellcheck":
         return this._spellcheck !== null ? String(this._spellcheck) : null;
       case "aria-label":
@@ -191,6 +247,8 @@ var SpectreBaseElement = class extends lit.LitElement {
         return this.title !== "";
       case "autocapitalize":
         return this.autocapitalize !== "";
+      case "autofocus":
+        return this.autofocus;
       case "spellcheck":
         return this._spellcheck !== null;
       case "aria-label":
@@ -214,6 +272,9 @@ var SpectreBaseElement = class extends lit.LitElement {
       case "autocapitalize":
         this.autocapitalize = value;
         break;
+      case "autofocus":
+        this.autofocus = true;
+        break;
       case "spellcheck":
         this.spellcheck = value !== "false";
         break;
@@ -241,6 +302,9 @@ var SpectreBaseElement = class extends lit.LitElement {
       case "autocapitalize":
         this.autocapitalize = "";
         break;
+      case "autofocus":
+        this.autofocus = false;
+        break;
       case "spellcheck":
         this.spellcheck = null;
         break;
@@ -358,7 +422,6 @@ var SpectreProjectableElement = class extends SpectreBaseElement {
 var SpectreButtonElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
     this.iconOnly = false;
@@ -382,6 +445,12 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-button-native]");
   }
@@ -393,6 +462,21 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-button-native") || el.hasAttribute("data-sp-button-loading-label") || el.hasAttribute("data-sp-button-label-fallback");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("iconOnly") && this.iconOnly == null) {
+      this.iconOnly = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("pill") && this.pill == null) {
+      this.pill = false;
+    }
     if (changedProperties.has("variant") && (this.variant == null || !isButtonVariant(this.variant))) {
       this.variant = "primary";
     }
@@ -437,12 +521,18 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
   renderButtonContent() {
     if (this.loading) {
-      return lit.html`<span class="sp-label" data-sp-button-loading-label>${this.loadingLabel}</span>`;
+      return lit.html`<span
+        class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
+        data-sp-button-loading-label
+      >${this.loadingLabel}</span>`;
     }
     if (this.hasProjectedContent) {
       return this.projectedContent;
     }
-    return this.visibleLabelFallback ? lit.html`<span class="sp-label" data-sp-button-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
+    return this.visibleLabelFallback ? lit.html`<span
+          class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
+          data-sp-button-label-fallback
+        >${this.visibleLabelFallback}</span>` : lit.nothing;
   }
   render() {
     return lit.html`<button
@@ -466,7 +556,6 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
 };
 SpectreButtonElement.properties = {
-  autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
@@ -492,7 +581,6 @@ function defineSpectreButton(tagName = "sp-button") {
 var SpectreInputElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
     this.invalid = false;
@@ -511,6 +599,12 @@ var SpectreInputElement = class extends SpectreBaseElement {
   set autocapitalize(value) {
     super.autocapitalize = value;
   }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
   get id() {
     return super.id;
   }
@@ -530,6 +624,30 @@ var SpectreInputElement = class extends SpectreBaseElement {
     super.title = value;
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("invalid") && this.invalid == null) {
+      this.invalid = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("pill") && this.pill == null) {
+      this.pill = false;
+    }
+    if (changedProperties.has("readonly") && this.readonly == null) {
+      this.readonly = false;
+    }
+    if (changedProperties.has("required") && this.required == null) {
+      this.required = false;
+    }
+    if (changedProperties.has("success") && this.success == null) {
+      this.success = false;
+    }
     if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
       this.size = "md";
     }
@@ -601,9 +719,7 @@ var SpectreInputElement = class extends SpectreBaseElement {
       name="${ifDefined_js.ifDefined(this.name || void 0)}"
       pattern="${ifDefined_js.ifDefined(this.pattern || void 0)}"
       placeholder="${ifDefined_js.ifDefined(this.placeholder || void 0)}"
-      spellcheck="${ifDefined_js.ifDefined(
-      this.spellcheck === void 0 ? void 0 : String(this.spellcheck)
-    )}"
+      spellcheck="${ifDefined_js.ifDefined(this.getAttribute("spellcheck") ?? void 0)}"
       step="${ifDefined_js.ifDefined(this.step || void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
       type="${this.type}"
@@ -614,9 +730,7 @@ var SpectreInputElement = class extends SpectreBaseElement {
   }
 };
 SpectreInputElement.properties = {
-  autocapitalize: { type: String, reflect: true },
   autocomplete: { type: String, reflect: true },
-  autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   enterkeyhint: { type: String, reflect: true },
   form: { type: String },
@@ -636,7 +750,6 @@ SpectreInputElement.properties = {
   readonly: { type: Boolean, reflect: true },
   required: { type: Boolean, reflect: true },
   size: { type: String, reflect: true },
-  spellcheck: { type: Boolean, reflect: true },
   step: { type: String, reflect: true },
   success: { type: Boolean, reflect: true },
   type: { type: String, reflect: true },
@@ -654,7 +767,6 @@ var DEFAULT_ROWS = 2;
 var SpectreTextareaElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
     this.invalid = false;
@@ -673,6 +785,12 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
   set autocapitalize(value) {
     super.autocapitalize = value;
   }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
   get id() {
     return super.id;
   }
@@ -692,6 +810,30 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
     super.title = value;
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("invalid") && this.invalid == null) {
+      this.invalid = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("pill") && this.pill == null) {
+      this.pill = false;
+    }
+    if (changedProperties.has("readonly") && this.readonly == null) {
+      this.readonly = false;
+    }
+    if (changedProperties.has("required") && this.required == null) {
+      this.required = false;
+    }
+    if (changedProperties.has("success") && this.success == null) {
+      this.success = false;
+    }
     if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
       this.size = "md";
     }
@@ -760,9 +902,7 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
       name="${ifDefined_js.ifDefined(this.name || void 0)}"
       placeholder="${ifDefined_js.ifDefined(this.placeholder || void 0)}"
       rows="${this.rows}"
-      spellcheck="${ifDefined_js.ifDefined(
-      this.spellcheck === void 0 ? void 0 : String(this.spellcheck)
-    )}"
+      spellcheck="${ifDefined_js.ifDefined(this.getAttribute("spellcheck") ?? void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
       .value="${live_js.live(this.value)}"
       @change="${this.handleChange}"
@@ -771,9 +911,7 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
   }
 };
 SpectreTextareaElement.properties = {
-  autocapitalize: { type: String, reflect: true },
   autocomplete: { type: String, reflect: true },
-  autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   enterkeyhint: { type: String, reflect: true },
   form: { type: String },
@@ -790,7 +928,6 @@ SpectreTextareaElement.properties = {
   required: { type: Boolean, reflect: true },
   rows: { type: Number, reflect: true },
   size: { type: String, reflect: true },
-  spellcheck: { type: Boolean, reflect: true },
   success: { type: Boolean, reflect: true },
   value: { type: String }
 };
@@ -805,7 +942,6 @@ function defineSpectreTextarea(tagName = "sp-textarea") {
 var SpectreSelectElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
     this.invalid = false;
@@ -828,6 +964,24 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
+  get autocapitalize() {
+    return super.autocapitalize;
+  }
+  set autocapitalize(value) {
+    super.autocapitalize = value;
+  }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
+  get spellcheck() {
+    return super.spellcheck;
+  }
+  set spellcheck(value) {
+    super.spellcheck = value;
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-select-native]");
   }
@@ -839,6 +993,27 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-select-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("invalid") && this.invalid == null) {
+      this.invalid = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("pill") && this.pill == null) {
+      this.pill = false;
+    }
+    if (changedProperties.has("required") && this.required == null) {
+      this.required = false;
+    }
+    if (changedProperties.has("success") && this.success == null) {
+      this.success = false;
+    }
     if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
       this.size = "md";
     }
@@ -902,6 +1077,7 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
       aria-invalid="${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      autocapitalize="${ifDefined_js.ifDefined(this.autocapitalize || void 0)}"
       autocomplete="${ifDefined_js.ifDefined(this.autocomplete || void 0)}"
       ?autofocus="${this.autofocus}"
       class="${this.selectClasses}"
@@ -911,6 +1087,7 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
       id="${ifDefined_js.ifDefined(this.id || void 0)}"
       name="${ifDefined_js.ifDefined(this.name || void 0)}"
       ?required="${this.required}"
+      spellcheck="${ifDefined_js.ifDefined(this.getAttribute("spellcheck") ?? void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
       .value="${live_js.live(this.value)}"
       @change="${this.handleChange}"
@@ -922,7 +1099,6 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
 };
 SpectreSelectElement.properties = {
   autocomplete: { type: String, reflect: true },
-  autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
@@ -946,7 +1122,6 @@ function defineSpectreSelect(tagName = "sp-select") {
 var SpectreCheckboxElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.checked = false;
     this.disabled = false;
     this.invalid = false;
@@ -967,6 +1142,12 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-checkbox-label]");
   }
@@ -978,6 +1159,24 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-checkbox-label") || el.hasAttribute("data-sp-checkbox-native") || el.hasAttribute("data-sp-checkbox-label-fallback") || el.hasAttribute("data-sp-checkbox-indicator");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("checked") && this.checked == null) {
+      this.checked = false;
+    }
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("invalid") && this.invalid == null) {
+      this.invalid = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("required") && this.required == null) {
+      this.required = false;
+    }
+    if (changedProperties.has("success") && this.success == null) {
+      this.success = false;
+    }
     if (changedProperties.has("value") && this.value == null) {
       this.value = "on";
     }
@@ -1038,7 +1237,6 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
   }
 };
 SpectreCheckboxElement.properties = {
-  autofocus: { type: Boolean, reflect: true },
   checked: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
@@ -1061,7 +1259,6 @@ function defineSpectreCheckbox(tagName = "sp-checkbox") {
 var SpectreRadioElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
-    this.autofocus = false;
     this.checked = false;
     this.disabled = false;
     this.invalid = false;
@@ -1082,6 +1279,12 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-radio-label]");
   }
@@ -1093,6 +1296,24 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-radio-label") || el.hasAttribute("data-sp-radio-native") || el.hasAttribute("data-sp-radio-label-fallback") || el.hasAttribute("data-sp-radio-indicator");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("checked") && this.checked == null) {
+      this.checked = false;
+    }
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("invalid") && this.invalid == null) {
+      this.invalid = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("required") && this.required == null) {
+      this.required = false;
+    }
+    if (changedProperties.has("success") && this.success == null) {
+      this.success = false;
+    }
     if (changedProperties.has("value") && this.value == null) {
       this.value = "on";
     }
@@ -1127,10 +1348,10 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     }
     const root = this.getRootNode();
     const radios = root.querySelectorAll(
-      `sp-radio[name="${this.name}"]`
+      "sp-radio"
     );
     radios.forEach((radio) => {
-      if (radio !== this && radio.checked) {
+      if (radio !== this && radio.name === this.name && radio.checked) {
         radio.checked = false;
       }
     });
@@ -1173,7 +1394,6 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
   }
 };
 SpectreRadioElement.properties = {
-  autofocus: { type: Boolean, reflect: true },
   checked: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
@@ -1198,6 +1418,11 @@ var SpectreLabelElement = class extends SpectreProjectableElement {
     super(...arguments);
     this.disabled = false;
   }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+  }
   get isDisabled() {
     return this.disabled ?? false;
   }
@@ -1276,6 +1501,24 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
+  get autocapitalize() {
+    return super.autocapitalize;
+  }
+  set autocapitalize(value) {
+    super.autocapitalize = value;
+  }
+  get autofocus() {
+    return super.autofocus;
+  }
+  set autofocus(value) {
+    super.autofocus = value;
+  }
+  get spellcheck() {
+    return super.spellcheck;
+  }
+  set spellcheck(value) {
+    super.spellcheck = value;
+  }
   get visibleLegend() {
     const trimmedLegend = this.legend?.trim();
     return trimmedLegend ? trimmedLegend : void 0;
@@ -1320,11 +1563,14 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
       aria-invalid="${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      autocapitalize="${ifDefined_js.ifDefined(this.autocapitalize || void 0)}"
+      ?autofocus="${this.autofocus}"
       data-sp-fieldset-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)}"
+      spellcheck="${ifDefined_js.ifDefined(this.getAttribute("spellcheck") ?? void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
     >
       ${this.visibleLegend ? lit.html`<legend
@@ -1352,6 +1598,466 @@ function defineSpectreFieldset(tagName = "sp-fieldset") {
   customElements.define(tagName, SpectreFieldsetElement);
   return SpectreFieldsetElement;
 }
+var SpectreBadgeElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.fullWidth = false;
+    this.loading = false;
+    this.size = "md";
+    this.variant = "primary";
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  getContentContainer() {
+    return this.querySelector("[data-sp-badge-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-badge-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("variant") && (this.variant == null || !isBadgeVariant(this.variant))) {
+      this.variant = "primary";
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
+      this.size = "md";
+    }
+  }
+  get badgeClasses() {
+    return spectreUi.getBadgeClasses({
+      disabled: this.disabled ?? false,
+      fullWidth: this.fullWidth ?? false,
+      loading: this.loading ?? false,
+      size: this.size,
+      variant: this.variant
+    });
+  }
+  render() {
+    return lit.html`<span
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.badgeClasses}"
+      data-sp-badge-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </span>`;
+  }
+};
+SpectreBadgeElement.properties = {
+  disabled: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  loading: { type: Boolean, reflect: true },
+  size: { type: String, reflect: true },
+  variant: { type: String, reflect: true }
+};
+function defineSpectreBadge(tagName = "sp-badge") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreBadgeElement);
+  return SpectreBadgeElement;
+}
+var SpectreCardElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.fullHeight = false;
+    this.interactive = false;
+    this.loading = false;
+    this.padded = true;
+    this.variant = "elevated";
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  getContentContainer() {
+    return this.querySelector("[data-sp-card-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-card-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullHeight") && this.fullHeight == null) {
+      this.fullHeight = false;
+    }
+    if (changedProperties.has("interactive") && this.interactive == null) {
+      this.interactive = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("padded") && this.padded == null) {
+      this.padded = true;
+    }
+    if (changedProperties.has("variant") && (this.variant == null || !isCardVariant(this.variant))) {
+      this.variant = "elevated";
+    }
+  }
+  get cardClasses() {
+    return spectreUi.getCardClasses({
+      disabled: this.disabled ?? false,
+      fullHeight: this.fullHeight ?? false,
+      interactive: this.interactive ?? false,
+      loading: this.loading ?? false,
+      padded: this.padded ?? true,
+      variant: this.variant
+    });
+  }
+  render() {
+    return lit.html`<div
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.cardClasses}"
+      data-sp-card-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </div>`;
+  }
+};
+SpectreCardElement.properties = {
+  disabled: { type: Boolean, reflect: true },
+  fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
+  interactive: { type: Boolean, reflect: true },
+  loading: { type: Boolean, reflect: true },
+  padded: { type: Boolean, reflect: true },
+  variant: { type: String, reflect: true }
+};
+function defineSpectreCard(tagName = "sp-card") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreCardElement);
+  return SpectreCardElement;
+}
+var SpectreIconBoxElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.fullWidth = false;
+    this.interactive = false;
+    this.loading = false;
+    this.pill = false;
+    this.size = "md";
+    this.variant = "primary";
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  getContentContainer() {
+    return this.querySelector("[data-sp-icon-box-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-icon-box-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("interactive") && this.interactive == null) {
+      this.interactive = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("pill") && this.pill == null) {
+      this.pill = false;
+    }
+    if (changedProperties.has("variant") && (this.variant == null || !isIconBoxVariant(this.variant))) {
+      this.variant = "primary";
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
+      this.size = "md";
+    }
+  }
+  get iconBoxClasses() {
+    return spectreUi.getIconBoxClasses({
+      disabled: this.disabled ?? false,
+      fullWidth: this.fullWidth ?? false,
+      interactive: this.interactive ?? false,
+      loading: this.loading ?? false,
+      pill: this.pill ?? false,
+      size: this.size,
+      variant: this.variant
+    });
+  }
+  render() {
+    return lit.html`<div
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.iconBoxClasses}"
+      data-sp-icon-box-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </div>`;
+  }
+};
+SpectreIconBoxElement.properties = {
+  disabled: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  interactive: { type: Boolean, reflect: true },
+  loading: { type: Boolean, reflect: true },
+  pill: { type: Boolean, reflect: true },
+  size: { type: String, reflect: true },
+  variant: { type: String, reflect: true }
+};
+function defineSpectreIconBox(tagName = "sp-icon-box") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreIconBoxElement);
+  return SpectreIconBoxElement;
+}
+var SpectreRatingElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.loading = false;
+    this.max = 5;
+    this.size = "md";
+    this.value = 0;
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
+      this.size = "md";
+    }
+    if (changedProperties.has("max")) {
+      this.max = normalizeInt(this.max, 5, 1) ?? 5;
+    }
+    if (changedProperties.has("value")) {
+      const safeMax = this.max ?? 5;
+      const normalized = normalizeInt(this.value, 0, 0);
+      this.value = normalized == null ? 0 : Math.min(normalized, safeMax);
+    }
+  }
+  get ratingClasses() {
+    return spectreUi.getRatingClasses({
+      disabled: this.disabled ?? false,
+      loading: this.loading ?? false,
+      size: this.size
+    });
+  }
+  get effectiveMax() {
+    return this.max ?? 5;
+  }
+  get effectiveValue() {
+    return this.value ?? 0;
+  }
+  get computedAriaLabel() {
+    const base = this.forwardedAriaLabel;
+    if (base) return base;
+    return `Rating: ${this.effectiveValue} out of ${this.effectiveMax}`;
+  }
+  renderStars() {
+    const stars = [];
+    for (let i = 1; i <= this.effectiveMax; i++) {
+      stars.push(lit.html`<span class="${spectreUi.getRatingStarClasses(i <= this.effectiveValue)}"></span>`);
+    }
+    return stars;
+  }
+  render() {
+    const trimmedLabel = this.label?.trim();
+    return lit.html`<div
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${this.computedAriaLabel}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.ratingClasses}"
+      data-sp-rating-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="img"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      <div class="${spectreUi.getRatingStarsClasses()}">${this.renderStars()}</div>
+      ${trimmedLabel ? lit.html`<span class="${spectreUi.getRatingTextClasses({ disabled: this.disabled ?? false })}">${trimmedLabel}</span>` : lit.nothing}
+    </div>`;
+  }
+};
+SpectreRatingElement.properties = {
+  disabled: { type: Boolean, reflect: true },
+  label: { type: String, reflect: true },
+  loading: { type: Boolean, reflect: true },
+  max: { type: Number, reflect: true },
+  size: { type: String, reflect: true },
+  value: { type: Number, reflect: true }
+};
+function defineSpectreRating(tagName = "sp-rating") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreRatingElement);
+  return SpectreRatingElement;
+}
+var SpectreTestimonialElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.fullHeight = false;
+    this.interactive = false;
+    this.loading = false;
+    this.variant = "elevated";
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  getContentContainer() {
+    return this.querySelector("[data-sp-testimonial-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-testimonial-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullHeight") && this.fullHeight == null) {
+      this.fullHeight = false;
+    }
+    if (changedProperties.has("interactive") && this.interactive == null) {
+      this.interactive = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("variant") && (this.variant == null || !isTestimonialVariant(this.variant))) {
+      this.variant = "elevated";
+    }
+  }
+  get testimonialClasses() {
+    return spectreUi.getTestimonialClasses({
+      disabled: this.disabled ?? false,
+      fullHeight: this.fullHeight ?? false,
+      interactive: this.interactive ?? false,
+      loading: this.loading ?? false,
+      variant: this.variant
+    });
+  }
+  render() {
+    return lit.html`<div
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.testimonialClasses}"
+      data-sp-testimonial-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </div>`;
+  }
+};
+SpectreTestimonialElement.properties = {
+  disabled: { type: Boolean, reflect: true },
+  fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
+  interactive: { type: Boolean, reflect: true },
+  loading: { type: Boolean, reflect: true },
+  variant: { type: String, reflect: true }
+};
+function defineSpectreTestimonial(tagName = "sp-testimonial") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreTestimonialElement);
+  return SpectreTestimonialElement;
+}
 
 // src/index.ts
 function defineSpectreComponents() {
@@ -1363,29 +2069,51 @@ function defineSpectreComponents() {
   defineSpectreRadio();
   defineSpectreLabel();
   defineSpectreFieldset();
+  defineSpectreBadge();
+  defineSpectreCard();
+  defineSpectreIconBox();
+  defineSpectreRating();
+  defineSpectreTestimonial();
 }
 
+exports.SpectreBadgeElement = SpectreBadgeElement;
 exports.SpectreButtonElement = SpectreButtonElement;
+exports.SpectreCardElement = SpectreCardElement;
 exports.SpectreCheckboxElement = SpectreCheckboxElement;
 exports.SpectreFieldsetElement = SpectreFieldsetElement;
+exports.SpectreIconBoxElement = SpectreIconBoxElement;
 exports.SpectreInputElement = SpectreInputElement;
 exports.SpectreLabelElement = SpectreLabelElement;
 exports.SpectreRadioElement = SpectreRadioElement;
+exports.SpectreRatingElement = SpectreRatingElement;
 exports.SpectreSelectElement = SpectreSelectElement;
+exports.SpectreTestimonialElement = SpectreTestimonialElement;
 exports.SpectreTextareaElement = SpectreTextareaElement;
+exports.defineSpectreBadge = defineSpectreBadge;
 exports.defineSpectreButton = defineSpectreButton;
+exports.defineSpectreCard = defineSpectreCard;
 exports.defineSpectreCheckbox = defineSpectreCheckbox;
 exports.defineSpectreComponents = defineSpectreComponents;
 exports.defineSpectreFieldset = defineSpectreFieldset;
+exports.defineSpectreIconBox = defineSpectreIconBox;
 exports.defineSpectreInput = defineSpectreInput;
 exports.defineSpectreLabel = defineSpectreLabel;
 exports.defineSpectreRadio = defineSpectreRadio;
+exports.defineSpectreRating = defineSpectreRating;
 exports.defineSpectreSelect = defineSpectreSelect;
+exports.defineSpectreTestimonial = defineSpectreTestimonial;
 exports.defineSpectreTextarea = defineSpectreTextarea;
+exports.spectreBadgeSizes = spectreInputSizes;
+exports.spectreBadgeVariants = spectreBadgeVariants;
 exports.spectreButtonSizes = spectreInputSizes;
 exports.spectreButtonTypes = spectreButtonTypes;
 exports.spectreButtonVariants = spectreButtonVariants;
+exports.spectreCardVariants = spectreCardVariants;
+exports.spectreIconBoxSizes = spectreInputSizes;
+exports.spectreIconBoxVariants = spectreIconBoxVariants;
 exports.spectreInputSizes = spectreInputSizes;
 exports.spectreInputTypes = spectreInputTypes;
+exports.spectreRatingSizes = spectreInputSizes;
+exports.spectreTestimonialVariants = spectreTestimonialVariants;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map