@krollins/blueprint 0.1.11 → 0.1.13

package/dist/components/dropdown.js

@@ -0,0 +1,377 @@
+import { css as w, LitElement as h, nothing as c, html as l } from "lit";
+import { property as n, query as _, customElement as b } from "lit/decorators.js";
+const m = w`
+  /* Base styles */
+  :host {
+    display: inline-block;
+    position: relative;
+  }
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  /* Trigger */
+  .dropdown__trigger {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    outline: none;
+    user-select: none;
+  }
+
+  .dropdown__trigger:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+    border-radius: var(--bp-border-radius-sm);
+  }
+
+  /* Panel */
+  .dropdown__panel {
+    position: absolute;
+    z-index: 1000; /* Overlay layer - above page content, below modals */
+    min-width: 200px;
+    background-color: var(--bp-color-surface-elevated);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-lg);
+    box-shadow: var(--bp-shadow-lg);
+    padding: var(--bp-spacing-sm);
+    opacity: 0;
+    will-change: opacity, transform;
+    transition:
+      opacity var(--bp-transition-fast) var(--bp-ease-out),
+      transform var(--bp-transition-fast) var(--bp-ease-out);
+    contain: layout style;
+  }
+
+  /* Placement: Bottom variants */
+  .dropdown__panel--bottom-start {
+    top: 100%;
+    left: 0;
+    margin-top: var(--dropdown-distance, 4px);
+    transform: translateY(-8px);
+  }
+
+  .dropdown__panel--bottom-start.dropdown__panel--open {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .dropdown__panel--bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-8px);
+    margin-top: var(--dropdown-distance, 4px);
+  }
+
+  .dropdown__panel--bottom.dropdown__panel--open {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  .dropdown__panel--bottom-end {
+    top: 100%;
+    right: 0;
+    margin-top: var(--dropdown-distance, 4px);
+    transform: translateY(-8px);
+  }
+
+  .dropdown__panel--bottom-end.dropdown__panel--open {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* Placement: Top variants */
+  .dropdown__panel--top-start {
+    bottom: 100%;
+    left: 0;
+    margin-bottom: var(--dropdown-distance, 4px);
+    transform: translateY(8px);
+  }
+
+  .dropdown__panel--top-start.dropdown__panel--open {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .dropdown__panel--top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(8px);
+    margin-bottom: var(--dropdown-distance, 4px);
+  }
+
+  .dropdown__panel--top.dropdown__panel--open {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  .dropdown__panel--top-end {
+    bottom: 100%;
+    right: 0;
+    margin-bottom: var(--dropdown-distance, 4px);
+    transform: translateY(8px);
+  }
+
+  .dropdown__panel--top-end.dropdown__panel--open {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* Placement: Side variants */
+  .dropdown__panel--left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: var(--dropdown-distance, 4px);
+  }
+
+  .dropdown__panel--left.dropdown__panel--open {
+    opacity: 1;
+  }
+
+  .dropdown__panel--right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: var(--dropdown-distance, 4px);
+  }
+
+  .dropdown__panel--right.dropdown__panel--open {
+    opacity: 1;
+  }
+
+  /* Arrow */
+  .dropdown__arrow {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background-color: var(--bp-color-surface-elevated);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    transform: rotate(45deg);
+    border-bottom: none;
+    border-right: none;
+  }
+
+  /* Arrow positioning: Bottom variants */
+  .dropdown__panel--bottom .dropdown__arrow {
+    top: -7px;
+    left: 50%;
+    margin-left: -6px;
+  }
+
+  .dropdown__panel--bottom-start .dropdown__arrow {
+    top: -7px;
+    left: 16px;
+  }
+
+  .dropdown__panel--bottom-end .dropdown__arrow {
+    top: -7px;
+    right: 16px;
+  }
+
+  /* Arrow positioning: Top variants */
+  .dropdown__panel--top .dropdown__arrow {
+    bottom: -7px;
+    left: 50%;
+    margin-left: -6px;
+    transform: rotate(225deg);
+  }
+
+  .dropdown__panel--top-start .dropdown__arrow {
+    bottom: -7px;
+    left: 16px;
+    transform: rotate(225deg);
+  }
+
+  .dropdown__panel--top-end .dropdown__arrow {
+    bottom: -7px;
+    right: 16px;
+    transform: rotate(225deg);
+  }
+
+  /* Arrow positioning: Side variants */
+  .dropdown__panel--left .dropdown__arrow {
+    right: -7px;
+    top: 50%;
+    margin-top: -6px;
+    transform: rotate(135deg);
+  }
+
+  .dropdown__panel--right .dropdown__arrow {
+    left: -7px;
+    top: 50%;
+    margin-top: -6px;
+    transform: rotate(-45deg);
+  }
+
+  /* Disabled state */
+  .dropdown--disabled .dropdown__trigger {
+    cursor: not-allowed;
+    opacity: 0.6;
+    filter: grayscale(50%);
+    pointer-events: none;
+  }
+`;
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, e = (t, r, p, d) => {
+  for (var a = d > 1 ? void 0 : d ? f(r, p) : r, s = t.length - 1, i; s >= 0; s--)
+    (i = t[s]) && (a = (d ? i(r, p, a) : i(a)) || a);
+  return d && a && u(r, p, a), a;
+};
+let o = class extends h {
+  constructor() {
+    super(), this.clickOutsideHandler = this.handleClickOutside.bind(this), this.keydownHandler = this.handleKeydown.bind(this), this.open = !1, this.placement = "bottom-start", this.closeOnClickOutside = !0, this.closeOnEscape = !0, this.closeOnSelect = !0, this.disabled = !1, this.distance = 4, this.arrow = !1, this.panelRole = "menu";
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.clickOutsideHandler, {
+      passive: !0
+    }), document.addEventListener("keydown", this.keydownHandler);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.clickOutsideHandler, {
+      passive: !0
+    }), document.removeEventListener("keydown", this.keydownHandler);
+  }
+  updated(t) {
+    super.updated(t), t.has("open") && this.open;
+  }
+  /** Show the dropdown */
+  show() {
+    this.disabled || this.open || (this.open = !0, this.dispatchEvent(
+      new CustomEvent("bp-show", { bubbles: !0, composed: !0 })
+    ), this.dispatchEvent(
+      new CustomEvent("bp-toggle", {
+        detail: { open: !0 },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  /** Hide the dropdown */
+  hide() {
+    this.open && (this.open = !1, this.dispatchEvent(
+      new CustomEvent("bp-hide", { bubbles: !0, composed: !0 })
+    ), this.dispatchEvent(
+      new CustomEvent("bp-toggle", {
+        detail: { open: !1 },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  /** Toggle the dropdown open/closed */
+  toggle() {
+    this.open ? this.hide() : this.show();
+  }
+  /**
+   * Toggles dropdown when trigger is clicked.
+   * Stops propagation to prevent immediate outside click detection.
+   */
+  handleTriggerClick(t) {
+    t.stopPropagation(), this.disabled || this.toggle();
+  }
+  /**
+   * Handles keyboard interaction on the trigger.
+   * Enter/Space toggle, ArrowDown opens when closed.
+   */
+  handleTriggerKeydown(t) {
+    this.disabled || (t.key === "Enter" || t.key === " " ? (t.preventDefault(), this.toggle()) : t.key === "ArrowDown" && !this.open && (t.preventDefault(), this.show()));
+  }
+  /**
+   * Closes the dropdown when user clicks outside the component.
+   * Only runs if closeOnClickOutside is true and dropdown is open.
+   */
+  handleClickOutside(t) {
+    if (!this.closeOnClickOutside || !this.open) return;
+    t.composedPath().includes(this) || this.hide();
+  }
+  /**
+   * Closes dropdown on Escape key and returns focus to trigger.
+   * Only runs if closeOnEscape is true and dropdown is open.
+   */
+  handleKeydown(t) {
+    !this.closeOnEscape || !this.open || t.key === "Escape" && (t.preventDefault(), this.hide(), this.triggerElement?.focus());
+  }
+  /**
+   * Handles clicks inside the panel to auto-close on item selection.
+   * Detects menu items or elements with data-dropdown-close attribute.
+   */
+  handlePanelClick(t) {
+    if (this.closeOnSelect) {
+      const r = t.target;
+      (r.closest("bp-menu-item") || r.closest("[data-dropdown-close]") || r.hasAttribute("data-dropdown-close")) && this.hide();
+    }
+  }
+  render() {
+    return l`
+      <div
+        class="dropdown ${this.open ? "dropdown--open" : ""} ${this.disabled ? "dropdown--disabled" : ""}"
+      >
+        <div
+          class="dropdown__trigger"
+          part="trigger"
+          tabindex=${this.disabled ? -1 : 0}
+          role="button"
+          aria-haspopup="true"
+          aria-expanded=${this.open}
+          aria-disabled=${this.disabled}
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeydown}
+        >
+          <slot></slot>
+        </div>
+        ${this.open ? l`
+              <div
+                class="dropdown__panel dropdown__panel--${this.placement} ${this.open ? "dropdown__panel--open" : ""}"
+                part="panel"
+                role=${this.panelRole}
+                style="--dropdown-distance: ${this.distance}px;"
+                @click=${this.handlePanelClick}
+              >
+                ${this.arrow ? l`<div class="dropdown__arrow"></div>` : c}
+                <slot name="content"></slot>
+              </div>
+            ` : c}
+      </div>
+    `;
+  }
+};
+o.styles = [m];
+e([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+e([
+  n({ type: String })
+], o.prototype, "placement", 2);
+e([
+  n({ type: Boolean })
+], o.prototype, "closeOnClickOutside", 2);
+e([
+  n({ type: Boolean })
+], o.prototype, "closeOnEscape", 2);
+e([
+  n({ type: Boolean })
+], o.prototype, "closeOnSelect", 2);
+e([
+  n({ type: Boolean })
+], o.prototype, "disabled", 2);
+e([
+  n({ type: Number })
+], o.prototype, "distance", 2);
+e([
+  n({ type: Boolean })
+], o.prototype, "arrow", 2);
+e([
+  n({ type: String })
+], o.prototype, "panelRole", 2);
+e([
+  _(".dropdown__trigger")
+], o.prototype, "triggerElement", 2);
+o = e([
+  b("bp-dropdown")
+], o);
+export {
+  o as BpDropdown
+};
+//# sourceMappingURL=dropdown.js.map

package/dist/components/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sources":["../../source/components/dropdown/dropdown.style.ts","../../source/components/dropdown/dropdown.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const dropdownStyles = css`\r\n  /* Base styles */\r\n  :host {\r\n    display: inline-block;\r\n    position: relative;\r\n  }\r\n\r\n  .dropdown {\r\n    position: relative;\r\n    display: inline-block;\r\n  }\r\n\r\n  /* Trigger */\r\n  .dropdown__trigger {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    outline: none;\r\n    user-select: none;\r\n  }\r\n\r\n  .dropdown__trigger:focus-visible {\r\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n    outline-offset: var(--bp-focus-offset);\r\n    border-radius: var(--bp-border-radius-sm);\r\n  }\r\n\r\n  /* Panel */\r\n  .dropdown__panel {\r\n    position: absolute;\r\n    z-index: 1000; /* Overlay layer - above page content, below modals */\r\n    min-width: 200px;\r\n    background-color: var(--bp-color-surface-elevated);\r\n    border: var(--bp-border-width) solid var(--bp-color-border);\r\n    border-radius: var(--bp-border-radius-lg);\r\n    box-shadow: var(--bp-shadow-lg);\r\n    padding: var(--bp-spacing-sm);\r\n    opacity: 0;\r\n    will-change: opacity, transform;\r\n    transition:\r\n      opacity var(--bp-transition-fast) var(--bp-ease-out),\r\n      transform var(--bp-transition-fast) var(--bp-ease-out);\r\n    contain: layout style;\r\n  }\r\n\r\n  /* Placement: Bottom variants */\r\n  .dropdown__panel--bottom-start {\r\n    top: 100%;\r\n    left: 0;\r\n    margin-top: var(--dropdown-distance, 4px);\r\n    transform: translateY(-8px);\r\n  }\r\n\r\n  .dropdown__panel--bottom-start.dropdown__panel--open {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  .dropdown__panel--bottom {\r\n    top: 100%;\r\n    left: 50%;\r\n    transform: translateX(-50%) translateY(-8px);\r\n    margin-top: var(--dropdown-distance, 4px);\r\n  }\r\n\r\n  .dropdown__panel--bottom.dropdown__panel--open {\r\n    opacity: 1;\r\n    transform: translateX(-50%) translateY(0);\r\n  }\r\n\r\n  .dropdown__panel--bottom-end {\r\n    top: 100%;\r\n    right: 0;\r\n    margin-top: var(--dropdown-distance, 4px);\r\n    transform: translateY(-8px);\r\n  }\r\n\r\n  .dropdown__panel--bottom-end.dropdown__panel--open {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  /* Placement: Top variants */\r\n  .dropdown__panel--top-start {\r\n    bottom: 100%;\r\n    left: 0;\r\n    margin-bottom: var(--dropdown-distance, 4px);\r\n    transform: translateY(8px);\r\n  }\r\n\r\n  .dropdown__panel--top-start.dropdown__panel--open {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  .dropdown__panel--top {\r\n    bottom: 100%;\r\n    left: 50%;\r\n    transform: translateX(-50%) translateY(8px);\r\n    margin-bottom: var(--dropdown-distance, 4px);\r\n  }\r\n\r\n  .dropdown__panel--top.dropdown__panel--open {\r\n    opacity: 1;\r\n    transform: translateX(-50%) translateY(0);\r\n  }\r\n\r\n  .dropdown__panel--top-end {\r\n    bottom: 100%;\r\n    right: 0;\r\n    margin-bottom: var(--dropdown-distance, 4px);\r\n    transform: translateY(8px);\r\n  }\r\n\r\n  .dropdown__panel--top-end.dropdown__panel--open {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  /* Placement: Side variants */\r\n  .dropdown__panel--left {\r\n    right: 100%;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    margin-right: var(--dropdown-distance, 4px);\r\n  }\r\n\r\n  .dropdown__panel--left.dropdown__panel--open {\r\n    opacity: 1;\r\n  }\r\n\r\n  .dropdown__panel--right {\r\n    left: 100%;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    margin-left: var(--dropdown-distance, 4px);\r\n  }\r\n\r\n  .dropdown__panel--right.dropdown__panel--open {\r\n    opacity: 1;\r\n  }\r\n\r\n  /* Arrow */\r\n  .dropdown__arrow {\r\n    position: absolute;\r\n    width: 12px;\r\n    height: 12px;\r\n    background-color: var(--bp-color-surface-elevated);\r\n    border: var(--bp-border-width) solid var(--bp-color-border);\r\n    transform: rotate(45deg);\r\n    border-bottom: none;\r\n    border-right: none;\r\n  }\r\n\r\n  /* Arrow positioning: Bottom variants */\r\n  .dropdown__panel--bottom .dropdown__arrow {\r\n    top: -7px;\r\n    left: 50%;\r\n    margin-left: -6px;\r\n  }\r\n\r\n  .dropdown__panel--bottom-start .dropdown__arrow {\r\n    top: -7px;\r\n    left: 16px;\r\n  }\r\n\r\n  .dropdown__panel--bottom-end .dropdown__arrow {\r\n    top: -7px;\r\n    right: 16px;\r\n  }\r\n\r\n  /* Arrow positioning: Top variants */\r\n  .dropdown__panel--top .dropdown__arrow {\r\n    bottom: -7px;\r\n    left: 50%;\r\n    margin-left: -6px;\r\n    transform: rotate(225deg);\r\n  }\r\n\r\n  .dropdown__panel--top-start .dropdown__arrow {\r\n    bottom: -7px;\r\n    left: 16px;\r\n    transform: rotate(225deg);\r\n  }\r\n\r\n  .dropdown__panel--top-end .dropdown__arrow {\r\n    bottom: -7px;\r\n    right: 16px;\r\n    transform: rotate(225deg);\r\n  }\r\n\r\n  /* Arrow positioning: Side variants */\r\n  .dropdown__panel--left .dropdown__arrow {\r\n    right: -7px;\r\n    top: 50%;\r\n    margin-top: -6px;\r\n    transform: rotate(135deg);\r\n  }\r\n\r\n  .dropdown__panel--right .dropdown__arrow {\r\n    left: -7px;\r\n    top: 50%;\r\n    margin-top: -6px;\r\n    transform: rotate(-45deg);\r\n  }\r\n\r\n  /* Disabled state */\r\n  .dropdown--disabled .dropdown__trigger {\r\n    cursor: not-allowed;\r\n    opacity: 0.6;\r\n    filter: grayscale(50%);\r\n    pointer-events: none;\r\n  }\r\n`;\r\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { dropdownStyles } from './dropdown.style.js';\n\n/**\n * A generic dropdown component that displays content in a floating panel.\n *\n * @fires bp-show - Dispatched when the dropdown opens\n * @fires bp-hide - Dispatched when the dropdown closes\n * @fires bp-toggle - Dispatched when the dropdown toggles\n *\n * @slot - Default slot for the dropdown trigger element\n * @slot content - Content to display in the dropdown panel\n *\n * @csspart trigger - The trigger button container\n * @csspart panel - The dropdown panel container\n */\n@customElement('bp-dropdown')\nexport class BpDropdown extends LitElement {\n  /** Whether the dropdown is open */\n  @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n  /** Placement of the dropdown panel relative to the trigger */\n  @property({ type: String }) declare placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'right';\n\n  /** Whether the dropdown should close when clicking outside */\n  @property({ type: Boolean }) declare closeOnClickOutside: boolean;\n\n  /** Whether the dropdown should close when pressing Escape */\n  @property({ type: Boolean }) declare closeOnEscape: boolean;\n\n  /** Whether the dropdown should close when an item inside is clicked */\n  @property({ type: Boolean }) declare closeOnSelect: boolean;\n\n  /** Whether the dropdown is disabled */\n  @property({ type: Boolean }) declare disabled: boolean;\n\n  /** Distance in pixels between the trigger and the panel */\n  @property({ type: Number }) declare distance: number;\n\n  /** Whether to show an arrow pointing to the trigger */\n  @property({ type: Boolean }) declare arrow: boolean;\n\n  /** ARIA role for the dropdown panel */\n  @property({ type: String }) declare panelRole: 'menu' | 'dialog' | 'listbox';\n\n  @query('.dropdown__trigger') private triggerElement!: HTMLElement;\n\n  private clickOutsideHandler = this.handleClickOutside.bind(this);\n  private keydownHandler = this.handleKeydown.bind(this);\n\n  static styles = [dropdownStyles];\n\n  constructor() {\n    super();\n    this.open = false;\n    this.placement = 'bottom-start';\n    this.closeOnClickOutside = true;\n    this.closeOnEscape = true;\n    this.closeOnSelect = true;\n    this.disabled = false;\n    this.distance = 4;\n    this.arrow = false;\n    this.panelRole = 'menu';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.clickOutsideHandler, {\n      passive: true,\n    });\n    document.addEventListener('keydown', this.keydownHandler);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.clickOutsideHandler, {\n      passive: true,\n    } as EventListenerOptions);\n    document.removeEventListener('keydown', this.keydownHandler);\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('open') && this.open) {\n      // Trigger width available via this.triggerElement.offsetWidth if needed\n    }\n  }\n\n  /** Show the dropdown */\n  show() {\n    if (this.disabled || this.open) return;\n\n    this.open = true;\n    this.dispatchEvent(\n      new CustomEvent('bp-show', { bubbles: true, composed: true })\n    );\n    this.dispatchEvent(\n      new CustomEvent('bp-toggle', {\n        detail: { open: true },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /** Hide the dropdown */\n  hide() {\n    if (!this.open) return;\n\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent('bp-hide', { bubbles: true, composed: true })\n    );\n    this.dispatchEvent(\n      new CustomEvent('bp-toggle', {\n        detail: { open: false },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /** Toggle the dropdown open/closed */\n  toggle() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Toggles dropdown when trigger is clicked.\n   * Stops propagation to prevent immediate outside click detection.\n   */\n  private handleTriggerClick(event: MouseEvent) {\n    event.stopPropagation();\n    if (!this.disabled) {\n      this.toggle();\n    }\n  }\n\n  /**\n   * Handles keyboard interaction on the trigger.\n   * Enter/Space toggle, ArrowDown opens when closed.\n   */\n  private handleTriggerKeydown(event: KeyboardEvent) {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.toggle();\n    } else if (event.key === 'ArrowDown' && !this.open) {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  /**\n   * Closes the dropdown when user clicks outside the component.\n   * Only runs if closeOnClickOutside is true and dropdown is open.\n   */\n  private handleClickOutside(event: MouseEvent) {\n    if (!this.closeOnClickOutside || !this.open) return;\n\n    const path = event.composedPath();\n    if (!path.includes(this)) {\n      this.hide();\n    }\n  }\n\n  /**\n   * Closes dropdown on Escape key and returns focus to trigger.\n   * Only runs if closeOnEscape is true and dropdown is open.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    if (!this.closeOnEscape || !this.open) return;\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.hide();\n      this.triggerElement?.focus();\n    }\n  }\n\n  /**\n   * Handles clicks inside the panel to auto-close on item selection.\n   * Detects menu items or elements with data-dropdown-close attribute.\n   */\n  private handlePanelClick(event: MouseEvent) {\n    if (this.closeOnSelect) {\n      // Check if clicked element or its parent is a menu item or similar\n      const target = event.target as HTMLElement;\n      const isSelectableItem =\n        target.closest('bp-menu-item') ||\n        target.closest('[data-dropdown-close]') ||\n        target.hasAttribute('data-dropdown-close');\n\n      if (isSelectableItem) {\n        this.hide();\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"dropdown ${this.open ? 'dropdown--open' : ''} ${this.disabled\n          ? 'dropdown--disabled'\n          : ''}\"\n      >\n        <div\n          class=\"dropdown__trigger\"\n          part=\"trigger\"\n          tabindex=${this.disabled ? -1 : 0}\n          role=\"button\"\n          aria-haspopup=\"true\"\n          aria-expanded=${this.open}\n          aria-disabled=${this.disabled}\n          @click=${this.handleTriggerClick}\n          @keydown=${this.handleTriggerKeydown}\n        >\n          <slot></slot>\n        </div>\n        ${this.open\n          ? html`\n              <div\n                class=\"dropdown__panel dropdown__panel--${this.placement} ${this\n                  .open\n                  ? 'dropdown__panel--open'\n                  : ''}\"\n                part=\"panel\"\n                role=${this.panelRole}\n                style=\"--dropdown-distance: ${this.distance}px;\"\n                @click=${this.handlePanelClick}\n              >\n                ${this.arrow\n                  ? html`<div class=\"dropdown__arrow\"></div>`\n                  : nothing}\n                <slot name=\"content\"></slot>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-dropdown': BpDropdown;\n  }\n}\n"],"names":["dropdownStyles","css","BpDropdown","LitElement","changedProperties","event","target","html","nothing","__decorateClass","property","query","customElement"],"mappings":";;AAEO,MAAMA,IAAiBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACgBvB,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EA2CzC,cAAc;AACZ,UAAA,GANF,KAAQ,sBAAsB,KAAK,mBAAmB,KAAK,IAAI,GAC/D,KAAQ,iBAAiB,KAAK,cAAc,KAAK,IAAI,GAMnD,KAAK,OAAO,IACZ,KAAK,YAAY,gBACjB,KAAK,sBAAsB,IAC3B,KAAK,gBAAgB,IACrB,KAAK,gBAAgB,IACrB,KAAK,WAAW,IAChB,KAAK,WAAW,GAChB,KAAK,QAAQ,IACb,KAAK,YAAY;AAAA,EACnB;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA,GACN,SAAS,iBAAiB,SAAS,KAAK,qBAAqB;AAAA,MAC3D,SAAS;AAAA,IAAA,CACV,GACD,SAAS,iBAAiB,WAAW,KAAK,cAAc;AAAA,EAC1D;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAA,GACN,SAAS,oBAAoB,SAAS,KAAK,qBAAqB;AAAA,MAC9D,SAAS;AAAA,IAAA,CACc,GACzB,SAAS,oBAAoB,WAAW,KAAK,cAAc;AAAA,EAC7D;AAAA,EAEA,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,MAAM,KAAK,KAAK;AAAA,EAG5C;AAAA;AAAA,EAGA,OAAO;AACL,IAAI,KAAK,YAAY,KAAK,SAE1B,KAAK,OAAO,IACZ,KAAK;AAAA,MACH,IAAI,YAAY,WAAW,EAAE,SAAS,IAAM,UAAU,IAAM;AAAA,IAAA,GAE9D,KAAK;AAAA,MACH,IAAI,YAAY,aAAa;AAAA,QAC3B,QAAQ,EAAE,MAAM,GAAA;AAAA,QAChB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGA,OAAO;AACL,IAAK,KAAK,SAEV,KAAK,OAAO,IACZ,KAAK;AAAA,MACH,IAAI,YAAY,WAAW,EAAE,SAAS,IAAM,UAAU,IAAM;AAAA,IAAA,GAE9D,KAAK;AAAA,MACH,IAAI,YAAY,aAAa;AAAA,QAC3B,QAAQ,EAAE,MAAM,GAAA;AAAA,QAChB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGA,SAAS;AACP,IAAI,KAAK,OACP,KAAK,KAAA,IAEL,KAAK,KAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,mBAAmBC,GAAmB;AAC5C,IAAAA,EAAM,gBAAA,GACD,KAAK,YACR,KAAK,OAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,qBAAqBA,GAAsB;AACjD,IAAI,KAAK,aAELA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,OACzCA,EAAM,eAAA,GACN,KAAK,OAAA,KACIA,EAAM,QAAQ,eAAe,CAAC,KAAK,SAC5CA,EAAM,eAAA,GACN,KAAK,KAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,mBAAmBA,GAAmB;AAC5C,QAAI,CAAC,KAAK,uBAAuB,CAAC,KAAK,KAAM;AAG7C,IADaA,EAAM,aAAA,EACT,SAAS,IAAI,KACrB,KAAK,KAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,cAAcA,GAAsB;AAC1C,IAAI,CAAC,KAAK,iBAAiB,CAAC,KAAK,QAE7BA,EAAM,QAAQ,aAChBA,EAAM,eAAA,GACN,KAAK,KAAA,GACL,KAAK,gBAAgB,MAAA;AAAA,EAEzB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,iBAAiBA,GAAmB;AAC1C,QAAI,KAAK,eAAe;AAEtB,YAAMC,IAASD,EAAM;AAMrB,OAJEC,EAAO,QAAQ,cAAc,KAC7BA,EAAO,QAAQ,uBAAuB,KACtCA,EAAO,aAAa,qBAAqB,MAGzC,KAAK,KAAA;AAAA,IAET;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA,0BAEe,KAAK,OAAO,mBAAmB,EAAE,IAAI,KAAK,WACxD,uBACA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKO,KAAK,WAAW,KAAK,CAAC;AAAA;AAAA;AAAA,0BAGjB,KAAK,IAAI;AAAA,0BACT,KAAK,QAAQ;AAAA,mBACpB,KAAK,kBAAkB;AAAA,qBACrB,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA,UAIpC,KAAK,OACHA;AAAA;AAAA,0DAE8C,KAAK,SAAS,IAAI,KACzD,OACC,0BACA,EAAE;AAAA;AAAA,uBAEC,KAAK,SAAS;AAAA,8CACS,KAAK,QAAQ;AAAA,yBAClC,KAAK,gBAAgB;AAAA;AAAA,kBAE5B,KAAK,QACHA,yCACAC,CAAO;AAAA;AAAA;AAAA,gBAIfA,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA7OaN,EAyCJ,SAAS,CAACF,CAAc;AAvCqBS,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAF/BR,EAEyC,WAAA,QAAA,CAAA;AAGhBO,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GALfR,EAKyB,WAAA,aAAA,CAAA;AAWCO,EAAA;AAAA,EAApCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAhBhBR,EAgB0B,WAAA,uBAAA,CAAA;AAGAO,EAAA;AAAA,EAApCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAnBhBR,EAmB0B,WAAA,iBAAA,CAAA;AAGAO,EAAA;AAAA,EAApCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAtBhBR,EAsB0B,WAAA,iBAAA,CAAA;AAGAO,EAAA;AAAA,EAApCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzBhBR,EAyB0B,WAAA,YAAA,CAAA;AAGDO,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5BfR,EA4ByB,WAAA,YAAA,CAAA;AAGCO,EAAA;AAAA,EAApCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA/BhBR,EA+B0B,WAAA,SAAA,CAAA;AAGDO,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlCfR,EAkCyB,WAAA,aAAA,CAAA;AAECO,EAAA;AAAA,EAApCE,EAAM,oBAAoB;AAAA,GApChBT,EAoC0B,WAAA,kBAAA,CAAA;AApC1BA,IAANO,EAAA;AAAA,EADNG,EAAc,aAAa;AAAA,GACfV,CAAA;"}