@krollins/blueprint 0.2.2 → 0.3.0

package/dist/index.js

@@ -1,99 +1,56 @@
-import { BpButton as p } from "./components/button.js";
-import { BpInput as t } from "./components/input.js";
-import { BpBadge as x } from "./components/badge.js";
-import { BpIcon as f } from "./components/icon.js";
-import { BpSpinner as i } from "./components/spinner.js";
-import { BpAvatar as l } from "./components/avatar.js";
-import { BpDivider as c } from "./components/divider.js";
-import { BpLink as T } from "./components/link.js";
-import { BpHeading as s } from "./components/heading.js";
-import { BpText as P } from "./components/text.js";
-import { BpCheckbox as C } from "./components/checkbox.js";
-import { BpRadio as v } from "./components/radio.js";
-import { BpSwitch as D } from "./components/switch.js";
-import { BpTooltip as h } from "./components/tooltip.js";
-import { BpProgress as M } from "./components/progress.js";
-import { BpCard as z } from "./components/card.js";
-import { BpAlert as H } from "./components/alert.js";
-import { BpSelect as O } from "./components/select.js";
-import { BpTextarea as U } from "./components/textarea.js";
-import { BpTag as q } from "./components/tag.js";
-import { BpModal as E } from "./components/modal.js";
-import { BpMultiSelect as J } from "./components/multi-select.js";
-import { BpCombobox as Q } from "./components/combobox.js";
-import { BpDatePicker as W } from "./components/date-picker.js";
-import { BpTimePicker as Y } from "./components/time-picker.js";
-import { B as _, t as $ } from "./shared/slider-BNt5TITl.js";
-import { BpNumberInput as ro } from "./components/number-input.js";
-import { BpFileUpload as eo } from "./components/file-upload.js";
-import { BpTabPanel as mo, BpTabs as xo } from "./components/tabs.js";
-import { BpBreadcrumb as fo, BpBreadcrumbItem as ao } from "./components/breadcrumb.js";
-import { BpPagination as no } from "./components/pagination.js";
-import { BpMenu as co } from "./components/menu.js";
-import { BpDropdown as To } from "./components/dropdown.js";
-import { BpSkeleton as so } from "./components/skeleton.js";
-import { BpNotification as Po } from "./components/notification.js";
-import { BpAccordion as Co } from "./components/accordion.js";
-import { BpTable as vo } from "./components/table.js";
-import { BpTree as Do } from "./components/tree.js";
-import { BpDrawer as ho } from "./components/drawer.js";
-import { BpPopover as Mo } from "./components/popover.js";
-import { BpColorPicker as zo } from "./components/color-picker.js";
-import { BpStepper as Ho } from "./components/stepper.js";
-import { BpCodeBlock as Oo, plainTextAdapter as Ro } from "./components/code-block.js";
-import { d as jo } from "./shared/debounce-BckY30Sf.js";
-import { m as yo } from "./shared/memoize-DlOFy-92.js";
-import { b as Go } from "./shared/boolean-converter-XDGfS9LC.js";
-export {
-  Co as BpAccordion,
-  H as BpAlert,
-  l as BpAvatar,
-  x as BpBadge,
-  fo as BpBreadcrumb,
-  ao as BpBreadcrumbItem,
-  p as BpButton,
-  z as BpCard,
-  C as BpCheckbox,
-  Oo as BpCodeBlock,
-  zo as BpColorPicker,
-  Q as BpCombobox,
-  W as BpDatePicker,
-  c as BpDivider,
-  ho as BpDrawer,
-  To as BpDropdown,
-  eo as BpFileUpload,
-  s as BpHeading,
-  f as BpIcon,
-  t as BpInput,
-  T as BpLink,
-  co as BpMenu,
-  E as BpModal,
-  J as BpMultiSelect,
-  Po as BpNotification,
-  ro as BpNumberInput,
-  no as BpPagination,
-  Mo as BpPopover,
-  M as BpProgress,
-  v as BpRadio,
-  O as BpSelect,
-  so as BpSkeleton,
-  _ as BpSlider,
-  i as BpSpinner,
-  Ho as BpStepper,
-  D as BpSwitch,
-  mo as BpTabPanel,
-  vo as BpTable,
-  xo as BpTabs,
-  q as BpTag,
-  P as BpText,
-  U as BpTextarea,
-  Y as BpTimePicker,
-  h as BpTooltip,
-  Do as BpTree,
-  Go as booleanConverter,
-  jo as debounce,
-  yo as memoizeOne,
-  Ro as plainTextAdapter,
-  $ as throttle
-};
-//# sourceMappingURL=index.js.map
+import { t as e } from "./shared/button-BBmxCyz-.js";
+import { t } from "./shared/input-nV6RvTZq.js";
+import { t as n } from "./shared/debounce-BOon6N4f.js";
+import { n as r, r as i, t as a } from "./shared/form-control-CBEBNz12.js";
+import { a as o, i as s, n as c, r as l, t as u } from "./shared/field-message-CPXPLd6z.js";
+import { t as d } from "./shared/badge-Bc661ppN.js";
+import { t as f } from "./shared/icon-SU3ebQcn.js";
+import { t as p } from "./shared/spinner-Bg4fErQA.js";
+import { t as m } from "./shared/avatar-DMc878aU.js";
+import { t as h } from "./shared/divider-Cs0fV9wg.js";
+import { t as g } from "./shared/link-BlDSXjMo.js";
+import { t as _ } from "./shared/heading-9DjHVERY.js";
+import { t as v } from "./shared/text-DpWMArti.js";
+import { t as y } from "./shared/checkbox-DVNGkHj-.js";
+import { t as b } from "./shared/radio-DnuSzORk.js";
+import { t as x } from "./shared/switch-Df-8K3aW.js";
+import { t as S } from "./shared/tooltip-DUXEHFzC.js";
+import { t as C } from "./shared/progress-BPsiJ-Bl.js";
+import { t as w } from "./shared/card-Cm0X0KrG.js";
+import { t as T } from "./shared/alert-CZE6Ht5G.js";
+import { t as E } from "./shared/select-Dz52figi.js";
+import { t as D } from "./shared/textarea-Cba7xnZw.js";
+import { t as O } from "./shared/boolean-converter-saxBDLhA.js";
+import { t as k } from "./shared/tag-CHVTSqVW.js";
+import { t as A } from "./shared/modal-BxL4EDMm.js";
+import { t as j } from "./shared/multi-select-BuU5RFrR.js";
+import { t as M } from "./shared/memoize-CpXRWhgJ.js";
+import { t as N } from "./shared/combobox-fcD23BVq.js";
+import { t as P } from "./shared/date-picker-CBtZk2uN.js";
+import { t as F } from "./shared/time-picker-B_KTAdhx.js";
+import { n as I, t as L } from "./shared/slider-6Q8ChlAS.js";
+import { t as R } from "./shared/number-input-CnHIbGjG.js";
+import { t as z } from "./shared/file-upload-Cn6JAJ2C.js";
+import { n as B, t as V } from "./shared/tabs-CDf79ZXn.js";
+import { n as H, t as U } from "./shared/breadcrumb-BUUBrakn.js";
+import { t as W } from "./shared/pagination-sPm2C9Gl.js";
+import { t as G } from "./shared/menu-Cr_E847O.js";
+import { t as K } from "./shared/dropdown-DXT3zeCU.js";
+import { t as q } from "./shared/skeleton-BY6tANXI.js";
+import { t as J } from "./shared/notification--jDZt64l.js";
+import { t as Y } from "./shared/accordion-DdjSWHBH.js";
+import { t as X } from "./shared/table-D2qrSuqf.js";
+import { t as Z } from "./shared/tree-Dm3oQey1.js";
+import { t as Q } from "./shared/drawer-B_BgT3xH.js";
+import { t as $ } from "./shared/popover-BBmiWhfm.js";
+import { t as ee } from "./shared/color-picker-C3-0c3_0.js";
+import { t as te } from "./shared/stepper-B42LunTc.js";
+import { n as ne, t as re } from "./shared/code-block-9yvHd_mF.js";
+import { t as ie } from "./shared/fieldset-BPRt4nC5.js";
+import { t as ae } from "./shared/radio-group-Cey9Yz5s.js";
+import { t as oe } from "./shared/stack-BZslXtDg.js";
+import { t as se } from "./shared/grid-BDSEzri7.js";
+import { t as ce } from "./shared/container-g5tWN0VG.js";
+import { n as le, t as ue } from "./shared/notification-stack-iVG35x2L.js";
+import { t as de } from "./shared/icon-button-BQJ44FGd.js";
+export { Y as BpAccordion, T as BpAlert, m as BpAvatar, d as BpBadge, U as BpBreadcrumb, H as BpBreadcrumbItem, e as BpButton, w as BpCard, y as BpCheckbox, re as BpCodeBlock, ee as BpColorPicker, N as BpCombobox, ce as BpContainer, P as BpDatePicker, h as BpDivider, Q as BpDrawer, K as BpDropdown, ie as BpFieldset, z as BpFileUpload, se as BpGrid, _ as BpHeading, f as BpIcon, de as BpIconButton, t as BpInput, g as BpLink, G as BpMenu, A as BpModal, j as BpMultiSelect, J as BpNotification, ue as BpNotificationStack, R as BpNumberInput, W as BpPagination, $ as BpPopover, C as BpProgress, b as BpRadio, ae as BpRadioGroup, E as BpSelect, q as BpSkeleton, L as BpSlider, p as BpSpinner, oe as BpStack, te as BpStepper, x as BpSwitch, V as BpTabPanel, X as BpTable, B as BpTabs, k as BpTag, v as BpText, D as BpTextarea, F as BpTimePicker, S as BpTooltip, Z as BpTree, u as ERROR_MESSAGE_ID, a as FormControlMixin, c as HELPER_TEXT_ID, O as booleanConverter, r as customErrorValidity, n as debounce, l as fieldMessageState, s as fieldMessageStyles, M as memoizeOne, le as notify, ne as plainTextAdapter, o as renderFieldMessage, i as syncCustomValidity, I as throttle };

