@phcdevworks/spectre-components 1.5.0 → 1.6.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { getButtonClasses, getInputLabelClasses, getInputClasses, getBadgeClasses, getCardClasses, getIconBoxClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialClasses, getAlertClasses, getAvatarClasses, getSpinnerClasses, getTagClasses, getPricingCardClasses } from '@phcdevworks/spectre-ui';
+import { getButtonClasses, getInputLabelClasses, getInputClasses, getTextareaClasses, getSelectClasses, getCheckboxClasses, getRadioClasses, getLabelClasses, getFieldsetLegendClasses, getFieldsetClasses, getBadgeClasses, getCardClasses, getIconBoxClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialClasses, getAlertClasses, getAvatarClasses, getSpinnerClasses, getTagClasses, getPricingCardClasses, getContainerClasses, getGridClasses, getStackClasses, getSectionClasses } 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';
@@ -142,6 +142,34 @@ 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) {
     return fallback;
@@ -398,6 +426,16 @@ var SpectreBaseElement = class extends 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 = {};
 
@@ -565,9 +603,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;
@@ -583,7 +618,8 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
       return html`<span
         class="${getInputLabelClasses({ disabled: this.isDisabled })}"
         data-sp-button-loading-label
-      >${this.loadingLabel}</span>`;
+        >${this.loadingLabel}</span
+      >`;
     }
     if (this.hasProjectedContent) {
       return this.projectedContent;
@@ -591,7 +627,8 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     return this.visibleLabelFallback ? html`<span
           class="${getInputLabelClasses({ disabled: this.isDisabled })}"
           data-sp-button-label-fallback
-        >${this.visibleLabelFallback}</span>` : nothing;
+          >${this.visibleLabelFallback}</span
+        >` : nothing;
   }
   render() {
     return html`<button
@@ -731,9 +768,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]");
   }
@@ -910,16 +944,15 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
     }
   }
   get textareaClasses() {
-    return getInputClasses({
+    return 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]");
   }
@@ -1105,16 +1138,15 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
     }
   }
   get selectClasses() {
-    return getInputClasses({
+    return 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;
@@ -1243,9 +1275,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;
@@ -1268,7 +1297,8 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
     const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? html`<span
             class="${getInputLabelClasses({ disabled: this.isDisabled })}"
             data-sp-checkbox-label-fallback
-          >${this.visibleLabelFallback}</span>` : nothing;
+            >${this.visibleLabelFallback}</span
+          >` : nothing;
     return html`<label data-sp-checkbox-label>
       <input
         aria-busy="${this.loading ? "true" : "false"}"
@@ -1290,7 +1320,10 @@ var SpectreCheckboxElement = class extends SpectreProjectableElement {
         @change="${this.handleChange}"
         @input="${this.handleInput}"
       />
-      <span class="sp-checkbox-indicator" data-sp-checkbox-indicator></span>
+      <span
+        class="${getCheckboxClasses({ checked: this.checked ?? false, disabled: this.isDisabled })}"
+        data-sp-checkbox-indicator
+      ></span>
       ${labelContent}
     </label>`;
   }
@@ -1380,9 +1413,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;
@@ -1425,7 +1455,8 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? html`<span
             class="${getInputLabelClasses({ disabled: this.isDisabled })}"
             data-sp-radio-label-fallback
-          >${this.visibleLabelFallback}</span>` : nothing;
+            >${this.visibleLabelFallback}</span
+          >` : nothing;
     return html`<label data-sp-radio-label>
       <input
         aria-busy="${this.loading ? "true" : "false"}"
@@ -1447,7 +1478,10 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
         @change="${this.handleChange}"
         @input="${this.handleInput}"
       />
