@phcdevworks/spectre-components 1.20.0 → 1.21.0

package/dist/index.cjs

@@ -5,6 +5,7 @@ var lit = require('lit');
 var ifDefined_js = require('lit/directives/if-defined.js');
 var live_js = require('lit/directives/live.js');
 var staticHtml_js = require('lit/static-html.js');
+var styleMap_js = require('lit/directives/style-map.js');
 
 // src/utils/form.ts
 var spectreInputSizes = ["sm", "md", "lg"];
@@ -19,7 +20,11 @@ var spectreButtonVariants = [
   "success",
   "cta",
   "accent",
-  "inverse"
+  "inverse",
+  "warning",
+  "link",
+  "light",
+  "dark"
 ];
 function isButtonVariant(value) {
   return spectreButtonVariants.includes(value);
@@ -57,7 +62,8 @@ var spectreBadgeVariants = [
   "outline",
   "accent",
   "cta",
-  "inverse"
+  "inverse",
+  "brand"
 ];
 function isBadgeVariant(value) {
   return spectreBadgeVariants.includes(value);
@@ -67,7 +73,8 @@ var spectreAlertVariants = [
   "success",
   "warning",
   "danger",
-  "neutral"
+  "neutral",
+  "brand"
 ];
 function isAlertVariant(value) {
   return spectreAlertVariants.includes(value);
@@ -139,7 +146,8 @@ var spectreSpinnerVariants = [
   "info",
   "neutral",
   "accent",
-  "cta"
+  "cta",
+  "inverse"
 ];
 function isSpinnerVariant(value) {
   return spectreSpinnerVariants.includes(value);
@@ -169,7 +177,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
@@ -324,7 +332,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);
 }
@@ -355,7 +363,8 @@ var spectreToastVariants = [
   "info",
   "success",
   "warning",
-  "danger"
+  "danger",
+  "neutral"
 ];
 function isToastVariant(value) {
   return spectreToastVariants.includes(value);
@@ -399,7 +408,12 @@ var spectreTextVariants = [
   "meta",
   "brand",
   "onInverse",
-  "onInverseMuted"
+  "onInverseMuted",
+  "onSurface",
+  "onSurfaceMuted",
+  "onSurfaceSubtle",
+  "onSurfaceMeta",
+  "onSurfaceBrand"
 ];
 function isTextVariant(value) {
   return spectreTextVariants.includes(value);
@@ -430,6 +444,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;
@@ -718,6 +840,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 {
@@ -753,7 +891,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;
     }
@@ -783,9 +923,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;
@@ -869,6 +1031,7 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
   get buttonClasses() {
     const recipeClasses = spectreUi.getButtonClasses({
+      ...interactionStates(this),
       compact: this.compact ?? false,
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
@@ -948,6 +1111,7 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
 };
 SpectreButtonElement.properties = {
+  ...interactionStateProperties,
   compact: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
@@ -978,6 +1142,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;
@@ -989,6 +1156,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;
@@ -1063,12 +1234,30 @@ var SpectreInputElement = class extends SpectreBaseElement {
   }
   get inputClasses() {
     return spectreUi.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]");
   }
@@ -1086,11 +1275,48 @@ var SpectreInputElement = class extends SpectreBaseElement {
   blur() {
     this.nativeInput?.blur();
   }
+  renderMessage() {
+    if (this.errorMessage) {
+      return lit.html`<p
+        aria-atomic="true"
+        aria-live="polite"
+        class="${spectreUi.getInputErrorMessageClasses()}"
+        id="${this.inputId}-error"
+      >
+        ${this.errorMessage}
+      </p>`;
+    }
+    if (this.helperText) {
+      return lit.html`<p
+        class="${spectreUi.getInputHelperTextClasses({ disabled: this.isDisabled })}"
+        id="${this.inputId}-helper"
+      >
+        ${this.helperText}
+      </p>`;
+    }
+    return lit.nothing;
+  }
+  // Without a label or message the native input renders alone, as before.
   render() {
+    if (!this.hasFieldChrome) {
+      return this.renderInput();
+    }
+    return lit.html`<div class="${spectreUi.getInputWrapperClasses()}" data-sp-input-wrapper>
+      ${this.label ? lit.html`<label
+              class="${spectreUi.getInputLabelClasses({ disabled: this.isDisabled })}"
+              for="${this.inputId}"
+              >${this.label}</label
+            >` : lit.nothing}
+      ${this.renderInput()} ${this.renderMessage()}
+    </div>`;
+  }
+  renderInput() {
     return lit.html`<input
       aria-busy="${this.loading ? "true" : "false"}"
-      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
-      aria-invalid="${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}"
+      aria-describedby="${ifDefined_js.ifDefined(this.describedBy)}"
+      aria-invalid="${ifDefined_js.ifDefined(
+      this.invalid || this.errorMessage ? "true" : void 0
+    )}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
       autocapitalize="${ifDefined_js.ifDefined(this.autocapitalize || void 0)}"
@@ -1103,7 +1329,7 @@ var SpectreInputElement = class extends SpectreBaseElement {
       form="${ifDefined_js.ifDefined(this.form || void 0)}"
       ?readonly="${this.readonly}"
       ?required="${this.required}"
-      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      id="${ifDefined_js.ifDefined(this.hasFieldChrome ? this.inputId : this.id || void 0)}"
       inputmode="${ifDefined_js.ifDefined(this.inputmode || void 0)}"
       list="${ifDefined_js.ifDefined(this.list || void 0)}"
       max="${ifDefined_js.ifDefined(this.max || void 0)}"
@@ -1124,9 +1350,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 },
@@ -1161,6 +1391,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;
@@ -1246,6 +1477,7 @@ var SpectreTextareaElement = class extends SpectreBaseElement {
   }
   get textareaClasses() {
     return spectreUi.getTextareaClasses({
+      focused: this.focused ?? false,
       fullWidth: this.fullWidth ?? false,
       pill: this.pill ?? false,
       size: this.size,
@@ -1304,6 +1536,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 },
@@ -1335,6 +1568,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;
@@ -1440,6 +1674,7 @@ var SpectreSelectElement = class extends SpectreProjectableElement {
   }
   get selectClasses() {
     return spectreUi.getSelectClasses({
+      focused: this.focused ?? false,
       fullWidth: this.fullWidth ?? false,
       pill: this.pill ?? false,
       size: this.size,
@@ -1490,6 +1725,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 },
@@ -2000,6 +2236,11 @@ 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;
@@ -2056,6 +2297,9 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
   }
   get badgeClasses() {
     const recipeClasses = spectreUi.getBadgeClasses({
+      dot: this.dot ?? false,
+      interactive: this.interactive ?? false,
+      ...interactionStates(this),
       ...this.accentRail !== void 0 && {
         accentRail: this.accentRail
       },
@@ -2088,6 +2332,9 @@ 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",
@@ -2132,6 +2379,9 @@ 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;
@@ -2192,6 +2442,7 @@ var SpectreCardElement = class extends SpectreProjectableElement {
   }
   get cardClasses() {
     const recipeClasses = spectreUi.getCardClasses({
+      ...interactionStates(this),
       ...this.accent !== void 0 && {
         accent: this.accent
       },
@@ -2225,6 +2476,7 @@ 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 },
@@ -2246,6 +2498,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;
@@ -2301,6 +2556,7 @@ var SpectreIconBoxElement = class extends SpectreProjectableElement {
   }
   get iconBoxClasses() {
     return spectreUi.getIconBoxClasses({
+      ...interactionStates(this),
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
       interactive: this.interactive ?? false,
@@ -2327,6 +2583,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 },
@@ -2346,6 +2603,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;
@@ -2385,6 +2648,10 @@ var SpectreRatingElement = class extends SpectreBaseElement {
   }
   get ratingClasses() {
     return spectreUi.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
@@ -2434,6 +2701,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 },
@@ -2449,9 +2720,105 @@ 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;
@@ -2459,6 +2826,9 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
     this.interactive = false;
     this.loading = false;
     this.variant = "elevated";
+    this.projection = new ProjectionController(this, [
+      "data-sp-testimonial-native"
+    ]);
   }
   get id() {
     return super.id;
@@ -2472,16 +2842,6 @@ 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;
@@ -2507,6 +2867,7 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
   }
   get testimonialClasses() {
     return spectreUi.getTestimonialClasses({
+      ...interactionStates(this),
       ...this.accent !== void 0 && {
         accent: this.accent
       },
@@ -2520,6 +2881,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 lit.nothing;
+    }
+    return lit.html`<div class="${spectreUi.getTestimonialAuthorClasses()}">
+      ${this.projection.nodes("author-image")}
+      ${hasName || hasTitle ? lit.html`<div class="${spectreUi.getTestimonialAuthorInfoClasses()}">
+              ${hasName ? lit.html`<div class="${spectreUi.getTestimonialAuthorNameClasses()}">
+                      ${this.projection.nodes("author-name")}
+                    </div>` : lit.nothing}
+              ${hasTitle ? lit.html`<div class="${spectreUi.getTestimonialAuthorTitleClasses()}">
+                      ${this.projection.nodes("author-title")}
+                    </div>` : lit.nothing}
+            </div>` : lit.nothing}
+    </div>`;
+  }
   render() {
     return lit.html`<div
       aria-busy="${this.loading ? "true" : "false"}"
@@ -2532,11 +2911,15 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
       role="${ifDefined_js.ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
     >
-      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+      ${this.projection.has("quote") ? lit.html`<div class="${spectreUi.getTestimonialQuoteClasses()}">
+              ${this.projection.nodes("quote")}
+            </div>` : lit.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 },
@@ -2553,15 +2936,46 @@ function defineSpectreTestimonial(tagName = "sp-testimonial") {
   customElements.define(tagName, SpectreTestimonialElement);
   return SpectreTestimonialElement;
 }
-var SpectreAlertElement = class extends SpectreProjectableElement {
+var paths = {
+  check: lit.svg`<path d="M3 8.5l3 3 7-7" />`,
+  chevronDown: lit.svg`<path d="M4 6l4 4 4-4" />`,
+  chevronLeft: lit.svg`<path d="M10 4l-4 4 4 4" />`,
+  chevronRight: lit.svg`<path d="M6 4l4 4-4 4" />`,
+  close: lit.svg`<path d="M4 4l8 8M12 4l-8 8" />`
+};
+function renderIcon(name, sizeClass = "sp-icon-sm") {
+  return lit.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;
@@ -2575,20 +2989,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;
     }
@@ -2605,10 +3015,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 spectreUi.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,
@@ -2627,12 +3047,28 @@ var SpectreAlertElement = class extends SpectreProjectableElement {
       role="alert"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
     >
-      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+      ${this.projection.has("icon") ? lit.html`<span class="${spectreUi.getAlertIconClasses()}"
+              >${this.projection.nodes("icon")}</span
+            >` : lit.nothing}
+      ${this.projection.has() ? this.projection.nodes() : lit.nothing}
+      ${this.dismissible ? lit.html`<button
+              aria-label="${this.dismissLabel ?? "Dismiss"}"
+              class="${spectreUi.getAlertDismissClasses()}"
+              data-sp-alert-dismiss
+              type="button"
+              @click="${() => this.dismiss()}"
+            >
+              ${renderIcon("close")}
+            </button>` : lit.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 },
@@ -2650,6 +3086,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;
@@ -2705,6 +3144,7 @@ var SpectreAvatarElement = class extends SpectreProjectableElement {
   }
   get avatarClasses() {
     return spectreUi.getAvatarClasses({
+      ...interactionStates(this),
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
       interactive: this.interactive ?? false,
@@ -2731,6 +3171,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 },
@@ -2822,6 +3263,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;
@@ -2881,6 +3325,7 @@ var SpectreTagElement = class extends SpectreProjectableElement {
   }
   get tagClasses() {
     return spectreUi.getTagClasses({
+      ...interactionStates(this),
       disabled: this.isDisabled,
       dismissible: this.dismissible ?? false,
       fullWidth: this.fullWidth ?? false,
@@ -2908,6 +3353,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 },
@@ -2925,9 +3371,12 @@ 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;
@@ -2935,6 +3384,9 @@ var SpectrePricingCardElement = class extends SpectreProjectableElement {
     this.fullHeight = false;
     this.interactive = false;
     this.loading = false;
+    this.projection = new ProjectionController(this, [
+      "data-sp-pricing-card-native"
+    ]);
   }
   get id() {
     return super.id;
@@ -2948,16 +3400,6 @@ 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;
@@ -2983,6 +3425,7 @@ var SpectrePricingCardElement = class extends SpectreProjectableElement {
   }
   get pricingCardClasses() {
     return spectreUi.getPricingCardClasses({
+      ...interactionStates(this),
       ...this.accent !== void 0 && {
         accent: this.accent
       },
@@ -3008,11 +3451,24 @@ var SpectrePricingCardElement = class extends SpectreProjectableElement {
       role="${ifDefined_js.ifDefined(this.hasForwardedLabel ? "group" : void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
     >
-      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+      ${this.projection.nodes("header")}
+      ${this.projection.has("badge") ? lit.html`<div class="${spectreUi.getPricingCardBadgeClasses()}">
+              ${this.projection.nodes("badge")}
+            </div>` : lit.nothing}
+      ${this.projection.has("price") ? lit.html`<div class="${spectreUi.getPricingCardPriceContainerClasses()}">
+              <div class="${spectreUi.getPricingCardPriceClasses()}">
+                ${this.projection.nodes("price")}
+              </div>
+            </div>` : lit.nothing}
+      ${this.projection.has("description") ? lit.html`<div class="${spectreUi.getPricingCardDescriptionClasses()}">
+              ${this.projection.nodes("description")}
+            </div>` : lit.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 },
@@ -3034,6 +3490,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;
@@ -3048,9 +3505,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]");
@@ -3066,11 +3523,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 = spectreUi.getContainerClasses(
-      this.maxWidth != null ? { maxWidth: this.maxWidth } : {}
-    );
+    const recipeClasses = spectreUi.getContainerClasses({
+      ...this.maxWidth != null && {
+        maxWidth: this.maxWidth
+      },
+      ...this.padding != null && {
+        padding: this.padding
+      }
+    });
     const utilityClasses = sanitizeUtilityClasses(this.innerClass);
     return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
@@ -3090,7 +3555,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);
@@ -3167,7 +3633,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");
@@ -3176,7 +3642,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]");
@@ -3211,6 +3677,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;
     }
@@ -3245,6 +3714,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
       },
@@ -3284,6 +3756,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 },
@@ -3309,7 +3782,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;
@@ -3324,9 +3799,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]");
@@ -3338,8 +3813,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 = spectreUi.getSectionClasses({});
+    const recipeClasses = spectreUi.getSectionClasses({
+      ...this.gap != null && { gap: this.gap },
+      ...this.spacing != null && {
+        spacing: this.spacing
+      }
+    });
     const utilityClasses = sanitizeUtilityClasses(this.innerClass);
     return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
@@ -3358,7 +3846,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);
@@ -3390,9 +3880,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]");
@@ -3457,6 +3947,22 @@ 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);
@@ -3597,6 +4103,14 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
       this.viewport = false;
     }
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    applyPartClasses(childElements(this.menuContent), {
+      divider: spectreUi.getDropdownDividerClasses(),
+      header: spectreUi.getDropdownHeaderClasses(),
+      item: spectreUi.getDropdownItemClasses()
+    });
+  }
   get triggerElement() {
     return this.querySelector("[data-sp-dropdown-trigger]");
   }
@@ -3706,9 +4220,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]");
@@ -3748,6 +4262,22 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
     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: spectreUi.getFooterDividerClasses(),
+      heading: spectreUi.getFooterHeadingClasses(),
+      links: spectreUi.getFooterLinksClasses(),
+      muted: spectreUi.getFooterMutedClasses(),
+      text: spectreUi.getFooterTextClasses()
+    });
+  }
   render() {
     return lit.html`<footer
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
@@ -3778,6 +4308,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() {
@@ -3808,7 +4340,10 @@ var SpectreFooterChipElement = class extends SpectreProjectableElement {
     }
   }
   get footerChipClasses() {
-    return spectreUi.getFooterChipClasses({ disabled: this.disabled ?? false });
+    return spectreUi.getFooterChipClasses({
+      ...hoverFocusStates(this),
+      disabled: this.disabled ?? false
+    });
   }
   render() {
     return lit.html`<span
@@ -3824,6 +4359,7 @@ var SpectreFooterChipElement = class extends SpectreProjectableElement {
   }
 };
 SpectreFooterChipElement.properties = {
+  ...hoverFocusStateProperties,
   disabled: { type: Boolean, reflect: true }
 };
 function defineSpectreFooterChip(tagName = "sp-footer-chip") {
@@ -3837,6 +4373,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;
@@ -3873,6 +4411,7 @@ var SpectreFooterLinkElement = class extends SpectreProjectableElement {
   }
   get footerLinkClasses() {
     return spectreUi.getFooterLinkClasses({
+      ...hoverFocusStates(this),
       active: this.active ?? false,
       disabled: this.disabled ?? false
     });
@@ -3894,6 +4433,7 @@ var SpectreFooterLinkElement = class extends SpectreProjectableElement {
   }
 };
 SpectreFooterLinkElement.properties = {
+  ...hoverFocusStateProperties,
   active: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   href: { type: String }
@@ -3906,6 +4446,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])",
@@ -3914,6 +4456,29 @@ 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);
@@ -3931,7 +4496,7 @@ var SpectreModalElement = class extends SpectreProjectableElement {
         return;
       }
       if (event.key === "Tab") {
-        this.trapFocus(event);
+        trapFocus(event, this.modalElement);
       }
     };
   }
