@krollins/blueprint 0.1.12 → 0.1.13

package/dist/components/accordion.js

@@ -0,0 +1,393 @@
+import { css as f, LitElement as c, html as m } from "lit";
+import { property as n, customElement as h } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+const u = f`
+  /* ===== ACCORDION CONTAINER ===== */
+
+  :host {
+    display: block;
+  }
+
+  .accordion {
+    font-family: var(--bp-font-family);
+    display: flex;
+    flex-direction: column;
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius);
+    overflow: hidden;
+  }
+
+  /* Disabled state */
+  .accordion--disabled {
+    opacity: var(--bp-opacity-disabled);
+    pointer-events: none;
+  }
+
+  /* ===== ACCORDION ITEM ===== */
+
+  /* Separators between items */
+  :host(:not(:first-of-type)) {
+    border-top: var(--bp-border-width) solid var(--bp-color-border);
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Header button */
+  .item__header {
+    /* Reset */
+    appearance: none;
+    border: none;
+    background: transparent;
+    margin: 0;
+
+    /* Layout */
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--bp-spacing-4) var(--bp-spacing-4);
+    gap: var(--bp-spacing-3);
+
+    /* Typography */
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    font-weight: var(--bp-font-weight-medium);
+    text-align: left;
+    color: var(--bp-color-text);
+    line-height: var(--bp-line-height-normal);
+
+    /* Interaction */
+    cursor: pointer;
+    transition: background-color var(--bp-transition-fast);
+  }
+
+  .item__header:hover:not(:disabled) {
+    background-color: var(--bp-color-surface);
+  }
+
+  .item__header:focus {
+    outline: none;
+  }
+
+  .item__header:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+  .item__header:active:not(:disabled) {
+    background-color: var(--bp-color-surface-hover);
+    transform: translateY(1px);
+  }
+  .item__header-content {
+    display: flex;
+    align-items: center;
+    gap: var(--bp-spacing-3);
+    flex: 1;
+  }
+
+  /* Expand/collapse icon */
+  .item__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--bp-color-text-muted);
+    transition: transform var(--bp-transition-fast);
+  }
+
+  /* Icon is sized by bp-icon component */
+
+  /* Rotate icon when expanded */
+  .item--expanded .item__icon {
+    transform: rotate(180deg);
+  }
+
+  /* Collapsible content */
+  .item__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    transition: grid-template-rows var(--bp-transition-base);
+    content-visibility: hidden;
+  }
+
+  .item--expanded .item__content {
+    grid-template-rows: 1fr;
+    content-visibility: visible;
+  }
+
+  .item__body {
+    min-height: 0;
+    padding: 0 var(--bp-spacing-4) var(--bp-spacing-4) var(--bp-spacing-4);
+    color: var(--bp-color-text);
+    font-size: var(--bp-font-size-sm);
+    line-height: var(--bp-line-height-relaxed);
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity var(--bp-transition-fast);
+  }
+
+  .item--expanded .item__body {
+    opacity: 1;
+    transition-delay: 100ms;
+  }
+
+  .item:not(.item--expanded) .item__body {
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
+    transition-delay: 0ms;
+  }
+
+  /* Disabled state */
+  .item--disabled .item__header {
+    cursor: not-allowed;
+    opacity: var(--bp-opacity-disabled);
+  }
+
+  .item--disabled .item__icon {
+    opacity: 1;
+  }
+
+  .item--disabled .item__header:hover {
+    background-color: transparent;
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .item__icon {
+      transition: none;
+    }
+
+    .item__content {
+      transition: none;
+    }
+
+    .item__body {
+      transition: none;
+      opacity: 1;
+    }
+
+    .item__header:active:not(:disabled) {
+      transform: none;
+    }
+  }
+`;
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (e, t, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? y(t, i) : t, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (s = (a ? p(t, i, s) : p(s)) || s);
+  return a && s && v(t, i, s), s;
+};
+let r = class extends c {
+  constructor() {
+    super(), this.handleItemToggle = (e) => {
+      const t = e, { id: i, expanded: a } = t.detail;
+      a ? (this.multiple ? this.expandedItems = [...this.expandedItems, i] : this.expandedItems = [i], this.dispatchEvent(
+        new CustomEvent("bp-expand", {
+          detail: { id: i },
+          bubbles: !0,
+          composed: !0
+        })
+      )) : (this.expandedItems = this.expandedItems.filter((s) => s !== i), this.dispatchEvent(
+        new CustomEvent("bp-collapse", {
+          detail: { id: i },
+          bubbles: !0,
+          composed: !0
+        })
+      )), this.updateChildItems();
+    }, this.multiple = !1, this.expandedItems = [], this.disabled = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("bp-item-toggle", this.handleItemToggle);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("bp-item-toggle", this.handleItemToggle);
+  }
+  /**
+   * Synchronizes child accordion items with the expandedItems state.
+   * Also applies disabled state to all items when accordion is disabled.
+   */
+  updateChildItems() {
+    this.querySelectorAll("bp-accordion-item").forEach((t) => {
+      const i = t, a = this.expandedItems.includes(i.itemId);
+      i.expanded = a, this.disabled && (i.disabled = !0);
+    });
+  }
+  /**
+   * Initializes expandedItems array from children with expanded attribute.
+   * Called on first render to respect items marked as expanded in HTML.
+   */
+  initializeExpandedItems() {
+    const e = this.querySelectorAll("bp-accordion-item"), t = [];
+    e.forEach((i) => {
+      const a = i;
+      a.expanded && a.itemId && t.push(a.itemId);
+    }), t.length > 0 && (this.expandedItems = this.multiple ? t : [t[0]]);
+  }
+  firstUpdated() {
+    this.initializeExpandedItems(), this.updateChildItems();
+  }
+  updated(e) {
+    (e.has("expandedItems") || e.has("disabled")) && this.updateChildItems();
+  }
+  /** Expand an item by ID */
+  expand(e) {
+    this.expandedItems.includes(e) || (this.multiple ? this.expandedItems = [...this.expandedItems, e] : this.expandedItems = [e], this.updateChildItems(), this.dispatchEvent(
+      new CustomEvent("bp-expand", {
+        detail: { id: e },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  /** Collapse an item by ID */
+  collapse(e) {
+    this.expandedItems.includes(e) && (this.expandedItems = this.expandedItems.filter((t) => t !== e), this.updateChildItems(), this.dispatchEvent(
+      new CustomEvent("bp-collapse", {
+        detail: { id: e },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  /** Expand all items (only works in multiple mode) */
+  expandAll() {
+    if (!this.multiple) return;
+    const e = this.querySelectorAll("bp-accordion-item"), t = [];
+    e.forEach((i) => {
+      const a = i;
+      a.disabled || t.push(a.itemId);
+    }), this.expandedItems = t, this.updateChildItems();
+  }
+  /** Collapse all items */
+  collapseAll() {
+    this.expandedItems = [], this.updateChildItems();
+  }
+  /**
+   * Handles slot changes - when children are added or removed.
+   * Initializes expanded state from new children.
+   */
+  handleSlotChange() {
+    this.expandedItems.length === 0 && this.initializeExpandedItems(), this.updateChildItems();
+  }
+  render() {
+    const e = {
+      accordion: !0,
+      "accordion--disabled": this.disabled
+    };
+    return m`
+      <div class=${b(e)} part="accordion" role="presentation">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+r.styles = [u];
+d([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "multiple", 2);
+d([
+  n({ type: Array })
+], r.prototype, "expandedItems", 2);
+d([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+r = d([
+  h("bp-accordion")
+], r);
+let o = class extends c {
+  constructor() {
+    super(), this.itemId = "", this.header = "", this.expanded = !1, this.disabled = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.itemId || (this.itemId = `accordion-item-${Math.random().toString(36).slice(2, 9)}`);
+  }
+  /**
+   * Handles toggle action and dispatches bp-item-toggle event.
+   * Also manages focus on the header button after expansion.
+   */
+  handleToggle() {
+    this.disabled || (this.dispatchEvent(
+      new CustomEvent("bp-item-toggle", {
+        detail: { id: this.itemId, expanded: !this.expanded },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector(
+        ".item__header"
+      )?.focus();
+    }));
+  }
+  /**
+   * Handles keyboard navigation.
+   * Triggers toggle on Enter or Space key press.
+   */
+  handleKeyDown(e) {
+    this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleToggle());
+  }
+  render() {
+    const e = {
+      item: !0,
+      "item--expanded": this.expanded,
+      "item--disabled": this.disabled
+    }, t = `${this.itemId}-header`, i = `${this.itemId}-content`;
+    return m`
+      <div class=${b(e)} part="item">
+        <button
+          class="item__header"
+          part="header"
+          id=${t}
+          aria-expanded=${this.expanded}
+          aria-controls=${i}
+          aria-disabled=${this.disabled}
+          ?disabled=${this.disabled}
+          @click=${this.handleToggle}
+          @keydown=${this.handleKeyDown}
+        >
+          <span class="item__header-content">
+            <slot name="icon"></slot>
+            <slot name="header">${this.header}</slot>
+          </span>
+          <span class="item__icon" part="icon" aria-hidden="true">
+            <bp-icon name="chevron-down" size="md"></bp-icon>
+          </span>
+        </button>
+        <div
+          class="item__content"
+          part="content"
+          id=${i}
+          role="region"
+          aria-labelledby=${t}
+        >
+          <div class="item__body" part="body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = [u];
+d([
+  n({ type: String, attribute: "item-id", reflect: !0 })
+], o.prototype, "itemId", 2);
+d([
+  n({ type: String })
+], o.prototype, "header", 2);
+d([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "expanded", 2);
+d([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+o = d([
+  h("bp-accordion-item")
+], o);
+export {
+  r as BpAccordion,
+  o as BpAccordionItem
+};
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":["../../source/components/accordion/accordion.style.ts","../../source/components/accordion/accordion.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const accordionStyles = css`\r\n  /* ===== ACCORDION CONTAINER ===== */\r\n\r\n  :host {\r\n    display: block;\r\n  }\r\n\r\n  .accordion {\r\n    font-family: var(--bp-font-family);\r\n    display: flex;\r\n    flex-direction: column;\r\n    border: var(--bp-border-width) solid var(--bp-color-border);\r\n    border-radius: var(--bp-border-radius);\r\n    overflow: hidden;\r\n  }\r\n\r\n  /* Disabled state */\r\n  .accordion--disabled {\r\n    opacity: var(--bp-opacity-disabled);\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ===== ACCORDION ITEM ===== */\r\n\r\n  /* Separators between items */\r\n  :host(:not(:first-of-type)) {\r\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\r\n  }\r\n\r\n  .item {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  /* Header button */\r\n  .item__header {\r\n    /* Reset */\r\n    appearance: none;\r\n    border: none;\r\n    background: transparent;\r\n    margin: 0;\r\n\r\n    /* Layout */\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    width: 100%;\r\n    padding: var(--bp-spacing-4) var(--bp-spacing-4);\r\n    gap: var(--bp-spacing-3);\r\n\r\n    /* Typography */\r\n    font-family: var(--bp-font-family);\r\n    font-size: var(--bp-font-size-base);\r\n    font-weight: var(--bp-font-weight-medium);\r\n    text-align: left;\r\n    color: var(--bp-color-text);\r\n    line-height: var(--bp-line-height-normal);\r\n\r\n    /* Interaction */\r\n    cursor: pointer;\r\n    transition: background-color var(--bp-transition-fast);\r\n  }\r\n\r\n  .item__header:hover:not(:disabled) {\r\n    background-color: var(--bp-color-surface);\r\n  }\r\n\r\n  .item__header:focus {\r\n    outline: none;\r\n  }\r\n\r\n  .item__header: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  }\r\n  .item__header:active:not(:disabled) {\r\n    background-color: var(--bp-color-surface-hover);\r\n    transform: translateY(1px);\r\n  }\r\n  .item__header-content {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--bp-spacing-3);\r\n    flex: 1;\r\n  }\r\n\r\n  /* Expand/collapse icon */\r\n  .item__icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    color: var(--bp-color-text-muted);\r\n    transition: transform var(--bp-transition-fast);\r\n  }\r\n\r\n  /* Icon is sized by bp-icon component */\r\n\r\n  /* Rotate icon when expanded */\r\n  .item--expanded .item__icon {\r\n    transform: rotate(180deg);\r\n  }\r\n\r\n  /* Collapsible content */\r\n  .item__content {\r\n    display: grid;\r\n    grid-template-rows: 0fr;\r\n    overflow: hidden;\r\n    transition: grid-template-rows var(--bp-transition-base);\r\n    content-visibility: hidden;\r\n  }\r\n\r\n  .item--expanded .item__content {\r\n    grid-template-rows: 1fr;\r\n    content-visibility: visible;\r\n  }\r\n\r\n  .item__body {\r\n    min-height: 0;\r\n    padding: 0 var(--bp-spacing-4) var(--bp-spacing-4) var(--bp-spacing-4);\r\n    color: var(--bp-color-text);\r\n    font-size: var(--bp-font-size-sm);\r\n    line-height: var(--bp-line-height-relaxed);\r\n    overflow: hidden;\r\n    opacity: 0;\r\n    transition: opacity var(--bp-transition-fast);\r\n  }\r\n\r\n  .item--expanded .item__body {\r\n    opacity: 1;\r\n    transition-delay: 100ms;\r\n  }\r\n\r\n  .item:not(.item--expanded) .item__body {\r\n    padding-top: 0;\r\n    padding-bottom: 0;\r\n    opacity: 0;\r\n    transition-delay: 0ms;\r\n  }\r\n\r\n  /* Disabled state */\r\n  .item--disabled .item__header {\r\n    cursor: not-allowed;\r\n    opacity: var(--bp-opacity-disabled);\r\n  }\r\n\r\n  .item--disabled .item__icon {\r\n    opacity: 1;\r\n  }\r\n\r\n  .item--disabled .item__header:hover {\r\n    background-color: transparent;\r\n  }\r\n\r\n  /* Reduced motion */\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .item__icon {\r\n      transition: none;\r\n    }\r\n\r\n    .item__content {\r\n      transition: none;\r\n    }\r\n\r\n    .item__body {\r\n      transition: none;\r\n      opacity: 1;\r\n    }\r\n\r\n    .item__header:active:not(:disabled) {\r\n      transform: none;\r\n    }\r\n  }\r\n`;\r\n","import { LitElement, html } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\nimport { accordionStyles } from './accordion.style.js';\r\nimport '../icon/icon.js';\r\n\r\n/**\r\n * A container component that groups accordion items.\r\n * Controls single or multiple expansion behavior.\r\n *\r\n * @element bp-accordion\r\n *\r\n * @property {boolean} multiple - Whether multiple items can be expanded simultaneously\r\n * @property {string[]} expandedItems - Array of expanded item IDs\r\n * @property {boolean} disabled - Whether all items are disabled\r\n *\r\n * @fires bp-expand - Fired when an item is expanded\r\n * @fires bp-collapse - Fired when an item is collapsed\r\n *\r\n * @slot - Default slot for bp-accordion-item elements\r\n *\r\n * @csspart accordion - The main accordion container\r\n */\r\n@customElement('bp-accordion')\r\nexport class BpAccordion extends LitElement {\r\n  /** Whether multiple items can be expanded simultaneously */\r\n  @property({ type: Boolean, reflect: true }) declare multiple: boolean;\r\n\r\n  /** Array of expanded item IDs */\r\n  @property({ type: Array }) declare expandedItems: string[];\r\n\r\n  /** Whether all items are disabled */\r\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\r\n\r\n  static styles = [accordionStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.multiple = false;\r\n    this.expandedItems = [];\r\n    this.disabled = false;\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener('bp-item-toggle', this.handleItemToggle);\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener('bp-item-toggle', this.handleItemToggle);\r\n  }\r\n\r\n  /**\r\n   * Handles item toggle events from child accordion items.\r\n   * Updates expandedItems array based on multiple mode and dispatches expand/collapse events.\r\n   */\r\n  private handleItemToggle = (event: Event) => {\r\n    const customEvent = event as CustomEvent<{ id: string; expanded: boolean }>;\r\n    const { id, expanded } = customEvent.detail;\r\n\r\n    if (expanded) {\r\n      if (this.multiple) {\r\n        this.expandedItems = [...this.expandedItems, id];\r\n      } else {\r\n        // Close other items when not in multiple mode\r\n        this.expandedItems = [id];\r\n      }\r\n      this.dispatchEvent(\r\n        new CustomEvent('bp-expand', {\r\n          detail: { id },\r\n          bubbles: true,\r\n          composed: true,\r\n        })\r\n      );\r\n    } else {\r\n      this.expandedItems = this.expandedItems.filter((itemId) => itemId !== id);\r\n      this.dispatchEvent(\r\n        new CustomEvent('bp-collapse', {\r\n          detail: { id },\r\n          bubbles: true,\r\n          composed: true,\r\n        })\r\n      );\r\n    }\r\n\r\n    this.updateChildItems();\r\n  };\r\n\r\n  /**\r\n   * Synchronizes child accordion items with the expandedItems state.\r\n   * Also applies disabled state to all items when accordion is disabled.\r\n   */\r\n  private updateChildItems() {\r\n    const items = this.querySelectorAll('bp-accordion-item');\r\n    items.forEach((item) => {\r\n      const accordionItem = item as BpAccordionItem;\r\n      const isExpanded = this.expandedItems.includes(accordionItem.itemId);\r\n      accordionItem.expanded = isExpanded;\r\n      if (this.disabled) {\r\n        accordionItem.disabled = true;\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Initializes expandedItems array from children with expanded attribute.\r\n   * Called on first render to respect items marked as expanded in HTML.\r\n   */\r\n  private initializeExpandedItems() {\r\n    const items = this.querySelectorAll('bp-accordion-item');\r\n    const expandedIds: string[] = [];\r\n\r\n    items.forEach((item) => {\r\n      const accordionItem = item as BpAccordionItem;\r\n      if (accordionItem.expanded && accordionItem.itemId) {\r\n        expandedIds.push(accordionItem.itemId);\r\n      }\r\n    });\r\n\r\n    if (expandedIds.length > 0) {\r\n      // In single mode, only keep the first expanded item\r\n      this.expandedItems = this.multiple ? expandedIds : [expandedIds[0]];\r\n    }\r\n  }\r\n\r\n  firstUpdated(): void {\r\n    // Initialize expanded items from children on first render\r\n    this.initializeExpandedItems();\r\n    this.updateChildItems();\r\n  }\r\n\r\n  updated(changedProperties: Map<string, unknown>): void {\r\n    if (\r\n      changedProperties.has('expandedItems') ||\r\n      changedProperties.has('disabled')\r\n    ) {\r\n      this.updateChildItems();\r\n    }\r\n  }\r\n\r\n  /** Expand an item by ID */\r\n  expand(id: string) {\r\n    if (!this.expandedItems.includes(id)) {\r\n      if (this.multiple) {\r\n        this.expandedItems = [...this.expandedItems, id];\r\n      } else {\r\n        this.expandedItems = [id];\r\n      }\r\n      this.updateChildItems();\r\n      this.dispatchEvent(\r\n        new CustomEvent('bp-expand', {\r\n          detail: { id },\r\n          bubbles: true,\r\n          composed: true,\r\n        })\r\n      );\r\n    }\r\n  }\r\n\r\n  /** Collapse an item by ID */\r\n  collapse(id: string) {\r\n    if (this.expandedItems.includes(id)) {\r\n      this.expandedItems = this.expandedItems.filter((itemId) => itemId !== id);\r\n      this.updateChildItems();\r\n      this.dispatchEvent(\r\n        new CustomEvent('bp-collapse', {\r\n          detail: { id },\r\n          bubbles: true,\r\n          composed: true,\r\n        })\r\n      );\r\n    }\r\n  }\r\n\r\n  /** Expand all items (only works in multiple mode) */\r\n  expandAll() {\r\n    if (!this.multiple) return;\r\n    const items = this.querySelectorAll('bp-accordion-item');\r\n    const ids: string[] = [];\r\n    items.forEach((item) => {\r\n      const accordionItem = item as BpAccordionItem;\r\n      if (!accordionItem.disabled) {\r\n        ids.push(accordionItem.itemId);\r\n      }\r\n    });\r\n    this.expandedItems = ids;\r\n    this.updateChildItems();\r\n  }\r\n\r\n  /** Collapse all items */\r\n  collapseAll() {\r\n    this.expandedItems = [];\r\n    this.updateChildItems();\r\n  }\r\n\r\n  /**\r\n   * Handles slot changes - when children are added or removed.\r\n   * Initializes expanded state from new children.\r\n   */\r\n  private handleSlotChange() {\r\n    // Only initialize from children if expandedItems is empty\r\n    // Otherwise respect the parent's state\r\n    if (this.expandedItems.length === 0) {\r\n      this.initializeExpandedItems();\r\n    }\r\n    this.updateChildItems();\r\n  }\r\n\r\n  render() {\r\n    const classes = {\r\n      accordion: true,\r\n      'accordion--disabled': this.disabled,\r\n    };\r\n\r\n    return html`\r\n      <div class=${classMap(classes)} part=\"accordion\" role=\"presentation\">\r\n        <slot @slotchange=${this.handleSlotChange}></slot>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n\r\n/**\r\n * An individual accordion item with header and collapsible content.\r\n *\r\n * @element bp-accordion-item\r\n *\r\n * @property {string} itemId - Unique identifier for this item\r\n * @property {string} header - Header text displayed in the trigger button\r\n * @property {boolean} expanded - Whether the content is expanded\r\n * @property {boolean} disabled - Whether this item is disabled\r\n *\r\n * @slot - Default slot for the collapsible content\r\n * @slot header - Custom header content (overrides header property)\r\n * @slot icon - Custom icon for the header\r\n *\r\n * @csspart item - The accordion item container\r\n * @csspart header - The header/trigger button\r\n * @csspart icon - The expand/collapse icon\r\n * @csspart content - The collapsible content wrapper\r\n * @csspart body - The inner content container\r\n */\r\n@customElement('bp-accordion-item')\r\nexport class BpAccordionItem extends LitElement {\r\n  /** Unique identifier for this item */\r\n  @property({ type: String, attribute: 'item-id', reflect: true })\r\n  declare itemId: string;\r\n\r\n  /** Header text displayed in the trigger button */\r\n  @property({ type: String }) declare header: string;\r\n\r\n  /** Whether the content is expanded */\r\n  @property({ type: Boolean, reflect: true }) declare expanded: boolean;\r\n\r\n  /** Whether this item is disabled */\r\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\r\n\r\n  static styles = [accordionStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.itemId = '';\r\n    this.header = '';\r\n    this.expanded = false;\r\n    this.disabled = false;\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    // Generate ID if not provided\r\n    if (!this.itemId) {\r\n      this.itemId = `accordion-item-${Math.random().toString(36).slice(2, 9)}`;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handles toggle action and dispatches bp-item-toggle event.\r\n   * Also manages focus on the header button after expansion.\r\n   */\r\n  private handleToggle() {\r\n    if (this.disabled) return;\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent('bp-item-toggle', {\r\n        detail: { id: this.itemId, expanded: !this.expanded },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n\r\n    // Focus management: focus header after toggle completes\r\n    this.updateComplete.then(() => {\r\n      const header = this.shadowRoot?.querySelector(\r\n        '.item__header'\r\n      ) as HTMLElement;\r\n      header?.focus();\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Handles keyboard navigation.\r\n   * Triggers toggle on Enter or Space key press.\r\n   */\r\n  private handleKeyDown(event: KeyboardEvent) {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n      this.handleToggle();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const itemClasses = {\r\n      item: true,\r\n      'item--expanded': this.expanded,\r\n      'item--disabled': this.disabled,\r\n    };\r\n\r\n    const headerId = `${this.itemId}-header`;\r\n    const contentId = `${this.itemId}-content`;\r\n\r\n    return html`\r\n      <div class=${classMap(itemClasses)} part=\"item\">\r\n        <button\r\n          class=\"item__header\"\r\n          part=\"header\"\r\n          id=${headerId}\r\n          aria-expanded=${this.expanded}\r\n          aria-controls=${contentId}\r\n          aria-disabled=${this.disabled}\r\n          ?disabled=${this.disabled}\r\n          @click=${this.handleToggle}\r\n          @keydown=${this.handleKeyDown}\r\n        >\r\n          <span class=\"item__header-content\">\r\n            <slot name=\"icon\"></slot>\r\n            <slot name=\"header\">${this.header}</slot>\r\n          </span>\r\n          <span class=\"item__icon\" part=\"icon\" aria-hidden=\"true\">\r\n            <bp-icon name=\"chevron-down\" size=\"md\"></bp-icon>\r\n          </span>\r\n        </button>\r\n        <div\r\n          class=\"item__content\"\r\n          part=\"content\"\r\n          id=${contentId}\r\n          role=\"region\"\r\n          aria-labelledby=${headerId}\r\n        >\r\n          <div class=\"item__body\" part=\"body\">\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'bp-accordion': BpAccordion;\r\n    'bp-accordion-item': BpAccordionItem;\r\n  }\r\n}\r\n"],"names":["accordionStyles","css","BpAccordion","LitElement","event","customEvent","id","expanded","itemId","item","accordionItem","isExpanded","items","expandedIds","changedProperties","ids","classes","html","classMap","__decorateClass","property","customElement","BpAccordionItem","itemClasses","headerId","contentId"],"mappings":"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"}

package/dist/components/alert.js

@@ -0,0 +1,213 @@
+import { css as b, LitElement as d, html as c } from "lit";
+import { property as p, customElement as v } from "lit/decorators.js";
+const f = b`
+  /* Base styles */
+  :host {
+    display: block;
+    animation: slideIn var(--bp-transition-base) ease-out;
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--bp-spacing-md)));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .alert {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--bp-spacing-md);
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-relaxed);
+    border-radius: var(--bp-border-radius-md);
+    border-width: var(--bp-border-width);
+    border-style: solid;
+  }
+
+  @media (min-width: var(--bp-breakpoint-sm)) {
+    .alert {
+      padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    }
+  }
+
+  .alert-content {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--bp-spacing-md);
+    flex: 1;
+  }
+
+  .alert-icon {
+    display: flex;
+    align-items: flex-start;
+    padding-top: var(--bp-spacing-0-5);
+    flex-shrink: 0;
+  }
+
+  .alert-icon svg {
+    width: var(--bp-spacing-5);
+    height: var(--bp-spacing-5);
+    flex-shrink: 0;
+  }
+
+  .alert-message {
+    flex: 1;
+  }
+
+  ::slotted([slot='title']) {
+    display: block;
+    font-weight: var(--bp-font-weight-semibold);
+    line-height: var(--bp-line-height-tight);
+    margin-bottom: var(--bp-spacing-xs);
+  }
+
+  .alert-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: var(--bp-spacing-2xs);
+    border-radius: var(--bp-border-radius-sm);
+    color: inherit;
+    opacity: 0.8;
+    transition: all var(--bp-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .alert-close:hover {
+    opacity: 1;
+    background-color: currentColor;
+    opacity: 0.1;
+  }
+
+  .alert-close:active {
+    opacity: 0.15;
+  }
+
+  .alert-close:focus-visible {
+    outline: var(--bp-focus-ring);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* Variants */
+  .alert--info {
+    background-color: var(--bp-color-surface-elevated);
+    border-color: var(--bp-color-info);
+    border-left-width: var(--bp-spacing-1);
+    color: var(--bp-color-text);
+  }
+
+  .alert--success {
+    background-color: var(--bp-color-surface-elevated);
+    border-color: var(--bp-color-success);
+    border-left-width: var(--bp-spacing-1);
+    color: var(--bp-color-text);
+  }
+
+  .alert--warning {
+    background-color: var(--bp-color-surface-elevated);
+    border-color: var(--bp-color-warning);
+    border-left-width: var(--bp-spacing-1);
+    color: var(--bp-color-text);
+    box-shadow: var(--bp-shadow-sm);
+  }
+
+  .alert--error {
+    background-color: var(--bp-color-surface-elevated);
+    border-color: var(--bp-color-error);
+    border-left-width: var(--bp-spacing-1);
+    color: var(--bp-color-text);
+    box-shadow: var(--bp-shadow-sm);
+  }
+`;
+var g = Object.defineProperty, h = Object.getOwnPropertyDescriptor, s = (e, a, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? h(a, i) : a, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (r = (o ? n(a, i, r) : n(r)) || r);
+  return o && r && g(a, i, r), r;
+};
+let t = class extends d {
+  constructor() {
+    super(), this.variant = "info", this.dismissible = !1, this.showIcon = !1;
+  }
+  handleClose() {
+    const e = new CustomEvent("bp-close", {
+      detail: {
+        variant: this.variant,
+        timestamp: Date.now()
+      },
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    });
+    this.dispatchEvent(e), e.defaultPrevented || this.remove();
+  }
+  getIconName() {
+    return {
+      info: "info-circle",
+      success: "check-circle",
+      warning: "warning-circle",
+      error: "cross-circle"
+    }[this.variant];
+  }
+  render() {
+    return c`
+      <div
+        class="alert alert--${this.variant}"
+        part="alert"
+        role="alert"
+        aria-live="polite"
+      >
+        <div class="alert-content">
+          ${this.showIcon ? c`
+                <div class="alert-icon" part="icon">
+                  <slot name="icon">
+                    <bp-icon name=${this.getIconName()}></bp-icon>
+                  </slot>
+                </div>
+              ` : null}
+          <div class="alert-message" part="message">
+            <slot name="title"></slot>
+            <slot></slot>
+          </div>
+        </div>
+        ${this.dismissible ? c`
+              <button
+                class="alert-close"
+                part="close-button"
+                @click=${this.handleClose}
+                aria-label="Close alert"
+              >
+                <bp-icon name="cross"></bp-icon>
+              </button>
+            ` : null}
+      </div>
+    `;
+  }
+};
+t.styles = [f];
+s([
+  p({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+s([
+  p({ type: Boolean, reflect: !0 })
+], t.prototype, "dismissible", 2);
+s([
+  p({ type: Boolean, reflect: !0 })
+], t.prototype, "showIcon", 2);
+t = s([
+  v("bp-alert")
+], t);
+export {
+  t as BpAlert
+};
+//# sourceMappingURL=alert.js.map

package/dist/components/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sources":["../../source/components/alert/alert.style.ts","../../source/components/alert/alert.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const alertStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n    animation: slideIn var(--bp-transition-base) ease-out;\n  }\n\n  @keyframes slideIn {\n    from {\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--bp-spacing-md)));\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .alert {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bp-spacing-md);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-relaxed);\n    border-radius: var(--bp-border-radius-md);\n    border-width: var(--bp-border-width);\n    border-style: solid;\n  }\n\n  @media (min-width: var(--bp-breakpoint-sm)) {\n    .alert {\n      padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    }\n  }\n\n  .alert-content {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bp-spacing-md);\n    flex: 1;\n  }\n\n  .alert-icon {\n    display: flex;\n    align-items: flex-start;\n    padding-top: var(--bp-spacing-0-5);\n    flex-shrink: 0;\n  }\n\n  .alert-icon svg {\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n    flex-shrink: 0;\n  }\n\n  .alert-message {\n    flex: 1;\n  }\n\n  ::slotted([slot='title']) {\n    display: block;\n    font-weight: var(--bp-font-weight-semibold);\n    line-height: var(--bp-line-height-tight);\n    margin-bottom: var(--bp-spacing-xs);\n  }\n\n  .alert-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: var(--bp-spacing-2xs);\n    border-radius: var(--bp-border-radius-sm);\n    color: inherit;\n    opacity: 0.8;\n    transition: all var(--bp-transition-fast);\n    flex-shrink: 0;\n  }\n\n  .alert-close:hover {\n    opacity: 1;\n    background-color: currentColor;\n    opacity: 0.1;\n  }\n\n  .alert-close:active {\n    opacity: 0.15;\n  }\n\n  .alert-close:focus-visible {\n    outline: var(--bp-focus-ring);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* Variants */\n  .alert--info {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-info);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n  }\n\n  .alert--success {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-success);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n  }\n\n  .alert--warning {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-warning);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n    box-shadow: var(--bp-shadow-sm);\n  }\n\n  .alert--error {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-error);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n    box-shadow: var(--bp-shadow-sm);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { alertStyles } from './alert.style.js';\nimport { type IconName } from '../icon/icons/registry.generated.js';\nimport '../icon/icon.js';\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error';\ninterface IconMap {\n  info: IconName;\n  success: IconName;\n  warning: IconName;\n  error: IconName;\n}\n\n/**\n * An alert component for displaying notification messages to users.\n *\n * @slot - Message content\n * @slot title - Optional title/heading for the alert\n * @slot icon - Optional custom icon (replaces default icon)\n *\n * @fires bp-close - Fired when the alert is dismissed (cancelable)\n */\n@customElement('bp-alert')\nexport class BpAlert extends LitElement {\n  /**\n   * Visual variant indicating the type of alert\n   */\n  @property({ type: String, reflect: true }) declare variant: AlertVariant;\n\n  /**\n   * Whether the alert can be dismissed by the user\n   */\n  @property({ type: Boolean, reflect: true }) declare dismissible: boolean;\n\n  /**\n   * Whether to show a default icon for the variant\n   */\n  @property({ type: Boolean, reflect: true }) declare showIcon: boolean;\n\n  static styles = [alertStyles];\n\n  constructor() {\n    super();\n    this.variant = 'info';\n    this.dismissible = false;\n    this.showIcon = false;\n  }\n\n  private handleClose() {\n    const event = new CustomEvent('bp-close', {\n      detail: {\n        variant: this.variant,\n        timestamp: Date.now(),\n      },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n\n    this.dispatchEvent(event);\n\n    // Only remove if event wasn't prevented\n    if (!event.defaultPrevented) {\n      this.remove();\n    }\n  }\n\n  private getIconName(): IconName {\n    const iconMap: IconMap = {\n      info: 'info-circle',\n      success: 'check-circle',\n      warning: 'warning-circle',\n      error: 'cross-circle',\n    };\n    return iconMap[this.variant];\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"alert alert--${this.variant}\"\n        part=\"alert\"\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        <div class=\"alert-content\">\n          ${this.showIcon\n            ? html`\n                <div class=\"alert-icon\" part=\"icon\">\n                  <slot name=\"icon\">\n                    <bp-icon name=${this.getIconName()}></bp-icon>\n                  </slot>\n                </div>\n              `\n            : null}\n          <div class=\"alert-message\" part=\"message\">\n            <slot name=\"title\"></slot>\n            <slot></slot>\n          </div>\n        </div>\n        ${this.dismissible\n          ? html`\n              <button\n                class=\"alert-close\"\n                part=\"close-button\"\n                @click=${this.handleClose}\n                aria-label=\"Close alert\"\n              >\n                <bp-icon name=\"cross\"></bp-icon>\n              </button>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-alert': BpAlert;\n  }\n}\n"],"names":["alertStyles","css","BpAlert","LitElement","event","html","__decorateClass","property","customElement"],"mappings":";;AAEO,MAAMA,IAAcC;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;;;;;;ACsBpB,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAkBtC,cAAc;AACZ,UAAA,GACA,KAAK,UAAU,QACf,KAAK,cAAc,IACnB,KAAK,WAAW;AAAA,EAClB;AAAA,EAEQ,cAAc;AACpB,UAAMC,IAAQ,IAAI,YAAY,YAAY;AAAA,MACxC,QAAQ;AAAA,QACN,SAAS,KAAK;AAAA,QACd,WAAW,KAAK,IAAA;AAAA,MAAI;AAAA,MAEtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IAAA,CACb;AAED,SAAK,cAAcA,CAAK,GAGnBA,EAAM,oBACT,KAAK,OAAA;AAAA,EAET;AAAA,EAEQ,cAAwB;AAO9B,WANyB;AAAA,MACvB,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,IAAA,EAEM,KAAK,OAAO;AAAA,EAC7B;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA,8BAEmB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM9B,KAAK,WACHA;AAAA;AAAA;AAAA,oCAGsB,KAAK,aAAa;AAAA;AAAA;AAAA,kBAIxC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMR,KAAK,cACHA;AAAA;AAAA;AAAA;AAAA,yBAIa,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,gBAM7B,IAAI;AAAA;AAAA;AAAA,EAGd;AACF;AA5FaH,EAgBJ,SAAS,CAACF,CAAW;AAZuBM,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BL,EAIwC,WAAA,WAAA,CAAA;AAKCI,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAT/BL,EASyC,WAAA,eAAA,CAAA;AAKAI,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAd/BL,EAcyC,WAAA,YAAA,CAAA;AAdzCA,IAANI,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZN,CAAA;"}