-      <span class="sp-radio-indicator" data-sp-radio-indicator></span>
+      <span
+        class="${getRadioClasses({ checked: this.checked ?? false, disabled: this.isDisabled })}"
+        data-sp-radio-indicator
+      ></span>
       ${labelContent}
     </label>`;
   }
@@ -1476,11 +1510,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;
@@ -1518,7 +1556,7 @@ var SpectreLabelElement = class extends SpectreProjectableElement {
       aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
-      class="${getInputLabelClasses({ disabled: this.isDisabled })}"
+      class="${getLabelClasses({ disabled: this.isDisabled, required: this.required ?? false })}"
       data-sp-label-native
       for="${ifDefined(this.htmlFor || void 0)}"
       id="${ifDefined(this.id || void 0)}"
@@ -1530,7 +1568,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);
@@ -1582,9 +1621,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]");
   }
@@ -1616,6 +1652,10 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
     this.getContentContainer()?.blur();
   }
   render() {
+    const legendClasses = getFieldsetLegendClasses();
+    const legendContent = this.visibleLegend ? html`<legend class="${legendClasses}" data-sp-fieldset-legend>
+          ${this.visibleLegend}
+        </legend>` : nothing;
     return html`<fieldset
       aria-busy="${this.loading ? "true" : "false"}"
       aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
@@ -1624,6 +1664,7 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
       aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
       autocapitalize="${ifDefined(this.autocapitalize || void 0)}"
       ?autofocus="${this.autofocus}"
+      class="${getFieldsetClasses({ disabled: this.isDisabled })}"
       data-sp-fieldset-native
       ?disabled="${this.isDisabled}"
       form="${ifDefined(this.form || void 0)}"
