@phcdevworks/spectre-components 1.5.0 → 1.7.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, getDropdownClasses, getDropdownMenuClasses, getModalOverlayClasses, getModalClasses, getNavClasses, getSidebarClasses, getSidebarToggleClasses, getSidebarBackdropClasses, getToastClasses, getToastIconClasses, getTooltipClasses, 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,65 @@ 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);
+}
+var spectreDropdownPlacements = [
+  "bottom-start",
+  "bottom-end",
+  "top-start",
+  "top-end"
+];
+function isDropdownPlacement(value) {
+  return spectreDropdownPlacements.includes(
+    value
+  );
+}
+var spectreToastVariants = [
+  "info",
+  "success",
+  "warning",
+  "danger"
+];
+function isToastVariant(value) {
+  return spectreToastVariants.includes(value);
+}
+var spectreTooltipPlacements = [
+  "top",
+  "bottom",
+  "left",
+  "right"
+];
+function isTooltipPlacement(value) {
+  return spectreTooltipPlacements.includes(
+    value
+  );
+}
 function normalizeInt(value, fallback, min = 0) {
   if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
     return fallback;
@@ -398,6 +457,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 +634,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 +649,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 +658,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 +799,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 +975,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 +1169,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 +1306,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 +1328,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 +1351,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 +1444,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 +1486,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 +1509,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 +1541,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 +1587,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 +1599,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 +1652,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 +1683,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 +1695,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 +1704,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 +1783,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 +1792,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 +1876,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 +1885,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 +1975,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 +1984,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 +2055,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 +2069,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 +2091,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 +2171,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 +2180,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 +2264,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 +2363,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 +2372,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 +2540,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 +2549,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 +2631,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 +2640,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 +2662,1131 @@ 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;
+}
+var SpectreDropdownElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+    this.open = false;
+    this.placement = "bottom-start";
+    this.triggerLabel = "Toggle menu";
+    this.triggerContent = [];
+    this.menuContent = [];
+    this.handleDocumentClick = (event) => {
+      if (!this.open) {
+        return;
+      }
+      if (!event.composedPath().includes(this)) {
+        this.close();
+      }
+    };
+    this.handleDocumentKeydown = (event) => {
+      if (event.key === "Escape" && this.open) {
+        this.close();
+        this.triggerElement?.focus();
+      }
+    };
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-dropdown-menu") || el.hasAttribute("data-sp-dropdown-trigger");
+  }
+  syncProjectedContent() {
+    const nextTriggerContent = [];
+    const nextMenuContent = [];
+    this.childNodes.forEach((node) => {
+      if (this.isInternalNode(node)) {
+        return;
+      }
+      const isTriggerSlot = node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "trigger";
+      if (isTriggerSlot) {
+        nextTriggerContent.push(node);
+      } else {
+        nextMenuContent.push(node);
+      }
+    });
+    const changed = nextTriggerContent.length !== this.triggerContent.length || nextTriggerContent.some((n, i) => n !== this.triggerContent[i]) || nextMenuContent.length !== this.menuContent.length || nextMenuContent.some((n, i) => n !== this.menuContent[i]);
+    if (changed) {
+      this.triggerContent = nextTriggerContent;
+      this.menuContent = nextMenuContent;
+    }
+    return changed;
+  }
+  get hasTriggerContent() {
+    return hasMeaningfulContent(this.triggerContent);
+  }
+  get hasMenuContent() {
+    return hasMeaningfulContent(this.menuContent);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.syncProjectedContent();
+    this.startContentObserver();
+    document.addEventListener("click", this.handleDocumentClick);
+    document.addEventListener("keydown", this.handleDocumentKeydown);
+  }
+  disconnectedCallback() {
+    this.stopContentObserver();
+    document.removeEventListener("click", this.handleDocumentClick);
+    document.removeEventListener("keydown", this.handleDocumentKeydown);
+    super.disconnectedCallback();
+  }
+  update(changedProperties) {
+    this.stopContentObserver();
+    super.update(changedProperties);
+    this.startContentObserver();
+  }
+  startContentObserver() {
+    if (this.contentObserver) {
+      return;
+    }
+    this.contentObserver = new MutationObserver(() => {
+      if (this.syncProjectedContent()) {
+        this.requestUpdate();
+      }
+    });
+    this.contentObserver.observe(this, { childList: true });
+  }
+  stopContentObserver() {
+    this.contentObserver?.disconnect();
+    this.contentObserver = void 0;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("open") && this.open == null) {
+      this.open = false;
+    }
+    if (changedProperties.has("placement") && (this.placement == null || !isDropdownPlacement(this.placement))) {
+      this.placement = "bottom-start";
+    }
+    if (changedProperties.has("triggerLabel") && !this.triggerLabel) {
+      this.triggerLabel = "Toggle menu";
+    }
+  }
+  get triggerElement() {
+    return this.querySelector("[data-sp-dropdown-trigger]");
+  }
+  toggle() {
+    if (this.open) {
+      this.close();
+    } else {
+      this.openMenu();
+    }
+  }
+  openMenu() {
+    if (this.open) {
+      return;
+    }
+    this.open = true;
+    this.dispatchEvent(new CustomEvent("sp-open", { bubbles: true }));
+  }
+  close() {
+    if (!this.open) {
+      return;
+    }
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
+  }
+  get dropdownClasses() {
+    return getDropdownClasses({ fullWidth: this.fullWidth ?? false });
+  }
+  get menuClasses() {
+    return getDropdownMenuClasses({
+      open: this.open ?? false,
+      placement: this.placement
+    });
+  }
+  render() {
+    return html`<div
+      class="${this.dropdownClasses}"
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      <button
+        aria-expanded="${this.open ? "true" : "false"}"
+        aria-haspopup="true"
+        aria-label="${ifDefined(this.forwardedAriaLabel ?? this.triggerLabel)}"
+        class="sp-dropdown__trigger"
+        data-sp-dropdown-trigger
+        type="button"
+        @click="${() => this.toggle()}"
+      >
+        ${this.hasTriggerContent ? this.triggerContent : this.triggerLabel}
+      </button>
+      <div class="${this.menuClasses}" data-sp-dropdown-menu>
+        ${this.hasMenuContent ? this.menuContent : nothing}
+      </div>
+    </div>`;
+  }
+};
+SpectreDropdownElement.properties = {
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  open: { type: Boolean, reflect: true },
+  placement: { type: String, reflect: true },
+  triggerLabel: { attribute: "trigger-label", type: String }
+};
+function defineSpectreDropdown(tagName = "sp-dropdown") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreDropdownElement);
+  return SpectreDropdownElement;
+}
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+var SpectreModalElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+    this.open = false;
+    this.previouslyFocusedElement = null;
+    this.handleDocumentKeydown = (event) => {
+      if (!this.open) {
+        return;
+      }
+      if (event.key === "Escape") {
+        this.close();
+        return;
+      }
+      if (event.key === "Tab") {
+        this.trapFocus(event);
+      }
+    };
+  }
+  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-modal-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-modal-native") || el.hasAttribute("data-sp-modal-overlay");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("open") && this.open == null) {
+      this.open = false;
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (!changedProperties.has("open")) {
+      return;
+    }
+    if (this.open) {
+      this.previouslyFocusedElement = document.activeElement;
+      this.focusFirstElement();
+    } else if (this.previouslyFocusedElement) {
+      this.previouslyFocusedElement.focus();
+      this.previouslyFocusedElement = null;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("keydown", this.handleDocumentKeydown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this.handleDocumentKeydown);
+    super.disconnectedCallback();
+  }
+  get modalElement() {
+    return this.querySelector("[data-sp-modal-native]");
+  }
+  get focusableElements() {
+    const modal = this.modalElement;
+    if (!modal) {
+      return [];
+    }
+    return Array.from(modal.querySelectorAll(FOCUSABLE_SELECTOR));
+  }
+  focusFirstElement() {
+    const [first] = this.focusableElements;
+    (first ?? this.modalElement)?.focus();
+  }
+  trapFocus(event) {
+    const focusable = this.focusableElements;
+    if (focusable.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last?.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first?.focus();
+    }
+  }
+  close() {
+    if (!this.open) {
+      return;
+    }
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
+  }
+  get overlayClasses() {
+    return getModalOverlayClasses({ open: this.open ?? false });
+  }
+  get modalClasses() {
+    return getModalClasses({
+      open: this.open ?? false,
+      fullWidth: this.fullWidth ?? false
+    });
+  }
+  render() {
+    const isHidden = !this.open;
+    return html`<div
+      aria-hidden="${ifDefined(isHidden ? "true" : void 0)}"
+      class="${this.overlayClasses}"
+      data-sp-modal-overlay
+      @click="${(event) => {
+      if (event.target === event.currentTarget) {
+        this.close();
+      }
+    }}"
+    >
+      <div
+        aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-hidden="${ifDefined(isHidden ? "true" : void 0)}"
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+        aria-modal="true"
+        class="${this.modalClasses}"
+        data-sp-modal-native
+        id="${ifDefined(this.id || void 0)}"
+        role="dialog"
+        tabindex="-1"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        ${this.hasProjectedContent ? this.projectedContent : nothing}
+      </div>
+    </div>`;
+  }
+};
+SpectreModalElement.properties = {
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  open: { type: Boolean, reflect: true }
+};
+function defineSpectreModal(tagName = "sp-modal") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreModalElement);
+  return SpectreModalElement;
+}
+var SpectreNavElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.bordered = false;
+    this.fullWidth = false;
+    this.sticky = 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-nav-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-nav-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("bordered") && this.bordered == null) {
+      this.bordered = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("sticky") && this.sticky == null) {
+      this.sticky = false;
+    }
+  }
+  get navClasses() {
+    return getNavClasses({
+      bordered: this.bordered ?? false,
+      fullWidth: this.fullWidth ?? false,
+      sticky: this.sticky ?? false
+    });
+  }
+  render() {
+    return html`<nav
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      class="${this.navClasses}"
+      data-sp-nav-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : nothing}
+    </nav>`;
+  }
+};
+SpectreNavElement.properties = {
+  bordered: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  sticky: { type: Boolean, reflect: true }
+};
+function defineSpectreNav(tagName = "sp-nav") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreNavElement);
+  return SpectreNavElement;
+}
+var SpectreSidebarElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.bordered = false;
+    this.open = false;
+    this.toggleLabel = "Toggle sidebar";
+    this.handleDocumentKeydown = (event) => {
+      if (event.key === "Escape" && this.open) {
+        this.close();
+      }
+    };
+  }
+  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-sidebar-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-sidebar-native") || el.hasAttribute("data-sp-sidebar-toggle") || el.hasAttribute("data-sp-sidebar-backdrop");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("bordered") && this.bordered == null) {
+      this.bordered = false;
+    }
+    if (changedProperties.has("open") && this.open == null) {
+      this.open = false;
+    }
+    if (changedProperties.has("toggleLabel") && !this.toggleLabel) {
+      this.toggleLabel = "Toggle sidebar";
+    }
+    if (changedProperties.has("open")) {
+      HTMLElement.prototype.setAttribute.call(
+        this,
+        "data-sidebar-open",
+        this.open ? "true" : "false"
+      );
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    HTMLElement.prototype.setAttribute.call(
+      this,
+      "data-sidebar-open",
+      this.open ? "true" : "false"
+    );
+    document.addEventListener("keydown", this.handleDocumentKeydown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this.handleDocumentKeydown);
+    super.disconnectedCallback();
+  }
+  toggle() {
+    if (this.open) {
+      this.close();
+    } else {
+      this.openSidebar();
+    }
+  }
+  openSidebar() {
+    if (this.open) {
+      return;
+    }
+    this.open = true;
+    this.dispatchEvent(new CustomEvent("sp-open", { bubbles: true }));
+  }
+  close() {
+    if (!this.open) {
+      return;
+    }
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
+  }
+  get sidebarClasses() {
+    return getSidebarClasses({ bordered: this.bordered ?? false });
+  }
+  render() {
+    return html`<button
+        aria-expanded="${this.open ? "true" : "false"}"
+        aria-label="${ifDefined(this.toggleLabel)}"
+        class="${getSidebarToggleClasses()}"
+        data-sp-sidebar-toggle
+        type="button"
+        @click="${() => this.toggle()}"
+      >
+        &#9776;
+      </button>
+      <div
+        class="${getSidebarBackdropClasses()}"
+        data-sp-sidebar-backdrop
+        @click="${() => this.close()}"
+      ></div>
+      <aside
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        class="${this.sidebarClasses}"
+        data-sp-sidebar-native
+        id="${ifDefined(this.id || void 0)}"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        ${this.hasProjectedContent ? this.projectedContent : nothing}
+      </aside>`;
+  }
+};
+SpectreSidebarElement.properties = {
+  bordered: { type: Boolean, reflect: true },
+  open: { type: Boolean, reflect: false },
+  toggleLabel: { attribute: "toggle-label", type: String }
+};
+function defineSpectreSidebar(tagName = "sp-sidebar") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreSidebarElement);
+  return SpectreSidebarElement;
+}
+var SpectreToastElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.dismissed = false;
+    this.fullWidth = false;
+    this.variant = "info";
+    this.iconContent = [];
+    this.bodyContent = [];
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-toast-native") || el.hasAttribute("data-sp-toast-icon");
+  }
+  syncProjectedContent() {
+    const nextIconContent = [];
+    const nextBodyContent = [];
+    this.childNodes.forEach((node) => {
+      if (this.isInternalNode(node)) {
+        return;
+      }
+      const isIconSlot = node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "icon";
+      if (isIconSlot) {
+        nextIconContent.push(node);
+      } else {
+        nextBodyContent.push(node);
+      }
+    });
+    const changed = nextIconContent.length !== this.iconContent.length || nextIconContent.some((n, i) => n !== this.iconContent[i]) || nextBodyContent.length !== this.bodyContent.length || nextBodyContent.some((n, i) => n !== this.bodyContent[i]);
+    if (changed) {
+      this.iconContent = nextIconContent;
+      this.bodyContent = nextBodyContent;
+    }
+    return changed;
+  }
+  get hasIconContent() {
+    return hasMeaningfulContent(this.iconContent);
+  }
+  get hasBodyContent() {
+    return hasMeaningfulContent(this.bodyContent);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.syncProjectedContent();
+    this.startContentObserver();
+  }
+  disconnectedCallback() {
+    this.stopContentObserver();
+    this.clearAutoDismissTimer();
+    super.disconnectedCallback();
+  }
+  update(changedProperties) {
+    this.stopContentObserver();
+    super.update(changedProperties);
+    this.startContentObserver();
+  }
+  startContentObserver() {
+    if (this.contentObserver) {
+      return;
+    }
+    this.contentObserver = new MutationObserver(() => {
+      if (this.syncProjectedContent()) {
+        this.requestUpdate();
+      }
+    });
+    this.contentObserver.observe(this, { childList: true });
+  }
+  stopContentObserver() {
+    this.contentObserver?.disconnect();
+    this.contentObserver = void 0;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("dismissed") && this.dismissed == null) {
+      this.dismissed = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("variant") && (this.variant == null || !isToastVariant(this.variant))) {
+      this.variant = "info";
+    }
+    if (changedProperties.has("autoDismiss")) {
+      this.autoDismiss = normalizeInt(this.autoDismiss, void 0, 0);
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("dismissed") || changedProperties.has("autoDismiss")) {
+      this.clearAutoDismissTimer();
+      if (!this.dismissed && this.autoDismiss) {
+        this.autoDismissTimer = setTimeout(() => {
+          this.dismiss();
+        }, this.autoDismiss);
+      }
+    }
+  }
+  clearAutoDismissTimer() {
+    if (this.autoDismissTimer) {
+      clearTimeout(this.autoDismissTimer);
+      this.autoDismissTimer = void 0;
+    }
+  }
+  show() {
+    if (!this.dismissed) {
+      return;
+    }
+    this.dismissed = false;
+    this.dispatchEvent(new CustomEvent("sp-show", { bubbles: true }));
+  }
+  dismiss() {
+    if (this.dismissed) {
+      return;
+    }
+    this.dismissed = true;
+    this.dispatchEvent(new CustomEvent("sp-dismiss", { bubbles: true }));
+  }
+  get toastClasses() {
+    return getToastClasses({
+      variant: this.variant,
+      dismissed: this.dismissed ?? false,
+      fullWidth: this.fullWidth ?? false
+    });
+  }
+  get iconClasses() {
+    return getToastIconClasses({ variant: this.variant });
+  }
+  render() {
+    return html`<div
+      aria-atomic="true"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-live="polite"
+      class="${this.toastClasses}"
+      data-sp-toast-native
+      id="${ifDefined(this.id || void 0)}"
+      role="status"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasIconContent ? html`<div class="${this.iconClasses}" data-sp-toast-icon>
+              ${this.iconContent}
+            </div>` : nothing}
+      ${this.hasBodyContent ? this.bodyContent : nothing}
+    </div>`;
+  }
+};
+SpectreToastElement.properties = {
+  autoDismiss: { attribute: "auto-dismiss", type: Number },
+  dismissed: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  variant: { type: String, reflect: true }
+};
+function defineSpectreToast(tagName = "sp-toast") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreToastElement);
+  return SpectreToastElement;
+}
+var SpectreTooltipElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.placement = "top";
+    this.visible = false;
+    this.triggerContent = [];
+    this.tooltipContent = [];
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-tooltip-native") || el.hasAttribute("data-sp-tooltip-trigger");
+  }
+  syncProjectedContent() {
+    const nextTooltipContent = [];
+    const nextTriggerContent = [];
+    this.childNodes.forEach((node) => {
+      if (this.isInternalNode(node)) {
+        return;
+      }
+      const isTooltipSlot = node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "tooltip";
+      if (isTooltipSlot) {
+        nextTooltipContent.push(node);
+      } else {
+        nextTriggerContent.push(node);
+      }
+    });
+    const changed = nextTooltipContent.length !== this.tooltipContent.length || nextTooltipContent.some((n, i) => n !== this.tooltipContent[i]) || nextTriggerContent.length !== this.triggerContent.length || nextTriggerContent.some((n, i) => n !== this.triggerContent[i]);
+    if (changed) {
+      this.tooltipContent = nextTooltipContent;
+      this.triggerContent = nextTriggerContent;
+    }
+    return changed;
+  }
+  get hasTooltipContent() {
+    return hasMeaningfulContent(this.tooltipContent);
+  }
+  connectedCallback() {
+    var _a, _b;
+    super.connectedCallback();
+    this.syncProjectedContent();
+    this.startContentObserver();
+    (_a = this.style).position || (_a.position = "relative");
+    (_b = this.style).display || (_b.display = "inline-block");
+  }
+  disconnectedCallback() {
+    this.stopContentObserver();
+    super.disconnectedCallback();
+  }
+  update(changedProperties) {
+    this.stopContentObserver();
+    super.update(changedProperties);
+    this.startContentObserver();
+  }
+  startContentObserver() {
+    if (this.contentObserver) {
+      return;
+    }
+    this.contentObserver = new MutationObserver(() => {
+      if (this.syncProjectedContent()) {
+        this.requestUpdate();
+      }
+    });
+    this.contentObserver.observe(this, { childList: true });
+  }
+  stopContentObserver() {
+    this.contentObserver?.disconnect();
+    this.contentObserver = void 0;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("placement") && (this.placement == null || !isTooltipPlacement(this.placement))) {
+      this.placement = "top";
+    }
+    if (changedProperties.has("visible") && this.visible == null) {
+      this.visible = false;
+    }
+  }
+  show() {
+    if (this.visible) {
+      return;
+    }
+    this.visible = true;
+    this.dispatchEvent(new CustomEvent("sp-show", { bubbles: true }));
+  }
+  hide() {
+    if (!this.visible) {
+      return;
+    }
+    this.visible = false;
+    this.dispatchEvent(new CustomEvent("sp-hide", { bubbles: true }));
+  }
+  get tooltipClasses() {
+    return getTooltipClasses({
+      placement: this.placement,
+      visible: this.visible ?? false
+    });
+  }
+  render() {
+    return html`<span
+        data-sp-tooltip-trigger
+        @focusin="${() => this.show()}"
+        @focusout="${() => this.hide()}"
+        @mouseenter="${() => this.show()}"
+        @mouseleave="${() => this.hide()}"
+      >
+        ${this.triggerContent}
+      </span>
+      <span
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        class="${this.tooltipClasses}"
+        data-sp-tooltip-native
+        id="${ifDefined(this.id || void 0)}"
+        role="tooltip"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        ${this.hasTooltipContent ? this.tooltipContent : nothing}
+      </span>`;
+  }
+};
+SpectreTooltipElement.properties = {
+  placement: { type: String, reflect: true },
+  visible: { type: Boolean, reflect: true }
+};
+function defineSpectreTooltip(tagName = "sp-tooltip") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreTooltipElement);
+  return SpectreTooltipElement;
+}
 
 // src/index.ts
 function defineSpectreComponents() {
@@ -2627,8 +3808,18 @@ function defineSpectreComponents() {
   defineSpectreSpinner();
   defineSpectreTag();
   defineSpectrePricingCard();
+  defineSpectreContainer();
+  defineSpectreGrid();
+  defineSpectreSection();
+  defineSpectreStack();
+  defineSpectreDropdown();
+  defineSpectreModal();
+  defineSpectreNav();
+  defineSpectreSidebar();
+  defineSpectreToast();
+  defineSpectreTooltip();
 }
 
-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, SpectreDropdownElement, SpectreFieldsetElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectreModalElement, SpectreNavElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSidebarElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextareaElement, SpectreToastElement, SpectreTooltipElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreDropdown, defineSpectreFieldset, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectreModal, defineSpectreNav, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSidebar, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, defineSpectreTextarea, defineSpectreToast, defineSpectreTooltip, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreContainerMaxWidths, spectreDropdownPlacements, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants, spectreToastVariants, spectreTooltipPlacements };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map