@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/dropdown-DXT3zeCU.js

@@ -0,0 +1,316 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, query as s } from "lit/decorators.js";
+//#region source/components/dropdown/dropdown.style.ts
+var c = n`
+  /* 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;
+  }
+`, l = class extends t {
+	static {
+		this.styles = [c];
+	}
+	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(e) {
+		super.updated(e), e.has("open") && this.open;
+	}
+	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() {
+		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() {
+		this.open ? this.hide() : this.show();
+	}
+	handleTriggerClick(e) {
+		e.stopPropagation(), this.disabled || this.toggle();
+	}
+	handleTriggerKeydown(e) {
+		this.disabled || (e.key === "Enter" || e.key === " " ? (e.preventDefault(), this.toggle()) : e.key === "ArrowDown" && !this.open && (e.preventDefault(), this.show()));
+	}
+	handleClickOutside(e) {
+		this.closeOnClickOutside && this.open && (e.composedPath().includes(this) || this.hide());
+	}
+	handleKeydown(e) {
+		this.closeOnEscape && this.open && e.key === "Escape" && (e.preventDefault(), this.hide(), this.triggerElement?.focus());
+	}
+	handlePanelClick(e) {
+		if (this.closeOnSelect) {
+			let t = e.target;
+			(t.closest("bp-menu-item") || t.closest("[data-dropdown-close]") || t.hasAttribute("data-dropdown-close")) && this.hide();
+		}
+	}
+	render() {
+		return r`
+      <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 ? r`
+                <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 ? r`<div class="dropdown__arrow"></div>` : i}
+                  <slot name="content"></slot>
+                </div>
+              ` : i}
+      </div>
+    `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "open", void 0), e([o({ type: String })], l.prototype, "placement", void 0), e([o({ type: Boolean })], l.prototype, "closeOnClickOutside", void 0), e([o({ type: Boolean })], l.prototype, "closeOnEscape", void 0), e([o({ type: Boolean })], l.prototype, "closeOnSelect", void 0), e([o({ type: Boolean })], l.prototype, "disabled", void 0), e([o({ type: Number })], l.prototype, "distance", void 0), e([o({ type: Boolean })], l.prototype, "arrow", void 0), e([o({ type: String })], l.prototype, "panelRole", void 0), e([s(".dropdown__trigger")], l.prototype, "triggerElement", void 0), l = e([a("bp-dropdown")], l);
+//#endregion
+export { l as t };
+
+//# sourceMappingURL=dropdown-DXT3zeCU.js.map

package/dist/shared/dropdown-DXT3zeCU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-DXT3zeCU.js","names":["_decorate","__decorate","dropdownStyles","BpDropdown","LitElement","changedProperties","event","target","nothing","property","query","customElement"],"sources":["../../source/components/dropdown/dropdown.style.ts","../../source/components/dropdown/dropdown.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const dropdownStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  .dropdown {\n    position: relative;\n    display: inline-block;\n  }\n\n  /* Trigger */\n  .dropdown__trigger {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n    outline: none;\n    user-select: none;\n  }\n\n  .dropdown__trigger:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n    border-radius: var(--bp-border-radius-sm);\n  }\n\n  /* Panel */\n  .dropdown__panel {\n    position: absolute;\n    z-index: 1000; /* Overlay layer - above page content, below modals */\n    min-width: 200px;\n    background-color: var(--bp-color-surface-elevated);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-lg);\n    box-shadow: var(--bp-shadow-lg);\n    padding: var(--bp-spacing-sm);\n    opacity: 0;\n    will-change: opacity, transform;\n    transition:\n      opacity var(--bp-transition-fast) var(--bp-ease-out),\n      transform var(--bp-transition-fast) var(--bp-ease-out);\n    contain: layout style;\n  }\n\n  /* Placement: Bottom variants */\n  .dropdown__panel--bottom-start {\n    top: 100%;\n    left: 0;\n    margin-top: var(--dropdown-distance, 4px);\n    transform: translateY(-8px);\n  }\n\n  .dropdown__panel--bottom-start.dropdown__panel--open {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .dropdown__panel--bottom {\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%) translateY(-8px);\n    margin-top: var(--dropdown-distance, 4px);\n  }\n\n  .dropdown__panel--bottom.dropdown__panel--open {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n\n  .dropdown__panel--bottom-end {\n    top: 100%;\n    right: 0;\n    margin-top: var(--dropdown-distance, 4px);\n    transform: translateY(-8px);\n  }\n\n  .dropdown__panel--bottom-end.dropdown__panel--open {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  /* Placement: Top variants */\n  .dropdown__panel--top-start {\n    bottom: 100%;\n    left: 0;\n    margin-bottom: var(--dropdown-distance, 4px);\n    transform: translateY(8px);\n  }\n\n  .dropdown__panel--top-start.dropdown__panel--open {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .dropdown__panel--top {\n    bottom: 100%;\n    left: 50%;\n    transform: translateX(-50%) translateY(8px);\n    margin-bottom: var(--dropdown-distance, 4px);\n  }\n\n  .dropdown__panel--top.dropdown__panel--open {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n\n  .dropdown__panel--top-end {\n    bottom: 100%;\n    right: 0;\n    margin-bottom: var(--dropdown-distance, 4px);\n    transform: translateY(8px);\n  }\n\n  .dropdown__panel--top-end.dropdown__panel--open {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  /* Placement: Side variants */\n  .dropdown__panel--left {\n    right: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    margin-right: var(--dropdown-distance, 4px);\n  }\n\n  .dropdown__panel--left.dropdown__panel--open {\n    opacity: 1;\n  }\n\n  .dropdown__panel--right {\n    left: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    margin-left: var(--dropdown-distance, 4px);\n  }\n\n  .dropdown__panel--right.dropdown__panel--open {\n    opacity: 1;\n  }\n\n  /* Arrow */\n  .dropdown__arrow {\n    position: absolute;\n    width: 12px;\n    height: 12px;\n    background-color: var(--bp-color-surface-elevated);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    transform: rotate(45deg);\n    border-bottom: none;\n    border-right: none;\n  }\n\n  /* Arrow positioning: Bottom variants */\n  .dropdown__panel--bottom .dropdown__arrow {\n    top: -7px;\n    left: 50%;\n    margin-left: -6px;\n  }\n\n  .dropdown__panel--bottom-start .dropdown__arrow {\n    top: -7px;\n    left: 16px;\n  }\n\n  .dropdown__panel--bottom-end .dropdown__arrow {\n    top: -7px;\n    right: 16px;\n  }\n\n  /* Arrow positioning: Top variants */\n  .dropdown__panel--top .dropdown__arrow {\n    bottom: -7px;\n    left: 50%;\n    margin-left: -6px;\n    transform: rotate(225deg);\n  }\n\n  .dropdown__panel--top-start .dropdown__arrow {\n    bottom: -7px;\n    left: 16px;\n    transform: rotate(225deg);\n  }\n\n  .dropdown__panel--top-end .dropdown__arrow {\n    bottom: -7px;\n    right: 16px;\n    transform: rotate(225deg);\n  }\n\n  /* Arrow positioning: Side variants */\n  .dropdown__panel--left .dropdown__arrow {\n    right: -7px;\n    top: 50%;\n    margin-top: -6px;\n    transform: rotate(135deg);\n  }\n\n  .dropdown__panel--right .dropdown__arrow {\n    left: -7px;\n    top: 50%;\n    margin-top: -6px;\n    transform: rotate(-45deg);\n  }\n\n  /* Disabled state */\n  .dropdown--disabled .dropdown__trigger {\n    cursor: not-allowed;\n    opacity: 0.6;\n    filter: grayscale(50%);\n    pointer-events: none;\n  }\n`;\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' : ''} ${\n          this.disabled ? '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        ${\n          this.open\n            ? html`\n                <div\n                  class=\"dropdown__panel dropdown__panel--${this.placement} ${\n                    this.open ? 'dropdown__panel--open' : ''\n                  }\"\n                  part=\"panel\"\n                  role=${this.panelRole}\n                  style=\"--dropdown-distance: ${this.distance}px;\"\n                  @click=${this.handlePanelClick}\n                >\n                  ${\n                    this.arrow\n                      ? html`<div class=\"dropdown__arrow\"></div>`\n                      : nothing\n                  }\n                  <slot name=\"content\"></slot>\n                </div>\n              `\n            : nothing\n        }\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-dropdown': BpDropdown;\n  }\n}\n"],"mappings":"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"}

package/dist/shared/field-message-CPXPLd6z.js

@@ -0,0 +1,46 @@
+import { css as e, html as t, nothing as n } from "lit";
+//#region source/utilities/field-message.ts
+var r = "helper-text", i = "error-message";
+function a(e) {
+	let t = !!e.errorMessage, n = !!e.helperText && !t;
+	return {
+		invalid: t || !!e.invalid,
+		describedBy: t ? i : n ? r : void 0,
+		showError: t,
+		showHelper: n
+	};
+}
+function o(e, o = "") {
+	let { showError: s, showHelper: c } = a(e), l = o ? ` ${o}` : "";
+	return s ? t`<div
+      id=${i}
+      class="field-message field-message--error"
+      part="error-message${l}"
+      role="alert"
+    >
+      ${e.errorMessage}
+    </div>` : c ? t`<div
+      id=${r}
+      class="field-message"
+      part="helper-text${l}"
+    >
+      ${e.helperText}
+    </div>` : n;
+}
+var s = e`
+  .field-message {
+    margin-top: var(--bp-spacing-xs);
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-sm);
+    line-height: var(--bp-line-height-normal);
+    color: var(--bp-color-text-muted);
+  }
+
+  .field-message--error {
+    color: var(--bp-color-error);
+  }
+`;
+//#endregion
+export { o as a, s as i, r as n, a as r, i as t };
+
+//# sourceMappingURL=field-message-CPXPLd6z.js.map

package/dist/shared/field-message-CPXPLd6z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-message-CPXPLd6z.js","names":["HELPER_TEXT_ID","ERROR_MESSAGE_ID","fieldMessageState","showError","options","showHelper","renderFieldMessage","extra","extraParts","nothing","fieldMessageStyles"],"sources":["../../source/utilities/field-message.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\n\n/**\n * Help and error text under a form control.\n *\n * Every Blueprint control takes the same two properties:\n *\n * - `helperText`: a hint shown under the control.\n * - `errorMessage`: when set, the control is invalid. The message replaces\n *   the hint, is announced (`role=\"alert\"`), and the control gets\n *   `aria-invalid=\"true\"` and an error border.\n *\n * The rendered element is referenced from the control's focusable element\n * with `aria-describedby`, using the ids below.\n */\nexport const HELPER_TEXT_ID = 'helper-text';\nexport const ERROR_MESSAGE_ID = 'error-message';\n\nexport interface FieldMessageOptions {\n  helperText?: string | null;\n  errorMessage?: string | null;\n  /**\n   * Treat the control as invalid even without a message, e.g. for\n   * `variant=\"error\"` or a boolean `error` flag.\n   */\n  invalid?: boolean;\n}\n\nexport interface FieldMessageState {\n  /** The control should show its error styling and `aria-invalid=\"true\"` */\n  invalid: boolean;\n  /** Id to put in the control's `aria-describedby`, if any */\n  describedBy: string | undefined;\n  showError: boolean;\n  showHelper: boolean;\n}\n\nexport function fieldMessageState(\n  options: FieldMessageOptions\n): FieldMessageState {\n  const showError = Boolean(options.errorMessage);\n  const showHelper = Boolean(options.helperText) && !showError;\n  return {\n    invalid: showError || Boolean(options.invalid),\n    describedBy: showError\n      ? ERROR_MESSAGE_ID\n      : showHelper\n        ? HELPER_TEXT_ID\n        : undefined,\n    showError,\n    showHelper,\n  };\n}\n\n/**\n * Render the help or error text. `extraParts` adds part names for\n * backwards compatibility (e.g. `message` on Number Input).\n */\nexport function renderFieldMessage(\n  options: FieldMessageOptions,\n  extraParts = ''\n): TemplateResult | typeof nothing {\n  const { showError, showHelper } = fieldMessageState(options);\n  const extra = extraParts ? ` ${extraParts}` : '';\n  if (showError) {\n    return html`<div\n      id=${ERROR_MESSAGE_ID}\n      class=\"field-message field-message--error\"\n      part=\"error-message${extra}\"\n      role=\"alert\"\n    >\n      ${options.errorMessage}\n    </div>`;\n  }\n  if (showHelper) {\n    return html`<div\n      id=${HELPER_TEXT_ID}\n      class=\"field-message\"\n      part=\"helper-text${extra}\"\n    >\n      ${options.helperText}\n    </div>`;\n  }\n  return nothing;\n}\n\n/** Styles for the help and error text; add to a control's `styles`. */\nexport const fieldMessageStyles = css`\n  .field-message {\n    margin-top: var(--bp-spacing-xs);\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-text-muted);\n  }\n\n  .field-message--error {\n    color: var(--bp-color-error);\n  }\n`;\n"],"mappings":";;AAeA,IAAaA,IAAiB,eACjBC,IAAmB;AAqBhC,SAAgBC,EACd,GACmB;CACnB,IAAMC,IAAY,EAAQC,EAAQ,cAC5BC,IAAa,EAAQD,EAAQ,cAAe,CAACD;CACnD,OAAO;EACL,SAASA,KAAa,EAAQC,EAAQ;EACtC,aAAaD,IACTF,IACAI,IACEL,IACA,KAAA;EACN;EACA;CACF;AACF;AAMA,SAAgBM,EACd,GACA,IAAa,IACoB;CACjC,IAAM,EAAE,cAAW,kBAAeJ,EAAkBE,CAAO,GACrDG,IAAQC,IAAa,IAAIA,MAAe;CAoB9C,OAnBIL,IACK,CAAI;WACJF,EAAiB;;2BAEDM,EAAM;;;QAGzBH,EAAQ,aAAa;cAGvBC,IACK,CAAI;WACJL,EAAe;;yBAEDO,EAAM;;QAEvBH,EAAQ,WAAW;cAGlBK;AACT;AAGA,IAAaC,IAAqB,CAAG"}

package/dist/shared/fieldset-BPRt4nC5.js

@@ -0,0 +1,155 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+//#region source/components/fieldset/fieldset.style.ts
+var l = n`
+  :host {
+    display: block;
+    font-family: var(--bp-font-family);
+  }
+
+  .fieldset {
+    margin: 0;
+    padding: 0;
+    border: none;
+    min-width: 0;
+  }
+
+  .fieldset__legend {
+    padding: 0;
+    margin-bottom: var(--bp-spacing-xs);
+    font-size: var(--bp-font-size-sm);
+    font-weight: var(--bp-font-weight-medium);
+    line-height: var(--bp-line-height-normal);
+    color: var(--bp-color-text);
+  }
+
+  .fieldset__legend[hidden] {
+    display: none;
+  }
+
+  .fieldset__required {
+    color: var(--bp-color-error);
+    margin-left: var(--bp-spacing-xs);
+  }
+
+  .fieldset__description {
+    margin: 0 0 var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-sm);
+    line-height: var(--bp-line-height-normal);
+    color: var(--bp-color-text-muted);
+  }
+
+  .fieldset__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-sm);
+  }
+
+  .fieldset--horizontal .fieldset__content {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--bp-spacing-sm) var(--bp-spacing-lg);
+  }
+
+  .fieldset__error {
+    margin: var(--bp-spacing-xs) 0 0;
+    font-size: var(--bp-font-size-sm);
+    line-height: var(--bp-line-height-normal);
+    color: var(--bp-color-error);
+  }
+`, u = (e) => "disabled" in e && typeof e.disabled == "boolean", d = class extends t {
+	static {
+		this.styles = [l];
+	}
+	constructor() {
+		super(), this.hasLegendSlot = !1, this.disabledByFieldset = /* @__PURE__ */ new Set(), this.legend = "", this.description = "", this.errorMessage = "", this.required = !1, this.disabled = !1, this.orientation = "vertical";
+	}
+	updated(e) {
+		super.updated(e), e.has("disabled") && this.syncDisabled();
+	}
+	getControls() {
+		let e = this.renderRoot.querySelector("slot:not([name])");
+		if (!e) return [];
+		let t = [];
+		for (let n of e.assignedElements({ flatten: !0 })) for (let e of [n, ...Array.from(n.querySelectorAll("*"))]) u(e) && t.push(e);
+		return t;
+	}
+	syncDisabled() {
+		if (this.disabled) for (let e of this.getControls()) e.disabled || (e.disabled = !0, this.disabledByFieldset.add(e));
+		else {
+			for (let e of this.disabledByFieldset) e.disabled = !1;
+			this.disabledByFieldset.clear();
+		}
+	}
+	handleSlotChange() {
+		this.disabled && this.syncDisabled();
+	}
+	handleLegendSlotChange(e) {
+		let t = e.target;
+		this.hasLegendSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+	}
+	render() {
+		let e = !!this.errorMessage, t = [this.description ? "description" : "", e ? "error-message" : ""].filter(Boolean).join(" ") || i;
+		return r`
+      <fieldset
+        class=${c({
+			fieldset: !0,
+			[`fieldset--${this.orientation}`]: !0,
+			"fieldset--invalid": e,
+			"fieldset--disabled": this.disabled
+		})}
+        part="fieldset"
+        aria-describedby=${t}
+        aria-invalid=${e ? "true" : i}
+      >
+        <legend
+          class="fieldset__legend"
+          part="legend"
+          ?hidden=${!this.legend && !this.hasLegendSlot}
+        >
+          <slot name="legend" @slotchange=${this.handleLegendSlotChange}
+            >${this.legend}</slot
+          >
+          ${this.required ? r`<span class="fieldset__required" aria-hidden="true"
+                  >*</span
+                >` : i}
+        </legend>
+        ${this.description ? r`<p
+                id="description"
+                class="fieldset__description"
+                part="description"
+              >
+                ${this.description}
+              </p>` : i}
+        <div class="fieldset__content" part="content">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        ${e ? r`<p
+                id="error-message"
+                class="fieldset__error"
+                part="error"
+                role="alert"
+              >
+                ${this.errorMessage}
+              </p>` : i}
+      </fieldset>
+    `;
+	}
+};
+e([o({ type: String })], d.prototype, "legend", void 0), e([o({ type: String })], d.prototype, "description", void 0), e([o({ type: String })], d.prototype, "errorMessage", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "required", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), e([o({
+	type: String,
+	reflect: !0
+})], d.prototype, "orientation", void 0), e([s()], d.prototype, "hasLegendSlot", void 0), d = e([a("bp-fieldset")], d);
+//#endregion
+export { d as t };
+
+//# sourceMappingURL=fieldset-BPRt4nC5.js.map

package/dist/shared/fieldset-BPRt4nC5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset-BPRt4nC5.js","names":["_decorate","__decorate","fieldsetStyles","isDisableable","el","BpFieldset","LitElement","changed","slot","controls","node","control","event","hasError","describedBy","nothing","classMap","property","state","customElement"],"sources":["../../source/components/fieldset/fieldset.style.ts","../../source/components/fieldset/fieldset.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const fieldsetStyles = css`\n  :host {\n    display: block;\n    font-family: var(--bp-font-family);\n  }\n\n  .fieldset {\n    margin: 0;\n    padding: 0;\n    border: none;\n    min-width: 0;\n  }\n\n  .fieldset__legend {\n    padding: 0;\n    margin-bottom: var(--bp-spacing-xs);\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-text);\n  }\n\n  .fieldset__legend[hidden] {\n    display: none;\n  }\n\n  .fieldset__required {\n    color: var(--bp-color-error);\n    margin-left: var(--bp-spacing-xs);\n  }\n\n  .fieldset__description {\n    margin: 0 0 var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-text-muted);\n  }\n\n  .fieldset__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-sm);\n  }\n\n  .fieldset--horizontal .fieldset__content {\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--bp-spacing-sm) var(--bp-spacing-lg);\n  }\n\n  .fieldset__error {\n    margin: var(--bp-spacing-xs) 0 0;\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-error);\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { fieldsetStyles } from './fieldset.style.js';\n\nexport type FieldsetOrientation = 'vertical' | 'horizontal';\n\ntype Disableable = Element & { disabled: boolean };\n\nconst isDisableable = (el: Element): el is Disableable =>\n  'disabled' in el && typeof (el as Disableable).disabled === 'boolean';\n\n/**\n * Groups related form controls under a shared legend, with an optional\n * description and a group-level error message. Renders a native\n * `<fieldset>`/`<legend>`, so assistive technology announces the group name\n * when focus enters any control inside it.\n *\n * @element bp-fieldset\n *\n * @slot - The grouped controls\n * @slot legend - Rich legend content (overrides the `legend` property)\n *\n * @csspart fieldset - The native fieldset element\n * @csspart legend - The legend\n * @csspart description - The description text\n * @csspart content - The wrapper around the slotted controls\n * @csspart error - The error message\n */\n@customElement('bp-fieldset')\nexport class BpFieldset extends LitElement {\n  /** Group name, rendered as the `<legend>` */\n  @property({ type: String }) declare legend: string;\n\n  /** Helper text shown under the legend and linked to the group */\n  @property({ type: String }) declare description: string;\n\n  /** Group-level error. When set, the group is marked invalid and the message is announced */\n  @property({ type: String }) declare errorMessage: string;\n\n  /** Marks the group as required (adds an asterisk to the legend) */\n  @property({ type: Boolean, reflect: true }) declare required: boolean;\n\n  /**\n   * Disables every control inside the group. Controls that were already\n   * disabled stay disabled when the group is re-enabled.\n   */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /** Stack the controls vertically or lay them out in a wrapping row */\n  @property({ type: String, reflect: true })\n  declare orientation: FieldsetOrientation;\n\n  @state() private hasLegendSlot = false;\n\n  /** Controls this fieldset disabled, so re-enabling leaves the rest alone */\n  private disabledByFieldset = new Set<Disableable>();\n\n  static styles = [fieldsetStyles];\n\n  constructor() {\n    super();\n    this.legend = '';\n    this.description = '';\n    this.errorMessage = '';\n    this.required = false;\n    this.disabled = false;\n    this.orientation = 'vertical';\n  }\n\n  protected updated(changed: PropertyValues): void {\n    super.updated(changed);\n    if (changed.has('disabled')) {\n      this.syncDisabled();\n    }\n  }\n\n  /** Every element with a boolean `disabled` property inside the group */\n  private getControls(): Disableable[] {\n    const slot =\n      this.renderRoot.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (!slot) return [];\n    const controls: Disableable[] = [];\n    for (const node of slot.assignedElements({ flatten: true })) {\n      for (const el of [node, ...Array.from(node.querySelectorAll('*'))]) {\n        if (isDisableable(el)) controls.push(el);\n      }\n    }\n    return controls;\n  }\n\n  private syncDisabled(): void {\n    if (this.disabled) {\n      for (const control of this.getControls()) {\n        if (!control.disabled) {\n          control.disabled = true;\n          this.disabledByFieldset.add(control);\n        }\n      }\n    } else {\n      for (const control of this.disabledByFieldset) {\n        control.disabled = false;\n      }\n      this.disabledByFieldset.clear();\n    }\n  }\n\n  private handleSlotChange(): void {\n    if (this.disabled) this.syncDisabled();\n  }\n\n  private handleLegendSlotChange(event: Event): void {\n    const slot = event.target as HTMLSlotElement;\n    this.hasLegendSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  render() {\n    const hasError = Boolean(this.errorMessage);\n    const describedBy =\n      [this.description ? 'description' : '', hasError ? 'error-message' : '']\n        .filter(Boolean)\n        .join(' ') || nothing;\n\n    return html`\n      <fieldset\n        class=${classMap({\n          fieldset: true,\n          [`fieldset--${this.orientation}`]: true,\n          'fieldset--invalid': hasError,\n          'fieldset--disabled': this.disabled,\n        })}\n        part=\"fieldset\"\n        aria-describedby=${describedBy}\n        aria-invalid=${hasError ? 'true' : nothing}\n      >\n        <legend\n          class=\"fieldset__legend\"\n          part=\"legend\"\n          ?hidden=${!this.legend && !this.hasLegendSlot}\n        >\n          <slot name=\"legend\" @slotchange=${this.handleLegendSlotChange}\n            >${this.legend}</slot\n          >\n          ${\n            this.required\n              ? html`<span class=\"fieldset__required\" aria-hidden=\"true\"\n                  >*</span\n                >`\n              : nothing\n          }\n        </legend>\n        ${\n          this.description\n            ? html`<p\n                id=\"description\"\n                class=\"fieldset__description\"\n                part=\"description\"\n              >\n                ${this.description}\n              </p>`\n            : nothing\n        }\n        <div class=\"fieldset__content\" part=\"content\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n        ${\n          hasError\n            ? html`<p\n                id=\"error-message\"\n                class=\"fieldset__error\"\n                part=\"error\"\n                role=\"alert\"\n              >\n                ${this.errorMessage}\n              </p>`\n            : nothing\n        }\n      </fieldset>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-fieldset': BpFieldset;\n  }\n}\n"],"mappings":"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"}