@phcdevworks/spectre-components 1.15.0 → 1.17.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { getButtonClasses, getInputLabelClasses, getInputClasses, getTextareaClasses, getSelectClasses, getCheckboxClasses, getRadioClasses, getLabelClasses, getFieldsetLegendClasses, getFieldsetClasses, getBadgeClasses, getCardClasses, getIconBoxClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialClasses, getAlertClasses, getAvatarClasses, getSpinnerClasses, getTagClasses, getPricingCardClasses, getContainerClasses, getGridClasses, getSectionClasses, getStackClasses, getDropdownClasses, getDropdownMenuClasses, getFooterClasses, getModalOverlayClasses, getModalClasses, getNavClasses, getNavLinkClasses, getSidebarClasses, getSidebarToggleClasses, getSidebarBackdropClasses, getToastClasses, getToastIconClasses, getTooltipClasses, getTextClasses } from '@phcdevworks/spectre-ui';
+import { getButtonClasses, getInputLabelClasses, getInputClasses, getTextareaClasses, getSelectClasses, getCheckboxClasses, getRadioClasses, getLabelClasses, getFieldsetLegendClasses, getFieldsetClasses, getBadgeClasses, getCardClasses, getIconBoxClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialClasses, getAlertClasses, getAvatarClasses, getSpinnerClasses, getTagClasses, getPricingCardClasses, getContainerClasses, getGridClasses, getSectionClasses, getStackClasses, getDropdownClasses, getDropdownMenuClasses, getFooterClasses, getFooterChipClasses, getFooterLinkClasses, getModalOverlayClasses, getModalClasses, getNavClasses, getNavLinkClasses, getSidebarClasses, getSidebarToggleClasses, getSidebarBackdropClasses, getSidebarLinkClasses, getToastClasses, getToastIconClasses, getTooltipClasses, getTextClasses } from '@phcdevworks/spectre-ui';
 import { LitElement, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
@@ -157,6 +157,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,
@@ -184,20 +194,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",
@@ -218,6 +334,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",
@@ -278,9 +400,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) {
@@ -288,7 +408,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 "";
@@ -638,9 +758,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;
@@ -681,6 +803,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;
     }
@@ -715,7 +840,8 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     }
   }
   get buttonClasses() {
-    return getButtonClasses({
+    const recipeClasses = getButtonClasses({
+      compact: this.compact ?? false,
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
       iconOnly: this.iconOnly ?? false,
@@ -724,6 +850,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();
@@ -792,11 +920,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 },
@@ -1926,11 +2056,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;
@@ -1979,7 +2118,7 @@ var SpectreCardElement = class extends SpectreProjectableElement {
     }
   }
   get cardClasses() {
-    return getCardClasses({
+    const recipeClasses = getCardClasses({
       disabled: this.isDisabled,
       fullHeight: this.fullHeight ?? false,
       interactive: this.interactive ?? false,
@@ -1987,6 +2126,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 html`<div
@@ -2007,9 +2148,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") {
@@ -2848,9 +2990,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;
@@ -2880,6 +3028,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;
@@ -2887,16 +3038,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 = 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);
@@ -2917,9 +3121,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") {
@@ -2998,6 +3212,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() {
@@ -3037,11 +3252,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 = getStackClasses({
       align: this.align,
       direction: this.direction,
+      gap: this.gap,
       ...this.basis != null ? { basis: this.basis } : {}
     });
     const utilityClasses = sanitizeUtilityClasses(this.innerClass);
@@ -3065,6 +3284,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") {
@@ -3346,6 +3566,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 getFooterChipClasses({ disabled: this.disabled ?? false });
+  }
+  render() {
+    return html`<span
+      aria-disabled="${ifDefined(this.disabled ? "true" : void 0)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      class="${this.footerChipClasses}"
+      data-sp-footer-chip-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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 getFooterLinkClasses({
+      active: this.active ?? false,
+      disabled: this.disabled ?? false
+    });
+  }
+  render() {
+    return html`<a
+      aria-current="${ifDefined(this.active ? "page" : void 0)}"
+      aria-disabled="${ifDefined(this.disabled ? "true" : void 0)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      class="${this.footerLinkClasses}"
+      data-sp-footer-link-native
+      href="${ifDefined(this.disabled ? void 0 : this.href)}"
+      id="${ifDefined(this.id || void 0)}"
+      tabindex="${ifDefined(this.disabled ? -1 : void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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])",
@@ -3516,6 +3867,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;
@@ -3558,12 +3910,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 = 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;
@@ -3581,6 +3937,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 },
@@ -3936,6 +4293,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 getSidebarLinkClasses({
+      active: this.active ?? false,
+      disabled: this.disabled ?? false,
+      level: this.level
+    });
+  }
+  render() {
+    return html`<a
+      aria-current="${ifDefined(this.active ? "page" : void 0)}"
+      aria-disabled="${ifDefined(this.disabled ? "true" : void 0)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      class="${this.sidebarLinkClasses}"
+      data-sp-sidebar-link-native
+      href="${ifDefined(this.disabled ? void 0 : this.href)}"
+      id="${ifDefined(this.id || void 0)}"
+      tabindex="${ifDefined(this.disabled ? -1 : void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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);
@@ -4483,16 +4918,19 @@ function defineSpectreComponents() {
   defineSpectreStack();
   defineSpectreDropdown();
   defineSpectreFooter();
+  defineSpectreFooterChip();
+  defineSpectreFooterLink();
   defineSpectreModal();
   defineSpectreNav();
   defineSpectreNavItem();
   defineSpectreSidebar();
+  defineSpectreSidebarLink();
   defineSpectreSidebarToggle();
   defineSpectreToast();
   defineSpectreTooltip();
   defineSpectreText();
 }
 
-export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreContainerElement, SpectreDropdownElement, SpectreFieldsetElement, SpectreFooterElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectreModalElement, SpectreNavElement, SpectreNavItemElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSidebarElement, SpectreSidebarToggleElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextElement, SpectreTextareaElement, SpectreToastElement, SpectreTooltipElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreDropdown, defineSpectreFieldset, defineSpectreFooter, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectreModal, defineSpectreNav, defineSpectreNavItem, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSidebar, defineSpectreSidebarToggle, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, defineSpectreText, defineSpectreTextarea, defineSpectreToast, defineSpectreTooltip, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreContainerMaxWidths, spectreDropdownPlacements, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants, spectreTextFamilies, spectreTextLevels, spectreTextSizes, spectreTextVariants, spectreToastVariants, spectreTooltipPlacements };
+export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreContainerElement, SpectreDropdownElement, SpectreFieldsetElement, SpectreFooterChipElement, SpectreFooterElement, SpectreFooterLinkElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectreModalElement, SpectreNavElement, SpectreNavItemElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSidebarElement, SpectreSidebarLinkElement, SpectreSidebarToggleElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextElement, SpectreTextareaElement, SpectreToastElement, SpectreTooltipElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreDropdown, defineSpectreFieldset, defineSpectreFooter, defineSpectreFooterChip, defineSpectreFooterLink, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectreModal, defineSpectreNav, defineSpectreNavItem, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSidebar, defineSpectreSidebarLink, defineSpectreSidebarToggle, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, defineSpectreText, defineSpectreTextarea, defineSpectreToast, defineSpectreTooltip, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreContainerMaxWidths, spectreDropdownPlacements, spectreGridAligns, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreStackGaps, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants, spectreTextFamilies, spectreTextLevels, spectreTextSizes, spectreTextVariants, spectreToastVariants, spectreTooltipPlacements };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map