@phcdevworks/spectre-components 1.14.0 → 1.16.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, getStackClasses, getDropdownClasses, getDropdownMenuClasses, getFooterClasses, getModalOverlayClasses, getModalClasses, getNavClasses, getNavLinkClasses, getSidebarClasses, getSidebarToggleClasses, getSidebarBackdropClasses, getToastClasses, getToastIconClasses, getTooltipClasses, getTextClasses, getSectionClasses } 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';
@@ -184,16 +184,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);
@@ -218,6 +320,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 +386,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,6 +394,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 LitElement {
   constructor() {
     super(...arguments);
@@ -631,6 +744,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;
@@ -674,6 +788,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;
     }
@@ -709,6 +826,7 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
   get buttonClasses() {
     return getButtonClasses({
+      compact: this.compact ?? false,
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
       iconOnly: this.iconOnly ?? false,
@@ -785,6 +903,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 },
@@ -2770,6 +2889,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() {
@@ -2784,6 +2904,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]");
   }
@@ -2800,9 +2925,11 @@ var SpectreContainerElement = class extends SpectreProjectableElement {
     }
   }
   get containerClasses() {
-    return getContainerClasses(
+    const recipeClasses = getContainerClasses(
       this.maxWidth != null ? { maxWidth: this.maxWidth } : {}
     );
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return html`<div
@@ -2819,6 +2946,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") {
@@ -2833,7 +2961,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;
@@ -2847,6 +2981,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]");
   }
@@ -2865,18 +3004,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 getGridClasses({
+    const recipeClasses = 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 html`<div
@@ -2894,7 +3087,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") {
@@ -2906,6 +3109,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;
   }
@@ -2918,6 +3125,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]");
   }
@@ -2929,7 +3141,9 @@ var SpectreSectionElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-section-native");
   }
   get sectionClasses() {
-    return getSectionClasses({});
+    const recipeClasses = getSectionClasses({});
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return html`<section
@@ -2945,6 +3159,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) {
@@ -2959,6 +3176,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;
@@ -2972,6 +3190,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]");
   }
@@ -2994,11 +3217,13 @@ var SpectreStackElement = class extends SpectreProjectableElement {
     }
   }
   get stackClasses() {
-    return getStackClasses({
+    const recipeClasses = 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 html`<div
@@ -3017,7 +3242,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);
@@ -3031,6 +3257,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";
@@ -3134,6 +3361,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;
     }
@@ -3169,10 +3399,14 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
     this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
   }
   get dropdownClasses() {
-    return getDropdownClasses({ fullWidth: this.fullWidth ?? false });
+    return getDropdownClasses({
+      fullWidth: this.fullWidth ?? false,
+      mega: this.mega ?? false
+    });
   }
   get menuClasses() {
     return getDropdownMenuClasses({
+      mega: this.mega ?? false,
       open: this.open ?? false,
       placement: this.placement
     });
@@ -3202,6 +3436,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 }
@@ -3219,6 +3454,7 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
     super(...arguments);
     this.bordered = false;
     this.fullWidth = false;
+    this.innerClass = void 0;
   }
   get id() {
     return super.id;
@@ -3232,6 +3468,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]");
   }
@@ -3251,10 +3492,12 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
     }
   }
   get footerClasses() {
-    return getFooterClasses({
+    const recipeClasses = getFooterClasses({
       bordered: this.bordered ?? false,
       fullWidth: this.fullWidth ?? false
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return html`<footer
@@ -3270,7 +3513,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);
@@ -3280,6 +3524,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])",
@@ -3450,8 +3825,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() {
@@ -3466,6 +3843,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]");
   }
@@ -3486,13 +3868,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 getNavClasses({
+    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;
   }
   render() {
     return html`<nav
@@ -3507,8 +3895,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") {
@@ -3525,6 +3915,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 = [];
@@ -3627,6 +4018,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;
     }
@@ -3659,10 +4053,11 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
     this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
   }
   get wrapperClasses() {
-    return getDropdownClasses();
+    return getDropdownClasses({ mega: this.mega ?? false });
   }
   get menuClasses() {
     return getDropdownMenuClasses({
+      mega: this.mega ?? false,
       open: this.open ?? false,
       placement: this.placement
     });
@@ -3710,6 +4105,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 }
 };
@@ -3725,6 +4121,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) => {
@@ -3759,6 +4156,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;
     }
@@ -3811,16 +4211,16 @@ var SpectreSidebarElement = class extends SpectreProjectableElement {
     return getSidebarClasses({ bordered: this.bordered ?? false });
   }
   render() {
-    return html`<button
-        aria-expanded="${this.open ? "true" : "false"}"
-        aria-label="${ifDefined(this.toggleLabel)}"
-        class="${getSidebarToggleClasses()}"
-        data-sp-sidebar-toggle
-        type="button"
-        @click="${() => this.toggle()}"
-      >
-        &#9776;
-      </button>
+    return html`${this.hideToggle ? nothing : html`<button
+              aria-expanded="${this.open ? "true" : "false"}"
+              aria-label="${ifDefined(this.toggleLabel)}"
+              class="${getSidebarToggleClasses()}"
+              data-sp-sidebar-toggle
+              type="button"
+              @click="${() => this.toggle()}"
+            >
+              &#9776;
+            </button>`}
       <div
         class="${getSidebarBackdropClasses()}"
         data-sp-sidebar-backdrop
@@ -3839,6 +4239,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 }
 };
@@ -3850,6 +4251,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 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);
+    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 getSidebarToggleClasses();
+  }
+  render() {
+    return html`<button
+      aria-controls="${ifDefined(this.for)}"
+      aria-expanded="${this.expanded ? "true" : "false"}"
+      aria-label="${ifDefined(this.forwardedAriaLabel ?? this.label)}"
+      class="${this.toggleClasses}"
+      data-sp-sidebar-toggle-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+      type="button"
+      @click="${() => this.handleClick()}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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);
@@ -4284,15 +4876,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, 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, 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, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map