@phcdevworks/spectre-components 1.3.0 → 1.4.0

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { S as SpectreButtonSize, a as SpectreButtonType, b as SpectreButtonVariant, S as SpectreInputSize, c as SpectreInputType, s as spectreButtonSizes, d as spectreButtonTypes, e as spectreButtonVariants, s as spectreInputSizes, f as spectreInputTypes } from './form-yR_u97J-.cjs';
+export { S as SpectreBadgeSize, a as SpectreBadgeVariant, S as SpectreButtonSize, b as SpectreButtonType, c as SpectreButtonVariant, d as SpectreCardVariant, S as SpectreIconBoxSize, e as SpectreIconBoxVariant, S as SpectreInputSize, f as SpectreInputType, S as SpectreRatingSize, g as SpectreTestimonialVariant, s as spectreBadgeSizes, h as spectreBadgeVariants, s as spectreButtonSizes, i as spectreButtonTypes, j as spectreButtonVariants, k as spectreCardVariants, s as spectreIconBoxSizes, l as spectreIconBoxVariants, s as spectreInputSizes, m as spectreInputTypes, s as spectreRatingSizes, n as spectreTestimonialVariants } from './form-Dg6kuOS7.cjs';
 export { SpectreButtonElement, SpectreButtonProps, defineSpectreButton } from './button.cjs';
 export { SpectreInputElement, SpectreInputProps, defineSpectreInput } from './input.cjs';
 export { SpectreTextareaElement, SpectreTextareaProps, defineSpectreTextarea } from './textarea.cjs';
@@ -7,6 +7,11 @@ export { SpectreCheckboxElement, SpectreCheckboxProps, defineSpectreCheckbox } f
 export { SpectreRadioElement, SpectreRadioProps, defineSpectreRadio } from './radio.cjs';
 export { SpectreLabelElement, SpectreLabelProps, defineSpectreLabel } from './label.cjs';
 export { SpectreFieldsetElement, SpectreFieldsetProps, defineSpectreFieldset } from './fieldset.cjs';
+export { SpectreBadgeElement, SpectreBadgeProps, defineSpectreBadge } from './badge.cjs';
+export { SpectreCardElement, SpectreCardProps, defineSpectreCard } from './card.cjs';
+export { SpectreIconBoxElement, SpectreIconBoxProps, defineSpectreIconBox } from './icon-box.cjs';
+export { SpectreRatingElement, SpectreRatingProps, defineSpectreRating } from './rating.cjs';
+export { SpectreTestimonialElement, SpectreTestimonialProps, defineSpectreTestimonial } from './testimonial.cjs';
 import 'lit';
 import './projectable-Bx-IVk0w.cjs';
 import './base-BRQ7QAAr.cjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { S as SpectreButtonSize, a as SpectreButtonType, b as SpectreButtonVariant, S as SpectreInputSize, c as SpectreInputType, s as spectreButtonSizes, d as spectreButtonTypes, e as spectreButtonVariants, s as spectreInputSizes, f as spectreInputTypes } from './form-yR_u97J-.js';
+export { S as SpectreBadgeSize, a as SpectreBadgeVariant, S as SpectreButtonSize, b as SpectreButtonType, c as SpectreButtonVariant, d as SpectreCardVariant, S as SpectreIconBoxSize, e as SpectreIconBoxVariant, S as SpectreInputSize, f as SpectreInputType, S as SpectreRatingSize, g as SpectreTestimonialVariant, s as spectreBadgeSizes, h as spectreBadgeVariants, s as spectreButtonSizes, i as spectreButtonTypes, j as spectreButtonVariants, k as spectreCardVariants, s as spectreIconBoxSizes, l as spectreIconBoxVariants, s as spectreInputSizes, m as spectreInputTypes, s as spectreRatingSizes, n as spectreTestimonialVariants } from './form-Dg6kuOS7.js';
 export { SpectreButtonElement, SpectreButtonProps, defineSpectreButton } from './button.js';
 export { SpectreInputElement, SpectreInputProps, defineSpectreInput } from './input.js';
 export { SpectreTextareaElement, SpectreTextareaProps, defineSpectreTextarea } from './textarea.js';
@@ -7,6 +7,11 @@ export { SpectreCheckboxElement, SpectreCheckboxProps, defineSpectreCheckbox } f
 export { SpectreRadioElement, SpectreRadioProps, defineSpectreRadio } from './radio.js';
 export { SpectreLabelElement, SpectreLabelProps, defineSpectreLabel } from './label.js';
 export { SpectreFieldsetElement, SpectreFieldsetProps, defineSpectreFieldset } from './fieldset.js';
+export { SpectreBadgeElement, SpectreBadgeProps, defineSpectreBadge } from './badge.js';
+export { SpectreCardElement, SpectreCardProps, defineSpectreCard } from './card.js';
+export { SpectreIconBoxElement, SpectreIconBoxProps, defineSpectreIconBox } from './icon-box.js';
+export { SpectreRatingElement, SpectreRatingProps, defineSpectreRating } from './rating.js';
+export { SpectreTestimonialElement, SpectreTestimonialProps, defineSpectreTestimonial } from './testimonial.js';
 import 'lit';
 import './projectable-D6IDeKfr.js';
 import './base-BRQ7QAAr.js';

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 } 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,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;
@@ -922,12 +962,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 +1075,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 +1085,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 +1499,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 +1561,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 +1596,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 getBadgeClasses({
+      disabled: this.disabled ?? false,
+      fullWidth: this.fullWidth ?? false,
+      loading: this.loading ?? false,
+      size: this.size,
+      variant: this.variant
+    });
+  }
+  render() {
+    return html`<span
+      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.disabled ?? false,
+      fullHeight: this.fullHeight ?? false,
+      interactive: this.interactive ?? false,
+      loading: this.loading ?? false,
+      padded: this.padded ?? true,
+      variant: this.variant
+    });
+  }
+  render() {
+    return html`<div
+      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.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 html`<div
+      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.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(html`<span class="${getRatingStarClasses(i <= this.effectiveValue)}"></span>`);
+    }
+    return stars;
+  }
+  render() {
+    const trimmedLabel = this.label?.trim();
+    return html`<div
+      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.disabled ?? false })}">${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.disabled ?? false,
+      fullHeight: this.fullHeight ?? false,
+      interactive: this.interactive ?? false,
+      loading: this.loading ?? false,
+      variant: this.variant
+    });
+  }
+  render() {
+    return html`<div
+      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;
+}
 
 // src/index.ts
 function defineSpectreComponents() {
@@ -1539,8 +2067,13 @@ function defineSpectreComponents() {
   defineSpectreRadio();
   defineSpectreLabel();
   defineSpectreFieldset();
+  defineSpectreBadge();
+  defineSpectreCard();
+  defineSpectreIconBox();
+  defineSpectreRating();
+  defineSpectreTestimonial();
 }
 
-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 { SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreFieldsetElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectreRadioElement, SpectreRatingElement, SpectreSelectElement, SpectreTestimonialElement, SpectreTextareaElement, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreFieldset, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectreRadio, defineSpectreRating, defineSpectreSelect, defineSpectreTestimonial, defineSpectreTextarea, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreTestimonialVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map