@phcdevworks/spectre-components 1.3.0 → 1.5.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { getButtonClasses, getInputLabelClasses, getInputClasses } from '@phcdevworks/spectre-ui';
+import { getButtonClasses, getInputLabelClasses, getInputClasses, getBadgeClasses, getCardClasses, getIconBoxClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialClasses, getAlertClasses, getAvatarClasses, getSpinnerClasses, getTagClasses, getPricingCardClasses } from '@phcdevworks/spectre-ui';
 import { LitElement, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
@@ -41,6 +41,107 @@ 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 spectreAlertVariants = [
+  "info",
+  "success",
+  "warning",
+  "danger",
+  "neutral"
+];
+function isAlertVariant(value) {
+  return spectreAlertVariants.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
+  );
+}
+var spectreSpinnerVariants = [
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "neutral",
+  "accent",
+  "cta"
+];
+function isSpinnerVariant(value) {
+  return spectreSpinnerVariants.includes(value);
+}
+var spectreTagVariants = [
+  "default",
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "neutral",
+  "accent",
+  "cta",
+  "outline",
+  "ghost"
+];
+function isTagVariant(value) {
+  return spectreTagVariants.includes(value);
+}
+var spectreAvatarSizes = ["xs", "sm", "md", "lg", "xl"];
+function isAvatarSize(value) {
+  return spectreAvatarSizes.includes(value);
+}
+var spectreAvatarShapes = ["circle", "square"];
+function isAvatarShape(value) {
+  return spectreAvatarShapes.includes(value);
+}
 function normalizeInt(value, fallback, min = 0) {
   if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
     return fallback;
@@ -922,12 +1023,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]");
   }
@@ -1023,6 +1136,7 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
       aria-invalid="${ifDefined(this.invalid ? "true" : void 0)}"
       aria-label="${ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      autocapitalize="${ifDefined(this.autocapitalize || void 0)}"
       autocomplete="${ifDefined(this.autocomplete || void 0)}"
       ?autofocus="${this.autofocus}"
       class="${this.selectClasses}"
@@ -1032,6 +1146,7 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
       id="${ifDefined(this.id || void 0)}"
       name="${ifDefined(this.name || void 0)}"
       ?required="${this.required}"
+      spellcheck="${ifDefined(this.getAttribute("spellcheck") ?? void 0)}"
       title="${ifDefined(this.title || void 0)}"
       .value="${live(this.value)}"
       @change="${this.handleChange}"
@@ -1445,12 +1560,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;
@@ -1495,12 +1622,14 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
       aria-invalid="${ifDefined(this.invalid ? "true" : void 0)}"
       aria-label="${ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      autocapitalize="${ifDefined(this.autocapitalize || void 0)}"
       ?autofocus="${this.autofocus}"
       data-sp-fieldset-native
       ?disabled="${this.isDisabled}"
       form="${ifDefined(this.form || void 0)}"
       id="${ifDefined(this.id || void 0)}"
       name="${ifDefined(this.name || void 0)}"
