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

@krollins/blueprint 0.2.1 → 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 (53) 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/icon/icon.d.ts +4 -2
package/dist/components/icon/icon.d.ts.map +1 -1
package/dist/components/icon/icons/resolver.generated.d.ts +2 -0
package/dist/components/icon/icons/resolver.generated.d.ts.map +1 -0
package/dist/components/icon.js +21 -19
package/dist/components/icon.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/dist/icons/resolver.js +440 -0
package/dist/icons/resolver.js.map +1 -0
package/package.json +2 -2

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

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.js","sources":["../../source/components/breadcrumb/breadcrumb.style.ts","../../source/components/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const breadcrumbStyles = css`\n /* Base styles /\n :host {\n display: block;\n }\n\n / Separator variants - set custom properties on host to cross shadow boundaries /\n :host([separator='slash']) {\n --bp-breadcrumb-separator-content: '/';\n }\n\n :host([separator='chevron']) {\n --bp-breadcrumb-separator-content: '›';\n --bp-breadcrumb-separator-size: 1.2em;\n }\n\n :host([separator='arrow']) {\n --bp-breadcrumb-separator-content: '→';\n }\n\n :host([separator='dot']) {\n --bp-breadcrumb-separator-content: '•';\n --bp-breadcrumb-separator-size: var(--bp-font-size-lg);\n }\n\n / Size variants - set custom properties on host to cross shadow boundaries /\n :host([size='sm']) {\n --bp-breadcrumb-font-size: var(--bp-font-size-sm);\n --bp-breadcrumb-line-height: var(--bp-line-height-tight);\n }\n\n :host([size='md']) {\n --bp-breadcrumb-font-size: var(--bp-font-size-base);\n --bp-breadcrumb-line-height: var(--bp-line-height-normal);\n }\n\n :host([size='lg']) {\n --bp-breadcrumb-font-size: var(--bp-font-size-lg);\n --bp-breadcrumb-line-height: var(--bp-line-height-normal);\n }\n\n .breadcrumb {\n font-family: var(--bp-font-family);\n }\n\n .list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: 0;\n }\n\n .item {\n display: inline-flex;\n align-items: center;\n gap: 0;\n font-size: var(--bp-breadcrumb-font-size, var(--bp-font-size-base));\n line-height: var(--bp-breadcrumb-line-height, var(--bp-line-height-normal));\n }\n\n .item__icon {\n flex-shrink: 0;\n }\n\n .item__label {\n white-space: nowrap;\n }\n\n / Link styles /\n .link {\n display: inline-flex;\n align-items: center;\n gap: var(--bp-spacing-xs);\n color: var(--bp-color-text-muted);\n text-decoration: none;\n transition: color var(--bp-transition-fast);\n outline: none;\n border-radius: var(--bp-border-radius);\n }\n\n .link:hover {\n color: var(--bp-color-primary);\n text-decoration: underline;\n }\n\n .link:active {\n transform: translateY(1px);\n }\n\n .link: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 / Text (non-link) styles /\n .text {\n display: inline-flex;\n align-items: center;\n gap: var(--bp-spacing-xs);\n color: var(--bp-color-text);\n font-weight: var(--bp-font-weight-medium);\n }\n\n / Current item /\n .item--current .text {\n color: var(--bp-color-text);\n }\n\n / Separator styles /\n .separator {\n display: inline-flex;\n align-items: center;\n color: var(--bp-color-text-muted);\n margin: 0 var(--bp-spacing-2xs);\n user-select: none;\n }\n\n / Hide separator on last item /\n :host(:last-of-type) .separator {\n display: none;\n }\n\n / Separator content via ::before - uses custom properties from parent /\n .separator::before {\n content: var(--bp-breadcrumb-separator-content, '/');\n font-size: var(--bp-breadcrumb-separator-size, inherit);\n }\n\n .separator__icon {\n width: var(--bp-spacing-md);\n height: var(--bp-spacing-md);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .separator__icon--dot {\n font-size: var(--bp-font-size-lg);\n line-height: 1;\n }\n\n / Ellipsis button /\n .ellipsis-button {\n appearance: none;\n border: none;\n background: transparent;\n padding: var(--bp-spacing-xs);\n margin: calc(-1 var(--bp-spacing-xs));\n cursor: pointer;\n color: var(--bp-color-text-muted);\n border-radius: var(--bp-border-radius);\n transition: all var(--bp-transition-fast);\n outline: none;\n }\n\n .ellipsis-button:hover {\n color: var(--bp-color-primary);\n background: var(--bp-color-surface);\n }\n\n .ellipsis-button:active {\n transform: scale(0.95);\n }\n\n .ellipsis-button: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 .ellipsis-dots {\n font-size: var(--bp-font-size-base);\n letter-spacing: var(--bp-spacing-0-5);\n }\n\n /* Sizes /\n .breadcrumb--sm {\n font-size: var(--bp-font-size-sm);\n line-height: var(--bp-line-height-tight);\n }\n\n .breadcrumb--sm .separator__icon {\n width: var(--bp-spacing-sm);\n height: var(--bp-spacing-sm);\n }\n\n .breadcrumb--md {\n font-size: var(--bp-font-size-base);\n line-height: var(--bp-line-height-normal);\n }\n\n .breadcrumb--md .separator__icon {\n width: var(--bp-spacing-md);\n height: var(--bp-spacing-md);\n }\n\n .breadcrumb--lg {\n font-size: var(--bp-font-size-lg);\n line-height: var(--bp-line-height-normal);\n }\n\n .breadcrumb--lg .separator__icon {\n width: var(--bp-spacing-lg);\n height: var(--bp-spacing-lg);\n }\n\n / Separator variants /\n .breadcrumb--slash .separator__icon {\n font-size: inherit;\n }\n\n .breadcrumb--dot .separator__icon {\n font-size: inherit;\n }\n\n / Item ellipsis /\n .item--ellipsis {\n display: inline-flex;\n }\n\n / Collapse on mobile - handled via maxItems property instead of CSS /\n .breadcrumb--collapse-mobile {\n / Reserved for future container query support /\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { breadcrumbStyles } from './breadcrumb.style.js';\nimport type { IconName } from '../icon/icons/icon-name.generated.js';\nimport '../icon/icon.js';\n\nexport type BreadcrumbSize = 'sm' \| 'md' \| 'lg';\nexport type BreadcrumbSeparator = 'slash' \| 'chevron' \| 'arrow' \| 'dot';\n\n/\n Breadcrumb item interface for programmatic configuration\n /\nexport interface BreadcrumbItem {\n /* Display label for the breadcrumb item /\n label: string;\n /* URL for the breadcrumb link (omit for current page) /\n href?: string;\n /* Icon name to display before the label /\n icon?: IconName;\n /* Whether this is the current/active page /\n current?: boolean;\n}\n\n/\n A breadcrumb navigation component showing the user's location in a hierarchy.\n \n @element bp-breadcrumb\n \n @property {BreadcrumbItem[]} items - Array of breadcrumb items\n * @property {BreadcrumbSize} size - The size of the breadcrumb\n * @property {BreadcrumbSeparator} separator - The separator style between items\n * @property {string} ariaLabel - Accessible label for the navigation\n * @property {boolean} collapseOnMobile - Whether to collapse middle items on small screens\n * @property {number} maxItems - Maximum visible items before collapsing (0 = no limit)\n \n @slot - Default slot for custom breadcrumb items\n * @slot separator - Custom separator content\n \n @fires bp-breadcrumb-click - Fired when a breadcrumb item is clicked\n \n @csspart nav - The nav element wrapper\n * @csspart list - The ordered list element\n * @csspart item - Individual breadcrumb item\n * @csspart item-current - The current/active breadcrumb item\n * @csspart link - Breadcrumb link element\n * @csspart separator - Separator between items\n * @csspart ellipsis - The ellipsis button when items are collapsed\n /\n@customElement('bp-breadcrumb')\nexport class BpBreadcrumb extends LitElement {\n /\n Array of breadcrumb items\n /\n @property({ type: Array }) declare items: BreadcrumbItem[];\n\n /\n The size of the breadcrumb\n /\n @property({ type: String, reflect: true }) declare size: BreadcrumbSize;\n\n /\n The separator style between items\n /\n @property({ type: String, reflect: true })\n declare separator: BreadcrumbSeparator;\n\n /\n Accessible label for the navigation landmark\n /\n @property({ type: String, attribute: 'aria-label' })\n declare ariaLabel: string;\n\n /\n Whether to collapse middle items on small screens\n /\n @property({ type: Boolean, attribute: 'collapse-on-mobile' })\n declare collapseOnMobile: boolean;\n\n /\n Maximum visible items before collapsing (0 = no limit)\n /\n @property({ type: Number, attribute: 'max-items' }) declare maxItems: number;\n\n static styles = [breadcrumbStyles];\n\n constructor() {\n super();\n this.items = [];\n this.size = 'md';\n this.separator = 'slash';\n this.ariaLabel = 'Breadcrumb';\n this.collapseOnMobile = false;\n this.maxItems = 0;\n }\n\n private handleItemClick(\n _event: MouseEvent,\n item: BreadcrumbItem,\n index: number\n ) {\n // Don't prevent default for actual navigation\n this.dispatchEvent(\n new CustomEvent('bp-breadcrumb-click', {\n detail: { item, index },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleKeyDown(\n event: KeyboardEvent,\n item: BreadcrumbItem,\n index: number\n ) {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n if (!item.href) {\n event.preventDefault();\n }\n this.dispatchEvent(\n new CustomEvent('bp-breadcrumb-click', {\n detail: { item, index },\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n\n private renderSeparator() {\n const separatorIcons = {\n slash: html`<span class=\"separator__icon\">/</span>`,\n chevron: html`\n <svg\n class=\"separator__icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n >\n <path d=\"M9 18l6-6-6-6\" />\n </svg>\n `,\n arrow: html`\n <svg\n class=\"separator__icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n >\n <path d=\"M5 12h14M12 5l7 7-7 7\" />\n </svg>\n `,\n dot: html`<span class=\"separator__icon separator__icon--dot\">•</span>`,\n };\n\n return html`\n <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">\n <slot name=\"separator\">${separatorIcons[this.separator]}</slot>\n </span>\n `;\n }\n\n private renderItem(item: BreadcrumbItem, index: number, isLast: boolean) {\n const isCurrent = item.current \|\| isLast;\n const itemClasses = {\n item: true,\n 'item--current': isCurrent,\n };\n\n return html`\n <li\n class=${classMap(itemClasses)}\n part=\"item ${isCurrent ? 'item-current' : ''}\"\n >\n ${item.href && !isCurrent\n ? html`\n <a\n class=\"link\"\n part=\"link\"\n href=${item.href}\n @click=${(e: MouseEvent) =>\n this.handleItemClick(e, item, index)}\n @keydown=${(e: KeyboardEvent) =>\n this.handleKeyDown(e, item, index)}\n >\n ${item.icon\n ? html`<bp-icon\n name=${item.icon}\n class=\"item__icon\"\n ></bp-icon>`\n : nothing}\n <span class=\"item__label\">${item.label}</span>\n </a>\n `\n : html`\n <span\n class=\"text\"\n part=\"text\"\n aria-current=${ifDefined(isCurrent ? 'page' : undefined)}\n >\n ${item.icon\n ? html`<bp-icon\n name=${item.icon}\n class=\"item__icon\"\n ></bp-icon>`\n : nothing}\n <span class=\"item__label\">${item.label}</span>\n </span>\n `}\n ${!isLast ? this.renderSeparator() : nothing}\n </li>\n `;\n }\n\n private renderEllipsis(hiddenCount: number) {\n return html`\n <li class=\"item item--ellipsis\" part=\"item ellipsis\">\n <button\n class=\"ellipsis-button\"\n part=\"ellipsis-button\"\n aria-label=\"Show ${hiddenCount} more items\"\n title=\"Show ${hiddenCount} more items\"\n >\n <span class=\"ellipsis-dots\">…</span>\n </button>\n ${this.renderSeparator()}\n </li>\n `;\n }\n\n private getVisibleItems(): {\n items: BreadcrumbItem[];\n hiddenCount: number;\n showEllipsis: boolean;\n } {\n if (this.maxItems <= 0 \|\| this.items.length <= this.maxItems) {\n return { items: this.items, hiddenCount: 0, showEllipsis: false };\n }\n\n // Show first item, ellipsis, and last (maxItems - 1) items\n const firstItem = this.items[0];\n const lastItems = this.items.slice(-(this.maxItems - 1));\n const hiddenCount = this.items.length - this.maxItems;\n\n return {\n items: [firstItem, ...lastItems],\n hiddenCount,\n showEllipsis: true,\n };\n }\n\n render() {\n const containerClasses = {\n breadcrumb: true,\n [`breadcrumb--${this.size}`]: true,\n [`breadcrumb--separator-${this.separator}`]: true,\n 'breadcrumb--collapse-mobile': this.collapseOnMobile,\n };\n\n const {\n items: visibleItems,\n hiddenCount,\n showEllipsis,\n } = this.getVisibleItems();\n\n // If using programmatic items\n if (this.items.length > 0) {\n return html`\n <nav\n class=${classMap(containerClasses)}\n part=\"nav\"\n aria-label=${this.ariaLabel}\n >\n <ol class=\"list\" part=\"list\">\n ${showEllipsis\n ? html`\n ${this.renderItem(visibleItems[0], 0, false)}\n ${this.renderEllipsis(hiddenCount)}\n ${repeat(\n visibleItems.slice(1),\n (_item, index) => index,\n (item, index) =>\n this.renderItem(\n item,\n this.items.length - visibleItems.length + 1 + index,\n index === visibleItems.length - 2\n )\n )}\n `\n : repeat(\n visibleItems,\n (_item, index) => index,\n (item, index) =>\n this.renderItem(\n item,\n index,\n index === visibleItems.length - 1\n )\n )}\n </ol>\n </nav>\n `;\n }\n\n // Slotted content fallback\n return html`\n <nav\n class=${classMap(containerClasses)}\n part=\"nav\"\n aria-label=${this.ariaLabel}\n >\n <ol class=\"list\" part=\"list\">\n <slot></slot>\n </ol>\n </nav>\n `;\n }\n}\n\n/\n A breadcrumb item component for use with bp-breadcrumb.\n \n @element bp-breadcrumb-item\n \n @property {string} href - URL for the breadcrumb link\n * @property {boolean} current - Whether this is the current page\n \n @slot - Content of the breadcrumb item\n \n @csspart item - The item container\n * @csspart link - The link element (when href is provided)\n /\n@customElement('bp-breadcrumb-item')\nexport class BpBreadcrumbItem extends LitElement {\n /\n URL for the breadcrumb link (omit for current page)\n /\n @property({ type: String }) declare href: string;\n\n /\n Whether this is the current/active page\n */\n @property({ type: Boolean, reflect: true }) declare current: boolean;\n\n static styles = [breadcrumbStyles];\n\n constructor() {\n super();\n this.href = '';\n this.current = false;\n }\n\n render() {\n const itemClasses = {\n item: true,\n 'item--current': this.current,\n };\n\n return html`\n <li\n class=${classMap(itemClasses)}\n part=\"item ${this.current ? 'item-current' : ''}\"\n >\n ${this.href && !this.current\n ? html`\n <a class=\"link\" part=\"link\" href=${this.href}>\n <slot></slot>\n </a>\n `\n : html`\n <span\n class=\"text\"\n part=\"text\"\n aria-current=${ifDefined(this.current ? 'page' : undefined)}\n >\n <slot></slot>\n </span>\n `}\n <span class=\"separator\" part=\"separator\" aria-hidden=\"true\"></span>\n </li>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-breadcrumb': BpBreadcrumb;\n 'bp-breadcrumb-item': BpBreadcrumbItem;\n }\n}\n"],"names":["breadcrumbStyles","css","BpBreadcrumb","LitElement","_event","item","index","event","separatorIcons","html","isLast","isCurrent","classMap","e","nothing","ifDefined","hiddenCount","firstItem","lastItems","containerClasses","visibleItems","showEllipsis","repeat","_item","__decorateClass","property","customElement","BpBreadcrumbItem","itemClasses"],"mappings":";;;;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACkDzB,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAoC3C,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"}
1	+ {"version":3,"file":"breadcrumb.js","sources":["../../source/components/breadcrumb/breadcrumb.style.ts","../../source/components/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const breadcrumbStyles = css`\n /* Base styles /\n :host {\n display: block;\n }\n\n / Separator variants - set custom properties on host to cross shadow boundaries /\n :host([separator='slash']) {\n --bp-breadcrumb-separator-content: '/';\n }\n\n :host([separator='chevron']) {\n --bp-breadcrumb-separator-content: '›';\n --bp-breadcrumb-separator-size: 1.2em;\n }\n\n :host([separator='arrow']) {\n --bp-breadcrumb-separator-content: '→';\n }\n\n :host([separator='dot']) {\n --bp-breadcrumb-separator-content: '•';\n --bp-breadcrumb-separator-size: var(--bp-font-size-lg);\n }\n\n / Size variants - set custom properties on host to cross shadow boundaries /\n :host([size='sm']) {\n --bp-breadcrumb-font-size: var(--bp-font-size-sm);\n --bp-breadcrumb-line-height: var(--bp-line-height-tight);\n }\n\n :host([size='md']) {\n --bp-breadcrumb-font-size: var(--bp-font-size-base);\n --bp-breadcrumb-line-height: var(--bp-line-height-normal);\n }\n\n :host([size='lg']) {\n --bp-breadcrumb-font-size: var(--bp-font-size-lg);\n --bp-breadcrumb-line-height: var(--bp-line-height-normal);\n }\n\n .breadcrumb {\n font-family: var(--bp-font-family);\n }\n\n .list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: 0;\n }\n\n .item {\n display: inline-flex;\n align-items: center;\n gap: 0;\n font-size: var(--bp-breadcrumb-font-size, var(--bp-font-size-base));\n line-height: var(--bp-breadcrumb-line-height, var(--bp-line-height-normal));\n }\n\n .item__icon {\n flex-shrink: 0;\n }\n\n .item__label {\n white-space: nowrap;\n }\n\n / Link styles /\n .link {\n display: inline-flex;\n align-items: center;\n gap: var(--bp-spacing-xs);\n color: var(--bp-color-text-muted);\n text-decoration: none;\n transition: color var(--bp-transition-fast);\n outline: none;\n border-radius: var(--bp-border-radius);\n }\n\n .link:hover {\n color: var(--bp-color-primary);\n text-decoration: underline;\n }\n\n .link:active {\n transform: translateY(1px);\n }\n\n .link: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 / Text (non-link) styles /\n .text {\n display: inline-flex;\n align-items: center;\n gap: var(--bp-spacing-xs);\n color: var(--bp-color-text);\n font-weight: var(--bp-font-weight-medium);\n }\n\n / Current item /\n .item--current .text {\n color: var(--bp-color-text);\n }\n\n / Separator styles /\n .separator {\n display: inline-flex;\n align-items: center;\n color: var(--bp-color-text-muted);\n margin: 0 var(--bp-spacing-2xs);\n user-select: none;\n }\n\n / Hide separator on last item /\n :host(:last-of-type) .separator {\n display: none;\n }\n\n / Separator content via ::before - uses custom properties from parent /\n .separator::before {\n content: var(--bp-breadcrumb-separator-content, '/');\n font-size: var(--bp-breadcrumb-separator-size, inherit);\n }\n\n .separator__icon {\n width: var(--bp-spacing-md);\n height: var(--bp-spacing-md);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .separator__icon--dot {\n font-size: var(--bp-font-size-lg);\n line-height: 1;\n }\n\n / Ellipsis button /\n .ellipsis-button {\n appearance: none;\n border: none;\n background: transparent;\n padding: var(--bp-spacing-xs);\n margin: calc(-1 var(--bp-spacing-xs));\n cursor: pointer;\n color: var(--bp-color-text-muted);\n border-radius: var(--bp-border-radius);\n transition: all var(--bp-transition-fast);\n outline: none;\n }\n\n .ellipsis-button:hover {\n color: var(--bp-color-primary);\n background: var(--bp-color-surface);\n }\n\n .ellipsis-button:active {\n transform: scale(0.95);\n }\n\n .ellipsis-button: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 .ellipsis-dots {\n font-size: var(--bp-font-size-base);\n letter-spacing: var(--bp-spacing-0-5);\n }\n\n /* Sizes /\n .breadcrumb--sm {\n font-size: var(--bp-font-size-sm);\n line-height: var(--bp-line-height-tight);\n }\n\n .breadcrumb--sm .separator__icon {\n width: var(--bp-spacing-sm);\n height: var(--bp-spacing-sm);\n }\n\n .breadcrumb--md {\n font-size: var(--bp-font-size-base);\n line-height: var(--bp-line-height-normal);\n }\n\n .breadcrumb--md .separator__icon {\n width: var(--bp-spacing-md);\n height: var(--bp-spacing-md);\n }\n\n .breadcrumb--lg {\n font-size: var(--bp-font-size-lg);\n line-height: var(--bp-line-height-normal);\n }\n\n .breadcrumb--lg .separator__icon {\n width: var(--bp-spacing-lg);\n height: var(--bp-spacing-lg);\n }\n\n / Separator variants /\n .breadcrumb--slash .separator__icon {\n font-size: inherit;\n }\n\n .breadcrumb--dot .separator__icon {\n font-size: inherit;\n }\n\n / Item ellipsis /\n .item--ellipsis {\n display: inline-flex;\n }\n\n / Collapse on mobile - handled via maxItems property instead of CSS /\n .breadcrumb--collapse-mobile {\n / Reserved for future container query support /\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { breadcrumbStyles } from './breadcrumb.style.js';\nimport type { IconName } from '../icon/icons/icon-name.generated.js';\nimport { BpIcon } from '../icon/icon.js';\n\nexport type BreadcrumbSize = 'sm' \| 'md' \| 'lg';\nexport type BreadcrumbSeparator = 'slash' \| 'chevron' \| 'arrow' \| 'dot';\n\n/\n Breadcrumb item interface for programmatic configuration\n /\nexport interface BreadcrumbItem {\n /* Display label for the breadcrumb item /\n label: string;\n /* URL for the breadcrumb link (omit for current page) /\n href?: string;\n /* Icon name to display before the label /\n icon?: IconName;\n /* Whether this is the current/active page /\n current?: boolean;\n}\n\n/\n A breadcrumb navigation component showing the user's location in a hierarchy.\n \n @element bp-breadcrumb\n \n @property {BreadcrumbItem[]} items - Array of breadcrumb items\n * @property {BreadcrumbSize} size - The size of the breadcrumb\n * @property {BreadcrumbSeparator} separator - The separator style between items\n * @property {string} ariaLabel - Accessible label for the navigation\n * @property {boolean} collapseOnMobile - Whether to collapse middle items on small screens\n * @property {number} maxItems - Maximum visible items before collapsing (0 = no limit)\n \n @slot - Default slot for custom breadcrumb items\n * @slot separator - Custom separator content\n \n @fires bp-breadcrumb-click - Fired when a breadcrumb item is clicked\n \n @csspart nav - The nav element wrapper\n * @csspart list - The ordered list element\n * @csspart item - Individual breadcrumb item\n * @csspart item-current - The current/active breadcrumb item\n * @csspart link - Breadcrumb link element\n * @csspart separator - Separator between items\n * @csspart ellipsis - The ellipsis button when items are collapsed\n /\n@customElement('bp-breadcrumb')\nexport class BpBreadcrumb 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 Array of breadcrumb items\n /\n @property({ type: Array }) declare items: BreadcrumbItem[];\n\n /\n The size of the breadcrumb\n /\n @property({ type: String, reflect: true }) declare size: BreadcrumbSize;\n\n /\n The separator style between items\n /\n @property({ type: String, reflect: true })\n declare separator: BreadcrumbSeparator;\n\n /\n Accessible label for the navigation landmark\n /\n @property({ type: String, attribute: 'aria-label' })\n declare ariaLabel: string;\n\n /\n Whether to collapse middle items on small screens\n /\n @property({ type: Boolean, attribute: 'collapse-on-mobile' })\n declare collapseOnMobile: boolean;\n\n /\n Maximum visible items before collapsing (0 = no limit)\n /\n @property({ type: Number, attribute: 'max-items' }) declare maxItems: number;\n\n static styles = [breadcrumbStyles];\n\n constructor() {\n super();\n this.items = [];\n this.size = 'md';\n this.separator = 'slash';\n this.ariaLabel = 'Breadcrumb';\n this.collapseOnMobile = false;\n this.maxItems = 0;\n }\n\n private handleItemClick(\n _event: MouseEvent,\n item: BreadcrumbItem,\n index: number\n ) {\n // Don't prevent default for actual navigation\n this.dispatchEvent(\n new CustomEvent('bp-breadcrumb-click', {\n detail: { item, index },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleKeyDown(\n event: KeyboardEvent,\n item: BreadcrumbItem,\n index: number\n ) {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n if (!item.href) {\n event.preventDefault();\n }\n this.dispatchEvent(\n new CustomEvent('bp-breadcrumb-click', {\n detail: { item, index },\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n\n private renderSeparator() {\n const separatorIcons = {\n slash: html`<span class=\"separator__icon\">/</span>`,\n chevron: html`\n <svg\n class=\"separator__icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n >\n <path d=\"M9 18l6-6-6-6\" />\n </svg>\n `,\n arrow: html`\n <svg\n class=\"separator__icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n >\n <path d=\"M5 12h14M12 5l7 7-7 7\" />\n </svg>\n `,\n dot: html`<span class=\"separator__icon separator__icon--dot\">•</span>`,\n };\n\n return html`\n <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">\n <slot name=\"separator\">${separatorIcons[this.separator]}</slot>\n </span>\n `;\n }\n\n private renderItem(item: BreadcrumbItem, index: number, isLast: boolean) {\n const isCurrent = item.current \|\| isLast;\n const itemClasses = {\n item: true,\n 'item--current': isCurrent,\n };\n\n return html`\n <li\n class=${classMap(itemClasses)}\n part=\"item ${isCurrent ? 'item-current' : ''}\"\n >\n ${item.href && !isCurrent\n ? html`\n <a\n class=\"link\"\n part=\"link\"\n href=${item.href}\n @click=${(e: MouseEvent) =>\n this.handleItemClick(e, item, index)}\n @keydown=${(e: KeyboardEvent) =>\n this.handleKeyDown(e, item, index)}\n >\n ${item.icon\n ? html`<bp-icon\n name=${item.icon}\n class=\"item__icon\"\n ></bp-icon>`\n : nothing}\n <span class=\"item__label\">${item.label}</span>\n </a>\n `\n : html`\n <span\n class=\"text\"\n part=\"text\"\n aria-current=${ifDefined(isCurrent ? 'page' : undefined)}\n >\n ${item.icon\n ? html`<bp-icon\n name=${item.icon}\n class=\"item__icon\"\n ></bp-icon>`\n : nothing}\n <span class=\"item__label\">${item.label}</span>\n </span>\n `}\n ${!isLast ? this.renderSeparator() : nothing}\n </li>\n `;\n }\n\n private renderEllipsis(hiddenCount: number) {\n return html`\n <li class=\"item item--ellipsis\" part=\"item ellipsis\">\n <button\n class=\"ellipsis-button\"\n part=\"ellipsis-button\"\n aria-label=\"Show ${hiddenCount} more items\"\n title=\"Show ${hiddenCount} more items\"\n >\n <span class=\"ellipsis-dots\">…</span>\n </button>\n ${this.renderSeparator()}\n </li>\n `;\n }\n\n private getVisibleItems(): {\n items: BreadcrumbItem[];\n hiddenCount: number;\n showEllipsis: boolean;\n } {\n if (this.maxItems <= 0 \|\| this.items.length <= this.maxItems) {\n return { items: this.items, hiddenCount: 0, showEllipsis: false };\n }\n\n // Show first item, ellipsis, and last (maxItems - 1) items\n const firstItem = this.items[0];\n const lastItems = this.items.slice(-(this.maxItems - 1));\n const hiddenCount = this.items.length - this.maxItems;\n\n return {\n items: [firstItem, ...lastItems],\n hiddenCount,\n showEllipsis: true,\n };\n }\n\n render() {\n const containerClasses = {\n breadcrumb: true,\n [`breadcrumb--${this.size}`]: true,\n [`breadcrumb--separator-${this.separator}`]: true,\n 'breadcrumb--collapse-mobile': this.collapseOnMobile,\n };\n\n const {\n items: visibleItems,\n hiddenCount,\n showEllipsis,\n } = this.getVisibleItems();\n\n // If using programmatic items\n if (this.items.length > 0) {\n return html`\n <nav\n class=${classMap(containerClasses)}\n part=\"nav\"\n aria-label=${this.ariaLabel}\n >\n <ol class=\"list\" part=\"list\">\n ${showEllipsis\n ? html`\n ${this.renderItem(visibleItems[0], 0, false)}\n ${this.renderEllipsis(hiddenCount)}\n ${repeat(\n visibleItems.slice(1),\n (_item, index) => index,\n (item, index) =>\n this.renderItem(\n item,\n this.items.length - visibleItems.length + 1 + index,\n index === visibleItems.length - 2\n )\n )}\n `\n : repeat(\n visibleItems,\n (_item, index) => index,\n (item, index) =>\n this.renderItem(\n item,\n index,\n index === visibleItems.length - 1\n )\n )}\n </ol>\n </nav>\n `;\n }\n\n // Slotted content fallback\n return html`\n <nav\n class=${classMap(containerClasses)}\n part=\"nav\"\n aria-label=${this.ariaLabel}\n >\n <ol class=\"list\" part=\"list\">\n <slot></slot>\n </ol>\n </nav>\n `;\n }\n}\n\n/\n A breadcrumb item component for use with bp-breadcrumb.\n \n @element bp-breadcrumb-item\n \n @property {string} href - URL for the breadcrumb link\n * @property {boolean} current - Whether this is the current page\n \n @slot - Content of the breadcrumb item\n \n @csspart item - The item container\n * @csspart link - The link element (when href is provided)\n /\n@customElement('bp-breadcrumb-item')\nexport class BpBreadcrumbItem extends LitElement {\n /\n URL for the breadcrumb link (omit for current page)\n /\n @property({ type: String }) declare href: string;\n\n /\n Whether this is the current/active page\n */\n @property({ type: Boolean, reflect: true }) declare current: boolean;\n\n static styles = [breadcrumbStyles];\n\n constructor() {\n super();\n this.href = '';\n this.current = false;\n }\n\n render() {\n const itemClasses = {\n item: true,\n 'item--current': this.current,\n };\n\n return html`\n <li\n class=${classMap(itemClasses)}\n part=\"item ${this.current ? 'item-current' : ''}\"\n >\n ${this.href && !this.current\n ? html`\n <a class=\"link\" part=\"link\" href=${this.href}>\n <slot></slot>\n </a>\n `\n : html`\n <span\n class=\"text\"\n part=\"text\"\n aria-current=${ifDefined(this.current ? 'page' : undefined)}\n >\n <slot></slot>\n </span>\n `}\n <span class=\"separator\" part=\"separator\" aria-hidden=\"true\"></span>\n </li>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-breadcrumb': BpBreadcrumb;\n 'bp-breadcrumb-item': BpBreadcrumbItem;\n }\n}\n"],"names":["breadcrumbStyles","css","BpBreadcrumb","LitElement","_event","item","index","event","separatorIcons","html","isLast","isCurrent","classMap","e","nothing","ifDefined","hiddenCount","firstItem","lastItems","containerClasses","visibleItems","showEllipsis","repeat","_item","BpIcon","__decorateClass","property","customElement","BpBreadcrumbItem","itemClasses"],"mappings":";;;;;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACkDzB,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EA0C3C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"}

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { BpIcon } from '../icon/icon.js';
 export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
 export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
 /**
@@ -23,6 +23,11 @@ export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
  * @csspart close-button - The close button
  */
 export declare class BpDrawer 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)[];
     /** Whether the drawer is open */
     open: boolean;
     /** Which edge the drawer slides in from */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../source/components/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,iBAAiB,CAAC;~~AAEzB~~,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAErD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,iCAAiC;IACmB,IAAI,EAAE,OAAO,CAAC;IAElE,2CAA2C;IAanC,SAAS,EAAE,eAAe,CAAC;IAEnC,uEAAuE;IAW/D,IAAI,EAAE,UAAU,CAAC;IAEzB,uCAAuC;IAM/B,SAAS,EAAE,OAAO,CAAC;IAE3B,sDAAsD;IAM9C,eAAe,EAAE,OAAO,CAAC;IAEjC,gDAAgD;IAMxC,aAAa,EAAE,OAAO,CAAC;IAE/B,2CAA2C;IAMnC,YAAY,EAAE,OAAO,CAAC;IAE9B,sCAAsC;IACF,KAAK,EAAE,MAAM,CAAC;IAElD;;;OAGG;IACiD,MAAM,EAAE,OAAO,CAAC;IAEpE,mDAAmD;IACJ,OAAO,CAAC,SAAS,CAAS;IAEzE,mDAAmD;IACJ,OAAO,CAAC,SAAS,CAAS;IAEzE,OAAO,CAAC,wBAAwB,CAA4B;IAE5D,MAAM,CAAC,MAAM,4BAAkB;;IAe/B,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B;;;;;;OAMG;IACH,IAAI,IAAI,IAAI;IAKZ;;;;;;;OAOG;IACH,IAAI,CAAC,MAAM,GAAE,QAAQ,GAAG,UAAU,GAAG,cAAc,GAAG,KAAa,GAAG,IAAI;IAiB1E;;;OAGG;IACH,MAAM,IAAI,IAAI;IAQd,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUhE,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,aAAa,CAUnB;IAEF;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAIzB;IAEF;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAEtB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF,MAAM;CAwHP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
