npm - @krollins/blueprint - Versions diffs - 0.2.2 → 0.2.3 - Mend

@krollins/blueprint 0.2.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/dist/components/accordion/accordion.d.ts +6 -1
package/dist/components/accordion/accordion.d.ts.map +1 -1
package/dist/components/accordion.js +30 -28
package/dist/components/accordion.js.map +1 -1
package/dist/components/alert/alert.d.ts +6 -1
package/dist/components/alert/alert.d.ts.map +1 -1
package/dist/components/alert.js +9 -7
package/dist/components/alert.js.map +1 -1
package/dist/components/avatar/avatar.d.ts +6 -1
package/dist/components/avatar/avatar.d.ts.map +1 -1
package/dist/components/avatar.js +9 -7
package/dist/components/avatar.js.map +1 -1
package/dist/components/breadcrumb/breadcrumb.d.ts +6 -1
package/dist/components/breadcrumb/breadcrumb.d.ts.map +1 -1
package/dist/components/breadcrumb.js +25 -23
package/dist/components/breadcrumb.js.map +1 -1
package/dist/components/drawer/drawer.d.ts +6 -1
package/dist/components/drawer/drawer.d.ts.map +1 -1
package/dist/components/drawer.js +7 -5
package/dist/components/drawer.js.map +1 -1
package/dist/components/notification/notification.d.ts +6 -1
package/dist/components/notification/notification.d.ts.map +1 -1
package/dist/components/notification.js +7 -5
package/dist/components/notification.js.map +1 -1
package/dist/components/popover/popover.d.ts +2 -1
package/dist/components/popover/popover.d.ts.map +1 -1
package/dist/components/popover.js +8 -6
package/dist/components/popover.js.map +1 -1
package/dist/components/table/table.d.ts +6 -1
package/dist/components/table/table.d.ts.map +1 -1
package/dist/components/table.js +7 -5
package/dist/components/table.js.map +1 -1
package/dist/components/tabs/tabs.d.ts +6 -1
package/dist/components/tabs/tabs.d.ts.map +1 -1
package/dist/components/tabs.js +7 -5
package/dist/components/tabs.js.map +1 -1
package/dist/components/tag/tag.d.ts +6 -1
package/dist/components/tag/tag.d.ts.map +1 -1
package/dist/components/tag.js +8 -6
package/dist/components/tag.js.map +1 -1
package/dist/components/tree/tree.d.ts +8 -2
package/dist/components/tree/tree.d.ts.map +1 -1
package/dist/components/tree.js +7 -5
package/dist/components/tree.js.map +1 -1
package/package.json +2 -2