+      spellcheck="${ifDefined(this.getAttribute("spellcheck") ?? void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
       ${this.visibleLegend ? html`<legend
@@ -1528,6 +1657,955 @@ 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 getBadgeClasses({
+      disabled: this.isDisabled,
+      fullWidth: this.fullWidth ?? false,
+      loading: this.loading ?? false,
+      size: this.size,
+      variant: this.variant
+    });
+  }
+  get isDisabled() {
+    return (this.disabled ?? false) || (this.loading ?? false);
+  }
+  render() {
+    return html`<span
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.badgeClasses}"
+      data-sp-badge-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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 getCardClasses({
+      disabled: this.isDisabled,
+      fullHeight: this.fullHeight ?? false,
+      interactive: this.interactive ?? false,
+      loading: this.loading ?? false,
+      padded: this.padded ?? true,
+      variant: this.variant
+    });
+  }
+  get isDisabled() {
+    return (this.disabled ?? false) || (this.loading ?? false);
+  }
+  render() {
+    return html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.cardClasses}"
+      data-sp-card-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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 getIconBoxClasses({
+      disabled: this.isDisabled,
+      fullWidth: this.fullWidth ?? false,
+      interactive: this.interactive ?? false,
+      loading: this.loading ?? false,
+      pill: this.pill ?? false,
+      size: this.size,
+      variant: this.variant
+    });
+  }
+  get isDisabled() {
+    return (this.disabled ?? false) || (this.loading ?? false);
+  }
+  render() {
+    return html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.iconBoxClasses}"
+      data-sp-icon-box-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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 getRatingClasses({
+      disabled: this.isDisabled,
+      loading: this.loading ?? false,
+      size: this.size
+    });
+  }
+  get isDisabled() {
+    return (this.disabled ?? false) || (this.loading ?? false);
+  }
+  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(html`<span class="${getRatingStarClasses(i <= this.effectiveValue)}"></span>`);
+    }
+    return stars;
+  }
+  render() {
+    const trimmedLabel = this.label?.trim();
+    return html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${this.computedAriaLabel}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.ratingClasses}"
+      data-sp-rating-native
+      id="${ifDefined(this.id || void 0)}"
+      role="img"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      <div class="${getRatingStarsClasses()}">${this.renderStars()}</div>
+      ${trimmedLabel ? html`<span class="${getRatingTextClasses({ disabled: this.isDisabled })}">${trimmedLabel}</span>` : 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 getTestimonialClasses({
+      disabled: this.isDisabled,
+      fullHeight: this.fullHeight ?? false,
+      interactive: this.interactive ?? false,
+      loading: this.loading ?? false,
+      variant: this.variant
+    });
+  }
+  get isDisabled() {
+    return (this.disabled ?? false) || (this.loading ?? false);
+  }
+  render() {
+    return html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.testimonialClasses}"
+      data-sp-testimonial-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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;
+}
+var SpectreAlertElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.dismissed = false;
+    this.disabled = false;
+    this.fullWidth = false;
+    this.loading = false;
+    this.size = "md";
+    this.variant = "info";
+  }
+  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-alert-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-alert-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("dismissed") && this.dismissed == null) {
+      this.dismissed = false;
+    }
+    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 || !isAlertVariant(this.variant))) {
+      this.variant = "info";
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
+      this.size = "md";
+    }
+  }
+  get alertClasses() {
+    return getAlertClasses({
+      disabled: this.isDisabled,
+      dismissed: this.dismissed ?? false,
+      fullWidth: this.fullWidth ?? false,
+      loading: this.loading ?? false,
+      size: this.size,
+      variant: this.variant
+    });
+  }
+  get isDisabled() {
+    return (this.disabled ?? false) || (this.loading ?? false);
+  }
+  render() {
+    return html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.alertClasses}"
+      data-sp-alert-native
+      id="${ifDefined(this.id || void 0)}"
+      role="alert"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : nothing}
+    </div>`;
+  }
+};
+SpectreAlertElement.properties = {
+  dismissed: { type: Boolean, reflect: true },
+  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 defineSpectreAlert(tagName = "sp-alert") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreAlertElement);
+  return SpectreAlertElement;
+}
+var SpectreAvatarElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.fullWidth = false;
+    this.interactive = false;
+    this.loading = false;
+    this.placeholder = false;
+    this.shape = "circle";
+    this.size = "md";
+  }
+  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-avatar-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-avatar-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("placeholder") && this.placeholder == null) {
+      this.placeholder = false;
+    }
+    if (changedProperties.has("shape") && (this.shape == null || !isAvatarShape(this.shape))) {
+      this.shape = "circle";
+    }
+    if (changedProperties.has("size") && (this.size == null || !isAvatarSize(this.size))) {
+      this.size = "md";
+    }
+  }
+  get avatarClasses() {
+    return getAvatarClasses({
+      disabled: this.isDisabled,
+      fullWidth: this.fullWidth ?? false,
+      interactive: this.interactive ?? false,
+      loading: this.loading ?? false,
+      placeholder: this.placeholder ?? false,
+      shape: this.shape,
+      size: this.size
+    });
+  }
+  get isDisabled() {
+    return (this.disabled ?? false) || (this.loading ?? false);
+  }
+  render() {
+    return html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.avatarClasses}"
+      data-sp-avatar-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : nothing}
+    </div>`;
+  }
+};
+SpectreAvatarElement.properties = {
+  disabled: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  interactive: { type: Boolean, reflect: true },
+  loading: { type: Boolean, reflect: true },
+  placeholder: { type: Boolean, reflect: true },
+  shape: { type: String, reflect: true },
+  size: { type: String, reflect: true }
+};
+function defineSpectreAvatar(tagName = "sp-avatar") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreAvatarElement);
+  return SpectreAvatarElement;
+}
+var SpectreSpinnerElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.loading = true;
+    this.size = "md";
+  }
+  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 = true;
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
+      this.size = "md";
+    }
+    if (changedProperties.has("variant") && this.variant != null && !isSpinnerVariant(this.variant)) {
+      this.variant = void 0;
+    }
+  }
+  get spinnerClasses() {
+    return getSpinnerClasses({
+      disabled: this.disabled ?? false,
+      loading: this.loading ?? true,
+      size: this.size,
+      ...this.variant != null ? { variant: this.variant } : {}
+    });
+  }
+  get computedAriaLabel() {
+    return this.forwardedAriaLabel ?? "Loading";
+  }
+  render() {
+    return html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${this.computedAriaLabel}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.spinnerClasses}"
+      data-sp-spinner-native
+      id="${ifDefined(this.id || void 0)}"
+      role="status"
+      title="${ifDefined(this.title || void 0)}"
+    ></div>`;
+  }
+};
+SpectreSpinnerElement.properties = {
+  disabled: { type: Boolean, reflect: true },
+  loading: { type: Boolean, reflect: true },
+  size: { type: String, reflect: true },
+  variant: { type: String, reflect: true }
+};
+function defineSpectreSpinner(tagName = "sp-spinner") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreSpinnerElement);
+  return SpectreSpinnerElement;
+}
+var SpectreTagElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.dismissible = false;
+    this.disabled = false;
+    this.fullWidth = false;
+    this.interactive = false;
+    this.loading = false;
+    this.selected = false;
+    this.size = "md";
+    this.variant = "default";
+  }
+  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-tag-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-tag-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("dismissible") && this.dismissible == null) {
+      this.dismissible = false;
+    }
+    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("selected") && this.selected == null) {
+      this.selected = false;
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
+      this.size = "md";
+    }
+    if (changedProperties.has("variant") && (this.variant == null || !isTagVariant(this.variant))) {
+      this.variant = "default";
+    }
+  }
+  get tagClasses() {
+    return getTagClasses({
+      disabled: this.isDisabled,
+      dismissible: this.dismissible ?? false,
+      fullWidth: this.fullWidth ?? false,
+      interactive: this.interactive ?? false,
+      loading: this.loading ?? false,
+      selected: this.selected ?? false,
+      size: this.size,
+      variant: this.variant
+    });
+  }
+  get isDisabled() {
+    return (this.disabled ?? false) || (this.loading ?? false);
+  }
+  render() {
+    return html`<span
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.tagClasses}"
+      data-sp-tag-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : nothing}
+    </span>`;
+  }
+};
+SpectreTagElement.properties = {
+  dismissible: { type: Boolean, reflect: true },
+  disabled: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  interactive: { type: Boolean, reflect: true },
+  loading: { type: Boolean, reflect: true },
+  selected: { type: Boolean, reflect: true },
+  size: { type: String, reflect: true },
+  variant: { type: String, reflect: true }
+};
+function defineSpectreTag(tagName = "sp-tag") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreTagElement);
+  return SpectreTagElement;
+}
+var SpectrePricingCardElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.featured = false;
+    this.fullHeight = false;
+    this.interactive = false;
+    this.loading = false;
+  }
+  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-pricing-card-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-pricing-card-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("featured") && this.featured == null) {
+      this.featured = 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;
+    }
+  }
+  get pricingCardClasses() {
+    return getPricingCardClasses({
+      disabled: this.isDisabled,
+      featured: this.featured ?? false,
+      fullHeight: this.fullHeight ?? false,
+      interactive: this.interactive ?? false,
+      loading: this.loading ?? false
+    });
+  }
+  get isDisabled() {
+    return (this.disabled ?? false) || (this.loading ?? false);
+  }
+  render() {
+    return html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.pricingCardClasses}"
+      data-sp-pricing-card-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : nothing}
+    </div>`;
+  }
+};
+SpectrePricingCardElement.properties = {
+  disabled: { type: Boolean, reflect: true },
+  featured: { type: Boolean, reflect: true },
+  fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
+  interactive: { type: Boolean, reflect: true },
+  loading: { type: Boolean, reflect: true }
+};
+function defineSpectrePricingCard(tagName = "sp-pricing-card") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectrePricingCardElement);
+  return SpectrePricingCardElement;
+}
 
 // src/index.ts
 function defineSpectreComponents() {
@@ -1539,8 +2617,18 @@ function defineSpectreComponents() {
   defineSpectreRadio();
   defineSpectreLabel();
   defineSpectreFieldset();
+  defineSpectreBadge();
+  defineSpectreCard();
+  defineSpectreIconBox();
+  defineSpectreRating();
+  defineSpectreTestimonial();
+  defineSpectreAlert();
+  defineSpectreAvatar();
+  defineSpectreSpinner();
+  defineSpectreTag();
+  defineSpectrePricingCard();
 }
 
-export { SpectreButtonElement, SpectreCheckboxElement, SpectreFieldsetElement, SpectreInputElement, SpectreLabelElement, SpectreRadioElement, SpectreSelectElement, SpectreTextareaElement, defineSpectreButton, defineSpectreCheckbox, defineSpectreComponents, defineSpectreFieldset, defineSpectreInput, defineSpectreLabel, defineSpectreRadio, defineSpectreSelect, defineSpectreTextarea, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreInputSizes, spectreInputTypes };
+export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreFieldsetElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSelectElement, SpectreSpinnerElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextareaElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreFieldset, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSelect, defineSpectreSpinner, defineSpectreTag, defineSpectreTestimonial, defineSpectreTextarea, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map