package/dist/shared/accordion-DdjSWHBH.js

@@ -0,0 +1,359 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./icon-SU3ebQcn.js";
+import { chevronDownSvg as n } from "../icons/chevron-down.js";
+import { LitElement as r, css as i, html as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+//#region source/components/accordion/accordion.style.ts
+var l = i`
+  /* ===== 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);
+    background-image: linear-gradient(
+      var(--bp-color-active-overlay),
+      var(--bp-color-active-overlay)
+    );
+    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;
+    }
+  }
+`, u = class extends r {
+	static {
+		this.dependencies = [t];
+	}
+	static {
+		this.styles = [l];
+	}
+	constructor() {
+		super(), this.handleItemToggle = (e) => {
+			let { id: t, expanded: n } = e.detail;
+			n ? (this.expandedItems = this.multiple ? [...this.expandedItems, t] : [t], this.dispatchEvent(new CustomEvent("bp-expand", {
+				detail: { id: t },
+				bubbles: !0,
+				composed: !0
+			}))) : (this.expandedItems = this.expandedItems.filter((e) => e !== t), this.dispatchEvent(new CustomEvent("bp-collapse", {
+				detail: { id: t },
+				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);
+	}
+	updateChildItems() {
+		this.querySelectorAll("bp-accordion-item").forEach((e) => {
+			let t = e;
+			t.expanded = this.expandedItems.includes(t.itemId), this.disabled && (t.disabled = !0);
+		});
+	}
+	initializeExpandedItems() {
+		let e = this.querySelectorAll("bp-accordion-item"), t = [];
+		e.forEach((e) => {
+			let n = e;
+			n.expanded && n.itemId && t.push(n.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(e) {
+		this.expandedItems.includes(e) || (this.expandedItems = this.multiple ? [...this.expandedItems, e] : [e], this.updateChildItems(), this.dispatchEvent(new CustomEvent("bp-expand", {
+			detail: { id: e },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	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
+		})));
+	}
+	expandAll() {
+		if (!this.multiple) return;
+		let e = this.querySelectorAll("bp-accordion-item"), t = [];
+		e.forEach((e) => {
+			let n = e;
+			n.disabled || t.push(n.itemId);
+		}), this.expandedItems = t, this.updateChildItems();
+	}
+	collapseAll() {
+		this.expandedItems = [], this.updateChildItems();
+	}
+	handleSlotChange() {
+		this.expandedItems.length === 0 && this.initializeExpandedItems(), this.updateChildItems();
+	}
+	render() {
+		let e = {
+			accordion: !0,
+			"accordion--disabled": this.disabled
+		};
+		return a`
+      <div class=${c(e)} part="accordion" role="presentation">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+e([s({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "multiple", void 0), e([s({ type: Array })], u.prototype, "expandedItems", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), u = e([o("bp-accordion")], u);
+var d = class extends r {
+	static {
+		this.styles = [l];
+	}
+	constructor() {
+		super(), this.itemId = "", this.header = "", this.expanded = !1, this.disabled = !1;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.itemId ||= `accordion-item-${Math.random().toString(36).slice(2, 9)}`;
+	}
+	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();
+		}));
+	}
+	handleKeyDown(e) {
+		this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleToggle());
+	}
+	render() {
+		let e = {
+			item: !0,
+			"item--expanded": this.expanded,
+			"item--disabled": this.disabled
+		}, t = `${this.itemId}-header`, r = `${this.itemId}-content`;
+		return a`
+      <div class=${c(e)} part="item">
+        <button
+          class="item__header"
+          part="header"
+          id=${t}
+          aria-expanded=${this.expanded}
+          aria-controls=${r}
+          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 .svg=${n} size="md"></bp-icon>
+          </span>
+        </button>
+        <div
+          class="item__content"
+          part="content"
+          id=${r}
+          role="region"
+          aria-labelledby=${t}
+        >
+          <div class="item__body" part="body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+e([s({
+	type: String,
+	attribute: "item-id",
+	reflect: !0
+})], d.prototype, "itemId", void 0), e([s({ type: String })], d.prototype, "header", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "expanded", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), d = e([o("bp-accordion-item")], d);
+//#endregion
+export { d as n, u as t };
+
+//# sourceMappingURL=accordion-DdjSWHBH.js.map

package/dist/shared/accordion-DdjSWHBH.js.map

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