@phcdevworks/spectre-components 1.12.0 → 1.15.0

package/dist/index.cjs

@@ -159,6 +159,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(
@@ -246,12 +273,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 lit.LitElement {
   constructor() {
     super(...arguments);
@@ -624,6 +669,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]");
   }
@@ -707,12 +755,30 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
         >` : lit.nothing;
   }
   render() {
+    if (this.isLink) {
+      return lit.html`<a
+        aria-busy="${this.loading ? "true" : "false"}"
+        aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+        class="${this.buttonClasses}"
+        data-sp-button-native
+        href="${ifDefined_js.ifDefined(this.href)}"
+        id="${ifDefined_js.ifDefined(this.id || void 0)}"
+        rel="${ifDefined_js.ifDefined(this.rel || void 0)}"
+        target="${ifDefined_js.ifDefined(this.target || void 0)}"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      >
+        ${this.renderButtonContent()}
+      </a>`;
+    }
     return lit.html`<button
       aria-busy="${this.loading ? "true" : "false"}"
       aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
       ?autofocus="${this.autofocus}"
+      aria-disabled="${ifDefined_js.ifDefined(this.href && this.isDisabled ? "true" : void 0)}"
       class="${this.buttonClasses}"
       data-sp-button-native
       ?disabled="${this.isDisabled}"
@@ -731,13 +797,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 }
@@ -2710,6 +2779,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() {
@@ -2724,6 +2794,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]");
   }
@@ -2740,9 +2815,11 @@ var SpectreContainerElement = class extends SpectreProjectableElement {
     }
   }
   get containerClasses() {
-    return spectreUi.getContainerClasses(
+    const recipeClasses = spectreUi.getContainerClasses(
       this.maxWidth != null ? { maxWidth: this.maxWidth } : {}
     );
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return lit.html`<div
@@ -2759,6 +2836,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") {
@@ -2774,6 +2852,7 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     super(...arguments);
     this.columns = 1;
     this.gap = "md";
+    this.innerClass = void 0;
   }
   get id() {
     return super.id;
@@ -2787,6 +2866,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]");
   }
@@ -2805,12 +2889,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 spectreUi.getGridClasses({
+    const recipeClasses = spectreUi.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 lit.html`<div
@@ -2828,7 +2920,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);
@@ -2839,6 +2933,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;
   }
@@ -2851,6 +2949,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]");
   }
@@ -2862,7 +2965,9 @@ var SpectreSectionElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-section-native");
   }
   get sectionClasses() {
-    return spectreUi.getSectionClasses({});
+    const recipeClasses = spectreUi.getSectionClasses({});
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return lit.html`<section
@@ -2878,6 +2983,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) {
@@ -2892,6 +3000,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;
@@ -2905,6 +3014,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]");
   }
@@ -2927,11 +3041,13 @@ var SpectreStackElement = class extends SpectreProjectableElement {
     }
   }
   get stackClasses() {
-    return spectreUi.getStackClasses({
+    const recipeClasses = spectreUi.getStackClasses({
       align: this.align,
       direction: this.direction,
       ...this.basis != null ? { basis: this.basis } : {}
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return lit.html`<div
@@ -2950,7 +3066,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);
@@ -2964,6 +3081,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";
@@ -3067,6 +3185,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;
     }
@@ -3102,10 +3223,14 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
     this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
   }
   get dropdownClasses() {
-    return spectreUi.getDropdownClasses({ fullWidth: this.fullWidth ?? false });
+    return spectreUi.getDropdownClasses({
+      fullWidth: this.fullWidth ?? false,
+      mega: this.mega ?? false
+    });
   }
   get menuClasses() {
     return spectreUi.getDropdownMenuClasses({
+      mega: this.mega ?? false,
       open: this.open ?? false,
       placement: this.placement
     });
@@ -3135,6 +3260,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 }
@@ -3152,6 +3278,7 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
     super(...arguments);
     this.bordered = false;
     this.fullWidth = false;
+    this.innerClass = void 0;
   }
   get id() {
     return super.id;
@@ -3165,6 +3292,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]");
   }
