@krollins/blueprint 0.1.12 → 0.1.13

package/dist/components/menu.js

@@ -0,0 +1,331 @@
+import { css as v, LitElement as m, html as a, nothing as f } from "lit";
+import { property as o, state as g, customElement as b } from "lit/decorators.js";
+const h = v`
+  /* Base styles - Menu Container */
+  :host {
+    display: block;
+  }
+
+  .menu {
+    display: flex;
+    flex-direction: column;
+    min-width: 200px;
+    padding: var(--bp-spacing-xs) 0;
+    margin: 0;
+    background-color: var(--bp-color-surface-elevated);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+    box-shadow: var(--bp-shadow-lg);
+    font-family: var(--bp-font-sans);
+    list-style: none;
+    outline: none;
+  }
+
+  /* Menu Sizes */
+  .menu--sm {
+    min-width: 160px;
+  }
+
+  .menu--lg {
+    min-width: 280px;
+  }
+
+  /* Menu Item Base */
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--bp-spacing-sm);
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    margin: 0 var(--bp-spacing-xs);
+    min-height: 40px;
+    border-radius: var(--bp-border-radius-sm);
+    background-color: transparent;
+    color: var(--bp-color-text);
+    font-family: var(--bp-font-sans);
+    font-size: var(--bp-font-size-base);
+    font-weight: var(--bp-font-weight-normal);
+    line-height: var(--bp-line-height-normal);
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background-color var(--bp-transition-fast),
+      transform var(--bp-transition-fast);
+    user-select: none;
+    outline: none;
+  }
+
+  /* Menu Item Sizes */
+  .menu-item--sm {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-sm);
+    min-height: 36px;
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .menu-item--lg {
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    min-height: 48px;
+    font-size: var(--bp-font-size-lg);
+  }
+
+  /* Menu Item States */
+  .menu-item:hover:not(.menu-item--disabled) {
+    background-color: var(--bp-color-surface);
+  }
+
+  .menu-item:focus-visible:not(.menu-item--disabled) {
+    background-color: var(--bp-color-surface);
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-primary);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .menu-item:active:not(.menu-item--disabled) {
+    background-color: var(--bp-color-surface);
+    transform: scale(0.98);
+  }
+
+  .menu-item--selected {
+    background-color: var(--bp-color-surface);
+    font-weight: var(--bp-font-weight-medium);
+  }
+
+  .menu-item--selected::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background-color: var(--bp-color-primary);
+    border-radius: 0 var(--bp-border-radius-sm) var(--bp-border-radius-sm) 0;
+  }
+
+  .menu-item--disabled {
+    color: var(--bp-color-text-muted);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Menu Item Parts */
+  .menu-item__prefix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .menu-item__prefix:empty {
+    display: none;
+  }
+
+  .menu-item__label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .menu-item__suffix {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--bp-spacing-sm);
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  .menu-item__suffix:empty {
+    display: none;
+  }
+
+  .menu-item__shortcut {
+    color: var(--bp-color-text-muted);
+    font-size: var(--bp-font-size-sm);
+    font-family: var(--bp-font-mono);
+    padding: 2px var(--bp-spacing-xs);
+    background-color: var(--bp-color-surface);
+    border-radius: var(--bp-border-radius-sm);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+  }
+
+  .menu-item__arrow {
+    color: var(--bp-color-text-muted);
+    font-size: var(--bp-font-size-lg);
+    line-height: 1;
+  }
+
+  /* Menu Divider */
+  .menu-divider {
+    height: var(--bp-border-width);
+    margin: var(--bp-spacing-sm) var(--bp-spacing-sm);
+    background-color: var(--bp-color-border);
+  }
+`;
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (e, t, n, d) => {
+  for (var i = d > 1 ? void 0 : d ? y(t, n) : t, p = e.length - 1, u; p >= 0; p--)
+    (u = e[p]) && (i = (d ? u(t, n, i) : u(i)) || i);
+  return d && i && x(t, n, i), i;
+};
+let l = class extends m {
+  constructor() {
+    super(), this.focusedIndex = -1, this.handleFocusIn = (e) => {
+      const t = e.target, n = this.menuItems;
+      this.focusedIndex = n.indexOf(t);
+    }, this.size = "md";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("focusin", this.handleFocusIn);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("focusin", this.handleFocusIn);
+  }
+  /**
+   * Gets all non-divider menu items from the default slot.
+   * @returns Array of bp-menu-item elements
+   */
+  get menuItems() {
+    const e = this.shadowRoot?.querySelector("slot");
+    return e ? e.assignedElements().filter((t) => t.tagName === "BP-MENU-ITEM") : [];
+  }
+  /**
+   * Handles keyboard navigation within the menu.
+   * Supports ArrowDown, ArrowUp, Home, and End keys.
+   */
+  handleKeyDown(e) {
+    const t = this.menuItems.filter((n) => !n.disabled);
+    if (t.length !== 0)
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), this.focusedIndex = Math.min(this.focusedIndex + 1, t.length - 1), t[this.focusedIndex]?.focus();
+          break;
+        case "ArrowUp":
+          e.preventDefault(), this.focusedIndex = Math.max(this.focusedIndex - 1, 0), t[this.focusedIndex]?.focus();
+          break;
+        case "Home":
+          e.preventDefault(), this.focusedIndex = 0, t[0]?.focus();
+          break;
+        case "End":
+          e.preventDefault(), this.focusedIndex = t.length - 1, t[t.length - 1]?.focus();
+          break;
+      }
+  }
+  handleSlotChange() {
+    this.menuItems.forEach((e) => {
+      e.size = this.size;
+    });
+  }
+  render() {
+    return a`
+      <div
+        class="menu menu--${this.size}"
+        part="container"
+        role="menu"
+        @keydown=${this.handleKeyDown}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+l.styles = [h];
+s([
+  o({ type: String })
+], l.prototype, "size", 2);
+s([
+  g()
+], l.prototype, "focusedIndex", 2);
+l = s([
+  b("bp-menu")
+], l);
+let r = class extends m {
+  constructor() {
+    super(), this.value = "", this.disabled = !1, this.selected = !1, this.hasSubmenu = !1, this.size = "md", this.shortcut = "";
+  }
+  focus() {
+    this.shadowRoot?.querySelector(".menu-item")?.focus();
+  }
+  handleActivate() {
+    this.disabled || this.dispatchEvent(
+      new CustomEvent("bp-menu-select", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault(), e.stopPropagation();
+      return;
+    }
+    this.handleActivate();
+  }
+  handleKeyDown(e) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleActivate());
+  }
+  render() {
+    return a`
+      <div
+        class="menu-item menu-item--${this.size} ${this.disabled ? "menu-item--disabled" : ""} ${this.selected ? "menu-item--selected" : ""}"
+        part="base"
+        role="menuitem"
+        tabindex=${this.disabled ? -1 : 0}
+        aria-disabled=${this.disabled}
+        aria-current=${this.selected ? "page" : "false"}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <span class="menu-item__prefix" part="prefix">
+          <slot name="prefix"></slot>
+        </span>
+        <span class="menu-item__label" part="label">
+          <slot></slot>
+        </span>
+        <span class="menu-item__suffix" part="suffix">
+          ${this.shortcut ? a`<span class="menu-item__shortcut">${this.shortcut}</span>` : f}
+          <slot name="suffix"></slot>
+          ${this.hasSubmenu ? a`<span class="menu-item__arrow">›</span>` : f}
+        </span>
+      </div>
+    `;
+  }
+};
+r.styles = [h];
+s([
+  o({ type: String })
+], r.prototype, "value", 2);
+s([
+  o({ type: Boolean })
+], r.prototype, "disabled", 2);
+s([
+  o({ type: Boolean })
+], r.prototype, "selected", 2);
+s([
+  o({ type: Boolean, attribute: "has-submenu" })
+], r.prototype, "hasSubmenu", 2);
+s([
+  o({ type: String })
+], r.prototype, "size", 2);
+s([
+  o({ type: String })
+], r.prototype, "shortcut", 2);
+r = s([
+  b("bp-menu-item")
+], r);
+let c = class extends m {
+  render() {
+    return a`<div
+      class="menu-divider"
+      part="divider"
+      role="separator"
+    ></div>`;
+  }
+};
+c.styles = [h];
+c = s([
+  b("bp-menu-divider")
+], c);
+export {
+  l as BpMenu,
+  c as BpMenuDivider,
+  r as BpMenuItem
+};
+//# sourceMappingURL=menu.js.map

package/dist/components/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sources":["../../source/components/menu/menu.style.ts","../../source/components/menu/menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const menuStyles = css`\n  /* Base styles - Menu Container */\n  :host {\n    display: block;\n  }\n\n  .menu {\n    display: flex;\n    flex-direction: column;\n    min-width: 200px;\n    padding: var(--bp-spacing-xs) 0;\n    margin: 0;\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-md);\n    box-shadow: var(--bp-shadow-lg);\n    font-family: var(--bp-font-sans);\n    list-style: none;\n    outline: none;\n  }\n\n  /* Menu Sizes */\n  .menu--sm {\n    min-width: 160px;\n  }\n\n  .menu--lg {\n    min-width: 280px;\n  }\n\n  /* Menu Item Base */\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-sm);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    margin: 0 var(--bp-spacing-xs);\n    min-height: 40px;\n    border-radius: var(--bp-border-radius-sm);\n    background-color: transparent;\n    color: var(--bp-color-text);\n    font-family: var(--bp-font-sans);\n    font-size: var(--bp-font-size-base);\n    font-weight: var(--bp-font-weight-normal);\n    line-height: var(--bp-line-height-normal);\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      background-color var(--bp-transition-fast),\n      transform var(--bp-transition-fast);\n    user-select: none;\n    outline: none;\n  }\n\n  /* Menu Item Sizes */\n  .menu-item--sm {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-sm);\n    min-height: 36px;\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .menu-item--lg {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    min-height: 48px;\n    font-size: var(--bp-font-size-lg);\n  }\n\n  /* Menu Item States */\n  .menu-item:hover:not(.menu-item--disabled) {\n    background-color: var(--bp-color-surface);\n  }\n\n  .menu-item:focus-visible:not(.menu-item--disabled) {\n    background-color: var(--bp-color-surface);\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-primary);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .menu-item:active:not(.menu-item--disabled) {\n    background-color: var(--bp-color-surface);\n    transform: scale(0.98);\n  }\n\n  .menu-item--selected {\n    background-color: var(--bp-color-surface);\n    font-weight: var(--bp-font-weight-medium);\n  }\n\n  .menu-item--selected::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 3px;\n    background-color: var(--bp-color-primary);\n    border-radius: 0 var(--bp-border-radius-sm) var(--bp-border-radius-sm) 0;\n  }\n\n  .menu-item--disabled {\n    color: var(--bp-color-text-muted);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* Menu Item Parts */\n  .menu-item__prefix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .menu-item__prefix:empty {\n    display: none;\n  }\n\n  .menu-item__label {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .menu-item__suffix {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-sm);\n    flex-shrink: 0;\n    margin-left: auto;\n  }\n\n  .menu-item__suffix:empty {\n    display: none;\n  }\n\n  .menu-item__shortcut {\n    color: var(--bp-color-text-muted);\n    font-size: var(--bp-font-size-sm);\n    font-family: var(--bp-font-mono);\n    padding: 2px var(--bp-spacing-xs);\n    background-color: var(--bp-color-surface);\n    border-radius: var(--bp-border-radius-sm);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  .menu-item__arrow {\n    color: var(--bp-color-text-muted);\n    font-size: var(--bp-font-size-lg);\n    line-height: 1;\n  }\n\n  /* Menu Divider */\n  .menu-divider {\n    height: var(--bp-border-width);\n    margin: var(--bp-spacing-sm) var(--bp-spacing-sm);\n    background-color: var(--bp-color-border);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport { menuStyles } from './menu.style.js';\r\n\r\nexport type MenuSize = 'sm' | 'md' | 'lg';\r\n\r\n/**\r\n * A menu container component for displaying a list of actions or options.\r\n *\r\n * @fires bp-menu-select - Dispatched when a menu item is selected\r\n *\r\n * @slot - Menu items (bp-menu-item, bp-menu-divider)\r\n *\r\n * @csspart container - The menu container element\r\n */\r\n@customElement('bp-menu')\r\nexport class BpMenu extends LitElement {\r\n  /** Size variant for all menu items */\r\n  @property({ type: String }) declare size: MenuSize;\r\n\r\n  /** Current focused item index for keyboard navigation */\r\n  @state() private focusedIndex = -1;\r\n\r\n  static styles = [menuStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.size = 'md';\r\n  }\r\n\r\n  private handleFocusIn = (event: FocusEvent) => {\r\n    const target = event.target as BpMenuItem;\r\n    const items = this.menuItems;\r\n    this.focusedIndex = items.indexOf(target);\r\n  };\r\n\r\n  connectedCallback() {\r\n    super.connectedCallback();\r\n    this.addEventListener('focusin', this.handleFocusIn);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener('focusin', this.handleFocusIn);\r\n  }\r\n\r\n  /**\r\n   * Gets all non-divider menu items from the default slot.\r\n   * @returns Array of bp-menu-item elements\r\n   */\r\n  private get menuItems(): BpMenuItem[] {\r\n    const slot = this.shadowRoot?.querySelector('slot');\r\n    if (!slot) return [];\r\n    return slot\r\n      .assignedElements()\r\n      .filter((el): el is BpMenuItem => el.tagName === 'BP-MENU-ITEM');\r\n  }\r\n\r\n  /**\r\n   * Handles keyboard navigation within the menu.\r\n   * Supports ArrowDown, ArrowUp, Home, and End keys.\r\n   */\r\n  private handleKeyDown(event: KeyboardEvent) {\r\n    const items = this.menuItems.filter((item) => !item.disabled);\r\n    if (items.length === 0) return;\r\n\r\n    switch (event.key) {\r\n      case 'ArrowDown':\r\n        event.preventDefault();\r\n        this.focusedIndex = Math.min(this.focusedIndex + 1, items.length - 1);\r\n        items[this.focusedIndex]?.focus();\r\n        break;\r\n      case 'ArrowUp':\r\n        event.preventDefault();\r\n        this.focusedIndex = Math.max(this.focusedIndex - 1, 0);\r\n        items[this.focusedIndex]?.focus();\r\n        break;\r\n      case 'Home':\r\n        event.preventDefault();\r\n        this.focusedIndex = 0;\r\n        items[0]?.focus();\r\n        break;\r\n      case 'End':\r\n        event.preventDefault();\r\n        this.focusedIndex = items.length - 1;\r\n        items[items.length - 1]?.focus();\r\n        break;\r\n    }\r\n  }\r\n\r\n  private handleSlotChange() {\r\n    // Update size on all menu items\r\n    this.menuItems.forEach((item) => {\r\n      item.size = this.size;\r\n    });\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div\r\n        class=\"menu menu--${this.size}\"\r\n        part=\"container\"\r\n        role=\"menu\"\r\n        @keydown=${this.handleKeyDown}\r\n      >\r\n        <slot @slotchange=${this.handleSlotChange}></slot>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n\r\n/**\r\n * A menu item component for use within bp-menu.\r\n *\r\n * @fires bp-select - Dispatched when the item is selected\r\n *\r\n * @slot - Item label content\r\n * @slot prefix - Content before the label (typically an icon)\r\n * @slot suffix - Content after the label (typically a shortcut or arrow)\r\n *\r\n * @csspart base - The menu item container\r\n * @csspart prefix - The prefix slot container\r\n * @csspart label - The label container\r\n * @csspart suffix - The suffix slot container\r\n */\r\n@customElement('bp-menu-item')\r\nexport class BpMenuItem extends LitElement {\r\n  /** The value associated with this menu item */\r\n  @property({ type: String }) declare value: string;\r\n\r\n  /** Whether the item is disabled */\r\n  @property({ type: Boolean }) declare disabled: boolean;\r\n\r\n  /** Whether the item is selected/active */\r\n  @property({ type: Boolean }) declare selected: boolean;\r\n\r\n  /** Whether the item has a submenu */\r\n  @property({ type: Boolean, attribute: 'has-submenu' })\r\n  declare hasSubmenu: boolean;\r\n\r\n  /** Size variant (inherited from parent menu) */\r\n  @property({ type: String }) declare size: MenuSize;\r\n\r\n  /** Keyboard shortcut hint to display */\r\n  @property({ type: String }) declare shortcut: string;\r\n\r\n  static styles = [menuStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.value = '';\r\n    this.disabled = false;\r\n    this.selected = false;\r\n    this.hasSubmenu = false;\r\n    this.size = 'md';\r\n    this.shortcut = '';\r\n  }\r\n\r\n  focus() {\r\n    const button = this.shadowRoot?.querySelector('.menu-item') as HTMLElement;\r\n    button?.focus();\r\n  }\r\n\r\n  private handleActivate() {\r\n    if (this.disabled) return;\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent('bp-menu-select', {\r\n        detail: { value: this.value },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  }\r\n\r\n  private handleClick(event: MouseEvent) {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    this.handleActivate();\r\n  }\r\n\r\n  private handleKeyDown(event: KeyboardEvent) {\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n      this.handleActivate();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div\r\n        class=\"menu-item menu-item--${this.size} ${this.disabled\r\n          ? 'menu-item--disabled'\r\n          : ''} ${this.selected ? 'menu-item--selected' : ''}\"\r\n        part=\"base\"\r\n        role=\"menuitem\"\r\n        tabindex=${this.disabled ? -1 : 0}\r\n        aria-disabled=${this.disabled}\r\n        aria-current=${this.selected ? 'page' : 'false'}\r\n        @click=${this.handleClick}\r\n        @keydown=${this.handleKeyDown}\r\n      >\r\n        <span class=\"menu-item__prefix\" part=\"prefix\">\r\n          <slot name=\"prefix\"></slot>\r\n        </span>\r\n        <span class=\"menu-item__label\" part=\"label\">\r\n          <slot></slot>\r\n        </span>\r\n        <span class=\"menu-item__suffix\" part=\"suffix\">\r\n          ${this.shortcut\r\n            ? html`<span class=\"menu-item__shortcut\">${this.shortcut}</span>`\r\n            : nothing}\r\n          <slot name=\"suffix\"></slot>\r\n          ${this.hasSubmenu\r\n            ? html`<span class=\"menu-item__arrow\">›</span>`\r\n            : nothing}\r\n        </span>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n\r\n/**\r\n * A divider for visually separating menu items.\r\n *\r\n * @csspart divider - The divider element\r\n */\r\n@customElement('bp-menu-divider')\r\nexport class BpMenuDivider extends LitElement {\r\n  static styles = [menuStyles];\r\n\r\n  render() {\r\n    return html`<div\r\n      class=\"menu-divider\"\r\n      part=\"divider\"\r\n      role=\"separator\"\r\n    ></div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'bp-menu': BpMenu;\r\n    'bp-menu-item': BpMenuItem;\r\n    'bp-menu-divider': BpMenuDivider;\r\n  }\r\n}\r\n"],"names":["menuStyles","css","BpMenu","LitElement","event","target","items","slot","el","item","html","__decorateClass","property","state","customElement","BpMenuItem","nothing","BpMenuDivider"],"mappings":"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"}

package/dist/components/modal.js

@@ -0,0 +1,317 @@
+import { css as b, LitElement as h, html as c } from "lit";
+import { property as d, query as u, state as p, customElement as m } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+const v = b`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  :host([open]) {
+    display: block;
+  }
+
+  :host(:not([open])) {
+    display: none;
+  }
+
+  /* Backdrop */
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: var(--bp-z-modal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--bp-color-backdrop);
+    animation: fadeIn var(--bp-duration-fast) var(--bp-ease-out);
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(var(--bp-spacing-8));
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  /* Dialog */
+  .modal-dialog {
+    position: relative;
+    background-color: var(--bp-color-surface-elevated);
+    border-radius: var(--bp-border-radius-lg);
+    box-shadow: var(--bp-shadow-xl);
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: slideUp var(--bp-duration-normal) var(--bp-ease-out);
+    outline: none;
+  }
+
+  /* Header */
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--bp-spacing-md);
+    padding: var(--bp-spacing-6);
+    border-bottom: var(--bp-border-width) solid var(--bp-color-border);
+    font-family: var(--bp-font-family);
+  }
+
+  ::slotted([slot='header']) {
+    flex: 1;
+    font-size: var(--bp-font-size-xl);
+    font-weight: var(--bp-font-weight-semibold);
+    color: var(--bp-color-text-strong);
+    line-height: var(--bp-line-height-tight);
+    margin: 0;
+  }
+
+  /* Close button */
+  .modal-close {
+    appearance: none;
+    background: transparent;
+    border: none;
+    padding: var(--bp-spacing-2);
+    cursor: pointer;
+    color: var(--bp-color-text-muted);
+    border-radius: var(--bp-border-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--bp-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .modal-close:hover {
+    background-color: var(--bp-color-surface);
+    color: var(--bp-color-text);
+  }
+
+  .modal-close:focus-visible {
+    outline: var(--bp-focus-ring);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .modal-close svg {
+    display: block;
+  }
+
+  /* Body */
+  .modal-body {
+    flex: 1;
+    padding: var(--bp-spacing-6);
+    overflow-y: auto;
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-relaxed);
+    color: var(--bp-color-text);
+  }
+
+  /* Footer */
+  .modal-footer {
+    padding: var(--bp-spacing-6);
+    border-top: var(--bp-border-width) solid var(--bp-color-border);
+    display: flex;
+    gap: var(--bp-spacing-3);
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .modal-footer:empty {
+    display: none;
+  }
+
+  /* Sizes */
+  .modal-dialog--sm {
+    width: 90%;
+    max-width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));
+  }
+
+  .modal-dialog--md {
+    width: 90%;
+    max-width: var(--bp-breakpoint-sm);
+  }
+
+  .modal-dialog--lg {
+    width: 90%;
+    max-width: var(--bp-breakpoint-md);
+  }
+
+  /* States */
+  .modal-dialog:focus {
+    outline: none;
+  }
+`;
+var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (e, o, s, l) => {
+  for (var a = l > 1 ? void 0 : l ? g(o, s) : o, i = e.length - 1, n; i >= 0; i--)
+    (n = e[i]) && (a = (l ? n(o, s, a) : n(a)) || a);
+  return l && a && y(o, s, a), a;
+};
+let t = class extends h {
+  constructor() {
+    super(), this.previouslyFocusedElement = null, this.bodyScrollPrevented = !1, this.handleKeyDown = (e) => {
+      e.key === "Escape" && this.open && (e.preventDefault(), this.close()), e.key === "Tab" && this.open && this.trapFocus(e);
+    }, this.handleBackdropClick = (e) => {
+      e.target === e.currentTarget && this.close();
+    }, this.handleCloseButtonClick = () => {
+      this.close();
+    }, this.open = !1, this.size = "md", this.ariaLabelledby = "";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this.handleKeyDown), this.restoreFocus(), this.restoreBodyScroll();
+  }
+  updated(e) {
+    e.has("open") && (this.open ? this.handleOpen() : this.handleClose());
+  }
+  handleOpen() {
+    this.previouslyFocusedElement = document.activeElement, this.preventBodyScroll(), this.updateComplete.then(() => {
+      this.setFocusToDialog();
+    });
+  }
+  handleClose() {
+    this.restoreFocus(), this.restoreBodyScroll();
+  }
+  preventBodyScroll() {
+    this.bodyScrollPrevented || (document.body.style.overflow = "hidden", this.bodyScrollPrevented = !0);
+  }
+  restoreBodyScroll() {
+    this.bodyScrollPrevented && (document.body.style.overflow = "", this.bodyScrollPrevented = !1);
+  }
+  setFocusToDialog() {
+    this.dialogElement && this.dialogElement.focus();
+  }
+  restoreFocus() {
+    this.previouslyFocusedElement && (this.previouslyFocusedElement.focus(), this.previouslyFocusedElement = null);
+  }
+  trapFocus(e) {
+    const o = this.getFocusableElements();
+    if (o.length === 0) return;
+    const s = o[0], l = o[o.length - 1];
+    e.shiftKey ? document.activeElement === s && (e.preventDefault(), l.focus()) : document.activeElement === l && (e.preventDefault(), s.focus());
+  }
+  getFocusableElements() {
+    if (!this.shadowRoot) return [];
+    const e = [
+      "button:not([disabled])",
+      "a[href]",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ], o = this.shadowRoot.querySelectorAll(
+      e.join(",")
+    );
+    return Array.from(o);
+  }
+  close() {
+    this.open = !1, this.dispatchEvent(
+      new CustomEvent("bp-close", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    if (!this.open)
+      return c``;
+    const e = {
+      "modal-dialog": !0,
+      [`modal-dialog--${this.size}`]: !0
+    };
+    return c`
+      <div
+        class="modal-backdrop"
+        part="backdrop"
+        @click=${this.handleBackdropClick}
+      >
+        <div
+          class=${f(e)}
+          part="dialog"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby=${this.ariaLabelledby || "modal-header"}
+          tabindex="-1"
+        >
+          <div class="modal-header" part="header">
+            <slot name="header"></slot>
+            <button
+              class="modal-close"
+              part="close-button"
+              type="button"
+              aria-label="Close"
+              @click=${this.handleCloseButtonClick}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+          <div class="modal-body" part="body">
+            <slot></slot>
+          </div>
+          <div class="modal-footer" part="footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+t.styles = [v];
+r([
+  d({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+r([
+  d({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+r([
+  d({ type: String, attribute: "aria-labelledby" })
+], t.prototype, "ariaLabelledby", 2);
+r([
+  u(".modal-dialog")
+], t.prototype, "dialogElement", 2);
+r([
+  p()
+], t.prototype, "previouslyFocusedElement", 2);
+r([
+  p()
+], t.prototype, "bodyScrollPrevented", 2);
+t = r([
+  m("bp-modal")
+], t);
+export {
+  t as BpModal
+};
+//# sourceMappingURL=modal.js.map