@phcdevworks/spectre-components 1.6.0 → 1.7.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, 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, getStackClasses, getDropdownClasses, getDropdownMenuClasses, getModalOverlayClasses, getModalClasses, getNavClasses, getSidebarClasses, getSidebarToggleClasses, getSidebarBackdropClasses, getToastClasses, getToastIconClasses, getTooltipClasses, getSectionClasses } 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';
@@ -170,6 +170,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;
@@ -2884,6 +2915,878 @@ 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 getDropdownClasses({ fullWidth: this.fullWidth ?? false });
+  }
+  get menuClasses() {
+    return getDropdownMenuClasses({
+      open: this.open ?? false,
+      placement: this.placement
+    });
+  }
+  render() {
+    return html`<div
+      class="${this.dropdownClasses}"
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      <button
+        aria-expanded="${this.open ? "true" : "false"}"
+        aria-haspopup="true"
+        aria-label="${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 : 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 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 getModalOverlayClasses({ open: this.open ?? false });
+  }
+  get modalClasses() {
+    return getModalClasses({
+      open: this.open ?? false,
+      fullWidth: this.fullWidth ?? false
+    });
+  }
+  render() {
+    const isHidden = !this.open;
+    return html`<div
+      aria-hidden="${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(this.forwardedAriaDescribedBy)}"
+        aria-hidden="${ifDefined(isHidden ? "true" : void 0)}"
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+        aria-modal="true"
+        class="${this.modalClasses}"
+        data-sp-modal-native
+        id="${ifDefined(this.id || void 0)}"
+        role="dialog"
+        tabindex="-1"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        ${this.hasProjectedContent ? this.projectedContent : 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 getNavClasses({
+      bordered: this.bordered ?? false,
+      fullWidth: this.fullWidth ?? false,
+      sticky: this.sticky ?? false
+    });
+  }
+  render() {
+    return html`<nav
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      class="${this.navClasses}"
+      data-sp-nav-native
+      id="${ifDefined(this.id || void 0)}"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : 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 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>
+      <div
+        class="${getSidebarBackdropClasses()}"
+        data-sp-sidebar-backdrop
+        @click="${() => this.close()}"
+      ></div>
+      <aside
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        class="${this.sidebarClasses}"
+        data-sp-sidebar-native
+        id="${ifDefined(this.id || void 0)}"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        ${this.hasProjectedContent ? this.projectedContent : 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 getToastClasses({
+      variant: this.variant,
+      dismissed: this.dismissed ?? false,
+      fullWidth: this.fullWidth ?? false
+    });
+  }
+  get iconClasses() {
+    return getToastIconClasses({ variant: this.variant });
+  }
+  render() {
+    return html`<div
+      aria-atomic="true"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-live="polite"
+      class="${this.toastClasses}"
+      data-sp-toast-native
+      id="${ifDefined(this.id || void 0)}"
+      role="status"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      ${this.hasIconContent ? html`<div class="${this.iconClasses}" data-sp-toast-icon>
+              ${this.iconContent}
+            </div>` : nothing}
+      ${this.hasBodyContent ? this.bodyContent : 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 getTooltipClasses({
+      placement: this.placement,
+      visible: this.visible ?? false
+    });
+  }
+  render() {
+    return 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(this.forwardedAriaLabel)}"
+        class="${this.tooltipClasses}"
+        data-sp-tooltip-native
+        id="${ifDefined(this.id || void 0)}"
+        role="tooltip"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        ${this.hasTooltipContent ? this.tooltipContent : 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() {
@@ -2909,8 +3812,14 @@ function defineSpectreComponents() {
   defineSpectreGrid();
   defineSpectreSection();
   defineSpectreStack();
+  defineSpectreDropdown();
+  defineSpectreModal();
+  defineSpectreNav();
+  defineSpectreSidebar();
+  defineSpectreToast();
+  defineSpectreTooltip();
 }
 
-export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreContainerElement, SpectreFieldsetElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextareaElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreFieldset, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, defineSpectreTextarea, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreContainerMaxWidths, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants };
+export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreContainerElement, SpectreDropdownElement, SpectreFieldsetElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectreModalElement, SpectreNavElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSidebarElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextareaElement, SpectreToastElement, SpectreTooltipElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreDropdown, defineSpectreFieldset, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectreModal, defineSpectreNav, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSidebar, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, 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, spectreToastVariants, spectreTooltipPlacements };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map