@phcdevworks/spectre-components 1.6.0 → 1.8.0

package/dist/index.cjs

@@ -172,6 +172,37 @@ var spectreStackAligns = ["center", "stretch"];
 function isStackAlign(value) {
   return spectreStackAligns.includes(value);
 }
+var spectreDropdownPlacements = [
+  "bottom-start",
+  "bottom-end",
+  "top-start",
+  "top-end"
+];
+function isDropdownPlacement(value) {
+  return spectreDropdownPlacements.includes(
+    value
+  );
+}
+var spectreToastVariants = [
+  "info",
+  "success",
+  "warning",
+  "danger"
+];
+function isToastVariant(value) {
+  return spectreToastVariants.includes(value);
+}
+var spectreTooltipPlacements = [
+  "top",
+  "bottom",
+  "left",
+  "right"
+];
+function isTooltipPlacement(value) {
+  return spectreTooltipPlacements.includes(
+    value
+  );
+}
 function normalizeInt(value, fallback, min = 0) {
   if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
     return fallback;
@@ -2886,6 +2917,944 @@ function defineSpectreStack(tagName = "sp-stack") {
   customElements.define(tagName, SpectreStackElement);
   return SpectreStackElement;
 }
+var SpectreDropdownElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+    this.open = false;
+    this.placement = "bottom-start";
+    this.triggerLabel = "Toggle menu";
+    this.triggerContent = [];
+    this.menuContent = [];
+    this.handleDocumentClick = (event) => {
+      if (!this.open) {
+        return;
+      }
+      if (!event.composedPath().includes(this)) {
+        this.close();
+      }
+    };
+    this.handleDocumentKeydown = (event) => {
+      if (event.key === "Escape" && this.open) {
+        this.close();
+        this.triggerElement?.focus();
+      }
+    };
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-dropdown-menu") || el.hasAttribute("data-sp-dropdown-trigger");
+  }
+  syncProjectedContent() {
+    const nextTriggerContent = [];
+    const nextMenuContent = [];
+    this.childNodes.forEach((node) => {
+      if (this.isInternalNode(node)) {
+        return;
+      }
+      const isTriggerSlot = node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "trigger";
+      if (isTriggerSlot) {
+        nextTriggerContent.push(node);
+      } else {
+        nextMenuContent.push(node);
+      }
+    });
+    const changed = nextTriggerContent.length !== this.triggerContent.length || nextTriggerContent.some((n, i) => n !== this.triggerContent[i]) || nextMenuContent.length !== this.menuContent.length || nextMenuContent.some((n, i) => n !== this.menuContent[i]);
+    if (changed) {
+      this.triggerContent = nextTriggerContent;
+      this.menuContent = nextMenuContent;
+    }
+    return changed;
+  }
+  get hasTriggerContent() {
+    return hasMeaningfulContent(this.triggerContent);
+  }
+  get hasMenuContent() {
+    return hasMeaningfulContent(this.menuContent);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.syncProjectedContent();
+    this.startContentObserver();
+    document.addEventListener("click", this.handleDocumentClick);
+    document.addEventListener("keydown", this.handleDocumentKeydown);
+  }
+  disconnectedCallback() {
+    this.stopContentObserver();
+    document.removeEventListener("click", this.handleDocumentClick);
+    document.removeEventListener("keydown", this.handleDocumentKeydown);
+    super.disconnectedCallback();
+  }
+  update(changedProperties) {
+    this.stopContentObserver();
+    super.update(changedProperties);
+    this.startContentObserver();
+  }
+  startContentObserver() {
+    if (this.contentObserver) {
+      return;
+    }
+    this.contentObserver = new MutationObserver(() => {
+      if (this.syncProjectedContent()) {
+        this.requestUpdate();
+      }
+    });
+    this.contentObserver.observe(this, { childList: true });
+  }
+  stopContentObserver() {
+    this.contentObserver?.disconnect();
+    this.contentObserver = void 0;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("open") && this.open == null) {
+      this.open = false;
+    }
+    if (changedProperties.has("placement") && (this.placement == null || !isDropdownPlacement(this.placement))) {
+      this.placement = "bottom-start";
+    }
+    if (changedProperties.has("triggerLabel") && !this.triggerLabel) {
+      this.triggerLabel = "Toggle menu";
+    }
+  }
+  get triggerElement() {
+    return this.querySelector("[data-sp-dropdown-trigger]");
+  }
+  toggle() {
+    if (this.open) {
+      this.close();
+    } else {
+      this.openMenu();
+    }
+  }
+  openMenu() {
+    if (this.open) {
+      return;
+    }
+    this.open = true;
+    this.dispatchEvent(new CustomEvent("sp-open", { bubbles: true }));
+  }
+  close() {
+    if (!this.open) {
+      return;
+    }
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
+  }
+  get dropdownClasses() {
+    return spectreUi.getDropdownClasses({ fullWidth: this.fullWidth ?? false });
+  }
+  get menuClasses() {
+    return spectreUi.getDropdownMenuClasses({
+      open: this.open ?? false,
+      placement: this.placement
+    });
+  }
+  render() {
+    return lit.html`<div
+      class="${this.dropdownClasses}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      <button
+        aria-expanded="${this.open ? "true" : "false"}"
+        aria-haspopup="true"
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel ?? this.triggerLabel)}"
+        class="sp-dropdown__trigger"
+        data-sp-dropdown-trigger
+        type="button"
+        @click="${() => this.toggle()}"
+      >
+        ${this.hasTriggerContent ? this.triggerContent : this.triggerLabel}
+      </button>
+      <div class="${this.menuClasses}" data-sp-dropdown-menu>
+        ${this.hasMenuContent ? this.menuContent : lit.nothing}
+      </div>
+    </div>`;
+  }
+};
+SpectreDropdownElement.properties = {
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  open: { type: Boolean, reflect: true },
+  placement: { type: String, reflect: true },
+  triggerLabel: { attribute: "trigger-label", type: String }
+};
+function defineSpectreDropdown(tagName = "sp-dropdown") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreDropdownElement);
+  return SpectreDropdownElement;
+}
+var SpectreFooterElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.bordered = false;
+    this.fullWidth = 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-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-footer-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("bordered") && this.bordered == null) {
+      this.bordered = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+  }
+  get footerClasses() {
+    return spectreUi.getFooterClasses({
+      bordered: this.bordered ?? false,
+      fullWidth: this.fullWidth ?? false
+    });
+  }
+  render() {
+    return lit.html`<footer
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      class="${this.footerClasses}"
+      data-sp-footer-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </footer>`;
+  }
+};
+SpectreFooterElement.properties = {
+  bordered: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true }
+};
+function defineSpectreFooter(tagName = "sp-footer") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreFooterElement);
+  return SpectreFooterElement;
+}
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+var SpectreModalElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+    this.open = false;
+    this.previouslyFocusedElement = null;
+    this.handleDocumentKeydown = (event) => {
+      if (!this.open) {
+        return;
+      }
+      if (event.key === "Escape") {
+        this.close();
+        return;
+      }
+      if (event.key === "Tab") {
+        this.trapFocus(event);
+      }
+    };
+  }
+  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-modal-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-modal-native") || el.hasAttribute("data-sp-modal-overlay");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("open") && this.open == null) {
+      this.open = false;
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (!changedProperties.has("open")) {
+      return;
+    }
+    if (this.open) {
+      this.previouslyFocusedElement = document.activeElement;
+      this.focusFirstElement();
+    } else if (this.previouslyFocusedElement) {
+      this.previouslyFocusedElement.focus();
+      this.previouslyFocusedElement = null;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("keydown", this.handleDocumentKeydown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this.handleDocumentKeydown);
+    super.disconnectedCallback();
+  }
+  get modalElement() {
+    return this.querySelector("[data-sp-modal-native]");
+  }
+  get focusableElements() {
+    const modal = this.modalElement;
+    if (!modal) {
+      return [];
+    }
+    return Array.from(modal.querySelectorAll(FOCUSABLE_SELECTOR));
+  }
+  focusFirstElement() {
+    const [first] = this.focusableElements;
+    (first ?? this.modalElement)?.focus();
+  }
+  trapFocus(event) {
+    const focusable = this.focusableElements;
+    if (focusable.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last?.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first?.focus();
+    }
+  }
+  close() {
+    if (!this.open) {
+      return;
+    }
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
+  }
+  get overlayClasses() {
+    return spectreUi.getModalOverlayClasses({ open: this.open ?? false });
+  }
+  get modalClasses() {
+    return spectreUi.getModalClasses({
+      open: this.open ?? false,
+      fullWidth: this.fullWidth ?? false
+    });
+  }
+  render() {
+    const isHidden = !this.open;
+    return lit.html`<div
+      aria-hidden="${ifDefined_js.ifDefined(isHidden ? "true" : void 0)}"
+      class="${this.overlayClasses}"
+      data-sp-modal-overlay
+      @click="${(event) => {
+      if (event.target === event.currentTarget) {
+        this.close();
+      }
+    }}"
+    >
+      <div
+        aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-hidden="${ifDefined_js.ifDefined(isHidden ? "true" : void 0)}"
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+        aria-modal="true"
+        class="${this.modalClasses}"
+        data-sp-modal-native
+        id="${ifDefined_js.ifDefined(this.id || void 0)}"
+        role="dialog"
+        tabindex="-1"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      >
+        ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+      </div>
+    </div>`;
+  }
+};
+SpectreModalElement.properties = {
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  open: { type: Boolean, reflect: true }
+};
+function defineSpectreModal(tagName = "sp-modal") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreModalElement);
+  return SpectreModalElement;
+}
+var SpectreNavElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.bordered = false;
+    this.fullWidth = false;
+    this.sticky = 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-nav-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-nav-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("bordered") && this.bordered == null) {
+      this.bordered = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("sticky") && this.sticky == null) {
+      this.sticky = false;
+    }
+  }
+  get navClasses() {
+    return spectreUi.getNavClasses({
+      bordered: this.bordered ?? false,
+      fullWidth: this.fullWidth ?? false,
+      sticky: this.sticky ?? false
+    });
+  }
+  render() {
+    return lit.html`<nav
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      class="${this.navClasses}"
+      data-sp-nav-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </nav>`;
+  }
+};
+SpectreNavElement.properties = {
+  bordered: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  sticky: { type: Boolean, reflect: true }
+};
+function defineSpectreNav(tagName = "sp-nav") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreNavElement);
+  return SpectreNavElement;
+}
+var SpectreSidebarElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.bordered = false;
+    this.open = false;
+    this.toggleLabel = "Toggle sidebar";
+    this.handleDocumentKeydown = (event) => {
+      if (event.key === "Escape" && this.open) {
+        this.close();
+      }
+    };
+  }
+  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-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-sidebar-native") || el.hasAttribute("data-sp-sidebar-toggle") || el.hasAttribute("data-sp-sidebar-backdrop");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("bordered") && this.bordered == null) {
+      this.bordered = false;
+    }
+    if (changedProperties.has("open") && this.open == null) {
+      this.open = false;
+    }
+    if (changedProperties.has("toggleLabel") && !this.toggleLabel) {
+      this.toggleLabel = "Toggle sidebar";
+    }
+    if (changedProperties.has("open")) {
+      HTMLElement.prototype.setAttribute.call(
+        this,
+        "data-sidebar-open",
+        this.open ? "true" : "false"
+      );
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    HTMLElement.prototype.setAttribute.call(
+      this,
+      "data-sidebar-open",
+      this.open ? "true" : "false"
+    );
+    document.addEventListener("keydown", this.handleDocumentKeydown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this.handleDocumentKeydown);
+    super.disconnectedCallback();
+  }
+  toggle() {
+    if (this.open) {
+      this.close();
+    } else {
+      this.openSidebar();
+    }
+  }
+  openSidebar() {
+    if (this.open) {
+      return;
+    }
+    this.open = true;
+    this.dispatchEvent(new CustomEvent("sp-open", { bubbles: true }));
+  }
+  close() {
+    if (!this.open) {
+      return;
+    }
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
+  }
+  get sidebarClasses() {
+    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>
+      <div
+        class="${spectreUi.getSidebarBackdropClasses()}"
+        data-sp-sidebar-backdrop
+        @click="${() => this.close()}"
+      ></div>
+      <aside
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        class="${this.sidebarClasses}"
+        data-sp-sidebar-native
+        id="${ifDefined_js.ifDefined(this.id || void 0)}"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      >
+        ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+      </aside>`;
+  }
+};
+SpectreSidebarElement.properties = {
+  bordered: { type: Boolean, reflect: true },
+  open: { type: Boolean, reflect: false },
+  toggleLabel: { attribute: "toggle-label", type: String }
+};
+function defineSpectreSidebar(tagName = "sp-sidebar") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreSidebarElement);
+  return SpectreSidebarElement;
+}
+var SpectreToastElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.dismissed = false;
+    this.fullWidth = false;
+    this.variant = "info";
+    this.iconContent = [];
+    this.bodyContent = [];
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-toast-native") || el.hasAttribute("data-sp-toast-icon");
+  }
+  syncProjectedContent() {
+    const nextIconContent = [];
+    const nextBodyContent = [];
+    this.childNodes.forEach((node) => {
+      if (this.isInternalNode(node)) {
+        return;
+      }
+      const isIconSlot = node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "icon";
+      if (isIconSlot) {
+        nextIconContent.push(node);
+      } else {
+        nextBodyContent.push(node);
+      }
+    });
+    const changed = nextIconContent.length !== this.iconContent.length || nextIconContent.some((n, i) => n !== this.iconContent[i]) || nextBodyContent.length !== this.bodyContent.length || nextBodyContent.some((n, i) => n !== this.bodyContent[i]);
+    if (changed) {
+      this.iconContent = nextIconContent;
+      this.bodyContent = nextBodyContent;
+    }
+    return changed;
+  }
+  get hasIconContent() {
+    return hasMeaningfulContent(this.iconContent);
+  }
+  get hasBodyContent() {
+    return hasMeaningfulContent(this.bodyContent);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.syncProjectedContent();
+    this.startContentObserver();
+  }
+  disconnectedCallback() {
+    this.stopContentObserver();
+    this.clearAutoDismissTimer();
+    super.disconnectedCallback();
+  }
+  update(changedProperties) {
+    this.stopContentObserver();
+    super.update(changedProperties);
+    this.startContentObserver();
+  }
+  startContentObserver() {
+    if (this.contentObserver) {
+      return;
+    }
+    this.contentObserver = new MutationObserver(() => {
+      if (this.syncProjectedContent()) {
+        this.requestUpdate();
+      }
+    });
+    this.contentObserver.observe(this, { childList: true });
+  }
+  stopContentObserver() {
+    this.contentObserver?.disconnect();
+    this.contentObserver = void 0;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("dismissed") && this.dismissed == null) {
+      this.dismissed = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("variant") && (this.variant == null || !isToastVariant(this.variant))) {
+      this.variant = "info";
+    }
+    if (changedProperties.has("autoDismiss")) {
+      this.autoDismiss = normalizeInt(this.autoDismiss, void 0, 0);
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("dismissed") || changedProperties.has("autoDismiss")) {
+      this.clearAutoDismissTimer();
+      if (!this.dismissed && this.autoDismiss) {
+        this.autoDismissTimer = setTimeout(() => {
+          this.dismiss();
+        }, this.autoDismiss);
+      }
+    }
+  }
+  clearAutoDismissTimer() {
+    if (this.autoDismissTimer) {
+      clearTimeout(this.autoDismissTimer);
+      this.autoDismissTimer = void 0;
+    }
+  }
+  show() {
+    if (!this.dismissed) {
+      return;
+    }
+    this.dismissed = false;
+    this.dispatchEvent(new CustomEvent("sp-show", { bubbles: true }));
+  }
+  dismiss() {
+    if (this.dismissed) {
+      return;
+    }
+    this.dismissed = true;
+    this.dispatchEvent(new CustomEvent("sp-dismiss", { bubbles: true }));
+  }
+  get toastClasses() {
+    return spectreUi.getToastClasses({
+      variant: this.variant,
+      dismissed: this.dismissed ?? false,
+      fullWidth: this.fullWidth ?? false
+    });
+  }
+  get iconClasses() {
+    return spectreUi.getToastIconClasses({ variant: this.variant });
+  }
+  render() {
+    return lit.html`<div
+      aria-atomic="true"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-live="polite"
+      class="${this.toastClasses}"
+      data-sp-toast-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="status"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasIconContent ? lit.html`<div class="${this.iconClasses}" data-sp-toast-icon>
+              ${this.iconContent}
+            </div>` : lit.nothing}
+      ${this.hasBodyContent ? this.bodyContent : lit.nothing}
+    </div>`;
+  }
+};
+SpectreToastElement.properties = {
+  autoDismiss: { attribute: "auto-dismiss", type: Number },
+  dismissed: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  variant: { type: String, reflect: true }
+};
+function defineSpectreToast(tagName = "sp-toast") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreToastElement);
+  return SpectreToastElement;
+}
+var SpectreTooltipElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.placement = "top";
+    this.visible = false;
+    this.triggerContent = [];
+    this.tooltipContent = [];
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-tooltip-native") || el.hasAttribute("data-sp-tooltip-trigger");
+  }
+  syncProjectedContent() {
+    const nextTooltipContent = [];
+    const nextTriggerContent = [];
+    this.childNodes.forEach((node) => {
+      if (this.isInternalNode(node)) {
+        return;
+      }
+      const isTooltipSlot = node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "tooltip";
+      if (isTooltipSlot) {
+        nextTooltipContent.push(node);
+      } else {
+        nextTriggerContent.push(node);
+      }
+    });
+    const changed = nextTooltipContent.length !== this.tooltipContent.length || nextTooltipContent.some((n, i) => n !== this.tooltipContent[i]) || nextTriggerContent.length !== this.triggerContent.length || nextTriggerContent.some((n, i) => n !== this.triggerContent[i]);
+    if (changed) {
+      this.tooltipContent = nextTooltipContent;
+      this.triggerContent = nextTriggerContent;
+    }
+    return changed;
+  }
+  get hasTooltipContent() {
+    return hasMeaningfulContent(this.tooltipContent);
+  }
+  connectedCallback() {
+    var _a, _b;
+    super.connectedCallback();
+    this.syncProjectedContent();
+    this.startContentObserver();
+    (_a = this.style).position || (_a.position = "relative");
+    (_b = this.style).display || (_b.display = "inline-block");
+  }
+  disconnectedCallback() {
+    this.stopContentObserver();
+    super.disconnectedCallback();
+  }
+  update(changedProperties) {
+    this.stopContentObserver();
+    super.update(changedProperties);
+    this.startContentObserver();
+  }
+  startContentObserver() {
+    if (this.contentObserver) {
+      return;
+    }
+    this.contentObserver = new MutationObserver(() => {
+      if (this.syncProjectedContent()) {
+        this.requestUpdate();
+      }
+    });
+    this.contentObserver.observe(this, { childList: true });
+  }
+  stopContentObserver() {
+    this.contentObserver?.disconnect();
+    this.contentObserver = void 0;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("placement") && (this.placement == null || !isTooltipPlacement(this.placement))) {
+      this.placement = "top";
+    }
+    if (changedProperties.has("visible") && this.visible == null) {
+      this.visible = false;
+    }
+  }
+  show() {
+    if (this.visible) {
+      return;
+    }
+    this.visible = true;
+    this.dispatchEvent(new CustomEvent("sp-show", { bubbles: true }));
+  }
+  hide() {
+    if (!this.visible) {
+      return;
+    }
+    this.visible = false;
+    this.dispatchEvent(new CustomEvent("sp-hide", { bubbles: true }));
+  }
+  get tooltipClasses() {
+    return spectreUi.getTooltipClasses({
+      placement: this.placement,
+      visible: this.visible ?? false
+    });
+  }
+  render() {
+    return lit.html`<span
+        data-sp-tooltip-trigger
+        @focusin="${() => this.show()}"
+        @focusout="${() => this.hide()}"
+        @mouseenter="${() => this.show()}"
+        @mouseleave="${() => this.hide()}"
+      >
+        ${this.triggerContent}
+      </span>
+      <span
+        aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+        class="${this.tooltipClasses}"
+        data-sp-tooltip-native
+        id="${ifDefined_js.ifDefined(this.id || void 0)}"
+        role="tooltip"
+        title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      >
+        ${this.hasTooltipContent ? this.tooltipContent : lit.nothing}
+      </span>`;
+  }
+};
+SpectreTooltipElement.properties = {
+  placement: { type: String, reflect: true },
+  visible: { type: Boolean, reflect: true }
+};
+function defineSpectreTooltip(tagName = "sp-tooltip") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreTooltipElement);
+  return SpectreTooltipElement;
+}
 
 // src/index.ts
 function defineSpectreComponents() {
@@ -2911,6 +3880,13 @@ function defineSpectreComponents() {
   defineSpectreGrid();
   defineSpectreSection();
   defineSpectreStack();
+  defineSpectreDropdown();
+  defineSpectreFooter();
+  defineSpectreModal();
+  defineSpectreNav();
+  defineSpectreSidebar();
+  defineSpectreToast();
+  defineSpectreTooltip();
 }
 
 exports.SpectreAlertElement = SpectreAlertElement;
@@ -2920,21 +3896,28 @@ exports.SpectreButtonElement = SpectreButtonElement;
 exports.SpectreCardElement = SpectreCardElement;
 exports.SpectreCheckboxElement = SpectreCheckboxElement;
 exports.SpectreContainerElement = SpectreContainerElement;
+exports.SpectreDropdownElement = SpectreDropdownElement;
 exports.SpectreFieldsetElement = SpectreFieldsetElement;
+exports.SpectreFooterElement = SpectreFooterElement;
 exports.SpectreGridElement = SpectreGridElement;
 exports.SpectreIconBoxElement = SpectreIconBoxElement;
 exports.SpectreInputElement = SpectreInputElement;
 exports.SpectreLabelElement = SpectreLabelElement;
+exports.SpectreModalElement = SpectreModalElement;
+exports.SpectreNavElement = SpectreNavElement;
 exports.SpectrePricingCardElement = SpectrePricingCardElement;
 exports.SpectreRadioElement = SpectreRadioElement;
 exports.SpectreRatingElement = SpectreRatingElement;
 exports.SpectreSectionElement = SpectreSectionElement;
 exports.SpectreSelectElement = SpectreSelectElement;
+exports.SpectreSidebarElement = SpectreSidebarElement;
 exports.SpectreSpinnerElement = SpectreSpinnerElement;
 exports.SpectreStackElement = SpectreStackElement;
 exports.SpectreTagElement = SpectreTagElement;
 exports.SpectreTestimonialElement = SpectreTestimonialElement;
 exports.SpectreTextareaElement = SpectreTextareaElement;
+exports.SpectreToastElement = SpectreToastElement;
+exports.SpectreTooltipElement = SpectreTooltipElement;
 exports.defineSpectreAlert = defineSpectreAlert;
 exports.defineSpectreAvatar = defineSpectreAvatar;
 exports.defineSpectreBadge = defineSpectreBadge;
@@ -2943,21 +3926,28 @@ exports.defineSpectreCard = defineSpectreCard;
 exports.defineSpectreCheckbox = defineSpectreCheckbox;
 exports.defineSpectreComponents = defineSpectreComponents;
 exports.defineSpectreContainer = defineSpectreContainer;
+exports.defineSpectreDropdown = defineSpectreDropdown;
 exports.defineSpectreFieldset = defineSpectreFieldset;
+exports.defineSpectreFooter = defineSpectreFooter;
 exports.defineSpectreGrid = defineSpectreGrid;
 exports.defineSpectreIconBox = defineSpectreIconBox;
 exports.defineSpectreInput = defineSpectreInput;
 exports.defineSpectreLabel = defineSpectreLabel;
+exports.defineSpectreModal = defineSpectreModal;
+exports.defineSpectreNav = defineSpectreNav;
 exports.defineSpectrePricingCard = defineSpectrePricingCard;
 exports.defineSpectreRadio = defineSpectreRadio;
 exports.defineSpectreRating = defineSpectreRating;
 exports.defineSpectreSection = defineSpectreSection;
 exports.defineSpectreSelect = defineSpectreSelect;
+exports.defineSpectreSidebar = defineSpectreSidebar;
 exports.defineSpectreSpinner = defineSpectreSpinner;
 exports.defineSpectreStack = defineSpectreStack;
 exports.defineSpectreTag = defineSpectreTag;
 exports.defineSpectreTestimonial = defineSpectreTestimonial;
 exports.defineSpectreTextarea = defineSpectreTextarea;
+exports.defineSpectreToast = defineSpectreToast;
+exports.defineSpectreTooltip = defineSpectreTooltip;
 exports.spectreAlertSizes = spectreInputSizes;
 exports.spectreAlertVariants = spectreAlertVariants;
 exports.spectreAvatarShapes = spectreAvatarShapes;
@@ -2969,6 +3959,7 @@ exports.spectreButtonTypes = spectreButtonTypes;
 exports.spectreButtonVariants = spectreButtonVariants;
 exports.spectreCardVariants = spectreCardVariants;
 exports.spectreContainerMaxWidths = spectreContainerMaxWidths;
+exports.spectreDropdownPlacements = spectreDropdownPlacements;
 exports.spectreGridColumns = spectreGridColumns;
 exports.spectreGridGaps = spectreGridGaps;
 exports.spectreIconBoxSizes = spectreInputSizes;
@@ -2984,5 +3975,7 @@ exports.spectreStackDirections = spectreStackDirections;
 exports.spectreTagSizes = spectreInputSizes;
 exports.spectreTagVariants = spectreTagVariants;
 exports.spectreTestimonialVariants = spectreTestimonialVariants;
+exports.spectreToastVariants = spectreToastVariants;
+exports.spectreTooltipPlacements = spectreTooltipPlacements;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map