@@ -3995,36 +4560,12 @@ 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) {
+  close() {
+    if (!this.open) {
       return;
     }
     this.open = false;
@@ -4113,9 +4654,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]");
@@ -4163,6 +4704,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: spectreUi.getNavLinksClasses()
+    });
+  }
   render() {
     return lit.html`<nav
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
@@ -4195,12 +4742,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) => {
@@ -4298,6 +4853,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;
     }
@@ -4311,6 +4884,14 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
       this.placement = "bottom-start";
     }
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    applyPartClasses(childElements(this.menuContent), {
+      divider: spectreUi.getDropdownDividerClasses(),
+      header: spectreUi.getDropdownHeaderClasses(),
+      item: spectreUi.getDropdownItemClasses()
+    });
+  }
   get triggerElement() {
     return this.querySelector("[data-sp-nav-item-trigger]");
   }
@@ -4336,23 +4917,40 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
     this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
   }
   get wrapperClasses() {
-    return spectreUi.getDropdownClasses({ mega: this.mega ?? false });
+    return spectreUi.getDropdownClasses({
+      fullWidth: this.fullWidth ?? false,
+      mega: this.mega ?? false,
+      viewport: this.viewport ?? false
+    });
   }
   get menuClasses() {
     return spectreUi.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 spectreUi.getNavLinkClasses();
+    return spectreUi.getNavLinkClasses({
+      ...hoverFocusStates(this),
+      active: this.active ?? false,
+      disabled: this.disabled ?? false
+    });
   }
   renderLink() {
     return lit.html`<a
+      aria-current="${ifDefined_js.ifDefined(this.active ? "page" : void 0)}"
+      aria-disabled="${ifDefined_js.ifDefined(this.disabled ? "true" : void 0)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       class="${this.navLinkClasses}"
-      href="${ifDefined_js.ifDefined(this.href)}"
+      href="${ifDefined_js.ifDefined(this.disabled ? void 0 : this.href)}"
       id="${ifDefined_js.ifDefined(this.id || void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
       >${this.hasMenuContent ? this.menuContent : this.label}</a
@@ -4370,6 +4968,7 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
         aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel ?? this.label)}"
         class="${this.navLinkClasses}"
         data-sp-nav-item-trigger