@@ -3184,10 +3316,12 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
     }
   }
   get footerClasses() {
-    return spectreUi.getFooterClasses({
+    const recipeClasses = spectreUi.getFooterClasses({
       bordered: this.bordered ?? false,
       fullWidth: this.fullWidth ?? false
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return lit.html`<footer
@@ -3203,7 +3337,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);
@@ -3385,6 +3520,7 @@ var SpectreNavElement = class extends SpectreProjectableElement {
     super(...arguments);
     this.bordered = false;
     this.fullWidth = false;
+    this.innerClass = void 0;
     this.sticky = false;
   }
   get id() {
@@ -3399,6 +3535,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]");
   }
@@ -3421,11 +3562,13 @@ var SpectreNavElement = class extends SpectreProjectableElement {
     }
   }
   get navClasses() {
-    return spectreUi.getNavClasses({
+    const recipeClasses = spectreUi.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 lit.html`<nav
@@ -3442,6 +3585,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") {
@@ -3458,6 +3602,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 = [];
@@ -3560,6 +3705,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;
     }
@@ -3592,10 +3740,11 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
     this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
   }
   get wrapperClasses() {
-    return spectreUi.getDropdownClasses();
+    return spectreUi.getDropdownClasses({ mega: this.mega ?? false });
   }
   get menuClasses() {
     return spectreUi.getDropdownMenuClasses({
+      mega: this.mega ?? false,
       open: this.open ?? false,
       placement: this.placement
     });
@@ -3643,6 +3792,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 }
 };
@@ -3658,6 +3808,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) => {
@@ -3692,6 +3843,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;
     }
@@ -3744,16 +3898,16 @@ var SpectreSidebarElement = class extends SpectreProjectableElement {
     return spectreUi.getSidebarClasses({ bordered: this.bordered ?? false });
   }
   render() {
-    return lit.html`<button
-        aria-expanded="${this.open ? "true" : "false"}"
-        aria-label="${ifDefined_js.ifDefined(this.toggleLabel)}"
-        class="${spectreUi.getSidebarToggleClasses()}"
-        data-sp-sidebar-toggle
-        type="button"
-        @click="${() => this.toggle()}"
-      >
-        &#9776;
-      </button>
+    return lit.html`${this.hideToggle ? lit.nothing : lit.html`<button
+              aria-expanded="${this.open ? "true" : "false"}"
+              aria-label="${ifDefined_js.ifDefined(this.toggleLabel)}"
+              class="${spectreUi.getSidebarToggleClasses()}"
+              data-sp-sidebar-toggle
+              type="button"
+              @click="${() => this.toggle()}"
+            >
+              &#9776;
+            </button>`}
       <div
         class="${spectreUi.getSidebarBackdropClasses()}"
         data-sp-sidebar-backdrop
@@ -3772,6 +3926,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 }
 };
@@ -3783,6 +3938,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 spectreUi.getSidebarToggleClasses();
+  }
+  render() {
+    return lit.html`<button
+      aria-controls="${ifDefined_js.ifDefined(this.for)}"
+      aria-expanded="${this.expanded ? "true" : "false"}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel ?? this.label)}"
+      class="${this.toggleClasses}"
+      data-sp-sidebar-toggle-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      type="button"
+      @click="${() => this.handleClick()}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.html`&#9776;`}
+    </button>`;
+  }
+};
+SpectreSidebarToggleElement.properties = {
+  for: { type: String },
+  label: { type: String }
+};
+function defineSpectreSidebarToggle(tagName = "sp-sidebar-toggle") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreSidebarToggleElement);
+  return SpectreSidebarToggleElement;
+}
 var SpectreToastElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
@@ -4130,6 +4398,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;
@@ -4158,6 +4429,7 @@ var SpectreTextElement = class extends SpectreProjectableElement {
     const textClasses = spectreUi.getTextClasses({
       ...this.family !== void 0 && { family: this.family },
       size: this.size ?? "md",
+      ...this.transform !== void 0 && { transform: this.transform },
       variant: this.variant ?? "default"
     });
     return staticHtml_js.html`<${tag}
@@ -4175,6 +4447,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") {
@@ -4216,6 +4489,7 @@ function defineSpectreComponents() {
   defineSpectreNav();
   defineSpectreNavItem();
   defineSpectreSidebar();
+  defineSpectreSidebarToggle();
   defineSpectreToast();
   defineSpectreTooltip();
   defineSpectreText();
@@ -4244,6 +4518,7 @@ exports.SpectreRatingElement = SpectreRatingElement;
 exports.SpectreSectionElement = SpectreSectionElement;
 exports.SpectreSelectElement = SpectreSelectElement;
 exports.SpectreSidebarElement = SpectreSidebarElement;
+exports.SpectreSidebarToggleElement = SpectreSidebarToggleElement;
 exports.SpectreSpinnerElement = SpectreSpinnerElement;
 exports.SpectreStackElement = SpectreStackElement;
 exports.SpectreTagElement = SpectreTagElement;
@@ -4276,6 +4551,7 @@ exports.defineSpectreRating = defineSpectreRating;
 exports.defineSpectreSection = defineSpectreSection;
 exports.defineSpectreSelect = defineSpectreSelect;
 exports.defineSpectreSidebar = defineSpectreSidebar;
+exports.defineSpectreSidebarToggle = defineSpectreSidebarToggle;
 exports.defineSpectreSpinner = defineSpectreSpinner;
 exports.defineSpectreStack = defineSpectreStack;
 exports.defineSpectreTag = defineSpectreTag;