npm - @krollins/blueprint - Versions diffs - 0.1.14 → 0.1.16 - Mend

@krollins/blueprint 0.1.14 → 0.1.16

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 (1772) hide show

package/dist/components/code-block.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"code-block.js","sources":["../../source/components/code-block/code-block.style.ts","../../source/components/code-block/code-block.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const codeBlockStyles = css`\n /* Base styles /\n :host {\n display: block;\n container-type: inline-size;\n }\n\n .code-block {\n position: relative;\n border: var(--bp-border-width) solid var(--bp-color-border);\n border-radius: var(--bp-border-radius-lg);\n overflow: hidden;\n background-color: var(--bp-color-surface);\n font-family: var(--bp-font-family-mono);\n font-size: var(--bp-font-size-sm);\n line-height: var(--bp-line-height-relaxed);\n }\n\n / Header /\n .code-block__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--bp-spacing-sm);\n padding: var(--bp-spacing-xs) var(--bp-spacing-md);\n background-color: var(--bp-color-surface-elevated);\n border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n min-height: var(--bp-spacing-10);\n }\n\n .code-block__title {\n font-family: var(--bp-font-family);\n font-size: var(--bp-font-size-xs);\n font-weight: var(--bp-font-weight-medium);\n color: var(--bp-color-text-muted);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n text-transform: uppercase;\n letter-spacing: 0.05em; / Intentional one-off for header label readability /\n }\n\n .code-block__controls {\n display: flex;\n align-items: center;\n gap: var(--bp-spacing-xs);\n flex-shrink: 0;\n }\n\n / Copy button /\n .code-block__copy {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: var(--bp-spacing-2xs);\n border-radius: var(--bp-border-radius-md);\n color: var(--bp-color-text-muted);\n cursor: pointer;\n transition:\n color var(--bp-transition-fast),\n background-color var(--bp-transition-fast);\n }\n\n .code-block__copy:hover {\n color: var(--bp-color-text);\n background-color: var(--bp-color-hover-overlay);\n }\n\n .code-block__copy:active {\n background-color: var(--bp-color-active-overlay);\n }\n\n .code-block__copy:focus-visible {\n outline: var(--bp-focus-ring);\n outline-offset: var(--bp-focus-offset);\n }\n\n .code-block__copy--copied {\n color: var(--bp-color-success);\n }\n\n .code-block__copy--error {\n color: var(--bp-color-error);\n }\n\n .code-block__icon {\n width: var(--bp-icon-size-sm);\n height: var(--bp-icon-size-sm);\n }\n\n / Floating copy button (when header is hidden) /\n .code-block__floating-copy {\n position: absolute;\n top: var(--bp-spacing-xs);\n right: var(--bp-spacing-xs);\n z-index: var(--bp-z-base);\n opacity: 0;\n transition: opacity var(--bp-transition-fast);\n }\n\n .code-block__body:hover .code-block__floating-copy,\n .code-block__body:focus-within .code-block__floating-copy {\n opacity: 1;\n }\n\n / Ensure floating copy button is reachable on touch devices (no hover) /\n @media (hover: none) {\n .code-block__floating-copy {\n opacity: 0.7;\n }\n }\n\n .code-block__floating-copy .code-block__copy {\n background-color: var(--bp-color-surface-elevated);\n border: var(--bp-border-width) solid var(--bp-color-border);\n box-shadow: var(--bp-shadow-sm);\n }\n\n / Body /\n .code-block__body {\n position: relative;\n overflow: hidden;\n }\n\n .code-block__body--scroll {\n overflow-x: auto;\n }\n\n / Pre / Code /\n .code-block__pre {\n margin: 0;\n padding: var(--bp-spacing-md);\n overflow: visible;\n }\n\n .code-block__body--wrap .code-block__pre {\n white-space: pre-wrap;\n word-break: break-all;\n overflow-wrap: break-word;\n }\n\n .code-block__body--scroll .code-block__pre {\n white-space: pre;\n overflow-x: auto;\n }\n\n .code-block__code {\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n color: var(--bp-color-text);\n }\n\n / Line numbers grid layout /\n .code-block__lines {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n\n .code-block__lines--no-gutter {\n grid-template-columns: 1fr;\n }\n\n .code-block__line-number {\n align-self: start;\n text-align: right;\n padding-right: var(--bp-spacing-md);\n color: var(--bp-color-text-muted);\n user-select: none;\n min-width: var(--bp-spacing-8);\n opacity: var(--bp-opacity-subtle);\n }\n\n .code-block__line {\n display: block;\n padding-left: var(--bp-spacing-2xs);\n border-left: var(--bp-spacing-0-5) solid transparent;\n }\n\n .code-block__line--highlighted {\n background-color: var(--bp-color-selected-bg);\n border-left-color: var(--bp-color-primary);\n }\n\n / Collapsed / expand /\n / max-height = (line count × line-height × font-size) + vertical padding /\n .code-block__body--collapsed {\n max-height: calc(\n var(--_max-lines, 10) var(--bp-line-height-relaxed) * 1em +\n var(--bp-spacing-md) * 2\n );\n overflow: hidden;\n }\n\n .code-block__gradient {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--bp-spacing-16);\n background: linear-gradient(transparent, var(--bp-color-surface));\n pointer-events: none;\n }\n\n .code-block__expand {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: var(--bp-spacing-xs) var(--bp-spacing-md);\n background: none;\n border: none;\n border-top: var(--bp-border-width) solid var(--bp-color-border);\n color: var(--bp-color-primary);\n font-family: var(--bp-font-family);\n font-size: var(--bp-font-size-xs);\n font-weight: var(--bp-font-weight-medium);\n cursor: pointer;\n transition: background-color var(--bp-transition-fast);\n }\n\n .code-block__expand:hover {\n background-color: var(--bp-color-hover-overlay);\n }\n\n .code-block__expand:active {\n background-color: var(--bp-color-active-overlay);\n }\n\n .code-block__expand:focus-visible {\n outline: var(--bp-focus-ring);\n outline-offset: calc(-1 * var(--bp-focus-offset));\n }\n\n /* Visually hidden status for screen readers.\n Uses --bp-spacing-0-5 (2px) instead of the typical 1px sr-only pattern\n to stay consistent with design tokens throughout. /\n .code-block__status {\n position: absolute;\n width: var(--bp-spacing-0-5);\n height: var(--bp-spacing-0-5);\n padding: var(--bp-spacing-0);\n margin: calc(-1 var(--bp-spacing-0-5));\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: var(--bp-spacing-0);\n }\n\n /* Container queries for responsive behavior /\n @container (max-width: 480px) {\n / stylelint-disable-line -- container queries cannot use var() /\n .code-block__header {\n flex-wrap: wrap;\n }\n\n .code-block__pre {\n padding: var(--bp-spacing-sm);\n font-size: var(--bp-font-size-xs);\n }\n\n .code-block__line-number {\n min-width: var(--bp-spacing-6);\n padding-right: var(--bp-spacing-sm);\n }\n }\n`;\n","import { LitElement, html, nothing, 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 { codeBlockStyles } from './code-block.style.js';\n\n/\n Result returned by a highlight adapter.\n /\nexport interface HighlightResult {\n /* The highlighted code as an HTML string. /\n html: string;\n /* Whether highlighting was actually applied (false = plain text fallback). /\n isHighlighted: boolean;\n}\n\n/\n Adapter interface for pluggable syntax highlighting.\n /\nexport interface CodeBlockHighlightAdapter {\n /\n Called once when the adapter is first used.\n * Use this for async initialization (loading Shiki, registering languages, etc).\n * Return value is passed to `highlight()` as context.\n /\n initialize?(): Promise<unknown>;\n\n /\n Return highlighted HTML for the given code and language.\n * `context` is the resolved value from `initialize()`.\n /\n highlight(options: {\n code: string;\n language: string;\n context: unknown;\n }): HighlightResult;\n}\n\n/* Maps HTML special characters to their entity equivalents for XSS prevention. /\nconst htmlEscapeMap: Record<string, string> = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": ''',\n};\n\n/\n Escapes HTML special characters in a single pass to prevent XSS when rendering plain text.\n /\nfunction escapeHtml(text: string): string {\n return text.replace(/[&<>\"']/g, (char) => htmlEscapeMap[char] ?? char);\n}\n\n/\n Built-in plain text adapter that escapes HTML and renders monospace text.\n * Zero dependencies, zero bundle cost.\n /\nexport const plainTextAdapter: CodeBlockHighlightAdapter = {\n highlight({ code }) {\n return {\n html: escapeHtml(code),\n isHighlighted: false,\n };\n },\n};\n\n/\n A code block component for displaying syntax-highlighted code with\n * copy-to-clipboard, line numbers, line highlighting, and expand/collapse.\n \n @slot title - Custom title content. Overrides the `title` attribute.\n * @slot controls - Additional control buttons placed before the copy button.\n * @slot copy-icon - Custom icon for the copy button (default state).\n * @slot copied-icon - Custom icon for the copy button (success state).\n \n @fires bp-copy - Fired after a copy attempt. Detail: `{ code: string, success: boolean }`\n \n @csspart base - Outer wrapper\n * @csspart header - Header bar\n * @csspart title - Title text area\n * @csspart controls - Controls container\n * @csspart copy-button - The copy button\n * @csspart body - Scrollable code container\n * @csspart pre - The `<pre>` element\n * @csspart code - The `<code>` element\n * @csspart line-number - Individual line number cell\n * @csspart line - Individual line of code\n /\n@customElement('bp-code-block')\nexport class BpCodeBlock extends LitElement {\n /\n The source code to display.\n /\n @property({ type: String }) declare code: string;\n\n /\n Language identifier for syntax highlighting (e.g. 'typescript', 'html', 'python').\n * Also displayed as a label when no title is set.\n /\n @property({ type: String }) declare language: string;\n\n /\n Optional title displayed in the header (e.g. a filename like `index.ts`).\n * Overrides the language label.\n /\n @property({ type: String }) declare title: string;\n\n /\n Show line number gutter.\n /\n @property({ type: Boolean, attribute: 'show-line-numbers', reflect: true })\n declare showLineNumbers: boolean;\n\n /\n Array of 1-based line numbers to visually highlight.\n /\n @property({ type: Array }) declare highlightLines: number[];\n\n /\n Wrap long lines instead of horizontal scroll.\n /\n @property({ type: Boolean, attribute: 'wrap-lines', reflect: true })\n declare wrapLines: boolean;\n\n /\n Show the copy-to-clipboard button.\n /\n @property({ type: Boolean, attribute: 'show-copy-button', reflect: true })\n declare showCopyButton: boolean;\n\n /\n When set, collapse the code block to this many visible lines with a \"Show more\" toggle.\n /\n @property({ type: Number, attribute: 'max-lines' })\n declare maxLines: number \| undefined;\n\n /\n Show/hide the header bar. When false, the copy button floats over the code.\n /\n @property({ type: Boolean, attribute: 'show-header', reflect: true })\n declare showHeader: boolean;\n\n /\n The syntax highlight adapter to use for this instance.\n * Defaults to `BpCodeBlock.defaultAdapter` which is the plainTextAdapter.\n /\n @property({ attribute: false })\n declare highlightAdapter: CodeBlockHighlightAdapter;\n\n /\n Global default adapter used when no per-instance adapter is set.\n */\n static defaultAdapter: CodeBlockHighlightAdapter = plainTextAdapter;\n\n @state() private _copyState: 'idle' \| 'copied' \| 'error' = 'idle';\n @state() private _expanded = false;\n @state() private _highlightedHtml = '';\n @state() private _adapterContext: unknown = undefined;\n @state() private _adapterInitialized = false;\n @state() private _lineCount = 0;\n @state() private _highlightSet: Set<number> = new Set();\n @state() private _highlightedLines: string[] = [];\n\n private _copyResetTimer: ReturnType<typeof setTimeout> \| null = null;\n\n static styles = [codeBlockStyles];\n\n constructor() {\n super();\n this.code = '';\n this.language = 'text';\n this.title = '';\n this.showLineNumbers = false;\n this.highlightLines = [];\n this.wrapLines = true;\n this.showCopyButton = true;\n this.maxLines = undefined;\n this.showHeader = true;\n this.highlightAdapter = BpCodeBlock.defaultAdapter;\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this._copyResetTimer) {\n clearTimeout(this._copyResetTimer);\n this._copyResetTimer = null;\n }\n }\n\n protected override willUpdate(changedProperties: PropertyValues): void {\n super.willUpdate(changedProperties);\n\n if (changedProperties.has('highlightAdapter')) {\n this._adapterInitialized = false;\n this._adapterContext = undefined;\n this._initializeAdapter();\n }\n\n if (changedProperties.has('code')) {\n this._lineCount = this.code.split('\\n').length;\n }\n\n if (changedProperties.has('highlightLines')) {\n this._highlightSet = new Set(this.highlightLines);\n }\n\n const needsRehighlight =\n changedProperties.has('code') \|\|\n changedProperties.has('language') \|\|\n changedProperties.has('highlightAdapter');\n\n if (needsRehighlight) {\n this._updateHighlightingSync();\n }\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._initializeAdapter();\n }\n\n private async _initializeAdapter(): Promise<void> {\n const adapter = this.highlightAdapter;\n if (!this._adapterInitialized && adapter.initialize) {\n try {\n const context = await adapter.initialize();\n // Bail if adapter changed while awaiting\n if (this.highlightAdapter !== adapter) return;\n this._adapterContext = context;\n } catch {\n if (this.highlightAdapter !== adapter) return;\n this._adapterContext = undefined;\n }\n this._adapterInitialized = true;\n // Re-highlight with context after async init\n this._updateHighlightingSync();\n this.requestUpdate();\n }\n }\n\n private _updateHighlightingSync(): void {\n const adapter = this.highlightAdapter;\n\n try {\n const result = adapter.highlight({\n code: this.code,\n language: this.language,\n context: this._adapterContext,\n });\n this._highlightedHtml = result.html;\n } catch {\n // Fallback to plain text on adapter error\n this._highlightedHtml = escapeHtml(this.code);\n }\n\n this._highlightedLines = this._highlightedHtml.split('\\n');\n }\n\n private _handleCopy = async (): Promise<void> => {\n let success: boolean;\n\n try {\n if (navigator.clipboard) {\n await navigator.clipboard.writeText(this.code);\n success = true;\n } else {\n // Fallback for insecure contexts\n success = this._fallbackCopy();\n }\n } catch {\n success = this._fallbackCopy();\n }\n\n this._copyState = success ? 'copied' : 'error';\n\n this.dispatchEvent(\n new CustomEvent('bp-copy', {\n detail: { code: this.code, success },\n bubbles: true,\n composed: true,\n })\n );\n\n // Reset after 2 seconds\n if (this._copyResetTimer) {\n clearTimeout(this._copyResetTimer);\n }\n this._copyResetTimer = setTimeout(() => {\n this._copyState = 'idle';\n this._copyResetTimer = null;\n }, 2000);\n };\n\n private _fallbackCopy(): boolean {\n try {\n const textarea = document.createElement('textarea');\n textarea.value = this.code;\n textarea.style.position = 'fixed';\n textarea.style.left = '-9999px';\n textarea.style.top = '-9999px';\n document.body.appendChild(textarea);\n textarea.select();\n const result = document.execCommand('copy');\n document.body.removeChild(textarea);\n return result;\n } catch {\n return false;\n }\n }\n\n private _toggleExpanded(): void {\n this._expanded = !this._expanded;\n }\n\n private get _shouldCollapse(): boolean {\n return (\n this.maxLines !== undefined &&\n this.maxLines > 0 &&\n this._lineCount > this.maxLines\n );\n }\n\n private get _isCollapsed(): boolean {\n return this._shouldCollapse && !this._expanded;\n }\n\n private get _headerLabel(): string {\n return this.title \|\| this.language;\n }\n\n private _getCopyAriaLabel(): string {\n if (this._copyState === 'copied') return 'Copied!';\n if (this._copyState === 'error') return 'Failed to copy';\n return 'Copy code';\n }\n\n private _renderCopyIcon() {\n if (this._copyState === 'copied') {\n return html`\n <slot name=\"copied-icon\">\n <svg\n class=\"code-block__icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </slot>\n `;\n }\n\n return html`\n <slot name=\"copy-icon\">\n <svg\n class=\"code-block__icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n <path\n d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\n ></path>\n </svg>\n </slot>\n `;\n }\n\n private _renderCopyButton() {\n if (!this.showCopyButton) return nothing;\n\n return html`\n <button\n part=\"copy-button\"\n class=\"code-block__copy code-block__copy--${this._copyState}\"\n aria-label=${this._getCopyAriaLabel()}\n @click=${this._handleCopy}\n >\n ${this._renderCopyIcon()}\n </button>\n `;\n }\n\n private _renderHeader() {\n if (!this.showHeader) return nothing;\n\n return html`\n <div part=\"header\" class=\"code-block__header\">\n <span part=\"title\" class=\"code-block__title\">\n <slot name=\"title\">${this._headerLabel}</slot>\n </span>\n <div part=\"controls\" class=\"code-block__controls\">\n <slot name=\"controls\"></slot>\n ${this._renderCopyButton()}\n </div>\n </div>\n `;\n }\n\n private _renderFloatingCopyButton() {\n if (this.showHeader \|\| !this.showCopyButton) return nothing;\n\n return html`\n <div class=\"code-block__floating-copy\">${this._renderCopyButton()}</div>\n `;\n }\n\n private _renderLine(\n lineHtml: string,\n lineNumber: number,\n showNumber: boolean\n ) {\n const isHighlighted = this._highlightSet.has(lineNumber);\n return html`\n ${showNumber\n ? html`<span\n part=\"line-number\"\n class=\"code-block__line-number\"\n aria-hidden=\"true\"\n >${lineNumber}</span\n >`\n : nothing}\n <span\n part=\"line\"\n class=\"code-block__line ${isHighlighted\n ? 'code-block__line--highlighted'\n : ''}\"\n aria-current=${ifDefined(isHighlighted ? 'true' : undefined)}\n >${unsafeHTML(lineHtml)}</span\n >\n `;\n }\n\n private _renderCodeLines() {\n if (this.showLineNumbers) {\n return html`\n <div class=\"code-block__lines\">\n ${this._highlightedLines.map((lineHtml, index) =>\n this._renderLine(lineHtml, index + 1, true)\n )}\n </div>\n `;\n }\n\n if (this.highlightLines.length > 0) {\n return html`\n <div class=\"code-block__lines code-block__lines--no-gutter\">\n ${this._highlightedLines.map((lineHtml, index) =>\n this._renderLine(lineHtml, index + 1, false)\n )}\n </div>\n `;\n }\n\n return unsafeHTML(this._highlightedHtml);\n }\n\n private _renderExpandButton() {\n if (!this._shouldCollapse) return nothing;\n\n return html`\n <button\n part=\"expand-button\"\n class=\"code-block__expand\"\n @click=${this._toggleExpanded}\n aria-expanded=${this._expanded}\n >\n ${this._expanded ? 'Show less' : 'Show more'}\n </button>\n `;\n }\n\n render() {\n const bodyClasses = [\n 'code-block__body',\n this.wrapLines ? 'code-block__body--wrap' : 'code-block__body--scroll',\n this._isCollapsed ? 'code-block__body--collapsed' : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return html`\n <div\n part=\"base\"\n class=\"code-block\"\n role=\"region\"\n aria-label=${this.title\n ? `Code example: ${this.title}`\n : 'Code example'}\n style=${this._isCollapsed && this.maxLines\n ? `--_max-lines: ${this.maxLines}`\n : ''}\n >\n ${this._renderHeader()}\n <div part=\"body\" class=${bodyClasses}>\n ${this._renderFloatingCopyButton()}\n <pre\n part=\"pre\"\n class=\"code-block__pre\"\n ><code part=\"code\" class=\"code-block__code\">${this._renderCodeLines()}</code></pre>\n ${this._isCollapsed\n ? html`<div class=\"code-block__gradient\"></div>`\n : nothing}\n </div>\n ${this._renderExpandButton()}\n <div class=\"code-block__status\" role=\"status\" aria-live=\"polite\">\n ${this._copyState === 'copied' ? 'Copied to clipboard' : ''}\n ${this._copyState === 'error' ? 'Failed to copy' : ''}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-code-block': BpCodeBlock;\n }\n}\n"],"names":["codeBlockStyles","css","htmlEscapeMap","escapeHtml","text","char","plainTextAdapter","code","BpCodeBlock","LitElement","success","changedProperties","adapter","context","result","textarea","html","nothing","lineHtml","lineNumber","showNumber","isHighlighted","ifDefined","unsafeHTML","index","bodyClasses","__decorateClass","property","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACqC/B,MAAMC,IAAwC;AAAA,EAC5C,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;AAKA,SAASC,EAAWC,GAAsB;AACxC,SAAOA,EAAK,QAAQ,YAAY,CAACC,MAASH,EAAcG,CAAI,KAAKA,CAAI;AACvE;AAMO,MAAMC,IAA8C;AAAA,EACzD,UAAU,EAAE,MAAAC,KAAQ;AAClB,WAAO;AAAA,MACL,MAAMJ,EAAWI,CAAI;AAAA,MACrB,eAAe;AAAA,IAAA;AAAA,EAEnB;AACF;AAyBO,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EA8E1C,cAAc;AACZ,UAAA,GAdO,KAAQ,aAA0C,QAClD,KAAQ,YAAY,IACpB,KAAQ,mBAAmB,IAC3B,KAAQ,kBAA2B,QACnC,KAAQ,sBAAsB,IAC9B,KAAQ,aAAa,GACrB,KAAQ,oCAAiC,IAAA,GACzC,KAAQ,oBAA8B,CAAA,GAE/C,KAAQ,kBAAwD,MA+FhE,KAAQ,cAAc,YAA2B;AAC/C,UAAIC;AAEJ,UAAI;AACF,QAAI,UAAU,aACZ,MAAM,UAAU,UAAU,UAAU,KAAK,IAAI,GAC7CA,IAAU,MAGVA,IAAU,KAAK,cAAA;AAAA,MAEnB,QAAQ;AACN,QAAAA,IAAU,KAAK,cAAA;AAAA,MACjB;AAEA,WAAK,aAAaA,IAAU,WAAW,SAEvC,KAAK;AAAA,QACH,IAAI,YAAY,WAAW;AAAA,UACzB,QAAQ,EAAE,MAAM,KAAK,MAAM,SAAAA,EAAA;AAAA,UAC3B,SAAS;AAAA,UACT,UAAU;AAAA,QAAA,CACX;AAAA,MAAA,GAIC,KAAK,mBACP,aAAa,KAAK,eAAe,GAEnC,KAAK,kBAAkB,WAAW,MAAM;AACtC,aAAK,aAAa,QAClB,KAAK,kBAAkB;AAAA,MACzB,GAAG,GAAI;AAAA,IACT,GA1HE,KAAK,OAAO,IACZ,KAAK,WAAW,QAChB,KAAK,QAAQ,IACb,KAAK,kBAAkB,IACvB,KAAK,iBAAiB,CAAA,GACtB,KAAK,YAAY,IACjB,KAAK,iBAAiB,IACtB,KAAK,WAAW,QAChB,KAAK,aAAa,IAClB,KAAK,mBAAmBF,EAAY;AAAA,EACtC;AAAA,EAEA,uBAA6B;AAC3B,UAAM,qBAAA,GACF,KAAK,oBACP,aAAa,KAAK,eAAe,GACjC,KAAK,kBAAkB;AAAA,EAE3B;AAAA,EAEmB,WAAWG,GAAyC;AACrE,UAAM,WAAWA,CAAiB,GAE9BA,EAAkB,IAAI,kBAAkB,MAC1C,KAAK,sBAAsB,IAC3B,KAAK,kBAAkB,QACvB,KAAK,mBAAA,IAGHA,EAAkB,IAAI,MAAM,MAC9B,KAAK,aAAa,KAAK,KAAK,MAAM;AAAA,CAAI,EAAE,SAGtCA,EAAkB,IAAI,gBAAgB,MACxC,KAAK,gBAAgB,IAAI,IAAI,KAAK,cAAc,KAIhDA,EAAkB,IAAI,MAAM,KAC5BA,EAAkB,IAAI,UAAU,KAChCA,EAAkB,IAAI,kBAAkB,MAGxC,KAAK,wBAAA;AAAA,EAET;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,mBAAA;AAAA,EACP;AAAA,EAEA,MAAc,qBAAoC;AAChD,UAAMC,IAAU,KAAK;AACrB,QAAI,CAAC,KAAK,uBAAuBA,EAAQ,YAAY;AACnD,UAAI;AACF,cAAMC,IAAU,MAAMD,EAAQ,WAAA;AAE9B,YAAI,KAAK,qBAAqBA,EAAS;AACvC,aAAK,kBAAkBC;AAAA,MACzB,QAAQ;AACN,YAAI,KAAK,qBAAqBD,EAAS;AACvC,aAAK,kBAAkB;AAAA,MACzB;AACA,WAAK,sBAAsB,IAE3B,KAAK,wBAAA,GACL,KAAK,cAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEQ,0BAAgC;AACtC,UAAMA,IAAU,KAAK;AAErB,QAAI;AACF,YAAME,IAASF,EAAQ,UAAU;AAAA,QAC/B,MAAM,KAAK;AAAA,QACX,UAAU,KAAK;AAAA,QACf,SAAS,KAAK;AAAA,MAAA,CACf;AACD,WAAK,mBAAmBE,EAAO;AAAA,IACjC,QAAQ;AAEN,WAAK,mBAAmBX,EAAW,KAAK,IAAI;AAAA,IAC9C;AAEA,SAAK,oBAAoB,KAAK,iBAAiB,MAAM;AAAA,CAAI;AAAA,EAC3D;AAAA,EAqCQ,gBAAyB;AAC/B,QAAI;AACF,YAAMY,IAAW,SAAS,cAAc,UAAU;AAClD,MAAAA,EAAS,QAAQ,KAAK,MACtBA,EAAS,MAAM,WAAW,SAC1BA,EAAS,MAAM,OAAO,WACtBA,EAAS,MAAM,MAAM,WACrB,SAAS,KAAK,YAAYA,CAAQ,GAClCA,EAAS,OAAA;AACT,YAAMD,IAAS,SAAS,YAAY,MAAM;AAC1C,sBAAS,KAAK,YAAYC,CAAQ,GAC3BD;AAAA,IACT,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAAA,EAEQ,kBAAwB;AAC9B,SAAK,YAAY,CAAC,KAAK;AAAA,EACzB;AAAA,EAEA,IAAY,kBAA2B;AACrC,WACE,KAAK,aAAa,UAClB,KAAK,WAAW,KAChB,KAAK,aAAa,KAAK;AAAA,EAE3B;AAAA,EAEA,IAAY,eAAwB;AAClC,WAAO,KAAK,mBAAmB,CAAC,KAAK;AAAA,EACvC;AAAA,EAEA,IAAY,eAAuB;AACjC,WAAO,KAAK,SAAS,KAAK;AAAA,EAC5B;AAAA,EAEQ,oBAA4B;AAClC,WAAI,KAAK,eAAe,WAAiB,YACrC,KAAK,eAAe,UAAgB,mBACjC;AAAA,EACT;AAAA,EAEQ,kBAAkB;AACxB,WAAI,KAAK,eAAe,WACfE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAkBFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmBT;AAAA,EAEQ,oBAAoB;AAC1B,WAAK,KAAK,iBAEHA;AAAA;AAAA;AAAA,oDAGyC,KAAK,UAAU;AAAA,qBAC9C,KAAK,mBAAmB;AAAA,iBAC5B,KAAK,WAAW;AAAA;AAAA,UAEvB,KAAK,iBAAiB;AAAA;AAAA,QATKC;AAAA,EAYnC;AAAA,EAEQ,gBAAgB;AACtB,WAAK,KAAK,aAEHD;AAAA;AAAA;AAAA,+BAGoB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,YAIpC,KAAK,mBAAmB;AAAA;AAAA;AAAA,QATHC;AAAA,EAa/B;AAAA,EAEQ,4BAA4B;AAClC,WAAI,KAAK,cAAc,CAAC,KAAK,iBAAuBA,IAE7CD;AAAA,+CACoC,KAAK,mBAAmB;AAAA;AAAA,EAErE;AAAA,EAEQ,YACNE,GACAC,GACAC,GACA;AACA,UAAMC,IAAgB,KAAK,cAAc,IAAIF,CAAU;AACvD,WAAOH;AAAA,QACHI,IACEJ;AAAA;AAAA;AAAA;AAAA,eAIKG,CAAU;AAAA,eAEfF,CAAO;AAAA;AAAA;AAAA,kCAGiBI,IACtB,kCACA,EAAE;AAAA,uBACSC,EAAUD,IAAgB,SAAS,MAAS,CAAC;AAAA,WACzDE,EAAWL,CAAQ,CAAC;AAAA;AAAA;AAAA,EAG7B;AAAA,EAEQ,mBAAmB;AACzB,WAAI,KAAK,kBACAF;AAAA;AAAA,YAED,KAAK,kBAAkB;AAAA,MAAI,CAACE,GAAUM,MACtC,KAAK,YAAYN,GAAUM,IAAQ,GAAG,EAAI;AAAA,IAAA,CAC3C;AAAA;AAAA,UAKH,KAAK,eAAe,SAAS,IACxBR;AAAA;AAAA,YAED,KAAK,kBAAkB;AAAA,MAAI,CAACE,GAAUM,MACtC,KAAK,YAAYN,GAAUM,IAAQ,GAAG,EAAK;AAAA,IAAA,CAC5C;AAAA;AAAA,UAKAD,EAAW,KAAK,gBAAgB;AAAA,EACzC;AAAA,EAEQ,sBAAsB;AAC5B,WAAK,KAAK,kBAEHP;AAAA;AAAA;AAAA;AAAA,iBAIM,KAAK,eAAe;AAAA,wBACb,KAAK,SAAS;AAAA;AAAA,UAE5B,KAAK,YAAY,cAAc,WAAW;AAAA;AAAA,QATdC;AAAA,EAYpC;AAAA,EAEA,SAAS;AACP,UAAMQ,IAAc;AAAA,MAClB;AAAA,MACA,KAAK,YAAY,2BAA2B;AAAA,MAC5C,KAAK,eAAe,gCAAgC;AAAA,IAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WAAOT;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKU,KAAK,QACd,iBAAiB,KAAK,KAAK,KAC3B,cAAc;AAAA,gBACV,KAAK,gBAAgB,KAAK,WAC9B,iBAAiB,KAAK,QAAQ,KAC9B,EAAE;AAAA;AAAA,UAEJ,KAAK,eAAe;AAAA,iCACGS,CAAW;AAAA,YAChC,KAAK,2BAA2B;AAAA;AAAA;AAAA;AAAA,wDAIY,KAAK,kBAAkB;AAAA,YACnE,KAAK,eACHT,8CACAC,CAAO;AAAA;AAAA,UAEX,KAAK,qBAAqB;AAAA;AAAA,YAExB,KAAK,eAAe,WAAW,wBAAwB,EAAE;AAAA,YACzD,KAAK,eAAe,UAAU,mBAAmB,EAAE;AAAA;AAAA;AAAA;AAAA,EAI7D;AACF;AAhbaT,EA+DJ,iBAA4CF;AA/DxCE,EA4EJ,SAAS,CAACR,CAAe;AAxEI0B,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfnB,EAIyB,WAAA,QAAA,CAAA;AAMAkB,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfnB,EAUyB,WAAA,YAAA,CAAA;AAMAkB,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBfnB,EAgByB,WAAA,SAAA,CAAA;AAM5BkB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,SAAS,WAAW,qBAAqB,SAAS,IAAM;AAAA,GArB/DnB,EAsBH,WAAA,mBAAA,CAAA;AAK2BkB,EAAA;AAAA,EAAlCC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA3BdnB,EA2BwB,WAAA,kBAAA,CAAA;AAM3BkB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,SAAS,WAAW,cAAc,SAAS,IAAM;AAAA,GAhCxDnB,EAiCH,WAAA,aAAA,CAAA;AAMAkB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,SAAS,WAAW,oBAAoB,SAAS,IAAM;AAAA,GAtC9DnB,EAuCH,WAAA,kBAAA,CAAA;AAMAkB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GA5CvCnB,EA6CH,WAAA,YAAA,CAAA;AAMAkB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,SAAS,WAAW,eAAe,SAAS,IAAM;AAAA,GAlDzDnB,EAmDH,WAAA,cAAA,CAAA;AAOAkB,EAAA;AAAA,EADPC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAzDnBnB,EA0DH,WAAA,oBAAA,CAAA;AAOSkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAjEIpB,EAiEM,WAAA,cAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAlEIpB,EAkEM,WAAA,aAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAnEIpB,EAmEM,WAAA,oBAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GApEIpB,EAoEM,WAAA,mBAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GArEIpB,EAqEM,WAAA,uBAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtEIpB,EAsEM,WAAA,cAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvEIpB,EAuEM,WAAA,iBAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxEIpB,EAwEM,WAAA,qBAAA,CAAA;AAxENA,IAANkB,EAAA;AAAA,EADNG,EAAc,eAAe;AAAA,GACjBrB,CAAA;"}
1	+ {"version":3,"file":"code-block.js","sources":["../../source/components/code-block/code-block.style.ts","../../source/components/code-block/code-block.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const codeBlockStyles = css`\r\n /* Base styles /\r\n :host {\r\n display: block;\r\n container-type: inline-size;\r\n }\r\n\r\n .code-block {\r\n position: relative;\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n border-radius: var(--bp-border-radius-lg);\r\n overflow: hidden;\r\n background-color: var(--bp-color-surface);\r\n font-family: var(--bp-font-family-mono);\r\n font-size: var(--bp-font-size-sm);\r\n line-height: var(--bp-line-height-relaxed);\r\n }\r\n\r\n / Header /\r\n .code-block__header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: var(--bp-spacing-sm);\r\n padding: var(--bp-spacing-xs) var(--bp-spacing-md);\r\n background-color: var(--bp-color-surface-elevated);\r\n border-bottom: var(--bp-border-width) solid var(--bp-color-border);\r\n min-height: var(--bp-spacing-10);\r\n }\r\n\r\n .code-block__title {\r\n font-family: var(--bp-font-family);\r\n font-size: var(--bp-font-size-xs);\r\n font-weight: var(--bp-font-weight-medium);\r\n color: var(--bp-color-text-muted);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n min-width: 0;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em; / Intentional one-off for header label readability /\r\n }\r\n\r\n .code-block__controls {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--bp-spacing-xs);\r\n flex-shrink: 0;\r\n }\r\n\r\n / Copy button /\r\n .code-block__copy {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: none;\r\n border: none;\r\n padding: var(--bp-spacing-2xs);\r\n border-radius: var(--bp-border-radius-md);\r\n color: var(--bp-color-text-muted);\r\n cursor: pointer;\r\n transition:\r\n color var(--bp-transition-fast),\r\n background-color var(--bp-transition-fast);\r\n }\r\n\r\n .code-block__copy:hover {\r\n color: var(--bp-color-text);\r\n background-color: var(--bp-color-hover-overlay);\r\n }\r\n\r\n .code-block__copy:active {\r\n background-color: var(--bp-color-active-overlay);\r\n }\r\n\r\n .code-block__copy:focus-visible {\r\n outline: var(--bp-focus-ring);\r\n outline-offset: var(--bp-focus-offset);\r\n }\r\n\r\n .code-block__copy--copied {\r\n color: var(--bp-color-success);\r\n }\r\n\r\n .code-block__copy--error {\r\n color: var(--bp-color-error);\r\n }\r\n\r\n .code-block__icon {\r\n width: var(--bp-icon-size-sm);\r\n height: var(--bp-icon-size-sm);\r\n }\r\n\r\n / Floating copy button (when header is hidden) /\r\n .code-block__floating-copy {\r\n position: absolute;\r\n top: var(--bp-spacing-xs);\r\n right: var(--bp-spacing-xs);\r\n z-index: var(--bp-z-base);\r\n opacity: 0;\r\n transition: opacity var(--bp-transition-fast);\r\n }\r\n\r\n .code-block__body:hover .code-block__floating-copy,\r\n .code-block__body:focus-within .code-block__floating-copy {\r\n opacity: 1;\r\n }\r\n\r\n / Ensure floating copy button is reachable on touch devices (no hover) /\r\n @media (hover: none) {\r\n .code-block__floating-copy {\r\n opacity: 0.7;\r\n }\r\n }\r\n\r\n .code-block__floating-copy .code-block__copy {\r\n background-color: var(--bp-color-surface-elevated);\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n box-shadow: var(--bp-shadow-sm);\r\n }\r\n\r\n / Body /\r\n .code-block__body {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .code-block__body--scroll {\r\n overflow-x: auto;\r\n }\r\n\r\n / Pre / Code /\r\n .code-block__pre {\r\n margin: 0;\r\n padding: var(--bp-spacing-md);\r\n overflow: visible;\r\n }\r\n\r\n .code-block__body--wrap .code-block__pre {\r\n white-space: pre-wrap;\r\n word-break: break-all;\r\n overflow-wrap: break-word;\r\n }\r\n\r\n .code-block__body--scroll .code-block__pre {\r\n white-space: pre;\r\n overflow-x: auto;\r\n }\r\n\r\n .code-block__code {\r\n font-family: inherit;\r\n font-size: inherit;\r\n line-height: inherit;\r\n color: var(--bp-color-text);\r\n }\r\n\r\n / Line numbers grid layout /\r\n .code-block__lines {\r\n display: grid;\r\n grid-template-columns: auto 1fr;\r\n }\r\n\r\n .code-block__lines--no-gutter {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .code-block__line-number {\r\n align-self: start;\r\n text-align: right;\r\n padding-right: var(--bp-spacing-md);\r\n color: var(--bp-color-text-muted);\r\n user-select: none;\r\n min-width: var(--bp-spacing-8);\r\n opacity: var(--bp-opacity-subtle);\r\n }\r\n\r\n .code-block__line {\r\n display: block;\r\n padding-left: var(--bp-spacing-2xs);\r\n border-left: var(--bp-spacing-0-5) solid transparent;\r\n }\r\n\r\n .code-block__line--highlighted {\r\n background-color: var(--bp-color-selected-bg);\r\n border-left-color: var(--bp-color-primary);\r\n }\r\n\r\n / Collapsed / expand /\r\n / max-height = (line count × line-height × font-size) + vertical padding /\r\n .code-block__body--collapsed {\r\n max-height: calc(\r\n var(--_max-lines, 10) var(--bp-line-height-relaxed) * 1em +\r\n var(--bp-spacing-md) * 2\r\n );\r\n overflow: hidden;\r\n }\r\n\r\n .code-block__gradient {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: var(--bp-spacing-16);\r\n background: linear-gradient(transparent, var(--bp-color-surface));\r\n pointer-events: none;\r\n }\r\n\r\n .code-block__expand {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n padding: var(--bp-spacing-xs) var(--bp-spacing-md);\r\n background: none;\r\n border: none;\r\n border-top: var(--bp-border-width) solid var(--bp-color-border);\r\n color: var(--bp-color-primary);\r\n font-family: var(--bp-font-family);\r\n font-size: var(--bp-font-size-xs);\r\n font-weight: var(--bp-font-weight-medium);\r\n cursor: pointer;\r\n transition: background-color var(--bp-transition-fast);\r\n }\r\n\r\n .code-block__expand:hover {\r\n background-color: var(--bp-color-hover-overlay);\r\n }\r\n\r\n .code-block__expand:active {\r\n background-color: var(--bp-color-active-overlay);\r\n }\r\n\r\n .code-block__expand:focus-visible {\r\n outline: var(--bp-focus-ring);\r\n outline-offset: calc(-1 * var(--bp-focus-offset));\r\n }\r\n\r\n /* Visually hidden status for screen readers.\r\n Uses --bp-spacing-0-5 (2px) instead of the typical 1px sr-only pattern\r\n to stay consistent with design tokens throughout. /\r\n .code-block__status {\r\n position: absolute;\r\n width: var(--bp-spacing-0-5);\r\n height: var(--bp-spacing-0-5);\r\n padding: var(--bp-spacing-0);\r\n margin: calc(-1 var(--bp-spacing-0-5));\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: var(--bp-spacing-0);\r\n }\r\n\r\n /* Container queries for responsive behavior /\r\n @container (max-width: 480px) {\r\n / stylelint-disable-line -- container queries cannot use var() /\r\n .code-block__header {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .code-block__pre {\r\n padding: var(--bp-spacing-sm);\r\n font-size: var(--bp-font-size-xs);\r\n }\r\n\r\n .code-block__line-number {\r\n min-width: var(--bp-spacing-6);\r\n padding-right: var(--bp-spacing-sm);\r\n }\r\n }\r\n`;\r\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\r\nimport { codeBlockStyles } from './code-block.style.js';\r\n\r\n/\r\n Result returned by a highlight adapter.\r\n /\r\nexport interface HighlightResult {\r\n /* The highlighted code as an HTML string. /\r\n html: string;\r\n /* Whether highlighting was actually applied (false = plain text fallback). /\r\n isHighlighted: boolean;\r\n}\r\n\r\n/\r\n Adapter interface for pluggable syntax highlighting.\r\n /\r\nexport interface CodeBlockHighlightAdapter {\r\n /\r\n Called once when the adapter is first used.\r\n * Use this for async initialization (loading Shiki, registering languages, etc).\r\n * Return value is passed to `highlight()` as context.\r\n /\r\n initialize?(): Promise<unknown>;\r\n\r\n /\r\n Return highlighted HTML for the given code and language.\r\n * `context` is the resolved value from `initialize()`.\r\n /\r\n highlight(options: {\r\n code: string;\r\n language: string;\r\n context: unknown;\r\n }): HighlightResult;\r\n}\r\n\r\n/* Maps HTML special characters to their entity equivalents for XSS prevention. /\r\nconst htmlEscapeMap: Record<string, string> = {\r\n '&': '&',\r\n '<': '<',\r\n '>': '>',\r\n '\"': '"',\r\n \"'\": ''',\r\n};\r\n\r\n/\r\n Escapes HTML special characters in a single pass to prevent XSS when rendering plain text.\r\n /\r\nfunction escapeHtml(text: string): string {\r\n return text.replace(/[&<>\"']/g, (char) => htmlEscapeMap[char] ?? char);\r\n}\r\n\r\n/\r\n Built-in plain text adapter that escapes HTML and renders monospace text.\r\n * Zero dependencies, zero bundle cost.\r\n /\r\nexport const plainTextAdapter: CodeBlockHighlightAdapter = {\r\n highlight({ code }) {\r\n return {\r\n html: escapeHtml(code),\r\n isHighlighted: false,\r\n };\r\n },\r\n};\r\n\r\n/\r\n A code block component for displaying syntax-highlighted code with\r\n * copy-to-clipboard, line numbers, line highlighting, and expand/collapse.\r\n \r\n @slot title - Custom title content. Overrides the `title` attribute.\r\n * @slot controls - Additional control buttons placed before the copy button.\r\n * @slot copy-icon - Custom icon for the copy button (default state).\r\n * @slot copied-icon - Custom icon for the copy button (success state).\r\n \r\n @fires bp-copy - Fired after a copy attempt. Detail: `{ code: string, success: boolean }`\r\n \r\n @csspart base - Outer wrapper\r\n * @csspart header - Header bar\r\n * @csspart title - Title text area\r\n * @csspart controls - Controls container\r\n * @csspart copy-button - The copy button\r\n * @csspart body - Scrollable code container\r\n * @csspart pre - The `<pre>` element\r\n * @csspart code - The `<code>` element\r\n * @csspart line-number - Individual line number cell\r\n * @csspart line - Individual line of code\r\n /\r\n@customElement('bp-code-block')\r\nexport class BpCodeBlock extends LitElement {\r\n /\r\n The source code to display.\r\n /\r\n @property({ type: String }) declare code: string;\r\n\r\n /\r\n Language identifier for syntax highlighting (e.g. 'typescript', 'html', 'python').\r\n * Also displayed as a label when no title is set.\r\n /\r\n @property({ type: String }) declare language: string;\r\n\r\n /\r\n Optional title displayed in the header (e.g. a filename like `index.ts`).\r\n * Overrides the language label.\r\n /\r\n @property({ type: String }) declare title: string;\r\n\r\n /\r\n Show line number gutter.\r\n /\r\n @property({ type: Boolean, attribute: 'show-line-numbers', reflect: true })\r\n declare showLineNumbers: boolean;\r\n\r\n /\r\n Array of 1-based line numbers to visually highlight.\r\n /\r\n @property({ type: Array }) declare highlightLines: number[];\r\n\r\n /\r\n Wrap long lines instead of horizontal scroll.\r\n /\r\n @property({ type: Boolean, attribute: 'wrap-lines', reflect: true })\r\n declare wrapLines: boolean;\r\n\r\n /\r\n Show the copy-to-clipboard button.\r\n /\r\n @property({ type: Boolean, attribute: 'show-copy-button', reflect: true })\r\n declare showCopyButton: boolean;\r\n\r\n /\r\n When set, collapse the code block to this many visible lines with a \"Show more\" toggle.\r\n /\r\n @property({ type: Number, attribute: 'max-lines' })\r\n declare maxLines: number \| undefined;\r\n\r\n /\r\n Show/hide the header bar. When false, the copy button floats over the code.\r\n /\r\n @property({ type: Boolean, attribute: 'show-header', reflect: true })\r\n declare showHeader: boolean;\r\n\r\n /\r\n The syntax highlight adapter to use for this instance.\r\n * Defaults to `BpCodeBlock.defaultAdapter` which is the plainTextAdapter.\r\n /\r\n @property({ attribute: false })\r\n declare highlightAdapter: CodeBlockHighlightAdapter;\r\n\r\n /\r\n Global default adapter used when no per-instance adapter is set.\r\n */\r\n static defaultAdapter: CodeBlockHighlightAdapter = plainTextAdapter;\r\n\r\n @state() private _copyState: 'idle' \| 'copied' \| 'error' = 'idle';\r\n @state() private _expanded = false;\r\n @state() private _highlightedHtml = '';\r\n @state() private _adapterContext: unknown = undefined;\r\n @state() private _adapterInitialized = false;\r\n @state() private _lineCount = 0;\r\n @state() private _highlightSet: Set<number> = new Set();\r\n @state() private _highlightedLines: string[] = [];\r\n\r\n private _copyResetTimer: ReturnType<typeof setTimeout> \| null = null;\r\n\r\n static styles = [codeBlockStyles];\r\n\r\n constructor() {\r\n super();\r\n this.code = '';\r\n this.language = 'text';\r\n this.title = '';\r\n this.showLineNumbers = false;\r\n this.highlightLines = [];\r\n this.wrapLines = true;\r\n this.showCopyButton = true;\r\n this.maxLines = undefined;\r\n this.showHeader = true;\r\n this.highlightAdapter = BpCodeBlock.defaultAdapter;\r\n }\r\n\r\n disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n if (this._copyResetTimer) {\r\n clearTimeout(this._copyResetTimer);\r\n this._copyResetTimer = null;\r\n }\r\n }\r\n\r\n protected override willUpdate(changedProperties: PropertyValues): void {\r\n super.willUpdate(changedProperties);\r\n\r\n if (changedProperties.has('highlightAdapter')) {\r\n this._adapterInitialized = false;\r\n this._adapterContext = undefined;\r\n this._initializeAdapter();\r\n }\r\n\r\n if (changedProperties.has('code')) {\r\n this._lineCount = this.code.split('\\n').length;\r\n }\r\n\r\n if (changedProperties.has('highlightLines')) {\r\n this._highlightSet = new Set(this.highlightLines);\r\n }\r\n\r\n const needsRehighlight =\r\n changedProperties.has('code') \|\|\r\n changedProperties.has('language') \|\|\r\n changedProperties.has('highlightAdapter');\r\n\r\n if (needsRehighlight) {\r\n this._updateHighlightingSync();\r\n }\r\n }\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n this._initializeAdapter();\r\n }\r\n\r\n private async _initializeAdapter(): Promise<void> {\r\n const adapter = this.highlightAdapter;\r\n if (!this._adapterInitialized && adapter.initialize) {\r\n try {\r\n const context = await adapter.initialize();\r\n // Bail if adapter changed while awaiting\r\n if (this.highlightAdapter !== adapter) return;\r\n this._adapterContext = context;\r\n } catch {\r\n if (this.highlightAdapter !== adapter) return;\r\n this._adapterContext = undefined;\r\n }\r\n this._adapterInitialized = true;\r\n // Re-highlight with context after async init\r\n this._updateHighlightingSync();\r\n this.requestUpdate();\r\n }\r\n }\r\n\r\n private _updateHighlightingSync(): void {\r\n const adapter = this.highlightAdapter;\r\n\r\n try {\r\n const result = adapter.highlight({\r\n code: this.code,\r\n language: this.language,\r\n context: this._adapterContext,\r\n });\r\n this._highlightedHtml = result.html;\r\n } catch {\r\n // Fallback to plain text on adapter error\r\n this._highlightedHtml = escapeHtml(this.code);\r\n }\r\n\r\n this._highlightedLines = this._highlightedHtml.split('\\n');\r\n }\r\n\r\n private _handleCopy = async (): Promise<void> => {\r\n let success: boolean;\r\n\r\n try {\r\n if (navigator.clipboard) {\r\n await navigator.clipboard.writeText(this.code);\r\n success = true;\r\n } else {\r\n // Fallback for insecure contexts\r\n success = this._fallbackCopy();\r\n }\r\n } catch {\r\n success = this._fallbackCopy();\r\n }\r\n\r\n this._copyState = success ? 'copied' : 'error';\r\n\r\n this.dispatchEvent(\r\n new CustomEvent('bp-copy', {\r\n detail: { code: this.code, success },\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n\r\n // Reset after 2 seconds\r\n if (this._copyResetTimer) {\r\n clearTimeout(this._copyResetTimer);\r\n }\r\n this._copyResetTimer = setTimeout(() => {\r\n this._copyState = 'idle';\r\n this._copyResetTimer = null;\r\n }, 2000);\r\n };\r\n\r\n private _fallbackCopy(): boolean {\r\n try {\r\n const textarea = document.createElement('textarea');\r\n textarea.value = this.code;\r\n textarea.style.position = 'fixed';\r\n textarea.style.left = '-9999px';\r\n textarea.style.top = '-9999px';\r\n document.body.appendChild(textarea);\r\n textarea.select();\r\n const result = document.execCommand('copy');\r\n document.body.removeChild(textarea);\r\n return result;\r\n } catch {\r\n return false;\r\n }\r\n }\r\n\r\n private _toggleExpanded(): void {\r\n this._expanded = !this._expanded;\r\n }\r\n\r\n private get _shouldCollapse(): boolean {\r\n return (\r\n this.maxLines !== undefined &&\r\n this.maxLines > 0 &&\r\n this._lineCount > this.maxLines\r\n );\r\n }\r\n\r\n private get _isCollapsed(): boolean {\r\n return this._shouldCollapse && !this._expanded;\r\n }\r\n\r\n private get _headerLabel(): string {\r\n return this.title \|\| this.language;\r\n }\r\n\r\n private _getCopyAriaLabel(): string {\r\n if (this._copyState === 'copied') return 'Copied!';\r\n if (this._copyState === 'error') return 'Failed to copy';\r\n return 'Copy code';\r\n }\r\n\r\n private _renderCopyIcon() {\r\n if (this._copyState === 'copied') {\r\n return html`\r\n <slot name=\"copied-icon\">\r\n <svg\r\n class=\"code-block__icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n </slot>\r\n `;\r\n }\r\n\r\n return html`\r\n <slot name=\"copy-icon\">\r\n <svg\r\n class=\"code-block__icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\r\n <path\r\n d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\r\n ></path>\r\n </svg>\r\n </slot>\r\n `;\r\n }\r\n\r\n private _renderCopyButton() {\r\n if (!this.showCopyButton) return nothing;\r\n\r\n return html`\r\n <button\r\n part=\"copy-button\"\r\n class=\"code-block__copy code-block__copy--${this._copyState}\"\r\n aria-label=${this._getCopyAriaLabel()}\r\n @click=${this._handleCopy}\r\n >\r\n ${this._renderCopyIcon()}\r\n </button>\r\n `;\r\n }\r\n\r\n private _renderHeader() {\r\n if (!this.showHeader) return nothing;\r\n\r\n return html`\r\n <div part=\"header\" class=\"code-block__header\">\r\n <span part=\"title\" class=\"code-block__title\">\r\n <slot name=\"title\">${this._headerLabel}</slot>\r\n </span>\r\n <div part=\"controls\" class=\"code-block__controls\">\r\n <slot name=\"controls\"></slot>\r\n ${this._renderCopyButton()}\r\n </div>\r\n </div>\r\n `;\r\n }\r\n\r\n private _renderFloatingCopyButton() {\r\n if (this.showHeader \|\| !this.showCopyButton) return nothing;\r\n\r\n return html`\r\n <div class=\"code-block__floating-copy\">${this._renderCopyButton()}</div>\r\n `;\r\n }\r\n\r\n private _renderLine(\r\n lineHtml: string,\r\n lineNumber: number,\r\n showNumber: boolean\r\n ) {\r\n const isHighlighted = this._highlightSet.has(lineNumber);\r\n // Template kept tight to avoid whitespace text nodes inside the CSS grid.\r\n // Anonymous text nodes in a grid become extra rows, adding visual gaps.\r\n return showNumber\r\n ? html`<span\r\n part=\"line-number\"\r\n class=\"code-block__line-number\"\r\n aria-hidden=\"true\"\r\n >${lineNumber}</span\r\n ><span\r\n part=\"line\"\r\n class=\"code-block__line ${isHighlighted\r\n ? 'code-block__line--highlighted'\r\n : ''}\"\r\n aria-current=${ifDefined(isHighlighted ? 'true' : undefined)}\r\n >${unsafeHTML(lineHtml)}</span\r\n >`\r\n : html`<span\r\n part=\"line\"\r\n class=\"code-block__line ${isHighlighted\r\n ? 'code-block__line--highlighted'\r\n : ''}\"\r\n aria-current=${ifDefined(isHighlighted ? 'true' : undefined)}\r\n >${unsafeHTML(lineHtml)}</span\r\n >`;\r\n }\r\n\r\n private _renderCodeLines() {\r\n // Templates kept tight to avoid whitespace text nodes inside CSS grids.\r\n if (this.showLineNumbers) {\r\n return html`<div class=\"code-block__lines\">\r\n ${this._highlightedLines.map((lineHtml, index) =>\r\n this._renderLine(lineHtml, index + 1, true)\r\n )}\r\n </div>`;\r\n }\r\n\r\n if (this.highlightLines.length > 0) {\r\n return html`<div class=\"code-block__lines code-block__lines--no-gutter\">\r\n ${this._highlightedLines.map((lineHtml, index) =>\r\n this._renderLine(lineHtml, index + 1, false)\r\n )}\r\n </div>`;\r\n }\r\n\r\n return unsafeHTML(this._highlightedHtml);\r\n }\r\n\r\n private _renderExpandButton() {\r\n if (!this._shouldCollapse) return nothing;\r\n\r\n return html`\r\n <button\r\n part=\"expand-button\"\r\n class=\"code-block__expand\"\r\n @click=${this._toggleExpanded}\r\n aria-expanded=${this._expanded}\r\n >\r\n ${this._expanded ? 'Show less' : 'Show more'}\r\n </button>\r\n `;\r\n }\r\n\r\n render() {\r\n const bodyClasses = [\r\n 'code-block__body',\r\n this.wrapLines ? 'code-block__body--wrap' : 'code-block__body--scroll',\r\n this._isCollapsed ? 'code-block__body--collapsed' : '',\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n return html`\r\n <div\r\n part=\"base\"\r\n class=\"code-block\"\r\n role=\"region\"\r\n aria-label=${this.title\r\n ? `Code example: ${this.title}`\r\n : 'Code example'}\r\n style=${this._isCollapsed && this.maxLines\r\n ? `--_max-lines: ${this.maxLines}`\r\n : ''}\r\n >\r\n ${this._renderHeader()}\r\n <div part=\"body\" class=${bodyClasses}>\r\n ${this._renderFloatingCopyButton()}\r\n <pre\r\n part=\"pre\"\r\n class=\"code-block__pre\"\r\n ><code part=\"code\" class=\"code-block__code\">${this._renderCodeLines()}</code></pre>\r\n ${this._isCollapsed\r\n ? html`<div class=\"code-block__gradient\"></div>`\r\n : nothing}\r\n </div>\r\n ${this._renderExpandButton()}\r\n <div class=\"code-block__status\" role=\"status\" aria-live=\"polite\">\r\n ${this._copyState === 'copied' ? 'Copied to clipboard' : ''}\r\n ${this._copyState === 'error' ? 'Failed to copy' : ''}\r\n </div>\r\n </div>\r\n `;\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n 'bp-code-block': BpCodeBlock;\r\n }\r\n}\r\n"],"names":["codeBlockStyles","css","htmlEscapeMap","escapeHtml","text","char","plainTextAdapter","code","BpCodeBlock","LitElement","success","changedProperties","adapter","context","result","textarea","html","nothing","lineHtml","lineNumber","showNumber","isHighlighted","ifDefined","unsafeHTML","index","bodyClasses","__decorateClass","property","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/drawer/drawer.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import '../icon/icon.js';
+import '../icon/icons/entries/close.js';
 export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
 export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
 /**

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;AAIhD,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;AAIhD,OAAO,iBAAiB,CAAC;AACzB,OAAO,gCAAgC,CAAC;AAExC,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"}

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 '../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 name=\"close\" 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","__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 '../icon/icon.js';\nimport '../icon/icons/entries/close.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 name=\"close\" 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","__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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"}

package/dist/components/icon/icon-registry.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+/**
+ * Shared icon registry — runtime singleton.
+ *
+ * Icons register themselves by calling registerIcon() as a side effect
+ * when their entry module is imported. The bp-icon component reads from
+ * this registry at render time via getIconSvg().
+ *
+ * This module intentionally contains NO SVG data. It is the meeting point
+ * between icon entry modules (writers) and the bp-icon component (reader).
+ */
+/**
+ * Register an icon's SVG content. Called by per-icon entry modules.
+ * Duplicate registrations silently overwrite (idempotent).
+ */
+export declare function registerIcon(name: string, svg: string): void;
+/**
+ * Retrieve the raw SVG string for a registered icon.
+ * Returns undefined if the icon has not been registered.
+ */
+export declare function getIconSvg(name: string): string | undefined;
+/**
+ * Get all currently registered icon names.
+ * Useful for Storybook and dev-tool enumeration.
+ */
+export declare function getRegisteredIconNames(): string[];
+//# sourceMappingURL=icon-registry.d.ts.map

package/dist/components/icon/icon-registry.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../source/components/icon/icon-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAE5D;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAE3D;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,MAAM,EAAE,CAEjD"}

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { type IconName } from './icons/registry.generated.js';
+import type { IconName } from './icons/icon-name.generated.js';
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full';
 export type IconColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'muted';
 /**
@@ -49,6 +49,7 @@ export declare class BpIcon extends LitElement {
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
+export type { IconName } from './icons/icon-name.generated.js';
 declare global {
     interface HTMLElementTagNameMap {
         'bp-icon': BpIcon;

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,MAAM,KAAK,CAAC;~~AAIvC~~,OAAO,~~EAAW,~~KAAK,QAAQ,EAAE,MAAM~~,+BAA+B~~,CAAC;~~AAEvE~~,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;;;OAGG;IACiC,IAAI,EAAE,QAAQ,GAAG,EAAE,CAAC;IAExD;;;OAGG;IACgD,IAAI,EAAE,QAAQ,CAAC;IAElE;;;OAGG;IACiC,KAAK,EAAE,SAAS,CAAC;IAErD;;;OAGG;IAEK,SAAS,EAAE,MAAM,CAAC;;IAU1B,MAAM,CAAC,MAAM,4BAAgB;IAE7B,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,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,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;;;OAGG;IACiC,IAAI,EAAE,QAAQ,GAAG,EAAE,CAAC;IAExD;;;OAGG;IACgD,IAAI,EAAE,QAAQ,CAAC;IAElE;;;OAGG;IACiC,KAAK,EAAE,SAAS,CAAC;IAErD;;;OAGG;IAEK,SAAS,EAAE,MAAM,CAAC;;IAU1B,MAAM,CAAC,MAAM,4BAAgB;IAE7B,MAAM;CAmBP;AAED,YAAY,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}