@phcdevworks/spectre-components 1.14.0 → 1.16.0

package/dist/index.cjs

@@ -186,16 +186,118 @@ function isGridSpanOptions(value) {
   const candidate = value;
   return (candidate.base === void 0 || isGridSpan(candidate.base)) && (candidate.md === void 0 || isGridSpan(candidate.md)) && (candidate.lg === void 0 || isGridSpan(candidate.lg));
 }
-var spectreStackDirections = ["vertical", "horizontal"];
-function isStackDirection(value) {
-  return spectreStackDirections.includes(
+var spectreGridOffsets = [
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11
+];
+function isGridOffset(value) {
+  return spectreGridOffsets.includes(value);
+}
+function isGridOffsetOptions(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return (candidate.base === void 0 || isGridOffset(candidate.base)) && (candidate.md === void 0 || isGridOffset(candidate.md)) && (candidate.lg === void 0 || isGridOffset(candidate.lg));
+}
+var spectreGridOrders = [
+  "first",
+  "last",
+  "none",
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12
+];
+function isGridOrder(value) {
+  return spectreGridOrders.includes(
     value
   );
 }
+function isGridOrderOptions(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return (candidate.base === void 0 || isGridOrder(candidate.base)) && (candidate.md === void 0 || isGridOrder(candidate.md)) && (candidate.lg === void 0 || isGridOrder(candidate.lg));
+}
+var spectreGridLeadingWeights = [1.5, 1.6, 2, 2.5, 3];
+function isGridLeadingWeight(value) {
+  return spectreGridLeadingWeights.includes(
+    value
+  );
+}
+function isGridLeadingWeightOptions(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return (candidate.base === void 0 || isGridLeadingWeight(candidate.base)) && (candidate.md === void 0 || isGridLeadingWeight(candidate.md)) && (candidate.lg === void 0 || isGridLeadingWeight(candidate.lg));
+}
+function isGridLeadingTracksOptions(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return isGridLeadingWeight(candidate.weight) || isGridLeadingWeightOptions(candidate.weight);
+}
+var spectreGridFixedTrackCounts = [1, 2, 3, 4];
+function isGridFixedTrackCount(value) {
+  return spectreGridFixedTrackCounts.includes(
+    value
+  );
+}
+function isGridFixedTracksOptions(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return isGridFixedTrackCount(candidate.count);
+}
+var spectreGridTemplates = [
+  "edge-fluid-edge",
+  "label-fluid-fluid"
+];
+function isGridTemplate(value) {
+  return spectreGridTemplates.includes(value);
+}
+function isGridExplicitTemplateOptions(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return isGridTemplate(candidate.template) && (candidate.weight === void 0 || isGridLeadingWeight(candidate.weight));
+}
+var spectreStackDirections = ["vertical", "horizontal"];
+function isStackDirection(value) {
+  return spectreStackDirections.includes(value);
+}
 var spectreStackBases = ["sidebar"];
 function isStackBasis(value) {
   return spectreStackBases.includes(value);
 }
+var spectreNavAligns = ["start", "center", "end"];
+function isNavAlign(value) {
+  return spectreNavAligns.includes(value);
+}
 var spectreStackAligns = ["center", "stretch"];
 function isStackAlign(value) {
   return spectreStackAligns.includes(value);
@@ -220,6 +322,12 @@ var spectreToastVariants = [
 function isToastVariant(value) {
   return spectreToastVariants.includes(value);
 }
+var spectreSidebarLinkLevels = ["parent", "child"];
+function isSidebarLinkLevel(value) {
+  return spectreSidebarLinkLevels.includes(
+    value
+  );
+}
 var spectreTooltipPlacements = [
   "top",
   "bottom",
@@ -280,9 +388,7 @@ var spectreTextTransforms = [
   "capitalize"
 ];
 function isTextTransform(value) {
-  return spectreTextTransforms.includes(
-    value
-  );
+  return spectreTextTransforms.includes(value);
 }
 function normalizeInt(value, fallback, min = 0) {
   if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
@@ -290,6 +396,13 @@ function normalizeInt(value, fallback, min = 0) {
   }
   return value;
 }
+var spectreUtilityClassPattern = /^sp-[a-z0-9]+(?:-[a-z0-9]+)*$/;
+function sanitizeUtilityClasses(value) {
+  if (!value) {
+    return "";
+  }
+  return value.split(/\s+/).filter((token) => spectreUtilityClassPattern.test(token)).join(" ");
+}
 var SpectreBaseElement = class extends lit.LitElement {
   constructor() {
     super(...arguments);
@@ -633,6 +746,7 @@ var SpectreProjectableElement = class extends SpectreBaseElement {
 var SpectreButtonElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.compact = false;
     this.disabled = false;
     this.fullWidth = false;
     this.iconOnly = false;
@@ -676,6 +790,9 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-button-native") || el.hasAttribute("data-sp-button-loading-label") || el.hasAttribute("data-sp-button-label-fallback");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("compact") && this.compact == null) {
+      this.compact = false;
+    }
     if (changedProperties.has("disabled") && this.disabled == null) {
       this.disabled = false;
     }
@@ -711,6 +828,7 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
   get buttonClasses() {
     return spectreUi.getButtonClasses({
+      compact: this.compact ?? false,
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
       iconOnly: this.iconOnly ?? false,
@@ -787,6 +905,7 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
 };
 SpectreButtonElement.properties = {
+  compact: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
@@ -2772,6 +2891,7 @@ function defineSpectrePricingCard(tagName = "sp-pricing-card") {
 var SpectreContainerElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.innerClass = void 0;
     this.maxWidth = void 0;
   }
   get id() {
@@ -2786,6 +2906,11 @@ var SpectreContainerElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    (_a = this.style).display || (_a.display = "block");
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-container-native]");
   }
@@ -2802,9 +2927,11 @@ var SpectreContainerElement = class extends SpectreProjectableElement {
     }
   }
   get containerClasses() {
-    return spectreUi.getContainerClasses(
+    const recipeClasses = spectreUi.getContainerClasses(
       this.maxWidth != null ? { maxWidth: this.maxWidth } : {}
     );
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return lit.html`<div
@@ -2821,6 +2948,7 @@ var SpectreContainerElement = class extends SpectreProjectableElement {
   }
 };
 SpectreContainerElement.properties = {
+  innerClass: { attribute: "inner-class", type: String },
   maxWidth: { attribute: "max-width", type: String, reflect: true }
 };
 function defineSpectreContainer(tagName = "sp-container") {
@@ -2835,7 +2963,13 @@ var SpectreGridElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
     this.columns = 1;
+    this.columnGap = void 0;
+    this.explicitTemplate = void 0;
+    this.fixedTracks = void 0;
     this.gap = "md";
+    this.innerClass = void 0;
+    this.leadingTracks = void 0;
+    this.rowGap = void 0;
   }
   get id() {
     return super.id;
@@ -2849,6 +2983,11 @@ var SpectreGridElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    (_a = this.style).display || (_a.display = "block");
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-grid-native]");
   }
@@ -2867,18 +3006,72 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     if (changedProperties.has("gap") && (this.gap == null || !isGridGap(this.gap))) {
       this.gap = "md";
     }
+    if (changedProperties.has("columnGap") && this.columnGap != null && !isGridGap(this.columnGap)) {
+      this.columnGap = void 0;
+    }
+    if (changedProperties.has("rowGap") && this.rowGap != null && !isGridGap(this.rowGap)) {
+      this.rowGap = void 0;
+    }
     if (changedProperties.has("span") && this.span !== void 0 && !isGridSpan(this.span) && !isGridSpanOptions(this.span)) {
       this.span = void 0;
     }
+    if (changedProperties.has("offset") && this.offset !== void 0 && !isGridOffset(this.offset) && !isGridOffsetOptions(this.offset)) {
+      this.offset = void 0;
+    }
+    if (changedProperties.has("rowSpan") && this.rowSpan !== void 0 && !isGridSpan(this.rowSpan) && !isGridSpanOptions(this.rowSpan)) {
+      this.rowSpan = void 0;
+    }
+    if (changedProperties.has("rowOffset") && this.rowOffset !== void 0 && !isGridOffset(this.rowOffset) && !isGridOffsetOptions(this.rowOffset)) {
+      this.rowOffset = void 0;
+    }
+    if (changedProperties.has("order") && this.order !== void 0 && !isGridOrder(this.order) && !isGridOrderOptions(this.order)) {
+      this.order = void 0;
+    }
+    if (changedProperties.has("leadingTracks") && this.leadingTracks !== void 0 && !isGridLeadingTracksOptions(this.leadingTracks)) {
+      this.leadingTracks = void 0;
+    }
+    if (changedProperties.has("fixedTracks") && this.fixedTracks !== void 0 && !isGridFixedTracksOptions(this.fixedTracks)) {
+      this.fixedTracks = void 0;
+    }
+    if (changedProperties.has("explicitTemplate") && this.explicitTemplate !== void 0 && !isGridExplicitTemplateOptions(this.explicitTemplate)) {
+      this.explicitTemplate = void 0;
+    }
   }
   get gridClasses() {
-    return spectreUi.getGridClasses({
+    const recipeClasses = spectreUi.getGridClasses({
       columns: this.columns,
       gap: this.gap,
+      ...this.columnGap !== void 0 && {
+        columnGap: this.columnGap
+      },
+      ...this.rowGap !== void 0 && { rowGap: this.rowGap },
       ...this.span !== void 0 && {
         span: this.span
+      },
+      ...this.offset !== void 0 && {
+        offset: this.offset
+      },
+      ...this.rowSpan !== void 0 && {
+        rowSpan: this.rowSpan
+      },
+      ...this.rowOffset !== void 0 && {
+        rowOffset: this.rowOffset
+      },
+      ...this.order !== void 0 && {
+        order: this.order
+      },
+      ...this.leadingTracks !== void 0 && {
+        leadingTracks: this.leadingTracks
+      },
+      ...this.fixedTracks !== void 0 && {
+        fixedTracks: this.fixedTracks
+      },
+      ...this.explicitTemplate !== void 0 && {
+        explicitTemplate: this.explicitTemplate
       }
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return lit.html`<div
@@ -2896,7 +3089,17 @@ var SpectreGridElement = class extends SpectreProjectableElement {
 };
 SpectreGridElement.properties = {
   columns: { type: Number, reflect: true },
+  columnGap: { attribute: "column-gap", type: String, reflect: true },
+  explicitTemplate: { attribute: "explicit-template", type: Object },
+  fixedTracks: { attribute: "fixed-tracks", type: Object },
   gap: { type: String, reflect: true },
+  innerClass: { attribute: "inner-class", type: String },
+  leadingTracks: { attribute: "leading-tracks", type: Object },
+  offset: { type: Object },
+  order: { type: Object },
+  rowGap: { attribute: "row-gap", type: String, reflect: true },
+  rowOffset: { attribute: "row-offset", type: Object },
+  rowSpan: { attribute: "row-span", type: Object },
   span: { type: Object }
 };
 function defineSpectreGrid(tagName = "sp-grid") {
@@ -2908,6 +3111,10 @@ function defineSpectreGrid(tagName = "sp-grid") {
   return SpectreGridElement;
 }
 var SpectreSectionElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.innerClass = void 0;
+  }
   get id() {
     return super.id;
   }
@@ -2920,6 +3127,11 @@ var SpectreSectionElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    (_a = this.style).display || (_a.display = "block");
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-section-native]");
   }
@@ -2931,7 +3143,9 @@ var SpectreSectionElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-section-native");
   }
   get sectionClasses() {
-    return spectreUi.getSectionClasses({});
+    const recipeClasses = spectreUi.getSectionClasses({});
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return lit.html`<section
@@ -2947,6 +3161,9 @@ var SpectreSectionElement = class extends SpectreProjectableElement {
     </section>`;
   }
 };
+SpectreSectionElement.properties = {
+  innerClass: { attribute: "inner-class", type: String }
+};
 function defineSpectreSection(tagName = "sp-section") {
   const existingElement = customElements.get(tagName);
   if (existingElement) {
@@ -2961,6 +3178,7 @@ var SpectreStackElement = class extends SpectreProjectableElement {
     this.align = "center";
     this.basis = void 0;
     this.direction = "vertical";
+    this.innerClass = void 0;
   }
   get id() {
     return super.id;
@@ -2974,6 +3192,11 @@ var SpectreStackElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    (_a = this.style).display || (_a.display = "block");
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-stack-native]");
   }
@@ -2996,11 +3219,13 @@ var SpectreStackElement = class extends SpectreProjectableElement {
     }
   }
   get stackClasses() {
-    return spectreUi.getStackClasses({
+    const recipeClasses = spectreUi.getStackClasses({
       align: this.align,
       direction: this.direction,
       ...this.basis != null ? { basis: this.basis } : {}
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return lit.html`<div
@@ -3019,7 +3244,8 @@ var SpectreStackElement = class extends SpectreProjectableElement {
 SpectreStackElement.properties = {
   align: { type: String, reflect: true },
   basis: { type: String, reflect: true },
-  direction: { type: String, reflect: true }
+  direction: { type: String, reflect: true },
+  innerClass: { attribute: "inner-class", type: String }
 };
 function defineSpectreStack(tagName = "sp-stack") {
   const existingElement = customElements.get(tagName);
@@ -3033,6 +3259,7 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
     this.fullWidth = false;
+    this.mega = false;
     this.open = false;
     this.placement = "bottom-start";
     this.triggerLabel = "Toggle menu";
@@ -3136,6 +3363,9 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
     if (changedProperties.has("fullWidth") && this.fullWidth == null) {
       this.fullWidth = false;
     }
+    if (changedProperties.has("mega") && this.mega == null) {
+      this.mega = false;
+    }
     if (changedProperties.has("open") && this.open == null) {
       this.open = false;
     }
@@ -3171,10 +3401,14 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
     this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
   }
   get dropdownClasses() {
-    return spectreUi.getDropdownClasses({ fullWidth: this.fullWidth ?? false });
+    return spectreUi.getDropdownClasses({
+      fullWidth: this.fullWidth ?? false,
+      mega: this.mega ?? false
+    });
   }
   get menuClasses() {
     return spectreUi.getDropdownMenuClasses({
+      mega: this.mega ?? false,
       open: this.open ?? false,
       placement: this.placement
     });
@@ -3204,6 +3438,7 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
 };
 SpectreDropdownElement.properties = {
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  mega: { type: Boolean, reflect: true },
   open: { type: Boolean, reflect: true },
   placement: { type: String, reflect: true },
   triggerLabel: { attribute: "trigger-label", type: String }
@@ -3221,6 +3456,7 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
     super(...arguments);
     this.bordered = false;
     this.fullWidth = false;
+    this.innerClass = void 0;
   }
   get id() {
     return super.id;
@@ -3234,6 +3470,11 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    (_a = this.style).display || (_a.display = "block");
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-footer-native]");
   }
@@ -3253,10 +3494,12 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
     }
   }
   get footerClasses() {
-    return spectreUi.getFooterClasses({
+    const recipeClasses = spectreUi.getFooterClasses({
       bordered: this.bordered ?? false,
       fullWidth: this.fullWidth ?? false
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return lit.html`<footer
@@ -3272,7 +3515,8 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
 };
 SpectreFooterElement.properties = {
   bordered: { type: Boolean, reflect: true },
-  fullWidth: { attribute: "full-width", type: Boolean, reflect: true }
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  innerClass: { attribute: "inner-class", type: String }
 };
 function defineSpectreFooter(tagName = "sp-footer") {
   const existingElement = customElements.get(tagName);
@@ -3282,6 +3526,137 @@ function defineSpectreFooter(tagName = "sp-footer") {
   customElements.define(tagName, SpectreFooterElement);
   return SpectreFooterElement;
 }
+var SpectreFooterChipElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  getContentContainer() {
+    return this.querySelector("[data-sp-footer-chip-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-footer-chip-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+  }
+  get footerChipClasses() {
+    return spectreUi.getFooterChipClasses({ disabled: this.disabled ?? false });
+  }
+  render() {
+    return lit.html`<span
+      aria-disabled="${ifDefined_js.ifDefined(this.disabled ? "true" : void 0)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      class="${this.footerChipClasses}"
+      data-sp-footer-chip-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </span>`;
+  }
+};
+SpectreFooterChipElement.properties = {
+  disabled: { type: Boolean, reflect: true }
+};
+function defineSpectreFooterChip(tagName = "sp-footer-chip") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreFooterChipElement);
+  return SpectreFooterChipElement;
+}
+var SpectreFooterLinkElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.active = false;
+    this.disabled = false;
+    this.href = void 0;
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  getContentContainer() {
+    return this.querySelector("[data-sp-footer-link-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-footer-link-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("active") && this.active == null) {
+      this.active = false;
+    }
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+  }
+  get footerLinkClasses() {
+    return spectreUi.getFooterLinkClasses({
+      active: this.active ?? false,
+      disabled: this.disabled ?? false
+    });
+  }
+  render() {
+    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.footerLinkClasses}"
+      data-sp-footer-link-native
+      href="${ifDefined_js.ifDefined(this.disabled ? void 0 : this.href)}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      tabindex="${ifDefined_js.ifDefined(this.disabled ? -1 : void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </a>`;
+  }
+};
+SpectreFooterLinkElement.properties = {
+  active: { type: Boolean, reflect: true },
+  disabled: { type: Boolean, reflect: true },
+  href: { type: String }
+};
+function defineSpectreFooterLink(tagName = "sp-footer-link") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreFooterLinkElement);
+  return SpectreFooterLinkElement;
+}
 var FOCUSABLE_SELECTOR = [
   "a[href]",
   "button:not([disabled])",
@@ -3452,8 +3827,10 @@ function defineSpectreModal(tagName = "sp-modal") {
 var SpectreNavElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.align = void 0;
     this.bordered = false;
     this.fullWidth = false;
+    this.innerClass = void 0;
     this.sticky = false;
   }
   get id() {
@@ -3468,6 +3845,11 @@ var SpectreNavElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    (_a = this.style).display || (_a.display = "block");
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-nav-native]");
   }
@@ -3488,13 +3870,19 @@ var SpectreNavElement = class extends SpectreProjectableElement {
     if (changedProperties.has("sticky") && this.sticky == null) {
       this.sticky = false;
     }
+    if (changedProperties.has("align") && this.align != null && !isNavAlign(this.align)) {
+      this.align = void 0;
+    }
   }
   get navClasses() {
-    return spectreUi.getNavClasses({
+    const recipeClasses = spectreUi.getNavClasses({
       bordered: this.bordered ?? false,
       fullWidth: this.fullWidth ?? false,
-      sticky: this.sticky ?? false
+      sticky: this.sticky ?? false,
+      ...this.align !== void 0 && { align: this.align }
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return lit.html`<nav
@@ -3509,8 +3897,10 @@ var SpectreNavElement = class extends SpectreProjectableElement {
   }
 };
 SpectreNavElement.properties = {
+  align: { type: String, reflect: true },
   bordered: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  innerClass: { attribute: "inner-class", type: String },
   sticky: { type: Boolean, reflect: true }
 };
 function defineSpectreNav(tagName = "sp-nav") {
@@ -3527,6 +3917,7 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
     this.dropdown = false;
     this.href = void 0;
     this.label = void 0;
+    this.mega = false;
     this.open = false;
     this.placement = "bottom-start";
     this.triggerContent = [];
@@ -3629,6 +4020,9 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
     if (changedProperties.has("dropdown") && this.dropdown == null) {
       this.dropdown = false;
     }
+    if (changedProperties.has("mega") && this.mega == null) {
+      this.mega = false;
+    }
     if (changedProperties.has("open") && this.open == null) {
       this.open = false;
     }
@@ -3661,10 +4055,11 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
     this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
   }
   get wrapperClasses() {
-    return spectreUi.getDropdownClasses();
+    return spectreUi.getDropdownClasses({ mega: this.mega ?? false });
   }
   get menuClasses() {
     return spectreUi.getDropdownMenuClasses({
+      mega: this.mega ?? false,
       open: this.open ?? false,
       placement: this.placement
     });
@@ -3712,6 +4107,7 @@ SpectreNavItemElement.properties = {
   dropdown: { 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 }
 };
@@ -3727,6 +4123,7 @@ var SpectreSidebarElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
     this.bordered = false;
+    this.hideToggle = false;
     this.open = false;
     this.toggleLabel = "Toggle sidebar";
     this.handleDocumentKeydown = (event) => {
@@ -3761,6 +4158,9 @@ var SpectreSidebarElement = class extends SpectreProjectableElement {
     if (changedProperties.has("bordered") && this.bordered == null) {
       this.bordered = false;
     }
+    if (changedProperties.has("hideToggle") && this.hideToggle == null) {
+      this.hideToggle = false;
+    }
     if (changedProperties.has("open") && this.open == null) {
       this.open = false;
     }
@@ -3813,16 +4213,16 @@ var SpectreSidebarElement = class extends SpectreProjectableElement {
     return spectreUi.getSidebarClasses({ bordered: this.bordered ?? false });
   }
   render() {
-    return lit.html`<button
-        aria-expanded="${this.open ? "true" : "false"}"
-        aria-label="${ifDefined_js.ifDefined(this.toggleLabel)}"
-        class="${spectreUi.getSidebarToggleClasses()}"
-        data-sp-sidebar-toggle
-        type="button"
-        @click="${() => this.toggle()}"
-      >
-        &#9776;
-      </button>
+    return lit.html`${this.hideToggle ? lit.nothing : lit.html`<button
+              aria-expanded="${this.open ? "true" : "false"}"
+              aria-label="${ifDefined_js.ifDefined(this.toggleLabel)}"
+              class="${spectreUi.getSidebarToggleClasses()}"
+              data-sp-sidebar-toggle
+              type="button"
+              @click="${() => this.toggle()}"
+            >
+              &#9776;
+            </button>`}
       <div
         class="${spectreUi.getSidebarBackdropClasses()}"
         data-sp-sidebar-backdrop
@@ -3841,6 +4241,7 @@ var SpectreSidebarElement = class extends SpectreProjectableElement {
 };
 SpectreSidebarElement.properties = {
   bordered: { type: Boolean, reflect: true },
+  hideToggle: { attribute: "hide-toggle", type: Boolean, reflect: true },
   open: { type: Boolean, reflect: false },
   toggleLabel: { attribute: "toggle-label", type: String }
 };
@@ -3852,6 +4253,197 @@ function defineSpectreSidebar(tagName = "sp-sidebar") {
   customElements.define(tagName, SpectreSidebarElement);
   return SpectreSidebarElement;
 }
+var SpectreSidebarLinkElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.active = false;
+    this.disabled = false;
+    this.href = void 0;
+    this.level = "parent";
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  getContentContainer() {
+    return this.querySelector("[data-sp-sidebar-link-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-sidebar-link-native");
+  }
+  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("level") && (this.level == null || !isSidebarLinkLevel(this.level))) {
+      this.level = "parent";
+    }
+  }
+  get sidebarLinkClasses() {
+    return spectreUi.getSidebarLinkClasses({
+      active: this.active ?? false,
+      disabled: this.disabled ?? false,
+      level: this.level
+    });
+  }
+  render() {
+    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.sidebarLinkClasses}"
+      data-sp-sidebar-link-native
+      href="${ifDefined_js.ifDefined(this.disabled ? void 0 : this.href)}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      tabindex="${ifDefined_js.ifDefined(this.disabled ? -1 : void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </a>`;
+  }
+};
+SpectreSidebarLinkElement.properties = {
+  active: { type: Boolean, reflect: true },
+  disabled: { type: Boolean, reflect: true },
+  href: { type: String },
+  level: { type: String, reflect: true }
+};
+function defineSpectreSidebarLink(tagName = "sp-sidebar-link") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreSidebarLinkElement);
+  return SpectreSidebarLinkElement;
+}
+var SpectreSidebarToggleElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.for = void 0;
+    this.label = "Toggle sidebar";
+    this.expanded = false;
+    this.handleTargetToggle = (event) => {
+      if (event.target !== this.targetElement) {
+        return;
+      }
+      this.syncExpanded();
+    };
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  getContentContainer() {
+    return this.querySelector("[data-sp-sidebar-toggle-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-sidebar-toggle-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("label") && !this.label) {
+      this.label = "Toggle sidebar";
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("sp-open", this.handleTargetToggle);
+    document.addEventListener("sp-close", this.handleTargetToggle);
+    this.syncExpanded();
+  }
+  disconnectedCallback() {
+    document.removeEventListener("sp-open", this.handleTargetToggle);
+    document.removeEventListener("sp-close", this.handleTargetToggle);
+    super.disconnectedCallback();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("for")) {
+      this.syncExpanded();
+    }
+  }
+  get targetElement() {
+    if (!this.for) {
+      return null;
+    }
+    const native = document.getElementById(this.for);
+    return native?.closest("sp-sidebar") ?? null;
+  }
+  syncExpanded() {
+    const next = Boolean(this.targetElement?.open);
+    if (next !== this.expanded) {
+      this.expanded = next;
+      this.requestUpdate();
+    }
+  }
+  handleClick() {
+    const target = this.targetElement;
+    if (!target) {
+      return;
+    }
+    const nextOpen = !target.open;
+    target.open = nextOpen;
+    target.dispatchEvent(
+      new CustomEvent(nextOpen ? "sp-open" : "sp-close", { bubbles: true })
+    );
+  }
+  get toggleClasses() {
+    return spectreUi.getSidebarToggleClasses();
+  }
+  render() {
+    return lit.html`<button
+      aria-controls="${ifDefined_js.ifDefined(this.for)}"
+      aria-expanded="${this.expanded ? "true" : "false"}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel ?? this.label)}"
+      class="${this.toggleClasses}"
+      data-sp-sidebar-toggle-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      type="button"
+      @click="${() => this.handleClick()}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.html`&#9776;`}
+    </button>`;
+  }
+};
+SpectreSidebarToggleElement.properties = {
+  for: { type: String },
+  label: { type: String }
+};
+function defineSpectreSidebarToggle(tagName = "sp-sidebar-toggle") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreSidebarToggleElement);
+  return SpectreSidebarToggleElement;
+}
 var SpectreToastElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
@@ -4286,10 +4878,14 @@ function defineSpectreComponents() {
   defineSpectreStack();
   defineSpectreDropdown();
   defineSpectreFooter();
+  defineSpectreFooterChip();
+  defineSpectreFooterLink();
   defineSpectreModal();
   defineSpectreNav();
   defineSpectreNavItem();
   defineSpectreSidebar();
+  defineSpectreSidebarLink();
+  defineSpectreSidebarToggle();
   defineSpectreToast();
   defineSpectreTooltip();
   defineSpectreText();
@@ -4304,7 +4900,9 @@ exports.SpectreCheckboxElement = SpectreCheckboxElement;
 exports.SpectreContainerElement = SpectreContainerElement;
 exports.SpectreDropdownElement = SpectreDropdownElement;
 exports.SpectreFieldsetElement = SpectreFieldsetElement;
+exports.SpectreFooterChipElement = SpectreFooterChipElement;
 exports.SpectreFooterElement = SpectreFooterElement;
+exports.SpectreFooterLinkElement = SpectreFooterLinkElement;
 exports.SpectreGridElement = SpectreGridElement;
 exports.SpectreIconBoxElement = SpectreIconBoxElement;
 exports.SpectreInputElement = SpectreInputElement;
@@ -4318,6 +4916,8 @@ exports.SpectreRatingElement = SpectreRatingElement;
 exports.SpectreSectionElement = SpectreSectionElement;
 exports.SpectreSelectElement = SpectreSelectElement;
 exports.SpectreSidebarElement = SpectreSidebarElement;
+exports.SpectreSidebarLinkElement = SpectreSidebarLinkElement;
+exports.SpectreSidebarToggleElement = SpectreSidebarToggleElement;
 exports.SpectreSpinnerElement = SpectreSpinnerElement;
 exports.SpectreStackElement = SpectreStackElement;
 exports.SpectreTagElement = SpectreTagElement;
@@ -4337,6 +4937,8 @@ exports.defineSpectreContainer = defineSpectreContainer;
 exports.defineSpectreDropdown = defineSpectreDropdown;
 exports.defineSpectreFieldset = defineSpectreFieldset;
 exports.defineSpectreFooter = defineSpectreFooter;
+exports.defineSpectreFooterChip = defineSpectreFooterChip;
+exports.defineSpectreFooterLink = defineSpectreFooterLink;
 exports.defineSpectreGrid = defineSpectreGrid;
 exports.defineSpectreIconBox = defineSpectreIconBox;
 exports.defineSpectreInput = defineSpectreInput;
@@ -4350,6 +4952,8 @@ exports.defineSpectreRating = defineSpectreRating;
 exports.defineSpectreSection = defineSpectreSection;
 exports.defineSpectreSelect = defineSpectreSelect;
 exports.defineSpectreSidebar = defineSpectreSidebar;
+exports.defineSpectreSidebarLink = defineSpectreSidebarLink;
+exports.defineSpectreSidebarToggle = defineSpectreSidebarToggle;
 exports.defineSpectreSpinner = defineSpectreSpinner;
 exports.defineSpectreStack = defineSpectreStack;
 exports.defineSpectreTag = defineSpectreTag;