@phcdevworks/spectre-components 1.14.0 → 1.15.0

package/dist/index.cjs

@@ -290,6 +290,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 lit.LitElement {
   constructor() {
     super(...arguments);
@@ -2772,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() {
@@ -2786,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]");
   }
@@ -2802,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
@@ -2821,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") {
@@ -2836,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;
@@ -2849,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]");
   }
@@ -2872,13 +2894,15 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     }
   }
   get gridClasses() {
-    return spectreUi.getGridClasses({
+    const recipeClasses = spectreUi.getGridClasses({
       columns: this.columns,
       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
@@ -2897,6 +2921,7 @@ var SpectreGridElement = class extends SpectreProjectableElement {
 SpectreGridElement.properties = {
   columns: { type: Number, reflect: true },
   gap: { type: String, reflect: true },
+  innerClass: { attribute: "inner-class", type: String },
   span: { type: Object }
 };
 function defineSpectreGrid(tagName = "sp-grid") {
@@ -2908,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;
   }
@@ -2920,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]");
   }
@@ -2931,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
@@ -2947,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) {
@@ -2961,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;
@@ -2974,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]");
   }
@@ -2996,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
@@ -3019,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);
@@ -3033,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";
@@ -3136,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;
     }
@@ -3171,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
     });
@@ -3204,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 }
@@ -3221,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;
@@ -3234,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]");
   }
@@ -3253,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
@@ -3272,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);
@@ -3454,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() {
@@ -3468,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]");
   }
@@ -3490,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
@@ -3511,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") {
@@ -3527,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 = [];
@@ -3629,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;
     }
@@ -3661,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
     });
@@ -3712,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 }
 };
@@ -3727,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) => {
@@ -3761,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;
     }
@@ -3813,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
@@ -3841,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 }
 };
@@ -3852,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);
@@ -4290,6 +4489,7 @@ function defineSpectreComponents() {
   defineSpectreNav();
   defineSpectreNavItem();
   defineSpectreSidebar();
+  defineSpectreSidebarToggle();
   defineSpectreToast();
   defineSpectreTooltip();
   defineSpectreText();
@@ -4318,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;
@@ -4350,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;