@phcdevworks/spectre-components 1.19.0 → 1.21.0

package/dist/index.js

@@ -1,8 +1,9 @@
-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, getSectionClasses, getStackClasses, getDropdownClasses, getDropdownMenuClasses, getFooterClasses, getFooterChipClasses, getFooterLinkClasses, getModalOverlayClasses, getModalClasses, getNavClasses, getNavLinkClasses, getSidebarClasses, getSidebarToggleClasses, getSidebarBackdropClasses, getSidebarLinkClasses, getToastClasses, getToastIconClasses, getTooltipClasses, getTextClasses } from '@phcdevworks/spectre-ui';
-import { LitElement, html, nothing } from 'lit';
+import { getButtonClasses, getInputLabelClasses, getInputClasses, getInputErrorMessageClasses, getInputHelperTextClasses, getInputWrapperClasses, getTextareaClasses, getSelectClasses, getCheckboxClasses, getRadioClasses, getLabelClasses, getFieldsetLegendClasses, getFieldsetClasses, getBadgeClasses, getCardClasses, getIconBoxClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialQuoteClasses, getAlertClasses, getAlertIconClasses, getAlertDismissClasses, getAvatarClasses, getSpinnerClasses, getTagClasses, getPricingCardClasses, getPricingCardBadgeClasses, getPricingCardPriceContainerClasses, getPricingCardPriceClasses, getPricingCardDescriptionClasses, getContainerClasses, getGridClasses, getSectionClasses, getStackClasses, getDropdownItemClasses, getDropdownHeaderClasses, getDropdownDividerClasses, getDropdownClasses, getDropdownMenuClasses, getFooterClasses, getFooterTextClasses, getFooterMutedClasses, getFooterLinksClasses, getFooterHeadingClasses, getFooterDividerClasses, getFooterChipClasses, getFooterLinkClasses, getModalOverlayClasses, getModalClasses, getNavClasses, getNavLinksClasses, getNavLinkClasses, getSidebarClasses, getSidebarHeaderClasses, getSidebarGroupClasses, getSidebarGroupSummaryClasses, getSidebarToggleClasses, getSidebarBackdropClasses, getSidebarLinkClasses, getToastClasses, getToastIconClasses, getTooltipClasses, getLeadClasses, getDisplayClasses, getHeadingClasses, getTextClasses, getTabsClasses, getTabsListClasses, getTabsItemClasses, getTabsPanelClasses, getAccordionClasses, getAccordionItemClasses, getAccordionHeaderClasses, getAccordionIconClasses, getAccordionPanelClasses, getBreadcrumbLinkClasses, getBreadcrumbClasses, getBreadcrumbItemClasses, getBreadcrumbSeparatorClasses, getListGroupItemTextClasses, getListGroupItemHeadingClasses, getListGroupClasses, getListGroupItemClasses, getOffcanvasBackdropClasses, getOffcanvasClasses, getOffcanvasHeaderClasses, getOffcanvasBodyClasses, getOffcanvasFooterClasses, getCarouselCaptionClasses, getCarouselClasses, getCarouselViewportClasses, getCarouselSlideClasses, getCarouselControlClasses, getCarouselIndicatorsClasses, getCarouselIndicatorClasses, getTableClasses, getTableRowClasses, getTableWrapperClasses, getPaginationItemClasses, getPaginationClasses, getPaginationEllipsisClasses, getStepperClasses, getStepperStepClasses, getStepperIndicatorClasses, getStepperLabelClasses, getCardBleedClasses, getProgressLabelClasses, getProgressClasses, getProgressBarClasses, getSwitchClasses, getRangeClasses, getFileInputClasses, getExternalAuthButtonClasses, getExternalAuthButtonIconClasses, getChoiceCardClasses, getInputGroupAddonClasses, getInputGroupClasses, getPopoverClasses, getPopoverArrowClasses, getPopoverHeaderClasses, getPopoverBodyClasses, getDayClasses, getDatepickerClasses, getDatepickerHeaderClasses, getDatepickerGridClasses, getDatepickerWeekdayClasses, getProseClasses } from '@phcdevworks/spectre-ui';
+import { svg, LitElement, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { literal, html as html$1 } from 'lit/static-html.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 // src/utils/form.ts
 var spectreInputSizes = ["sm", "md", "lg"];
@@ -17,7 +18,11 @@ var spectreButtonVariants = [
   "success",
   "cta",
   "accent",
-  "inverse"
+  "inverse",
+  "warning",
+  "link",
+  "light",
+  "dark"
 ];
 function isButtonVariant(value) {
   return spectreButtonVariants.includes(value);
@@ -55,7 +60,8 @@ var spectreBadgeVariants = [
   "outline",
   "accent",
   "cta",
-  "inverse"
+  "inverse",
+  "brand"
 ];
 function isBadgeVariant(value) {
   return spectreBadgeVariants.includes(value);
@@ -65,7 +71,8 @@ var spectreAlertVariants = [
   "success",
   "warning",
   "danger",
-  "neutral"
+  "neutral",
+  "brand"
 ];
 function isAlertVariant(value) {
   return spectreAlertVariants.includes(value);
@@ -85,6 +92,22 @@ function isCardPaddingSize(value) {
     value
   );
 }
+var spectreAccentEdges = ["top", "right", "bottom", "left"];
+function isAccentEdge(value) {
+  return spectreAccentEdges.includes(value);
+}
+var spectreAccentColors = [
+  "neutral",
+  "brand",
+  "info",
+  "success",
+  "warning",
+  "danger",
+  "cta"
+];
+function isAccentColor(value) {
+  return spectreAccentColors.includes(value);
+}
 var spectreIconBoxVariants = [
   "primary",
   "secondary",
@@ -121,7 +144,8 @@ var spectreSpinnerVariants = [
   "info",
   "neutral",
   "accent",
-  "cta"
+  "cta",
+  "inverse"
 ];
 function isSpinnerVariant(value) {
   return spectreSpinnerVariants.includes(value);
@@ -151,7 +175,7 @@ var spectreAvatarShapes = ["circle", "square"];
 function isAvatarShape(value) {
   return spectreAvatarShapes.includes(value);
 }
-var spectreContainerMaxWidths = ["prose"];
+var spectreContainerMaxWidths = ["none", "prose", "wide"];
 function isContainerMaxWidth(value) {
   return spectreContainerMaxWidths.includes(
     value
@@ -306,7 +330,7 @@ var spectreStackDirections = ["vertical", "horizontal"];
 function isStackDirection(value) {
   return spectreStackDirections.includes(value);
 }
-var spectreStackBases = ["sidebar"];
+var spectreStackBases = ["none", "sidebar"];
 function isStackBasis(value) {
   return spectreStackBases.includes(value);
 }
@@ -337,7 +361,8 @@ var spectreToastVariants = [
   "info",
   "success",
   "warning",
-  "danger"
+  "danger",
+  "neutral"
 ];
 function isToastVariant(value) {
   return spectreToastVariants.includes(value);
@@ -381,7 +406,12 @@ var spectreTextVariants = [
   "meta",
   "brand",
   "onInverse",
-  "onInverseMuted"
+  "onInverseMuted",
+  "onSurface",
+  "onSurfaceMuted",
+  "onSurfaceSubtle",
+  "onSurfaceMeta",
+  "onSurfaceBrand"
 ];
 function isTextVariant(value) {
   return spectreTextVariants.includes(value);
@@ -412,6 +442,114 @@ var spectreTextTransforms = [
 function isTextTransform(value) {
   return spectreTextTransforms.includes(value);
 }
+var spectreTabsVariants = ["line", "pill"];
+function isTabsVariant(value) {
+  return spectreTabsVariants.includes(value);
+}
+var spectreOffcanvasPlacements = [
+  "start",
+  "end",
+  "top",
+  "bottom"
+];
+function isOffcanvasPlacement(value) {
+  return spectreOffcanvasPlacements.includes(
+    value
+  );
+}
+var spectreTableSizes = ["sm", "md"];
+function isTableSize(value) {
+  return spectreTableSizes.includes(value);
+}
+var spectreStepperOrientations = ["horizontal", "vertical"];
+function isStepperOrientation(value) {
+  return spectreStepperOrientations.includes(
+    value
+  );
+}
+var spectreSpacingScale = ["sm", "md", "lg"];
+function isSpacingStep(value) {
+  return spectreSpacingScale.includes(value);
+}
+var spectreGridColStarts = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12
+];
+function isGridColStart(value) {
+  return spectreGridColStarts.includes(value);
+}
+function isGridColStartOptions(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return (candidate.base === void 0 || isGridColStart(candidate.base)) && (candidate.md === void 0 || isGridColStart(candidate.md)) && (candidate.lg === void 0 || isGridColStart(candidate.lg));
+}
+var spectrePopoverPlacements = [
+  "top",
+  "bottom",
+  "left",
+  "right"
+];
+function isPopoverPlacement(value) {
+  return spectrePopoverPlacements.includes(
+    value
+  );
+}
+var spectreProgressVariants = [
+  "brand",
+  "neutral",
+  "info",
+  "success",
+  "warning",
+  "danger"
+];
+function isProgressVariant(value) {
+  return spectreProgressVariants.includes(
+    value
+  );
+}
+var spectreTextPresets = ["heading", "display", "lead"];
+function isTextPreset(value) {
+  return spectreTextPresets.includes(value);
+}
+var spectreHeadingLevels = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6"
+];
+function isHeadingLevel(value) {
+  return spectreHeadingLevels.includes(value);
+}
+var spectreDisplayLevels = [1, 2, 3, 4, 5, 6];
+function isDisplayLevel(value) {
+  return spectreDisplayLevels.includes(value);
+}
+var spectreTableRowVariants = [
+  "neutral",
+  "info",
+  "success",
+  "warning",
+  "danger"
+];
+function isTableRowVariant(value) {
+  return spectreTableRowVariants.includes(
+    value
+  );
+}
 function normalizeInt(value, fallback, min = 0) {
   if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
     return fallback;
@@ -700,6 +838,22 @@ function hasMeaningfulContent(nodes) {
     return false;
   });
 }
+var idCounter = 0;
+function createUniqueId(prefix) {
+  idCounter += 1;
+  return `${prefix}-${idCounter}`;
+}
+function replaceClasses(element, previous, next) {
+  const nextTokens = next.split(/\s+/).filter(Boolean);
+  previous.split(/\s+/).filter((token) => token && !nextTokens.includes(token)).forEach((token) => element.classList.remove(token));
+  element.classList.add(...nextTokens);
+}
+var spectreKindKey = /* @__PURE__ */ Symbol.for(
+  "phcdevworks.spectre-components.kind"
+);
+function isSpectreKind(node, kind) {
+  return node[spectreKindKey] === kind;
+}
 
 // src/utils/projectable.ts
 var SpectreProjectableElement = class extends SpectreBaseElement {
@@ -735,7 +889,9 @@ var SpectreProjectableElement = class extends SpectreBaseElement {
         nextProjectedContent.push(node);
       }
     });
-    const hasChanged = nextProjectedContent.length !== this.projectedContent.length || nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);
+    const hasChanged = nextProjectedContent.length !== this.projectedContent.length || nextProjectedContent.some(
+      (node, index) => node !== this.projectedContent[index]
+    );
     if (hasChanged) {
       this.projectedContent = nextProjectedContent;
     }
@@ -765,9 +921,31 @@ var SpectreProjectableElement = class extends SpectreBaseElement {
     this.contentObserver = void 0;
   }
 };
+
+// src/utils/states.ts
+var hoverFocusStateProperties = {
+  focused: { type: Boolean, reflect: true },
+  hovered: { type: Boolean, reflect: true }
+};
+var interactionStateProperties = {
+  ...hoverFocusStateProperties,
+  active: { type: Boolean, reflect: true }
+};
+function hoverFocusStates(element) {
+  return {
+    focused: element.focused ?? false,
+    hovered: element.hovered ?? false
+  };
+}
+function interactionStates(element) {
+  return { ...hoverFocusStates(element), active: element.active ?? false };
+}
 var SpectreButtonElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
     this.compact = false;
     this.disabled = false;
     this.fullWidth = false;
@@ -851,6 +1029,7 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
   get buttonClasses() {
     const recipeClasses = getButtonClasses({
+      ...interactionStates(this),
       compact: this.compact ?? false,
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
@@ -930,6 +1109,7 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
 };
 SpectreButtonElement.properties = {
+  ...interactionStateProperties,
   compact: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
@@ -960,6 +1140,9 @@ function defineSpectreButton(tagName = "sp-button") {
 var SpectreInputElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
     this.disabled = false;
     this.fullWidth = false;
     this.invalid = false;
@@ -971,6 +1154,10 @@ var SpectreInputElement = class extends SpectreBaseElement {
     this.success = false;
     this.type = "text";
     this.value = "";
+    this.errorMessage = void 0;
+    this.helperText = void 0;
+    this.label = void 0;
+    this.generatedId = createUniqueId("sp-input");
   }
   get autocapitalize() {
     return super.autocapitalize;
@@ -1045,12 +1232,30 @@ var SpectreInputElement = class extends SpectreBaseElement {
   }
   get inputClasses() {
     return getInputClasses({
+      ...interactionStates(this),
       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"
+      state: this.isDisabled ? this.disabled ? "disabled" : "loading" : this.invalid || this.errorMessage ? "error" : this.success ? "success" : "default"
     });
   }
+  get inputId() {
+    return this.id || this.generatedId;
+  }
+  get hasFieldChrome() {
+    return Boolean(this.label || this.helperText || this.errorMessage);
+  }
+  // An error message replaces the helper text while it is shown.
+  get messageId() {
+    if (this.errorMessage) {
+      return `${this.inputId}-error`;
+    }
+    return this.helperText ? `${this.inputId}-helper` : void 0;
+  }
+  get describedBy() {
+    const ids = [this.forwardedAriaDescribedBy, this.messageId].filter(Boolean);
+    return ids.length > 0 ? ids.join(" ") : void 0;
+  }
   get nativeInput() {
     return this.querySelector("[data-sp-input-native]");
   }
@@ -1068,11 +1273,48 @@ var SpectreInputElement = class extends SpectreBaseElement {
   blur() {
     this.nativeInput?.blur();
   }
+  renderMessage() {
+    if (this.errorMessage) {
+      return html`<p
+        aria-atomic="true"
+        aria-live="polite"
+        class="${getInputErrorMessageClasses()}"
+        id="${this.inputId}-error"
+      >
+        ${this.errorMessage}
+      </p>`;
+    }
+    if (this.helperText) {
+      return html`<p
+        class="${getInputHelperTextClasses({ disabled: this.isDisabled })}"
+        id="${this.inputId}-helper"
+      >
+        ${this.helperText}
+      </p>`;
+    }
+    return nothing;
+  }
+  // Without a label or message the native input renders alone, as before.
   render() {
+    if (!this.hasFieldChrome) {
+      return this.renderInput();
+    }
+    return html`<div class="${getInputWrapperClasses()}" data-sp-input-wrapper>
+      ${this.label ? html`<label
+              class="${getInputLabelClasses({ disabled: this.isDisabled })}"
+              for="${this.inputId}"
+              >${this.label}</label
+            >` : nothing}
+      ${this.renderInput()} ${this.renderMessage()}
+    </div>`;
+  }
+  renderInput() {
     return html`<input
       aria-busy="${this.loading ? "true" : "false"}"
-      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
-      aria-invalid="${ifDefined(this.invalid ? "true" : void 0)}"
+      aria-describedby="${ifDefined(this.describedBy)}"
+      aria-invalid="${ifDefined(
+      this.invalid || this.errorMessage ? "true" : void 0
+    )}"
       aria-label="${ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
       autocapitalize="${ifDefined(this.autocapitalize || void 0)}"
@@ -1085,7 +1327,7 @@ var SpectreInputElement = class extends SpectreBaseElement {
       form="${ifDefined(this.form || void 0)}"
       ?readonly="${this.readonly}"
       ?required="${this.required}"
-      id="${ifDefined(this.id || void 0)}"
+      id="${ifDefined(this.hasFieldChrome ? this.inputId : this.id || void 0)}"
       inputmode="${ifDefined(this.inputmode || void 0)}"
       list="${ifDefined(this.list || void 0)}"
       max="${ifDefined(this.max || void 0)}"
@@ -1106,9 +1348,13 @@ var SpectreInputElement = class extends SpectreBaseElement {
   }
 };
 SpectreInputElement.properties = {
+  ...interactionStateProperties,
   autocomplete: { type: String, reflect: true },
   disabled: { type: Boolean, reflect: true },
   enterkeyhint: { type: String, reflect: true },
+  errorMessage: { attribute: "error-message", type: String },
+  helperText: { attribute: "helper-text", type: String },
+  label: { type: String },
   form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   inputmode: { type: String, reflect: true },
@@ -1143,6 +1389,7 @@ var DEFAULT_ROWS = 2;
 var SpectreTextareaElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.focused = false;
     this.disabled = false;
     this.fullWidth = false;
     this.invalid = false;
@@ -1228,6 +1475,7 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
   }
   get textareaClasses() {
     return getTextareaClasses({
+      focused: this.focused ?? false,
       fullWidth: this.fullWidth ?? false,
       pill: this.pill ?? false,
       size: this.size,
@@ -1286,6 +1534,7 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
   }
 };
 SpectreTextareaElement.properties = {
+  focused: { type: Boolean, reflect: true },
   autocomplete: { type: String, reflect: true },
   disabled: { type: Boolean, reflect: true },
   enterkeyhint: { type: String, reflect: true },
@@ -1317,6 +1566,7 @@ function defineSpectreTextarea(tagName = "sp-textarea") {
 var SpectreSelectElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.focused = false;
     this.disabled = false;
     this.fullWidth = false;
     this.invalid = false;
@@ -1422,6 +1672,7 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
   }
   get selectClasses() {
     return getSelectClasses({
+      focused: this.focused ?? false,
       fullWidth: this.fullWidth ?? false,
       pill: this.pill ?? false,
       size: this.size,
@@ -1472,6 +1723,7 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
   }
 };
 SpectreSelectElement.properties = {
+  focused: { type: Boolean, reflect: true },
   autocomplete: { type: String, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
@@ -1982,8 +2234,16 @@ function defineSpectreFieldset(tagName = "sp-fieldset") {
 var SpectreBadgeElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.dot = false;
+    this.interactive = false;
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
+    this.accentRail = void 0;
+    this.accentRailColor = void 0;
     this.disabled = false;
     this.fullWidth = false;
+    this.innerClass = void 0;
     this.loading = false;
     this.size = "md";
     this.variant = "primary";
@@ -2011,6 +2271,12 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-badge-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accentRail") && this.accentRail != null && !isAccentEdge(this.accentRail)) {
+      this.accentRail = void 0;
+    }
+    if (changedProperties.has("accentRailColor") && this.accentRailColor != null && !isAccentColor(this.accentRailColor)) {
+      this.accentRailColor = void 0;
+    }
     if (changedProperties.has("disabled") && this.disabled == null) {
       this.disabled = false;
     }
@@ -2028,13 +2294,24 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
     }
   }
   get badgeClasses() {
-    return getBadgeClasses({
+    const recipeClasses = getBadgeClasses({
+      dot: this.dot ?? false,
+      interactive: this.interactive ?? false,
+      ...interactionStates(this),
+      ...this.accentRail !== void 0 && {
+        accentRail: this.accentRail
+      },
+      ...this.accentRailColor !== void 0 && {
+        accentRailColor: this.accentRailColor
+      },
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
       loading: this.loading ?? false,
       size: this.size,
       variant: this.variant
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return html`<span
@@ -2053,8 +2330,18 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
   }
 };
 SpectreBadgeElement.properties = {
+  dot: { type: Boolean, reflect: true },
+  interactive: { type: Boolean, reflect: true },
+  ...interactionStateProperties,
+  accentRail: { attribute: "accent-rail", type: String, reflect: true },
+  accentRailColor: {
+    attribute: "accent-rail-color",
+    type: String,
+    reflect: true
+  },
   disabled: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  innerClass: { attribute: "inner-class", type: String },
   loading: { type: Boolean, reflect: true },
   size: { type: String, reflect: true },
   variant: { type: String, reflect: true }
@@ -2090,6 +2377,11 @@ var paddedConverter = {
 var SpectreCardElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.disabled = false;
     this.fullHeight = false;
     this.innerClass = void 0;
@@ -2121,6 +2413,12 @@ var SpectreCardElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-card-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("disabled") && this.disabled == null) {
       this.disabled = false;
     }
@@ -2142,6 +2440,13 @@ var SpectreCardElement = class extends SpectreProjectableElement {
   }
   get cardClasses() {
     const recipeClasses = getCardClasses({
+      ...interactionStates(this),
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       disabled: this.isDisabled,
       fullHeight: this.fullHeight ?? false,
       interactive: this.interactive ?? false,
@@ -2169,6 +2474,9 @@ var SpectreCardElement = class extends SpectreProjectableElement {
   }
 };
 SpectreCardElement.properties = {
+  ...interactionStateProperties,
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   disabled: { type: Boolean, reflect: true },
   fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
   innerClass: { attribute: "inner-class", type: String },
@@ -2188,6 +2496,9 @@ function defineSpectreCard(tagName = "sp-card") {
 var SpectreIconBoxElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
     this.disabled = false;
     this.fullWidth = false;
     this.interactive = false;
@@ -2243,6 +2554,7 @@ var SpectreIconBoxElement = class extends SpectreProjectableElement {
   }
   get iconBoxClasses() {
     return getIconBoxClasses({
+      ...interactionStates(this),
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
       interactive: this.interactive ?? false,
@@ -2269,6 +2581,7 @@ var SpectreIconBoxElement = class extends SpectreProjectableElement {
   }
 };
 SpectreIconBoxElement.properties = {
+  ...interactionStateProperties,
   disabled: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   interactive: { type: Boolean, reflect: true },
@@ -2288,6 +2601,12 @@ function defineSpectreIconBox(tagName = "sp-icon-box") {
 var SpectreRatingElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.fullWidth = false;
+    this.pill = false;
+    this.interactive = false;
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
     this.disabled = false;
     this.loading = false;
     this.max = 5;
@@ -2327,6 +2646,10 @@ var SpectreRatingElement = class extends SpectreBaseElement {
   }
   get ratingClasses() {
     return getRatingClasses({
+      fullWidth: this.fullWidth ?? false,
+      pill: this.pill ?? false,
+      interactive: this.interactive ?? false,
+      ...interactionStates(this),
       disabled: this.isDisabled,
       loading: this.loading ?? false,
       size: this.size
@@ -2376,6 +2699,10 @@ var SpectreRatingElement = class extends SpectreBaseElement {
   }
 };
 SpectreRatingElement.properties = {
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  pill: { type: Boolean, reflect: true },
+  interactive: { type: Boolean, reflect: true },
+  ...interactionStateProperties,
   disabled: { type: Boolean, reflect: true },
   label: { type: String, reflect: true },
   loading: { type: Boolean, reflect: true },
@@ -2391,14 +2718,115 @@ function defineSpectreRating(tagName = "sp-rating") {
   customElements.define(tagName, SpectreRatingElement);
   return SpectreRatingElement;
 }
-var SpectreTestimonialElement = class extends SpectreProjectableElement {
+
+// src/utils/projection.ts
+function slotOf(node) {
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return void 0;
+  }
+  return node.getAttribute("slot") ?? void 0;
+}
+var ProjectionController = class {
+  constructor(host, internalAttributes) {
+    this.host = host;
+    this.internalAttributes = internalAttributes;
+    this.projected = [];
+    host.addController(this);
+  }
+  hostConnected() {
+    this.sync();
+    this.observe();
+  }
+  hostDisconnected() {
+    this.disconnect();
+  }
+  hostUpdate() {
+    this.sync();
+    this.disconnect();
+  }
+  hostUpdated() {
+    this.observe();
+  }
+  // Every projected node in authored order, regardless of slot.
+  all() {
+    return [...this.projected];
+  }
+  // Omitting `slot` returns the nodes without a slot attribute.
+  nodes(slot) {
+    return this.projected.filter((node) => slotOf(node) === slot);
+  }
+  elements(slot) {
+    return this.nodes(slot).filter(
+      (node) => node.nodeType === Node.ELEMENT_NODE
+    );
+  }
+  has(slot) {
+    return hasMeaningfulContent(this.nodes(slot));
+  }
+  isInternalNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE && this.internalAttributes.some(
+      (name) => node.hasAttribute(name)
+    );
+  }
+  isProjectable(node) {
+    if (node.nodeType === Node.COMMENT_NODE || this.isInternalNode(node)) {
+      return false;
+    }
+    if (node.nodeType === Node.TEXT_NODE && this.hostHasRendered) {
+      return Boolean(node.textContent?.trim());
+    }
+    return true;
+  }
+  get hostHasRendered() {
+    return this.host.hasUpdated;
+  }
+  sync() {
+    const next = [
+      .../* @__PURE__ */ new Set([
+        ...this.projected.filter((node) => this.host.contains(node)),
+        ...Array.from(this.host.childNodes).filter(
+          (node) => this.isProjectable(node)
+        )
+      ])
+    ];
+    const changed = next.length !== this.projected.length || next.some((node, index) => node !== this.projected[index]);
+    if (changed) {
+      this.projected = next;
+    }
+    return changed;
+  }
+  observe() {
+    if (this.observer || !this.host.isConnected) {
+      return;
+    }
+    this.observer = new MutationObserver(() => {
+      if (this.sync()) {
+        this.host.requestUpdate();
+      }
+    });
+    this.observer.observe(this.host, { childList: true });
+  }
+  disconnect() {
+    this.observer?.disconnect();
+    this.observer = void 0;
+  }
+};
+var SpectreTestimonialElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.disabled = false;
     this.fullHeight = false;
     this.interactive = false;
     this.loading = false;
     this.variant = "elevated";
+    this.projection = new ProjectionController(this, [
+      "data-sp-testimonial-native"
+    ]);
   }
   get id() {
     return super.id;
@@ -2412,17 +2840,13 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
-  getContentContainer() {
-    return this.querySelector("[data-sp-testimonial-native]");
-  }
-  isInternalNode(node) {
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-      return false;
-    }
-    const el = node;
-    return el.hasAttribute("data-sp-testimonial-native");
-  }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("disabled") && this.disabled == null) {
       this.disabled = false;
     }
@@ -2441,6 +2865,13 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
   }
   get testimonialClasses() {
     return getTestimonialClasses({
+      ...interactionStates(this),
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       disabled: this.isDisabled,
       fullHeight: this.fullHeight ?? false,
       interactive: this.interactive ?? false,
@@ -2448,6 +2879,24 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
       variant: this.variant
     });
   }
+  renderAuthor() {
+    const hasName = this.projection.has("author-name");
+    const hasTitle = this.projection.has("author-title");
+    if (!this.projection.has("author-image") && !hasName && !hasTitle) {
+      return nothing;
+    }
+    return html`<div class="${getTestimonialAuthorClasses()}">
+      ${this.projection.nodes("author-image")}
+      ${hasName || hasTitle ? html`<div class="${getTestimonialAuthorInfoClasses()}">
+              ${hasName ? html`<div class="${getTestimonialAuthorNameClasses()}">
+                      ${this.projection.nodes("author-name")}
+                    </div>` : nothing}
+              ${hasTitle ? html`<div class="${getTestimonialAuthorTitleClasses()}">
+                      ${this.projection.nodes("author-title")}
+                    </div>` : nothing}
+            </div>` : nothing}
+    </div>`;
+  }
   render() {
     return html`<div
       aria-busy="${this.loading ? "true" : "false"}"
@@ -2460,11 +2909,17 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
       role="${ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
-      ${this.hasProjectedContent ? this.projectedContent : nothing}
+      ${this.projection.has("quote") ? html`<div class="${getTestimonialQuoteClasses()}">
+              ${this.projection.nodes("quote")}
+            </div>` : nothing}
+      ${this.projection.nodes()} ${this.renderAuthor()}
     </div>`;
   }
 };
 SpectreTestimonialElement.properties = {
+  ...interactionStateProperties,
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   disabled: { type: Boolean, reflect: true },
   fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
   interactive: { type: Boolean, reflect: true },
@@ -2479,15 +2934,46 @@ function defineSpectreTestimonial(tagName = "sp-testimonial") {
   customElements.define(tagName, SpectreTestimonialElement);
   return SpectreTestimonialElement;
 }
-var SpectreAlertElement = class extends SpectreProjectableElement {
+var paths = {
+  check: svg`<path d="M3 8.5l3 3 7-7" />`,
+  chevronDown: svg`<path d="M4 6l4 4 4-4" />`,
+  chevronLeft: svg`<path d="M10 4l-4 4 4 4" />`,
+  chevronRight: svg`<path d="M6 4l4 4-4 4" />`,
+  close: svg`<path d="M4 4l8 8M12 4l-8 8" />`
+};
+function renderIcon(name, sizeClass = "sp-icon-sm") {
+  return html`<svg
+    aria-hidden="true"
+    class="${sizeClass}"
+    fill="none"
+    focusable="false"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 16 16"
+  >
+    ${paths[name]}
+  </svg>`;
+}
+var SpectreAlertElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.interactive = false;
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
+    this.dismissLabel = "Dismiss";
     this.dismissed = false;
+    this.dismissible = false;
     this.disabled = false;
     this.fullWidth = false;
     this.loading = false;
     this.size = "md";
     this.variant = "info";
+    this.projection = new ProjectionController(this, [
+      "data-sp-alert-native"
+    ]);
   }
   get id() {
     return super.id;
@@ -2501,20 +2987,16 @@ var SpectreAlertElement = class extends SpectreProjectableElement {
   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("dismissLabel") && !this.dismissLabel) {
+      this.dismissLabel = "Dismiss";
+    }
     if (changedProperties.has("dismissed") && this.dismissed == null) {
       this.dismissed = false;
     }
+    if (changedProperties.has("dismissible") && this.dismissible == null) {
+      this.dismissible = false;
+    }
     if (changedProperties.has("disabled") && this.disabled == null) {
       this.disabled = false;
     }
@@ -2531,10 +3013,20 @@ var SpectreAlertElement = class extends SpectreProjectableElement {
       this.size = "md";
     }
   }
+  dismiss() {
+    if (this.dismissed) {
+      return;
+    }
+    this.dismissed = true;
+    this.dispatchEvent(new CustomEvent("sp-dismiss", { bubbles: true }));
+  }
   get alertClasses() {
     return getAlertClasses({
+      interactive: this.interactive ?? false,
+      ...interactionStates(this),
       disabled: this.isDisabled,
       dismissed: this.dismissed ?? false,
+      dismissible: this.dismissible ?? false,
       fullWidth: this.fullWidth ?? false,
       loading: this.loading ?? false,
       size: this.size,
@@ -2553,12 +3045,28 @@ var SpectreAlertElement = class extends SpectreProjectableElement {
       role="alert"
       title="${ifDefined(this.title || void 0)}"
     >
-      ${this.hasProjectedContent ? this.projectedContent : nothing}
+      ${this.projection.has("icon") ? html`<span class="${getAlertIconClasses()}"
+              >${this.projection.nodes("icon")}</span
+            >` : nothing}
+      ${this.projection.has() ? this.projection.nodes() : nothing}
+      ${this.dismissible ? html`<button
+              aria-label="${this.dismissLabel ?? "Dismiss"}"
+              class="${getAlertDismissClasses()}"
+              data-sp-alert-dismiss
+              type="button"
+              @click="${() => this.dismiss()}"
+            >
+              ${renderIcon("close")}
+            </button>` : nothing}
     </div>`;
   }
 };
 SpectreAlertElement.properties = {
+  interactive: { type: Boolean, reflect: true },
+  ...interactionStateProperties,
+  dismissLabel: { attribute: "dismiss-label", type: String },
   dismissed: { type: Boolean, reflect: true },
+  dismissible: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   loading: { type: Boolean, reflect: true },
@@ -2576,6 +3084,9 @@ function defineSpectreAlert(tagName = "sp-alert") {
 var SpectreAvatarElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
     this.disabled = false;
     this.fullWidth = false;
     this.interactive = false;
@@ -2631,6 +3142,7 @@ var SpectreAvatarElement = class extends SpectreProjectableElement {
   }
   get avatarClasses() {
     return getAvatarClasses({
+      ...interactionStates(this),
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
       interactive: this.interactive ?? false,
@@ -2657,6 +3169,7 @@ var SpectreAvatarElement = class extends SpectreProjectableElement {
   }
 };
 SpectreAvatarElement.properties = {
+  ...interactionStateProperties,
   disabled: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   interactive: { type: Boolean, reflect: true },
@@ -2748,6 +3261,9 @@ function defineSpectreSpinner(tagName = "sp-spinner") {
 var SpectreTagElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
     this.dismissible = false;
     this.disabled = false;
     this.fullWidth = false;
@@ -2807,6 +3323,7 @@ var SpectreTagElement = class extends SpectreProjectableElement {
   }
   get tagClasses() {
     return getTagClasses({
+      ...interactionStates(this),
       disabled: this.isDisabled,
       dismissible: this.dismissible ?? false,
       fullWidth: this.fullWidth ?? false,
@@ -2834,6 +3351,7 @@ var SpectreTagElement = class extends SpectreProjectableElement {
   }
 };
 SpectreTagElement.properties = {
+  ...interactionStateProperties,
   dismissible: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
@@ -2851,14 +3369,22 @@ function defineSpectreTag(tagName = "sp-tag") {
   customElements.define(tagName, SpectreTagElement);
   return SpectreTagElement;
 }
-var SpectrePricingCardElement = class extends SpectreProjectableElement {
+var SpectrePricingCardElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.disabled = false;
     this.featured = false;
     this.fullHeight = false;
     this.interactive = false;
     this.loading = false;
+    this.projection = new ProjectionController(this, [
+      "data-sp-pricing-card-native"
+    ]);
   }
   get id() {
     return super.id;
@@ -2872,17 +3398,13 @@ var SpectrePricingCardElement = class extends SpectreProjectableElement {
   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("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("disabled") && this.disabled == null) {
       this.disabled = false;
     }
@@ -2901,6 +3423,13 @@ var SpectrePricingCardElement = class extends SpectreProjectableElement {
   }
   get pricingCardClasses() {
     return getPricingCardClasses({
+      ...interactionStates(this),
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       disabled: this.isDisabled,
       featured: this.featured ?? false,
       fullHeight: this.fullHeight ?? false,
@@ -2920,11 +3449,26 @@ var SpectrePricingCardElement = class extends SpectreProjectableElement {
       role="${ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
-      ${this.hasProjectedContent ? this.projectedContent : nothing}
+      ${this.projection.nodes("header")}
+      ${this.projection.has("badge") ? html`<div class="${getPricingCardBadgeClasses()}">
+              ${this.projection.nodes("badge")}
+            </div>` : nothing}
+      ${this.projection.has("price") ? html`<div class="${getPricingCardPriceContainerClasses()}">
+              <div class="${getPricingCardPriceClasses()}">
+                ${this.projection.nodes("price")}
+              </div>
+            </div>` : nothing}
+      ${this.projection.has("description") ? html`<div class="${getPricingCardDescriptionClasses()}">
+              ${this.projection.nodes("description")}
+            </div>` : nothing}
+      ${this.projection.nodes()} ${this.projection.nodes("footer")}
     </div>`;
   }
 };
 SpectrePricingCardElement.properties = {
+  ...interactionStateProperties,
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   disabled: { type: Boolean, reflect: true },
   featured: { type: Boolean, reflect: true },
   fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
@@ -2944,6 +3488,7 @@ var SpectreContainerElement = class extends SpectreProjectableElement {
     super(...arguments);
     this.innerClass = void 0;
     this.maxWidth = void 0;
+    this.padding = void 0;
   }
   get id() {
     return super.id;
@@ -2958,9 +3503,9 @@ var SpectreContainerElement = class extends SpectreProjectableElement {
     super.title = value;
   }
   connectedCallback() {
-    var _a;
+    var _a5;
     super.connectedCallback();
-    (_a = this.style).display || (_a.display = "block");
+    (_a5 = this.style).display || (_a5.display = "block");
   }
   getContentContainer() {
     return this.querySelector("[data-sp-container-native]");
@@ -2976,11 +3521,19 @@ var SpectreContainerElement = class extends SpectreProjectableElement {
     if (changedProperties.has("maxWidth") && this.maxWidth != null && !isContainerMaxWidth(this.maxWidth)) {
       this.maxWidth = void 0;
     }
+    if (changedProperties.has("padding") && this.padding != null && !isSpacingStep(this.padding)) {
+      this.padding = void 0;
+    }
   }
   get containerClasses() {
-    const recipeClasses = getContainerClasses(
-      this.maxWidth != null ? { maxWidth: this.maxWidth } : {}
-    );
+    const recipeClasses = getContainerClasses({
+      ...this.maxWidth != null && {
+        maxWidth: this.maxWidth
+      },
+      ...this.padding != null && {
+        padding: this.padding
+      }
+    });
     const utilityClasses = sanitizeUtilityClasses(this.innerClass);
     return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
@@ -3000,7 +3553,8 @@ var SpectreContainerElement = class extends SpectreProjectableElement {
 };
 SpectreContainerElement.properties = {
   innerClass: { attribute: "inner-class", type: String },
-  maxWidth: { attribute: "max-width", type: String, reflect: true }
+  maxWidth: { attribute: "max-width", type: String, reflect: true },
+  padding: { type: String, reflect: true }
 };
 function defineSpectreContainer(tagName = "sp-container") {
   const existingElement = customElements.get(tagName);
@@ -3077,7 +3631,7 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     super.removeAttribute(qualifiedName);
   }
   connectedCallback() {
-    var _a;
+    var _a5;
     const initialRole = HTMLElement.prototype.getAttribute.call(this, "role");
     if (initialRole !== null) {
       HTMLElement.prototype.removeAttribute.call(this, "role");
@@ -3086,7 +3640,7 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     if (initialRole !== null) {
       this.role = initialRole;
     }
-    (_a = this.style).display || (_a.display = "block");
+    (_a5 = this.style).display || (_a5.display = "block");
   }
   getContentContainer() {
     return this.querySelector("[data-sp-grid-native]");
@@ -3121,6 +3675,9 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     if (changedProperties.has("offset") && this.offset !== void 0 && !isGridOffset(this.offset) && !isGridOffsetOptions(this.offset)) {
       this.offset = void 0;
     }
+    if (changedProperties.has("colStart") && this.colStart !== void 0 && !isGridColStart(this.colStart) && !isGridColStartOptions(this.colStart)) {
+      this.colStart = void 0;
+    }
     if (changedProperties.has("rowSpan") && this.rowSpan !== void 0 && !isGridSpan(this.rowSpan) && !isGridSpanOptions(this.rowSpan)) {
       this.rowSpan = void 0;
     }
@@ -3155,6 +3712,9 @@ var SpectreGridElement = class extends SpectreProjectableElement {
       ...this.offset !== void 0 && {
         offset: this.offset
       },
+      ...this.colStart !== void 0 && {
+        colStart: this.colStart
+      },
       ...this.rowSpan !== void 0 && {
         rowSpan: this.rowSpan
       },
@@ -3194,6 +3754,7 @@ var SpectreGridElement = class extends SpectreProjectableElement {
 };
 SpectreGridElement.properties = {
   align: { type: String, reflect: true },
+  colStart: { attribute: "col-start", type: Object },
   columns: { type: Number, reflect: true },
   columnGap: { attribute: "column-gap", type: String, reflect: true },
   explicitTemplate: { attribute: "explicit-template", type: Object },
@@ -3219,7 +3780,9 @@ function defineSpectreGrid(tagName = "sp-grid") {
 var SpectreSectionElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.gap = void 0;
     this.innerClass = void 0;
+    this.spacing = void 0;
   }
   get id() {
     return super.id;
@@ -3234,9 +3797,9 @@ var SpectreSectionElement = class extends SpectreProjectableElement {
     super.title = value;
   }
   connectedCallback() {
-    var _a;
+    var _a5;
     super.connectedCallback();
-    (_a = this.style).display || (_a.display = "block");
+    (_a5 = this.style).display || (_a5.display = "block");
   }
   getContentContainer() {
     return this.querySelector("[data-sp-section-native]");
@@ -3248,8 +3811,21 @@ var SpectreSectionElement = class extends SpectreProjectableElement {
     const el = node;
     return el.hasAttribute("data-sp-section-native");
   }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("gap") && this.gap != null && !isSpacingStep(this.gap)) {
+      this.gap = void 0;
+    }
+    if (changedProperties.has("spacing") && this.spacing != null && !isSpacingStep(this.spacing)) {
+      this.spacing = void 0;
+    }
+  }
   get sectionClasses() {
-    const recipeClasses = getSectionClasses({});
+    const recipeClasses = getSectionClasses({
+      ...this.gap != null && { gap: this.gap },
+      ...this.spacing != null && {
+        spacing: this.spacing
+      }
+    });
     const utilityClasses = sanitizeUtilityClasses(this.innerClass);
     return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
@@ -3268,7 +3844,9 @@ var SpectreSectionElement = class extends SpectreProjectableElement {
   }
 };
 SpectreSectionElement.properties = {
-  innerClass: { attribute: "inner-class", type: String }
+  gap: { type: String, reflect: true },
+  innerClass: { attribute: "inner-class", type: String },
+  spacing: { type: String, reflect: true }
 };
 function defineSpectreSection(tagName = "sp-section") {
   const existingElement = customElements.get(tagName);
@@ -3300,9 +3878,9 @@ var SpectreStackElement = class extends SpectreProjectableElement {
     super.title = value;
   }
   connectedCallback() {
-    var _a;
+    var _a5;
     super.connectedCallback();
-    (_a = this.style).display || (_a.display = "block");
+    (_a5 = this.style).display || (_a5.display = "block");
   }
   getContentContainer() {
     return this.querySelector("[data-sp-stack-native]");
@@ -3367,14 +3945,33 @@ function defineSpectreStack(tagName = "sp-stack") {
   customElements.define(tagName, SpectreStackElement);
   return SpectreStackElement;
 }
+
+// src/utils/parts.ts
+function applyPartClasses(elements, parts) {
+  for (const element of elements) {
+    const part = element.getAttribute("slot");
+    const classes = part ? parts[part] : void 0;
+    if (classes) {
+      element.classList.add(...classes.split(/\s+/).filter(Boolean));
+    }
+  }
+}
+function childElements(nodes) {
+  return nodes.filter(
+    (node) => node.nodeType === Node.ELEMENT_NODE
+  );
+}
 var SpectreDropdownElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.fullWidth = false;
     this.mega = false;
     this.open = false;
     this.placement = "bottom-start";
     this.triggerLabel = "Toggle menu";
+    this.viewport = false;
     this.triggerContent = [];
     this.menuContent = [];
     this.handleDocumentClick = (event) => {
@@ -3479,6 +4076,12 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
     this.contentObserver = void 0;
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("fullWidth") && this.fullWidth == null) {
       this.fullWidth = false;
     }
@@ -3494,6 +4097,17 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
     if (changedProperties.has("triggerLabel") && !this.triggerLabel) {
       this.triggerLabel = "Toggle menu";
     }
+    if (changedProperties.has("viewport") && this.viewport == null) {
+      this.viewport = false;
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    applyPartClasses(childElements(this.menuContent), {
+      divider: getDropdownDividerClasses(),
+      header: getDropdownHeaderClasses(),
+      item: getDropdownItemClasses()
+    });
   }
   get triggerElement() {
     return this.querySelector("[data-sp-dropdown-trigger]");
@@ -3522,14 +4136,22 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
   get dropdownClasses() {
     return getDropdownClasses({
       fullWidth: this.fullWidth ?? false,
-      mega: this.mega ?? false
+      mega: this.mega ?? false,
+      viewport: this.viewport ?? false
     });
   }
   get menuClasses() {
     return getDropdownMenuClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       mega: this.mega ?? false,
       open: this.open ?? false,
-      placement: this.placement
+      placement: this.placement,
+      viewport: this.viewport ?? false
     });
   }
   render() {
@@ -3557,11 +4179,14 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
   }
 };
 SpectreDropdownElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   mega: { type: Boolean, reflect: true },
   open: { type: Boolean, reflect: true },
   placement: { type: String, reflect: true },
-  triggerLabel: { attribute: "trigger-label", type: String }
+  triggerLabel: { attribute: "trigger-label", type: String },
+  viewport: { type: Boolean, reflect: true }
 };
 function defineSpectreDropdown(tagName = "sp-dropdown") {
   const existingElement = customElements.get(tagName);
@@ -3574,6 +4199,8 @@ function defineSpectreDropdown(tagName = "sp-dropdown") {
 var SpectreFooterElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.bordered = false;
     this.fullWidth = false;
     this.innerClass = void 0;
@@ -3591,9 +4218,9 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
     super.title = value;
   }
   connectedCallback() {
-    var _a;
+    var _a5;
     super.connectedCallback();
-    (_a = this.style).display || (_a.display = "block");
+    (_a5 = this.style).display || (_a5.display = "block");
   }
   getContentContainer() {
     return this.querySelector("[data-sp-footer-native]");
@@ -3606,6 +4233,12 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-footer-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("bordered") && this.bordered == null) {
       this.bordered = false;
     }
@@ -3615,12 +4248,34 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
   }
   get footerClasses() {
     const recipeClasses = getFooterClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       bordered: this.bordered ?? false,
       fullWidth: this.fullWidth ?? false
     });
     const utilityClasses = sanitizeUtilityClasses(this.innerClass);
     return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
+  // Footer parts usually sit inside authored columns, so markers are matched
+  // at any depth.
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const native = this.querySelector("[data-sp-footer-native]");
+    if (!native) {
+      return;
+    }
+    applyPartClasses(native.querySelectorAll("[slot]"), {
+      divider: getFooterDividerClasses(),
+      heading: getFooterHeadingClasses(),
+      links: getFooterLinksClasses(),
+      muted: getFooterMutedClasses(),
+      text: getFooterTextClasses()
+    });
+  }
   render() {
     return html`<footer
       aria-label="${ifDefined(this.forwardedAriaLabel)}"
@@ -3634,6 +4289,8 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
   }
 };
 SpectreFooterElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   bordered: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   innerClass: { attribute: "inner-class", type: String }
@@ -3649,6 +4306,8 @@ function defineSpectreFooter(tagName = "sp-footer") {
 var SpectreFooterChipElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.focused = false;
+    this.hovered = false;
     this.disabled = false;
   }
   get id() {
@@ -3679,7 +4338,10 @@ var SpectreFooterChipElement = class extends SpectreProjectableElement {
     }
   }
   get footerChipClasses() {
-    return getFooterChipClasses({ disabled: this.disabled ?? false });
+    return getFooterChipClasses({
+      ...hoverFocusStates(this),
+      disabled: this.disabled ?? false
+    });
   }
   render() {
     return html`<span
@@ -3695,6 +4357,7 @@ var SpectreFooterChipElement = class extends SpectreProjectableElement {
   }
 };
 SpectreFooterChipElement.properties = {
+  ...hoverFocusStateProperties,
   disabled: { type: Boolean, reflect: true }
 };
 function defineSpectreFooterChip(tagName = "sp-footer-chip") {
@@ -3708,6 +4371,8 @@ function defineSpectreFooterChip(tagName = "sp-footer-chip") {
 var SpectreFooterLinkElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.focused = false;
+    this.hovered = false;
     this.active = false;
     this.disabled = false;
     this.href = void 0;
@@ -3744,6 +4409,7 @@ var SpectreFooterLinkElement = class extends SpectreProjectableElement {
   }
   get footerLinkClasses() {
     return getFooterLinkClasses({
+      ...hoverFocusStates(this),
       active: this.active ?? false,
       disabled: this.disabled ?? false
     });
@@ -3765,6 +4431,7 @@ var SpectreFooterLinkElement = class extends SpectreProjectableElement {
   }
 };
 SpectreFooterLinkElement.properties = {
+  ...hoverFocusStateProperties,
   active: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   href: { type: String }
@@ -3777,6 +4444,8 @@ function defineSpectreFooterLink(tagName = "sp-footer-link") {
   customElements.define(tagName, SpectreFooterLinkElement);
   return SpectreFooterLinkElement;
 }
+
+// src/utils/focus.ts
 var FOCUSABLE_SELECTOR = [
   "a[href]",
   "button:not([disabled])",
@@ -3785,9 +4454,34 @@ var FOCUSABLE_SELECTOR = [
   "textarea:not([disabled])",
   '[tabindex]:not([tabindex="-1"])'
 ].join(",");
+function getFocusableElements(root) {
+  if (!root) {
+    return [];
+  }
+  return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+function trapFocus(event, root) {
+  const focusable = getFocusableElements(root);
+  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();
+  }
+}
 var SpectreModalElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.fullWidth = false;
     this.open = false;
     this.previouslyFocusedElement = null;
@@ -3800,7 +4494,7 @@ var SpectreModalElement = class extends SpectreProjectableElement {
         return;
       }
       if (event.key === "Tab") {
-        this.trapFocus(event);
+        trapFocus(event, this.modalElement);
       }
     };
   }
@@ -3827,6 +4521,12 @@ var SpectreModalElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-modal-native") || el.hasAttribute("data-sp-modal-overlay");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("fullWidth") && this.fullWidth == null) {
       this.fullWidth = false;
     }
@@ -3858,34 +4558,10 @@ var SpectreModalElement = class extends SpectreProjectableElement {
   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;
+    const [first] = getFocusableElements(this.modalElement);
     (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;
@@ -3898,6 +4574,12 @@ var SpectreModalElement = class extends SpectreProjectableElement {
   }
   get modalClasses() {
     return getModalClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       open: this.open ?? false,
       fullWidth: this.fullWidth ?? false
     });
@@ -3933,6 +4615,8 @@ var SpectreModalElement = class extends SpectreProjectableElement {
   }
 };
 SpectreModalElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   open: { type: Boolean, reflect: true }
 };
@@ -3947,6 +4631,8 @@ function defineSpectreModal(tagName = "sp-modal") {
 var SpectreNavElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.align = void 0;
     this.bordered = false;
     this.fullWidth = false;
@@ -3966,9 +4652,9 @@ var SpectreNavElement = class extends SpectreProjectableElement {
     super.title = value;
   }
   connectedCallback() {
-    var _a;
+    var _a5;
     super.connectedCallback();
-    (_a = this.style).display || (_a.display = "block");
+    (_a5 = this.style).display || (_a5.display = "block");
   }
   getContentContainer() {
     return this.querySelector("[data-sp-nav-native]");
@@ -3981,6 +4667,12 @@ var SpectreNavElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-nav-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("bordered") && this.bordered == null) {
       this.bordered = false;
     }
@@ -3996,6 +4688,12 @@ var SpectreNavElement = class extends SpectreProjectableElement {
   }
   get navClasses() {
     const recipeClasses = getNavClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       bordered: this.bordered ?? false,
       fullWidth: this.fullWidth ?? false,
       sticky: this.sticky ?? false,
@@ -4004,6 +4702,12 @@ var SpectreNavElement = class extends SpectreProjectableElement {
     const utilityClasses = sanitizeUtilityClasses(this.innerClass);
     return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    applyPartClasses(childElements(this.projectedContent), {
+      links: getNavLinksClasses()
+    });
+  }
   render() {
     return html`<nav
       aria-label="${ifDefined(this.forwardedAriaLabel)}"
@@ -4017,6 +4721,8 @@ var SpectreNavElement = class extends SpectreProjectableElement {
   }
 };
 SpectreNavElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   align: { type: String, reflect: true },
   bordered: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
@@ -4034,12 +4740,20 @@ function defineSpectreNav(tagName = "sp-nav") {
 var SpectreNavItemElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.focused = false;
+    this.hovered = false;
+    this.accent = void 0;
+    this.accentColor = void 0;
+    this.active = false;
+    this.disabled = false;
     this.dropdown = false;
+    this.fullWidth = false;
     this.href = void 0;
     this.label = void 0;
     this.mega = false;
     this.open = false;
     this.placement = "bottom-start";
+    this.viewport = false;
     this.triggerContent = [];
     this.menuContent = [];
     this.handleDocumentClick = (event) => {
@@ -4137,6 +4851,24 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
     this.contentObserver = void 0;
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
+    if (changedProperties.has("active") && this.active == null) {
+      this.active = false;
+    }
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("viewport") && this.viewport == null) {
+      this.viewport = false;
+    }
     if (changedProperties.has("dropdown") && this.dropdown == null) {
       this.dropdown = false;
     }
@@ -4150,6 +4882,14 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
       this.placement = "bottom-start";
     }
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    applyPartClasses(childElements(this.menuContent), {
+      divider: getDropdownDividerClasses(),
+      header: getDropdownHeaderClasses(),
+      item: getDropdownItemClasses()
+    });
+  }
   get triggerElement() {
     return this.querySelector("[data-sp-nav-item-trigger]");
   }
@@ -4175,23 +4915,40 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
     this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
   }
   get wrapperClasses() {
-    return getDropdownClasses({ mega: this.mega ?? false });
+    return getDropdownClasses({
+      fullWidth: this.fullWidth ?? false,
+      mega: this.mega ?? false,
+      viewport: this.viewport ?? false
+    });
   }
   get menuClasses() {
     return getDropdownMenuClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       mega: this.mega ?? false,
+      viewport: this.viewport ?? false,
       open: this.open ?? false,
       placement: this.placement
     });
   }
   get navLinkClasses() {
-    return getNavLinkClasses();
+    return getNavLinkClasses({
+      ...hoverFocusStates(this),
+      active: this.active ?? false,
+      disabled: this.disabled ?? false
+    });
   }
   renderLink() {
     return html`<a
+      aria-current="${ifDefined(this.active ? "page" : void 0)}"
+      aria-disabled="${ifDefined(this.disabled ? "true" : void 0)}"
       aria-label="${ifDefined(this.forwardedAriaLabel)}"
       class="${this.navLinkClasses}"
-      href="${ifDefined(this.href)}"
+      href="${ifDefined(this.disabled ? void 0 : this.href)}"
       id="${ifDefined(this.id || void 0)}"
       title="${ifDefined(this.title || void 0)}"
       >${this.hasMenuContent ? this.menuContent : this.label}</a
@@ -4209,6 +4966,7 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
         aria-label="${ifDefined(this.forwardedAriaLabel ?? this.label)}"
         class="${this.navLinkClasses}"
         data-sp-nav-item-trigger
+        ?disabled="${this.disabled ?? false}"
         type="button"
         @click="${() => this.toggle()}"
       >
@@ -4224,12 +4982,19 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
   }
 };
 SpectreNavItemElement.properties = {
+  ...hoverFocusStateProperties,
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
+  active: { type: Boolean, reflect: true },
+  disabled: { type: Boolean, reflect: true },
   dropdown: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   href: { type: String },
   label: { type: String },
   mega: { type: Boolean, reflect: true },
   open: { type: Boolean, reflect: true },
-  placement: { type: String, reflect: true }
+  placement: { type: String, reflect: true },
+  viewport: { type: Boolean, reflect: true }
 };
 function defineSpectreNavItem(tagName = "sp-nav-item") {
   const existingElement = customElements.get(tagName);
@@ -4332,6 +5097,20 @@ var SpectreSidebarElement = class extends SpectreProjectableElement {
   get sidebarClasses() {
     return getSidebarClasses({ bordered: this.bordered ?? false });
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const elements = childElements(this.projectedContent);
+    applyPartClasses(elements, {
+      group: getSidebarGroupClasses(),
+      header: getSidebarHeaderClasses()
+    });
+    elements.filter((element) => element.getAttribute("slot") === "group").forEach((group) => {
+      const summary = group.querySelector(":scope > summary");
+      summary?.classList.add(
+        ...getSidebarGroupSummaryClasses().split(/\s+/).filter(Boolean)
+      );
+    });
+  }
   render() {
     return html`${this.hideToggle ? nothing : html`<button
               aria-expanded="${this.open ? "true" : "false"}"
@@ -4376,6 +5155,8 @@ function defineSpectreSidebar(tagName = "sp-sidebar") {
 var SpectreSidebarLinkElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.focused = false;
+    this.hovered = false;
     this.active = false;
     this.disabled = false;
     this.href = void 0;
@@ -4416,6 +5197,7 @@ var SpectreSidebarLinkElement = class extends SpectreProjectableElement {
   }
   get sidebarLinkClasses() {
     return getSidebarLinkClasses({
+      ...hoverFocusStates(this),
       active: this.active ?? false,
       disabled: this.disabled ?? false,
       level: this.level
@@ -4438,6 +5220,7 @@ var SpectreSidebarLinkElement = class extends SpectreProjectableElement {
   }
 };
 SpectreSidebarLinkElement.properties = {
+  ...hoverFocusStateProperties,
   active: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   href: { type: String },
@@ -4567,6 +5350,8 @@ function defineSpectreSidebarToggle(tagName = "sp-sidebar-toggle") {
 var SpectreToastElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.dismissed = false;
     this.fullWidth = false;
     this.variant = "info";
@@ -4650,6 +5435,12 @@ var SpectreToastElement = class extends SpectreBaseElement {
     this.contentObserver = void 0;
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("dismissed") && this.dismissed == null) {
       this.dismissed = false;
     }
@@ -4696,6 +5487,12 @@ var SpectreToastElement = class extends SpectreBaseElement {
   }
   get toastClasses() {
     return getToastClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       variant: this.variant,
       dismissed: this.dismissed ?? false,
       fullWidth: this.fullWidth ?? false
@@ -4723,6 +5520,8 @@ var SpectreToastElement = class extends SpectreBaseElement {
   }
 };
 SpectreToastElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   autoDismiss: { attribute: "auto-dismiss", type: Number },
   dismissed: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
@@ -4739,6 +5538,8 @@ function defineSpectreToast(tagName = "sp-toast") {
 var SpectreTooltipElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.placement = "top";
     this.visible = false;
     this.triggerContent = [];
@@ -4795,12 +5596,12 @@ var SpectreTooltipElement = class extends SpectreBaseElement {
     return hasMeaningfulContent(this.tooltipContent);
   }
   connectedCallback() {
-    var _a, _b;
+    var _a5, _b5;
     super.connectedCallback();
     this.syncProjectedContent();
     this.startContentObserver();
-    (_a = this.style).position || (_a.position = "relative");
-    (_b = this.style).display || (_b.display = "inline-block");
+    (_a5 = this.style).position || (_a5.position = "relative");
+    (_b5 = this.style).display || (_b5.display = "inline-block");
   }
   disconnectedCallback() {
     this.stopContentObserver();
@@ -4827,6 +5628,12 @@ var SpectreTooltipElement = class extends SpectreBaseElement {
     this.contentObserver = void 0;
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("placement") && (this.placement == null || !isTooltipPlacement(this.placement))) {
       this.placement = "top";
     }
@@ -4850,6 +5657,12 @@ var SpectreTooltipElement = class extends SpectreBaseElement {
   }
   get tooltipClasses() {
     return getTooltipClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       placement: this.placement,
       visible: this.visible ?? false
     });
@@ -4877,6 +5690,8 @@ var SpectreTooltipElement = class extends SpectreBaseElement {
   }
 };
 SpectreTooltipElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   placement: { type: String, reflect: true },
   visible: { type: Boolean, reflect: true }
 };
@@ -4901,11 +5716,23 @@ var LEVEL_TAGS = {
 var SpectreTextElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.displayLevel = void 0;
+    this.headingLevel = void 0;
     this.level = "p";
+    this.preset = void 0;
     this.size = "md";
     this.variant = "default";
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("displayLevel") && this.displayLevel != null && !isDisplayLevel(this.displayLevel)) {
+      this.displayLevel = void 0;
+    }
+    if (changedProperties.has("headingLevel") && this.headingLevel != null && !isHeadingLevel(this.headingLevel)) {
+      this.headingLevel = void 0;
+    }
+    if (changedProperties.has("preset") && this.preset != null && !isTextPreset(this.preset)) {
+      this.preset = void 0;
+    }
     if (changedProperties.has("family") && !isTextFamily(this.family)) {
       this.family = void 0;
     }
@@ -4944,19 +5771,34 @@ var SpectreTextElement = class extends SpectreProjectableElement {
     const el = node;
     return el.hasAttribute("data-sp-text-native");
   }
-  render() {
-    const tag = LEVEL_TAGS[this.level ?? "p"];
-    const textClasses = getTextClasses({
+  // A typography preset replaces the text recipe: each sets its own size,
+  // weight, and color.
+  get textClasses() {
+    const level = this.level ?? "p";
+    switch (this.preset) {
+      case "heading":
+        return getHeadingClasses({
+          level: this.headingLevel ?? (isHeadingLevel(level) ? level : "h2")
+        });
+      case "display":
+        return getDisplayClasses({ level: this.displayLevel ?? 1 });
+      case "lead":
+        return getLeadClasses();
+    }
+    return getTextClasses({
       ...this.family !== void 0 && { family: this.family },
       size: this.size ?? "md",
       ...this.transform !== void 0 && { transform: this.transform },
       variant: this.variant ?? "default"
     });
+  }
+  render() {
+    const tag = LEVEL_TAGS[this.level ?? "p"];
     return html$1`<${tag}
       aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
-      class="${textClasses}"
+      class="${this.textClasses}"
       data-sp-text-native
       id="${ifDefined(this.id || void 0)}"
       title="${ifDefined(this.title || void 0)}"
@@ -4964,8 +5806,11 @@ var SpectreTextElement = class extends SpectreProjectableElement {
   }
 };
 SpectreTextElement.properties = {
+  displayLevel: { attribute: "display-level", type: Number, reflect: true },
   family: { type: String, reflect: true },
+  headingLevel: { attribute: "heading-level", type: String, reflect: true },
   level: { type: String, reflect: true },
+  preset: { type: String, reflect: true },
   size: { type: String, reflect: true },
   transform: { type: String, reflect: true },
   variant: { type: String, reflect: true }
@@ -4978,6 +5823,2813 @@ function defineSpectreText(tagName = "sp-text") {
   customElements.define(tagName, SpectreTextElement);
   return SpectreTextElement;
 }
+var SpectreTabsElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+    this.selectedIndex = 0;
+    this.variant = "line";
+    this.vertical = false;
+    this.baseId = createUniqueId("sp-tabs");
+    this.projection = new ProjectionController(this, [
+      "data-sp-tabs-native"
+    ]);
+    this.handlePanelChange = (event) => {
+      event.stopPropagation();
+      this.requestUpdate();
+    };
+    this.handleKeydown = async (event) => {
+      const enabled = this.panels.map((panel, index) => panel.disabled ? -1 : index).filter((index) => index >= 0);
+      if (enabled.length === 0) {
+        return;
+      }
+      const position = enabled.indexOf(this.activeIndex);
+      const previousKey = this.vertical ? "ArrowUp" : "ArrowLeft";
+      const nextKey = this.vertical ? "ArrowDown" : "ArrowRight";
+      let target;
+      switch (event.key) {
+        case previousKey:
+          target = enabled[(position - 1 + enabled.length) % enabled.length];
+          break;
+        case nextKey:
+          target = enabled[(position + 1) % enabled.length];
+          break;
+        case "Home":
+          target = enabled[0];
+          break;
+        case "End":
+          target = enabled[enabled.length - 1];
+          break;
+        default:
+          return;
+      }
+      if (target === void 0) {
+        return;
+      }
+      event.preventDefault();
+      this.select(target);
+      await this.updateComplete;
+      this.tabButtons[target]?.focus();
+    };
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+    this.addEventListener("sp-tab-panel-change", this.handlePanelChange);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("sp-tab-panel-change", this.handlePanelChange);
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("selectedIndex")) {
+      this.selectedIndex = normalizeInt(this.selectedIndex, 0);
+    }
+    if (changedProperties.has("variant") && (this.variant == null || !isTabsVariant(this.variant))) {
+      this.variant = "line";
+    }
+    if (changedProperties.has("vertical") && this.vertical == null) {
+      this.vertical = false;
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const activeIndex = this.activeIndex;
+    this.panels.forEach((panel, index) => {
+      panel.selected = index === activeIndex;
+      panel.tabId = this.tabId(index);
+    });
+  }
+  get panels() {
+    return this.projection.elements().filter(
+      (element) => isSpectreKind(element, "tab-panel")
+    );
+  }
+  // Falls back to the first enabled panel when the requested one is missing
+  // or disabled; -1 when every panel is disabled.
+  get activeIndex() {
+    const panels = this.panels;
+    const index = this.selectedIndex ?? 0;
+    if (panels[index] && !panels[index].disabled) {
+      return index;
+    }
+    return panels.findIndex((panel) => !panel.disabled);
+  }
+  tabId(index) {
+    return `${this.baseId}-tab-${index}`;
+  }
+  get tabButtons() {
+    return Array.from(
+      this.querySelectorAll("[data-sp-tabs-tab]")
+    ).filter(
+      (button) => button.closest("[data-sp-tabs-native]") === this.native
+    );
+  }
+  get native() {
+    return this.querySelector("[data-sp-tabs-native]");
+  }
+  select(index) {
+    const panel = this.panels[index];
+    if (!panel || panel.disabled || index === this.activeIndex) {
+      return;
+    }
+    this.selectedIndex = index;
+    this.dispatchEvent(
+      new CustomEvent("sp-change", { bubbles: true, detail: { index } })
+    );
+  }
+  get tabsClasses() {
+    return getTabsClasses({
+      fullWidth: this.fullWidth ?? false,
+      variant: this.variant,
+      vertical: this.vertical ?? false
+    });
+  }
+  render() {
+    const panels = this.panels;
+    const activeIndex = this.activeIndex;
+    return html`<div
+      class="${this.tabsClasses}"
+      data-sp-tabs-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      <div
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+        aria-orientation="${ifDefined(this.vertical ? "vertical" : void 0)}"
+        class="${getTabsListClasses()}"
+        role="tablist"
+        @keydown="${this.handleKeydown}"
+      >
+        ${panels.map((panel, index) => {
+      const active = index === activeIndex;
+      return html`<button
+            aria-controls="${panel.panelId}"
+            aria-selected="${active ? "true" : "false"}"
+            class="${getTabsItemClasses({
+        active,
+        disabled: panel.disabled ?? false
+      })}"
+            data-sp-tabs-tab
+            ?disabled="${panel.disabled ?? false}"
+            id="${this.tabId(index)}"
+            role="tab"
+            tabindex="${active ? "0" : "-1"}"
+            type="button"
+            @click="${() => this.select(index)}"
+          >
+            ${panel.label ?? ""}
+          </button>`;
+    })}
+      </div>
+      ${this.projection.nodes()}
+    </div>`;
+  }
+};
+SpectreTabsElement.properties = {
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  selectedIndex: { attribute: "selected-index", type: Number, reflect: true },
+  variant: { type: String, reflect: true },
+  vertical: { type: Boolean, reflect: true }
+};
+function defineSpectreTabs(tagName = "sp-tabs") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreTabsElement);
+  return SpectreTabsElement;
+}
+var _a, _b;
+var SpectreTabPanelElement = class extends (_b = SpectreBaseElement, _a = spectreKindKey, _b) {
+  constructor() {
+    super(...arguments);
+    this[_a] = "tab-panel";
+    this.disabled = false;
+    this.label = void 0;
+    // Owned by the parent `sp-tabs`, which sets it from its `selectedIndex`.
+    this.selected = false;
+    this.tabId = void 0;
+    this.generatedId = createUniqueId("sp-tab-panel");
+    this.projection = new ProjectionController(this, [
+      "data-sp-tab-panel-native"
+    ]);
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  get panelId() {
+    return this.id || this.generatedId;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "contents");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("label") || changedProperties.has("disabled")) {
+      this.dispatchEvent(
+        new CustomEvent("sp-tab-panel-change", { bubbles: true })
+      );
+    }
+  }
+  render() {
+    return html`<div
+      aria-labelledby="${ifDefined(this.tabId)}"
+      class="${getTabsPanelClasses()}"
+      data-sp-tab-panel-native
+      ?hidden="${!this.selected}"
+      id="${this.panelId}"
+      role="tabpanel"
+      tabindex="0"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.projection.nodes()}
+    </div>`;
+  }
+};
+SpectreTabPanelElement.properties = {
+  disabled: { type: Boolean, reflect: true },
+  label: { type: String },
+  selected: { type: Boolean, reflect: true },
+  tabId: { attribute: false }
+};
+function defineSpectreTabPanel(tagName = "sp-tab-panel") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreTabPanelElement);
+  return SpectreTabPanelElement;
+}
+var SpectreAccordionElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.flush = false;
+    this.multiple = false;
+    this.projection = new ProjectionController(this, [
+      "data-sp-accordion-native"
+    ]);
+    this.handleItemOpen = (event) => {
+      if (this.multiple) {
+        return;
+      }
+      const items = this.items;
+      const opened = items.find((item) => item === event.target);
+      if (!opened) {
+        return;
+      }
+      items.forEach((item) => {
+        if (item !== opened) {
+          item.open = false;
+        }
+      });
+    };
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+    this.addEventListener("sp-open", this.handleItemOpen);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("sp-open", this.handleItemOpen);
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("flush") && this.flush == null) {
+      this.flush = false;
+    }
+    if (changedProperties.has("multiple") && this.multiple == null) {
+      this.multiple = false;
+    }
+  }
+  get items() {
+    return this.projection.elements().filter(
+      (element) => isSpectreKind(element, "accordion-item")
+    );
+  }
+  render() {
+    return html`<div
+      class="${getAccordionClasses({ flush: this.flush ?? false })}"
+      data-sp-accordion-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.projection.nodes()}
+    </div>`;
+  }
+};
+SpectreAccordionElement.properties = {
+  flush: { type: Boolean, reflect: true },
+  multiple: { type: Boolean, reflect: true }
+};
+function defineSpectreAccordion(tagName = "sp-accordion") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreAccordionElement);
+  return SpectreAccordionElement;
+}
+var _a2, _b2;
+var SpectreAccordionItemElement = class extends (_b2 = SpectreBaseElement, _a2 = spectreKindKey, _b2) {
+  constructor() {
+    super(...arguments);
+    this[_a2] = "accordion-item";
+    this.focused = false;
+    this.hovered = false;
+    this.disabled = false;
+    this.label = void 0;
+    this.open = false;
+    this.generatedId = createUniqueId("sp-accordion-item");
+    this.appliedHostClasses = "";
+    this.projection = new ProjectionController(this, [
+      "data-sp-accordion-item-header",
+      "data-sp-accordion-item-panel"
+    ]);
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("open") && this.open == null) {
+      this.open = false;
+    }
+    const hostClasses = getAccordionItemClasses({
+      disabled: this.disabled ?? false,
+      expanded: this.open ?? false
+    });
+    replaceClasses(this, this.appliedHostClasses, hostClasses);
+    this.appliedHostClasses = hostClasses;
+  }
+  get headerId() {
+    return this.id || `${this.generatedId}-header`;
+  }
+  get panelId() {
+    return `${this.generatedId}-panel`;
+  }
+  toggle() {
+    if (this.disabled) {
+      return;
+    }
+    this.open = !this.open;
+    this.dispatchEvent(
+      new CustomEvent(this.open ? "sp-open" : "sp-close", { bubbles: true })
+    );
+  }
+  render() {
+    const expanded = this.open ?? false;
+    const disabled = this.disabled ?? false;
+    return html`<button
+        aria-controls="${this.panelId}"
+        aria-expanded="${expanded ? "true" : "false"}"
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        class="${getAccordionHeaderClasses({
+      ...hoverFocusStates(this),
+      disabled,
+      expanded
+    })}"
+        data-sp-accordion-item-header
+        ?disabled="${disabled}"
+        id="${this.headerId}"
+        title="${ifDefined(this.title || void 0)}"
+        type="button"
+        @click="${() => this.toggle()}"
+      >
+        ${this.projection.has("header") ? this.projection.nodes("header") : this.label ?? ""}
+        <span class="${getAccordionIconClasses({ expanded })}"
+          >${renderIcon("chevronDown")}</span
+        >
+      </button>
+      <div
+        aria-labelledby="${this.headerId}"
+        class="${getAccordionPanelClasses({ expanded })}"
+        data-sp-accordion-item-panel
+        ?hidden="${!expanded}"
+        id="${this.panelId}"
+        role="region"
+      >
+        ${this.projection.nodes()}
+      </div>`;
+  }
+};
+SpectreAccordionItemElement.properties = {
+  ...hoverFocusStateProperties,
+  disabled: { type: Boolean, reflect: true },
+  label: { type: String },
+  open: { type: Boolean, reflect: true }
+};
+function defineSpectreAccordionItem(tagName = "sp-accordion-item") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreAccordionItemElement);
+  return SpectreAccordionItemElement;
+}
+var SpectreBreadcrumbElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.separator = void 0;
+    this.projection = new ProjectionController(this, [
+      "data-sp-breadcrumb-native"
+    ]);
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const linkClasses = getBreadcrumbLinkClasses();
+    this.crumbs.forEach((crumb) => {
+      if (crumb instanceof HTMLAnchorElement) {
+        crumb.classList.add(linkClasses);
+      }
+    });
+  }
+  get crumbs() {
+    return this.projection.nodes().filter((node) => hasMeaningfulContent([node]));
+  }
+  get navLabel() {
+    if (this.forwardedAriaLabel) {
+      return this.forwardedAriaLabel;
+    }
+    return this.forwardedAriaLabelledBy ? void 0 : "Breadcrumb";
+  }
+  render() {
+    const crumbs = this.crumbs;
+    const separator = this.separator?.trim();
+    return html`<nav
+      aria-label="${ifDefined(this.navLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      data-sp-breadcrumb-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      <ol
+        class="${getBreadcrumbClasses({ customSeparator: Boolean(separator) })}"
+      >
+        ${crumbs.map((crumb, index) => {
+      const current = index === crumbs.length - 1;
+      return html`<li
+            aria-current="${ifDefined(current ? "page" : void 0)}"
+            class="${getBreadcrumbItemClasses({ current })}"
+          >
+            ${separator && index > 0 ? html`<span
+                    aria-hidden="true"
+                    class="${getBreadcrumbSeparatorClasses()}"
+                    >${separator}</span
+                  >` : nothing}${crumb}
+          </li>`;
+    })}
+      </ol>
+    </nav>`;
+  }
+};
+SpectreBreadcrumbElement.properties = {
+  separator: { type: String }
+};
+function defineSpectreBreadcrumb(tagName = "sp-breadcrumb") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreBreadcrumbElement);
+  return SpectreBreadcrumbElement;
+}
+function isInteractiveItem(item) {
+  return Boolean(item.href) || (item.interactive ?? false);
+}
+var SpectreListGroupElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
+    this.flush = false;
+    this.horizontal = false;
+    this.projection = new ProjectionController(this, [
+      "data-sp-list-group-native"
+    ]);
+    this.handleItemChange = (event) => {
+      event.stopPropagation();
+      this.requestUpdate();
+    };
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+    this.addEventListener("sp-list-group-item-change", this.handleItemChange);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("sp-list-group-item-change", this.handleItemChange);
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
+    if (changedProperties.has("flush") && this.flush == null) {
+      this.flush = false;
+    }
+    if (changedProperties.has("horizontal") && this.horizontal == null) {
+      this.horizontal = false;
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.items.forEach((item) => {
+      applyPartClasses(item.children, {
+        heading: getListGroupItemHeadingClasses(),
+        text: getListGroupItemTextClasses()
+      });
+    });
+  }
+  get items() {
+    return this.projection.elements().filter(
+      (element) => isSpectreKind(element, "list-group-item")
+    );
+  }
+  get listClasses() {
+    return getListGroupClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
+      flush: this.flush ?? false,
+      horizontal: this.horizontal ?? false
+    });
+  }
+  itemClasses(item) {
+    return getListGroupItemClasses({
+      ...hoverFocusStates(item),
+      active: item.active ?? false,
+      disabled: item.disabled ?? false,
+      interactive: isInteractiveItem(item),
+      selected: item.selected ?? false
+    });
+  }
+  select(item) {
+    item.dispatchEvent(new CustomEvent("sp-select", { bubbles: true }));
+  }
+  renderRow(item) {
+    const classes = this.itemClasses(item);
+    const current = item.active ? "true" : void 0;
+    const disabled = item.disabled ?? false;
+    const id = item.id || void 0;
+    const label = item.ariaLabel?.trim() || void 0;
+    const title = item.title || void 0;
+    if (item.href) {
+      return html`<a
+        aria-current="${ifDefined(current)}"
+        aria-disabled="${ifDefined(disabled ? "true" : void 0)}"
+        aria-label="${ifDefined(label)}"
+        class="${classes}"
+        data-sp-list-group-row
+        href="${ifDefined(disabled ? void 0 : item.href)}"
+        id="${ifDefined(id)}"
+        target="${ifDefined(item.target)}"
+        title="${ifDefined(title)}"
+        @click="${() => this.select(item)}"
+        >${item}</a
+      >`;
+    }
+    if (item.interactive) {
+      return html`<button
+        aria-current="${ifDefined(current)}"
+        aria-label="${ifDefined(label)}"
+        class="${classes}"
+        data-sp-list-group-row
+        ?disabled="${disabled}"
+        id="${ifDefined(id)}"
+        title="${ifDefined(title)}"
+        type="button"
+        @click="${() => this.select(item)}"
+      >
+        ${item}
+      </button>`;
+    }
+    return html`<div
+      aria-current="${ifDefined(current)}"
+      aria-label="${ifDefined(label)}"
+      class="${classes}"
+      data-sp-list-group-row
+      id="${ifDefined(id)}"
+      title="${ifDefined(title)}"
+    >
+      ${item}
+    </div>`;
+  }
+  render() {
+    const items = this.items;
+    if (!items.some(isInteractiveItem)) {
+      return html`<ul
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+        class="${this.listClasses}"
+        data-sp-list-group-native
+        id="${ifDefined(this.id || void 0)}"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        ${items.map(
+        (item) => html`<li
+              aria-current="${ifDefined(item.active ? "true" : void 0)}"
+              aria-label="${ifDefined(item.ariaLabel?.trim() || void 0)}"
+              class="${this.itemClasses(item)}"
+              data-sp-list-group-row
+              id="${ifDefined(item.id || void 0)}"
+              title="${ifDefined(item.title || void 0)}"
+            >
+              ${item}
+            </li>`
+      )}
+      </ul>`;
+    }
+    return html`<div
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.listClasses}"
+      data-sp-list-group-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${items.map((item) => this.renderRow(item))}
+    </div>`;
+  }
+};
+SpectreListGroupElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
+  flush: { type: Boolean, reflect: true },
+  horizontal: { type: Boolean, reflect: true }
+};
+function defineSpectreListGroup(tagName = "sp-list-group") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreListGroupElement);
+  return SpectreListGroupElement;
+}
+var _a3, _b3;
+var SpectreListGroupItemElement = class extends (_b3 = SpectreBaseElement, _a3 = spectreKindKey, _b3) {
+  constructor() {
+    super(...arguments);
+    this[_a3] = "list-group-item";
+    this.focused = false;
+    this.hovered = false;
+    this.active = false;
+    this.disabled = false;
+    this.href = void 0;
+    this.interactive = false;
+    this.selected = false;
+    this.target = void 0;
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "contents");
+    this.contentObserver = new MutationObserver(() => this.notifyParent());
+    this.contentObserver.observe(this, { childList: true });
+  }
+  disconnectedCallback() {
+    this.contentObserver?.disconnect();
+    this.contentObserver = void 0;
+    super.disconnectedCallback();
+  }
+  notifyParent() {
+    this.dispatchEvent(
+      new CustomEvent("sp-list-group-item-change", { bubbles: true })
+    );
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("active") && this.active == null) {
+      this.active = false;
+    }
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("interactive") && this.interactive == null) {
+      this.interactive = false;
+    }
+    if (changedProperties.has("selected") && this.selected == null) {
+      this.selected = false;
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.notifyParent();
+  }
+  render() {
+    return nothing;
+  }
+};
+SpectreListGroupItemElement.properties = {
+  ...hoverFocusStateProperties,
+  active: { type: Boolean, reflect: true },
+  disabled: { type: Boolean, reflect: true },
+  href: { type: String },
+  interactive: { type: Boolean, reflect: true },
+  selected: { type: Boolean, reflect: true },
+  target: { type: String }
+};
+function defineSpectreListGroupItem(tagName = "sp-list-group-item") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreListGroupItemElement);
+  return SpectreListGroupItemElement;
+}
+var SpectreOffcanvasElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.closeLabel = "Close";
+    this.label = void 0;
+    this.open = false;
+    this.placement = "start";
+    this.previouslyFocusedElement = null;
+    this.titleId = `${createUniqueId("sp-offcanvas")}-title`;
+    this.projection = new ProjectionController(this, [
+      "data-sp-offcanvas-backdrop",
+      "data-sp-offcanvas-native"
+    ]);
+    this.handleDocumentKeydown = (event) => {
+      if (!this.open) {
+        return;
+      }
+      if (event.key === "Escape") {
+        this.close();
+      } else if (event.key === "Tab") {
+        trapFocus(event, this.panelElement);
+      }
+    };
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("keydown", this.handleDocumentKeydown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this.handleDocumentKeydown);
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("closeLabel") && !this.closeLabel) {
+      this.closeLabel = "Close";
+    }
+    if (changedProperties.has("open") && this.open == null) {
+      this.open = false;
+    }
+    if (changedProperties.has("placement") && (this.placement == null || !isOffcanvasPlacement(this.placement))) {
+      this.placement = "start";
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (!changedProperties.has("open")) {
+      return;
+    }
+    if (this.open) {
+      this.previouslyFocusedElement = document.activeElement;
+      this.focusPanel();
+    } else if (this.previouslyFocusedElement) {
+      this.previouslyFocusedElement.focus();
+      this.previouslyFocusedElement = null;
+    }
+  }
+  get panelElement() {
+    return this.querySelector("[data-sp-offcanvas-native]");
+  }
+  // The panel's `visibility` transitions in from `hidden`, so it cannot take
+  // focus until the slide-in finishes unless motion is disabled.
+  focusPanel() {
+    const panel = this.panelElement;
+    const focusFirst = () => {
+      const [first] = getFocusableElements(panel);
+      (first ?? panel)?.focus();
+    };
+    focusFirst();
+    if (panel && !panel.contains(document.activeElement)) {
+      panel.addEventListener(
+        "transitionend",
+        () => {
+          if (this.open) {
+            focusFirst();
+          }
+        },
+        { once: true }
+      );
+    }
+  }
+  close() {
+    if (!this.open) {
+      return;
+    }
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
+  }
+  get hasHeading() {
+    return this.projection.has("header") || Boolean(this.label);
+  }
+  get labelledBy() {
+    if (this.forwardedAriaLabelledBy) {
+      return this.forwardedAriaLabelledBy;
+    }
+    return this.hasHeading && !this.forwardedAriaLabel ? this.titleId : void 0;
+  }
+  render() {
+    const open = this.open ?? false;
+    return html`<div
+        aria-hidden="true"
+        class="${getOffcanvasBackdropClasses({ open })}"
+        data-sp-offcanvas-backdrop
+        @click="${() => this.close()}"
+      ></div>
+      <div
+        aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.labelledBy)}"
+        aria-modal="true"
+        class="${getOffcanvasClasses({
+      open,
+      placement: this.placement
+    })}"
+        data-sp-offcanvas-native
+        id="${ifDefined(this.id || void 0)}"
+        ?inert="${!open}"
+        role="dialog"
+        tabindex="-1"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        <div class="${getOffcanvasHeaderClasses()}">
+          <div id="${ifDefined(this.hasHeading ? this.titleId : void 0)}">
+            ${this.projection.has("header") ? this.projection.nodes("header") : this.label ?? nothing}
+          </div>
+          <button
+            aria-label="${this.closeLabel ?? "Close"}"
+            class="${getButtonClasses({ size: "sm", variant: "ghost" })}"
+            data-sp-offcanvas-close
+            type="button"
+            @click="${() => this.close()}"
+          >
+            ${renderIcon("close")}
+          </button>
+        </div>
+        <div class="${getOffcanvasBodyClasses()}">
+          ${this.projection.nodes()}
+        </div>
+        ${this.projection.has("footer") ? html`<div class="${getOffcanvasFooterClasses()}">
+                ${this.projection.nodes("footer")}
+              </div>` : nothing}
+      </div>`;
+  }
+};
+SpectreOffcanvasElement.properties = {
+  closeLabel: { attribute: "close-label", type: String },
+  label: { type: String },
+  open: { type: Boolean, reflect: true },
+  placement: { type: String, reflect: true }
+};
+function defineSpectreOffcanvas(tagName = "sp-offcanvas") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreOffcanvasElement);
+  return SpectreOffcanvasElement;
+}
+var SpectreCarouselElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.fade = false;
+    this.hideControls = false;
+    this.hideIndicators = false;
+    this.index = 0;
+    this.loop = false;
+    this.nextLabel = "Next slide";
+    this.previousLabel = "Previous slide";
+    this.indexFromScroll = false;
+    this.projection = new ProjectionController(this, [
+      "data-sp-carousel-native"
+    ]);
+    this.handleKeydown = (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        this.goTo(this.activeIndex - 1);
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        this.goTo(this.activeIndex + 1);
+      }
+    };
+    // Native swipes and scroll-snap move the viewport directly; follow them so
+    // the indicators and controls stay in sync.
+    this.handleScroll = (event) => {
+      const viewport = event.currentTarget;
+      if (this.fade || viewport.clientWidth === 0) {
+        return;
+      }
+      const target = Math.round(viewport.scrollLeft / viewport.clientWidth);
+      if (target === this.activeIndex || target >= this.slides.length) {
+        return;
+      }
+      this.indexFromScroll = true;
+      this.index = target;
+      this.dispatchEvent(
+        new CustomEvent("sp-change", { bubbles: true, detail: { index: target } })
+      );
+    };
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("fade") && this.fade == null) {
+      this.fade = false;
+    }
+    if (changedProperties.has("hideControls") && this.hideControls == null) {
+      this.hideControls = false;
+    }
+    if (changedProperties.has("hideIndicators") && this.hideIndicators == null) {
+      this.hideIndicators = false;
+    }
+    if (changedProperties.has("index")) {
+      this.index = normalizeInt(this.index, 0);
+    }
+    if (changedProperties.has("loop") && this.loop == null) {
+      this.loop = false;
+    }
+    if (changedProperties.has("nextLabel") && !this.nextLabel) {
+      this.nextLabel = "Next slide";
+    }
+    if (changedProperties.has("previousLabel") && !this.previousLabel) {
+      this.previousLabel = "Previous slide";
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.slides.forEach((slide2) => {
+      applyPartClasses(slide2.querySelectorAll("[slot]"), {
+        caption: getCarouselCaptionClasses()
+      });
+    });
+    const scrolledByUser = this.indexFromScroll;
+    this.indexFromScroll = false;
+    if (this.fade || scrolledByUser || !changedProperties.has("index")) {
+      return;
+    }
+    const slide = this.slideWrappers[this.activeIndex];
+    if (slide && typeof this.viewport?.scrollTo === "function") {
+      this.viewport.scrollTo({ left: slide.offsetLeft });
+    }
+  }
+  get slides() {
+    return this.projection.elements();
+  }
+  get activeIndex() {
+    const last = this.slides.length - 1;
+    return Math.max(0, Math.min(this.index ?? 0, last));
+  }
+  get viewport() {
+    return this.querySelector("[data-sp-carousel-viewport]");
+  }
+  get slideWrappers() {
+    const viewport = this.viewport;
+    if (!viewport) {
+      return [];
+    }
+    return Array.from(viewport.children).filter(
+      (child) => child.hasAttribute("data-sp-carousel-slide")
+    );
+  }
+  goTo(target) {
+    const count = this.slides.length;
+    if (count === 0) {
+      return;
+    }
+    let next = target;
+    if (this.loop) {
+      next = (target % count + count) % count;
+    } else if (target < 0 || target >= count) {
+      return;
+    }
+    if (next === this.activeIndex) {
+      return;
+    }
+    this.index = next;
+    this.dispatchEvent(
+      new CustomEvent("sp-change", { bubbles: true, detail: { index: next } })
+    );
+  }
+  get regionLabel() {
+    if (this.forwardedAriaLabel) {
+      return this.forwardedAriaLabel;
+    }
+    return this.forwardedAriaLabelledBy ? void 0 : "Carousel";
+  }
+  render() {
+    const slides = this.slides;
+    const count = slides.length;
+    const active = this.activeIndex;
+    const loop = this.loop ?? false;
+    return html`<div
+      aria-label="${ifDefined(this.regionLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      aria-roledescription="carousel"
+      class="${getCarouselClasses({ fade: this.fade ?? false })}"
+      data-sp-carousel-native
+      id="${ifDefined(this.id || void 0)}"
+      role="region"
+      title="${ifDefined(this.title || void 0)}"
+      @keydown="${this.handleKeydown}"
+    >
+      <div
+        aria-live="polite"
+        class="${getCarouselViewportClasses()}"
+        data-sp-carousel-viewport
+        @scroll="${this.handleScroll}"
+      >
+        ${slides.map(
+      (slide, index) => html`<div
+              aria-label="${index + 1} of ${count}"
+              aria-roledescription="slide"
+              class="${getCarouselSlideClasses({ active: index === active })}"
+              data-sp-carousel-slide
+              role="group"
+            >
+              ${slide}
+            </div>`
+    )}
+      </div>
+      ${!this.hideControls && count > 1 ? html`<button
+                aria-label="${this.previousLabel ?? "Previous slide"}"
+                class="${getCarouselControlClasses({ direction: "prev" })}"
+                data-sp-carousel-prev
+                ?disabled="${!loop && active === 0}"
+                type="button"
+                @click="${() => this.goTo(active - 1)}"
+              >
+                ${renderIcon("chevronLeft", "sp-icon-md")}
+              </button>
+              <button
+                aria-label="${this.nextLabel ?? "Next slide"}"
+                class="${getCarouselControlClasses({ direction: "next" })}"
+                data-sp-carousel-next
+                ?disabled="${!loop && active === count - 1}"
+                type="button"
+                @click="${() => this.goTo(active + 1)}"
+              >
+                ${renderIcon("chevronRight", "sp-icon-md")}
+              </button>` : nothing}
+      ${!this.hideIndicators && count > 1 ? html`<div class="${getCarouselIndicatorsClasses()}">
+              ${slides.map(
+      (_, index) => html`<button
+                    aria-current="${ifDefined(
+        index === active ? "true" : void 0
+      )}"
+                    aria-label="Go to slide ${index + 1}"
+                    class="${getCarouselIndicatorClasses({
+        active: index === active
+      })}"
+                    data-sp-carousel-indicator
+                    type="button"
+                    @click="${() => this.goTo(index)}"
+                  ></button>`
+    )}
+            </div>` : nothing}
+    </div>`;
+  }
+};
+SpectreCarouselElement.properties = {
+  fade: { type: Boolean, reflect: true },
+  hideControls: { attribute: "hide-controls", type: Boolean, reflect: true },
+  hideIndicators: {
+    attribute: "hide-indicators",
+    type: Boolean,
+    reflect: true
+  },
+  index: { type: Number, reflect: true },
+  loop: { type: Boolean, reflect: true },
+  nextLabel: { attribute: "next-label", type: String },
+  previousLabel: { attribute: "previous-label", type: String }
+};
+function defineSpectreCarousel(tagName = "sp-carousel") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreCarouselElement);
+  return SpectreCarouselElement;
+}
+var SpectreTableElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.bordered = false;
+    this.hoverable = false;
+    this.size = "md";
+    this.striped = false;
+    this.appliedTableClasses = /* @__PURE__ */ new WeakMap();
+    this.projection = new ProjectionController(this, [
+      "data-sp-table-native"
+    ]);
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("bordered") && this.bordered == null) {
+      this.bordered = false;
+    }
+    if (changedProperties.has("hoverable") && this.hoverable == null) {
+      this.hoverable = false;
+    }
+    if (changedProperties.has("size") && (this.size == null || !isTableSize(this.size))) {
+      this.size = "md";
+    }
+    if (changedProperties.has("striped") && this.striped == null) {
+      this.striped = false;
+    }
+  }
+  // The authored <table> is styled in place: the HTML parser drops table
+  // parts that are not inside a <table>, so the component cannot render one.
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const classes = getTableClasses({
+      bordered: this.bordered ?? false,
+      hoverable: this.hoverable ?? false,
+      size: this.size,
+      striped: this.striped ?? false
+    });
+    this.projection.elements().filter((element) => element instanceof HTMLTableElement).forEach((table) => {
+      replaceClasses(
+        table,
+        this.appliedTableClasses.get(table) ?? "",
+        classes
+      );
+      this.appliedTableClasses.set(table, classes);
+      table.querySelectorAll("tr").forEach((row) => this.styleRow(row));
+    });
+  }
+  // Contextual rows opt in with `data-variant`; `aria-selected` is styled by
+  // the recipe CSS directly.
+  styleRow(row) {
+    const variant = row.dataset.variant;
+    const classes = isTableRowVariant(variant) ? getTableRowClasses({ variant }) : "";
+    replaceClasses(row, this.appliedTableClasses.get(row) ?? "", classes);
+    this.appliedTableClasses.set(row, classes);
+  }
+  render() {
+    const labelled = Boolean(
+      this.forwardedAriaLabel || this.forwardedAriaLabelledBy
+    );
+    return html`<div
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${getTableWrapperClasses()}"
+      data-sp-table-native
+      id="${ifDefined(this.id || void 0)}"
+      role="${ifDefined(labelled ? "region" : void 0)}"
+      tabindex="${ifDefined(labelled ? "0" : void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.projection.nodes()}
+    </div>`;
+  }
+};
+SpectreTableElement.properties = {
+  bordered: { type: Boolean, reflect: true },
+  hoverable: { type: Boolean, reflect: true },
+  size: { type: String, reflect: true },
+  striped: { type: Boolean, reflect: true }
+};
+function defineSpectreTable(tagName = "sp-table") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreTableElement);
+  return SpectreTableElement;
+}
+function pageRange(page, total, siblings) {
+  const pages = (from, to) => Array.from({ length: to - from + 1 }, (_, index) => from + index);
+  if (total <= siblings * 2 + 5) {
+    return pages(1, total);
+  }
+  const left = Math.max(page - siblings, 1);
+  const right = Math.min(page + siblings, total);
+  const leftGap = left > 3;
+  const rightGap = right < total - 2;
+  const edgeCount = siblings * 2 + 3;
+  if (!leftGap) {
+    return [...pages(1, edgeCount), "ellipsis", total];
+  }
+  if (!rightGap) {
+    return [1, "ellipsis", ...pages(total - edgeCount + 1, total)];
+  }
+  return [1, "ellipsis", ...pages(left, right), "ellipsis", total];
+}
+var SpectrePaginationElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.hrefTemplate = void 0;
+    this.nextLabel = "Next";
+    this.page = 1;
+    this.previousLabel = "Previous";
+    this.siblings = 1;
+    this.size = "md";
+    this.total = 1;
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("total")) {
+      this.total = normalizeInt(this.total, 1, 1);
+    }
+    if (changedProperties.has("page") || changedProperties.has("total")) {
+      const page = normalizeInt(this.page, 1, 1) ?? 1;
+      this.page = Math.min(page, this.total ?? 1);
+    }
+    if (changedProperties.has("siblings")) {
+      this.siblings = normalizeInt(this.siblings, 1);
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
+      this.size = "md";
+    }
+    if (changedProperties.has("previousLabel") && !this.previousLabel) {
+      this.previousLabel = "Previous";
+    }
+    if (changedProperties.has("nextLabel") && !this.nextLabel) {
+      this.nextLabel = "Next";
+    }
+  }
+  get navLabel() {
+    if (this.forwardedAriaLabel) {
+      return this.forwardedAriaLabel;
+    }
+    return this.forwardedAriaLabelledBy ? void 0 : "Pagination";
+  }
+  goTo(target) {
+    if (target === this.page || target < 1 || target > (this.total ?? 1)) {
+      return;
+    }
+    this.page = target;
+    this.dispatchEvent(
+      new CustomEvent("sp-change", { bubbles: true, detail: { page: target } })
+    );
+  }
+  renderItem(target, content, { active = false, disabled = false, label }) {
+    const classes = getPaginationItemClasses({ active, disabled });
+    const current = active ? "page" : void 0;
+    if (this.hrefTemplate) {
+      if (disabled) {
+        return html`<a aria-disabled="true" class="${classes}">${content}</a>`;
+      }
+      return html`<a
+        aria-current="${ifDefined(current)}"
+        aria-label="${ifDefined(label)}"
+        class="${classes}"
+        href="${this.hrefTemplate.split("{page}").join(String(target))}"
+        @click="${() => this.goTo(target)}"
+        >${content}</a
+      >`;
+    }
+    return html`<button
+      aria-current="${ifDefined(current)}"
+      aria-label="${ifDefined(label)}"
+      class="${classes}"
+      ?disabled="${disabled}"
+      type="button"
+      @click="${() => this.goTo(target)}"
+    >
+      ${content}
+    </button>`;
+  }
+  render() {
+    const page = this.page ?? 1;
+    const total = this.total ?? 1;
+    return html`<nav
+      aria-label="${ifDefined(this.navLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      data-sp-pagination-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      <ul
+        class="${getPaginationClasses({ size: this.size })}"
+      >
+        <li>
+          ${this.renderItem(page - 1, this.previousLabel ?? "Previous", {
+      disabled: page <= 1
+    })}
+        </li>
+        ${pageRange(page, total, this.siblings ?? 1).map(
+      (entry) => entry === "ellipsis" ? html`<li>
+                <span
+                  aria-hidden="true"
+                  class="${getPaginationEllipsisClasses()}"
+                  >…</span
+                >
+              </li>` : html`<li>
+                ${this.renderItem(entry, entry, {
+        active: entry === page,
+        label: `Page ${entry}`
+      })}
+              </li>`
+    )}
+        <li>
+          ${this.renderItem(page + 1, this.nextLabel ?? "Next", {
+      disabled: page >= total
+    })}
+        </li>
+      </ul>
+    </nav>`;
+  }
+};
+SpectrePaginationElement.properties = {
+  hrefTemplate: { attribute: "href-template", type: String },
+  nextLabel: { attribute: "next-label", type: String },
+  page: { type: Number, reflect: true },
+  previousLabel: { attribute: "previous-label", type: String },
+  siblings: { type: Number },
+  size: { type: String, reflect: true },
+  total: { type: Number, reflect: true }
+};
+function defineSpectrePagination(tagName = "sp-pagination") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectrePaginationElement);
+  return SpectrePaginationElement;
+}
+var SpectreStepperElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.current = 0;
+    this.orientation = "horizontal";
+    this.projection = new ProjectionController(this, [
+      "data-sp-stepper-native"
+    ]);
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("current")) {
+      this.current = normalizeInt(this.current, 0);
+    }
+    if (changedProperties.has("orientation") && (this.orientation == null || !isStepperOrientation(this.orientation))) {
+      this.orientation = "horizontal";
+    }
+  }
+  stateFor(index) {
+    const current = this.current ?? 0;
+    if (index < current) {
+      return "done";
+    }
+    return index === current ? "active" : "pending";
+  }
+  render() {
+    return html`<ol
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${getStepperClasses({
+      orientation: this.orientation
+    })}"
+      data-sp-stepper-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.projection.elements().map((step, index) => {
+      const state = this.stateFor(index);
+      return html`<li
+          aria-current="${ifDefined(state === "active" ? "step" : void 0)}"
+          class="${getStepperStepClasses({ state })}"
+          data-state="${state}"
+        >
+          <span aria-hidden="true" class="${getStepperIndicatorClasses()}"
+            >${state === "done" ? renderIcon("check") : index + 1}</span
+          >
+          <span class="${getStepperLabelClasses()}">${step}</span>
+        </li>`;
+    })}
+    </ol>`;
+  }
+};
+SpectreStepperElement.properties = {
+  current: { type: Number, reflect: true },
+  orientation: { type: String, reflect: true }
+};
+function defineSpectreStepper(tagName = "sp-stepper") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreStepperElement);
+  return SpectreStepperElement;
+}
+var SpectreCardBleedElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.edges = void 0;
+    this.padded = void 0;
+    this.projection = new ProjectionController(this, [
+      "data-sp-card-bleed-native"
+    ]);
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("padded") && this.padded != null) {
+      const padded = this.padded;
+      this.padded = padded === "" ? "md" : isSpacingStep(padded) ? padded : void 0;
+    }
+  }
+  // `edges` is a space-separated list of edges, or `all`.
+  get bleedEdges() {
+    const tokens = (this.edges ?? "").split(/\s+/).filter(Boolean);
+    if (tokens.includes("all")) {
+      return "all";
+    }
+    return tokens.filter(
+      (token) => isAccentEdge(token)
+    );
+  }
+  render() {
+    return html`<div
+      class="${getCardBleedClasses({
+      edges: this.bleedEdges,
+      ...this.padded != null && {
+        padded: this.padded
+      }
+    })}"
+      data-sp-card-bleed-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.projection.nodes()}
+    </div>`;
+  }
+};
+SpectreCardBleedElement.properties = {
+  edges: { type: String, reflect: true },
+  padded: { type: String, reflect: true }
+};
+function defineSpectreCardBleed(tagName = "sp-card-bleed") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreCardBleedElement);
+  return SpectreCardBleedElement;
+}
+var SpectreProseElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.projection = new ProjectionController(this, [
+      "data-sp-prose-native"
+    ]);
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+  }
+  render() {
+    return html`<div
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      class="${getProseClasses()}"
+      data-sp-prose-native
+      id="${ifDefined(this.id || void 0)}"
+      role="${ifDefined(this.forwardedAriaLabel ? "region" : void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.projection.nodes()}
+    </div>`;
+  }
+};
+function defineSpectreProse(tagName = "sp-prose") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreProseElement);
+  return SpectreProseElement;
+}
+var SpectreProgressElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.indeterminate = false;
+    this.label = void 0;
+    this.max = 100;
+    this.size = "md";
+    this.value = 0;
+    this.valueText = void 0;
+    this.variant = "brand";
+    this.labelId = `${createUniqueId("sp-progress")}-label`;
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("indeterminate") && this.indeterminate == null) {
+      this.indeterminate = false;
+    }
+    if (changedProperties.has("max") && (typeof this.max !== "number" || !(this.max > 0))) {
+      this.max = 100;
+    }
+    if (changedProperties.has("value") || changedProperties.has("max")) {
+      const value = typeof this.value === "number" ? this.value : 0;
+      this.value = Math.min(Math.max(value, 0), this.max ?? 100);
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
+      this.size = "md";
+    }
+    if (changedProperties.has("variant") && (this.variant == null || !isProgressVariant(this.variant))) {
+      this.variant = "brand";
+    }
+  }
+  get percent() {
+    return (this.value ?? 0) / (this.max ?? 100) * 100;
+  }
+  get labelledBy() {
+    if (this.forwardedAriaLabelledBy) {
+      return this.forwardedAriaLabelledBy;
+    }
+    return this.label && !this.forwardedAriaLabel ? this.labelId : void 0;
+  }
+  render() {
+    const indeterminate = this.indeterminate ?? false;
+    return html`${this.label ? html`<span class="${getProgressLabelClasses()}" id="${this.labelId}"
+              >${this.label}</span
+            >` : nothing}
+      <div
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.labelledBy)}"
+        aria-valuemax="${this.max ?? 100}"
+        aria-valuemin="0"
+        aria-valuenow="${ifDefined(indeterminate ? void 0 : this.value)}"
+        aria-valuetext="${ifDefined(this.valueText || void 0)}"
+        class="${getProgressClasses({ size: this.size })}"
+        data-sp-progress-native
+        id="${ifDefined(this.id || void 0)}"
+        role="progressbar"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        <div
+          class="${getProgressBarClasses({
+      indeterminate,
+      variant: this.variant
+    })}"
+          data-sp-progress-bar
+          style="${styleMap(indeterminate ? {} : { width: `${this.percent}%` })}"
+        ></div>
+      </div>`;
+  }
+};
+SpectreProgressElement.properties = {
+  indeterminate: { type: Boolean, reflect: true },
+  label: { type: String },
+  max: { type: Number, reflect: true },
+  size: { type: String, reflect: true },
+  value: { type: Number, reflect: true },
+  valueText: { attribute: "value-text", type: String },
+  variant: { type: String, reflect: true }
+};
+function defineSpectreProgress(tagName = "sp-progress") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreProgressElement);
+  return SpectreProgressElement;
+}
+var SpectreSwitchElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.checked = false;
+    this.disabled = false;
+    this.focused = false;
+    this.form = void 0;
+    this.label = void 0;
+    this.name = void 0;
+    this.required = false;
+    this.size = "md";
+    this.value = "on";
+    this.projection = new ProjectionController(this, [
+      "data-sp-switch-label"
+    ]);
+  }
+  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("checked") && this.checked == null) {
+      this.checked = false;
+    }
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("required") && this.required == null) {
+      this.required = false;
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
+      this.size = "md";
+    }
+  }
+  get nativeInput() {
+    return this.querySelector("[data-sp-switch-native]");
+  }
+  focus(options) {
+    this.nativeInput?.focus(options);
+  }
+  blur() {
+    this.nativeInput?.blur();
+  }
+  handleChange(event) {
+    this.checked = event.currentTarget.checked;
+  }
+  render() {
+    const disabled = this.disabled ?? false;
+    const labelContent = this.projection.has() ? this.projection.nodes() : this.label ? html`<span
+            class="${getInputLabelClasses({ disabled })}"
+            data-sp-switch-label-fallback
+            >${this.label}</span
+          >` : nothing;
+    return html`<label data-sp-switch-label>
+      <input
+        aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+        .checked="${live(this.checked ?? false)}"
+        class="${getSwitchClasses({
+      focused: this.focused ?? false,
+      size: this.size
+    })}"
+        data-sp-switch-native
+        ?disabled="${disabled}"
+        form="${ifDefined(this.form || void 0)}"
+        id="${ifDefined(this.id || void 0)}"
+        name="${ifDefined(this.name || void 0)}"
+        ?required="${this.required ?? false}"
+        role="switch"
+        title="${ifDefined(this.title || void 0)}"
+        type="checkbox"
+        value="${ifDefined(this.value)}"
+        @change="${this.handleChange}"
+      />
+      ${labelContent}
+    </label>`;
+  }
+};
+SpectreSwitchElement.properties = {
+  checked: { type: Boolean, reflect: true },
+  disabled: { type: Boolean, reflect: true },
+  focused: { type: Boolean, reflect: true },
+  form: { type: String },
+  label: { type: String },
+  name: { type: String, reflect: true },
+  required: { type: Boolean, reflect: true },
+  size: { type: String, reflect: true },
+  value: { type: String }
+};
+function defineSpectreSwitch(tagName = "sp-switch") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreSwitchElement);
+  return SpectreSwitchElement;
+}
+var SpectreRangeElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.focused = false;
+    this.form = void 0;
+    this.max = 100;
+    this.min = 0;
+    this.name = void 0;
+    this.step = 1;
+    this.value = 50;
+  }
+  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("min") && typeof this.min !== "number") {
+      this.min = 0;
+    }
+    if (changedProperties.has("max") && (typeof this.max !== "number" || this.max <= (this.min ?? 0))) {
+      this.max = (this.min ?? 0) + 100;
+    }
+    if (changedProperties.has("value") || changedProperties.has("min") || changedProperties.has("max")) {
+      const value = typeof this.value === "number" ? this.value : 0;
+      this.value = Math.min(Math.max(value, this.min ?? 0), this.max ?? 100);
+    }
+  }
+  // WebKit/Blink paint the filled track from this recipe-defined variable;
+  // Firefox fills natively.
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const min = this.min ?? 0;
+    const span = (this.max ?? 100) - min;
+    const percent = span > 0 ? ((this.value ?? min) - min) / span * 100 : 0;
+    this.nativeInput?.style.setProperty(
+      "--sp-component-range-value",
+      `${percent}%`
+    );
+  }
+  get nativeInput() {
+    return this.querySelector("[data-sp-range-native]");
+  }
+  focus(options) {
+    this.nativeInput?.focus(options);
+  }
+  blur() {
+    this.nativeInput?.blur();
+  }
+  handleInput(event) {
+    this.value = event.currentTarget.valueAsNumber;
+  }
+  render() {
+    return html`<input
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${getRangeClasses({
+      disabled: this.disabled ?? false,
+      focused: this.focused ?? false
+    })}"
+      data-sp-range-native
+      ?disabled="${this.disabled ?? false}"
+      form="${ifDefined(this.form || void 0)}"
+      id="${ifDefined(this.id || void 0)}"
+      max="${this.max ?? 100}"
+      min="${this.min ?? 0}"
+      name="${ifDefined(this.name || void 0)}"
+      step="${this.step ?? 1}"
+      title="${ifDefined(this.title || void 0)}"
+      type="range"
+      .value="${live(String(this.value ?? 0))}"
+      @change="${this.handleInput}"
+      @input="${this.handleInput}"
+    />`;
+  }
+};
+SpectreRangeElement.properties = {
+  disabled: { type: Boolean, reflect: true },
+  focused: { type: Boolean, reflect: true },
+  form: { type: String },
+  max: { type: Number, reflect: true },
+  min: { type: Number, reflect: true },
+  name: { type: String, reflect: true },
+  step: { type: Number, reflect: true },
+  value: { type: Number, reflect: true }
+};
+function defineSpectreRange(tagName = "sp-range") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreRangeElement);
+  return SpectreRangeElement;
+}
+var SpectreFileInputElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.accept = void 0;
+    this.disabled = false;
+    this.focused = false;
+    this.form = void 0;
+    this.fullWidth = false;
+    this.invalid = false;
+    this.multiple = false;
+    this.name = void 0;
+    this.required = false;
+    this.size = "md";
+    this.success = false;
+  }
+  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("size") && (this.size == null || !isInputSize(this.size))) {
+      this.size = "md";
+    }
+  }
+  get nativeInput() {
+    return this.querySelector("[data-sp-file-input-native]");
+  }
+  get files() {
+    return this.nativeInput?.files ?? null;
+  }
+  focus(options) {
+    this.nativeInput?.focus(options);
+  }
+  blur() {
+    this.nativeInput?.blur();
+  }
+  render() {
+    const state = this.invalid ? "invalid" : this.success ? "success" : "default";
+    return html`<input
+      accept="${ifDefined(this.accept || void 0)}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-invalid="${ifDefined(this.invalid ? "true" : void 0)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${getFileInputClasses({
+      disabled: this.disabled ?? false,
+      focused: this.focused ?? false,
+      fullWidth: this.fullWidth ?? false,
+      size: this.size,
+      state
+    })}"
+      data-sp-file-input-native
+      ?disabled="${this.disabled ?? false}"
+      form="${ifDefined(this.form || void 0)}"
+      id="${ifDefined(this.id || void 0)}"
+      ?multiple="${this.multiple ?? false}"
+      name="${ifDefined(this.name || void 0)}"
+      ?required="${this.required ?? false}"
+      title="${ifDefined(this.title || void 0)}"
+      type="file"
+    />`;
+  }
+};
+SpectreFileInputElement.properties = {
+  accept: { type: String, reflect: true },
+  disabled: { type: Boolean, reflect: true },
+  focused: { type: Boolean, reflect: true },
+  form: { type: String },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  invalid: { type: Boolean, reflect: true },
+  multiple: { type: Boolean, reflect: true },
+  name: { type: String, reflect: true },
+  required: { type: Boolean, reflect: true },
+  size: { type: String, reflect: true },
+  success: { type: Boolean, reflect: true }
+};
+function defineSpectreFileInput(tagName = "sp-file-input") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreFileInputElement);
+  return SpectreFileInputElement;
+}
+var SpectreExternalAuthButtonElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
+    this.disabled = false;
+    this.fullWidth = false;
+    this.href = void 0;
+    this.loading = false;
+    this.type = "button";
+    this.projection = new ProjectionController(this, [
+      "data-sp-external-auth-button-native"
+    ]);
+  }
+  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("type") && this.type !== "button" && this.type !== "submit") {
+      this.type = "button";
+    }
+  }
+  get nativeElement() {
+    return this.querySelector("[data-sp-external-auth-button-native]");
+  }
+  focus(options) {
+    this.nativeElement?.focus(options);
+  }
+  blur() {
+    this.nativeElement?.blur();
+  }
+  // A submit button inside a light-DOM form submits natively.
+  render() {
+    const classes = getExternalAuthButtonClasses({
+      ...interactionStates(this),
+      disabled: this.isDisabled,
+      fullWidth: this.fullWidth ?? false,
+      loading: this.loading ?? false
+    });
+    const content = html`${this.projection.has("icon") ? html`<span class="${getExternalAuthButtonIconClasses()}"
+            >${this.projection.nodes("icon")}</span
+          >` : nothing}${this.projection.nodes()}`;
+    if (this.href) {
+      return html`<a
+        aria-busy="${ifDefined(this.loading ? "true" : void 0)}"
+        aria-disabled="${ifDefined(this.isDisabled ? "true" : void 0)}"
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        class="${classes}"
+        data-sp-external-auth-button-native
+        href="${ifDefined(this.isDisabled ? void 0 : this.href)}"
+        id="${ifDefined(this.id || void 0)}"
+        title="${ifDefined(this.title || void 0)}"
+        >${content}</a
+      >`;
+    }
+    return html`<button
+      aria-busy="${ifDefined(this.loading ? "true" : void 0)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      class="${classes}"
+      data-sp-external-auth-button-native
+      ?disabled="${this.isDisabled}"
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+      type="${this.type ?? "button"}"
+    >
+      ${content}
+    </button>`;
+  }
+};
+SpectreExternalAuthButtonElement.properties = {
+  ...interactionStateProperties,
+  disabled: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  href: { type: String },
+  loading: { type: Boolean, reflect: true },
+  type: { type: String }
+};
+function defineSpectreExternalAuthButton(tagName = "sp-external-auth-button") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreExternalAuthButtonElement);
+  return SpectreExternalAuthButtonElement;
+}
+function owningCard(input) {
+  let node = input.parentElement;
+  while (node && !isSpectreKind(node, "choice-card")) {
+    node = node.parentElement;
+  }
+  return node;
+}
+var _a4, _b4;
+var SpectreChoiceCardElement = class extends (_b4 = SpectreBaseElement, _a4 = spectreKindKey, _b4) {
+  constructor() {
+    super(...arguments);
+    this[_a4] = "choice-card";
+    this.focused = false;
+    this.hovered = false;
+    this.checked = false;
+    this.disabled = false;
+    this.form = void 0;
+    this.name = void 0;
+    this.required = false;
+    this.type = "radio";
+    this.value = void 0;
+    this.projection = new ProjectionController(this, [
+      "data-sp-choice-card-native"
+    ]);
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("checked") && this.checked == null) {
+      this.checked = false;
+    }
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("type") && this.type !== "radio" && this.type !== "checkbox") {
+      this.type = "radio";
+    }
+  }
+  get nativeInput() {
+    return this.querySelector("[data-sp-choice-card-input]");
+  }
+  focus(options) {
+    this.nativeInput?.focus(options);
+  }
+  blur() {
+    this.nativeInput?.blur();
+  }
+  // Checking a radio unchecks its group natively; mirror that onto the other
+  // cards' `checked` properties.
+  handleChange(event) {
+    const input = event.currentTarget;
+    this.checked = input.checked;
+    if (this.type !== "radio" || !this.name) {
+      return;
+    }
+    const root = this.getRootNode();
+    root.querySelectorAll("input[data-sp-choice-card-input]").forEach((other) => {
+      if (other === input || other.name !== this.name) {
+        return;
+      }
+      const card = owningCard(other);
+      if (card) {
+        card.checked = other.checked;
+      }
+    });
+  }
+  render() {
+    return html`<label
+      class="${getChoiceCardClasses({
+      ...hoverFocusStates(this),
+      disabled: this.disabled ?? false
+    })}"
+      data-sp-choice-card-native
+      title="${ifDefined(this.title || void 0)}"
+    >
+      <input
+        aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+        .checked="${live(this.checked ?? false)}"
+        data-sp-choice-card-input
+        ?disabled="${this.disabled ?? false}"
+        form="${ifDefined(this.form || void 0)}"
+        id="${ifDefined(this.id || void 0)}"
+        name="${ifDefined(this.name || void 0)}"
+        ?required="${this.required ?? false}"
+        type="${this.type ?? "radio"}"
+        value="${ifDefined(this.value)}"
+        @change="${this.handleChange}"
+      />
+      <span data-sp-choice-card-content>${this.projection.nodes()}</span>
+    </label>`;
+  }
+};
+SpectreChoiceCardElement.properties = {
+  ...hoverFocusStateProperties,
+  checked: { type: Boolean, reflect: true },
+  disabled: { type: Boolean, reflect: true },
+  form: { type: String },
+  name: { type: String, reflect: true },
+  required: { type: Boolean, reflect: true },
+  type: { type: String, reflect: true },
+  value: { type: String }
+};
+function defineSpectreChoiceCard(tagName = "sp-choice-card") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreChoiceCardElement);
+  return SpectreChoiceCardElement;
+}
+function controlClasses(element) {
+  if (element instanceof HTMLInputElement) {
+    return element.type === "file" ? getFileInputClasses() : getInputClasses();
+  }
+  if (element instanceof HTMLSelectElement) {
+    return getSelectClasses();
+  }
+  if (element instanceof HTMLButtonElement) {
+    return getButtonClasses({ variant: "secondary" });
+  }
+  return void 0;
+}
+var SpectreInputGroupElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.projection = new ProjectionController(this, [
+      "data-sp-input-group-native"
+    ]);
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "block");
+  }
+  // Native controls without an author-chosen `sp-*` class get their recipe
+  // class; `slot="addon"` children become addons.
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.projection.elements().forEach((element) => {
+      const styled = Array.from(element.classList).some(
+        (name) => name.startsWith("sp-")
+      );
+      const classes = styled ? void 0 : controlClasses(element);
+      if (classes) {
+        element.classList.add(...classes.split(/\s+/).filter(Boolean));
+      }
+    });
+    applyPartClasses(this.projection.elements("addon"), {
+      addon: getInputGroupAddonClasses()
+    });
+  }
+  render() {
+    return html`<div
+      aria-disabled="${ifDefined(this.disabled ? "true" : void 0)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${getInputGroupClasses({ disabled: this.disabled ?? false })}"
+      data-sp-input-group-native
+      id="${ifDefined(this.id || void 0)}"
+      role="group"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.projection.all()}
+    </div>`;
+  }
+};
+SpectreInputGroupElement.properties = {
+  disabled: { type: Boolean, reflect: true }
+};
+function defineSpectreInputGroup(tagName = "sp-input-group") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreInputGroupElement);
+  return SpectreInputGroupElement;
+}
+var SpectrePopoverElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.label = void 0;
+    this.open = false;
+    this.placement = "bottom";
+    this.triggerLabel = "Show details";
+    this.baseId = createUniqueId("sp-popover");
+    this.projection = new ProjectionController(this, [
+      "data-sp-popover-trigger",
+      "data-sp-popover-native"
+    ]);
+    this.handleDocumentClick = (event) => {
+      if (this.open && !event.composedPath().includes(this)) {
+        this.setOpen(false);
+      }
+    };
+    this.handleDocumentKeydown = (event) => {
+      if (event.key === "Escape" && this.open) {
+        this.setOpen(false);
+        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;
+  }
+  connectedCallback() {
+    var _a5, _b5;
+    super.connectedCallback();
+    (_a5 = this.style).position || (_a5.position = "relative");
+    (_b5 = this.style).display || (_b5.display = "inline-block");
+    document.addEventListener("click", this.handleDocumentClick);
+    document.addEventListener("keydown", this.handleDocumentKeydown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.handleDocumentClick);
+    document.removeEventListener("keydown", this.handleDocumentKeydown);
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("open") && this.open == null) {
+      this.open = false;
+    }
+    if (changedProperties.has("placement") && (this.placement == null || !isPopoverPlacement(this.placement))) {
+      this.placement = "bottom";
+    }
+    if (changedProperties.has("triggerLabel") && !this.triggerLabel) {
+      this.triggerLabel = "Show details";
+    }
+  }
+  get triggerElement() {
+    return this.querySelector("[data-sp-popover-trigger]");
+  }
+  get panelId() {
+    return this.id || `${this.baseId}-panel`;
+  }
+  get headerId() {
+    return `${this.baseId}-header`;
+  }
+  get hasHeader() {
+    return this.projection.has("header") || Boolean(this.label);
+  }
+  setOpen(open) {
+    if (this.open === open) {
+      return;
+    }
+    this.open = open;
+    this.dispatchEvent(
+      new CustomEvent(open ? "sp-open" : "sp-close", { bubbles: true })
+    );
+  }
+  get dialogLabelledBy() {
+    if (this.forwardedAriaLabel) {
+      return void 0;
+    }
+    return this.hasHeader ? this.headerId : `${this.baseId}-trigger`;
+  }
+  render() {
+    const open = this.open ?? false;
+    return html`<button
+        aria-controls="${this.panelId}"
+        aria-expanded="${open ? "true" : "false"}"
+        aria-haspopup="dialog"
+        data-sp-popover-trigger
+        id="${this.baseId}-trigger"
+        type="button"
+        @click="${() => this.setOpen(!open)}"
+      >
+        ${this.projection.has("trigger") ? this.projection.nodes("trigger") : this.triggerLabel}
+      </button>
+      <div
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.dialogLabelledBy)}"
+        class="${getPopoverClasses({
+      open,
+      placement: this.placement
+    })}"
+        data-sp-popover-native
+        id="${this.panelId}"
+        role="dialog"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        <span aria-hidden="true" class="${getPopoverArrowClasses()}"></span>
+        ${this.hasHeader ? html`<div
+                class="${getPopoverHeaderClasses()}"
+                id="${this.headerId}"
+              >
+                ${this.projection.has("header") ? this.projection.nodes("header") : this.label}
+              </div>` : nothing}
+        <div class="${getPopoverBodyClasses()}">${this.projection.nodes()}</div>
+      </div>`;
+  }
+};
+SpectrePopoverElement.properties = {
+  label: { type: String },
+  open: { type: Boolean, reflect: true },
+  placement: { type: String, reflect: true },
+  triggerLabel: { attribute: "trigger-label", type: String }
+};
+function defineSpectrePopover(tagName = "sp-popover") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectrePopoverElement);
+  return SpectrePopoverElement;
+}
+var ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function toIsoDate(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function parseIsoDate(value) {
+  const match = value ? ISO_DATE.exec(value) : null;
+  if (!match) {
+    return void 0;
+  }
+  const [year, month, day] = [
+    Number(match[1]),
+    Number(match[2]),
+    Number(match[3])
+  ];
+  const date = new Date(year, month - 1, day);
+  return date.getMonth() === month - 1 && date.getDate() === day ? date : void 0;
+}
+function addDays(date, days) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+function addMonths(date, months) {
+  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const lastDay = new Date(
+    target.getFullYear(),
+    target.getMonth() + 1,
+    0
+  ).getDate();
+  target.setDate(Math.min(date.getDate(), lastDay));
+  return target;
+}
+function today() {
+  const now = /* @__PURE__ */ new Date();
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+}
+var SpectreDatepickerElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.locale = void 0;
+    this.max = void 0;
+    this.min = void 0;
+    this.name = void 0;
+    this.nextLabel = "Next month";
+    this.previousLabel = "Previous month";
+    this.value = void 0;
+    this.weekStart = 0;
+    // The roving-focus day; its month is the one on display.
+    this.activeDate = today();
+    this.titleId = `${createUniqueId("sp-datepicker")}-title`;
+    this.handleKeydown = async (event) => {
+      const active = this.activeDate;
+      const weekday = (active.getDay() - (this.weekStart ?? 0) + 7) % 7;
+      const moves = {
+        ArrowLeft: () => addDays(active, -1),
+        ArrowRight: () => addDays(active, 1),
+        ArrowUp: () => addDays(active, -7),
+        ArrowDown: () => addDays(active, 7),
+        Home: () => addDays(active, -weekday),
+        End: () => addDays(active, 6 - weekday),
+        PageUp: () => addMonths(active, event.shiftKey ? -12 : -1),
+        PageDown: () => addMonths(active, event.shiftKey ? 12 : 1)
+      };
+      const move = moves[event.key];
+      if (!move) {
+        return;
+      }
+      event.preventDefault();
+      this.activeDate = move();
+      await this.updateComplete;
+      this.querySelector(
+        `[data-sp-day="${toIsoDate(this.activeDate)}"]`
+      )?.focus();
+    };
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a5;
+    super.connectedCallback();
+    (_a5 = this.style).display || (_a5.display = "inline-block");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("value")) {
+      const parsed = parseIsoDate(this.value);
+      if (this.value && !parsed) {
+        this.value = void 0;
+      } else if (parsed) {
+        this.activeDate = parsed;
+      }
+    }
+    if (changedProperties.has("min") && !parseIsoDate(this.min)) {
+      this.min = void 0;
+    }
+    if (changedProperties.has("max") && !parseIsoDate(this.max)) {
+      this.max = void 0;
+    }
+    if (changedProperties.has("weekStart")) {
+      const weekStart = normalizeInt(this.weekStart, 0) ?? 0;
+      this.weekStart = weekStart > 6 ? 0 : weekStart;
+    }
+    if (changedProperties.has("nextLabel") && !this.nextLabel) {
+      this.nextLabel = "Next month";
+    }
+    if (changedProperties.has("previousLabel") && !this.previousLabel) {
+      this.previousLabel = "Previous month";
+    }
+  }
+  isOutOfRange(date) {
+    const iso = toIsoDate(date);
+    return this.min !== void 0 && iso < this.min || this.max !== void 0 && iso > this.max;
+  }
+  get visibleDays() {
+    const first = new Date(
+      this.activeDate.getFullYear(),
+      this.activeDate.getMonth(),
+      1
+    );
+    const daysInMonth = new Date(
+      first.getFullYear(),
+      first.getMonth() + 1,
+      0
+    ).getDate();
+    const leading = (first.getDay() - (this.weekStart ?? 0) + 7) % 7;
+    const count = Math.ceil((leading + daysInMonth) / 7) * 7;
+    const start = addDays(first, -leading);
+    return Array.from({ length: count }, (_, index) => addDays(start, index));
+  }
+  select(date) {
+    if (this.isOutOfRange(date)) {
+      return;
+    }
+    this.activeDate = date;
+    const value = toIsoDate(date);
+    if (value === this.value) {
+      return;
+    }
+    this.value = value;
+    this.dispatchEvent(
+      new CustomEvent("sp-change", { bubbles: true, detail: { value } })
+    );
+  }
+  showMonth(offset) {
+    this.activeDate = addMonths(this.activeDate, offset);
+  }
+  renderDay(date) {
+    const iso = toIsoDate(date);
+    const selected = iso === this.value;
+    const isToday = iso === toIsoDate(today());
+    const disabled = this.isOutOfRange(date);
+    const label = new Intl.DateTimeFormat(this.locale, {
+      dateStyle: "full"
+    }).format(date);
+    return html`<button
+      aria-current="${ifDefined(isToday ? "date" : void 0)}"
+      aria-label="${label}"
+      aria-pressed="${selected ? "true" : "false"}"
+      class="${getDayClasses({
+      disabled,
+      outsideMonth: date.getMonth() !== this.activeDate.getMonth(),
+      selected,
+      today: isToday
+    })}"
+      data-sp-day="${iso}"
+      ?disabled="${disabled}"
+      tabindex="${iso === toIsoDate(this.activeDate) ? "0" : "-1"}"
+      type="button"
+      @click="${() => this.select(date)}"
+    >
+      ${date.getDate()}
+    </button>`;
+  }
+  render() {
+    const days = this.visibleDays;
+    const weekdayFormat = new Intl.DateTimeFormat(this.locale, {
+      weekday: "short"
+    });
+    const navClasses = getButtonClasses({
+      iconOnly: true,
+      size: "sm",
+      variant: "ghost"
+    });
+    return html`<div
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(
+      this.forwardedAriaLabel ? void 0 : this.titleId
+    )}"
+      class="${getDatepickerClasses()}"
+      data-sp-datepicker-native
+      id="${ifDefined(this.id || void 0)}"
+      role="group"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      <div class="${getDatepickerHeaderClasses()}">
+        <button
+          aria-label="${this.previousLabel ?? "Previous month"}"
+          class="${navClasses}"
+          data-sp-datepicker-prev
+          type="button"
+          @click="${() => this.showMonth(-1)}"
+        >
+          ${renderIcon("chevronLeft")}
+        </button>
+        <span aria-live="polite" id="${this.titleId}"
+          >${new Intl.DateTimeFormat(this.locale, {
+      month: "long",
+      year: "numeric"
+    }).format(this.activeDate)}</span
+        >
+        <button
+          aria-label="${this.nextLabel ?? "Next month"}"
+          class="${navClasses}"
+          data-sp-datepicker-next
+          type="button"
+          @click="${() => this.showMonth(1)}"
+        >
+          ${renderIcon("chevronRight")}
+        </button>
+      </div>
+      <div
+        class="${getDatepickerGridClasses()}"
+        data-sp-datepicker-grid
+        @keydown="${this.handleKeydown}"
+      >
+        ${days.slice(0, 7).map(
+      (date) => html`<span
+                aria-hidden="true"
+                class="${getDatepickerWeekdayClasses()}"
+                >${weekdayFormat.format(date)}</span
+              >`
+    )}
+        ${days.map((date) => this.renderDay(date))}
+      </div>
+      ${this.name ? html`<input
+              name="${this.name}"
+              type="hidden"
+              .value="${this.value ?? ""}"
+            />` : nothing}
+    </div>`;
+  }
+};
+SpectreDatepickerElement.properties = {
+  activeDate: { state: true },
+  locale: { type: String },
+  max: { type: String },
+  min: { type: String },
+  name: { type: String },
+  nextLabel: { attribute: "next-label", type: String },
+  previousLabel: { attribute: "previous-label", type: String },
+  value: { type: String, reflect: true },
+  weekStart: { attribute: "week-start", type: Number }
+};
+function defineSpectreDatepicker(tagName = "sp-datepicker") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreDatepickerElement);
+  return SpectreDatepickerElement;
+}
 
 // src/index.ts
 function defineSpectreComponents() {
@@ -5016,8 +8668,31 @@ function defineSpectreComponents() {
   defineSpectreToast();
   defineSpectreTooltip();
   defineSpectreText();
+  defineSpectreTabs();
+  defineSpectreTabPanel();
+  defineSpectreAccordion();
+  defineSpectreAccordionItem();
+  defineSpectreBreadcrumb();
+  defineSpectreListGroup();
+  defineSpectreListGroupItem();
+  defineSpectreOffcanvas();
+  defineSpectreCarousel();
+  defineSpectreTable();
+  defineSpectrePagination();
+  defineSpectreStepper();
+  defineSpectreCardBleed();
+  defineSpectreProse();
+  defineSpectreProgress();
+  defineSpectreSwitch();
+  defineSpectreRange();
+  defineSpectreFileInput();
+  defineSpectreExternalAuthButton();
+  defineSpectreChoiceCard();
+  defineSpectreInputGroup();
+  defineSpectrePopover();
+  defineSpectreDatepicker();
 }
 
-export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreContainerElement, SpectreDropdownElement, SpectreFieldsetElement, SpectreFooterChipElement, SpectreFooterElement, SpectreFooterLinkElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectreModalElement, SpectreNavElement, SpectreNavItemElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSidebarElement, SpectreSidebarLinkElement, SpectreSidebarToggleElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextElement, SpectreTextareaElement, SpectreToastElement, SpectreTooltipElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreDropdown, defineSpectreFieldset, defineSpectreFooter, defineSpectreFooterChip, defineSpectreFooterLink, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectreModal, defineSpectreNav, defineSpectreNavItem, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSidebar, defineSpectreSidebarLink, defineSpectreSidebarToggle, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, defineSpectreText, defineSpectreTextarea, defineSpectreToast, defineSpectreTooltip, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreContainerMaxWidths, spectreDropdownPlacements, spectreGridAligns, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreStackGaps, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants, spectreTextFamilies, spectreTextLevels, spectreTextSizes, spectreTextVariants, spectreToastVariants, spectreTooltipPlacements };
+export { SpectreAccordionElement, SpectreAccordionItemElement, SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreBreadcrumbElement, SpectreButtonElement, SpectreCardBleedElement, SpectreCardElement, SpectreCarouselElement, SpectreCheckboxElement, SpectreChoiceCardElement, SpectreContainerElement, SpectreDatepickerElement, SpectreDropdownElement, SpectreExternalAuthButtonElement, SpectreFieldsetElement, SpectreFileInputElement, SpectreFooterChipElement, SpectreFooterElement, SpectreFooterLinkElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreInputGroupElement, SpectreLabelElement, SpectreListGroupElement, SpectreListGroupItemElement, SpectreModalElement, SpectreNavElement, SpectreNavItemElement, SpectreOffcanvasElement, SpectrePaginationElement, SpectrePopoverElement, SpectrePricingCardElement, SpectreProgressElement, SpectreProseElement, SpectreRadioElement, SpectreRangeElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSidebarElement, SpectreSidebarLinkElement, SpectreSidebarToggleElement, SpectreSpinnerElement, SpectreStackElement, SpectreStepperElement, SpectreSwitchElement, SpectreTabPanelElement, SpectreTableElement, SpectreTabsElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextElement, SpectreTextareaElement, SpectreToastElement, SpectreTooltipElement, defineSpectreAccordion, defineSpectreAccordionItem, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreBreadcrumb, defineSpectreButton, defineSpectreCard, defineSpectreCardBleed, defineSpectreCarousel, defineSpectreCheckbox, defineSpectreChoiceCard, defineSpectreComponents, defineSpectreContainer, defineSpectreDatepicker, defineSpectreDropdown, defineSpectreExternalAuthButton, defineSpectreFieldset, defineSpectreFileInput, defineSpectreFooter, defineSpectreFooterChip, defineSpectreFooterLink, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreInputGroup, defineSpectreLabel, defineSpectreListGroup, defineSpectreListGroupItem, defineSpectreModal, defineSpectreNav, defineSpectreNavItem, defineSpectreOffcanvas, defineSpectrePagination, defineSpectrePopover, defineSpectrePricingCard, defineSpectreProgress, defineSpectreProse, defineSpectreRadio, defineSpectreRange, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSidebar, defineSpectreSidebarLink, defineSpectreSidebarToggle, defineSpectreSpinner, defineSpectreStack, defineSpectreStepper, defineSpectreSwitch, defineSpectreTabPanel, defineSpectreTable, defineSpectreTabs, defineSpectreTag, defineSpectreTestimonial, defineSpectreText, defineSpectreTextarea, defineSpectreToast, defineSpectreTooltip, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreAccentColors as spectreCardAccentColors, spectreAccentEdges as spectreCardAccentEdges, spectreCardVariants, spectreContainerMaxWidths, spectreSpacingScale as spectreContainerPaddings, spectreDisplayLevels, spectreDropdownPlacements, spectreInputSizes as spectreFileInputSizes, spectreGridAligns, spectreGridColStarts, spectreGridColumns, spectreGridGaps, spectreHeadingLevels, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreOffcanvasPlacements, spectreInputSizes as spectrePaginationSizes, spectrePopoverPlacements, spectreInputSizes as spectreProgressSizes, spectreProgressVariants, spectreInputSizes as spectreRatingSizes, spectreSpacingScale as spectreSectionSpacings, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreStackGaps, spectreStepperOrientations, spectreInputSizes as spectreSwitchSizes, spectreTableRowVariants, spectreTableSizes, spectreTabsVariants, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants, spectreTextFamilies, spectreTextLevels, spectreTextPresets, spectreTextSizes, spectreTextVariants, spectreToastVariants, spectreTooltipPlacements };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map