@phcdevworks/spectre-components 1.4.0 → 1.6.0

package/dist/index.cjs

@@ -59,7 +59,22 @@ var spectreBadgeVariants = [
 function isBadgeVariant(value) {
   return spectreBadgeVariants.includes(value);
 }
-var spectreCardVariants = ["elevated", "flat", "outline", "ghost"];
+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);
 }
@@ -79,9 +94,83 @@ var spectreIconBoxVariants = [
 function isIconBoxVariant(value) {
   return spectreIconBoxVariants.includes(value);
 }
-var spectreTestimonialVariants = ["elevated", "flat", "outline", "ghost"];
+var spectreTestimonialVariants = [
+  "elevated",
+  "flat",
+  "outline",
+  "ghost"
+];
 function isTestimonialVariant(value) {
-  return spectreTestimonialVariants.includes(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);
+}
+var spectreContainerMaxWidths = ["prose"];
+function isContainerMaxWidth(value) {
+  return spectreContainerMaxWidths.includes(
+    value
+  );
+}
+var spectreGridColumns = [1, 2, 3, 4, 6, 12];
+function isGridColumns(value) {
+  return spectreGridColumns.includes(value);
+}
+var spectreGridGaps = ["sm", "md", "lg"];
+function isGridGap(value) {
+  return spectreGridGaps.includes(value);
+}
+var spectreStackDirections = ["vertical", "horizontal"];
+function isStackDirection(value) {
+  return spectreStackDirections.includes(
+    value
+  );
+}
+var spectreStackBases = ["sidebar"];
+function isStackBasis(value) {
+  return spectreStackBases.includes(value);
+}
+var spectreStackAligns = ["center", "stretch"];
+function isStackAlign(value) {
+  return spectreStackAligns.includes(value);
 }
 function normalizeInt(value, fallback, min = 0) {
   if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
@@ -339,6 +428,16 @@ var SpectreBaseElement = class extends lit.LitElement {
     const value = this.ariaDescribedBy?.trim();
     return value ? value : void 0;
   }
+  // Subclasses that expose `disabled`/`loading` properties get this disabled
+  // calculation for free instead of redeclaring it per component.
+  get isDisabled() {
+    const self = this;
+    return (self.disabled ?? false) || (self.loading ?? false);
+  }
+  // Subclasses get this for free instead of redeclaring it per component.
+  get hasForwardedLabel() {
+    return Boolean(this.forwardedAriaLabel || this.forwardedAriaLabelledBy);
+  }
 };
 SpectreBaseElement.properties = {};
 
@@ -506,9 +605,6 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
       variant: this.variant
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   get visibleLabelFallback() {
     const trimmedLabel = this.label?.trim();
     return trimmedLabel ? trimmedLabel : void 0;
@@ -524,7 +620,8 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
       return lit.html`<span
         class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
         data-sp-button-loading-label
-      >${this.loadingLabel}</span>`;
+        >${this.loadingLabel}</span
+      >`;
     }
     if (this.hasProjectedContent) {
       return this.projectedContent;
@@ -532,7 +629,8 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     return this.visibleLabelFallback ? lit.html`<span
           class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
           data-sp-button-label-fallback
-        >${this.visibleLabelFallback}</span>` : lit.nothing;
+          >${this.visibleLabelFallback}</span
+        >` : lit.nothing;
   }
   render() {
     return lit.html`<button
@@ -672,9 +770,6 @@ var SpectreInputElement = class extends SpectreBaseElement {
       state: this.isDisabled ? this.disabled ? "disabled" : "loading" : this.invalid ? "error" : this.success ? "success" : "default"
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   get nativeInput() {
     return this.querySelector("[data-sp-input-native]");
   }
@@ -851,16 +946,15 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
     }
   }
   get textareaClasses() {
-    return spectreUi.getInputClasses({
+    return spectreUi.getTextareaClasses({
       fullWidth: this.fullWidth ?? false,
       pill: this.pill ?? false,
       size: this.size,
-      state: this.isDisabled ? this.disabled ? "disabled" : "loading" : this.invalid ? "error" : this.success ? "success" : "default"
+      disabled: this.disabled ?? false,
+      loading: this.loading ?? false,
+      state: this.invalid ? "invalid" : this.success ? "success" : "default"
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   get nativeTextarea() {
     return this.querySelector("[data-sp-textarea-native]");
   }
@@ -1046,16 +1140,15 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
     }
   }
   get selectClasses() {
-    return spectreUi.getInputClasses({
+    return spectreUi.getSelectClasses({
       fullWidth: this.fullWidth ?? false,
       pill: this.pill ?? false,
       size: this.size,
-      state: this.isDisabled ? this.disabled ? "disabled" : "loading" : this.invalid ? "error" : this.success ? "success" : "default"
+      disabled: this.disabled ?? false,
+      loading: this.loading ?? false,
+      state: this.invalid ? "invalid" : this.success ? "success" : "default"
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   handleInput(event) {
     const select = event.currentTarget;
     this.value = select.value;
@@ -1184,9 +1277,6 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
   get nativeInput() {
     return this.querySelector("[data-sp-checkbox-native]");
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   get visibleLabelFallback() {
     const trimmedLabel = this.label?.trim();
     return trimmedLabel ? trimmedLabel : void 0;
@@ -1209,7 +1299,8 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
     const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? lit.html`<span
             class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
             data-sp-checkbox-label-fallback
-          >${this.visibleLabelFallback}</span>` : lit.nothing;
+            >${this.visibleLabelFallback}</span
+          >` : lit.nothing;
     return lit.html`<label data-sp-checkbox-label>
       <input
         aria-busy="${this.loading ? "true" : "false"}"
@@ -1231,7 +1322,10 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
         @change="${this.handleChange}"
         @input="${this.handleInput}"
       />
-      <span class="sp-checkbox-indicator" data-sp-checkbox-indicator></span>
+      <span
+        class="${spectreUi.getCheckboxClasses({ checked: this.checked ?? false, disabled: this.isDisabled })}"
+        data-sp-checkbox-indicator
+      ></span>
       ${labelContent}
     </label>`;
   }
@@ -1321,9 +1415,6 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
   get nativeInput() {
     return this.querySelector("[data-sp-radio-native]");
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   get visibleLabelFallback() {
     const trimmedLabel = this.label?.trim();
     return trimmedLabel ? trimmedLabel : void 0;
@@ -1366,7 +1457,8 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? lit.html`<span
             class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
             data-sp-radio-label-fallback
-          >${this.visibleLabelFallback}</span>` : lit.nothing;
+            >${this.visibleLabelFallback}</span
+          >` : lit.nothing;
     return lit.html`<label data-sp-radio-label>
       <input
         aria-busy="${this.loading ? "true" : "false"}"
@@ -1388,7 +1480,10 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
         @change="${this.handleChange}"
         @input="${this.handleInput}"
       />
-      <span class="sp-radio-indicator" data-sp-radio-indicator></span>
+      <span
+        class="${spectreUi.getRadioClasses({ checked: this.checked ?? false, disabled: this.isDisabled })}"
+        data-sp-radio-indicator
+      ></span>
       ${labelContent}
     </label>`;
   }
@@ -1417,11 +1512,15 @@ var SpectreLabelElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
     this.disabled = false;
+    this.required = false;
   }
   willUpdate(changedProperties) {
     if (changedProperties.has("disabled") && this.disabled == null) {
       this.disabled = false;
     }
+    if (changedProperties.has("required") && this.required == null) {
+      this.required = false;
+    }
   }
   get isDisabled() {
     return this.disabled ?? false;
@@ -1459,7 +1558,7 @@ var SpectreLabelElement = class extends SpectreProjectableElement {
       aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
-      class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
+      class="${spectreUi.getLabelClasses({ disabled: this.isDisabled, required: this.required ?? false })}"
       data-sp-label-native
       for="${ifDefined_js.ifDefined(this.htmlFor || void 0)}"
       id="${ifDefined_js.ifDefined(this.id || void 0)}"
@@ -1471,7 +1570,8 @@ var SpectreLabelElement = class extends SpectreProjectableElement {
 };
 SpectreLabelElement.properties = {
   disabled: { type: Boolean, reflect: true },
-  htmlFor: { attribute: "for", type: String, reflect: true }
+  htmlFor: { attribute: "for", type: String, reflect: true },
+  required: { type: Boolean, reflect: true }
 };
 function defineSpectreLabel(tagName = "sp-label") {
   const existingElement = customElements.get(tagName);
@@ -1523,9 +1623,6 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
     const trimmedLegend = this.legend?.trim();
     return trimmedLegend ? trimmedLegend : void 0;
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   getContentContainer() {
     return this.querySelector("[data-sp-fieldset-native]");
   }
@@ -1557,6 +1654,10 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
     this.getContentContainer()?.blur();
   }
   render() {
+    const legendClasses = spectreUi.getFieldsetLegendClasses();
+    const legendContent = this.visibleLegend ? lit.html`<legend class="${legendClasses}" data-sp-fieldset-legend>
+          ${this.visibleLegend}
+        </legend>` : lit.nothing;
     return lit.html`<fieldset
       aria-busy="${this.loading ? "true" : "false"}"
       aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
@@ -1565,6 +1666,7 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
       autocapitalize="${ifDefined_js.ifDefined(this.autocapitalize || void 0)}"
       ?autofocus="${this.autofocus}"
+      class="${spectreUi.getFieldsetClasses({ disabled: this.isDisabled })}"
       data-sp-fieldset-native
       ?disabled="${this.isDisabled}"
       form="${ifDefined_js.ifDefined(this.form || void 0)}"
@@ -1573,10 +1675,7 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
       spellcheck="${ifDefined_js.ifDefined(this.getAttribute("spellcheck") ?? void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
     >
-      ${this.visibleLegend ? lit.html`<legend
-            class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
-            data-sp-fieldset-legend
-          >${this.visibleLegend}</legend>` : lit.nothing}
+      ${legendContent}
       ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
     </fieldset>`;
   }
@@ -1648,7 +1747,7 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
   }
   get badgeClasses() {
     return spectreUi.getBadgeClasses({
-      disabled: this.disabled ?? false,
+      disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
       loading: this.loading ?? false,
       size: this.size,
@@ -1657,12 +1756,14 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
   }
   render() {
     return lit.html`<span
+      aria-busy="${this.loading ? "true" : "false"}"
       aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
       class="${this.badgeClasses}"
       data-sp-badge-native
       id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="${ifDefined_js.ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
     >
       ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
@@ -1738,7 +1839,7 @@ var SpectreCardElement = class extends SpectreProjectableElement {
   }
   get cardClasses() {
     return spectreUi.getCardClasses({
-      disabled: this.disabled ?? false,
+      disabled: this.isDisabled,
       fullHeight: this.fullHeight ?? false,
       interactive: this.interactive ?? false,
       loading: this.loading ?? false,
@@ -1748,12 +1849,14 @@ var SpectreCardElement = class extends SpectreProjectableElement {
   }
   render() {
     return lit.html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
       aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
       class="${this.cardClasses}"
       data-sp-card-native
       id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="${ifDefined_js.ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
     >
       ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
@@ -1834,7 +1937,7 @@ var SpectreIconBoxElement = class extends SpectreProjectableElement {
   }
   get iconBoxClasses() {
     return spectreUi.getIconBoxClasses({
-      disabled: this.disabled ?? false,
+      disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
       interactive: this.interactive ?? false,
       loading: this.loading ?? false,
@@ -1845,12 +1948,14 @@ var SpectreIconBoxElement = class extends SpectreProjectableElement {
   }
   render() {
     return lit.html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
       aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
       class="${this.iconBoxClasses}"
       data-sp-icon-box-native
       id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="${ifDefined_js.ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
     >
       ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
@@ -1916,7 +2021,7 @@ var SpectreRatingElement = class extends SpectreBaseElement {
   }
   get ratingClasses() {
     return spectreUi.getRatingClasses({
-      disabled: this.disabled ?? false,
+      disabled: this.isDisabled,
       loading: this.loading ?? false,
       size: this.size
     });
@@ -1935,13 +2040,18 @@ var SpectreRatingElement = class extends SpectreBaseElement {
   renderStars() {
     const stars = [];
     for (let i = 1; i <= this.effectiveMax; i++) {
-      stars.push(lit.html`<span class="${spectreUi.getRatingStarClasses(i <= this.effectiveValue)}"></span>`);
+      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-busy="${this.loading ? "true" : "false"}"
       aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${this.computedAriaLabel}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
@@ -1952,7 +2062,10 @@ var SpectreRatingElement = class extends SpectreBaseElement {
       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}
+      ${trimmedLabel ? lit.html`<span
+              class="${spectreUi.getRatingTextClasses({ disabled: this.isDisabled })}"
+              >${trimmedLabel}</span
+            >` : lit.nothing}
     </div>`;
   }
 };
@@ -2022,7 +2135,7 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
   }
   get testimonialClasses() {
     return spectreUi.getTestimonialClasses({
-      disabled: this.disabled ?? false,
+      disabled: this.isDisabled,
       fullHeight: this.fullHeight ?? false,
       interactive: this.interactive ?? false,
       loading: this.loading ?? false,
@@ -2031,12 +2144,14 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
   }
   render() {
     return lit.html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
       aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
       class="${this.testimonialClasses}"
       data-sp-testimonial-native
       id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="${ifDefined_js.ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
     >
       ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
@@ -2058,6 +2173,719 @@ function defineSpectreTestimonial(tagName = "sp-testimonial") {
   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 spectreUi.getAlertClasses({
+      disabled: this.isDisabled,
+      dismissed: this.dismissed ?? false,
+      fullWidth: this.fullWidth ?? false,
+      loading: this.loading ?? false,
+      size: this.size,
+      variant: this.variant
+    });
+  }
+  render() {
+    return lit.html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.alertClasses}"
+      data-sp-alert-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="alert"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.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 spectreUi.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
+    });
+  }
+  render() {
+    return lit.html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.avatarClasses}"
+      data-sp-avatar-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="${ifDefined_js.ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.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 spectreUi.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 lit.html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${this.computedAriaLabel}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.spinnerClasses}"
+      data-sp-spinner-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="status"
+      title="${ifDefined_js.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 spectreUi.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
+    });
+  }
+  render() {
+    return lit.html`<span
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.tagClasses}"
+      data-sp-tag-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="${ifDefined_js.ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.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 spectreUi.getPricingCardClasses({
+      disabled: this.isDisabled,
+      featured: this.featured ?? false,
+      fullHeight: this.fullHeight ?? false,
+      interactive: this.interactive ?? false,
+      loading: this.loading ?? false
+    });
+  }
+  render() {
+    return lit.html`<div
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.pricingCardClasses}"
+      data-sp-pricing-card-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="${ifDefined_js.ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.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;
+}
+var SpectreContainerElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.maxWidth = void 0;
+  }
+  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-container-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-container-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("maxWidth") && this.maxWidth != null && !isContainerMaxWidth(this.maxWidth)) {
+      this.maxWidth = void 0;
+    }
+  }
+  get containerClasses() {
+    return spectreUi.getContainerClasses(
+      this.maxWidth != null ? { maxWidth: this.maxWidth } : {}
+    );
+  }
+  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.containerClasses}"
+      data-sp-container-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </div>`;
+  }
+};
+SpectreContainerElement.properties = {
+  maxWidth: { attribute: "max-width", type: String, reflect: true }
+};
+function defineSpectreContainer(tagName = "sp-container") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreContainerElement);
+  return SpectreContainerElement;
+}
+var SpectreGridElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.columns = 1;
+    this.gap = "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-grid-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-grid-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("columns")) {
+      const normalized = normalizeInt(this.columns, void 0, 1);
+      this.columns = normalized != null && isGridColumns(normalized) ? normalized : 1;
+    }
+    if (changedProperties.has("gap") && (this.gap == null || !isGridGap(this.gap))) {
+      this.gap = "md";
+    }
+  }
+  get gridClasses() {
+    return spectreUi.getGridClasses({
+      columns: this.columns,
+      gap: this.gap
+    });
+  }
+  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.gridClasses}"
+      data-sp-grid-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </div>`;
+  }
+};
+SpectreGridElement.properties = {
+  columns: { type: Number, reflect: true },
+  gap: { type: String, reflect: true }
+};
+function defineSpectreGrid(tagName = "sp-grid") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreGridElement);
+  return SpectreGridElement;
+}
+var SpectreSectionElement = class extends SpectreProjectableElement {
+  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-section-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-section-native");
+  }
+  get sectionClasses() {
+    return spectreUi.getSectionClasses({});
+  }
+  render() {
+    return lit.html`<section
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.sectionClasses}"
+      data-sp-section-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </section>`;
+  }
+};
+function defineSpectreSection(tagName = "sp-section") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreSectionElement);
+  return SpectreSectionElement;
+}
+var SpectreStackElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.align = "center";
+    this.basis = void 0;
+    this.direction = "vertical";
+  }
+  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-stack-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-stack-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("direction") && (this.direction == null || !isStackDirection(this.direction))) {
+      this.direction = "vertical";
+    }
+    if (changedProperties.has("basis") && this.basis != null && !isStackBasis(this.basis)) {
+      this.basis = void 0;
+    }
+    if (changedProperties.has("align") && (this.align == null || !isStackAlign(this.align))) {
+      this.align = "center";
+    }
+  }
+  get stackClasses() {
+    return spectreUi.getStackClasses({
+      align: this.align,
+      direction: this.direction,
+      ...this.basis != null ? { basis: this.basis } : {}
+    });
+  }
+  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.stackClasses}"
+      data-sp-stack-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </div>`;
+  }
+};
+SpectreStackElement.properties = {
+  align: { type: String, reflect: true },
+  basis: { type: String, reflect: true },
+  direction: { type: String, reflect: true }
+};
+function defineSpectreStack(tagName = "sp-stack") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreStackElement);
+  return SpectreStackElement;
+}
 
 // src/index.ts
 function defineSpectreComponents() {
@@ -2074,46 +2902,87 @@ function defineSpectreComponents() {
   defineSpectreIconBox();
   defineSpectreRating();
   defineSpectreTestimonial();
+  defineSpectreAlert();
+  defineSpectreAvatar();
+  defineSpectreSpinner();
+  defineSpectreTag();
+  defineSpectrePricingCard();
+  defineSpectreContainer();
+  defineSpectreGrid();
+  defineSpectreSection();
+  defineSpectreStack();
 }
 
+exports.SpectreAlertElement = SpectreAlertElement;
+exports.SpectreAvatarElement = SpectreAvatarElement;
 exports.SpectreBadgeElement = SpectreBadgeElement;
 exports.SpectreButtonElement = SpectreButtonElement;
 exports.SpectreCardElement = SpectreCardElement;
 exports.SpectreCheckboxElement = SpectreCheckboxElement;
+exports.SpectreContainerElement = SpectreContainerElement;
 exports.SpectreFieldsetElement = SpectreFieldsetElement;
+exports.SpectreGridElement = SpectreGridElement;
 exports.SpectreIconBoxElement = SpectreIconBoxElement;
 exports.SpectreInputElement = SpectreInputElement;
 exports.SpectreLabelElement = SpectreLabelElement;
+exports.SpectrePricingCardElement = SpectrePricingCardElement;
 exports.SpectreRadioElement = SpectreRadioElement;
 exports.SpectreRatingElement = SpectreRatingElement;
+exports.SpectreSectionElement = SpectreSectionElement;
 exports.SpectreSelectElement = SpectreSelectElement;
+exports.SpectreSpinnerElement = SpectreSpinnerElement;
+exports.SpectreStackElement = SpectreStackElement;
+exports.SpectreTagElement = SpectreTagElement;
 exports.SpectreTestimonialElement = SpectreTestimonialElement;
 exports.SpectreTextareaElement = SpectreTextareaElement;
+exports.defineSpectreAlert = defineSpectreAlert;
+exports.defineSpectreAvatar = defineSpectreAvatar;
 exports.defineSpectreBadge = defineSpectreBadge;
 exports.defineSpectreButton = defineSpectreButton;
 exports.defineSpectreCard = defineSpectreCard;
 exports.defineSpectreCheckbox = defineSpectreCheckbox;
 exports.defineSpectreComponents = defineSpectreComponents;
+exports.defineSpectreContainer = defineSpectreContainer;
 exports.defineSpectreFieldset = defineSpectreFieldset;
+exports.defineSpectreGrid = defineSpectreGrid;
 exports.defineSpectreIconBox = defineSpectreIconBox;
 exports.defineSpectreInput = defineSpectreInput;
 exports.defineSpectreLabel = defineSpectreLabel;
+exports.defineSpectrePricingCard = defineSpectrePricingCard;
 exports.defineSpectreRadio = defineSpectreRadio;
 exports.defineSpectreRating = defineSpectreRating;
+exports.defineSpectreSection = defineSpectreSection;
 exports.defineSpectreSelect = defineSpectreSelect;
+exports.defineSpectreSpinner = defineSpectreSpinner;
+exports.defineSpectreStack = defineSpectreStack;
+exports.defineSpectreTag = defineSpectreTag;
 exports.defineSpectreTestimonial = defineSpectreTestimonial;
 exports.defineSpectreTextarea = defineSpectreTextarea;
+exports.spectreAlertSizes = spectreInputSizes;
+exports.spectreAlertVariants = spectreAlertVariants;
+exports.spectreAvatarShapes = spectreAvatarShapes;
+exports.spectreAvatarSizes = spectreAvatarSizes;
 exports.spectreBadgeSizes = spectreInputSizes;
 exports.spectreBadgeVariants = spectreBadgeVariants;
 exports.spectreButtonSizes = spectreInputSizes;
 exports.spectreButtonTypes = spectreButtonTypes;
 exports.spectreButtonVariants = spectreButtonVariants;
 exports.spectreCardVariants = spectreCardVariants;
+exports.spectreContainerMaxWidths = spectreContainerMaxWidths;
+exports.spectreGridColumns = spectreGridColumns;
+exports.spectreGridGaps = spectreGridGaps;
 exports.spectreIconBoxSizes = spectreInputSizes;
 exports.spectreIconBoxVariants = spectreIconBoxVariants;
 exports.spectreInputSizes = spectreInputSizes;
 exports.spectreInputTypes = spectreInputTypes;
 exports.spectreRatingSizes = spectreInputSizes;
+exports.spectreSpinnerSizes = spectreInputSizes;
+exports.spectreSpinnerVariants = spectreSpinnerVariants;
+exports.spectreStackAligns = spectreStackAligns;
+exports.spectreStackBases = spectreStackBases;
+exports.spectreStackDirections = spectreStackDirections;
+exports.spectreTagSizes = spectreInputSizes;
+exports.spectreTagVariants = spectreTagVariants;
 exports.spectreTestimonialVariants = spectreTestimonialVariants;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map