1	+ {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../source/components/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAErD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC;;;OAGG;IACH,MAAM,CAAC,YAAY,oBAAY;IAE/B,iCAAiC;IACmB,IAAI,EAAE,OAAO,CAAC;IAElE,2CAA2C;IAanC,SAAS,EAAE,eAAe,CAAC;IAEnC,uEAAuE;IAW/D,IAAI,EAAE,UAAU,CAAC;IAEzB,uCAAuC;IAM/B,SAAS,EAAE,OAAO,CAAC;IAE3B,sDAAsD;IAM9C,eAAe,EAAE,OAAO,CAAC;IAEjC,gDAAgD;IAMxC,aAAa,EAAE,OAAO,CAAC;IAE/B,2CAA2C;IAMnC,YAAY,EAAE,OAAO,CAAC;IAE9B,sCAAsC;IACF,KAAK,EAAE,MAAM,CAAC;IAElD;;;OAGG;IACiD,MAAM,EAAE,OAAO,CAAC;IAEpE,mDAAmD;IACJ,OAAO,CAAC,SAAS,CAAS;IAEzE,mDAAmD;IACJ,OAAO,CAAC,SAAS,CAAS;IAEzE,OAAO,CAAC,wBAAwB,CAA4B;IAE5D,MAAM,CAAC,MAAM,4BAAkB;;IAe/B,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B;;;;;;OAMG;IACH,IAAI,IAAI,IAAI;IAKZ;;;;;;;OAOG;IACH,IAAI,CAAC,MAAM,GAAE,QAAQ,GAAG,UAAU,GAAG,cAAc,GAAG,KAAa,GAAG,IAAI;IAiB1E;;;OAGG;IACH,MAAM,IAAI,IAAI;IAQd,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUhE,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,aAAa,CAUnB;IAEF;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAIzB;IAEF;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAEtB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF,MAAM;CAwHP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/drawer.js CHANGED Viewed

@@ -2,7 +2,8 @@ import { css as b, LitElement as u, nothing as l, html as n } from "lit";
 import { property as a, customElement as f } from "lit/decorators.js";
 import { b as d } from "../shared/boolean-converter-XDGfS9LC.js";
 import { closeSvg as w } from "../icons/close.js";
-const v = b`
+import { BpIcon as v } from "./icon.js";
+const m = b`
   /* Base styles */
   :host {
     display: contents;
@@ -311,10 +312,10 @@ const v = b`
     }
   }
 `;
-var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, p, i) => {
-  for (var s = i > 1 ? void 0 : i ? g(t, p) : t, c = e.length - 1, h; c >= 0; c--)
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, t, p, i) => {
+  for (var s = i > 1 ? void 0 : i ? y(t, p) : t, c = e.length - 1, h; c >= 0; c--)
     (h = e[c]) && (s = (i ? h(t, p, s) : h(s)) || s);
-  return i && s && m(t, p, s), s;
+  return i && s && g(t, p, s), s;
 };
 let r = class extends u {
   constructor() {
@@ -498,7 +499,8 @@ let r = class extends u {
     `;
   }
 };
-r.styles = [v];
+r.dependencies = [v];
+r.styles = [m];
 o([
   a({ type: Boolean, reflect: !0 })
 ], r.prototype, "open", 2);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.js","sources":["../../source/components/drawer/drawer.style.ts","../../source/components/drawer/drawer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const drawerStyles = css`\n /* Base styles /\n :host {\n display: contents;\n }\n\n .drawer {\n font-family: var(--bp-font-family);\n font-size: var(--bp-font-size-base);\n color: var(--bp-color-text);\n }\n\n / Overlay mode /\n .drawer--overlay {\n position: fixed;\n inset: 0;\n z-index: var(--bp-z-modal);\n pointer-events: none;\n }\n\n .drawer--overlay.drawer--open {\n pointer-events: auto;\n }\n\n / Backdrop /\n .backdrop {\n position: absolute;\n inset: 0;\n background-color: oklch(from var(--bp-color-text) l c h / 0.5);\n opacity: 0;\n transition: opacity var(--bp-transition-base) ease-out;\n }\n\n .backdrop--visible {\n opacity: 1;\n }\n\n / Panel base /\n .panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n background-color: var(--bp-color-surface);\n box-shadow: var(--bp-shadow-xl);\n transition: transform var(--bp-transition-base) ease-out;\n overflow: hidden;\n }\n\n .drawer--overlay .panel:focus {\n outline: none;\n }\n\n / Horizontal drawers (left/right) /\n .drawer--horizontal .panel {\n top: 0;\n bottom: 0;\n height: 100%;\n }\n\n .drawer--left .panel {\n left: 0;\n transform: translateX(-100%);\n }\n\n .drawer--left .panel--open {\n transform: translateX(0);\n }\n\n .drawer--right .panel {\n right: 0;\n transform: translateX(100%);\n }\n\n .drawer--right .panel--open {\n transform: translateX(0);\n }\n\n / Vertical drawers (top/bottom) /\n .drawer--vertical .panel {\n left: 0;\n right: 0;\n width: 100%;\n }\n\n .drawer--top .panel {\n top: 0;\n transform: translateY(-100%);\n }\n\n .drawer--top .panel--open {\n transform: translateY(0);\n }\n\n .drawer--bottom .panel {\n bottom: 0;\n transform: translateY(100%);\n }\n\n .drawer--bottom .panel--open {\n transform: translateY(0);\n }\n\n / Sizes - horizontal (width) /\n .drawer--horizontal.drawer--sm .panel {\n width: calc(var(--bp-spacing-24) 3);\n }\n\n .drawer--horizontal.drawer--md .panel {\n width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n }\n\n .drawer--horizontal.drawer--lg .panel {\n width: var(--bp-breakpoint-sm);\n }\n\n .drawer--horizontal.drawer--full .panel {\n width: 100%;\n }\n\n /* Sizes - vertical (height) /\n .drawer--vertical.drawer--sm .panel {\n height: calc(var(--bp-spacing-24) 2);\n }\n\n .drawer--vertical.drawer--md .panel {\n height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n }\n\n .drawer--vertical.drawer--lg .panel {\n height: calc(var(--bp-spacing-24) * 5);\n }\n\n .drawer--vertical.drawer--full .panel {\n height: 100%;\n }\n\n /* Header /\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--bp-spacing-4);\n padding: var(--bp-spacing-4) var(--bp-spacing-5);\n border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n flex-shrink: 0;\n }\n\n .header--empty {\n display: none;\n }\n\n .header ::slotted() {\n margin: 0;\n font-size: var(--bp-font-size-lg);\n font-weight: var(--bp-font-weight-semibold);\n }\n\n /* Body /\n .body {\n flex: 1;\n overflow-y: auto;\n padding: var(--bp-spacing-5);\n }\n\n / Footer /\n .footer {\n display: flex;\n align-items: center;\n gap: var(--bp-spacing-4);\n padding: var(--bp-spacing-4) var(--bp-spacing-5);\n border-top: var(--bp-border-width) solid var(--bp-color-border);\n flex-shrink: 0;\n }\n\n / Close button /\n .close-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n padding: 0;\n margin-left: auto;\n background: transparent;\n border: none;\n border-radius: var(--bp-border-radius-sm);\n color: var(--bp-color-text-muted);\n cursor: pointer;\n transition:\n background-color var(--bp-transition-fast),\n color var(--bp-transition-fast),\n transform var(--bp-transition-fast);\n }\n\n .close-button:hover {\n background-color: var(--bp-color-surface-subdued);\n color: var(--bp-color-text);\n }\n\n .close-button:active {\n background-color: var(--bp-color-surface-pressed);\n transform: translateY(1px);\n }\n\n .close-button: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 .close-button:focus:not(:focus-visible) {\n outline: none;\n }\n\n .close-button: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 / Inline mode - static sidebar /\n .drawer--inline {\n display: block;\n }\n\n .drawer--inline .panel {\n position: relative;\n transform: none;\n box-shadow: none;\n border: var(--bp-border-width) solid var(--bp-color-border);\n border-radius: var(--bp-border-radius-md);\n }\n\n .drawer--inline.drawer--horizontal {\n height: 100%;\n }\n\n .drawer--inline.drawer--vertical {\n width: 100%;\n }\n\n / Inline sizes - horizontal /\n .drawer--inline.drawer--horizontal.drawer--small {\n width: calc(var(--bp-spacing-24) 3);\n }\n\n .drawer--inline.drawer--horizontal.drawer--medium {\n width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n }\n\n .drawer--inline.drawer--horizontal.drawer--large {\n width: var(--bp-breakpoint-sm);\n }\n\n .drawer--inline.drawer--horizontal.drawer--full {\n width: 100%;\n }\n\n /* Inline sizes - vertical /\n .drawer--inline.drawer--vertical.drawer--small .panel {\n height: calc(var(--bp-spacing-24) 2);\n }\n\n .drawer--inline.drawer--vertical.drawer--medium .panel {\n height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n }\n\n .drawer--inline.drawer--vertical.drawer--large .panel {\n height: calc(var(--bp-spacing-24) * 5);\n }\n\n .drawer--inline.drawer--vertical.drawer--full .panel {\n height: auto;\n }\n\n /* Border positioning for inline drawers /\n .drawer--inline.drawer--left .panel {\n border-left: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .drawer--inline.drawer--right .panel {\n border-right: none;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n .drawer--inline.drawer--top .panel {\n border-top: none;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n .drawer--inline.drawer--bottom .panel {\n border-bottom: none;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n / Reduced motion /\n @media (prefers-reduced-motion: reduce) {\n .panel {\n transition: none;\n }\n\n .backdrop {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { drawerStyles } from './drawer.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport { closeSvg } from '../icon/icons/entries/close.js';\nimport '../icon/icon.js';\n\nexport type DrawerPlacement = 'left' \| 'right' \| 'top' \| 'bottom';\nexport type DrawerSize = 'sm' \| 'md' \| 'lg' \| 'full';\n\n/\n A slide-in panel component that can appear from any edge of the viewport.\n \n @fires bp-open - Fired when the drawer opens\n * @fires bp-close - Fired when the drawer closes (includes reason: 'escape' \| 'backdrop' \| 'close-button' \| 'api')\n * @fires bp-after-open - Fired after open animation completes\n * @fires bp-after-close - Fired after close animation completes\n \n @slot - Default slot for drawer content\n * @slot header - Optional header content\n * @slot footer - Optional footer content\n \n @csspart drawer - The drawer container\n * @csspart backdrop - The backdrop overlay (when not inline)\n * @csspart panel - The drawer panel\n * @csspart header - The header section\n * @csspart body - The body/content section\n * @csspart footer - The footer section\n * @csspart close-button - The close button\n /\n@customElement('bp-drawer')\nexport class BpDrawer extends LitElement {\n /* Whether the drawer is open /\n @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n /* Which edge the drawer slides in from /\n @property({\n type: String,\n reflect: true,\n converter: {\n fromAttribute: (value: string \| null) => {\n const valid = ['left', 'right', 'top', 'bottom'];\n return value && valid.includes(value)\n ? (value as DrawerPlacement)\n : 'left';\n },\n },\n })\n declare placement: DrawerPlacement;\n\n /* Size of the drawer (width for left/right, height for top/bottom) /\n @property({\n type: String,\n reflect: true,\n converter: {\n fromAttribute: (value: string \| null) => {\n const valid = ['sm', 'md', 'lg', 'full'];\n return value && valid.includes(value) ? (value as DrawerSize) : 'md';\n },\n },\n })\n declare size: DrawerSize;\n\n /* Whether to show the close button /\n @property({\n converter: booleanConverter,\n attribute: 'show-close',\n reflect: true,\n })\n declare showClose: boolean;\n\n /* Whether clicking the backdrop closes the drawer /\n @property({\n converter: booleanConverter,\n attribute: 'close-on-backdrop',\n reflect: true,\n })\n declare closeOnBackdrop: boolean;\n\n /* Whether pressing Escape closes the drawer /\n @property({\n converter: booleanConverter,\n attribute: 'close-on-escape',\n reflect: true,\n })\n declare closeOnEscape: boolean;\n\n /* Whether to show the backdrop overlay /\n @property({\n converter: booleanConverter,\n attribute: 'show-backdrop',\n reflect: true,\n })\n declare showBackdrop: boolean;\n\n /* Accessible label for the drawer /\n @property({ type: String }) declare label: string;\n\n /\n Whether the drawer is rendered inline (always visible, part of document flow).\n * When true, the drawer acts as a static sidebar without overlay behavior.\n /\n @property({ type: Boolean, reflect: true }) declare inline: boolean;\n\n /* Whether the drawer has a header slot content /\n @property({ type: Boolean, attribute: false }) private hasHeader = false;\n\n /* Whether the drawer has a footer slot content /\n @property({ type: Boolean, attribute: false }) private hasFooter = false;\n\n private previouslyFocusedElement: HTMLElement \| null = null;\n\n static styles = [drawerStyles];\n\n constructor() {\n super();\n this.open = false;\n this.placement = 'left';\n this.size = 'md';\n this.showClose = true;\n this.closeOnBackdrop = true;\n this.closeOnEscape = true;\n this.showBackdrop = true;\n this.label = '';\n this.inline = false;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this.handleKeyDown);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.handleKeyDown);\n }\n\n /\n Open the drawer.\n * Sets open property to true and manages focus/scroll behavior.\n \n @fires bp-open - Emitted when the drawer opens\n * @fires bp-after-open - Emitted after open animation completes\n /\n show(): void {\n if (this.open) return;\n this.open = true;\n }\n\n /\n Close the drawer.\n * Sets open property to false if bp-close event is not prevented.\n \n @param reason - The reason the drawer was closed\n * @fires bp-close - Emitted when the drawer closes (cancelable)\n * @fires bp-after-close - Emitted after close animation completes\n /\n hide(reason: 'escape' \| 'backdrop' \| 'close-button' \| 'api' = 'api'): void {\n if (!this.open) return;\n\n const event = new CustomEvent('bp-close', {\n detail: { reason },\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n\n this.dispatchEvent(event);\n\n if (!event.defaultPrevented) {\n this.open = false;\n }\n }\n\n /\n Toggle the drawer open/closed state.\n * Calls hide() if open, show() if closed.\n /\n toggle(): void {\n if (this.open) {\n this.hide('api');\n } else {\n this.show();\n }\n }\n\n protected updated(changedProperties: Map<string, unknown>): void {\n if (changedProperties.has('open')) {\n if (this.open) {\n this.handleOpen();\n } else {\n this.handleClose();\n }\n }\n }\n\n private handleOpen(): void {\n if (!this.inline) {\n // Store currently focused element\n this.previouslyFocusedElement = document.activeElement as HTMLElement;\n\n // Prevent body scroll\n document.body.style.overflow = 'hidden';\n }\n\n this.dispatchEvent(\n new CustomEvent('bp-open', {\n bubbles: true,\n composed: true,\n })\n );\n\n // Focus the drawer panel for accessibility\n this.updateComplete.then(() => {\n const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;\n panel?.focus();\n\n this.dispatchEvent(\n new CustomEvent('bp-after-open', {\n bubbles: true,\n composed: true,\n })\n );\n });\n }\n\n private handleClose(): void {\n if (!this.inline) {\n // Restore body scroll\n document.body.style.overflow = '';\n\n // Restore focus\n if (this.previouslyFocusedElement) {\n this.previouslyFocusedElement.focus();\n this.previouslyFocusedElement = null;\n }\n }\n\n this.updateComplete.then(() => {\n this.dispatchEvent(\n new CustomEvent('bp-after-close', {\n bubbles: true,\n composed: true,\n })\n );\n });\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if (\n event.key === 'Escape' &&\n this.closeOnEscape &&\n this.open &&\n !this.inline\n ) {\n event.preventDefault();\n this.hide('escape');\n }\n };\n\n /\n Handles click events on the backdrop overlay.\n * Closes the drawer if closeOnBackdrop is true.\n /\n private handleBackdropClick = (): void => {\n if (this.closeOnBackdrop) {\n this.hide('backdrop');\n }\n };\n\n /\n Handles click events on the close button.\n * Closes the drawer with reason 'close-button'.\n /\n private handleCloseClick = (): void => {\n this.hide('close-button');\n };\n\n /\n Handles slot change events for the header slot.\n * Updates hasHeader state to control header visibility.\n \n @param event - The slotchange event\n /\n private handleHeaderSlotChange = (event: Event): void => {\n const slot = event.target as HTMLElement & {\n assignedNodes: (options?: { flatten?: boolean }) => Node[];\n };\n this.hasHeader = slot.assignedNodes({ flatten: true }).length > 0;\n };\n\n /\n Handles slot change events for the footer slot.\n * Updates hasFooter state to control footer visibility.\n \n @param event - The slotchange event\n */\n private handleFooterSlotChange = (event: Event): void => {\n const slot = event.target as HTMLElement & {\n assignedNodes: (options?: { flatten?: boolean }) => Node[];\n };\n this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n };\n\n render() {\n const isHorizontal =\n this.placement === 'left' \|\| this.placement === 'right';\n\n // Inline mode: always visible, no backdrop, no overlay behavior\n if (this.inline) {\n return html`\n <aside\n class=\"drawer drawer--inline drawer--${this.placement} drawer--${this\n .size} ${isHorizontal ? 'drawer--horizontal' : 'drawer--vertical'}\"\n part=\"drawer\"\n role=\"complementary\"\n aria-label=${this.label \|\| nothing}\n >\n <div class=\"panel\" part=\"panel\">\n ${this.hasHeader \|\| this.showClose\n ? html`\n <header class=\"header\" part=\"header\">\n <slot\n name=\"header\"\n @slotchange=${this.handleHeaderSlotChange}\n ></slot>\n </header>\n `\n : html`<slot\n name=\"header\"\n @slotchange=${this.handleHeaderSlotChange}\n ></slot>`}\n <div class=\"body\" part=\"body\">\n <slot></slot>\n </div>\n ${this.hasFooter\n ? html`\n <footer class=\"footer\" part=\"footer\">\n <slot\n name=\"footer\"\n @slotchange=${this.handleFooterSlotChange}\n ></slot>\n </footer>\n `\n : html`<slot\n name=\"footer\"\n @slotchange=${this.handleFooterSlotChange}\n ></slot>`}\n </div>\n </aside>\n `;\n }\n\n // Overlay mode: slide-in panel with backdrop\n return html`\n <div\n class=\"drawer drawer--overlay drawer--${this.placement} drawer--${this\n .size} ${isHorizontal\n ? 'drawer--horizontal'\n : 'drawer--vertical'} ${this.open ? 'drawer--open' : ''}\"\n part=\"drawer\"\n >\n ${this.showBackdrop\n ? html`\n <div\n class=\"backdrop ${this.open ? 'backdrop--visible' : ''}\"\n part=\"backdrop\"\n @click=${this.handleBackdropClick}\n aria-hidden=\"true\"\n ></div>\n `\n : nothing}\n <aside\n class=\"panel ${this.open ? 'panel--open' : ''}\"\n part=\"panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=${this.label \|\| nothing}\n tabindex=\"-1\"\n >\n <header\n class=\"header ${this.hasHeader \|\| this.showClose\n ? ''\n : 'header--empty'}\"\n part=\"header\"\n >\n <slot\n name=\"header\"\n @slotchange=${this.handleHeaderSlotChange}\n ></slot>\n ${this.showClose\n ? html`\n <button\n class=\"close-button\"\n part=\"close-button\"\n type=\"button\"\n aria-label=\"Close drawer\"\n @click=${this.handleCloseClick}\n >\n <bp-icon .svg=${closeSvg} size=\"sm\"></bp-icon>\n </button>\n `\n : nothing}\n </header>\n <div class=\"body\" part=\"body\">\n <slot></slot>\n </div>\n ${this.hasFooter\n ? html`\n <footer class=\"footer\" part=\"footer\">\n <slot\n name=\"footer\"\n @slotchange=${this.handleFooterSlotChange}\n ></slot>\n </footer>\n `\n : html`<slot\n name=\"footer\"\n @slotchange=${this.handleFooterSlotChange}\n ></slot>`}\n </aside>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-drawer': BpDrawer;\n }\n}\n"],"names":["drawerStyles","css","BpDrawer","LitElement","event","slot","reason","changedProperties","isHorizontal","html","nothing","closeSvg","__decorateClass","property","value","booleanConverter","customElement"],"mappings":";;;;AAEO,MAAMA,IAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":"drawer.js","sources":["../../source/components/drawer/drawer.style.ts","../../source/components/drawer/drawer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const drawerStyles = css`\n /* Base styles /\n :host {\n display: contents;\n }\n\n .drawer {\n font-family: var(--bp-font-family);\n font-size: var(--bp-font-size-base);\n color: var(--bp-color-text);\n }\n\n / Overlay mode /\n .drawer--overlay {\n position: fixed;\n inset: 0;\n z-index: var(--bp-z-modal);\n pointer-events: none;\n }\n\n .drawer--overlay.drawer--open {\n pointer-events: auto;\n }\n\n / Backdrop /\n .backdrop {\n position: absolute;\n inset: 0;\n background-color: oklch(from var(--bp-color-text) l c h / 0.5);\n opacity: 0;\n transition: opacity var(--bp-transition-base) ease-out;\n }\n\n .backdrop--visible {\n opacity: 1;\n }\n\n / Panel base /\n .panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n background-color: var(--bp-color-surface);\n box-shadow: var(--bp-shadow-xl);\n transition: transform var(--bp-transition-base) ease-out;\n overflow: hidden;\n }\n\n .drawer--overlay .panel:focus {\n outline: none;\n }\n\n / Horizontal drawers (left/right) /\n .drawer--horizontal .panel {\n top: 0;\n bottom: 0;\n height: 100%;\n }\n\n .drawer--left .panel {\n left: 0;\n transform: translateX(-100%);\n }\n\n .drawer--left .panel--open {\n transform: translateX(0);\n }\n\n .drawer--right .panel {\n right: 0;\n transform: translateX(100%);\n }\n\n .drawer--right .panel--open {\n transform: translateX(0);\n }\n\n / Vertical drawers (top/bottom) /\n .drawer--vertical .panel {\n left: 0;\n right: 0;\n width: 100%;\n }\n\n .drawer--top .panel {\n top: 0;\n transform: translateY(-100%);\n }\n\n .drawer--top .panel--open {\n transform: translateY(0);\n }\n\n .drawer--bottom .panel {\n bottom: 0;\n transform: translateY(100%);\n }\n\n .drawer--bottom .panel--open {\n transform: translateY(0);\n }\n\n / Sizes - horizontal (width) /\n .drawer--horizontal.drawer--sm .panel {\n width: calc(var(--bp-spacing-24) 3);\n }\n\n .drawer--horizontal.drawer--md .panel {\n width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n }\n\n .drawer--horizontal.drawer--lg .panel {\n width: var(--bp-breakpoint-sm);\n }\n\n .drawer--horizontal.drawer--full .panel {\n width: 100%;\n }\n\n /* Sizes - vertical (height) /\n .drawer--vertical.drawer--sm .panel {\n height: calc(var(--bp-spacing-24) 2);\n }\n\n .drawer--vertical.drawer--md .panel {\n height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n }\n\n .drawer--vertical.drawer--lg .panel {\n height: calc(var(--bp-spacing-24) * 5);\n }\n\n .drawer--vertical.drawer--full .panel {\n height: 100%;\n }\n\n /* Header /\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--bp-spacing-4);\n padding: var(--bp-spacing-4) var(--bp-spacing-5);\n border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n flex-shrink: 0;\n }\n\n .header--empty {\n display: none;\n }\n\n .header ::slotted() {\n margin: 0;\n font-size: var(--bp-font-size-lg);\n font-weight: var(--bp-font-weight-semibold);\n }\n\n /* Body /\n .body {\n flex: 1;\n overflow-y: auto;\n padding: var(--bp-spacing-5);\n }\n\n / Footer /\n .footer {\n display: flex;\n align-items: center;\n gap: var(--bp-spacing-4);\n padding: var(--bp-spacing-4) var(--bp-spacing-5);\n border-top: var(--bp-border-width) solid var(--bp-color-border);\n flex-shrink: 0;\n }\n\n / Close button /\n .close-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n padding: 0;\n margin-left: auto;\n background: transparent;\n border: none;\n border-radius: var(--bp-border-radius-sm);\n color: var(--bp-color-text-muted);\n cursor: pointer;\n transition:\n background-color var(--bp-transition-fast),\n color var(--bp-transition-fast),\n transform var(--bp-transition-fast);\n }\n\n .close-button:hover {\n background-color: var(--bp-color-surface-subdued);\n color: var(--bp-color-text);\n }\n\n .close-button:active {\n background-color: var(--bp-color-surface-pressed);\n transform: translateY(1px);\n }\n\n .close-button: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 .close-button:focus:not(:focus-visible) {\n outline: none;\n }\n\n .close-button: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 / Inline mode - static sidebar /\n .drawer--inline {\n display: block;\n }\n\n .drawer--inline .panel {\n position: relative;\n transform: none;\n box-shadow: none;\n border: var(--bp-border-width) solid var(--bp-color-border);\n border-radius: var(--bp-border-radius-md);\n }\n\n .drawer--inline.drawer--horizontal {\n height: 100%;\n }\n\n .drawer--inline.drawer--vertical {\n width: 100%;\n }\n\n / Inline sizes - horizontal /\n .drawer--inline.drawer--horizontal.drawer--small {\n width: calc(var(--bp-spacing-24) 3);\n }\n\n .drawer--inline.drawer--horizontal.drawer--medium {\n width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n }\n\n .drawer--inline.drawer--horizontal.drawer--large {\n width: var(--bp-breakpoint-sm);\n }\n\n .drawer--inline.drawer--horizontal.drawer--full {\n width: 100%;\n }\n\n /* Inline sizes - vertical /\n .drawer--inline.drawer--vertical.drawer--small .panel {\n height: calc(var(--bp-spacing-24) 2);\n }\n\n .drawer--inline.drawer--vertical.drawer--medium .panel {\n height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n }\n\n .drawer--inline.drawer--vertical.drawer--large .panel {\n height: calc(var(--bp-spacing-24) * 5);\n }\n\n .drawer--inline.drawer--vertical.drawer--full .panel {\n height: auto;\n }\n\n /* Border positioning for inline drawers /\n .drawer--inline.drawer--left .panel {\n border-left: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .drawer--inline.drawer--right .panel {\n border-right: none;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n .drawer--inline.drawer--top .panel {\n border-top: none;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n .drawer--inline.drawer--bottom .panel {\n border-bottom: none;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n / Reduced motion /\n @media (prefers-reduced-motion: reduce) {\n .panel {\n transition: none;\n }\n\n .backdrop {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { drawerStyles } from './drawer.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport { closeSvg } from '../icon/icons/entries/close.js';\nimport { BpIcon } from '../icon/icon.js';\n\nexport type DrawerPlacement = 'left' \| 'right' \| 'top' \| 'bottom';\nexport type DrawerSize = 'sm' \| 'md' \| 'lg' \| 'full';\n\n/\n A slide-in panel component that can appear from any edge of the viewport.\n \n @fires bp-open - Fired when the drawer opens\n * @fires bp-close - Fired when the drawer closes (includes reason: 'escape' \| 'backdrop' \| 'close-button' \| 'api')\n * @fires bp-after-open - Fired after open animation completes\n * @fires bp-after-close - Fired after close animation completes\n \n @slot - Default slot for drawer content\n * @slot header - Optional header content\n * @slot footer - Optional footer content\n \n @csspart drawer - The drawer container\n * @csspart backdrop - The backdrop overlay (when not inline)\n * @csspart panel - The drawer panel\n * @csspart header - The header section\n * @csspart body - The body/content section\n * @csspart footer - The footer section\n * @csspart close-button - The close button\n /\n@customElement('bp-drawer')\nexport class BpDrawer extends LitElement {\n /\n Child components that self-register as custom elements on import.\n * Value imports prevent bundler tree-shaking of the registration side effect.\n /\n static dependencies = [BpIcon];\n\n /* Whether the drawer is open /\n @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n /* Which edge the drawer slides in from /\n @property({\n type: String,\n reflect: true,\n converter: {\n fromAttribute: (value: string \| null) => {\n const valid = ['left', 'right', 'top', 'bottom'];\n return value && valid.includes(value)\n ? (value as DrawerPlacement)\n : 'left';\n },\n },\n })\n declare placement: DrawerPlacement;\n\n /* Size of the drawer (width for left/right, height for top/bottom) /\n @property({\n type: String,\n reflect: true,\n converter: {\n fromAttribute: (value: string \| null) => {\n const valid = ['sm', 'md', 'lg', 'full'];\n return value && valid.includes(value) ? (value as DrawerSize) : 'md';\n },\n },\n })\n declare size: DrawerSize;\n\n /* Whether to show the close button /\n @property({\n converter: booleanConverter,\n attribute: 'show-close',\n reflect: true,\n })\n declare showClose: boolean;\n\n /* Whether clicking the backdrop closes the drawer /\n @property({\n converter: booleanConverter,\n attribute: 'close-on-backdrop',\n reflect: true,\n })\n declare closeOnBackdrop: boolean;\n\n /* Whether pressing Escape closes the drawer /\n @property({\n converter: booleanConverter,\n attribute: 'close-on-escape',\n reflect: true,\n })\n declare closeOnEscape: boolean;\n\n /* Whether to show the backdrop overlay /\n @property({\n converter: booleanConverter,\n attribute: 'show-backdrop',\n reflect: true,\n })\n declare showBackdrop: boolean;\n\n /* Accessible label for the drawer /\n @property({ type: String }) declare label: string;\n\n /\n Whether the drawer is rendered inline (always visible, part of document flow).\n * When true, the drawer acts as a static sidebar without overlay behavior.\n /\n @property({ type: Boolean, reflect: true }) declare inline: boolean;\n\n /* Whether the drawer has a header slot content /\n @property({ type: Boolean, attribute: false }) private hasHeader = false;\n\n /* Whether the drawer has a footer slot content /\n @property({ type: Boolean, attribute: false }) private hasFooter = false;\n\n private previouslyFocusedElement: HTMLElement \| null = null;\n\n static styles = [drawerStyles];\n\n constructor() {\n super();\n this.open = false;\n this.placement = 'left';\n this.size = 'md';\n this.showClose = true;\n this.closeOnBackdrop = true;\n this.closeOnEscape = true;\n this.showBackdrop = true;\n this.label = '';\n this.inline = false;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this.handleKeyDown);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.handleKeyDown);\n }\n\n /\n Open the drawer.\n * Sets open property to true and manages focus/scroll behavior.\n \n @fires bp-open - Emitted when the drawer opens\n * @fires bp-after-open - Emitted after open animation completes\n /\n show(): void {\n if (this.open) return;\n this.open = true;\n }\n\n /\n Close the drawer.\n * Sets open property to false if bp-close event is not prevented.\n \n @param reason - The reason the drawer was closed\n * @fires bp-close - Emitted when the drawer closes (cancelable)\n * @fires bp-after-close - Emitted after close animation completes\n /\n hide(reason: 'escape' \| 'backdrop' \| 'close-button' \| 'api' = 'api'): void {\n if (!this.open) return;\n\n const event = new CustomEvent('bp-close', {\n detail: { reason },\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n\n this.dispatchEvent(event);\n\n if (!event.defaultPrevented) {\n this.open = false;\n }\n }\n\n /\n Toggle the drawer open/closed state.\n * Calls hide() if open, show() if closed.\n /\n toggle(): void {\n if (this.open) {\n this.hide('api');\n } else {\n this.show();\n }\n }\n\n protected updated(changedProperties: Map<string, unknown>): void {\n if (changedProperties.has('open')) {\n if (this.open) {\n this.handleOpen();\n } else {\n this.handleClose();\n }\n }\n }\n\n private handleOpen(): void {\n if (!this.inline) {\n // Store currently focused element\n this.previouslyFocusedElement = document.activeElement as HTMLElement;\n\n // Prevent body scroll\n document.body.style.overflow = 'hidden';\n }\n\n this.dispatchEvent(\n new CustomEvent('bp-open', {\n bubbles: true,\n composed: true,\n })\n );\n\n // Focus the drawer panel for accessibility\n this.updateComplete.then(() => {\n const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;\n panel?.focus();\n\n this.dispatchEvent(\n new CustomEvent('bp-after-open', {\n bubbles: true,\n composed: true,\n })\n );\n });\n }\n\n private handleClose(): void {\n if (!this.inline) {\n // Restore body scroll\n document.body.style.overflow = '';\n\n // Restore focus\n if (this.previouslyFocusedElement) {\n this.previouslyFocusedElement.focus();\n this.previouslyFocusedElement = null;\n }\n }\n\n this.updateComplete.then(() => {\n this.dispatchEvent(\n new CustomEvent('bp-after-close', {\n bubbles: true,\n composed: true,\n })\n );\n });\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if (\n event.key === 'Escape' &&\n this.closeOnEscape &&\n this.open &&\n !this.inline\n ) {\n event.preventDefault();\n this.hide('escape');\n }\n };\n\n /\n Handles click events on the backdrop overlay.\n * Closes the drawer if closeOnBackdrop is true.\n /\n private handleBackdropClick = (): void => {\n if (this.closeOnBackdrop) {\n this.hide('backdrop');\n }\n };\n\n /\n Handles click events on the close button.\n * Closes the drawer with reason 'close-button'.\n /\n private handleCloseClick = (): void => {\n this.hide('close-button');\n };\n\n /\n Handles slot change events for the header slot.\n * Updates hasHeader state to control header visibility.\n \n @param event - The slotchange event\n /\n private handleHeaderSlotChange = (event: Event): void => {\n const slot = event.target as HTMLElement & {\n assignedNodes: (options?: { flatten?: boolean }) => Node[];\n };\n this.hasHeader = slot.assignedNodes({ flatten: true }).length > 0;\n };\n\n /\n Handles slot change events for the footer slot.\n * Updates hasFooter state to control footer visibility.\n \n @param event - The slotchange event\n */\n private handleFooterSlotChange = (event: Event): void => {\n const slot = event.target as HTMLElement & {\n assignedNodes: (options?: { flatten?: boolean }) => Node[];\n };\n this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n };\n\n render() {\n const isHorizontal =\n this.placement === 'left' \|\| this.placement === 'right';\n\n // Inline mode: always visible, no backdrop, no overlay behavior\n if (this.inline) {\n return html`\n <aside\n class=\"drawer drawer--inline drawer--${this.placement} drawer--${this\n .size} ${isHorizontal ? 'drawer--horizontal' : 'drawer--vertical'}\"\n part=\"drawer\"\n role=\"complementary\"\n aria-label=${this.label \|\| nothing}\n >\n <div class=\"panel\" part=\"panel\">\n ${this.hasHeader \|\| this.showClose\n ? html`\n <header class=\"header\" part=\"header\">\n <slot\n name=\"header\"\n @slotchange=${this.handleHeaderSlotChange}\n ></slot>\n </header>\n `\n : html`<slot\n name=\"header\"\n @slotchange=${this.handleHeaderSlotChange}\n ></slot>`}\n <div class=\"body\" part=\"body\">\n <slot></slot>\n </div>\n ${this.hasFooter\n ? html`\n <footer class=\"footer\" part=\"footer\">\n <slot\n name=\"footer\"\n @slotchange=${this.handleFooterSlotChange}\n ></slot>\n </footer>\n `\n : html`<slot\n name=\"footer\"\n @slotchange=${this.handleFooterSlotChange}\n ></slot>`}\n </div>\n </aside>\n `;\n }\n\n // Overlay mode: slide-in panel with backdrop\n return html`\n <div\n class=\"drawer drawer--overlay drawer--${this.placement} drawer--${this\n .size} ${isHorizontal\n ? 'drawer--horizontal'\n : 'drawer--vertical'} ${this.open ? 'drawer--open' : ''}\"\n part=\"drawer\"\n >\n ${this.showBackdrop\n ? html`\n <div\n class=\"backdrop ${this.open ? 'backdrop--visible' : ''}\"\n part=\"backdrop\"\n @click=${this.handleBackdropClick}\n aria-hidden=\"true\"\n ></div>\n `\n : nothing}\n <aside\n class=\"panel ${this.open ? 'panel--open' : ''}\"\n part=\"panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=${this.label \|\| nothing}\n tabindex=\"-1\"\n >\n <header\n class=\"header ${this.hasHeader \|\| this.showClose\n ? ''\n : 'header--empty'}\"\n part=\"header\"\n >\n <slot\n name=\"header\"\n @slotchange=${this.handleHeaderSlotChange}\n ></slot>\n ${this.showClose\n ? html`\n <button\n class=\"close-button\"\n part=\"close-button\"\n type=\"button\"\n aria-label=\"Close drawer\"\n @click=${this.handleCloseClick}\n >\n <bp-icon .svg=${closeSvg} size=\"sm\"></bp-icon>\n </button>\n `\n : nothing}\n </header>\n <div class=\"body\" part=\"body\">\n <slot></slot>\n </div>\n ${this.hasFooter\n ? html`\n <footer class=\"footer\" part=\"footer\">\n <slot\n name=\"footer\"\n @slotchange=${this.handleFooterSlotChange}\n ></slot>\n </footer>\n `\n : html`<slot\n name=\"footer\"\n @slotchange=${this.handleFooterSlotChange}\n ></slot>`}\n </aside>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-drawer': BpDrawer;\n }\n}\n"],"names":["drawerStyles","css","BpDrawer","LitElement","event","slot","reason","changedProperties","isHorizontal","html","nothing","closeSvg","BpIcon","__decorateClass","property","value","booleanConverter","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/icon/icon.d.ts CHANGED Viewed

@@ -68,8 +68,10 @@ export declare class BpIcon extends LitElement {
      *
      * First checks the sync registry cache (populated by `all.ts` or a
      * previous load). If the icon isn't cached, dynamically imports the
-     * per-icon entry module using `import.meta.url` to resolve the path
-     * relative to this file's location in `dist/`.
+     * generated resolver module which contains static `import()` paths for
+     * every icon. Static paths let the consumer's bundler (Vite, Rollup,
+     * esbuild) analyse and rewrite them at build time — unlike computed
+     * URLs which break when the bundler reorganises the file layout.
      */
     private _loadIcon;
     render(): import("lit-html").TemplateResult<1>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../source/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/D,YAAY,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/D,MAAM,MAAM,QAAQ,GAChB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,CAAC;AACX,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,OAAO,CAAC;AAEZ;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC;;;;;;OAMG;IACiC,IAAI,EAAE,QAAQ,GAAG,EAAE,CAAC;IAExD;;;;;OAKG;IACiC,GAAG,EAAE,MAAM,CAAC;IAEhD;;;OAGG;IACgD,IAAI,EAAE,QAAQ,CAAC;IAElE;;;OAGG;IACiC,KAAK,EAAE,SAAS,CAAC;IAErD;;;OAGG;IAEK,SAAS,EAAE,MAAM,CAAC;IAE1B,iEAAiE;IACxD,OAAO,CAAC,UAAU,CAAM;IAEjC,uEAAuE;IACvE,OAAO,CAAC,YAAY,CAAM;;IAW1B,MAAM,CAAC,MAAM,4BAAgB;IAE7B,UAAU,CAAC,YAAY,EAAE,cAAc;IAgBvC~~;;;;;;;OAOG~~;YACW,SAAS;~~IAqCvB~~,MAAM;CAmBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
1	+ {"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../source/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/D,YAAY,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/D,MAAM,MAAM,QAAQ,GAChB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,CAAC;AACX,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,OAAO,CAAC;AAEZ;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC;;;;;;OAMG;IACiC,IAAI,EAAE,QAAQ,GAAG,EAAE,CAAC;IAExD;;;;;OAKG;IACiC,GAAG,EAAE,MAAM,CAAC;IAEhD;;;OAGG;IACgD,IAAI,EAAE,QAAQ,CAAC;IAElE;;;OAGG;IACiC,KAAK,EAAE,SAAS,CAAC;IAErD;;;OAGG;IAEK,SAAS,EAAE,MAAM,CAAC;IAE1B,iEAAiE;IACxD,OAAO,CAAC,UAAU,CAAM;IAEjC,uEAAuE;IACvE,OAAO,CAAC,YAAY,CAAM;;IAW1B,MAAM,CAAC,MAAM,4BAAgB;IAE7B,UAAU,CAAC,YAAY,EAAE,cAAc;IAgBvC;;;;;;;;;OASG;YACW,SAAS;IA2BvB,MAAM;CAmBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/icon/icons/resolver.generated.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare function loadIconByName(name: string): Promise<string \| undefined>;
2	+ //# sourceMappingURL=resolver.generated.d.ts.map

package/dist/components/icon/icons/resolver.generated.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"resolver.generated.d.ts","sourceRoot":"","sources":["../../../../source/components/icon/icons/resolver.generated.ts"],"names":[],"mappings":"AAobA,wBAAsB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAK9E"}

package/dist/components/icon.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { css as d, LitElement as v, html as h } from "lit";
-import { property as a, state as g, customElement as m } from "lit/decorators.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
-const f = d`
+import { css as d, LitElement as g, html as h } from "lit";
+import { property as a, state as v, customElement as m } from "lit/decorators.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { unsafeHTML as f } from "lit/directives/unsafe-html.js";
+const y = d`
   /* Base styles */
   :host {
     display: inline-flex;
@@ -104,18 +104,18 @@ const f = d`
     height: 100%;
   }
 `, p = /* @__PURE__ */ new Map();
-function y(i, t) {
+function u(i, t) {
   p.set(i, t);
 }
 function x(i) {
   return p.get(i);
 }
-var z = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (i, t, l, n) => {
-  for (var e = n > 1 ? void 0 : n ? w(t, l) : t, c = i.length - 1, r; c >= 0; c--)
-    (r = i[c]) && (e = (n ? r(t, l, e) : r(e)) || e);
-  return n && e && z(t, l, e), e;
+var z = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, s = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? _(t, n) : t, l = i.length - 1, c; l >= 0; l--)
+    (c = i[l]) && (r = (e ? c(t, n, r) : c(r)) || r);
+  return e && r && z(t, n, r), r;
 };
-let o = class extends v {
+let o = class extends g {
   constructor() {
     super(), this._loadedSvg = "", this._loadingName = "", this.name = "", this.svg = "", this.size = "md", this.color = "default", this.ariaLabel = "";
   }
@@ -133,8 +133,10 @@ let o = class extends v {
    *
    * First checks the sync registry cache (populated by `all.ts` or a
    * previous load). If the icon isn't cached, dynamically imports the
-   * per-icon entry module using `import.meta.url` to resolve the path
-   * relative to this file's location in `dist/`.
+   * generated resolver module which contains static `import()` paths for
+   * every icon. Static paths let the consumer's bundler (Vite, Rollup,
+   * esbuild) analyse and rewrite them at build time — unlike computed
+   * URLs which break when the bundler reorganises the file layout.
    */
   async _loadIcon(i) {
     this._loadingName = i;
@@ -144,8 +146,8 @@ let o = class extends v {
       return;
     }
     try {
-      const l = ["..", "icons", i + ".js"].join("/"), n = new URL(l, import.meta.url).href, r = (await new Function("url", "return import(url)")(n)).default;
-      r && this._loadingName === i && (y(i, r), this._loadedSvg = r);
+      const { loadIconByName: n } = await import("../icons/resolver.js"), e = await n(i);
+      e && this._loadingName === i && (u(i, e), this._loadedSvg = e);
     } catch {
       this._loadingName === i && (this._loadedSvg = "");
     }
@@ -159,14 +161,14 @@ let o = class extends v {
         class=${i}
         part="icon"
         role=${this.ariaLabel ? "img" : "presentation"}
-        aria-label=${u(this.ariaLabel || void 0)}
+        aria-label=${b(this.ariaLabel || void 0)}
       >
-        ${t ? h`${b(t)}` : h`<slot></slot>`}
+        ${t ? h`${f(t)}` : h`<slot></slot>`}
       </span>
     `;
   }
 };
-o.styles = [f];
+o.styles = [y];
 s([
   a({ type: String })
 ], o.prototype, "name", 2);
@@ -183,7 +185,7 @@ s([
   a({ type: String, attribute: "aria-label" })
 ], o.prototype, "ariaLabel", 2);
 s([
-  g()
+  v()
 ], o.prototype, "_loadedSvg", 2);
 o = s([
   m("bp-icon")

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

	@@ -1 +1 @@
1	- {"version":3,"file":"icon.js","sources":["../../source/components/icon/icon.style.ts","../../source/components/icon/icon-registry.ts","../../source/components/icon/icon.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const iconStyles = css`\n /* Base styles /\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n }\n\n :host([size='full']) {\n display: flex;\n width: 100%;\n height: 100%;\n }\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n color: var(--bp-color-text);\n }\n\n .icon svg,\n .icon ::slotted(svg) {\n width: 100%;\n height: 100%;\n display: block;\n fill: currentColor;\n }\n\n / Color variants /\n .icon--default {\n color: var(--bp-color-text);\n }\n\n .icon--primary {\n color: var(--bp-color-primary);\n }\n\n .icon--success {\n color: var(--bp-color-success);\n }\n\n .icon--warning {\n color: var(--bp-color-warning);\n }\n\n .icon--error {\n color: var(--bp-color-error);\n }\n\n .icon--muted {\n color: var(--bp-color-text-muted);\n }\n\n / Size variants /\n .icon--xs {\n width: var(--bp-icon-size-xs);\n height: var(--bp-icon-size-xs);\n }\n\n .icon--sm {\n width: var(--bp-icon-size-sm);\n height: var(--bp-icon-size-sm);\n }\n\n .icon--md {\n width: var(--bp-icon-size-md);\n height: var(--bp-icon-size-md);\n }\n\n .icon--lg {\n width: var(--bp-icon-size-lg);\n height: var(--bp-icon-size-lg);\n }\n\n .icon--xl {\n width: var(--bp-icon-size-xl);\n height: var(--bp-icon-size-xl);\n }\n\n .icon--2xl {\n width: var(--bp-icon-size-2xl);\n height: var(--bp-icon-size-2xl);\n }\n\n .icon--3xl {\n width: var(--bp-icon-size-3xl);\n height: var(--bp-icon-size-3xl);\n }\n\n .icon--4xl {\n width: var(--bp-icon-size-4xl);\n height: var(--bp-icon-size-4xl);\n }\n\n .icon--full {\n width: 100%;\n height: 100%;\n }\n`;\n","/\r\n Shared icon registry — runtime singleton.\r\n \r\n Serves two roles:\r\n * 1. Lazy-load cache — When `<bp-icon name=\"...\">` dynamically imports\r\n * an icon entry module, the SVG is stored here so subsequent renders of\r\n * the same icon name are instant.\r\n * 2. Bulk registration — `all.ts` imports every icon entry and calls\r\n * `registerIcon()` for each one (used by Storybook / dev tools).\r\n \r\n Internal Blueprint components bypass the registry entirely. They import\r\n * SVG data as value bindings and pass them directly via the `svg` property,\r\n * which guarantees the data survives bundler tree-shaking.\r\n /\r\n\r\nconst registry = new Map<string, string>();\r\n\r\n/\r\n Register an icon's SVG content by name.\r\n * Duplicate registrations silently overwrite (idempotent).\r\n /\r\nexport function registerIcon(name: string, svg: string): void {\r\n registry.set(name, svg);\r\n}\r\n\r\n/\r\n Retrieve the raw SVG string for a registered icon.\r\n * Returns undefined if the icon has not been registered.\r\n /\r\nexport function getIconSvg(name: string): string \| undefined {\r\n return registry.get(name);\r\n}\r\n\r\n\r\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { iconStyles } from './icon.style.js';\nimport { getIconSvg, registerIcon } from './icon-registry.js';\nimport type { IconName } from './icons/icon-name.generated.js';\n\nexport type { IconName } from './icons/icon-name.generated.js';\n\nexport type IconSize =\n \| 'xs'\n \| 'sm'\n \| 'md'\n \| 'lg'\n \| 'xl'\n \| '2xl'\n \| '3xl'\n \| '4xl'\n \| 'full';\nexport type IconColor =\n \| 'default'\n \| 'primary'\n \| 'success'\n \| 'warning'\n \| 'error'\n \| 'muted';\n\n/\n Icon component - SVG icon wrapper with size variants\n \n Supports both named icons from the System UI Icons library and custom SVG content via slot.\n \n @slot - Custom SVG content to display (used when `name` is not provided)\n \n @csspart icon - The icon container element\n \n @example\n * ```html\n * <!-- Using named icon from library -->\n * <bp-icon name=\"create\" size=\"md\" color=\"primary\"></bp-icon>\n \n <!-- Using custom SVG content -->\n * <bp-icon size=\"md\">\n * <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n * <path d=\"M12 2L2 7v10c0 5.5 3.8 10.6 10 12 6.2-1.4 10-6.5 10-12V7l-10-5z\"/>\n * </svg>\n * </bp-icon>\n * ```\n /\n@customElement('bp-icon')\nexport class BpIcon extends LitElement {\n /\n Name of the icon from the System UI Icons library.\n * When set (and `svg` is empty), the component lazy-loads the icon's\n * entry module at runtime and caches the SVG for subsequent renders.\n * Ignored when the `svg` property is set.\n * @type {IconName}\n /\n @property({ type: String }) declare name: IconName \| '';\n\n /\n Raw SVG string to render directly. When set, the `name` property is\n * ignored. This is the preferred way for internal Blueprint components\n * to supply icon data because it survives bundler tree-shaking.\n * @type {string}\n /\n @property({ type: String }) declare svg: string;\n\n /\n Size variant of the icon\n * @type {IconSize}\n /\n @property({ type: String, reflect: true }) declare size: IconSize;\n\n /\n Color variant of the icon\n * @type {IconColor}\n /\n @property({ type: String }) declare color: IconColor;\n\n /\n ARIA label for accessibility\n * @type {string}\n /\n @property({ type: String, attribute: 'aria-label' })\n declare ariaLabel: string;\n\n /* SVG content resolved by lazy-loading an icon entry module. /\n @state() private _loadedSvg = '';\n\n /* Tracks which icon name is currently being loaded to avoid races. /\n private _loadingName = '';\n\n constructor() {\n super();\n this.name = '';\n this.svg = '';\n this.size = 'md';\n this.color = 'default';\n this.ariaLabel = '';\n }\n\n static styles = [iconStyles];\n\n willUpdate(changedProps: PropertyValues) {\n // When the name changes and no direct svg is provided, lazy-load the icon.\n if (changedProps.has('name') \|\| changedProps.has('svg')) {\n if (this.svg) {\n // Direct svg takes priority — clear any lazy-loaded content.\n this._loadedSvg = '';\n this._loadingName = '';\n return;\n }\n\n if (this.name && changedProps.has('name')) {\n this._loadIcon(this.name);\n }\n }\n }\n\n /\n Lazy-load an icon entry module by name.\n \n First checks the sync registry cache (populated by `all.ts` or a\n * previous load). If the icon isn't cached, dynamically imports the\n * per-icon entry module using `import.meta.url` to resolve the path\n * relative to this file's location in `dist/`.\n */\n private async _loadIcon(name: string) {\n this._loadingName = name;\n\n // Fast path: icon already in the registry (e.g. tests import all.ts).\n const cached = getIconSvg(name);\n if (cached) {\n this._loadedSvg = cached;\n return;\n }\n\n try {\n // Build an absolute URL to the per-icon entry module.\n // The URL is computed from this module's own location so it resolves\n // correctly regardless of how the consumer's bundler serves the files.\n const iconPath = ['..', 'icons', name + '.js'].join('/');\n const resolved = new URL(iconPath, import.meta.url).href;\n\n // Use Function to construct the import call so Rollup/Vite cannot\n // statically analyse or rewrite it. This is intentional — the icon\n // entries are separate files that must be fetched at runtime.\n const loadModule = new Function('url', 'return import(url)') as (\n url: string\n ) => Promise<{ default: string }>;\n const module = await loadModule(resolved);\n const svg: string = module.default;\n\n if (svg && this._loadingName === name) {\n registerIcon(name, svg); // Cache for next time.\n this._loadedSvg = svg;\n }\n } catch {\n if (this._loadingName === name) {\n this._loadedSvg = '';\n }\n }\n }\n\n render() {\n const classes = ['icon', `icon--${this.size}`, `icon--${this.color}`].join(\n ' '\n );\n\n // Priority: svg property → lazy-loaded → slot fallback\n const svgContent = this.svg \|\| this._loadedSvg \|\| null;\n\n return html`\n <span\n class=${classes}\n part=\"icon\"\n role=${this.ariaLabel ? 'img' : 'presentation'}\n aria-label=${ifDefined(this.ariaLabel \|\| undefined)}\n >\n ${svgContent ? html`${unsafeHTML(svgContent)}` : html`<slot></slot>`}\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-icon': BpIcon;\n }\n}\n"],"names":["iconStyles","css","registry","registerIcon","name","svg","getIconSvg","BpIcon","LitElement","changedProps","cached","iconPath","resolved","classes","svgContent","html","ifDefined","unsafeHTML","__decorateClass","property","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"icon.js","sources":["../../source/components/icon/icon.style.ts","../../source/components/icon/icon-registry.ts","../../source/components/icon/icon.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const iconStyles = css`\n /* Base styles /\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n }\n\n :host([size='full']) {\n display: flex;\n width: 100%;\n height: 100%;\n }\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n color: var(--bp-color-text);\n }\n\n .icon svg,\n .icon ::slotted(svg) {\n width: 100%;\n height: 100%;\n display: block;\n fill: currentColor;\n }\n\n / Color variants /\n .icon--default {\n color: var(--bp-color-text);\n }\n\n .icon--primary {\n color: var(--bp-color-primary);\n }\n\n .icon--success {\n color: var(--bp-color-success);\n }\n\n .icon--warning {\n color: var(--bp-color-warning);\n }\n\n .icon--error {\n color: var(--bp-color-error);\n }\n\n .icon--muted {\n color: var(--bp-color-text-muted);\n }\n\n / Size variants /\n .icon--xs {\n width: var(--bp-icon-size-xs);\n height: var(--bp-icon-size-xs);\n }\n\n .icon--sm {\n width: var(--bp-icon-size-sm);\n height: var(--bp-icon-size-sm);\n }\n\n .icon--md {\n width: var(--bp-icon-size-md);\n height: var(--bp-icon-size-md);\n }\n\n .icon--lg {\n width: var(--bp-icon-size-lg);\n height: var(--bp-icon-size-lg);\n }\n\n .icon--xl {\n width: var(--bp-icon-size-xl);\n height: var(--bp-icon-size-xl);\n }\n\n .icon--2xl {\n width: var(--bp-icon-size-2xl);\n height: var(--bp-icon-size-2xl);\n }\n\n .icon--3xl {\n width: var(--bp-icon-size-3xl);\n height: var(--bp-icon-size-3xl);\n }\n\n .icon--4xl {\n width: var(--bp-icon-size-4xl);\n height: var(--bp-icon-size-4xl);\n }\n\n .icon--full {\n width: 100%;\n height: 100%;\n }\n`;\n","/\r\n Shared icon registry — runtime singleton.\r\n \r\n Serves two roles:\r\n * 1. Lazy-load cache — When `<bp-icon name=\"...\">` dynamically imports\r\n * an icon entry module, the SVG is stored here so subsequent renders of\r\n * the same icon name are instant.\r\n * 2. Bulk registration — `all.ts` imports every icon entry and calls\r\n * `registerIcon()` for each one (used by Storybook / dev tools).\r\n \r\n Internal Blueprint components bypass the registry entirely. They import\r\n * SVG data as value bindings and pass them directly via the `svg` property,\r\n * which guarantees the data survives bundler tree-shaking.\r\n /\r\n\r\nconst registry = new Map<string, string>();\r\n\r\n/\r\n Register an icon's SVG content by name.\r\n * Duplicate registrations silently overwrite (idempotent).\r\n /\r\nexport function registerIcon(name: string, svg: string): void {\r\n registry.set(name, svg);\r\n}\r\n\r\n/\r\n Retrieve the raw SVG string for a registered icon.\r\n * Returns undefined if the icon has not been registered.\r\n /\r\nexport function getIconSvg(name: string): string \| undefined {\r\n return registry.get(name);\r\n}\r\n\r\n\r\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { iconStyles } from './icon.style.js';\nimport { getIconSvg, registerIcon } from './icon-registry.js';\nimport type { IconName } from './icons/icon-name.generated.js';\n\nexport type { IconName } from './icons/icon-name.generated.js';\n\nexport type IconSize =\n \| 'xs'\n \| 'sm'\n \| 'md'\n \| 'lg'\n \| 'xl'\n \| '2xl'\n \| '3xl'\n \| '4xl'\n \| 'full';\nexport type IconColor =\n \| 'default'\n \| 'primary'\n \| 'success'\n \| 'warning'\n \| 'error'\n \| 'muted';\n\n/\n Icon component - SVG icon wrapper with size variants\n \n Supports both named icons from the System UI Icons library and custom SVG content via slot.\n \n @slot - Custom SVG content to display (used when `name` is not provided)\n \n @csspart icon - The icon container element\n \n @example\n * ```html\n * <!-- Using named icon from library -->\n * <bp-icon name=\"create\" size=\"md\" color=\"primary\"></bp-icon>\n \n <!-- Using custom SVG content -->\n * <bp-icon size=\"md\">\n * <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n * <path d=\"M12 2L2 7v10c0 5.5 3.8 10.6 10 12 6.2-1.4 10-6.5 10-12V7l-10-5z\"/>\n * </svg>\n * </bp-icon>\n * ```\n /\n@customElement('bp-icon')\nexport class BpIcon extends LitElement {\n /\n Name of the icon from the System UI Icons library.\n * When set (and `svg` is empty), the component lazy-loads the icon's\n * entry module at runtime and caches the SVG for subsequent renders.\n * Ignored when the `svg` property is set.\n * @type {IconName}\n /\n @property({ type: String }) declare name: IconName \| '';\n\n /\n Raw SVG string to render directly. When set, the `name` property is\n * ignored. This is the preferred way for internal Blueprint components\n * to supply icon data because it survives bundler tree-shaking.\n * @type {string}\n /\n @property({ type: String }) declare svg: string;\n\n /\n Size variant of the icon\n * @type {IconSize}\n /\n @property({ type: String, reflect: true }) declare size: IconSize;\n\n /\n Color variant of the icon\n * @type {IconColor}\n /\n @property({ type: String }) declare color: IconColor;\n\n /\n ARIA label for accessibility\n * @type {string}\n /\n @property({ type: String, attribute: 'aria-label' })\n declare ariaLabel: string;\n\n /* SVG content resolved by lazy-loading an icon entry module. /\n @state() private _loadedSvg = '';\n\n /* Tracks which icon name is currently being loaded to avoid races. /\n private _loadingName = '';\n\n constructor() {\n super();\n this.name = '';\n this.svg = '';\n this.size = 'md';\n this.color = 'default';\n this.ariaLabel = '';\n }\n\n static styles = [iconStyles];\n\n willUpdate(changedProps: PropertyValues) {\n // When the name changes and no direct svg is provided, lazy-load the icon.\n if (changedProps.has('name') \|\| changedProps.has('svg')) {\n if (this.svg) {\n // Direct svg takes priority — clear any lazy-loaded content.\n this._loadedSvg = '';\n this._loadingName = '';\n return;\n }\n\n if (this.name && changedProps.has('name')) {\n this._loadIcon(this.name);\n }\n }\n }\n\n /\n Lazy-load an icon entry module by name.\n \n First checks the sync registry cache (populated by `all.ts` or a\n * previous load). If the icon isn't cached, dynamically imports the\n * generated resolver module which contains static `import()` paths for\n * every icon. Static paths let the consumer's bundler (Vite, Rollup,\n * esbuild) analyse and rewrite them at build time — unlike computed\n * URLs which break when the bundler reorganises the file layout.\n */\n private async _loadIcon(name: string) {\n this._loadingName = name;\n\n // Fast path: icon already in the registry (e.g. tests import all.ts).\n const cached = getIconSvg(name);\n if (cached) {\n this._loadedSvg = cached;\n return;\n }\n\n try {\n const { loadIconByName } = await import(\n './icons/resolver.generated.js'\n );\n const svg = await loadIconByName(name);\n\n if (svg && this._loadingName === name) {\n registerIcon(name, svg); // Cache for next time.\n this._loadedSvg = svg;\n }\n } catch {\n if (this._loadingName === name) {\n this._loadedSvg = '';\n }\n }\n }\n\n render() {\n const classes = ['icon', `icon--${this.size}`, `icon--${this.color}`].join(\n ' '\n );\n\n // Priority: svg property → lazy-loaded → slot fallback\n const svgContent = this.svg \|\| this._loadedSvg \|\| null;\n\n return html`\n <span\n class=${classes}\n part=\"icon\"\n role=${this.ariaLabel ? 'img' : 'presentation'}\n aria-label=${ifDefined(this.ariaLabel \|\| undefined)}\n >\n ${svgContent ? html`${unsafeHTML(svgContent)}` : html`<slot></slot>`}\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-icon': BpIcon;\n }\n}\n"],"names":["iconStyles","css","registry","registerIcon","name","svg","getIconSvg","BpIcon","LitElement","changedProps","cached","loadIconByName","classes","svgContent","html","ifDefined","unsafeHTML","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { LitElement, nothing } from 'lit';
-import '../icon/icon.js';
+import { BpIcon } from '../icon/icon.js';
 /**
  * A notification/toast component for displaying non-blocking messages.
  * Notifications can be dismissed manually or auto-close after a duration.
@@ -20,6 +20,11 @@ import '../icon/icon.js';
  * @csspart close-button - The close button
  */
 export declare class BpNotification 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)[];
     /** The notification variant */
     variant: 'info' | 'success' | 'warning' | 'error';
     /** Whether the notification is visible */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../source/components/notification/notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAQhD,OAAO,iBAAiB,CAAC;~~AAEzB~~;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,+BAA+B;IAWvB,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAE1D,0CAA0C;IACU,IAAI,EAAE,OAAO,CAAC;IAElE,gDAAgD;IAExC,QAAQ,EAAE,OAAO,CAAC;IAE1B,qEAAqE;IACjC,QAAQ,EAAE,MAAM,CAAC;IAErD,gCAAgC;IACI,KAAK,EAAE,MAAM,CAAC;IAElD,0CAA0C;IACN,OAAO,EAAE,MAAM,CAAC;IAEpD;;;OAGG;IAiBK,QAAQ,EACZ,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;IAEV,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,SAAS,CAAkB;IAE5C,MAAM,CAAC,MAAM,4BAAwB;;IAarC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAc/C,oBAAoB;IAKpB,4BAA4B;IAC5B,IAAI;IAKJ,4BAA4B;IAC5B,IAAI;IAKJ;;;OAGG;IACH,OAAO,CAAC,UAAU;IAkBlB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAOnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAQ3B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAS5B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAOxB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAMrB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAatB,MAAM;CA4DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}
1	+ {"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../source/components/notification/notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAQhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C;;;OAGG;IACH,MAAM,CAAC,YAAY,oBAAY;IAE/B,+BAA+B;IAWvB,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAE1D,0CAA0C;IACU,IAAI,EAAE,OAAO,CAAC;IAElE,gDAAgD;IAExC,QAAQ,EAAE,OAAO,CAAC;IAE1B,qEAAqE;IACjC,QAAQ,EAAE,MAAM,CAAC;IAErD,gCAAgC;IACI,KAAK,EAAE,MAAM,CAAC;IAElD,0CAA0C;IACN,OAAO,EAAE,MAAM,CAAC;IAEpD;;;OAGG;IAiBK,QAAQ,EACZ,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;IAEV,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,SAAS,CAAkB;IAE5C,MAAM,CAAC,MAAM,4BAAwB;;IAarC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAc/C,oBAAoB;IAKpB,4BAA4B;IAC5B,IAAI;IAKJ,4BAA4B;IAC5B,IAAI;IAKJ;;;OAGG;IACH,OAAO,CAAC,UAAU;IAkBlB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAOnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAQ3B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAS5B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAOxB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAMrB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAatB,MAAM;CA4DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

package/dist/components/notification.js CHANGED Viewed

@@ -5,7 +5,8 @@ import { checkSvg as v } from "../icons/check.js";
 import { warningCircleSvg as g } from "../icons/warning-circle.js";
 import { crossSvg as _ } from "../icons/cross.js";
 import { infoCircleSvg as y } from "../icons/info-circle.js";
-const C = h`
+import { BpIcon as C } from "./icon.js";
+const w = h`
   /* Base styles */
   :host {
     display: block;
@@ -219,10 +220,10 @@ const C = h`
     right: 0;
   }
 `;
-var w = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (t, r, l, a) => {
-  for (var e = a > 1 ? void 0 : a ? T(r, l) : r, p = t.length - 1, f; p >= 0; p--)
+var T = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, r, l, a) => {
+  for (var e = a > 1 ? void 0 : a ? x(r, l) : r, p = t.length - 1, f; p >= 0; p--)
     (f = t[p]) && (e = (a ? f(r, l, e) : f(e)) || e);
-  return a && e && w(r, l, e), e;
+  return a && e && T(r, l, e), e;
 };
 let i = class extends d {
   constructor() {
@@ -375,7 +376,8 @@ let i = class extends d {
     ` : u;
   }
 };
-i.styles = [C];
+i.dependencies = [C];
+i.styles = [w];
 o([
   n({
     type: String,