+        ?disabled="${this.disabled ?? false}"
         type="button"
         @click="${() => this.toggle()}"
       >
@@ -4385,12 +4984,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);
@@ -4493,6 +5099,20 @@ var SpectreSidebarElement = class extends SpectreProjectableElement {
   get sidebarClasses() {
     return spectreUi.getSidebarClasses({ bordered: this.bordered ?? false });
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const elements = childElements(this.projectedContent);
+    applyPartClasses(elements, {
+      group: spectreUi.getSidebarGroupClasses(),
+      header: spectreUi.getSidebarHeaderClasses()
+    });
+    elements.filter((element) => element.getAttribute("slot") === "group").forEach((group) => {
+      const summary = group.querySelector(":scope > summary");
+      summary?.classList.add(
+        ...spectreUi.getSidebarGroupSummaryClasses().split(/\s+/).filter(Boolean)
+      );
+    });
+  }
   render() {
     return lit.html`${this.hideToggle ? lit.nothing : lit.html`<button
               aria-expanded="${this.open ? "true" : "false"}"
@@ -4537,6 +5157,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;
@@ -4577,6 +5199,7 @@ var SpectreSidebarLinkElement = class extends SpectreProjectableElement {
   }
   get sidebarLinkClasses() {
     return spectreUi.getSidebarLinkClasses({
+      ...hoverFocusStates(this),
       active: this.active ?? false,
       disabled: this.disabled ?? false,
       level: this.level
@@ -4599,6 +5222,7 @@ var SpectreSidebarLinkElement = class extends SpectreProjectableElement {
   }
 };
 SpectreSidebarLinkElement.properties = {
+  ...hoverFocusStateProperties,
   active: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   href: { type: String },
@@ -4974,12 +5598,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();
@@ -5094,11 +5718,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;
     }
@@ -5137,19 +5773,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 = spectreUi.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 spectreUi.getHeadingClasses({
+          level: this.headingLevel ?? (isHeadingLevel(level) ? level : "h2")
+        });
+      case "display":
+        return spectreUi.getDisplayClasses({ level: this.displayLevel ?? 1 });
+      case "lead":
+        return spectreUi.getLeadClasses();
+    }
+    return spectreUi.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 staticHtml_js.html`<${tag}
       aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
-      class="${textClasses}"
+      class="${this.textClasses}"
       data-sp-text-native
       id="${ifDefined_js.ifDefined(this.id || void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
@@ -5157,8 +5808,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 }
@@ -5171,6 +5825,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 spectreUi.getTabsClasses({
+      fullWidth: this.fullWidth ?? false,
+      variant: this.variant,
+      vertical: this.vertical ?? false
+    });
+  }
+  render() {
+    const panels = this.panels;
+    const activeIndex = this.activeIndex;
+    return lit.html`<div
+      class="${this.tabsClasses}"
+      data-sp-tabs-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      <div
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+        aria-orientation="${ifDefined_js.ifDefined(this.vertical ? "vertical" : void 0)}"
+        class="${spectreUi.getTabsListClasses()}"
+        role="tablist"
+        @keydown="${this.handleKeydown}"
+      >
+        ${panels.map((panel, index) => {
+      const active = index === activeIndex;
+      return lit.html`<button
+            aria-controls="${panel.panelId}"
+            aria-selected="${active ? "true" : "false"}"
+            class="${spectreUi.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 lit.html`<div
+      aria-labelledby="${ifDefined_js.ifDefined(this.tabId)}"
+      class="${spectreUi.getTabsPanelClasses()}"
+      data-sp-tab-panel-native
+      ?hidden="${!this.selected}"
+      id="${this.panelId}"
+      role="tabpanel"
+      tabindex="0"
+      title="${ifDefined_js.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 lit.html`<div
+      class="${spectreUi.getAccordionClasses({ flush: this.flush ?? false })}"
+      data-sp-accordion-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.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 = spectreUi.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 lit.html`<button
+        aria-controls="${this.panelId}"
+        aria-expanded="${expanded ? "true" : "false"}"
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        class="${spectreUi.getAccordionHeaderClasses({
+      ...hoverFocusStates(this),
+      disabled,
+      expanded
+    })}"
+        data-sp-accordion-item-header
+        ?disabled="${disabled}"
+        id="${this.headerId}"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+        type="button"
+        @click="${() => this.toggle()}"
+      >
+        ${this.projection.has("header") ? this.projection.nodes("header") : this.label ?? ""}
+        <span class="${spectreUi.getAccordionIconClasses({ expanded })}"
+          >${renderIcon("chevronDown")}</span
+        >
+      </button>
+      <div
+        aria-labelledby="${this.headerId}"
+        class="${spectreUi.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 = spectreUi.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 lit.html`<nav
+      aria-label="${ifDefined_js.ifDefined(this.navLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      data-sp-breadcrumb-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      <ol
+        class="${spectreUi.getBreadcrumbClasses({ customSeparator: Boolean(separator) })}"
+      >
+        ${crumbs.map((crumb, index) => {
+      const current = index === crumbs.length - 1;
+      return lit.html`<li
+            aria-current="${ifDefined_js.ifDefined(current ? "page" : void 0)}"
+            class="${spectreUi.getBreadcrumbItemClasses({ current })}"
+          >
+            ${separator && index > 0 ? lit.html`<span
+                    aria-hidden="true"
+                    class="${spectreUi.getBreadcrumbSeparatorClasses()}"
+                    >${separator}</span
+                  >` : lit.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: spectreUi.getListGroupItemHeadingClasses(),
+        text: spectreUi.getListGroupItemTextClasses()
+      });
+    });
+  }
+  get items() {
+    return this.projection.elements().filter(
+      (element) => isSpectreKind(element, "list-group-item")
+    );
+  }
+  get listClasses() {
+    return spectreUi.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 spectreUi.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 lit.html`<a
+        aria-current="${ifDefined_js.ifDefined(current)}"
+        aria-disabled="${ifDefined_js.ifDefined(disabled ? "true" : void 0)}"
+        aria-label="${ifDefined_js.ifDefined(label)}"
+        class="${classes}"
+        data-sp-list-group-row
+        href="${ifDefined_js.ifDefined(disabled ? void 0 : item.href)}"
+        id="${ifDefined_js.ifDefined(id)}"
+        target="${ifDefined_js.ifDefined(item.target)}"
+        title="${ifDefined_js.ifDefined(title)}"
+        @click="${() => this.select(item)}"
+        >${item}</a
+      >`;
+    }
+    if (item.interactive) {
+      return lit.html`<button
+        aria-current="${ifDefined_js.ifDefined(current)}"
+        aria-label="${ifDefined_js.ifDefined(label)}"
+        class="${classes}"
+        data-sp-list-group-row
+        ?disabled="${disabled}"
+        id="${ifDefined_js.ifDefined(id)}"
+        title="${ifDefined_js.ifDefined(title)}"
+        type="button"
+        @click="${() => this.select(item)}"
+      >
+        ${item}
+      </button>`;
+    }
+    return lit.html`<div
+      aria-current="${ifDefined_js.ifDefined(current)}"
+      aria-label="${ifDefined_js.ifDefined(label)}"
+      class="${classes}"
+      data-sp-list-group-row
+      id="${ifDefined_js.ifDefined(id)}"
+      title="${ifDefined_js.ifDefined(title)}"
+    >
+      ${item}
+    </div>`;
+  }
+  render() {
+    const items = this.items;
+    if (!items.some(isInteractiveItem)) {
+      return lit.html`<ul
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+        class="${this.listClasses}"
+        data-sp-list-group-native
+        id="${ifDefined_js.ifDefined(this.id || void 0)}"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      >
+        ${items.map(
+        (item) => lit.html`<li
+              aria-current="${ifDefined_js.ifDefined(item.active ? "true" : void 0)}"
+              aria-label="${ifDefined_js.ifDefined(item.ariaLabel?.trim() || void 0)}"
+              class="${this.itemClasses(item)}"
+              data-sp-list-group-row
+              id="${ifDefined_js.ifDefined(item.id || void 0)}"
+              title="${ifDefined_js.ifDefined(item.title || void 0)}"
+            >
+              ${item}
+            </li>`
+      )}
+      </ul>`;
+    }
+    return lit.html`<div
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${this.listClasses}"
+      data-sp-list-group-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.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 lit.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 lit.html`<div
+        aria-hidden="true"
+        class="${spectreUi.getOffcanvasBackdropClasses({ open })}"
+        data-sp-offcanvas-backdrop
+        @click="${() => this.close()}"
+      ></div>
+      <div
+        aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined_js.ifDefined(this.labelledBy)}"
+        aria-modal="true"
+        class="${spectreUi.getOffcanvasClasses({
+      open,
+      placement: this.placement
+    })}"
+        data-sp-offcanvas-native
+        id="${ifDefined_js.ifDefined(this.id || void 0)}"
+        ?inert="${!open}"
+        role="dialog"
+        tabindex="-1"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      >
+        <div class="${spectreUi.getOffcanvasHeaderClasses()}">
+          <div id="${ifDefined_js.ifDefined(this.hasHeading ? this.titleId : void 0)}">
+            ${this.projection.has("header") ? this.projection.nodes("header") : this.label ?? lit.nothing}
+          </div>
+          <button
+            aria-label="${this.closeLabel ?? "Close"}"
+            class="${spectreUi.getButtonClasses({ size: "sm", variant: "ghost" })}"
+            data-sp-offcanvas-close
+            type="button"
+            @click="${() => this.close()}"
+          >
+            ${renderIcon("close")}
+          </button>
+        </div>
+        <div class="${spectreUi.getOffcanvasBodyClasses()}">
+          ${this.projection.nodes()}
+        </div>
+        ${this.projection.has("footer") ? lit.html`<div class="${spectreUi.getOffcanvasFooterClasses()}">
+                ${this.projection.nodes("footer")}
+              </div>` : lit.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: spectreUi.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 lit.html`<div
+      aria-label="${ifDefined_js.ifDefined(this.regionLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      aria-roledescription="carousel"
+      class="${spectreUi.getCarouselClasses({ fade: this.fade ?? false })}"
+      data-sp-carousel-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="region"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      @keydown="${this.handleKeydown}"
+    >
+      <div
+        aria-live="polite"
+        class="${spectreUi.getCarouselViewportClasses()}"
+        data-sp-carousel-viewport
+        @scroll="${this.handleScroll}"
+      >
+        ${slides.map(
+      (slide, index) => lit.html`<div
+              aria-label="${index + 1} of ${count}"
+              aria-roledescription="slide"
+              class="${spectreUi.getCarouselSlideClasses({ active: index === active })}"
+              data-sp-carousel-slide
+              role="group"
+            >
+              ${slide}
+            </div>`
+    )}
+      </div>
+      ${!this.hideControls && count > 1 ? lit.html`<button
+                aria-label="${this.previousLabel ?? "Previous slide"}"
+                class="${spectreUi.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="${spectreUi.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>` : lit.nothing}
+      ${!this.hideIndicators && count > 1 ? lit.html`<div class="${spectreUi.getCarouselIndicatorsClasses()}">
+              ${slides.map(
+      (_, index) => lit.html`<button
+                    aria-current="${ifDefined_js.ifDefined(
+        index === active ? "true" : void 0
+      )}"
+                    aria-label="Go to slide ${index + 1}"
+                    class="${spectreUi.getCarouselIndicatorClasses({
+        active: index === active
+      })}"
+                    data-sp-carousel-indicator
+                    type="button"
+                    @click="${() => this.goTo(index)}"
+                  ></button>`
+    )}
+            </div>` : lit.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 = spectreUi.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) ? spectreUi.getTableRowClasses({ variant }) : "";
+    replaceClasses(row, this.appliedTableClasses.get(row) ?? "", classes);
+    this.appliedTableClasses.set(row, classes);
+  }
+  render() {
+    const labelled = Boolean(
+      this.forwardedAriaLabel || this.forwardedAriaLabelledBy
+    );
+    return lit.html`<div
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${spectreUi.getTableWrapperClasses()}"
+      data-sp-table-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="${ifDefined_js.ifDefined(labelled ? "region" : void 0)}"
+      tabindex="${ifDefined_js.ifDefined(labelled ? "0" : void 0)}"
+      title="${ifDefined_js.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 = spectreUi.getPaginationItemClasses({ active, disabled });
+    const current = active ? "page" : void 0;
+    if (this.hrefTemplate) {
+      if (disabled) {
+        return lit.html`<a aria-disabled="true" class="${classes}">${content}</a>`;
+      }
+      return lit.html`<a
+        aria-current="${ifDefined_js.ifDefined(current)}"
+        aria-label="${ifDefined_js.ifDefined(label)}"
+        class="${classes}"
+        href="${this.hrefTemplate.split("{page}").join(String(target))}"
+        @click="${() => this.goTo(target)}"
+        >${content}</a
+      >`;
+    }
+    return lit.html`<button
+      aria-current="${ifDefined_js.ifDefined(current)}"
+      aria-label="${ifDefined_js.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 lit.html`<nav
+      aria-label="${ifDefined_js.ifDefined(this.navLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      data-sp-pagination-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      <ul
+        class="${spectreUi.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" ? lit.html`<li>
+                <span
+                  aria-hidden="true"
+                  class="${spectreUi.getPaginationEllipsisClasses()}"
+                  >…</span
+                >
+              </li>` : lit.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 lit.html`<ol
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${spectreUi.getStepperClasses({
+      orientation: this.orientation
+    })}"
+      data-sp-stepper-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.projection.elements().map((step, index) => {
+      const state = this.stateFor(index);
+      return lit.html`<li
+          aria-current="${ifDefined_js.ifDefined(state === "active" ? "step" : void 0)}"
+          class="${spectreUi.getStepperStepClasses({ state })}"
+          data-state="${state}"
+        >
+          <span aria-hidden="true" class="${spectreUi.getStepperIndicatorClasses()}"
+            >${state === "done" ? renderIcon("check") : index + 1}</span
+          >
+          <span class="${spectreUi.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 lit.html`<div
+      class="${spectreUi.getCardBleedClasses({
+      edges: this.bleedEdges,
+      ...this.padded != null && {
+        padded: this.padded
+      }
+    })}"
+      data-sp-card-bleed-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.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 lit.html`<div
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      class="${spectreUi.getProseClasses()}"
+      data-sp-prose-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="${ifDefined_js.ifDefined(this.forwardedAriaLabel ? "region" : void 0)}"
+      title="${ifDefined_js.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 lit.html`${this.label ? lit.html`<span class="${spectreUi.getProgressLabelClasses()}" id="${this.labelId}"
+              >${this.label}</span
+            >` : lit.nothing}
+      <div
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined_js.ifDefined(this.labelledBy)}"
+        aria-valuemax="${this.max ?? 100}"
+        aria-valuemin="0"
+        aria-valuenow="${ifDefined_js.ifDefined(indeterminate ? void 0 : this.value)}"
+        aria-valuetext="${ifDefined_js.ifDefined(this.valueText || void 0)}"
+        class="${spectreUi.getProgressClasses({ size: this.size })}"
+        data-sp-progress-native
+        id="${ifDefined_js.ifDefined(this.id || void 0)}"
+        role="progressbar"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      >
+        <div
+          class="${spectreUi.getProgressBarClasses({
+      indeterminate,
+      variant: this.variant
+    })}"
+          data-sp-progress-bar
+          style="${styleMap_js.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 ? lit.html`<span
+            class="${spectreUi.getInputLabelClasses({ disabled })}"
+            data-sp-switch-label-fallback
+            >${this.label}</span
+          >` : lit.nothing;
+    return lit.html`<label data-sp-switch-label>
+      <input
+        aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+        .checked="${live_js.live(this.checked ?? false)}"
+        class="${spectreUi.getSwitchClasses({
+      focused: this.focused ?? false,
+      size: this.size
+    })}"
+        data-sp-switch-native
+        ?disabled="${disabled}"
+        form="${ifDefined_js.ifDefined(this.form || void 0)}"
+        id="${ifDefined_js.ifDefined(this.id || void 0)}"
+        name="${ifDefined_js.ifDefined(this.name || void 0)}"
+        ?required="${this.required ?? false}"
+        role="switch"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+        type="checkbox"
+        value="${ifDefined_js.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 lit.html`<input
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${spectreUi.getRangeClasses({
+      disabled: this.disabled ?? false,
+      focused: this.focused ?? false
+    })}"
+      data-sp-range-native
+      ?disabled="${this.disabled ?? false}"
+      form="${ifDefined_js.ifDefined(this.form || void 0)}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      max="${this.max ?? 100}"
+      min="${this.min ?? 0}"
+      name="${ifDefined_js.ifDefined(this.name || void 0)}"
+      step="${this.step ?? 1}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      type="range"
+      .value="${live_js.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 lit.html`<input
+      accept="${ifDefined_js.ifDefined(this.accept || void 0)}"
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-invalid="${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${spectreUi.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_js.ifDefined(this.form || void 0)}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      ?multiple="${this.multiple ?? false}"
+      name="${ifDefined_js.ifDefined(this.name || void 0)}"
+      ?required="${this.required ?? false}"
+      title="${ifDefined_js.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 = spectreUi.getExternalAuthButtonClasses({
+      ...interactionStates(this),
+      disabled: this.isDisabled,
+      fullWidth: this.fullWidth ?? false,
+      loading: this.loading ?? false
+    });
+    const content = lit.html`${this.projection.has("icon") ? lit.html`<span class="${spectreUi.getExternalAuthButtonIconClasses()}"
+            >${this.projection.nodes("icon")}</span
+          >` : lit.nothing}${this.projection.nodes()}`;
+    if (this.href) {
+      return lit.html`<a
+        aria-busy="${ifDefined_js.ifDefined(this.loading ? "true" : void 0)}"
+        aria-disabled="${ifDefined_js.ifDefined(this.isDisabled ? "true" : void 0)}"
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        class="${classes}"
+        data-sp-external-auth-button-native
+        href="${ifDefined_js.ifDefined(this.isDisabled ? void 0 : this.href)}"
+        id="${ifDefined_js.ifDefined(this.id || void 0)}"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+        >${content}</a
+      >`;
+    }
+    return lit.html`<button
+      aria-busy="${ifDefined_js.ifDefined(this.loading ? "true" : void 0)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      class="${classes}"
+      data-sp-external-auth-button-native
+      ?disabled="${this.isDisabled}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.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 lit.html`<label
+      class="${spectreUi.getChoiceCardClasses({
+      ...hoverFocusStates(this),
+      disabled: this.disabled ?? false
+    })}"
+      data-sp-choice-card-native
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      <input
+        aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+        .checked="${live_js.live(this.checked ?? false)}"
+        data-sp-choice-card-input
+        ?disabled="${this.disabled ?? false}"
+        form="${ifDefined_js.ifDefined(this.form || void 0)}"
+        id="${ifDefined_js.ifDefined(this.id || void 0)}"
+        name="${ifDefined_js.ifDefined(this.name || void 0)}"
+        ?required="${this.required ?? false}"
+        type="${this.type ?? "radio"}"
+        value="${ifDefined_js.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" ? spectreUi.getFileInputClasses() : spectreUi.getInputClasses();
+  }
+  if (element instanceof HTMLSelectElement) {
+    return spectreUi.getSelectClasses();
+  }
+  if (element instanceof HTMLButtonElement) {
+    return spectreUi.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: spectreUi.getInputGroupAddonClasses()
+    });
+  }
+  render() {
+    return lit.html`<div
+      aria-disabled="${ifDefined_js.ifDefined(this.disabled ? "true" : void 0)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      class="${spectreUi.getInputGroupClasses({ disabled: this.disabled ?? false })}"
+      data-sp-input-group-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="group"
+      title="${ifDefined_js.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 lit.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_js.ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined_js.ifDefined(this.dialogLabelledBy)}"
+        class="${spectreUi.getPopoverClasses({
+      open,
+      placement: this.placement
+    })}"
+        data-sp-popover-native
+        id="${this.panelId}"
+        role="dialog"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      >
+        <span aria-hidden="true" class="${spectreUi.getPopoverArrowClasses()}"></span>
+        ${this.hasHeader ? lit.html`<div
+                class="${spectreUi.getPopoverHeaderClasses()}"
+                id="${this.headerId}"
+              >
+                ${this.projection.has("header") ? this.projection.nodes("header") : this.label}
+              </div>` : lit.nothing}
+        <div class="${spectreUi.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 lit.html`<button
+      aria-current="${ifDefined_js.ifDefined(isToday ? "date" : void 0)}"
+      aria-label="${label}"
+      aria-pressed="${selected ? "true" : "false"}"
+      class="${spectreUi.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 = spectreUi.getButtonClasses({
+      iconOnly: true,
+      size: "sm",
+      variant: "ghost"
+    });
+    return lit.html`<div
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(
+      this.forwardedAriaLabel ? void 0 : this.titleId
+    )}"
+      class="${spectreUi.getDatepickerClasses()}"
+      data-sp-datepicker-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="group"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      <div class="${spectreUi.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="${spectreUi.getDatepickerGridClasses()}"
+        data-sp-datepicker-grid
+        @keydown="${this.handleKeydown}"
+      >
+        ${days.slice(0, 7).map(
+      (date) => lit.html`<span
+                aria-hidden="true"
+                class="${spectreUi.getDatepickerWeekdayClasses()}"
+                >${weekdayFormat.format(date)}</span
+              >`
+    )}
+        ${days.map((date) => this.renderDay(date))}
+      </div>
+      ${this.name ? lit.html`<input
+              name="${this.name}"
+              type="hidden"
+              .value="${this.value ?? ""}"
+            />` : lit.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() {
@@ -5209,29 +8670,70 @@ 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();
 }
 
+exports.SpectreAccordionElement = SpectreAccordionElement;
+exports.SpectreAccordionItemElement = SpectreAccordionItemElement;
 exports.SpectreAlertElement = SpectreAlertElement;
 exports.SpectreAvatarElement = SpectreAvatarElement;
 exports.SpectreBadgeElement = SpectreBadgeElement;
+exports.SpectreBreadcrumbElement = SpectreBreadcrumbElement;
 exports.SpectreButtonElement = SpectreButtonElement;
+exports.SpectreCardBleedElement = SpectreCardBleedElement;
 exports.SpectreCardElement = SpectreCardElement;
+exports.SpectreCarouselElement = SpectreCarouselElement;
 exports.SpectreCheckboxElement = SpectreCheckboxElement;
+exports.SpectreChoiceCardElement = SpectreChoiceCardElement;
 exports.SpectreContainerElement = SpectreContainerElement;
+exports.SpectreDatepickerElement = SpectreDatepickerElement;
 exports.SpectreDropdownElement = SpectreDropdownElement;
+exports.SpectreExternalAuthButtonElement = SpectreExternalAuthButtonElement;
 exports.SpectreFieldsetElement = SpectreFieldsetElement;
+exports.SpectreFileInputElement = SpectreFileInputElement;
 exports.SpectreFooterChipElement = SpectreFooterChipElement;
 exports.SpectreFooterElement = SpectreFooterElement;
 exports.SpectreFooterLinkElement = SpectreFooterLinkElement;
 exports.SpectreGridElement = SpectreGridElement;
 exports.SpectreIconBoxElement = SpectreIconBoxElement;
 exports.SpectreInputElement = SpectreInputElement;
+exports.SpectreInputGroupElement = SpectreInputGroupElement;
 exports.SpectreLabelElement = SpectreLabelElement;
+exports.SpectreListGroupElement = SpectreListGroupElement;
+exports.SpectreListGroupItemElement = SpectreListGroupItemElement;
 exports.SpectreModalElement = SpectreModalElement;
 exports.SpectreNavElement = SpectreNavElement;
 exports.SpectreNavItemElement = SpectreNavItemElement;
+exports.SpectreOffcanvasElement = SpectreOffcanvasElement;
+exports.SpectrePaginationElement = SpectrePaginationElement;
+exports.SpectrePopoverElement = SpectrePopoverElement;
 exports.SpectrePricingCardElement = SpectrePricingCardElement;
+exports.SpectreProgressElement = SpectreProgressElement;
+exports.SpectreProseElement = SpectreProseElement;
 exports.SpectreRadioElement = SpectreRadioElement;
+exports.SpectreRangeElement = SpectreRangeElement;
 exports.SpectreRatingElement = SpectreRatingElement;
 exports.SpectreSectionElement = SpectreSectionElement;
 exports.SpectreSelectElement = SpectreSelectElement;
@@ -5240,34 +8742,57 @@ exports.SpectreSidebarLinkElement = SpectreSidebarLinkElement;
 exports.SpectreSidebarToggleElement = SpectreSidebarToggleElement;
 exports.SpectreSpinnerElement = SpectreSpinnerElement;
 exports.SpectreStackElement = SpectreStackElement;
+exports.SpectreStepperElement = SpectreStepperElement;
+exports.SpectreSwitchElement = SpectreSwitchElement;
+exports.SpectreTabPanelElement = SpectreTabPanelElement;
+exports.SpectreTableElement = SpectreTableElement;
+exports.SpectreTabsElement = SpectreTabsElement;
 exports.SpectreTagElement = SpectreTagElement;
 exports.SpectreTestimonialElement = SpectreTestimonialElement;
 exports.SpectreTextElement = SpectreTextElement;
 exports.SpectreTextareaElement = SpectreTextareaElement;
 exports.SpectreToastElement = SpectreToastElement;
 exports.SpectreTooltipElement = SpectreTooltipElement;
+exports.defineSpectreAccordion = defineSpectreAccordion;
+exports.defineSpectreAccordionItem = defineSpectreAccordionItem;
 exports.defineSpectreAlert = defineSpectreAlert;
 exports.defineSpectreAvatar = defineSpectreAvatar;
 exports.defineSpectreBadge = defineSpectreBadge;
+exports.defineSpectreBreadcrumb = defineSpectreBreadcrumb;
 exports.defineSpectreButton = defineSpectreButton;
 exports.defineSpectreCard = defineSpectreCard;
+exports.defineSpectreCardBleed = defineSpectreCardBleed;
+exports.defineSpectreCarousel = defineSpectreCarousel;
 exports.defineSpectreCheckbox = defineSpectreCheckbox;
+exports.defineSpectreChoiceCard = defineSpectreChoiceCard;
 exports.defineSpectreComponents = defineSpectreComponents;
 exports.defineSpectreContainer = defineSpectreContainer;
+exports.defineSpectreDatepicker = defineSpectreDatepicker;
 exports.defineSpectreDropdown = defineSpectreDropdown;
+exports.defineSpectreExternalAuthButton = defineSpectreExternalAuthButton;
 exports.defineSpectreFieldset = defineSpectreFieldset;
+exports.defineSpectreFileInput = defineSpectreFileInput;
 exports.defineSpectreFooter = defineSpectreFooter;
 exports.defineSpectreFooterChip = defineSpectreFooterChip;
 exports.defineSpectreFooterLink = defineSpectreFooterLink;
 exports.defineSpectreGrid = defineSpectreGrid;
 exports.defineSpectreIconBox = defineSpectreIconBox;
 exports.defineSpectreInput = defineSpectreInput;
+exports.defineSpectreInputGroup = defineSpectreInputGroup;
 exports.defineSpectreLabel = defineSpectreLabel;
+exports.defineSpectreListGroup = defineSpectreListGroup;
+exports.defineSpectreListGroupItem = defineSpectreListGroupItem;
 exports.defineSpectreModal = defineSpectreModal;
 exports.defineSpectreNav = defineSpectreNav;
 exports.defineSpectreNavItem = defineSpectreNavItem;
+exports.defineSpectreOffcanvas = defineSpectreOffcanvas;
+exports.defineSpectrePagination = defineSpectrePagination;
+exports.defineSpectrePopover = defineSpectrePopover;
 exports.defineSpectrePricingCard = defineSpectrePricingCard;
+exports.defineSpectreProgress = defineSpectreProgress;
+exports.defineSpectreProse = defineSpectreProse;
 exports.defineSpectreRadio = defineSpectreRadio;
+exports.defineSpectreRange = defineSpectreRange;
 exports.defineSpectreRating = defineSpectreRating;
 exports.defineSpectreSection = defineSpectreSection;
 exports.defineSpectreSelect = defineSpectreSelect;
@@ -5276,6 +8801,11 @@ exports.defineSpectreSidebarLink = defineSpectreSidebarLink;
 exports.defineSpectreSidebarToggle = defineSpectreSidebarToggle;
 exports.defineSpectreSpinner = defineSpectreSpinner;
 exports.defineSpectreStack = defineSpectreStack;
+exports.defineSpectreStepper = defineSpectreStepper;
+exports.defineSpectreSwitch = defineSpectreSwitch;
+exports.defineSpectreTabPanel = defineSpectreTabPanel;
+exports.defineSpectreTable = defineSpectreTable;
+exports.defineSpectreTabs = defineSpectreTabs;
 exports.defineSpectreTag = defineSpectreTag;
 exports.defineSpectreTestimonial = defineSpectreTestimonial;
 exports.defineSpectreText = defineSpectreText;
@@ -5295,26 +8825,43 @@ exports.spectreCardAccentColors = spectreAccentColors;
 exports.spectreCardAccentEdges = spectreAccentEdges;
 exports.spectreCardVariants = spectreCardVariants;
 exports.spectreContainerMaxWidths = spectreContainerMaxWidths;
+exports.spectreContainerPaddings = spectreSpacingScale;
+exports.spectreDisplayLevels = spectreDisplayLevels;
 exports.spectreDropdownPlacements = spectreDropdownPlacements;
+exports.spectreFileInputSizes = spectreInputSizes;
 exports.spectreGridAligns = spectreGridAligns;
+exports.spectreGridColStarts = spectreGridColStarts;
 exports.spectreGridColumns = spectreGridColumns;
 exports.spectreGridGaps = spectreGridGaps;
+exports.spectreHeadingLevels = spectreHeadingLevels;
 exports.spectreIconBoxSizes = spectreInputSizes;
 exports.spectreIconBoxVariants = spectreIconBoxVariants;
 exports.spectreInputSizes = spectreInputSizes;
 exports.spectreInputTypes = spectreInputTypes;
+exports.spectreOffcanvasPlacements = spectreOffcanvasPlacements;
+exports.spectrePaginationSizes = spectreInputSizes;
+exports.spectrePopoverPlacements = spectrePopoverPlacements;
+exports.spectreProgressSizes = spectreInputSizes;
+exports.spectreProgressVariants = spectreProgressVariants;
 exports.spectreRatingSizes = spectreInputSizes;
+exports.spectreSectionSpacings = spectreSpacingScale;
 exports.spectreSpinnerSizes = spectreInputSizes;
 exports.spectreSpinnerVariants = spectreSpinnerVariants;
 exports.spectreStackAligns = spectreStackAligns;
 exports.spectreStackBases = spectreStackBases;
 exports.spectreStackDirections = spectreStackDirections;
 exports.spectreStackGaps = spectreStackGaps;
+exports.spectreStepperOrientations = spectreStepperOrientations;
+exports.spectreSwitchSizes = spectreInputSizes;
+exports.spectreTableRowVariants = spectreTableRowVariants;
+exports.spectreTableSizes = spectreTableSizes;
+exports.spectreTabsVariants = spectreTabsVariants;
 exports.spectreTagSizes = spectreInputSizes;
 exports.spectreTagVariants = spectreTagVariants;
 exports.spectreTestimonialVariants = spectreTestimonialVariants;
 exports.spectreTextFamilies = spectreTextFamilies;
 exports.spectreTextLevels = spectreTextLevels;
+exports.spectreTextPresets = spectreTextPresets;
 exports.spectreTextSizes = spectreTextSizes;
 exports.spectreTextVariants = spectreTextVariants;
 exports.spectreToastVariants = spectreToastVariants;