@@ -1632,10 +1673,7 @@ var SpectreFieldsetElement = class extends SpectreProjectableElement {
       spellcheck="${ifDefined(this.getAttribute("spellcheck") ?? void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
-      ${this.visibleLegend ? html`<legend
-            class="${getInputLabelClasses({ disabled: this.isDisabled })}"
-            data-sp-fieldset-legend
-          >${this.visibleLegend}</legend>` : nothing}
+      ${legendContent}
       ${this.hasProjectedContent ? this.projectedContent : nothing}
     </fieldset>`;
   }
@@ -1714,9 +1752,6 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
       variant: this.variant
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   render() {
     return html`<span
       aria-busy="${this.loading ? "true" : "false"}"
@@ -1726,6 +1761,7 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
       class="${this.badgeClasses}"
       data-sp-badge-native
       id="${ifDefined(this.id || void 0)}"
+      role="${ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
       ${this.hasProjectedContent ? this.projectedContent : nothing}
@@ -1809,9 +1845,6 @@ var SpectreCardElement = class extends SpectreProjectableElement {
       variant: this.variant
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   render() {
     return html`<div
       aria-busy="${this.loading ? "true" : "false"}"
@@ -1821,6 +1854,7 @@ var SpectreCardElement = class extends SpectreProjectableElement {
       class="${this.cardClasses}"
       data-sp-card-native
       id="${ifDefined(this.id || void 0)}"
+      role="${ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
       ${this.hasProjectedContent ? this.projectedContent : nothing}
@@ -1910,9 +1944,6 @@ var SpectreIconBoxElement = class extends SpectreProjectableElement {
       variant: this.variant
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   render() {
     return html`<div
       aria-busy="${this.loading ? "true" : "false"}"
@@ -1922,6 +1953,7 @@ var SpectreIconBoxElement = class extends SpectreProjectableElement {
       class="${this.iconBoxClasses}"
       data-sp-icon-box-native
       id="${ifDefined(this.id || void 0)}"
+      role="${ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
       ${this.hasProjectedContent ? this.projectedContent : nothing}
@@ -1992,9 +2024,6 @@ var SpectreRatingElement = class extends SpectreBaseElement {
       size: this.size
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   get effectiveMax() {
     return this.max ?? 5;
   }
@@ -2009,7 +2038,11 @@ var SpectreRatingElement = class extends SpectreBaseElement {
   renderStars() {
     const stars = [];
     for (let i = 1; i <= this.effectiveMax; i++) {
-      stars.push(html`<span class="${getRatingStarClasses(i <= this.effectiveValue)}"></span>`);
+      stars.push(
+        html`<span
+          class="${getRatingStarClasses(i <= this.effectiveValue)}"
+        ></span>`
+      );
     }
     return stars;
   }
@@ -2027,7 +2060,10 @@ var SpectreRatingElement = class extends SpectreBaseElement {
       title="${ifDefined(this.title || void 0)}"
     >
       <div class="${getRatingStarsClasses()}">${this.renderStars()}</div>
-      ${trimmedLabel ? html`<span class="${getRatingTextClasses({ disabled: this.isDisabled })}">${trimmedLabel}</span>` : nothing}
+      ${trimmedLabel ? html`<span
+              class="${getRatingTextClasses({ disabled: this.isDisabled })}"
+              >${trimmedLabel}</span
+            >` : nothing}
     </div>`;
   }
 };
@@ -2104,9 +2140,6 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
       variant: this.variant
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   render() {
     return html`<div
       aria-busy="${this.loading ? "true" : "false"}"
@@ -2116,6 +2149,7 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
       class="${this.testimonialClasses}"
       data-sp-testimonial-native
       id="${ifDefined(this.id || void 0)}"
+      role="${ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
       ${this.hasProjectedContent ? this.projectedContent : nothing}
@@ -2199,9 +2233,6 @@ var SpectreAlertElement = class extends SpectreProjectableElement {
       variant: this.variant
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   render() {
     return html`<div
       aria-busy="${this.loading ? "true" : "false"}"
@@ -2301,9 +2332,6 @@ var SpectreAvatarElement = class extends SpectreProjectableElement {
       size: this.size
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   render() {
     return html`<div
       aria-busy="${this.loading ? "true" : "false"}"
@@ -2313,6 +2341,7 @@ var SpectreAvatarElement = class extends SpectreProjectableElement {
       class="${this.avatarClasses}"
       data-sp-avatar-native
       id="${ifDefined(this.id || void 0)}"
+      role="${ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
       ${this.hasProjectedContent ? this.projectedContent : nothing}
@@ -2480,9 +2509,6 @@ var SpectreTagElement = class extends SpectreProjectableElement {
       variant: this.variant
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   render() {
     return html`<span
       aria-busy="${this.loading ? "true" : "false"}"
@@ -2492,6 +2518,7 @@ var SpectreTagElement = class extends SpectreProjectableElement {
       class="${this.tagClasses}"
       data-sp-tag-native
       id="${ifDefined(this.id || void 0)}"
+      role="${ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
       ${this.hasProjectedContent ? this.projectedContent : nothing}
@@ -2573,9 +2600,6 @@ var SpectrePricingCardElement = class extends SpectreProjectableElement {
       loading: this.loading ?? false
     });
   }
-  get isDisabled() {
-    return (this.disabled ?? false) || (this.loading ?? false);
-  }
   render() {
     return html`<div
       aria-busy="${this.loading ? "true" : "false"}"
@@ -2585,6 +2609,7 @@ var SpectrePricingCardElement = class extends SpectreProjectableElement {
       class="${this.pricingCardClasses}"
       data-sp-pricing-card-native
       id="${ifDefined(this.id || void 0)}"
+      role="${ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
       ${this.hasProjectedContent ? this.projectedContent : nothing}
@@ -2606,6 +2631,259 @@ function defineSpectrePricingCard(tagName = "sp-pricing-card") {
   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 getContainerClasses(
+      this.maxWidth != null ? { maxWidth: this.maxWidth } : {}
+    );
+  }
+  render() {
+    return html`<div
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.containerClasses}"
+      data-sp-container-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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 getGridClasses({
+      columns: this.columns,
+      gap: this.gap
+    });
+  }
+  render() {
+    return html`<div
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.gridClasses}"
+      data-sp-grid-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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 getSectionClasses({});
+  }
+  render() {
+    return html`<section
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.sectionClasses}"
+      data-sp-section-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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 getStackClasses({
+      align: this.align,
+      direction: this.direction,
+      ...this.basis != null ? { basis: this.basis } : {}
+    });
+  }
+  render() {
+    return html`<div
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.stackClasses}"
+      data-sp-stack-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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() {
@@ -2627,8 +2905,12 @@ function defineSpectreComponents() {
   defineSpectreSpinner();
   defineSpectreTag();
   defineSpectrePricingCard();
+  defineSpectreContainer();
+  defineSpectreGrid();
+  defineSpectreSection();
+  defineSpectreStack();
 }
 
-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 };
+export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreContainerElement, SpectreFieldsetElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextareaElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreFieldset, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, defineSpectreTextarea, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreContainerMaxWidths, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map