@phcdevworks/spectre-components 1.12.0 → 1.15.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, getModalOverlayClasses, getModalClasses, getNavClasses, getNavLinkClasses, getSidebarClasses, getSidebarToggleClasses, getSidebarBackdropClasses, 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,33 @@ var spectreGridGaps = ["sm", "md", "lg"];
 function isGridGap(value) {
   return spectreGridGaps.includes(value);
 }
+var spectreGridSpans = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  "full"
+];
+function isGridSpan(value) {
+  return spectreGridSpans.includes(
+    value
+  );
+}
+function isGridSpanOptions(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  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(
@@ -244,12 +271,30 @@ var spectreTextLevels = [
 function isTextLevel(value) {
   return spectreTextLevels.includes(value);
 }
+var spectreTextTransforms = [
+  "none",
+  "uppercase",
+  "lowercase",
+  "capitalize"
+];
+function isTextTransform(value) {
+  return spectreTextTransforms.includes(
+    value
+  );
+}
 function normalizeInt(value, fallback, min = 0) {
   if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
     return fallback;
   }
   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);
@@ -622,6 +667,9 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   set autofocus(value) {
     super.autofocus = value;
   }
+  get isLink() {
+    return Boolean(this.href) && !this.isDisabled;
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-button-native]");
   }
@@ -705,12 +753,30 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
         >` : nothing;
   }
   render() {
+    if (this.isLink) {
+      return html`<a
+        aria-busy="${this.loading ? "true" : "false"}"
+        aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+        class="${this.buttonClasses}"
+        data-sp-button-native
+        href="${ifDefined(this.href)}"
+        id="${ifDefined(this.id || void 0)}"
+        rel="${ifDefined(this.rel || void 0)}"
+        target="${ifDefined(this.target || void 0)}"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        ${this.renderButtonContent()}
+      </a>`;
+    }
     return html`<button
       aria-busy="${this.loading ? "true" : "false"}"
       aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
       ?autofocus="${this.autofocus}"
+      aria-disabled="${ifDefined(this.href && this.isDisabled ? "true" : void 0)}"
       class="${this.buttonClasses}"
       data-sp-button-native
       ?disabled="${this.isDisabled}"
@@ -729,13 +795,16 @@ SpectreButtonElement.properties = {
   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 },
   label: { type: String, reflect: true },
   loading: { type: Boolean, reflect: true },
   loadingLabel: { attribute: "loading-label", type: String, reflect: true },
   name: { type: String, reflect: true },
   pill: { type: Boolean, reflect: true },
+  rel: { type: String },
   size: { type: String, reflect: true },
+  target: { type: String },
   type: { type: String, reflect: true },
   variant: { type: String, reflect: true },
   value: { type: String }
@@ -2708,6 +2777,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() {
@@ -2722,6 +2792,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]");
   }
@@ -2738,9 +2813,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
@@ -2757,6 +2834,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") {
@@ -2772,6 +2850,7 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     super(...arguments);
     this.columns = 1;
     this.gap = "md";
+    this.innerClass = void 0;
   }
   get id() {
     return super.id;
@@ -2785,6 +2864,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]");
   }
@@ -2803,12 +2887,20 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     if (changedProperties.has("gap") && (this.gap == null || !isGridGap(this.gap))) {
       this.gap = "md";
     }