package/dist/components/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","sources":["../../source/components/tabs/tabs.style.ts","../../source/components/tabs/tabs.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tabsStyles = css`\n /* Base styles /\n :host {\n display: block;\n }\n\n .tabs {\n font-family: var(--bp-font-family);\n display: flex;\n flex-direction: column;\n }\n\n / Tablist - horizontal by default /\n .tablist {\n display: flex;\n flex-wrap: nowrap;\n gap: var(--bp-spacing-xs);\n border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n padding-bottom: var(--bp-spacing-xs);\n }\n\n / Tab button base /\n .tab {\n / Reset /\n appearance: none;\n border: none;\n background: transparent;\n margin: 0;\n\n / Layout /\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bp-spacing-xs);\n cursor: pointer;\n flex-shrink: 0;\n\n / Typography /\n font-family: var(--bp-font-family);\n font-weight: var(--bp-font-weight-medium);\n white-space: nowrap;\n\n / Visual /\n color: var(--bp-color-text-muted);\n border-radius: var(--bp-border-radius);\n transition: all var(--bp-transition-fast);\n\n / Focus /\n outline: none;\n }\n\n .tab__icon {\n flex-shrink: 0;\n }\n\n .tab__label {\n display: inline-block;\n }\n\n .tab__close {\n / Reset /\n appearance: none;\n border: none;\n background: transparent;\n padding: var(--bp-spacing-xs);\n margin: calc(-1 var(--bp-spacing-xs));\n margin-left: var(--bp-spacing-xs);\n cursor: pointer;\n border-radius: var(--bp-border-radius);\n\n /* Layout /\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--bp-spacing-lg);\n height: var(--bp-spacing-lg);\n\n / Visual /\n color: var(--bp-color-text-muted);\n transition: all var(--bp-transition-fast);\n }\n\n .tab__close svg {\n width: var(--bp-spacing-md);\n height: var(--bp-spacing-md);\n }\n\n .tab__close:hover {\n background: var(--bp-color-surface);\n color: var(--bp-color-text);\n }\n\n .tab__close:active {\n transform: scale(0.95);\n }\n\n / Panels container /\n .panels {\n flex: 1;\n padding: var(--bp-spacing-md);\n }\n\n / Sizes /\n .tabs--sm .tab {\n padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n font-size: var(--bp-font-size-sm);\n line-height: var(--bp-line-height-tight);\n }\n\n .tabs--md .tab {\n padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n font-size: var(--bp-font-size-base);\n line-height: var(--bp-line-height-normal);\n }\n\n .tabs--lg .tab {\n padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n font-size: var(--bp-font-size-lg);\n line-height: var(--bp-line-height-normal);\n }\n\n / Default variant /\n .tabs--default .tab--active {\n color: var(--bp-color-primary);\n background: var(--bp-color-surface);\n }\n\n .tabs--default .tab:hover:not(.tab--disabled):not(.tab--active) {\n color: var(--bp-color-text);\n background: var(--bp-color-surface-subdued);\n }\n\n .tab:active:not(.tab--disabled) {\n opacity: 0.8;\n }\n\n / Underline variant /\n .tabs--underline .tablist {\n gap: var(--bp-spacing-md);\n }\n\n .tabs--underline .tab {\n border-radius: 0;\n position: relative;\n padding-bottom: var(--bp-spacing-sm);\n margin-bottom: calc(-1 var(--bp-spacing-xs) - var(--bp-border-width));\n }\n\n .tabs--underline .tab::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--bp-spacing-0-5);\n background: transparent;\n transition: background var(--bp-transition-fast);\n }\n\n .tabs--underline .tab--active::after {\n background: var(--bp-color-primary);\n }\n\n .tabs--underline .tab--active {\n color: var(--bp-color-primary);\n }\n\n .tabs--underline .tab:hover:not(.tab--disabled):not(.tab--active) {\n color: var(--bp-color-text);\n }\n\n .tabs--underline .tab:hover:not(.tab--disabled):not(.tab--active)::after {\n background: var(--bp-color-border);\n }\n\n /* Pills variant /\n .tabs--pills .tablist {\n border-bottom: none;\n gap: var(--bp-spacing-xs);\n padding-bottom: 0;\n background: var(--bp-color-surface);\n padding: var(--bp-spacing-xs);\n border-radius: var(--bp-border-radius-large);\n }\n\n .tabs--pills .tab {\n border-radius: var(--bp-border-radius);\n }\n\n .tabs--pills .tab--active {\n background: var(--bp-color-background);\n color: var(--bp-color-text);\n box-shadow: var(--bp-shadow-sm);\n }\n\n .tabs--pills .tab:hover:not(.tab--disabled):not(.tab--active) {\n color: var(--bp-color-text);\n }\n\n / Placement: bottom /\n .tabs--bottom {\n flex-direction: column-reverse;\n }\n\n .tabs--bottom .tablist {\n border-bottom: none;\n border-top: var(--bp-border-width) solid var(--bp-color-border);\n padding-bottom: 0;\n padding-top: var(--bp-spacing-xs);\n }\n\n .tabs--bottom.tabs--underline .tab {\n margin-bottom: 0;\n margin-top: calc(-1 var(--bp-spacing-xs) - var(--bp-border-width));\n padding-bottom: var(--bp-spacing-sm);\n padding-top: var(--bp-spacing-sm);\n }\n\n .tabs--bottom.tabs--underline .tab::after {\n top: 0;\n bottom: auto;\n }\n\n /* Placement: start (vertical left) /\n .tabs--start {\n flex-direction: row;\n }\n\n .tabs--start .tablist {\n flex-direction: column;\n border-bottom: none;\n border-right: var(--bp-border-width) solid var(--bp-color-border);\n padding-bottom: 0;\n padding-right: var(--bp-spacing-xs);\n }\n\n .tabs--start .tab {\n justify-content: flex-start;\n }\n\n .tabs--start.tabs--underline .tab {\n margin-bottom: 0;\n margin-right: calc(-1 var(--bp-spacing-xs) - var(--bp-border-width));\n padding-right: var(--bp-spacing-sm);\n }\n\n .tabs--start.tabs--underline .tab::after {\n left: auto;\n right: 0;\n top: 0;\n bottom: 0;\n width: var(--bp-spacing-0-5);\n height: auto;\n }\n\n /* Placement: end (vertical right) /\n .tabs--end {\n flex-direction: row-reverse;\n }\n\n .tabs--end .tablist {\n flex-direction: column;\n border-bottom: none;\n border-left: var(--bp-border-width) solid var(--bp-color-border);\n padding-bottom: 0;\n padding-left: var(--bp-spacing-xs);\n }\n\n .tabs--end .tab {\n justify-content: flex-start;\n }\n\n .tabs--end.tabs--underline .tab {\n margin-bottom: 0;\n margin-left: calc(-1 var(--bp-spacing-xs) - var(--bp-border-width));\n padding-left: var(--bp-spacing-sm);\n }\n\n .tabs--end.tabs--underline .tab::after {\n right: auto;\n left: 0;\n top: 0;\n bottom: 0;\n width: var(--bp-spacing-0-5);\n height: auto;\n }\n\n /* States /\n .tab--disabled {\n cursor: not-allowed;\n opacity: var(--bp-opacity-disabled);\n pointer-events: none;\n }\n\n .tabs--disabled .tab {\n cursor: not-allowed;\n opacity: var(--bp-opacity-disabled);\n pointer-events: none;\n }\n\n .tab: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`;\n","import { LitElement, html, nothing } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tabsStyles } from './tabs.style.js';\nimport type { IconName } from '../icon/icons/icon-name.generated.js';\nimport '../icon/icon.js';\n\nexport type TabsSize = 'sm' \| 'md' \| 'lg';\nexport type TabsVariant = 'default' \| 'pills' \| 'underline';\nexport type TabsPlacement = 'top' \| 'bottom' \| 'start' \| 'end';\n\n/\n Tab item interface for programmatic tab configuration\n /\nexport interface TabItem {\n /* Unique identifier for the tab /\n id: string;\n /* Display label for the tab /\n label: string;\n /* Whether the tab is disabled /\n disabled?: boolean;\n /* Icon name to display before the label /\n icon?: IconName;\n /* Whether this tab can be closed /\n closable?: boolean;\n}\n\n/\n A tabs component for organizing content into tabbed sections.\n \n @element bp-tabs\n \n @property {string} value - The ID of the currently selected tab\n * @property {TabItem[]} tabs - Array of tab items (alternative to slotted tabs)\n * @property {TabsSize} size - The size of the tabs\n * @property {TabsVariant} variant - The visual style of the tabs\n * @property {TabsPlacement} placement - Position of the tab list relative to panels\n * @property {boolean} disabled - Whether all tabs are disabled\n * @property {boolean} manual - Whether activation requires pressing Enter/Space (vs automatic on arrow)\n \n @slot - Default slot for bp-tab-panel elements\n * @slot tab - Slot for custom tab buttons (use with data-tab-id attribute)\n \n @fires bp-tab-change - Fired when the selected tab changes\n * @fires bp-tab-close - Fired when a closable tab's close button is clicked\n \n @csspart tabs - The main container\n * @csspart tablist - The tab button list container\n * @csspart tab - Individual tab button\n * @csspart tab-active - The currently active tab\n * @csspart tab-disabled - A disabled tab\n * @csspart panels - The panel container\n * @csspart panel - Individual panel wrapper\n /\n@customElement('bp-tabs')\nexport class BpTabs extends LitElement {\n /\n The ID of the currently selected tab\n /\n @property({ type: String, reflect: true }) declare value: string;\n\n /\n Array of tab items for programmatic tab configuration\n /\n @property({ type: Array }) declare tabs: TabItem[];\n\n /\n The size of the tabs\n /\n @property({ type: String, reflect: true }) declare size: TabsSize;\n\n /\n The visual style of the tabs\n /\n @property({ type: String, reflect: true }) declare variant: TabsVariant;\n\n /\n Position of the tab list relative to panels\n /\n @property({ type: String, reflect: true }) declare placement: TabsPlacement;\n\n /\n Whether all tabs are disabled\n /\n @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n /\n Whether activation requires pressing Enter/Space (manual) vs automatic on arrow navigation\n /\n @property({ type: Boolean, reflect: true }) declare manual: boolean;\n\n @state() private focusedTabId: string \| null = null;\n\n @queryAssignedElements({ slot: '', flatten: true })\n private panelElements!: HTMLElement[];\n\n static styles = [tabsStyles];\n\n constructor() {\n super();\n this.value = '';\n this.tabs = [];\n this.size = 'md';\n this.variant = 'default';\n this.placement = 'top';\n this.disabled = false;\n this.manual = false;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'tablist');\n }\n\n updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('value')) {\n this.updatePanelVisibility();\n }\n }\n\n private handleSlotChange = () => {\n // Auto-select first tab if none selected\n if (!this.value && this.tabs.length > 0) {\n const firstEnabled = this.tabs.find((tab) => !tab.disabled);\n if (firstEnabled) {\n this.value = firstEnabled.id;\n }\n } else if (!this.value) {\n // Check for panels with data-tab-id\n const panels = this.getPanels();\n if (panels.length > 0) {\n this.value = panels[0].getAttribute('data-tab-id') \|\| '';\n }\n }\n\n this.updatePanelVisibility();\n };\n\n private getPanels(): HTMLElement[] {\n return this.panelElements.filter(\n (el) => el.hasAttribute('data-tab-id') \|\| el.tagName === 'BP-TAB-PANEL'\n );\n }\n\n private getEnabledTabs(): TabItem[] {\n return this.tabs.filter((tab) => !tab.disabled);\n }\n\n private updatePanelVisibility() {\n const panels = this.getPanels();\n panels.forEach((panel) => {\n const panelId = panel.getAttribute('data-tab-id') \|\| '';\n const isActive = panelId === this.value;\n panel.hidden = !isActive;\n panel.setAttribute('aria-hidden', String(!isActive));\n if (isActive) {\n panel.setAttribute('tabindex', '0');\n } else {\n panel.removeAttribute('tabindex');\n }\n });\n }\n\n private handleTabClick = (tabId: string, disabled: boolean) => {\n if (disabled \|\| this.disabled) return;\n\n this.selectTab(tabId);\n };\n\n private handleTabKeyDown = (event: KeyboardEvent, tabId: string) => {\n if (this.disabled) return;\n\n const enabledTabs = this.getEnabledTabs();\n const currentIndex = enabledTabs.findIndex((tab) => tab.id === tabId);\n\n let newIndex = currentIndex;\n let handled = false;\n\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n event.preventDefault();\n handled = true;\n newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n event.preventDefault();\n handled = true;\n newIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;\n break;\n\n case 'Home':\n event.preventDefault();\n handled = true;\n newIndex = 0;\n break;\n\n case 'End':\n event.preventDefault();\n handled = true;\n newIndex = enabledTabs.length - 1;\n break;\n\n case 'Enter':\n case ' ':\n if (this.manual && this.focusedTabId) {\n event.preventDefault();\n handled = true;\n this.selectTab(this.focusedTabId);\n }\n break;\n\n case 'Delete':\n case 'Backspace': {\n const tab = this.tabs.find((t) => t.id === tabId);\n if (tab?.closable) {\n event.preventDefault();\n handled = true;\n this.handleTabClose(event, tabId);\n }\n break;\n }\n }\n\n if (handled && newIndex !== currentIndex) {\n const newTab = enabledTabs[newIndex];\n if (newTab) {\n this.focusedTabId = newTab.id;\n this.focusTab(newTab.id);\n\n // In automatic mode, select the tab on arrow navigation\n if (!this.manual) {\n this.selectTab(newTab.id);\n }\n }\n }\n };\n\n private focusTab(tabId: string) {\n const tabButton = this.shadowRoot?.querySelector(\n `[data-tab-id=\"${tabId}\"]`\n ) as HTMLElement \| null;\n tabButton?.focus();\n }\n\n private selectTab(tabId: string) {\n const previousValue = this.value;\n if (previousValue === tabId) return;\n\n this.value = tabId;\n this.updatePanelVisibility();\n\n this.dispatchEvent(\n new CustomEvent('bp-tab-change', {\n detail: {\n value: tabId,\n previousValue,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleTabClose = (event: Event, tabId: string) => {\n event.stopPropagation();\n\n this.dispatchEvent(\n new CustomEvent('bp-tab-close', {\n detail: { tabId },\n bubbles: true,\n composed: true,\n })\n );\n\n // Remove the closed tab\n const closedIndex = this.tabs.findIndex((t) => t.id === tabId);\n this.tabs = this.tabs.filter((t) => t.id !== tabId);\n\n // If the closed tab was active, activate an adjacent tab\n if (this.value === tabId && this.tabs.length > 0) {\n const nextIndex = Math.min(closedIndex, this.tabs.length - 1);\n this.value = this.tabs[nextIndex].id;\n }\n };\n\n private handleTabFocus = (tabId: string) => {\n this.focusedTabId = tabId;\n };\n\n private handleTabBlur = () => {\n this.focusedTabId = null;\n };\n\n private renderTab(tab: TabItem) {\n const isActive = this.value === tab.id;\n const isDisabled = tab.disabled \|\| this.disabled;\n\n const tabClasses = {\n tab: true,\n 'tab--active': isActive,\n 'tab--disabled': isDisabled,\n };\n\n return html`\n <button\n class=${classMap(tabClasses)}\n part=\"tab ${isActive ? 'tab-active' : ''} ${isDisabled\n ? 'tab-disabled'\n : ''}\"\n role=\"tab\"\n data-tab-id=${tab.id}\n id=\"tab-${tab.id}\"\n aria-selected=${isActive}\n aria-controls=\"panel-${tab.id}\"\n aria-disabled=${isDisabled}\n tabindex=${isActive ? 0 : -1}\n ?disabled=${isDisabled}\n @click=${() => this.handleTabClick(tab.id, isDisabled)}\n @keydown=${(e: KeyboardEvent) => this.handleTabKeyDown(e, tab.id)}\n @focus=${() => this.handleTabFocus(tab.id)}\n @blur=${this.handleTabBlur}\n >\n ${tab.icon\n ? html`<bp-icon name=${tab.icon} class=\"tab__icon\"></bp-icon>`\n : nothing}\n <span class=\"tab__label\">${tab.label}</span>\n ${tab.closable\n ? html`\n <button\n class=\"tab__close\"\n part=\"tab-close\"\n aria-label=\"Close ${tab.label}\"\n @click=${(e: Event) => this.handleTabClose(e, tab.id)}\n @keydown=${(e: KeyboardEvent) => e.stopPropagation()}\n >\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n >\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n `\n : nothing}\n </button>\n `;\n }\n\n render() {\n const containerClasses = {\n tabs: true,\n [`tabs--${this.size}`]: true,\n [`tabs--${this.variant}`]: true,\n [`tabs--${this.placement}`]: true,\n 'tabs--disabled': this.disabled,\n };\n\n const isVertical = this.placement === 'start' \|\| this.placement === 'end';\n\n return html`\n <div\n class=${classMap(containerClasses)}\n part=\"tabs\"\n aria-orientation=${isVertical ? 'vertical' : 'horizontal'}\n >\n <div class=\"tablist\" part=\"tablist\" role=\"tablist\">\n ${repeat(\n this.tabs,\n (tab) => tab.id,\n (tab) => this.renderTab(tab)\n )}\n </div>\n <div class=\"panels\" part=\"panels\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\n/\n A tab panel component for use with bp-tabs.\n \n @element bp-tab-panel\n \n @property {string} tabId - The ID that links this panel to its tab\n \n @slot - Content of the panel\n \n @csspart panel - The panel container\n /\n@customElement('bp-tab-panel')\nexport class BpTabPanel extends LitElement {\n /\n The ID that links this panel to its tab\n */\n @property({ type: String, attribute: 'tab-id', reflect: true })\n declare tabId: string;\n\n constructor() {\n super();\n this.tabId = '';\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'tabpanel');\n this.setAttribute('data-tab-id', this.tabId);\n }\n\n updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('tabId')) {\n this.setAttribute('data-tab-id', this.tabId);\n this.id = `panel-${this.tabId}`;\n this.setAttribute('aria-labelledby', `tab-${this.tabId}`);\n }\n }\n\n render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-tabs': BpTabs;\n 'bp-tab-panel': BpTabPanel;\n }\n}\n"],"names":["tabsStyles","css","BpTabs","LitElement","firstEnabled","tab","panels","tabId","disabled","event","enabledTabs","currentIndex","newIndex","handled","t","newTab","closedIndex","nextIndex","changedProperties","el","panel","isActive","previousValue","isDisabled","html","classMap","e","nothing","containerClasses","isVertical","repeat","__decorateClass","property","state","queryAssignedElements","customElement","BpTabPanel"],"mappings":";;;;AAEO,MAAMA,IAAaC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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"}
1	+ {"version":3,"file":"tabs.js","sources":["../../source/components/tabs/tabs.style.ts","../../source/components/tabs/tabs.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tabsStyles = css`\n /* Base styles /\n :host {\n display: block;\n }\n\n .tabs {\n font-family: var(--bp-font-family);\n display: flex;\n flex-direction: column;\n }\n\n / Tablist - horizontal by default /\n .tablist {\n display: flex;\n flex-wrap: nowrap;\n gap: var(--bp-spacing-xs);\n border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n padding-bottom: var(--bp-spacing-xs);\n }\n\n / Tab button base /\n .tab {\n / Reset /\n appearance: none;\n border: none;\n background: transparent;\n margin: 0;\n\n / Layout /\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bp-spacing-xs);\n cursor: pointer;\n flex-shrink: 0;\n\n / Typography /\n font-family: var(--bp-font-family);\n font-weight: var(--bp-font-weight-medium);\n white-space: nowrap;\n\n / Visual /\n color: var(--bp-color-text-muted);\n border-radius: var(--bp-border-radius);\n transition: all var(--bp-transition-fast);\n\n / Focus /\n outline: none;\n }\n\n .tab__icon {\n flex-shrink: 0;\n }\n\n .tab__label {\n display: inline-block;\n }\n\n .tab__close {\n / Reset /\n appearance: none;\n border: none;\n background: transparent;\n padding: var(--bp-spacing-xs);\n margin: calc(-1 var(--bp-spacing-xs));\n margin-left: var(--bp-spacing-xs);\n cursor: pointer;\n border-radius: var(--bp-border-radius);\n\n /* Layout /\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--bp-spacing-lg);\n height: var(--bp-spacing-lg);\n\n / Visual /\n color: var(--bp-color-text-muted);\n transition: all var(--bp-transition-fast);\n }\n\n .tab__close svg {\n width: var(--bp-spacing-md);\n height: var(--bp-spacing-md);\n }\n\n .tab__close:hover {\n background: var(--bp-color-surface);\n color: var(--bp-color-text);\n }\n\n .tab__close:active {\n transform: scale(0.95);\n }\n\n / Panels container /\n .panels {\n flex: 1;\n padding: var(--bp-spacing-md);\n }\n\n / Sizes /\n .tabs--sm .tab {\n padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n font-size: var(--bp-font-size-sm);\n line-height: var(--bp-line-height-tight);\n }\n\n .tabs--md .tab {\n padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n font-size: var(--bp-font-size-base);\n line-height: var(--bp-line-height-normal);\n }\n\n .tabs--lg .tab {\n padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n font-size: var(--bp-font-size-lg);\n line-height: var(--bp-line-height-normal);\n }\n\n / Default variant /\n .tabs--default .tab--active {\n color: var(--bp-color-primary);\n background: var(--bp-color-surface);\n }\n\n .tabs--default .tab:hover:not(.tab--disabled):not(.tab--active) {\n color: var(--bp-color-text);\n background: var(--bp-color-surface-subdued);\n }\n\n .tab:active:not(.tab--disabled) {\n opacity: 0.8;\n }\n\n / Underline variant /\n .tabs--underline .tablist {\n gap: var(--bp-spacing-md);\n }\n\n .tabs--underline .tab {\n border-radius: 0;\n position: relative;\n padding-bottom: var(--bp-spacing-sm);\n margin-bottom: calc(-1 var(--bp-spacing-xs) - var(--bp-border-width));\n }\n\n .tabs--underline .tab::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--bp-spacing-0-5);\n background: transparent;\n transition: background var(--bp-transition-fast);\n }\n\n .tabs--underline .tab--active::after {\n background: var(--bp-color-primary);\n }\n\n .tabs--underline .tab--active {\n color: var(--bp-color-primary);\n }\n\n .tabs--underline .tab:hover:not(.tab--disabled):not(.tab--active) {\n color: var(--bp-color-text);\n }\n\n .tabs--underline .tab:hover:not(.tab--disabled):not(.tab--active)::after {\n background: var(--bp-color-border);\n }\n\n /* Pills variant /\n .tabs--pills .tablist {\n border-bottom: none;\n gap: var(--bp-spacing-xs);\n padding-bottom: 0;\n background: var(--bp-color-surface);\n padding: var(--bp-spacing-xs);\n border-radius: var(--bp-border-radius-large);\n }\n\n .tabs--pills .tab {\n border-radius: var(--bp-border-radius);\n }\n\n .tabs--pills .tab--active {\n background: var(--bp-color-background);\n color: var(--bp-color-text);\n box-shadow: var(--bp-shadow-sm);\n }\n\n .tabs--pills .tab:hover:not(.tab--disabled):not(.tab--active) {\n color: var(--bp-color-text);\n }\n\n / Placement: bottom /\n .tabs--bottom {\n flex-direction: column-reverse;\n }\n\n .tabs--bottom .tablist {\n border-bottom: none;\n border-top: var(--bp-border-width) solid var(--bp-color-border);\n padding-bottom: 0;\n padding-top: var(--bp-spacing-xs);\n }\n\n .tabs--bottom.tabs--underline .tab {\n margin-bottom: 0;\n margin-top: calc(-1 var(--bp-spacing-xs) - var(--bp-border-width));\n padding-bottom: var(--bp-spacing-sm);\n padding-top: var(--bp-spacing-sm);\n }\n\n .tabs--bottom.tabs--underline .tab::after {\n top: 0;\n bottom: auto;\n }\n\n /* Placement: start (vertical left) /\n .tabs--start {\n flex-direction: row;\n }\n\n .tabs--start .tablist {\n flex-direction: column;\n border-bottom: none;\n border-right: var(--bp-border-width) solid var(--bp-color-border);\n padding-bottom: 0;\n padding-right: var(--bp-spacing-xs);\n }\n\n .tabs--start .tab {\n justify-content: flex-start;\n }\n\n .tabs--start.tabs--underline .tab {\n margin-bottom: 0;\n margin-right: calc(-1 var(--bp-spacing-xs) - var(--bp-border-width));\n padding-right: var(--bp-spacing-sm);\n }\n\n .tabs--start.tabs--underline .tab::after {\n left: auto;\n right: 0;\n top: 0;\n bottom: 0;\n width: var(--bp-spacing-0-5);\n height: auto;\n }\n\n /* Placement: end (vertical right) /\n .tabs--end {\n flex-direction: row-reverse;\n }\n\n .tabs--end .tablist {\n flex-direction: column;\n border-bottom: none;\n border-left: var(--bp-border-width) solid var(--bp-color-border);\n padding-bottom: 0;\n padding-left: var(--bp-spacing-xs);\n }\n\n .tabs--end .tab {\n justify-content: flex-start;\n }\n\n .tabs--end.tabs--underline .tab {\n margin-bottom: 0;\n margin-left: calc(-1 var(--bp-spacing-xs) - var(--bp-border-width));\n padding-left: var(--bp-spacing-sm);\n }\n\n .tabs--end.tabs--underline .tab::after {\n right: auto;\n left: 0;\n top: 0;\n bottom: 0;\n width: var(--bp-spacing-0-5);\n height: auto;\n }\n\n /* States /\n .tab--disabled {\n cursor: not-allowed;\n opacity: var(--bp-opacity-disabled);\n pointer-events: none;\n }\n\n .tabs--disabled .tab {\n cursor: not-allowed;\n opacity: var(--bp-opacity-disabled);\n pointer-events: none;\n }\n\n .tab: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`;\n","import { LitElement, html, nothing } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tabsStyles } from './tabs.style.js';\nimport type { IconName } from '../icon/icons/icon-name.generated.js';\nimport { BpIcon } from '../icon/icon.js';\n\nexport type TabsSize = 'sm' \| 'md' \| 'lg';\nexport type TabsVariant = 'default' \| 'pills' \| 'underline';\nexport type TabsPlacement = 'top' \| 'bottom' \| 'start' \| 'end';\n\n/\n Tab item interface for programmatic tab configuration\n /\nexport interface TabItem {\n /* Unique identifier for the tab /\n id: string;\n /* Display label for the tab /\n label: string;\n /* Whether the tab is disabled /\n disabled?: boolean;\n /* Icon name to display before the label /\n icon?: IconName;\n /* Whether this tab can be closed /\n closable?: boolean;\n}\n\n/\n A tabs component for organizing content into tabbed sections.\n \n @element bp-tabs\n \n @property {string} value - The ID of the currently selected tab\n * @property {TabItem[]} tabs - Array of tab items (alternative to slotted tabs)\n * @property {TabsSize} size - The size of the tabs\n * @property {TabsVariant} variant - The visual style of the tabs\n * @property {TabsPlacement} placement - Position of the tab list relative to panels\n * @property {boolean} disabled - Whether all tabs are disabled\n * @property {boolean} manual - Whether activation requires pressing Enter/Space (vs automatic on arrow)\n \n @slot - Default slot for bp-tab-panel elements\n * @slot tab - Slot for custom tab buttons (use with data-tab-id attribute)\n \n @fires bp-tab-change - Fired when the selected tab changes\n * @fires bp-tab-close - Fired when a closable tab's close button is clicked\n \n @csspart tabs - The main container\n * @csspart tablist - The tab button list container\n * @csspart tab - Individual tab button\n * @csspart tab-active - The currently active tab\n * @csspart tab-disabled - A disabled tab\n * @csspart panels - The panel container\n * @csspart panel - Individual panel wrapper\n /\n@customElement('bp-tabs')\nexport class BpTabs 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 /\n The ID of the currently selected tab\n /\n @property({ type: String, reflect: true }) declare value: string;\n\n /\n Array of tab items for programmatic tab configuration\n /\n @property({ type: Array }) declare tabs: TabItem[];\n\n /\n The size of the tabs\n /\n @property({ type: String, reflect: true }) declare size: TabsSize;\n\n /\n The visual style of the tabs\n /\n @property({ type: String, reflect: true }) declare variant: TabsVariant;\n\n /\n Position of the tab list relative to panels\n /\n @property({ type: String, reflect: true }) declare placement: TabsPlacement;\n\n /\n Whether all tabs are disabled\n /\n @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n /\n Whether activation requires pressing Enter/Space (manual) vs automatic on arrow navigation\n /\n @property({ type: Boolean, reflect: true }) declare manual: boolean;\n\n @state() private focusedTabId: string \| null = null;\n\n @queryAssignedElements({ slot: '', flatten: true })\n private panelElements!: HTMLElement[];\n\n static styles = [tabsStyles];\n\n constructor() {\n super();\n this.value = '';\n this.tabs = [];\n this.size = 'md';\n this.variant = 'default';\n this.placement = 'top';\n this.disabled = false;\n this.manual = false;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'tablist');\n }\n\n updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('value')) {\n this.updatePanelVisibility();\n }\n }\n\n private handleSlotChange = () => {\n // Auto-select first tab if none selected\n if (!this.value && this.tabs.length > 0) {\n const firstEnabled = this.tabs.find((tab) => !tab.disabled);\n if (firstEnabled) {\n this.value = firstEnabled.id;\n }\n } else if (!this.value) {\n // Check for panels with data-tab-id\n const panels = this.getPanels();\n if (panels.length > 0) {\n this.value = panels[0].getAttribute('data-tab-id') \|\| '';\n }\n }\n\n this.updatePanelVisibility();\n };\n\n private getPanels(): HTMLElement[] {\n return this.panelElements.filter(\n (el) => el.hasAttribute('data-tab-id') \|\| el.tagName === 'BP-TAB-PANEL'\n );\n }\n\n private getEnabledTabs(): TabItem[] {\n return this.tabs.filter((tab) => !tab.disabled);\n }\n\n private updatePanelVisibility() {\n const panels = this.getPanels();\n panels.forEach((panel) => {\n const panelId = panel.getAttribute('data-tab-id') \|\| '';\n const isActive = panelId === this.value;\n panel.hidden = !isActive;\n panel.setAttribute('aria-hidden', String(!isActive));\n if (isActive) {\n panel.setAttribute('tabindex', '0');\n } else {\n panel.removeAttribute('tabindex');\n }\n });\n }\n\n private handleTabClick = (tabId: string, disabled: boolean) => {\n if (disabled \|\| this.disabled) return;\n\n this.selectTab(tabId);\n };\n\n private handleTabKeyDown = (event: KeyboardEvent, tabId: string) => {\n if (this.disabled) return;\n\n const enabledTabs = this.getEnabledTabs();\n const currentIndex = enabledTabs.findIndex((tab) => tab.id === tabId);\n\n let newIndex = currentIndex;\n let handled = false;\n\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n event.preventDefault();\n handled = true;\n newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n event.preventDefault();\n handled = true;\n newIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;\n break;\n\n case 'Home':\n event.preventDefault();\n handled = true;\n newIndex = 0;\n break;\n\n case 'End':\n event.preventDefault();\n handled = true;\n newIndex = enabledTabs.length - 1;\n break;\n\n case 'Enter':\n case ' ':\n if (this.manual && this.focusedTabId) {\n event.preventDefault();\n handled = true;\n this.selectTab(this.focusedTabId);\n }\n break;\n\n case 'Delete':\n case 'Backspace': {\n const tab = this.tabs.find((t) => t.id === tabId);\n if (tab?.closable) {\n event.preventDefault();\n handled = true;\n this.handleTabClose(event, tabId);\n }\n break;\n }\n }\n\n if (handled && newIndex !== currentIndex) {\n const newTab = enabledTabs[newIndex];\n if (newTab) {\n this.focusedTabId = newTab.id;\n this.focusTab(newTab.id);\n\n // In automatic mode, select the tab on arrow navigation\n if (!this.manual) {\n this.selectTab(newTab.id);\n }\n }\n }\n };\n\n private focusTab(tabId: string) {\n const tabButton = this.shadowRoot?.querySelector(\n `[data-tab-id=\"${tabId}\"]`\n ) as HTMLElement \| null;\n tabButton?.focus();\n }\n\n private selectTab(tabId: string) {\n const previousValue = this.value;\n if (previousValue === tabId) return;\n\n this.value = tabId;\n this.updatePanelVisibility();\n\n this.dispatchEvent(\n new CustomEvent('bp-tab-change', {\n detail: {\n value: tabId,\n previousValue,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleTabClose = (event: Event, tabId: string) => {\n event.stopPropagation();\n\n this.dispatchEvent(\n new CustomEvent('bp-tab-close', {\n detail: { tabId },\n bubbles: true,\n composed: true,\n })\n );\n\n // Remove the closed tab\n const closedIndex = this.tabs.findIndex((t) => t.id === tabId);\n this.tabs = this.tabs.filter((t) => t.id !== tabId);\n\n // If the closed tab was active, activate an adjacent tab\n if (this.value === tabId && this.tabs.length > 0) {\n const nextIndex = Math.min(closedIndex, this.tabs.length - 1);\n this.value = this.tabs[nextIndex].id;\n }\n };\n\n private handleTabFocus = (tabId: string) => {\n this.focusedTabId = tabId;\n };\n\n private handleTabBlur = () => {\n this.focusedTabId = null;\n };\n\n private renderTab(tab: TabItem) {\n const isActive = this.value === tab.id;\n const isDisabled = tab.disabled \|\| this.disabled;\n\n const tabClasses = {\n tab: true,\n 'tab--active': isActive,\n 'tab--disabled': isDisabled,\n };\n\n return html`\n <button\n class=${classMap(tabClasses)}\n part=\"tab ${isActive ? 'tab-active' : ''} ${isDisabled\n ? 'tab-disabled'\n : ''}\"\n role=\"tab\"\n data-tab-id=${tab.id}\n id=\"tab-${tab.id}\"\n aria-selected=${isActive}\n aria-controls=\"panel-${tab.id}\"\n aria-disabled=${isDisabled}\n tabindex=${isActive ? 0 : -1}\n ?disabled=${isDisabled}\n @click=${() => this.handleTabClick(tab.id, isDisabled)}\n @keydown=${(e: KeyboardEvent) => this.handleTabKeyDown(e, tab.id)}\n @focus=${() => this.handleTabFocus(tab.id)}\n @blur=${this.handleTabBlur}\n >\n ${tab.icon\n ? html`<bp-icon name=${tab.icon} class=\"tab__icon\"></bp-icon>`\n : nothing}\n <span class=\"tab__label\">${tab.label}</span>\n ${tab.closable\n ? html`\n <button\n class=\"tab__close\"\n part=\"tab-close\"\n aria-label=\"Close ${tab.label}\"\n @click=${(e: Event) => this.handleTabClose(e, tab.id)}\n @keydown=${(e: KeyboardEvent) => e.stopPropagation()}\n >\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n >\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n `\n : nothing}\n </button>\n `;\n }\n\n render() {\n const containerClasses = {\n tabs: true,\n [`tabs--${this.size}`]: true,\n [`tabs--${this.variant}`]: true,\n [`tabs--${this.placement}`]: true,\n 'tabs--disabled': this.disabled,\n };\n\n const isVertical = this.placement === 'start' \|\| this.placement === 'end';\n\n return html`\n <div\n class=${classMap(containerClasses)}\n part=\"tabs\"\n aria-orientation=${isVertical ? 'vertical' : 'horizontal'}\n >\n <div class=\"tablist\" part=\"tablist\" role=\"tablist\">\n ${repeat(\n this.tabs,\n (tab) => tab.id,\n (tab) => this.renderTab(tab)\n )}\n </div>\n <div class=\"panels\" part=\"panels\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\n/\n A tab panel component for use with bp-tabs.\n \n @element bp-tab-panel\n \n @property {string} tabId - The ID that links this panel to its tab\n \n @slot - Content of the panel\n \n @csspart panel - The panel container\n /\n@customElement('bp-tab-panel')\nexport class BpTabPanel extends LitElement {\n /\n The ID that links this panel to its tab\n */\n @property({ type: String, attribute: 'tab-id', reflect: true })\n declare tabId: string;\n\n constructor() {\n super();\n this.tabId = '';\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'tabpanel');\n this.setAttribute('data-tab-id', this.tabId);\n }\n\n updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('tabId')) {\n this.setAttribute('data-tab-id', this.tabId);\n this.id = `panel-${this.tabId}`;\n this.setAttribute('aria-labelledby', `tab-${this.tabId}`);\n }\n }\n\n render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-tabs': BpTabs;\n 'bp-tab-panel': BpTabPanel;\n }\n}\n"],"names":["tabsStyles","css","BpTabs","LitElement","firstEnabled","tab","panels","tabId","disabled","event","enabledTabs","currentIndex","newIndex","handled","t","newTab","closedIndex","nextIndex","changedProperties","el","panel","isActive","previousValue","isDisabled","html","classMap","e","nothing","containerClasses","isVertical","repeat","BpIcon","__decorateClass","property","state","queryAssignedElements","customElement","BpTabPanel"],"mappings":";;;;;AAEO,MAAMA,IAAaC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}

package/dist/components/tag/tag.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { BpIcon } from '../icon/icon.js';
 /**
  * Tag component for displaying removable labels, chips, or category markers.
  *
@@ -20,6 +20,11 @@ import '../icon/icon.js';
  * ```
  */
 export declare class BpTag extends LitElement {
+    /**
+     * Child components that self-register as custom elements on import.
+     * Value imports prevent bundler tree-shaking of the registration side effect.
+     */
+    static dependencies: (typeof BpIcon)[];
     /**
      * Visual variant of the tag
      * @type {'solid' | 'outlined'}

package/dist/components/tag/tag.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../source/components/tag/tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,iBAAiB,CAAC;~~AAEzB~~;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC;;;;OAIG;IACgD,OAAO,EACtD,OAAO,GACP,UAAU,CAAC;IAEf;;;;OAIG;IACgD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE5E;;;;OAIG;IACgD,KAAK,EACpD,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,CAAC;IAEd;;;;OAIG;IACiD,SAAS,EAAE,OAAO,CAAC;IAEvE;;;;OAIG;IACiD,QAAQ,EAAE,OAAO,CAAC;IAEtE,MAAM,CAAC,MAAM,4BAAe;;IAW5B,OAAO,CAAC,YAAY;IAyBpB,OAAO,CAAC,aAAa;IAoBrB,MAAM;CA4CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}
1	+ {"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../source/components/tag/tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC;;;OAGG;IACH,MAAM,CAAC,YAAY,oBAAY;IAE/B;;;;OAIG;IACgD,OAAO,EACtD,OAAO,GACP,UAAU,CAAC;IAEf;;;;OAIG;IACgD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE5E;;;;OAIG;IACgD,KAAK,EACpD,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,CAAC;IAEd;;;;OAIG;IACiD,SAAS,EAAE,OAAO,CAAC;IAEvE;;;;OAIG;IACiD,QAAQ,EAAE,OAAO,CAAC;IAEtE,MAAM,CAAC,MAAM,4BAAe;;IAW5B,OAAO,CAAC,YAAY;IAyBpB,OAAO,CAAC,aAAa;IAoBrB,MAAM;CA4CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

package/dist/components/tag.js CHANGED Viewed

@@ -2,7 +2,8 @@ import { css as b, LitElement as d, html as p } from "lit";
 import { property as i, customElement as g } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
 import { crossSvg as u } from "../icons/cross.js";
-const h = b`
+import { BpIcon as h } from "./icon.js";
+const m = b`
   /* Base styles */
   :host {
     display: inline-block;
@@ -200,10 +201,10 @@ const h = b`
     }
   }
 `;
-var m = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (o, r, l, s) => {
-  for (var e = s > 1 ? void 0 : s ? f(r, l) : r, n = o.length - 1, c; n >= 0; n--)
-    (c = o[n]) && (e = (s ? c(r, l, e) : c(e)) || e);
-  return s && e && m(r, l, e), e;
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (o, r, n, s) => {
+  for (var e = s > 1 ? void 0 : s ? y(r, n) : r, l = o.length - 1, c; l >= 0; l--)
+    (c = o[l]) && (e = (s ? c(r, n, e) : c(e)) || e);
+  return s && e && f(r, n, e), e;
 };
 let t = class extends d {
   constructor() {
@@ -267,7 +268,8 @@ let t = class extends d {
     `;
   }
 };
-t.styles = [h];
+t.dependencies = [h];
+t.styles = [m];
 a([
   i({ type: String, reflect: !0 })
 ], t.prototype, "variant", 2);

package/dist/components/tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag.js","sources":["../../source/components/tag/tag.style.ts","../../source/components/tag/tag.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tagStyles = css`\n /* Base styles /\n :host {\n display: inline-block;\n }\n\n .tag {\n display: inline-flex;\n align-items: center;\n gap: var(--bp-spacing-xs);\n font-family: var(--bp-font-family);\n font-weight: var(--bp-font-weight-medium);\n line-height: 1.5;\n border-radius: var(--bp-border-radius-md);\n border: var(--bp-border-width) solid transparent;\n transition:\n background-color var(--bp-transition-fast),\n border-color var(--bp-transition-fast),\n color var(--bp-transition-fast),\n box-shadow var(--bp-transition-fast);\n cursor: default;\n }\n\n .tag:focus-visible {\n outline: var(--bp-border-width) solid var(--bp-color-focus);\n outline-offset: var(--bp-border-width);\n }\n\n .tag__content {\n flex: 1;\n }\n\n .tag__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin: 0;\n background: transparent;\n border: none;\n cursor: pointer;\n color: inherit;\n opacity: 0.7;\n transition: opacity var(--bp-transition-fast);\n flex-shrink: 0;\n }\n\n .tag__close:hover {\n opacity: 1;\n }\n\n .tag__close:focus-visible {\n outline: var(--bp-border-width) solid currentColor;\n outline-offset: var(--bp-border-width);\n border-radius: var(--bp-border-radius-sm);\n opacity: 1;\n }\n\n / Variants - Solid /\n .tag--solid.tag--primary {\n background-color: var(--bp-color-primary);\n color: var(--bp-color-text-inverse);\n }\n\n .tag--solid.tag--success {\n background-color: var(--bp-color-success);\n color: var(--bp-color-text-inverse);\n }\n\n .tag--solid.tag--error {\n background-color: var(--bp-color-error);\n color: var(--bp-color-text-inverse);\n }\n\n .tag--solid.tag--warning {\n background-color: var(--bp-color-warning);\n color: var(--bp-color-text-inverse);\n }\n\n .tag--solid.tag--info {\n background-color: var(--bp-color-info);\n color: var(--bp-color-text-inverse);\n }\n\n .tag--solid.tag--neutral {\n background-color: var(--bp-color-border-strong);\n color: var(--bp-color-text);\n }\n\n / Variants - Outlined /\n .tag--outlined {\n background-color: transparent;\n }\n\n .tag--outlined.tag--primary {\n border-color: var(--bp-color-primary);\n color: var(--bp-color-primary);\n }\n\n .tag--outlined.tag--success {\n border-color: var(--bp-color-success);\n color: var(--bp-color-success);\n }\n\n .tag--outlined.tag--error {\n border-color: var(--bp-color-error);\n color: var(--bp-color-error);\n }\n\n .tag--outlined.tag--warning {\n border-color: var(--bp-color-warning);\n color: var(--bp-color-warning);\n }\n\n .tag--outlined.tag--info {\n border-color: var(--bp-color-info);\n color: var(--bp-color-info);\n }\n\n .tag--outlined.tag--neutral {\n border-color: var(--bp-color-border);\n color: var(--bp-color-text);\n }\n\n / Sizes /\n .tag--sm {\n padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n font-size: var(--bp-font-size-xs);\n height: var(--bp-spacing-6);\n }\n\n .tag--sm .tag__close {\n width: var(--bp-spacing-4);\n height: var(--bp-spacing-4);\n }\n\n .tag--md {\n padding: var(--bp-spacing-xs) var(--bp-spacing-md);\n font-size: var(--bp-font-size-sm);\n height: var(--bp-spacing-8);\n }\n\n .tag--md .tag__close {\n width: var(--bp-spacing-5);\n height: var(--bp-spacing-5);\n }\n\n .tag--lg {\n padding: var(--bp-spacing-sm) var(--bp-spacing-lg);\n font-size: var(--bp-font-size-base);\n height: var(--bp-spacing-10);\n }\n\n .tag--lg .tag__close {\n width: var(--bp-spacing-6);\n height: var(--bp-spacing-6);\n }\n\n / States /\n .tag--removable {\n cursor: pointer;\n }\n\n .tag--removable:hover {\n filter: brightness(0.95);\n }\n\n .tag--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .tag--disabled .tag__close {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n / Touch target size: ensure 44x44px minimum on touch devices /\n @media (pointer: coarse) {\n .tag__close {\n position: relative;\n min-width: 24px;\n min-height: 24px;\n }\n\n / Expand touch target with pseudo-element /\n .tag__close::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 44px;\n height: 44px;\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 { tagStyles } from './tag.style.js';\nimport { crossSvg } from '../icon/icons/entries/cross.js';\nimport '../icon/icon.js';\n\n/\n Tag component for displaying removable labels, chips, or category markers.\n \n @element bp-tag\n \n @slot - Default slot for tag content (text)\n \n @csspart tag - The tag container element\n * @csspart close-button - The close/remove button element\n \n @fires bp-remove - Fired when the tag is removed (cancelable)\n \n @example\n * ```html\n * <bp-tag>Design</bp-tag>\n * <bp-tag variant=\"outlined\" removable>TypeScript</bp-tag>\n * <bp-tag variant=\"success\" size=\"sm\">Active</bp-tag>\n * ```\n /\n@customElement('bp-tag')\nexport class BpTag extends LitElement {\n /\n Visual variant of the tag\n * @type {'solid' \| 'outlined'}\n * @default 'solid'\n /\n @property({ type: String, reflect: true }) declare variant:\n \| 'solid'\n \| 'outlined';\n\n /\n Size of the tag\n * @type {'sm' \| 'md' \| 'lg'}\n * @default 'md'\n /\n @property({ type: String, reflect: true }) declare size: 'sm' \| 'md' \| 'lg';\n\n /\n Color scheme of the tag\n * @type {'primary' \| 'success' \| 'error' \| 'warning' \| 'info' \| 'neutral'}\n * @default 'neutral'\n /\n @property({ type: String, reflect: true }) declare color:\n \| 'primary'\n \| 'success'\n \| 'error'\n \| 'warning'\n \| 'info'\n \| 'neutral';\n\n /\n Whether the tag can be removed\n * @type {boolean}\n * @default false\n /\n @property({ type: Boolean, reflect: true }) declare removable: boolean;\n\n /\n Whether the tag is disabled\n * @type {boolean}\n * @default false\n */\n @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n static styles = [tagStyles];\n\n constructor() {\n super();\n this.variant = 'solid';\n this.size = 'md';\n this.color = 'neutral';\n this.removable = false;\n this.disabled = false;\n }\n\n private handleRemove(event: Event) {\n event.stopPropagation();\n\n if (this.disabled) {\n return;\n }\n\n const removeEvent = new CustomEvent('bp-remove', {\n detail: {\n color: this.color,\n timestamp: Date.now(),\n },\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n\n this.dispatchEvent(removeEvent);\n\n // Only remove if event wasn't prevented\n if (!removeEvent.defaultPrevented) {\n this.remove();\n }\n }\n\n private handleKeyDown(event: Event) {\n if (this.disabled) {\n return;\n }\n\n const keyboardEvent = event as unknown as {\n key: string;\n preventDefault: () => void;\n };\n\n // Allow removing with Delete or Backspace when focused\n if (\n this.removable &&\n (keyboardEvent.key === 'Delete' \|\| keyboardEvent.key === 'Backspace')\n ) {\n keyboardEvent.preventDefault();\n this.handleRemove(event);\n }\n }\n\n render() {\n const classes = {\n tag: true,\n [`tag--${this.variant}`]: true,\n [`tag--${this.size}`]: true,\n [`tag--${this.color}`]: true,\n 'tag--disabled': this.disabled,\n 'tag--removable': this.removable,\n };\n\n // Map tag size to icon size (icons should be smaller)\n const iconSize =\n this.size === 'sm' ? 'xs' : this.size === 'lg' ? 'sm' : 'xs';\n\n return html`\n <div\n class=${classMap(classes)}\n part=\"tag\"\n role=\"status\"\n aria-disabled=${this.disabled}\n @keydown=${this.handleKeyDown}\n tabindex=${this.removable && !this.disabled ? '0' : '-1'}\n >\n <span class=\"tag__content\">\n <slot></slot>\n </span>\n ${this.removable\n ? html`\n <button\n type=\"button\"\n class=\"tag__close\"\n part=\"close-button\"\n aria-label=\"Remove\"\n ?disabled=${this.disabled}\n @click=${this.handleRemove}\n tabindex=\"-1\"\n >\n <bp-icon .svg=${crossSvg} size=${iconSize}></bp-icon>\n </button>\n `\n : ''}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-tag': BpTag;\n }\n}\n"],"names":["tagStyles","css","BpTag","LitElement","event","removeEvent","keyboardEvent","classes","iconSize","html","classMap","crossSvg","__decorateClass","property","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"tag.js","sources":["../../source/components/tag/tag.style.ts","../../source/components/tag/tag.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tagStyles = css`\n /* Base styles /\n :host {\n display: inline-block;\n }\n\n .tag {\n display: inline-flex;\n align-items: center;\n gap: var(--bp-spacing-xs);\n font-family: var(--bp-font-family);\n font-weight: var(--bp-font-weight-medium);\n line-height: 1.5;\n border-radius: var(--bp-border-radius-md);\n border: var(--bp-border-width) solid transparent;\n transition:\n background-color var(--bp-transition-fast),\n border-color var(--bp-transition-fast),\n color var(--bp-transition-fast),\n box-shadow var(--bp-transition-fast);\n cursor: default;\n }\n\n .tag:focus-visible {\n outline: var(--bp-border-width) solid var(--bp-color-focus);\n outline-offset: var(--bp-border-width);\n }\n\n .tag__content {\n flex: 1;\n }\n\n .tag__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin: 0;\n background: transparent;\n border: none;\n cursor: pointer;\n color: inherit;\n opacity: 0.7;\n transition: opacity var(--bp-transition-fast);\n flex-shrink: 0;\n }\n\n .tag__close:hover {\n opacity: 1;\n }\n\n .tag__close:focus-visible {\n outline: var(--bp-border-width) solid currentColor;\n outline-offset: var(--bp-border-width);\n border-radius: var(--bp-border-radius-sm);\n opacity: 1;\n }\n\n / Variants - Solid /\n .tag--solid.tag--primary {\n background-color: var(--bp-color-primary);\n color: var(--bp-color-text-inverse);\n }\n\n .tag--solid.tag--success {\n background-color: var(--bp-color-success);\n color: var(--bp-color-text-inverse);\n }\n\n .tag--solid.tag--error {\n background-color: var(--bp-color-error);\n color: var(--bp-color-text-inverse);\n }\n\n .tag--solid.tag--warning {\n background-color: var(--bp-color-warning);\n color: var(--bp-color-text-inverse);\n }\n\n .tag--solid.tag--info {\n background-color: var(--bp-color-info);\n color: var(--bp-color-text-inverse);\n }\n\n .tag--solid.tag--neutral {\n background-color: var(--bp-color-border-strong);\n color: var(--bp-color-text);\n }\n\n / Variants - Outlined /\n .tag--outlined {\n background-color: transparent;\n }\n\n .tag--outlined.tag--primary {\n border-color: var(--bp-color-primary);\n color: var(--bp-color-primary);\n }\n\n .tag--outlined.tag--success {\n border-color: var(--bp-color-success);\n color: var(--bp-color-success);\n }\n\n .tag--outlined.tag--error {\n border-color: var(--bp-color-error);\n color: var(--bp-color-error);\n }\n\n .tag--outlined.tag--warning {\n border-color: var(--bp-color-warning);\n color: var(--bp-color-warning);\n }\n\n .tag--outlined.tag--info {\n border-color: var(--bp-color-info);\n color: var(--bp-color-info);\n }\n\n .tag--outlined.tag--neutral {\n border-color: var(--bp-color-border);\n color: var(--bp-color-text);\n }\n\n / Sizes /\n .tag--sm {\n padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n font-size: var(--bp-font-size-xs);\n height: var(--bp-spacing-6);\n }\n\n .tag--sm .tag__close {\n width: var(--bp-spacing-4);\n height: var(--bp-spacing-4);\n }\n\n .tag--md {\n padding: var(--bp-spacing-xs) var(--bp-spacing-md);\n font-size: var(--bp-font-size-sm);\n height: var(--bp-spacing-8);\n }\n\n .tag--md .tag__close {\n width: var(--bp-spacing-5);\n height: var(--bp-spacing-5);\n }\n\n .tag--lg {\n padding: var(--bp-spacing-sm) var(--bp-spacing-lg);\n font-size: var(--bp-font-size-base);\n height: var(--bp-spacing-10);\n }\n\n .tag--lg .tag__close {\n width: var(--bp-spacing-6);\n height: var(--bp-spacing-6);\n }\n\n / States /\n .tag--removable {\n cursor: pointer;\n }\n\n .tag--removable:hover {\n filter: brightness(0.95);\n }\n\n .tag--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .tag--disabled .tag__close {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n / Touch target size: ensure 44x44px minimum on touch devices /\n @media (pointer: coarse) {\n .tag__close {\n position: relative;\n min-width: 24px;\n min-height: 24px;\n }\n\n / Expand touch target with pseudo-element /\n .tag__close::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 44px;\n height: 44px;\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 { tagStyles } from './tag.style.js';\nimport { crossSvg } from '../icon/icons/entries/cross.js';\nimport { BpIcon } from '../icon/icon.js';\n\n/\n Tag component for displaying removable labels, chips, or category markers.\n \n @element bp-tag\n \n @slot - Default slot for tag content (text)\n \n @csspart tag - The tag container element\n * @csspart close-button - The close/remove button element\n \n @fires bp-remove - Fired when the tag is removed (cancelable)\n \n @example\n * ```html\n * <bp-tag>Design</bp-tag>\n * <bp-tag variant=\"outlined\" removable>TypeScript</bp-tag>\n * <bp-tag variant=\"success\" size=\"sm\">Active</bp-tag>\n * ```\n /\n@customElement('bp-tag')\nexport class BpTag 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 /\n Visual variant of the tag\n * @type {'solid' \| 'outlined'}\n * @default 'solid'\n /\n @property({ type: String, reflect: true }) declare variant:\n \| 'solid'\n \| 'outlined';\n\n /\n Size of the tag\n * @type {'sm' \| 'md' \| 'lg'}\n * @default 'md'\n /\n @property({ type: String, reflect: true }) declare size: 'sm' \| 'md' \| 'lg';\n\n /\n Color scheme of the tag\n * @type {'primary' \| 'success' \| 'error' \| 'warning' \| 'info' \| 'neutral'}\n * @default 'neutral'\n /\n @property({ type: String, reflect: true }) declare color:\n \| 'primary'\n \| 'success'\n \| 'error'\n \| 'warning'\n \| 'info'\n \| 'neutral';\n\n /\n Whether the tag can be removed\n * @type {boolean}\n * @default false\n /\n @property({ type: Boolean, reflect: true }) declare removable: boolean;\n\n /\n Whether the tag is disabled\n * @type {boolean}\n * @default false\n */\n @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n static styles = [tagStyles];\n\n constructor() {\n super();\n this.variant = 'solid';\n this.size = 'md';\n this.color = 'neutral';\n this.removable = false;\n this.disabled = false;\n }\n\n private handleRemove(event: Event) {\n event.stopPropagation();\n\n if (this.disabled) {\n return;\n }\n\n const removeEvent = new CustomEvent('bp-remove', {\n detail: {\n color: this.color,\n timestamp: Date.now(),\n },\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n\n this.dispatchEvent(removeEvent);\n\n // Only remove if event wasn't prevented\n if (!removeEvent.defaultPrevented) {\n this.remove();\n }\n }\n\n private handleKeyDown(event: Event) {\n if (this.disabled) {\n return;\n }\n\n const keyboardEvent = event as unknown as {\n key: string;\n preventDefault: () => void;\n };\n\n // Allow removing with Delete or Backspace when focused\n if (\n this.removable &&\n (keyboardEvent.key === 'Delete' \|\| keyboardEvent.key === 'Backspace')\n ) {\n keyboardEvent.preventDefault();\n this.handleRemove(event);\n }\n }\n\n render() {\n const classes = {\n tag: true,\n [`tag--${this.variant}`]: true,\n [`tag--${this.size}`]: true,\n [`tag--${this.color}`]: true,\n 'tag--disabled': this.disabled,\n 'tag--removable': this.removable,\n };\n\n // Map tag size to icon size (icons should be smaller)\n const iconSize =\n this.size === 'sm' ? 'xs' : this.size === 'lg' ? 'sm' : 'xs';\n\n return html`\n <div\n class=${classMap(classes)}\n part=\"tag\"\n role=\"status\"\n aria-disabled=${this.disabled}\n @keydown=${this.handleKeyDown}\n tabindex=${this.removable && !this.disabled ? '0' : '-1'}\n >\n <span class=\"tag__content\">\n <slot></slot>\n </span>\n ${this.removable\n ? html`\n <button\n type=\"button\"\n class=\"tag__close\"\n part=\"close-button\"\n aria-label=\"Remove\"\n ?disabled=${this.disabled}\n @click=${this.handleRemove}\n tabindex=\"-1\"\n >\n <bp-icon .svg=${crossSvg} size=${iconSize}></bp-icon>\n </button>\n `\n : ''}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-tag': BpTag;\n }\n}\n"],"names":["tagStyles","css","BpTag","LitElement","event","removeEvent","keyboardEvent","classes","iconSize","html","classMap","crossSvg","BpIcon","__decorateClass","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAYC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACyBlB,IAAMC,IAAN,cAAoBC,EAAW;AAAA,EAoDpC,cAAc;AACZ,UAAA,GACA,KAAK,UAAU,SACf,KAAK,OAAO,MACZ,KAAK,QAAQ,WACb,KAAK,YAAY,IACjB,KAAK,WAAW;AAAA,EAClB;AAAA,EAEQ,aAAaC,GAAc;AAGjC,QAFAA,EAAM,gBAAA,GAEF,KAAK;AACP;AAGF,UAAMC,IAAc,IAAI,YAAY,aAAa;AAAA,MAC/C,QAAQ;AAAA,QACN,OAAO,KAAK;AAAA,QACZ,WAAW,KAAK,IAAA;AAAA,MAAI;AAAA,MAEtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IAAA,CACb;AAED,SAAK,cAAcA,CAAW,GAGzBA,EAAY,oBACf,KAAK,OAAA;AAAA,EAET;AAAA,EAEQ,cAAcD,GAAc;AAClC,QAAI,KAAK;AACP;AAGF,UAAME,IAAgBF;AAMtB,IACE,KAAK,cACJE,EAAc,QAAQ,YAAYA,EAAc,QAAQ,iBAEzDA,EAAc,eAAA,GACd,KAAK,aAAaF,CAAK;AAAA,EAE3B;AAAA,EAEA,SAAS;AACP,UAAMG,IAAU;AAAA,MACd,KAAK;AAAA,MACL,CAAC,QAAQ,KAAK,OAAO,EAAE,GAAG;AAAA,MAC1B,CAAC,QAAQ,KAAK,IAAI,EAAE,GAAG;AAAA,MACvB,CAAC,QAAQ,KAAK,KAAK,EAAE,GAAG;AAAA,MACxB,iBAAiB,KAAK;AAAA,MACtB,kBAAkB,KAAK;AAAA,IAAA,GAInBC,IACJ,KAAK,SAAS,OAAO,OAAO,KAAK,SAAS,OAAO,OAAO;AAE1D,WAAOC;AAAA;AAAA,gBAEKC,EAASH,CAAO,CAAC;AAAA;AAAA;AAAA,wBAGT,KAAK,QAAQ;AAAA,mBAClB,KAAK,aAAa;AAAA,mBAClB,KAAK,aAAa,CAAC,KAAK,WAAW,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,UAKtD,KAAK,YACHE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMgB,KAAK,QAAQ;AAAA,yBAChB,KAAK,YAAY;AAAA;AAAA;AAAA,gCAGVE,CAAQ,SAASH,CAAQ;AAAA;AAAA,gBAG7C,EAAE;AAAA;AAAA;AAAA,EAGZ;AACF;AAtJaN,EAKJ,eAAe,CAACU,CAAM;AALlBV,EAkDJ,SAAS,CAACF,CAAS;AAtCyBa,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAZ9BZ,EAYwC,WAAA,WAAA,CAAA;AASAW,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArB9BZ,EAqBwC,WAAA,QAAA,CAAA;AAOAW,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5B9BZ,EA4BwC,WAAA,SAAA,CAAA;AAaCW,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzC/BZ,EAyCyC,WAAA,aAAA,CAAA;AAOAW,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhD/BZ,EAgDyC,WAAA,YAAA,CAAA;AAhDzCA,IAANW,EAAA;AAAA,EADNE,EAAc,QAAQ;AAAA,GACVb,CAAA;"}

package/dist/components/tree/tree.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { BpIcon } from '../icon/icon.js';
+import type { IconName } from '../icon/icon.js';
 /**
  * Tree node data structure
  */
@@ -9,7 +10,7 @@ export interface TreeNode {
     /** Display label */
     label: string;
     /** Optional icon name */
-    icon?: string;
+    icon?: IconName;
     /** URL to navigate to when the node is clicked */
     href?: string;
     /** Child nodes */
@@ -37,6 +38,11 @@ export interface TreeNode {
  * @csspart node-children - Container for child nodes
  */
 export declare class BpTree extends LitElement {
+    /**
+     * Child components that self-register as custom elements on import.
+     * Value imports prevent bundler tree-shaking of the registration side effect.
+     */
+    static dependencies: (typeof BpIcon)[];
     /** Array of tree nodes to render */
     nodes: TreeNode[];
     /** Currently selected node ID */

package/dist/components/tree/tree.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../source/components/tree/tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAOhD,OAAO,iBAAiB,CAAC;~~AAEzB~~;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,IAAI,CAAC,EAAE,~~MAAM~~,CAAC;~~IACd~~,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,oCAAoC;IACD,KAAK,EAAE,QAAQ,EAAE,CAAC;IAErD,iCAAiC;IACkB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7E,iCAAiC;IACE,WAAW,EAAE,MAAM,EAAE,CAAC;IAEzD,6CAA6C;IAErC,WAAW,EAAE,OAAO,CAAC;IAE7B,qDAAqD;IAE7C,SAAS,EAAE,OAAO,CAAC;IAE3B,oCAAoC;IACgB,UAAU,EAAE,OAAO,CAAC;IAExE,mBAAmB;IAWX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAEjC,iDAAiD;IACxC,OAAO,CAAC,WAAW,CAAgB;IAE5C;;;OAGG;IACH,OAAO,CAAC,kBAAkB,CAExB;IAEF;;OAEG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED,MAAM,CAAC,MAAM,4BAAgB;;IAa7B;;;;;OAKG;IACH,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAgB5B;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAgB9B;;;;;OAKG;IACH,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAQ5B;;;OAGG;IACH,SAAS,IAAI,IAAI;IAKjB;;;OAGG;IACH,WAAW,IAAI,IAAI;IAInB;;;;;;OAMG;IACH,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IA2BhC;;;OAGG;IACH,cAAc,IAAI,IAAI;IAKtB;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ;IAWhB;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAWrB;;;;;;;;OAQG;IACH,OAAO,CAAC,WAAW;IAsBnB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IA6BvB;;;;;;OAMG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;;;;;;;OAQG;IACH,OAAO,CAAC,aAAa;IA6BrB;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAOlB;;;;;;;OAOG;IACH,OAAO,CAAC,UAAU;IA0FlB,MAAM;CAoBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
1	+ {"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../source/components/tree/tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAOhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC;;;OAGG;IACH,MAAM,CAAC,YAAY,oBAAY;IAE/B,oCAAoC;IACD,KAAK,EAAE,QAAQ,EAAE,CAAC;IAErD,iCAAiC;IACkB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7E,iCAAiC;IACE,WAAW,EAAE,MAAM,EAAE,CAAC;IAEzD,6CAA6C;IAErC,WAAW,EAAE,OAAO,CAAC;IAE7B,qDAAqD;IAE7C,SAAS,EAAE,OAAO,CAAC;IAE3B,oCAAoC;IACgB,UAAU,EAAE,OAAO,CAAC;IAExE,mBAAmB;IAWX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAEjC,iDAAiD;IACxC,OAAO,CAAC,WAAW,CAAgB;IAE5C;;;OAGG;IACH,OAAO,CAAC,kBAAkB,CAExB;IAEF;;OAEG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED,MAAM,CAAC,MAAM,4BAAgB;;IAa7B;;;;;OAKG;IACH,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAgB5B;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAgB9B;;;;;OAKG;IACH,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAQ5B;;;OAGG;IACH,SAAS,IAAI,IAAI;IAKjB;;;OAGG;IACH,WAAW,IAAI,IAAI;IAInB;;;;;;OAMG;IACH,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IA2BhC;;;OAGG;IACH,cAAc,IAAI,IAAI;IAKtB;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ;IAWhB;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAWrB;;;;;;;;OAQG;IACH,OAAO,CAAC,WAAW;IAsBnB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IA6BvB;;;;;;OAMG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;;;;;;;OAQG;IACH,OAAO,CAAC,aAAa;IA6BrB;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAOlB;;;;;;;OAOG;IACH,OAAO,CAAC,UAAU;IA0FlB,MAAM;CAoBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/tree.js CHANGED Viewed

@@ -4,7 +4,8 @@ import { ifDefined as h } from "lit/directives/if-defined.js";
 import { repeat as f } from "lit/directives/repeat.js";
 import { m as y } from "../shared/memoize-DlOFy-92.js";
 import { chevronRightSvg as w } from "../icons/chevron-right.js";
-const $ = g`
+import { BpIcon as $ } from "./icon.js";
+const k = g`
   /* Base styles */
   :host {
     display: block;
@@ -216,10 +217,10 @@ const $ = g`
     }
   }
 `;
-var k = Object.defineProperty, N = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
-  for (var o = i > 1 ? void 0 : i ? N(t, s) : t, c = e.length - 1, p; c >= 0; c--)
+var N = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? S(t, s) : t, c = e.length - 1, p; c >= 0; c--)
     (p = e[c]) && (o = (i ? p(t, s, o) : p(o)) || o);
-  return i && o && k(t, s, o), o;
+  return i && o && N(t, s, o), o;
 };
 let r = class extends v {
   constructor() {
@@ -543,7 +544,8 @@ let r = class extends v {
     `;
   }
 };
-r.styles = [$];
+r.dependencies = [$];
+r.styles = [k];
 a([
   d({ type: Array })
 ], r.prototype, "nodes", 2);

package/dist/components/tree.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree.js","sources":["../../source/components/tree/tree.style.ts","../../source/components/tree/tree.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const treeStyles = css`\n /* Base styles /\n :host {\n display: block;\n }\n\n .tree {\n font-family: var(--bp-font-family);\n font-size: var(--bp-font-size-base);\n color: var(--bp-color-text);\n }\n\n / Node structure /\n .node {\n position: relative;\n }\n\n .node-content {\n display: flex;\n align-items: center;\n gap: var(--bp-spacing-2);\n padding: var(--bp-spacing-2) var(--bp-spacing-3);\n padding-left: calc(\n var(--bp-spacing-3) + var(--node-level, 0) var(--bp-spacing-5)\n );\n border-radius: var(--bp-border-radius-sm);\n cursor: pointer;\n user-select: none;\n transition:\n background-color var(--bp-transition-fast),\n color var(--bp-transition-fast);\n }\n\n .node-content:hover {\n background-color: var(--bp-color-surface-subdued);\n }\n\n .node-content:focus {\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n outline-offset: var(--bp-focus-offset);\n }\n\n .node-content:focus:not(:focus-visible) {\n outline: none;\n }\n\n .node-content: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\n /* Selected state /\n .node-content--selected {\n background-color: oklch(from var(--bp-color-primary) l c h / 0.15);\n color: var(--bp-color-primary);\n }\n\n .node-content--selected:hover {\n background-color: oklch(from var(--bp-color-primary) l c h / 0.2);\n }\n\n / Active state /\n .node-content:active {\n background-color: var(--bp-color-surface-subdued);\n transform: translateY(1px);\n }\n\n .node-content--selected:active {\n background-color: oklch(from var(--bp-color-primary) l c h / 0.25);\n }\n\n / Toggle icon /\n .node-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--bp-spacing-5);\n height: var(--bp-spacing-5);\n flex-shrink: 0;\n visibility: hidden;\n }\n\n .node-toggle--visible {\n visibility: visible;\n }\n\n .node-toggle--visible:hover {\n background-color: var(--bp-color-surface-subdued);\n border-radius: var(--bp-border-radius-sm);\n }\n\n .toggle-icon {\n width: var(--bp-spacing-4);\n height: var(--bp-spacing-4);\n transition: transform var(--bp-transition-fast) ease-out;\n }\n\n .toggle-icon--expanded {\n transform: rotate(90deg);\n }\n\n / Node custom icon /\n .node-icon {\n flex-shrink: 0;\n color: var(--bp-color-text-muted);\n }\n\n / Node label /\n .node-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n / Children container /\n .node-children {\n position: relative;\n content-visibility: auto;\n contain-intrinsic-size: auto 200px;\n }\n\n / Expanded state visual cue /\n .node--expanded > .node-content {\n background-color: var(--bp-color-surface);\n }\n\n / Disabled state /\n .node--disabled .node-content {\n cursor: not-allowed;\n }\n\n .node--disabled .node-label {\n opacity: var(--bp-opacity-disabled);\n }\n\n .node--disabled .node-content:hover {\n background-color: transparent;\n }\n\n / Show lines variant /\n .tree--lines .node-children {\n margin-left: calc(var(--bp-spacing-4) + var(--bp-spacing-4));\n padding-left: var(--bp-spacing-4);\n border-left: var(--bp-border-width) solid var(--bp-color-border);\n }\n\n / Sizes /\n .tree--sm {\n font-size: var(--bp-font-size-sm);\n }\n\n .tree--sm .node-content {\n padding: var(--bp-spacing-1) var(--bp-spacing-2);\n padding-left: calc(\n var(--bp-spacing-2) + var(--node-level, 0) var(--bp-spacing-4)\n );\n }\n\n .tree--sm .node-toggle {\n width: var(--bp-spacing-4);\n height: var(--bp-spacing-4);\n }\n\n .tree--sm .toggle-icon {\n width: var(--bp-spacing-3);\n height: var(--bp-spacing-3);\n }\n\n .tree--lg {\n font-size: var(--bp-font-size-lg);\n }\n\n .tree--lg .node-content {\n padding: var(--bp-spacing-3) var(--bp-spacing-4);\n padding-left: calc(\n var(--bp-spacing-4) + var(--node-level, 0) * var(--bp-spacing-6)\n );\n }\n\n .tree--lg .node-toggle {\n width: var(--bp-spacing-6);\n height: var(--bp-spacing-6);\n }\n\n .tree--lg .toggle-icon {\n width: var(--bp-spacing-5);\n height: var(--bp-spacing-5);\n }\n\n /* Link nodes — reset anchor styles so links look like regular nodes /\n a.node-content {\n text-decoration: none;\n color: inherit;\n }\n\n a.node-content:visited {\n color: inherit;\n }\n\n / Reduced motion /\n @media (prefers-reduced-motion: reduce) {\n .node-content,\n .toggle-icon {\n transition: none;\n }\n\n .node-content:active {\n transform: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { treeStyles } from './tree.style.js';\nimport { memoizeOne } from '../../utilities/memoize.js';\nimport { chevronRightSvg } from '../icon/icons/entries/chevron-right.js';\nimport '../icon/icon.js';\n\n/\n Tree node data structure\n /\nexport interface TreeNode {\n /* Unique identifier for the node /\n id: string;\n /* Display label /\n label: string;\n /* Optional icon name /\n icon?: string;\n /* URL to navigate to when the node is clicked /\n href?: string;\n /* Child nodes /\n children?: TreeNode[];\n /* Whether the node is disabled /\n disabled?: boolean;\n /* Custom data attached to the node /\n data?: unknown;\n}\n\n/\n A hierarchical tree component for displaying nested data structures.\n \n @fires bp-select - Fired when a node is selected. Detail: { node: TreeNode, path: string[] }\n * @fires bp-expand - Fired when a node is expanded. Detail: { node: TreeNode, expanded: boolean }\n * @fires bp-collapse - Fired when a node is collapsed. Detail: { node: TreeNode, expanded: boolean }\n * @fires bp-navigate - Fired when a node with href is clicked. Detail: { node: TreeNode, href: string, path: string[] }. Call preventDefault() to handle navigation yourself.\n \n @slot - Default slot for custom tree items (when not using data prop)\n \n @csspart tree - The tree container\n * @csspart node - Individual tree nodes\n * @csspart node-content - The clickable content area of a node\n * @csspart node-icon - The expand/collapse icon\n * @csspart node-label - The node label text\n * @csspart node-children - Container for child nodes\n /\n@customElement('bp-tree')\nexport class BpTree extends LitElement {\n /* Array of tree nodes to render /\n @property({ type: Array }) declare nodes: TreeNode[];\n\n /* Currently selected node ID /\n @property({ type: String, reflect: true }) declare selectedId: string \| null;\n\n /* Array of expanded node IDs /\n @property({ type: Array }) declare expandedIds: string[];\n\n /* Whether multiple nodes can be selected /\n @property({ type: Boolean, reflect: true, attribute: 'multi-select' })\n declare multiSelect: boolean;\n\n /* Whether to show connecting lines between nodes /\n @property({ type: Boolean, reflect: true, attribute: 'show-lines' })\n declare showLines: boolean;\n\n /* Whether nodes can be selected /\n @property({ type: Boolean, reflect: true }) declare selectable: boolean;\n\n /* Size variant /\n @property({\n type: String,\n reflect: true,\n converter: {\n fromAttribute: (value: string \| null) => {\n const valid = ['sm', 'md', 'lg'];\n return value && valid.includes(value) ? value : 'md';\n },\n },\n })\n declare size: 'sm' \| 'md' \| 'lg';\n\n /* Selected node IDs when multiSelect is true /\n @state() private selectedIds: string[] = [];\n\n /\n Memoized computation of expanded IDs as a Set for O(1) lookups.\n * Only recomputes when expandedIds reference changes.\n /\n private computeExpandedSet = memoizeOne(\n (expandedIds: string[]): Set<string> => new Set(expandedIds)\n );\n\n /\n Get the memoized expanded set for fast lookups during rendering.\n /\n private get expandedSet(): Set<string> {\n return this.computeExpandedSet(this.expandedIds);\n }\n\n static styles = [treeStyles];\n\n constructor() {\n super();\n this.nodes = [];\n this.selectedId = null;\n this.expandedIds = [];\n this.multiSelect = false;\n this.showLines = false;\n this.selectable = true;\n this.size = 'md';\n }\n\n /\n Expand a node by ID.\n * Adds the node to expandedIds and dispatches bp-expand event.\n \n @param nodeId - The ID of the node to expand\n /\n expand(nodeId: string): void {\n if (!this.expandedSet.has(nodeId)) {\n this.expandedIds = [...this.expandedIds, nodeId];\n const node = this.findNode(nodeId, this.nodes);\n if (node) {\n this.dispatchEvent(\n new CustomEvent('bp-expand', {\n detail: { node, expanded: true },\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n }\n\n /\n Collapse a node by ID.\n * Removes the node from expandedIds and dispatches bp-collapse event.\n \n @param nodeId - The ID of the node to collapse\n /\n collapse(nodeId: string): void {\n if (this.expandedSet.has(nodeId)) {\n this.expandedIds = this.expandedIds.filter((id) => id !== nodeId);\n const node = this.findNode(nodeId, this.nodes);\n if (node) {\n this.dispatchEvent(\n new CustomEvent('bp-collapse', {\n detail: { node, expanded: false },\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n }\n\n /\n Toggle a node's expanded state.\n * Calls expand() if collapsed, collapse() if expanded.\n \n @param nodeId - The ID of the node to toggle\n /\n toggle(nodeId: string): void {\n if (this.expandedSet.has(nodeId)) {\n this.collapse(nodeId);\n } else {\n this.expand(nodeId);\n }\n }\n\n /\n Expand all nodes in the tree.\n * Sets expandedIds to include all nodes with children.\n /\n expandAll(): void {\n const allIds = this.getAllNodeIds(this.nodes);\n this.expandedIds = allIds;\n }\n\n /\n Collapse all nodes in the tree.\n * Clears the expandedIds array.\n /\n collapseAll(): void {\n this.expandedIds = [];\n }\n\n /\n Select a node by ID.\n * Respects multiSelect setting and disabled state.\n * Dispatches bp-select event with node, selectedIds, and path.\n \n @param nodeId - The ID of the node to select\n /\n selectNode(nodeId: string): void {\n const node = this.findNode(nodeId, this.nodes);\n if (!node \|\| node.disabled) return;\n\n if (this.multiSelect) {\n if (this.selectedIds.includes(nodeId)) {\n this.selectedIds = this.selectedIds.filter((id) => id !== nodeId);\n } else {\n this.selectedIds = [...this.selectedIds, nodeId];\n }\n } else {\n this.selectedId = nodeId;\n }\n\n this.dispatchEvent(\n new CustomEvent('bp-select', {\n detail: {\n node,\n selectedIds: this.multiSelect ? this.selectedIds : [nodeId],\n path: this.getNodePath(nodeId, this.nodes),\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /\n Clear all selections.\n * Resets both selectedId and selectedIds.\n /\n clearSelection(): void {\n this.selectedId = null;\n this.selectedIds = [];\n }\n\n /\n Recursively finds a node by ID in the tree structure.\n \n @param nodeId - The ID to search for\n * @param nodes - The array of nodes to search within\n * @returns The found node or null if not found\n /\n private findNode(nodeId: string, nodes: TreeNode[]): TreeNode \| null {\n for (const node of nodes) {\n if (node.id === nodeId) return node;\n if (node.children) {\n const found = this.findNode(nodeId, node.children);\n if (found) return found;\n }\n }\n return null;\n }\n\n /\n Recursively collects all node IDs that have children.\n * Used for expandAll functionality.\n \n @param nodes - The array of nodes to collect IDs from\n * @returns Array of node IDs that have children\n /\n private getAllNodeIds(nodes: TreeNode[]): string[] {\n const ids: string[] = [];\n for (const node of nodes) {\n if (node.children && node.children.length > 0) {\n ids.push(node.id);\n ids.push(...this.getAllNodeIds(node.children));\n }\n }\n return ids;\n }\n\n /\n Gets the path from root to a specific node.\n * Returns an array of node IDs representing the path.\n \n @param nodeId - The target node ID\n * @param nodes - The array of nodes to search within\n * @param path - Accumulator for the current path (used in recursion)\n * @returns Array of node IDs from root to target\n /\n private getNodePath(\n nodeId: string,\n nodes: TreeNode[],\n path: string[] = []\n ): string[] {\n for (const node of nodes) {\n if (node.id === nodeId) {\n return [...path, node.id];\n }\n if (node.children) {\n const foundPath = this.getNodePath(nodeId, node.children, [\n ...path,\n node.id,\n ]);\n if (foundPath.length > path.length + 1) {\n return foundPath;\n }\n }\n }\n return path;\n }\n\n /\n Handles click events on tree nodes.\n * For nodes with href, dispatches bp-navigate and follows the link unless prevented.\n * For other nodes, selects the node if selectable and not disabled.\n \n @param event - The click event\n * @param node - The node that was clicked\n /\n private handleNodeClick(event: Event, node: TreeNode): void {\n event.stopPropagation();\n\n if (node.href && !node.disabled) {\n const navigateEvent = new CustomEvent('bp-navigate', {\n detail: {\n node,\n href: node.href,\n path: this.getNodePath(node.id, this.nodes),\n },\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n const allowed = this.dispatchEvent(navigateEvent);\n if (allowed) {\n // Default navigation — let the <a> handle it naturally\n return;\n }\n // Consumer called preventDefault(); suppress default link behavior\n event.preventDefault();\n return;\n }\n\n if (this.selectable && !node.disabled) {\n this.selectNode(node.id);\n }\n }\n\n /\n Handles click events on the expand/collapse toggle icon.\n * Prevents event propagation to avoid triggering node selection.\n \n @param event - The click event\n * @param node - The node whose toggle was clicked\n /\n private handleToggleClick(event: Event, node: TreeNode): void {\n event.stopPropagation();\n event.preventDefault();\n this.toggle(node.id);\n }\n\n /\n Handles keyboard navigation on tree nodes.\n * Enter/Space: select node\n * ArrowRight: expand node (if has children and collapsed)\n * ArrowLeft: collapse node (if has children and expanded)\n \n @param event - The keyboard event\n * @param node - The node that received the keyboard event\n /\n private handleKeyDown(event: KeyboardEvent, node: TreeNode): void {\n const hasChildren = node.children && node.children.length > 0;\n const isExpanded = this.expandedSet.has(node.id);\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (node.href && !node.disabled) {\n this.handleNodeClick(event, node);\n } else if (this.selectable && !node.disabled) {\n this.selectNode(node.id);\n }\n break;\n case 'ArrowRight':\n event.preventDefault();\n if (hasChildren && !isExpanded) {\n this.expand(node.id);\n }\n break;\n case 'ArrowLeft':\n event.preventDefault();\n if (hasChildren && isExpanded) {\n this.collapse(node.id);\n }\n break;\n }\n }\n\n /\n Checks if a node is currently selected.\n * Handles both single and multi-select modes.\n \n @param nodeId - The node ID to check\n * @returns True if the node is selected\n /\n private isSelected(nodeId: string): boolean {\n if (this.multiSelect) {\n return this.selectedIds.includes(nodeId);\n }\n return this.selectedId === nodeId;\n }\n\n /\n Recursively renders a tree node and its children.\n * Handles expand/collapse state, selection, and disabled state.\n \n @param node - The node to render\n * @param level - The nesting level (0 for root)\n * @returns Lit template result\n */\n private renderNode(node: TreeNode, level: number = 0): unknown {\n const hasChildren = node.children && node.children.length > 0;\n const isExpanded = this.expandedSet.has(node.id);\n const isSelected = this.isSelected(node.id);\n\n const contentClasses = `node-content ${isSelected ? 'node-content--selected' : ''} ${node.href ? 'node-content--link' : ''}`;\n\n const contentInner = html`\n <span\n class=\"node-toggle ${hasChildren ? 'node-toggle--visible' : ''}\"\n part=\"node-icon\"\n @click=${(e: Event) => this.handleToggleClick(e, node)}\n >\n ${hasChildren\n ? html`<bp-icon\n class=\"toggle-icon ${isExpanded ? 'toggle-icon--expanded' : ''}\"\n .svg=${chevronRightSvg}\n size=\"sm\"\n ></bp-icon>`\n : nothing}\n </span>\n ${node.icon\n ? html`<bp-icon\n class=\"node-icon\"\n part=\"node-custom-icon\"\n name=${node.icon}\n size=\"sm\"\n ></bp-icon>`\n : nothing}\n <span class=\"node-label\" part=\"node-label\">${node.label}</span>\n `;\n\n const nodeContent = node.href\n ? html`\n <a\n class=${contentClasses}\n part=\"node-content\"\n href=${node.href}\n tabindex=${node.disabled ? -1 : 0}\n @click=${(e: Event) => this.handleNodeClick(e, node)}\n @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, node)}\n >\n ${contentInner}\n </a>\n `\n : html`\n <div\n class=${contentClasses}\n part=\"node-content\"\n tabindex=${node.disabled ? -1 : 0}\n @click=${(e: Event) => this.handleNodeClick(e, node)}\n @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, node)}\n >\n ${contentInner}\n </div>\n `;\n\n return html`\n <div\n class=\"node ${node.disabled ? 'node--disabled' : ''} ${hasChildren &&\n isExpanded\n ? 'node--expanded'\n : ''}\"\n part=\"node\"\n role=\"treeitem\"\n aria-expanded=${ifDefined(\n hasChildren ? (isExpanded ? 'true' : 'false') : undefined\n )}\n aria-selected=${ifDefined(\n this.selectable ? (isSelected ? 'true' : 'false') : undefined\n )}\n aria-disabled=${ifDefined(node.disabled ? 'true' : undefined)}\n style=\"--node-level: ${level}\"\n >\n ${nodeContent}\n ${hasChildren && isExpanded\n ? html`\n <div class=\"node-children\" part=\"node-children\" role=\"group\">\n ${repeat(\n node.children!,\n (child) => child.id,\n (child) => this.renderNode(child, level + 1)\n )}\n </div>\n `\n : nothing}\n </div>\n `;\n }\n\n render() {\n const hasNodes = this.nodes && this.nodes.length > 0;\n\n return html`\n <div\n class=\"tree tree--${this.size} ${this.showLines ? 'tree--lines' : ''}\"\n part=\"tree\"\n role=\"tree\"\n aria-multiselectable=${ifDefined(this.multiSelect ? 'true' : undefined)}\n >\n ${hasNodes\n ? repeat(\n this.nodes,\n (node) => node.id,\n (node) => this.renderNode(node, 0)\n )\n : html`<slot></slot>`}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-tree': BpTree;\n }\n}\n"],"names":["treeStyles","css","BpTree","LitElement","memoizeOne","expandedIds","nodeId","node","id","allIds","nodes","found","ids","path","foundPath","event","navigateEvent","hasChildren","isExpanded","level","isSelected","contentClasses","contentInner","html","e","chevronRightSvg","nothing","nodeContent","ifDefined","repeat","child","hasNodes","__decorateClass","property","value","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"tree.js","sources":["../../source/components/tree/tree.style.ts","../../source/components/tree/tree.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const treeStyles = css`\n /* Base styles /\n :host {\n display: block;\n }\n\n .tree {\n font-family: var(--bp-font-family);\n font-size: var(--bp-font-size-base);\n color: var(--bp-color-text);\n }\n\n / Node structure /\n .node {\n position: relative;\n }\n\n .node-content {\n display: flex;\n align-items: center;\n gap: var(--bp-spacing-2);\n padding: var(--bp-spacing-2) var(--bp-spacing-3);\n padding-left: calc(\n var(--bp-spacing-3) + var(--node-level, 0) var(--bp-spacing-5)\n );\n border-radius: var(--bp-border-radius-sm);\n cursor: pointer;\n user-select: none;\n transition:\n background-color var(--bp-transition-fast),\n color var(--bp-transition-fast);\n }\n\n .node-content:hover {\n background-color: var(--bp-color-surface-subdued);\n }\n\n .node-content:focus {\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n outline-offset: var(--bp-focus-offset);\n }\n\n .node-content:focus:not(:focus-visible) {\n outline: none;\n }\n\n .node-content: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\n /* Selected state /\n .node-content--selected {\n background-color: oklch(from var(--bp-color-primary) l c h / 0.15);\n color: var(--bp-color-primary);\n }\n\n .node-content--selected:hover {\n background-color: oklch(from var(--bp-color-primary) l c h / 0.2);\n }\n\n / Active state /\n .node-content:active {\n background-color: var(--bp-color-surface-subdued);\n transform: translateY(1px);\n }\n\n .node-content--selected:active {\n background-color: oklch(from var(--bp-color-primary) l c h / 0.25);\n }\n\n / Toggle icon /\n .node-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--bp-spacing-5);\n height: var(--bp-spacing-5);\n flex-shrink: 0;\n visibility: hidden;\n }\n\n .node-toggle--visible {\n visibility: visible;\n }\n\n .node-toggle--visible:hover {\n background-color: var(--bp-color-surface-subdued);\n border-radius: var(--bp-border-radius-sm);\n }\n\n .toggle-icon {\n width: var(--bp-spacing-4);\n height: var(--bp-spacing-4);\n transition: transform var(--bp-transition-fast) ease-out;\n }\n\n .toggle-icon--expanded {\n transform: rotate(90deg);\n }\n\n / Node custom icon /\n .node-icon {\n flex-shrink: 0;\n color: var(--bp-color-text-muted);\n }\n\n / Node label /\n .node-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n / Children container /\n .node-children {\n position: relative;\n content-visibility: auto;\n contain-intrinsic-size: auto 200px;\n }\n\n / Expanded state visual cue /\n .node--expanded > .node-content {\n background-color: var(--bp-color-surface);\n }\n\n / Disabled state /\n .node--disabled .node-content {\n cursor: not-allowed;\n }\n\n .node--disabled .node-label {\n opacity: var(--bp-opacity-disabled);\n }\n\n .node--disabled .node-content:hover {\n background-color: transparent;\n }\n\n / Show lines variant /\n .tree--lines .node-children {\n margin-left: calc(var(--bp-spacing-4) + var(--bp-spacing-4));\n padding-left: var(--bp-spacing-4);\n border-left: var(--bp-border-width) solid var(--bp-color-border);\n }\n\n / Sizes /\n .tree--sm {\n font-size: var(--bp-font-size-sm);\n }\n\n .tree--sm .node-content {\n padding: var(--bp-spacing-1) var(--bp-spacing-2);\n padding-left: calc(\n var(--bp-spacing-2) + var(--node-level, 0) var(--bp-spacing-4)\n );\n }\n\n .tree--sm .node-toggle {\n width: var(--bp-spacing-4);\n height: var(--bp-spacing-4);\n }\n\n .tree--sm .toggle-icon {\n width: var(--bp-spacing-3);\n height: var(--bp-spacing-3);\n }\n\n .tree--lg {\n font-size: var(--bp-font-size-lg);\n }\n\n .tree--lg .node-content {\n padding: var(--bp-spacing-3) var(--bp-spacing-4);\n padding-left: calc(\n var(--bp-spacing-4) + var(--node-level, 0) * var(--bp-spacing-6)\n );\n }\n\n .tree--lg .node-toggle {\n width: var(--bp-spacing-6);\n height: var(--bp-spacing-6);\n }\n\n .tree--lg .toggle-icon {\n width: var(--bp-spacing-5);\n height: var(--bp-spacing-5);\n }\n\n /* Link nodes — reset anchor styles so links look like regular nodes /\n a.node-content {\n text-decoration: none;\n color: inherit;\n }\n\n a.node-content:visited {\n color: inherit;\n }\n\n / Reduced motion /\n @media (prefers-reduced-motion: reduce) {\n .node-content,\n .toggle-icon {\n transition: none;\n }\n\n .node-content:active {\n transform: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { treeStyles } from './tree.style.js';\nimport { memoizeOne } from '../../utilities/memoize.js';\nimport { chevronRightSvg } from '../icon/icons/entries/chevron-right.js';\nimport { BpIcon } from '../icon/icon.js';\nimport type { IconName } from '../icon/icon.js';\n\n/\n Tree node data structure\n /\nexport interface TreeNode {\n /* Unique identifier for the node /\n id: string;\n /* Display label /\n label: string;\n /* Optional icon name /\n icon?: IconName;\n /* URL to navigate to when the node is clicked /\n href?: string;\n /* Child nodes /\n children?: TreeNode[];\n /* Whether the node is disabled /\n disabled?: boolean;\n /* Custom data attached to the node /\n data?: unknown;\n}\n\n/\n A hierarchical tree component for displaying nested data structures.\n \n @fires bp-select - Fired when a node is selected. Detail: { node: TreeNode, path: string[] }\n * @fires bp-expand - Fired when a node is expanded. Detail: { node: TreeNode, expanded: boolean }\n * @fires bp-collapse - Fired when a node is collapsed. Detail: { node: TreeNode, expanded: boolean }\n * @fires bp-navigate - Fired when a node with href is clicked. Detail: { node: TreeNode, href: string, path: string[] }. Call preventDefault() to handle navigation yourself.\n \n @slot - Default slot for custom tree items (when not using data prop)\n \n @csspart tree - The tree container\n * @csspart node - Individual tree nodes\n * @csspart node-content - The clickable content area of a node\n * @csspart node-icon - The expand/collapse icon\n * @csspart node-label - The node label text\n * @csspart node-children - Container for child nodes\n /\n@customElement('bp-tree')\nexport class BpTree 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 /* Array of tree nodes to render /\n @property({ type: Array }) declare nodes: TreeNode[];\n\n /* Currently selected node ID /\n @property({ type: String, reflect: true }) declare selectedId: string \| null;\n\n /* Array of expanded node IDs /\n @property({ type: Array }) declare expandedIds: string[];\n\n /* Whether multiple nodes can be selected /\n @property({ type: Boolean, reflect: true, attribute: 'multi-select' })\n declare multiSelect: boolean;\n\n /* Whether to show connecting lines between nodes /\n @property({ type: Boolean, reflect: true, attribute: 'show-lines' })\n declare showLines: boolean;\n\n /* Whether nodes can be selected /\n @property({ type: Boolean, reflect: true }) declare selectable: boolean;\n\n /* Size variant /\n @property({\n type: String,\n reflect: true,\n converter: {\n fromAttribute: (value: string \| null) => {\n const valid = ['sm', 'md', 'lg'];\n return value && valid.includes(value) ? value : 'md';\n },\n },\n })\n declare size: 'sm' \| 'md' \| 'lg';\n\n /* Selected node IDs when multiSelect is true /\n @state() private selectedIds: string[] = [];\n\n /\n Memoized computation of expanded IDs as a Set for O(1) lookups.\n * Only recomputes when expandedIds reference changes.\n /\n private computeExpandedSet = memoizeOne(\n (expandedIds: string[]): Set<string> => new Set(expandedIds)\n );\n\n /\n Get the memoized expanded set for fast lookups during rendering.\n /\n private get expandedSet(): Set<string> {\n return this.computeExpandedSet(this.expandedIds);\n }\n\n static styles = [treeStyles];\n\n constructor() {\n super();\n this.nodes = [];\n this.selectedId = null;\n this.expandedIds = [];\n this.multiSelect = false;\n this.showLines = false;\n this.selectable = true;\n this.size = 'md';\n }\n\n /\n Expand a node by ID.\n * Adds the node to expandedIds and dispatches bp-expand event.\n \n @param nodeId - The ID of the node to expand\n /\n expand(nodeId: string): void {\n if (!this.expandedSet.has(nodeId)) {\n this.expandedIds = [...this.expandedIds, nodeId];\n const node = this.findNode(nodeId, this.nodes);\n if (node) {\n this.dispatchEvent(\n new CustomEvent('bp-expand', {\n detail: { node, expanded: true },\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n }\n\n /\n Collapse a node by ID.\n * Removes the node from expandedIds and dispatches bp-collapse event.\n \n @param nodeId - The ID of the node to collapse\n /\n collapse(nodeId: string): void {\n if (this.expandedSet.has(nodeId)) {\n this.expandedIds = this.expandedIds.filter((id) => id !== nodeId);\n const node = this.findNode(nodeId, this.nodes);\n if (node) {\n this.dispatchEvent(\n new CustomEvent('bp-collapse', {\n detail: { node, expanded: false },\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n }\n\n /\n Toggle a node's expanded state.\n * Calls expand() if collapsed, collapse() if expanded.\n \n @param nodeId - The ID of the node to toggle\n /\n toggle(nodeId: string): void {\n if (this.expandedSet.has(nodeId)) {\n this.collapse(nodeId);\n } else {\n this.expand(nodeId);\n }\n }\n\n /\n Expand all nodes in the tree.\n * Sets expandedIds to include all nodes with children.\n /\n expandAll(): void {\n const allIds = this.getAllNodeIds(this.nodes);\n this.expandedIds = allIds;\n }\n\n /\n Collapse all nodes in the tree.\n * Clears the expandedIds array.\n /\n collapseAll(): void {\n this.expandedIds = [];\n }\n\n /\n Select a node by ID.\n * Respects multiSelect setting and disabled state.\n * Dispatches bp-select event with node, selectedIds, and path.\n \n @param nodeId - The ID of the node to select\n /\n selectNode(nodeId: string): void {\n const node = this.findNode(nodeId, this.nodes);\n if (!node \|\| node.disabled) return;\n\n if (this.multiSelect) {\n if (this.selectedIds.includes(nodeId)) {\n this.selectedIds = this.selectedIds.filter((id) => id !== nodeId);\n } else {\n this.selectedIds = [...this.selectedIds, nodeId];\n }\n } else {\n this.selectedId = nodeId;\n }\n\n this.dispatchEvent(\n new CustomEvent('bp-select', {\n detail: {\n node,\n selectedIds: this.multiSelect ? this.selectedIds : [nodeId],\n path: this.getNodePath(nodeId, this.nodes),\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /\n Clear all selections.\n * Resets both selectedId and selectedIds.\n /\n clearSelection(): void {\n this.selectedId = null;\n this.selectedIds = [];\n }\n\n /\n Recursively finds a node by ID in the tree structure.\n \n @param nodeId - The ID to search for\n * @param nodes - The array of nodes to search within\n * @returns The found node or null if not found\n /\n private findNode(nodeId: string, nodes: TreeNode[]): TreeNode \| null {\n for (const node of nodes) {\n if (node.id === nodeId) return node;\n if (node.children) {\n const found = this.findNode(nodeId, node.children);\n if (found) return found;\n }\n }\n return null;\n }\n\n /\n Recursively collects all node IDs that have children.\n * Used for expandAll functionality.\n \n @param nodes - The array of nodes to collect IDs from\n * @returns Array of node IDs that have children\n /\n private getAllNodeIds(nodes: TreeNode[]): string[] {\n const ids: string[] = [];\n for (const node of nodes) {\n if (node.children && node.children.length > 0) {\n ids.push(node.id);\n ids.push(...this.getAllNodeIds(node.children));\n }\n }\n return ids;\n }\n\n /\n Gets the path from root to a specific node.\n * Returns an array of node IDs representing the path.\n \n @param nodeId - The target node ID\n * @param nodes - The array of nodes to search within\n * @param path - Accumulator for the current path (used in recursion)\n * @returns Array of node IDs from root to target\n /\n private getNodePath(\n nodeId: string,\n nodes: TreeNode[],\n path: string[] = []\n ): string[] {\n for (const node of nodes) {\n if (node.id === nodeId) {\n return [...path, node.id];\n }\n if (node.children) {\n const foundPath = this.getNodePath(nodeId, node.children, [\n ...path,\n node.id,\n ]);\n if (foundPath.length > path.length + 1) {\n return foundPath;\n }\n }\n }\n return path;\n }\n\n /\n Handles click events on tree nodes.\n * For nodes with href, dispatches bp-navigate and follows the link unless prevented.\n * For other nodes, selects the node if selectable and not disabled.\n \n @param event - The click event\n * @param node - The node that was clicked\n /\n private handleNodeClick(event: Event, node: TreeNode): void {\n event.stopPropagation();\n\n if (node.href && !node.disabled) {\n const navigateEvent = new CustomEvent('bp-navigate', {\n detail: {\n node,\n href: node.href,\n path: this.getNodePath(node.id, this.nodes),\n },\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n const allowed = this.dispatchEvent(navigateEvent);\n if (allowed) {\n // Default navigation — let the <a> handle it naturally\n return;\n }\n // Consumer called preventDefault(); suppress default link behavior\n event.preventDefault();\n return;\n }\n\n if (this.selectable && !node.disabled) {\n this.selectNode(node.id);\n }\n }\n\n /\n Handles click events on the expand/collapse toggle icon.\n * Prevents event propagation to avoid triggering node selection.\n \n @param event - The click event\n * @param node - The node whose toggle was clicked\n /\n private handleToggleClick(event: Event, node: TreeNode): void {\n event.stopPropagation();\n event.preventDefault();\n this.toggle(node.id);\n }\n\n /\n Handles keyboard navigation on tree nodes.\n * Enter/Space: select node\n * ArrowRight: expand node (if has children and collapsed)\n * ArrowLeft: collapse node (if has children and expanded)\n \n @param event - The keyboard event\n * @param node - The node that received the keyboard event\n /\n private handleKeyDown(event: KeyboardEvent, node: TreeNode): void {\n const hasChildren = node.children && node.children.length > 0;\n const isExpanded = this.expandedSet.has(node.id);\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (node.href && !node.disabled) {\n this.handleNodeClick(event, node);\n } else if (this.selectable && !node.disabled) {\n this.selectNode(node.id);\n }\n break;\n case 'ArrowRight':\n event.preventDefault();\n if (hasChildren && !isExpanded) {\n this.expand(node.id);\n }\n break;\n case 'ArrowLeft':\n event.preventDefault();\n if (hasChildren && isExpanded) {\n this.collapse(node.id);\n }\n break;\n }\n }\n\n /\n Checks if a node is currently selected.\n * Handles both single and multi-select modes.\n \n @param nodeId - The node ID to check\n * @returns True if the node is selected\n /\n private isSelected(nodeId: string): boolean {\n if (this.multiSelect) {\n return this.selectedIds.includes(nodeId);\n }\n return this.selectedId === nodeId;\n }\n\n /\n Recursively renders a tree node and its children.\n * Handles expand/collapse state, selection, and disabled state.\n \n @param node - The node to render\n * @param level - The nesting level (0 for root)\n * @returns Lit template result\n */\n private renderNode(node: TreeNode, level: number = 0): unknown {\n const hasChildren = node.children && node.children.length > 0;\n const isExpanded = this.expandedSet.has(node.id);\n const isSelected = this.isSelected(node.id);\n\n const contentClasses = `node-content ${isSelected ? 'node-content--selected' : ''} ${node.href ? 'node-content--link' : ''}`;\n\n const contentInner = html`\n <span\n class=\"node-toggle ${hasChildren ? 'node-toggle--visible' : ''}\"\n part=\"node-icon\"\n @click=${(e: Event) => this.handleToggleClick(e, node)}\n >\n ${hasChildren\n ? html`<bp-icon\n class=\"toggle-icon ${isExpanded ? 'toggle-icon--expanded' : ''}\"\n .svg=${chevronRightSvg}\n size=\"sm\"\n ></bp-icon>`\n : nothing}\n </span>\n ${node.icon\n ? html`<bp-icon\n class=\"node-icon\"\n part=\"node-custom-icon\"\n name=${node.icon}\n size=\"sm\"\n ></bp-icon>`\n : nothing}\n <span class=\"node-label\" part=\"node-label\">${node.label}</span>\n `;\n\n const nodeContent = node.href\n ? html`\n <a\n class=${contentClasses}\n part=\"node-content\"\n href=${node.href}\n tabindex=${node.disabled ? -1 : 0}\n @click=${(e: Event) => this.handleNodeClick(e, node)}\n @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, node)}\n >\n ${contentInner}\n </a>\n `\n : html`\n <div\n class=${contentClasses}\n part=\"node-content\"\n tabindex=${node.disabled ? -1 : 0}\n @click=${(e: Event) => this.handleNodeClick(e, node)}\n @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, node)}\n >\n ${contentInner}\n </div>\n `;\n\n return html`\n <div\n class=\"node ${node.disabled ? 'node--disabled' : ''} ${hasChildren &&\n isExpanded\n ? 'node--expanded'\n : ''}\"\n part=\"node\"\n role=\"treeitem\"\n aria-expanded=${ifDefined(\n hasChildren ? (isExpanded ? 'true' : 'false') : undefined\n )}\n aria-selected=${ifDefined(\n this.selectable ? (isSelected ? 'true' : 'false') : undefined\n )}\n aria-disabled=${ifDefined(node.disabled ? 'true' : undefined)}\n style=\"--node-level: ${level}\"\n >\n ${nodeContent}\n ${hasChildren && isExpanded\n ? html`\n <div class=\"node-children\" part=\"node-children\" role=\"group\">\n ${repeat(\n node.children!,\n (child) => child.id,\n (child) => this.renderNode(child, level + 1)\n )}\n </div>\n `\n : nothing}\n </div>\n `;\n }\n\n render() {\n const hasNodes = this.nodes && this.nodes.length > 0;\n\n return html`\n <div\n class=\"tree tree--${this.size} ${this.showLines ? 'tree--lines' : ''}\"\n part=\"tree\"\n role=\"tree\"\n aria-multiselectable=${ifDefined(this.multiSelect ? 'true' : undefined)}\n >\n ${hasNodes\n ? repeat(\n this.nodes,\n (node) => node.id,\n (node) => this.renderNode(node, 0)\n )\n : html`<slot></slot>`}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-tree': BpTree;\n }\n}\n"],"names":["treeStyles","css","BpTree","LitElement","memoizeOne","expandedIds","nodeId","node","id","allIds","nodes","found","ids","path","foundPath","event","navigateEvent","hasChildren","isExpanded","level","isSelected","contentClasses","contentInner","html","e","chevronRightSvg","nothing","nodeContent","ifDefined","repeat","child","hasNodes","BpIcon","__decorateClass","property","value","state","customElement"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@krollins/blueprint",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A highly portable and customizable component library built on Lit",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -136,7 +136,7 @@
     "vitest": "^4.0.16"
   },
   "dependencies": {
-    "@krollins/blueprint": "^0.2.2",
+    "@krollins/blueprint": "^0.2.3",
     "lit": "^3.3.2"
   },
   "overrides": {