@phcdevworks/spectre-components 1.15.0 → 1.17.0

package/dist/index.cjs

@@ -159,6 +159,16 @@ var spectreGridGaps = ["sm", "md", "lg"];
 function isGridGap(value) {
   return spectreGridGaps.includes(value);
 }
+var spectreGridAligns = [
+  "start",
+  "center",
+  "end",
+  "baseline",
+  "stretch"
+];
+function isGridAlign(value) {
+  return spectreGridAligns.includes(value);
+}
 var spectreGridSpans = [
   1,
   2,
@@ -186,20 +196,126 @@ 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);
 }
+var spectreStackGaps = ["sm", "md", "lg"];
+function isStackGap(value) {
+  return spectreStackGaps.includes(value);
+}
 var spectreDropdownPlacements = [
   "bottom-start",
   "bottom-end",
@@ -220,6 +336,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 +402,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,7 +410,7 @@ function normalizeInt(value, fallback, min = 0) {
   }
   return value;
 }
-var spectreUtilityClassPattern = /^sp-[a-z0-9]+(?:-[a-z0-9]+)*$/;
+var spectreUtilityClassPattern = /^sp-[a-z0-9]+(?:-[a-z0-9]+)*(?:__[a-z0-9]+(?:-[a-z0-9]+)*)?(?:--[a-z0-9]+(?:-[a-z0-9]+)*)?$/;
 function sanitizeUtilityClasses(value) {
   if (!value) {
     return "";
@@ -640,9 +760,11 @@ 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;
+    this.innerClass = void 0;
     this.loading = false;
     this.loadingLabel = "Loading";
     this.pill = false;
@@ -683,6 +805,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;
     }
@@ -717,7 +842,8 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     }
   }
   get buttonClasses() {
-    return spectreUi.getButtonClasses({
+    const recipeClasses = spectreUi.getButtonClasses({
+      compact: this.compact ?? false,
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
       iconOnly: this.iconOnly ?? false,
@@ -726,6 +852,8 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
       size: this.size,
       variant: this.variant
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   get visibleLabelFallback() {
     const trimmedLabel = this.label?.trim();
@@ -794,11 +922,13 @@ 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 },
   href: { type: String, reflect: true },
   iconOnly: { attribute: "icon-only", type: Boolean, reflect: true },
+  innerClass: { attribute: "inner-class", type: String },
   label: { type: String, reflect: true },
   loading: { type: Boolean, reflect: true },
   loadingLabel: { attribute: "loading-label", type: String, reflect: true },
@@ -1928,11 +2058,20 @@ function defineSpectreBadge(tagName = "sp-badge") {
   customElements.define(tagName, SpectreBadgeElement);
   return SpectreBadgeElement;
 }
+var paddedConverter = {
+  fromAttribute(value) {
+    return value !== "false";
+  },
+  toAttribute(value) {
+    return value ? null : "false";
+  }
+};
 var SpectreCardElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
     this.disabled = false;
     this.fullHeight = false;
+    this.innerClass = void 0;
     this.interactive = false;
     this.loading = false;
     this.padded = true;
@@ -1981,7 +2120,7 @@ var SpectreCardElement = class extends SpectreProjectableElement {
     }
   }
   get cardClasses() {
-    return spectreUi.getCardClasses({
+    const recipeClasses = spectreUi.getCardClasses({
       disabled: this.isDisabled,
       fullHeight: this.fullHeight ?? false,
       interactive: this.interactive ?? false,
@@ -1989,6 +2128,8 @@ var SpectreCardElement = class extends SpectreProjectableElement {
       padded: this.padded ?? true,
       variant: this.variant
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return lit.html`<div
@@ -2009,9 +2150,10 @@ var SpectreCardElement = class extends SpectreProjectableElement {
 SpectreCardElement.properties = {
   disabled: { type: Boolean, reflect: true },
   fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
+  innerClass: { attribute: "inner-class", type: String },
   interactive: { type: Boolean, reflect: true },
   loading: { type: Boolean, reflect: true },
-  padded: { type: Boolean, reflect: true },
+  padded: { converter: paddedConverter, reflect: true },
   variant: { type: String, reflect: true }
 };
 function defineSpectreCard(tagName = "sp-card") {
@@ -2850,9 +2992,15 @@ function defineSpectreContainer(tagName = "sp-container") {
 var SpectreGridElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.align = void 0;
     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;
@@ -2882,6 +3030,9 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-grid-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("align") && this.align != null && !isGridAlign(this.align)) {
+      this.align = void 0;
+    }
     if (changedProperties.has("columns")) {
       const normalized = normalizeInt(this.columns, void 0, 1);
       this.columns = normalized != null && isGridColumns(normalized) ? normalized : 1;
@@ -2889,16 +3040,69 @@ 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() {
     const recipeClasses = spectreUi.getGridClasses({
       columns: this.columns,
       gap: this.gap,
+      ...this.align !== void 0 && { align: this.align },
+      ...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);
@@ -2919,9 +3123,19 @@ var SpectreGridElement = class extends SpectreProjectableElement {
   }
 };
 SpectreGridElement.properties = {
+  align: { type: String, reflect: true },
   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") {
@@ -3000,6 +3214,7 @@ var SpectreStackElement = class extends SpectreProjectableElement {
     this.align = "center";
     this.basis = void 0;
     this.direction = "vertical";
+    this.gap = "md";
     this.innerClass = void 0;
   }
   get id() {
@@ -3039,11 +3254,15 @@ var SpectreStackElement = class extends SpectreProjectableElement {
     if (changedProperties.has("align") && (this.align == null || !isStackAlign(this.align))) {
       this.align = "center";
     }
+    if (changedProperties.has("gap") && (this.gap == null || !isStackGap(this.gap))) {
+      this.gap = "md";
+    }
   }
   get stackClasses() {
     const recipeClasses = spectreUi.getStackClasses({
       align: this.align,
       direction: this.direction,
+      gap: this.gap,
       ...this.basis != null ? { basis: this.basis } : {}
     });
     const utilityClasses = sanitizeUtilityClasses(this.innerClass);
@@ -3067,6 +3286,7 @@ SpectreStackElement.properties = {
   align: { type: String, reflect: true },
   basis: { type: String, reflect: true },
   direction: { type: String, reflect: true },
+  gap: { type: String, reflect: true },
   innerClass: { attribute: "inner-class", type: String }
 };
 function defineSpectreStack(tagName = "sp-stack") {
@@ -3348,6 +3568,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])",
@@ -3518,6 +3869,7 @@ 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;
@@ -3560,12 +3912,16 @@ 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() {
     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;
@@ -3583,6 +3939,7 @@ 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 },
@@ -3938,6 +4295,84 @@ 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);
@@ -4485,10 +4920,13 @@ function defineSpectreComponents() {
   defineSpectreStack();
   defineSpectreDropdown();
   defineSpectreFooter();
+  defineSpectreFooterChip();
+  defineSpectreFooterLink();
   defineSpectreModal();
   defineSpectreNav();
   defineSpectreNavItem();
   defineSpectreSidebar();
+  defineSpectreSidebarLink();
   defineSpectreSidebarToggle();
   defineSpectreToast();
   defineSpectreTooltip();
@@ -4504,7 +4942,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;
@@ -4518,6 +4958,7 @@ exports.SpectreRatingElement = SpectreRatingElement;
 exports.SpectreSectionElement = SpectreSectionElement;
 exports.SpectreSelectElement = SpectreSelectElement;
 exports.SpectreSidebarElement = SpectreSidebarElement;
+exports.SpectreSidebarLinkElement = SpectreSidebarLinkElement;
 exports.SpectreSidebarToggleElement = SpectreSidebarToggleElement;
 exports.SpectreSpinnerElement = SpectreSpinnerElement;
 exports.SpectreStackElement = SpectreStackElement;
@@ -4538,6 +4979,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;
@@ -4551,6 +4994,7 @@ exports.defineSpectreRating = defineSpectreRating;
 exports.defineSpectreSection = defineSpectreSection;
 exports.defineSpectreSelect = defineSpectreSelect;
 exports.defineSpectreSidebar = defineSpectreSidebar;
+exports.defineSpectreSidebarLink = defineSpectreSidebarLink;
 exports.defineSpectreSidebarToggle = defineSpectreSidebarToggle;
 exports.defineSpectreSpinner = defineSpectreSpinner;
 exports.defineSpectreStack = defineSpectreStack;
@@ -4572,6 +5016,7 @@ exports.spectreButtonVariants = spectreButtonVariants;
 exports.spectreCardVariants = spectreCardVariants;
 exports.spectreContainerMaxWidths = spectreContainerMaxWidths;
 exports.spectreDropdownPlacements = spectreDropdownPlacements;
+exports.spectreGridAligns = spectreGridAligns;
 exports.spectreGridColumns = spectreGridColumns;
 exports.spectreGridGaps = spectreGridGaps;
 exports.spectreIconBoxSizes = spectreInputSizes;
@@ -4584,6 +5029,7 @@ exports.spectreSpinnerVariants = spectreSpinnerVariants;
 exports.spectreStackAligns = spectreStackAligns;
 exports.spectreStackBases = spectreStackBases;
 exports.spectreStackDirections = spectreStackDirections;
+exports.spectreStackGaps = spectreStackGaps;
 exports.spectreTagSizes = spectreInputSizes;
 exports.spectreTagVariants = spectreTagVariants;
 exports.spectreTestimonialVariants = spectreTestimonialVariants;