+    if (changedProperties.has("span") && this.span !== void 0 && !isGridSpan(this.span) && !isGridSpanOptions(this.span)) {
+      this.span = void 0;
+    }
   }
   get gridClasses() {
-    return getGridClasses({
+    const recipeClasses = getGridClasses({
       columns: this.columns,
-      gap: this.gap
+      gap: this.gap,
+      ...this.span !== void 0 && {
+        span: this.span
+      }
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return html`<div
@@ -2826,7 +2918,9 @@ var SpectreGridElement = class extends SpectreProjectableElement {
 };
 SpectreGridElement.properties = {
   columns: { type: Number, reflect: true },
-  gap: { type: String, reflect: true }
+  gap: { type: String, reflect: true },
+  innerClass: { attribute: "inner-class", type: String },
+  span: { type: Object }
 };
 function defineSpectreGrid(tagName = "sp-grid") {
   const existingElement = customElements.get(tagName);
@@ -2837,6 +2931,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;
   }
@@ -2849,6 +2947,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]");
   }
@@ -2860,7 +2963,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
@@ -2876,6 +2981,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) {
@@ -2890,6 +2998,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;
@@ -2903,6 +3012,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]");
   }
@@ -2925,11 +3039,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
@@ -2948,7 +3064,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);
@@ -2962,6 +3079,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";
@@ -3065,6 +3183,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;
     }
@@ -3100,10 +3221,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
     });
@@ -3133,6 +3258,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 }
@@ -3150,6 +3276,7 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
     super(...arguments);
     this.bordered = false;
     this.fullWidth = false;
+    this.innerClass = void 0;
   }
   get id() {
     return super.id;
@@ -3163,6 +3290,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]");
   }
@@ -3182,10 +3314,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
@@ -3201,7 +3335,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);
@@ -3383,6 +3518,7 @@ var SpectreNavElement = class extends SpectreProjectableElement {
     super(...arguments);
     this.bordered = false;
     this.fullWidth = false;
+    this.innerClass = void 0;
     this.sticky = false;
   }
   get id() {
@@ -3397,6 +3533,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]");
   }
@@ -3419,11 +3560,13 @@ var SpectreNavElement = class extends SpectreProjectableElement {
     }
   }
   get navClasses() {
-    return getNavClasses({
+    const recipeClasses = getNavClasses({
       bordered: this.bordered ?? false,
       fullWidth: this.fullWidth ?? false,
       sticky: this.sticky ?? false
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return html`<nav
@@ -3440,6 +3583,7 @@ var SpectreNavElement = class extends SpectreProjectableElement {
 SpectreNavElement.properties = {
   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") {
@@ -3456,6 +3600,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 = [];
@@ -3558,6 +3703,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;
     }
@@ -3590,10 +3738,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
     });
@@ -3641,6 +3790,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 }
 };
@@ -3656,6 +3806,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) => {
@@ -3690,6 +3841,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;
     }
@@ -3742,16 +3896,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
@@ -3770,6 +3924,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 }
 };
@@ -3781,6 +3936,119 @@ function defineSpectreSidebar(tagName = "sp-sidebar") {
   customElements.define(tagName, SpectreSidebarElement);
   return SpectreSidebarElement;
 }
+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);
@@ -4128,6 +4396,9 @@ var SpectreTextElement = class extends SpectreProjectableElement {
     if (changedProperties.has("variant") && !isTextVariant(this.variant)) {
       this.variant = "default";
     }
+    if (changedProperties.has("transform") && this.transform !== void 0 && !isTextTransform(this.transform)) {
+      this.transform = void 0;
+    }
   }
   get id() {
     return super.id;
@@ -4156,6 +4427,7 @@ var SpectreTextElement = class extends SpectreProjectableElement {
     const textClasses = getTextClasses({
       ...this.family !== void 0 && { family: this.family },
       size: this.size ?? "md",
+      ...this.transform !== void 0 && { transform: this.transform },
       variant: this.variant ?? "default"
     });
     return html$1`<${tag}
@@ -4173,6 +4445,7 @@ SpectreTextElement.properties = {
   family: { type: String, reflect: true },
   level: { type: String, reflect: true },
   size: { type: String, reflect: true },
+  transform: { type: String, reflect: true },
   variant: { type: String, reflect: true }
 };
 function defineSpectreText(tagName = "sp-text") {
@@ -4214,11 +4487,12 @@ function defineSpectreComponents() {
   defineSpectreNav();
   defineSpectreNavItem();
   defineSpectreSidebar();
+  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, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map