@krollins/blueprint 0.1.16 → 0.2.1

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../source/components/table/table.style.ts","../../source/components/table/table.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tableStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .table-wrapper {\n    overflow-x: auto;\n    border-radius: var(--bp-border-radius);\n  }\n\n  .table {\n    width: 100%;\n    border-collapse: collapse;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-sm);\n    color: var(--bp-color-text);\n    background: var(--bp-color-surface);\n  }\n\n  /* Header styles */\n  .header-row {\n    background: var(--bp-color-surface-subdued);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  .header-cell {\n    font-weight: var(--bp-font-weight-semibold);\n    text-align: left;\n    color: var(--bp-color-text);\n  }\n\n  .header-cell--sortable {\n    cursor: pointer;\n    user-select: none;\n    transition: background-color var(--bp-transition-fast);\n    position: relative;\n  }\n\n  .header-cell--sortable::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 2px;\n    background: transparent;\n    transition: background var(--bp-transition-fast);\n  }\n\n  .header-cell--sortable:hover::after {\n    background: var(--bp-color-primary);\n    opacity: 0.3;\n  }\n\n  .header-cell--sortable:hover {\n    background: var(--bp-color-surface);\n  }\n\n  .header-cell--sortable:active {\n    background: var(--bp-color-surface-subdued);\n    transform: translateY(1px);\n  }\n\n  .header-cell__content {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-1);\n  }\n\n  .header-cell__label {\n    flex: 1;\n  }\n\n  /* Sort icon */\n  .sort-icon {\n    display: flex;\n    align-items: center;\n    color: var(--bp-color-text-muted);\n    transition: color var(--bp-transition-fast);\n  }\n\n  .sort-icon--active {\n    color: var(--bp-color-primary);\n  }\n\n  /* Cell styles */\n  .cell {\n    padding: var(--bp-spacing-3) var(--bp-spacing-4);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n    vertical-align: middle;\n  }\n\n  .cell--checkbox {\n    width: var(--bp-spacing-10);\n    text-align: center;\n    padding-left: var(--bp-spacing-3);\n    padding-right: 0;\n  }\n\n  .cell--checkbox input[type='checkbox'] {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n    cursor: pointer;\n  }\n\n  /* Row styles */\n  .row {\n    transition: background-color var(--bp-transition-fast);\n    content-visibility: auto;\n    contain-intrinsic-size: auto 48px;\n  }\n\n  .row--hoverable:hover {\n    background: var(--bp-color-surface-subdued);\n  }\n\n  .row--selected {\n    background: oklch(from var(--bp-color-primary) l c h / 0.15);\n  }\n\n  .row--selected:hover {\n    background: oklch(from var(--bp-color-primary) l c h / 0.2);\n  }\n\n  /* Remove border from last row */\n  tbody tr:last-child .cell {\n    border-bottom: none;\n  }\n\n  /* Variants */\n  .table--striped tbody tr:nth-child(even) {\n    background: var(--bp-color-surface-subdued);\n  }\n\n  .table--striped tbody tr:nth-child(even):hover {\n    background: var(--bp-color-surface);\n  }\n\n  .table--striped .row--selected {\n    background: oklch(from var(--bp-color-primary) l c h / 0.15) !important;\n  }\n\n  .table--striped .row--selected:hover {\n    background: oklch(from var(--bp-color-primary) l c h / 0.2) !important;\n  }\n\n  .table--bordered {\n    border: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  .table--bordered .cell {\n    border: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  /* Sizes */\n  .table--sm .cell {\n    padding: var(--bp-spacing-1) var(--bp-spacing-3);\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .table--sm .row {\n    contain-intrinsic-size: auto 36px;\n  }\n\n  .table--md .cell {\n    padding: var(--bp-spacing-3) var(--bp-spacing-4);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .table--md .row {\n    contain-intrinsic-size: auto 48px;\n  }\n\n  .table--lg .cell {\n    padding: var(--bp-spacing-4) var(--bp-spacing-5);\n    font-size: var(--bp-font-size-base);\n  }\n\n  .table--lg .row {\n    contain-intrinsic-size: auto 56px;\n  }\n\n  /* Sticky header */\n  .table--sticky-header thead {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n\n  .table--sticky-header .header-row {\n    box-shadow: var(--bp-shadow-sm);\n  }\n\n  /* Selectable - add pointer cursor */\n  .table--selectable .row {\n    cursor: pointer;\n  }\n\n  /* Loading state */\n  .table--loading {\n    opacity: var(--bp-opacity-disabled);\n    pointer-events: none;\n  }\n\n  /* Empty state */\n  .empty-state {\n    text-align: center;\n    padding: var(--bp-spacing-10);\n    color: var(--bp-color-text-muted);\n    background: var(--bp-color-surface-subdued);\n  }\n\n  .state-content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bp-spacing-3);\n    padding: var(--bp-spacing-5);\n  }\n\n  .sort-icon--inactive {\n    opacity: 0.4;\n  }\n\n  /* Focus styles for keyboard navigation */\n  .header-cell--sortable: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  .row:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: calc(-1 * var(--bp-focus-offset));\n  }\n\n  .cell--checkbox input[type='checkbox']: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  /* Reduced motion */\n  @media (prefers-reduced-motion: reduce) {\n    .row,\n    .header-cell--sortable,\n    .sort-icon {\n      transition: none;\n    }\n\n    .header-cell--sortable:active {\n      transform: none;\n    }\n\n    .header-cell--sortable::after {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tableStyles } from './table.style.js';\nimport { memoizeOne } from '../../utilities/memoize.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport '../icon/icon.js';\nimport '../icon/icons/entries/chevron-up.js';\nimport '../icon/icons/entries/chevron-down.js';\n\nexport type TableVariant = 'default' | 'striped' | 'bordered';\nexport type TableSize = 'sm' | 'md' | 'lg';\nexport type TableSortDirection = 'asc' | 'desc' | 'none';\n\n/**\n * Column definition for the table\n */\nexport interface TableColumn {\n  /** Unique key for the column (matches data property) */\n  key: string;\n  /** Header label for the column */\n  label: string;\n  /** Whether this column is sortable */\n  sortable?: boolean;\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right';\n  /** Fixed width for the column */\n  width?: string;\n  /** Custom render function for cell content */\n  render?: (value: unknown, row: TableRow) => TemplateResult | string;\n}\n\n/**\n * Row data for the table\n */\nexport interface TableRow {\n  /** Unique identifier for the row */\n  id: string | number;\n  /** Row data keyed by column key */\n  [key: string]: unknown;\n}\n\n/**\n * Sort state for the table\n */\nexport interface TableSortState {\n  /** Column key being sorted */\n  column: string;\n  /** Sort direction */\n  direction: TableSortDirection;\n}\n\n/**\n * A data table component for displaying tabular data with sorting and selection.\n *\n * @element bp-table\n *\n * @property {TableColumn[]} columns - Array of column definitions\n * @property {TableRow[]} rows - Array of row data objects\n * @property {TableVariant} variant - Visual style variant\n * @property {TableSize} size - Size of the table cells\n * @property {boolean} selectable - Whether rows can be selected\n * @property {boolean} multiSelect - Whether multiple rows can be selected\n * @property {(string|number)[]} selectedRows - Array of selected row IDs\n * @property {TableSortState} sortState - Current sort state\n * @property {boolean} stickyHeader - Whether the header sticks on scroll\n * @property {boolean} hoverable - Whether rows highlight on hover\n * @property {boolean} loading - Whether the table is in loading state\n *\n * @fires bp-sort - Fired when a sortable column header is clicked\n * @fires bp-select - Fired when row selection changes\n * @fires bp-row-click - Fired when a row is clicked\n *\n * @slot empty - Content to show when table has no data\n * @slot loading - Content to show when table is loading\n *\n * @csspart table - The table element\n * @csspart thead - The table header section\n * @csspart tbody - The table body section\n * @csspart header-row - A header row\n * @csspart header-cell - A header cell\n * @csspart row - A data row\n * @csspart cell - A data cell\n * @csspart checkbox - Selection checkbox\n * @csspart sort-icon - Sort direction icon\n * @csspart empty-state - Empty state container\n */\n@customElement('bp-table')\nexport class BpTable extends LitElement {\n  /** Array of column definitions */\n  @property({ type: Array }) declare columns: TableColumn[];\n\n  /** Array of row data objects */\n  @property({ type: Array }) declare rows: TableRow[];\n\n  /** Visual style variant */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid: TableVariant[] = ['default', 'striped', 'bordered'];\n        return value && valid.includes(value as TableVariant)\n          ? (value as TableVariant)\n          : 'default';\n      },\n    },\n  })\n  declare variant: TableVariant;\n\n  /** Size of the table cells */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid: TableSize[] = ['sm', 'md', 'lg'];\n        return value && valid.includes(value as TableSize)\n          ? (value as TableSize)\n          : 'md';\n      },\n    },\n  })\n  declare size: TableSize;\n\n  /** Whether rows can be selected */\n  @property({ type: Boolean, reflect: true }) declare selectable: boolean;\n\n  /** Whether multiple rows can be selected */\n  @property({ type: Boolean, reflect: true }) declare multiSelect: boolean;\n\n  /** Array of selected row IDs */\n  @property({ type: Array }) declare selectedRows: (string | number)[];\n\n  /** Current sort state */\n  @property({ type: Object }) declare sortState: TableSortState | null;\n\n  /** Whether the header sticks on scroll */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n  declare stickyHeader: boolean;\n\n  /** Whether rows highlight on hover */\n  @property({ converter: booleanConverter, reflect: true })\n  declare hoverable: boolean;\n\n  /** Whether the table is in loading state */\n  @property({ type: Boolean, reflect: true }) declare loading: boolean;\n\n  @state() private allSelected = false;\n\n  /**\n   * Properties that only affect visual styling, not rendered structure.\n   * Changes to only these properties can skip a full re-render.\n   */\n  private static readonly VISUAL_ONLY_PROPS = new Set([\n    'hoverable',\n    'stickyHeader',\n  ]);\n\n  static styles = [tableStyles];\n\n  constructor() {\n    super();\n    this.columns = [];\n    this.rows = [];\n    this.variant = 'default';\n    this.size = 'md';\n    this.selectable = false;\n    this.multiSelect = false;\n    this.selectedRows = [];\n    this.sortState = null;\n    this.stickyHeader = false;\n    this.hoverable = true;\n    this.loading = false;\n  }\n\n  protected shouldUpdate(changedProperties: PropertyValues): boolean {\n    // If all changed properties are visual-only, skip the update.\n    // Be conservative: return true if any non-visual property changed.\n    for (const key of changedProperties.keys()) {\n      if (!BpTable.VISUAL_ONLY_PROPS.has(key as string)) {\n        return true;\n      }\n    }\n    // All changes are visual-only — still need to update for CSS class changes\n    return true;\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (\n      changedProperties.has('selectedRows') ||\n      changedProperties.has('rows')\n    ) {\n      this.allSelected =\n        this.rows.length > 0 && this.selectedRows.length === this.rows.length;\n    }\n  }\n\n  /**\n   * Memoized sorted rows computation.\n   * Only recomputes when rows or sortState references change.\n   */\n  private computeSortedRows = memoizeOne(\n    (rows: TableRow[], sortState: TableSortState | null): TableRow[] => {\n      if (!sortState || sortState.direction === 'none') {\n        return rows;\n      }\n\n      const { column, direction } = sortState;\n      return [...rows].sort((a, b) => {\n        const aVal = a[column];\n        const bVal = b[column];\n\n        if (aVal === bVal) return 0;\n        if (aVal === null || aVal === undefined) return 1;\n        if (bVal === null || bVal === undefined) return -1;\n\n        let comparison = 0;\n        if (typeof aVal === 'string' && typeof bVal === 'string') {\n          comparison = aVal.localeCompare(bVal);\n        } else if (typeof aVal === 'number' && typeof bVal === 'number') {\n          comparison = aVal - bVal;\n        } else {\n          comparison = String(aVal).localeCompare(String(bVal));\n        }\n\n        return direction === 'desc' ? -comparison : comparison;\n      });\n    }\n  );\n\n  /**\n   * Get sorted rows based on current sort state (memoized).\n   */\n  private get sortedRows(): TableRow[] {\n    return this.computeSortedRows(this.rows, this.sortState);\n  }\n\n  /**\n   * Handles click on sortable column header.\n   * Cycles through sort directions: asc → desc → none.\n   * Manages focus on header after sort completes.\n   */\n  private handleHeaderClick(column: TableColumn, event: Event) {\n    if (!column.sortable) return;\n\n    let direction: TableSortDirection = 'asc';\n    if (this.sortState?.column === column.key) {\n      if (this.sortState.direction === 'asc') {\n        direction = 'desc';\n      } else if (this.sortState.direction === 'desc') {\n        direction = 'none';\n      }\n    }\n\n    this.sortState = { column: column.key, direction };\n    this.dispatchEvent(\n      new CustomEvent('bp-sort', {\n        detail: { column: column.key, direction },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    // Focus management: focus header after sort completes\n    this.updateComplete.then(() => {\n      (event.target as HTMLElement)?.focus();\n    });\n  }\n\n  /**\n   * Handles click events on table rows.\n   * Dispatches bp-row-click event and toggles selection if selectable.\n   */\n  private handleRowClick(row: TableRow, event: Event) {\n    this.dispatchEvent(\n      new CustomEvent('bp-row-click', {\n        detail: { row, originalEvent: event },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (this.selectable) {\n      this.toggleRowSelection(row);\n    }\n  }\n\n  /**\n   * Handles keyboard events on table rows.\n   * Triggers selection on Enter or Space key press when selectable.\n   */\n  private handleRowKeyDown(row: TableRow, event: KeyboardEvent) {\n    if (!this.selectable) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.toggleRowSelection(row);\n    }\n  }\n\n  /**\n   * Toggles selection state for a row.\n   * Respects multiSelect setting for single vs multiple selection.\n   */\n  private toggleRowSelection(row: TableRow) {\n    const rowId = row.id;\n    const isSelected = this.selectedRows.includes(rowId);\n\n    let newSelection: (string | number)[];\n    if (this.multiSelect) {\n      newSelection = isSelected\n        ? this.selectedRows.filter((id) => id !== rowId)\n        : [...this.selectedRows, rowId];\n    } else {\n      newSelection = isSelected ? [] : [rowId];\n    }\n\n    this.selectedRows = newSelection;\n    this.dispatchEvent(\n      new CustomEvent('bp-select', {\n        detail: { selectedRows: newSelection, row, selected: !isSelected },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handles select all checkbox toggle.\n   * Selects or deselects all rows based on current state.\n   */\n  private handleSelectAll() {\n    if (this.allSelected) {\n      this.selectedRows = [];\n    } else {\n      this.selectedRows = this.rows.map((row) => row.id);\n    }\n    this.dispatchEvent(\n      new CustomEvent('bp-select', {\n        detail: {\n          selectedRows: this.selectedRows,\n          selectAll: !this.allSelected,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handles checkbox click events.\n   * Stops propagation only on the checkbox itself to prevent row click.\n   */\n  private handleCheckboxClick(event: Event, row?: TableRow) {\n    // Only stop propagation on the checkbox to prevent triggering row click\n    if (event.target instanceof HTMLInputElement) {\n      event.stopPropagation();\n    }\n    if (row) {\n      this.toggleRowSelection(row);\n    } else {\n      this.handleSelectAll();\n    }\n  }\n\n  /** Select all rows */\n  selectAll() {\n    this.selectedRows = this.rows.map((row) => row.id);\n    this.dispatchEvent(\n      new CustomEvent('bp-select', {\n        detail: { selectedRows: this.selectedRows, selectAll: true },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /** Deselect all rows */\n  deselectAll() {\n    this.selectedRows = [];\n    this.dispatchEvent(\n      new CustomEvent('bp-select', {\n        detail: { selectedRows: [], selectAll: false },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /** Clear sort state */\n  clearSort() {\n    this.sortState = null;\n  }\n\n  /**\n   * Renders the sort icon for sortable columns.\n   * Shows chevron-up for ascending, chevron-down for descending, unsorted icon otherwise.\n   */\n  private renderSortIcon(column: TableColumn) {\n    if (!column.sortable) return nothing;\n\n    const isActive = this.sortState?.column === column.key;\n    const direction = isActive ? this.sortState?.direction : 'none';\n\n    const iconName =\n      direction === 'asc'\n        ? 'chevron-up'\n        : direction === 'desc'\n          ? 'chevron-down'\n          : 'chevron-up';\n\n    const iconClasses = {\n      'sort-icon': true,\n      'sort-icon--active': isActive && direction !== 'none',\n      'sort-icon--inactive': direction === 'none',\n    };\n\n    return html`\n      <span class=${classMap(iconClasses)} part=\"sort-icon\" aria-hidden=\"true\">\n        <bp-icon name=${iconName} size=\"sm\"></bp-icon>\n      </span>\n    `;\n  }\n\n  /**\n   * Renders the table header with column labels and sort icons.\n   */\n  private renderHeader() {\n    return html`\n      <thead part=\"thead\">\n        <tr class=\"header-row\" part=\"header-row\">\n          ${this.selectable && this.multiSelect\n            ? html`\n                <th class=\"cell cell--checkbox\" part=\"header-cell\">\n                  <input\n                    type=\"checkbox\"\n                    part=\"checkbox\"\n                    .checked=${this.allSelected}\n                    .indeterminate=${this.selectedRows.length > 0 &&\n                    !this.allSelected}\n                    @click=${(e: Event) => this.handleCheckboxClick(e)}\n                    aria-label=\"Select all rows\"\n                  />\n                </th>\n              `\n            : this.selectable\n              ? html`<th class=\"cell cell--checkbox\" part=\"header-cell\"></th>`\n              : nothing}\n          ${repeat(\n            this.columns,\n            (column) => column.key,\n            (column) => html`\n              <th\n                class=\"cell header-cell ${column.sortable\n                  ? 'header-cell--sortable'\n                  : ''}\"\n                part=\"header-cell\"\n                style=${column.width ? `width: ${column.width}` : ''}\n                @click=${(e: Event) => this.handleHeaderClick(column, e)}\n                tabindex=${column.sortable ? 0 : -1}\n                @keydown=${(e: KeyboardEvent) => {\n                  if (column.sortable && (e.key === 'Enter' || e.key === ' ')) {\n                    e.preventDefault();\n                    this.handleHeaderClick(column, e);\n                  }\n                }}\n                aria-sort=${this.sortState?.column === column.key\n                  ? this.sortState.direction === 'asc'\n                    ? 'ascending'\n                    : this.sortState.direction === 'desc'\n                      ? 'descending'\n                      : 'none'\n                  : 'none'}\n              >\n                <span\n                  class=\"header-cell__content\"\n                  style=\"justify-content: ${column.align === 'center'\n                    ? 'center'\n                    : column.align === 'right'\n                      ? 'flex-end'\n                      : 'flex-start'}\"\n                >\n                  <span class=\"header-cell__label\">${column.label}</span>\n                  ${this.renderSortIcon(column)}\n                </span>\n              </th>\n            `\n          )}\n        </tr>\n      </thead>\n    `;\n  }\n\n  /**\n   * Renders the table body with rows and cells.\n   * Handles loading and empty states.\n   */\n  private renderBody() {\n    const sortedRows = this.sortedRows;\n\n    if (this.loading) {\n      return html`\n        <tbody part=\"tbody\">\n          <tr>\n            <td\n              colspan=${this.columns.length + (this.selectable ? 1 : 0)}\n              class=\"empty-state\"\n              part=\"empty-state\"\n            >\n              <slot name=\"loading\">\n                <div class=\"state-content\">Loading...</div>\n              </slot>\n            </td>\n          </tr>\n        </tbody>\n      `;\n    }\n\n    if (sortedRows.length === 0) {\n      return html`\n        <tbody part=\"tbody\">\n          <tr>\n            <td\n              colspan=${this.columns.length + (this.selectable ? 1 : 0)}\n              class=\"empty-state\"\n              part=\"empty-state\"\n            >\n              <slot name=\"empty\">\n                <div class=\"state-content\">No data available</div>\n              </slot>\n            </td>\n          </tr>\n        </tbody>\n      `;\n    }\n\n    return html`\n      <tbody part=\"tbody\">\n        ${repeat(\n          sortedRows,\n          (row) => row.id,\n          (row) => {\n            const isSelected = this.selectedRows.includes(row.id);\n            const rowClasses = {\n              row: true,\n              'row--selected': isSelected,\n              'row--hoverable': this.hoverable,\n            };\n\n            return html`\n              <tr\n                class=${classMap(rowClasses)}\n                part=\"row\"\n                @click=${(e: Event) => this.handleRowClick(row, e)}\n                @keydown=${(e: KeyboardEvent) => this.handleRowKeyDown(row, e)}\n                tabindex=${this.selectable ? 0 : -1}\n                aria-selected=${ifDefined(\n                  this.selectable ? (isSelected ? 'true' : 'false') : undefined\n                )}\n              >\n                ${this.selectable\n                  ? html`\n                      <td class=\"cell cell--checkbox\" part=\"cell\">\n                        <input\n                          type=\"checkbox\"\n                          part=\"checkbox\"\n                          .checked=${isSelected}\n                          @click=${(e: Event) =>\n                            this.handleCheckboxClick(e, row)}\n                          aria-label=\"Select row\"\n                        />\n                      </td>\n                    `\n                  : nothing}\n                ${repeat(\n                  this.columns,\n                  (column) => column.key,\n                  (column) => {\n                    const value = row[column.key];\n                    const content = column.render\n                      ? column.render(value, row)\n                      : value;\n\n                    return html`\n                      <td\n                        class=\"cell\"\n                        part=\"cell\"\n                        style=\"text-align: ${column.align || 'left'}\"\n                      >\n                        ${content}\n                      </td>\n                    `;\n                  }\n                )}\n              </tr>\n            `;\n          }\n        )}\n      </tbody>\n    `;\n  }\n\n  render() {\n    const tableClasses = {\n      table: true,\n      [`table--${this.variant}`]: true,\n      [`table--${this.size}`]: true,\n      'table--sticky-header': this.stickyHeader,\n      'table--selectable': this.selectable,\n      'table--loading': this.loading,\n    };\n\n    return html`\n      <div class=\"table-wrapper\">\n        <table\n          class=${classMap(tableClasses)}\n          part=\"table\"\n          role=\"grid\"\n          aria-busy=${this.loading}\n        >\n          ${this.renderHeader()} ${this.renderBody()}\n        </table>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-table': BpTable;\n  }\n}\n"],"names":["tableStyles","css","BpTable","LitElement","memoizeOne","rows","sortState","column","direction","a","b","aVal","bVal","comparison","changedProperties","key","event","row","rowId","isSelected","newSelection","id","nothing","isActive","iconName","html","classMap","repeat","e","sortedRows","rowClasses","ifDefined","value","content","tableClasses","__decorateClass","property","booleanConverter","state","customElement"],"mappings":";;;;;;;AAEO,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A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"}
+{"version":3,"file":"table.js","sources":["../../source/components/table/table.style.ts","../../source/components/table/table.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tableStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .table-wrapper {\n    overflow-x: auto;\n    border-radius: var(--bp-border-radius);\n  }\n\n  .table {\n    width: 100%;\n    border-collapse: collapse;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-sm);\n    color: var(--bp-color-text);\n    background: var(--bp-color-surface);\n  }\n\n  /* Header styles */\n  .header-row {\n    background: var(--bp-color-surface-subdued);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  .header-cell {\n    font-weight: var(--bp-font-weight-semibold);\n    text-align: left;\n    color: var(--bp-color-text);\n  }\n\n  .header-cell--sortable {\n    cursor: pointer;\n    user-select: none;\n    transition: background-color var(--bp-transition-fast);\n    position: relative;\n  }\n\n  .header-cell--sortable::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 2px;\n    background: transparent;\n    transition: background var(--bp-transition-fast);\n  }\n\n  .header-cell--sortable:hover::after {\n    background: var(--bp-color-primary);\n    opacity: 0.3;\n  }\n\n  .header-cell--sortable:hover {\n    background: var(--bp-color-surface);\n  }\n\n  .header-cell--sortable:active {\n    background: var(--bp-color-surface-subdued);\n    transform: translateY(1px);\n  }\n\n  .header-cell__content {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-1);\n  }\n\n  .header-cell__label {\n    flex: 1;\n  }\n\n  /* Sort icon */\n  .sort-icon {\n    display: flex;\n    align-items: center;\n    color: var(--bp-color-text-muted);\n    transition: color var(--bp-transition-fast);\n  }\n\n  .sort-icon--active {\n    color: var(--bp-color-primary);\n  }\n\n  /* Cell styles */\n  .cell {\n    padding: var(--bp-spacing-3) var(--bp-spacing-4);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n    vertical-align: middle;\n  }\n\n  .cell--checkbox {\n    width: var(--bp-spacing-10);\n    text-align: center;\n    padding-left: var(--bp-spacing-3);\n    padding-right: 0;\n  }\n\n  .cell--checkbox input[type='checkbox'] {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n    cursor: pointer;\n  }\n\n  /* Row styles */\n  .row {\n    transition: background-color var(--bp-transition-fast);\n    content-visibility: auto;\n    contain-intrinsic-size: auto 48px;\n  }\n\n  .row--hoverable:hover {\n    background: var(--bp-color-surface-subdued);\n  }\n\n  .row--selected {\n    background: oklch(from var(--bp-color-primary) l c h / 0.15);\n  }\n\n  .row--selected:hover {\n    background: oklch(from var(--bp-color-primary) l c h / 0.2);\n  }\n\n  /* Remove border from last row */\n  tbody tr:last-child .cell {\n    border-bottom: none;\n  }\n\n  /* Variants */\n  .table--striped tbody tr:nth-child(even) {\n    background: var(--bp-color-surface-subdued);\n  }\n\n  .table--striped tbody tr:nth-child(even):hover {\n    background: var(--bp-color-surface);\n  }\n\n  .table--striped .row--selected {\n    background: oklch(from var(--bp-color-primary) l c h / 0.15) !important;\n  }\n\n  .table--striped .row--selected:hover {\n    background: oklch(from var(--bp-color-primary) l c h / 0.2) !important;\n  }\n\n  .table--bordered {\n    border: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  .table--bordered .cell {\n    border: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  /* Sizes */\n  .table--sm .cell {\n    padding: var(--bp-spacing-1) var(--bp-spacing-3);\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .table--sm .row {\n    contain-intrinsic-size: auto 36px;\n  }\n\n  .table--md .cell {\n    padding: var(--bp-spacing-3) var(--bp-spacing-4);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .table--md .row {\n    contain-intrinsic-size: auto 48px;\n  }\n\n  .table--lg .cell {\n    padding: var(--bp-spacing-4) var(--bp-spacing-5);\n    font-size: var(--bp-font-size-base);\n  }\n\n  .table--lg .row {\n    contain-intrinsic-size: auto 56px;\n  }\n\n  /* Sticky header */\n  .table--sticky-header thead {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n\n  .table--sticky-header .header-row {\n    box-shadow: var(--bp-shadow-sm);\n  }\n\n  /* Selectable - add pointer cursor */\n  .table--selectable .row {\n    cursor: pointer;\n  }\n\n  /* Loading state */\n  .table--loading {\n    opacity: var(--bp-opacity-disabled);\n    pointer-events: none;\n  }\n\n  /* Empty state */\n  .empty-state {\n    text-align: center;\n    padding: var(--bp-spacing-10);\n    color: var(--bp-color-text-muted);\n    background: var(--bp-color-surface-subdued);\n  }\n\n  .state-content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bp-spacing-3);\n    padding: var(--bp-spacing-5);\n  }\n\n  .sort-icon--inactive {\n    opacity: 0.4;\n  }\n\n  /* Focus styles for keyboard navigation */\n  .header-cell--sortable: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  .row:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: calc(-1 * var(--bp-focus-offset));\n  }\n\n  .cell--checkbox input[type='checkbox']: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  /* Reduced motion */\n  @media (prefers-reduced-motion: reduce) {\n    .row,\n    .header-cell--sortable,\n    .sort-icon {\n      transition: none;\n    }\n\n    .header-cell--sortable:active {\n      transform: none;\n    }\n\n    .header-cell--sortable::after {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tableStyles } from './table.style.js';\nimport { memoizeOne } from '../../utilities/memoize.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport { chevronUpSvg } from '../icon/icons/entries/chevron-up.js';\nimport { chevronDownSvg } from '../icon/icons/entries/chevron-down.js';\nimport '../icon/icon.js';\n\nexport type TableVariant = 'default' | 'striped' | 'bordered';\nexport type TableSize = 'sm' | 'md' | 'lg';\nexport type TableSortDirection = 'asc' | 'desc' | 'none';\n\n/**\n * Column definition for the table\n */\nexport interface TableColumn {\n  /** Unique key for the column (matches data property) */\n  key: string;\n  /** Header label for the column */\n  label: string;\n  /** Whether this column is sortable */\n  sortable?: boolean;\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right';\n  /** Fixed width for the column */\n  width?: string;\n  /** Custom render function for cell content */\n  render?: (value: unknown, row: TableRow) => TemplateResult | string;\n}\n\n/**\n * Row data for the table\n */\nexport interface TableRow {\n  /** Unique identifier for the row */\n  id: string | number;\n  /** Row data keyed by column key */\n  [key: string]: unknown;\n}\n\n/**\n * Sort state for the table\n */\nexport interface TableSortState {\n  /** Column key being sorted */\n  column: string;\n  /** Sort direction */\n  direction: TableSortDirection;\n}\n\n/**\n * A data table component for displaying tabular data with sorting and selection.\n *\n * @element bp-table\n *\n * @property {TableColumn[]} columns - Array of column definitions\n * @property {TableRow[]} rows - Array of row data objects\n * @property {TableVariant} variant - Visual style variant\n * @property {TableSize} size - Size of the table cells\n * @property {boolean} selectable - Whether rows can be selected\n * @property {boolean} multiSelect - Whether multiple rows can be selected\n * @property {(string|number)[]} selectedRows - Array of selected row IDs\n * @property {TableSortState} sortState - Current sort state\n * @property {boolean} stickyHeader - Whether the header sticks on scroll\n * @property {boolean} hoverable - Whether rows highlight on hover\n * @property {boolean} loading - Whether the table is in loading state\n *\n * @fires bp-sort - Fired when a sortable column header is clicked\n * @fires bp-select - Fired when row selection changes\n * @fires bp-row-click - Fired when a row is clicked\n *\n * @slot empty - Content to show when table has no data\n * @slot loading - Content to show when table is loading\n *\n * @csspart table - The table element\n * @csspart thead - The table header section\n * @csspart tbody - The table body section\n * @csspart header-row - A header row\n * @csspart header-cell - A header cell\n * @csspart row - A data row\n * @csspart cell - A data cell\n * @csspart checkbox - Selection checkbox\n * @csspart sort-icon - Sort direction icon\n * @csspart empty-state - Empty state container\n */\n@customElement('bp-table')\nexport class BpTable extends LitElement {\n  /** Array of column definitions */\n  @property({ type: Array }) declare columns: TableColumn[];\n\n  /** Array of row data objects */\n  @property({ type: Array }) declare rows: TableRow[];\n\n  /** Visual style variant */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid: TableVariant[] = ['default', 'striped', 'bordered'];\n        return value && valid.includes(value as TableVariant)\n          ? (value as TableVariant)\n          : 'default';\n      },\n    },\n  })\n  declare variant: TableVariant;\n\n  /** Size of the table cells */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid: TableSize[] = ['sm', 'md', 'lg'];\n        return value && valid.includes(value as TableSize)\n          ? (value as TableSize)\n          : 'md';\n      },\n    },\n  })\n  declare size: TableSize;\n\n  /** Whether rows can be selected */\n  @property({ type: Boolean, reflect: true }) declare selectable: boolean;\n\n  /** Whether multiple rows can be selected */\n  @property({ type: Boolean, reflect: true }) declare multiSelect: boolean;\n\n  /** Array of selected row IDs */\n  @property({ type: Array }) declare selectedRows: (string | number)[];\n\n  /** Current sort state */\n  @property({ type: Object }) declare sortState: TableSortState | null;\n\n  /** Whether the header sticks on scroll */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n  declare stickyHeader: boolean;\n\n  /** Whether rows highlight on hover */\n  @property({ converter: booleanConverter, reflect: true })\n  declare hoverable: boolean;\n\n  /** Whether the table is in loading state */\n  @property({ type: Boolean, reflect: true }) declare loading: boolean;\n\n  @state() private allSelected = false;\n\n  /**\n   * Properties that only affect visual styling, not rendered structure.\n   * Changes to only these properties can skip a full re-render.\n   */\n  private static readonly VISUAL_ONLY_PROPS = new Set([\n    'hoverable',\n    'stickyHeader',\n  ]);\n\n  static styles = [tableStyles];\n\n  constructor() {\n    super();\n    this.columns = [];\n    this.rows = [];\n    this.variant = 'default';\n    this.size = 'md';\n    this.selectable = false;\n    this.multiSelect = false;\n    this.selectedRows = [];\n    this.sortState = null;\n    this.stickyHeader = false;\n    this.hoverable = true;\n    this.loading = false;\n  }\n\n  protected shouldUpdate(changedProperties: PropertyValues): boolean {\n    // If all changed properties are visual-only, skip the update.\n    // Be conservative: return true if any non-visual property changed.\n    for (const key of changedProperties.keys()) {\n      if (!BpTable.VISUAL_ONLY_PROPS.has(key as string)) {\n        return true;\n      }\n    }\n    // All changes are visual-only — still need to update for CSS class changes\n    return true;\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (\n      changedProperties.has('selectedRows') ||\n      changedProperties.has('rows')\n    ) {\n      this.allSelected =\n        this.rows.length > 0 && this.selectedRows.length === this.rows.length;\n    }\n  }\n\n  /**\n   * Memoized sorted rows computation.\n   * Only recomputes when rows or sortState references change.\n   */\n  private computeSortedRows = memoizeOne(\n    (rows: TableRow[], sortState: TableSortState | null): TableRow[] => {\n      if (!sortState || sortState.direction === 'none') {\n        return rows;\n      }\n\n      const { column, direction } = sortState;\n      return [...rows].sort((a, b) => {\n        const aVal = a[column];\n        const bVal = b[column];\n\n        if (aVal === bVal) return 0;\n        if (aVal === null || aVal === undefined) return 1;\n        if (bVal === null || bVal === undefined) return -1;\n\n        let comparison = 0;\n        if (typeof aVal === 'string' && typeof bVal === 'string') {\n          comparison = aVal.localeCompare(bVal);\n        } else if (typeof aVal === 'number' && typeof bVal === 'number') {\n          comparison = aVal - bVal;\n        } else {\n          comparison = String(aVal).localeCompare(String(bVal));\n        }\n\n        return direction === 'desc' ? -comparison : comparison;\n      });\n    }\n  );\n\n  /**\n   * Get sorted rows based on current sort state (memoized).\n   */\n  private get sortedRows(): TableRow[] {\n    return this.computeSortedRows(this.rows, this.sortState);\n  }\n\n  /**\n   * Handles click on sortable column header.\n   * Cycles through sort directions: asc → desc → none.\n   * Manages focus on header after sort completes.\n   */\n  private handleHeaderClick(column: TableColumn, event: Event) {\n    if (!column.sortable) return;\n\n    let direction: TableSortDirection = 'asc';\n    if (this.sortState?.column === column.key) {\n      if (this.sortState.direction === 'asc') {\n        direction = 'desc';\n      } else if (this.sortState.direction === 'desc') {\n        direction = 'none';\n      }\n    }\n\n    this.sortState = { column: column.key, direction };\n    this.dispatchEvent(\n      new CustomEvent('bp-sort', {\n        detail: { column: column.key, direction },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    // Focus management: focus header after sort completes\n    this.updateComplete.then(() => {\n      (event.target as HTMLElement)?.focus();\n    });\n  }\n\n  /**\n   * Handles click events on table rows.\n   * Dispatches bp-row-click event and toggles selection if selectable.\n   */\n  private handleRowClick(row: TableRow, event: Event) {\n    this.dispatchEvent(\n      new CustomEvent('bp-row-click', {\n        detail: { row, originalEvent: event },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (this.selectable) {\n      this.toggleRowSelection(row);\n    }\n  }\n\n  /**\n   * Handles keyboard events on table rows.\n   * Triggers selection on Enter or Space key press when selectable.\n   */\n  private handleRowKeyDown(row: TableRow, event: KeyboardEvent) {\n    if (!this.selectable) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.toggleRowSelection(row);\n    }\n  }\n\n  /**\n   * Toggles selection state for a row.\n   * Respects multiSelect setting for single vs multiple selection.\n   */\n  private toggleRowSelection(row: TableRow) {\n    const rowId = row.id;\n    const isSelected = this.selectedRows.includes(rowId);\n\n    let newSelection: (string | number)[];\n    if (this.multiSelect) {\n      newSelection = isSelected\n        ? this.selectedRows.filter((id) => id !== rowId)\n        : [...this.selectedRows, rowId];\n    } else {\n      newSelection = isSelected ? [] : [rowId];\n    }\n\n    this.selectedRows = newSelection;\n    this.dispatchEvent(\n      new CustomEvent('bp-select', {\n        detail: { selectedRows: newSelection, row, selected: !isSelected },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handles select all checkbox toggle.\n   * Selects or deselects all rows based on current state.\n   */\n  private handleSelectAll() {\n    if (this.allSelected) {\n      this.selectedRows = [];\n    } else {\n      this.selectedRows = this.rows.map((row) => row.id);\n    }\n    this.dispatchEvent(\n      new CustomEvent('bp-select', {\n        detail: {\n          selectedRows: this.selectedRows,\n          selectAll: !this.allSelected,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handles checkbox click events.\n   * Stops propagation only on the checkbox itself to prevent row click.\n   */\n  private handleCheckboxClick(event: Event, row?: TableRow) {\n    // Only stop propagation on the checkbox to prevent triggering row click\n    if (event.target instanceof HTMLInputElement) {\n      event.stopPropagation();\n    }\n    if (row) {\n      this.toggleRowSelection(row);\n    } else {\n      this.handleSelectAll();\n    }\n  }\n\n  /** Select all rows */\n  selectAll() {\n    this.selectedRows = this.rows.map((row) => row.id);\n    this.dispatchEvent(\n      new CustomEvent('bp-select', {\n        detail: { selectedRows: this.selectedRows, selectAll: true },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /** Deselect all rows */\n  deselectAll() {\n    this.selectedRows = [];\n    this.dispatchEvent(\n      new CustomEvent('bp-select', {\n        detail: { selectedRows: [], selectAll: false },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /** Clear sort state */\n  clearSort() {\n    this.sortState = null;\n  }\n\n  /**\n   * Renders the sort icon for sortable columns.\n   * Shows chevron-up for ascending, chevron-down for descending, unsorted icon otherwise.\n   */\n  private renderSortIcon(column: TableColumn) {\n    if (!column.sortable) return nothing;\n\n    const isActive = this.sortState?.column === column.key;\n    const direction = isActive ? this.sortState?.direction : 'none';\n\n    const iconSvg =\n      direction === 'asc'\n        ? chevronUpSvg\n        : direction === 'desc'\n          ? chevronDownSvg\n          : chevronUpSvg;\n\n    const iconClasses = {\n      'sort-icon': true,\n      'sort-icon--active': isActive && direction !== 'none',\n      'sort-icon--inactive': direction === 'none',\n    };\n\n    return html`\n      <span class=${classMap(iconClasses)} part=\"sort-icon\" aria-hidden=\"true\">\n        <bp-icon .svg=${iconSvg} size=\"sm\"></bp-icon>\n      </span>\n    `;\n  }\n\n  /**\n   * Renders the table header with column labels and sort icons.\n   */\n  private renderHeader() {\n    return html`\n      <thead part=\"thead\">\n        <tr class=\"header-row\" part=\"header-row\">\n          ${this.selectable && this.multiSelect\n            ? html`\n                <th class=\"cell cell--checkbox\" part=\"header-cell\">\n                  <input\n                    type=\"checkbox\"\n                    part=\"checkbox\"\n                    .checked=${this.allSelected}\n                    .indeterminate=${this.selectedRows.length > 0 &&\n                    !this.allSelected}\n                    @click=${(e: Event) => this.handleCheckboxClick(e)}\n                    aria-label=\"Select all rows\"\n                  />\n                </th>\n              `\n            : this.selectable\n              ? html`<th class=\"cell cell--checkbox\" part=\"header-cell\"></th>`\n              : nothing}\n          ${repeat(\n            this.columns,\n            (column) => column.key,\n            (column) => html`\n              <th\n                class=\"cell header-cell ${column.sortable\n                  ? 'header-cell--sortable'\n                  : ''}\"\n                part=\"header-cell\"\n                style=${column.width ? `width: ${column.width}` : ''}\n                @click=${(e: Event) => this.handleHeaderClick(column, e)}\n                tabindex=${column.sortable ? 0 : -1}\n                @keydown=${(e: KeyboardEvent) => {\n                  if (column.sortable && (e.key === 'Enter' || e.key === ' ')) {\n                    e.preventDefault();\n                    this.handleHeaderClick(column, e);\n                  }\n                }}\n                aria-sort=${this.sortState?.column === column.key\n                  ? this.sortState.direction === 'asc'\n                    ? 'ascending'\n                    : this.sortState.direction === 'desc'\n                      ? 'descending'\n                      : 'none'\n                  : 'none'}\n              >\n                <span\n                  class=\"header-cell__content\"\n                  style=\"justify-content: ${column.align === 'center'\n                    ? 'center'\n                    : column.align === 'right'\n                      ? 'flex-end'\n                      : 'flex-start'}\"\n                >\n                  <span class=\"header-cell__label\">${column.label}</span>\n                  ${this.renderSortIcon(column)}\n                </span>\n              </th>\n            `\n          )}\n        </tr>\n      </thead>\n    `;\n  }\n\n  /**\n   * Renders the table body with rows and cells.\n   * Handles loading and empty states.\n   */\n  private renderBody() {\n    const sortedRows = this.sortedRows;\n\n    if (this.loading) {\n      return html`\n        <tbody part=\"tbody\">\n          <tr>\n            <td\n              colspan=${this.columns.length + (this.selectable ? 1 : 0)}\n              class=\"empty-state\"\n              part=\"empty-state\"\n            >\n              <slot name=\"loading\">\n                <div class=\"state-content\">Loading...</div>\n              </slot>\n            </td>\n          </tr>\n        </tbody>\n      `;\n    }\n\n    if (sortedRows.length === 0) {\n      return html`\n        <tbody part=\"tbody\">\n          <tr>\n            <td\n              colspan=${this.columns.length + (this.selectable ? 1 : 0)}\n              class=\"empty-state\"\n              part=\"empty-state\"\n            >\n              <slot name=\"empty\">\n                <div class=\"state-content\">No data available</div>\n              </slot>\n            </td>\n          </tr>\n        </tbody>\n      `;\n    }\n\n    return html`\n      <tbody part=\"tbody\">\n        ${repeat(\n          sortedRows,\n          (row) => row.id,\n          (row) => {\n            const isSelected = this.selectedRows.includes(row.id);\n            const rowClasses = {\n              row: true,\n              'row--selected': isSelected,\n              'row--hoverable': this.hoverable,\n            };\n\n            return html`\n              <tr\n                class=${classMap(rowClasses)}\n                part=\"row\"\n                @click=${(e: Event) => this.handleRowClick(row, e)}\n                @keydown=${(e: KeyboardEvent) => this.handleRowKeyDown(row, e)}\n                tabindex=${this.selectable ? 0 : -1}\n                aria-selected=${ifDefined(\n                  this.selectable ? (isSelected ? 'true' : 'false') : undefined\n                )}\n              >\n                ${this.selectable\n                  ? html`\n                      <td class=\"cell cell--checkbox\" part=\"cell\">\n                        <input\n                          type=\"checkbox\"\n                          part=\"checkbox\"\n                          .checked=${isSelected}\n                          @click=${(e: Event) =>\n                            this.handleCheckboxClick(e, row)}\n                          aria-label=\"Select row\"\n                        />\n                      </td>\n                    `\n                  : nothing}\n                ${repeat(\n                  this.columns,\n                  (column) => column.key,\n                  (column) => {\n                    const value = row[column.key];\n                    const content = column.render\n                      ? column.render(value, row)\n                      : value;\n\n                    return html`\n                      <td\n                        class=\"cell\"\n                        part=\"cell\"\n                        style=\"text-align: ${column.align || 'left'}\"\n                      >\n                        ${content}\n                      </td>\n                    `;\n                  }\n                )}\n              </tr>\n            `;\n          }\n        )}\n      </tbody>\n    `;\n  }\n\n  render() {\n    const tableClasses = {\n      table: true,\n      [`table--${this.variant}`]: true,\n      [`table--${this.size}`]: true,\n      'table--sticky-header': this.stickyHeader,\n      'table--selectable': this.selectable,\n      'table--loading': this.loading,\n    };\n\n    return html`\n      <div class=\"table-wrapper\">\n        <table\n          class=${classMap(tableClasses)}\n          part=\"table\"\n          role=\"grid\"\n          aria-busy=${this.loading}\n        >\n          ${this.renderHeader()} ${this.renderBody()}\n        </table>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-table': BpTable;\n  }\n}\n"],"names":["tableStyles","css","BpTable","LitElement","memoizeOne","rows","sortState","column","direction","a","b","aVal","bVal","comparison","changedProperties","key","event","row","rowId","isSelected","newSelection","id","nothing","isActive","iconSvg","chevronUpSvg","chevronDownSvg","html","classMap","repeat","e","sortedRows","rowClasses","ifDefined","value","content","tableClasses","__decorateClass","property","booleanConverter","state","customElement"],"mappings":";;;;;;;;;AAEO,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/tag/tag.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import '../icon/icon.js';
-import '../icon/icons/entries/cross.js';
 /**
  * Tag component for displaying removable labels, chips, or category markers.
  *

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

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

package/dist/components/tag.js

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

package/dist/components/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sources":["../../source/components/tag/tag.style.ts","../../source/components/tag/tag.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tagStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n  }\n\n  .tag {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-xs);\n    font-family: var(--bp-font-family);\n    font-weight: var(--bp-font-weight-medium);\n    line-height: 1.5;\n    border-radius: var(--bp-border-radius-md);\n    border: var(--bp-border-width) solid transparent;\n    transition:\n      background-color var(--bp-transition-fast),\n      border-color var(--bp-transition-fast),\n      color var(--bp-transition-fast),\n      box-shadow var(--bp-transition-fast);\n    cursor: default;\n  }\n\n  .tag:focus-visible {\n    outline: var(--bp-border-width) solid var(--bp-color-focus);\n    outline-offset: var(--bp-border-width);\n  }\n\n  .tag__content {\n    flex: 1;\n  }\n\n  .tag__close {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    margin: 0;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    color: inherit;\n    opacity: 0.7;\n    transition: opacity var(--bp-transition-fast);\n    flex-shrink: 0;\n  }\n\n  .tag__close:hover {\n    opacity: 1;\n  }\n\n  .tag__close:focus-visible {\n    outline: var(--bp-border-width) solid currentColor;\n    outline-offset: var(--bp-border-width);\n    border-radius: var(--bp-border-radius-sm);\n    opacity: 1;\n  }\n\n  /* Variants - Solid */\n  .tag--solid.tag--primary {\n    background-color: var(--bp-color-primary);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--success {\n    background-color: var(--bp-color-success);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--error {\n    background-color: var(--bp-color-error);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--warning {\n    background-color: var(--bp-color-warning);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--info {\n    background-color: var(--bp-color-info);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--neutral {\n    background-color: var(--bp-color-border-strong);\n    color: var(--bp-color-text);\n  }\n\n  /* Variants - Outlined */\n  .tag--outlined {\n    background-color: transparent;\n  }\n\n  .tag--outlined.tag--primary {\n    border-color: var(--bp-color-primary);\n    color: var(--bp-color-primary);\n  }\n\n  .tag--outlined.tag--success {\n    border-color: var(--bp-color-success);\n    color: var(--bp-color-success);\n  }\n\n  .tag--outlined.tag--error {\n    border-color: var(--bp-color-error);\n    color: var(--bp-color-error);\n  }\n\n  .tag--outlined.tag--warning {\n    border-color: var(--bp-color-warning);\n    color: var(--bp-color-warning);\n  }\n\n  .tag--outlined.tag--info {\n    border-color: var(--bp-color-info);\n    color: var(--bp-color-info);\n  }\n\n  .tag--outlined.tag--neutral {\n    border-color: var(--bp-color-border);\n    color: var(--bp-color-text);\n  }\n\n  /* Sizes */\n  .tag--sm {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-xs);\n    height: var(--bp-spacing-6);\n  }\n\n  .tag--sm .tag__close {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n  }\n\n  .tag--md {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-md);\n    font-size: var(--bp-font-size-sm);\n    height: var(--bp-spacing-8);\n  }\n\n  .tag--md .tag__close {\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n  }\n\n  .tag--lg {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-base);\n    height: var(--bp-spacing-10);\n  }\n\n  .tag--lg .tag__close {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n  }\n\n  /* States */\n  .tag--removable {\n    cursor: pointer;\n  }\n\n  .tag--removable:hover {\n    filter: brightness(0.95);\n  }\n\n  .tag--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .tag--disabled .tag__close {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* Touch target size: ensure 44x44px minimum on touch devices */\n  @media (pointer: coarse) {\n    .tag__close {\n      position: relative;\n      min-width: 24px;\n      min-height: 24px;\n    }\n\n    /* Expand touch target with pseudo-element */\n    .tag__close::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 44px;\n      height: 44px;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tagStyles } from './tag.style.js';\nimport '../icon/icon.js';\nimport '../icon/icons/entries/cross.js';\n\n/**\n * Tag component for displaying removable labels, chips, or category markers.\n *\n * @element bp-tag\n *\n * @slot - Default slot for tag content (text)\n *\n * @csspart tag - The tag container element\n * @csspart close-button - The close/remove button element\n *\n * @fires bp-remove - Fired when the tag is removed (cancelable)\n *\n * @example\n * ```html\n * <bp-tag>Design</bp-tag>\n * <bp-tag variant=\"outlined\" removable>TypeScript</bp-tag>\n * <bp-tag variant=\"success\" size=\"sm\">Active</bp-tag>\n * ```\n */\n@customElement('bp-tag')\nexport class BpTag extends LitElement {\n  /**\n   * Visual variant of the tag\n   * @type {'solid' | 'outlined'}\n   * @default 'solid'\n   */\n  @property({ type: String, reflect: true }) declare variant:\n    | 'solid'\n    | 'outlined';\n\n  /**\n   * Size of the tag\n   * @type {'sm' | 'md' | 'lg'}\n   * @default 'md'\n   */\n  @property({ type: String, reflect: true }) declare size: 'sm' | 'md' | 'lg';\n\n  /**\n   * Color scheme of the tag\n   * @type {'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral'}\n   * @default 'neutral'\n   */\n  @property({ type: String, reflect: true }) declare color:\n    | 'primary'\n    | 'success'\n    | 'error'\n    | 'warning'\n    | 'info'\n    | 'neutral';\n\n  /**\n   * Whether the tag can be removed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) declare removable: boolean;\n\n  /**\n   * Whether the tag is disabled\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  static styles = [tagStyles];\n\n  constructor() {\n    super();\n    this.variant = 'solid';\n    this.size = 'md';\n    this.color = 'neutral';\n    this.removable = false;\n    this.disabled = false;\n  }\n\n  private handleRemove(event: Event) {\n    event.stopPropagation();\n\n    if (this.disabled) {\n      return;\n    }\n\n    const removeEvent = new CustomEvent('bp-remove', {\n      detail: {\n        color: this.color,\n        timestamp: Date.now(),\n      },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n\n    this.dispatchEvent(removeEvent);\n\n    // Only remove if event wasn't prevented\n    if (!removeEvent.defaultPrevented) {\n      this.remove();\n    }\n  }\n\n  private handleKeyDown(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    const keyboardEvent = event as unknown as {\n      key: string;\n      preventDefault: () => void;\n    };\n\n    // Allow removing with Delete or Backspace when focused\n    if (\n      this.removable &&\n      (keyboardEvent.key === 'Delete' || keyboardEvent.key === 'Backspace')\n    ) {\n      keyboardEvent.preventDefault();\n      this.handleRemove(event);\n    }\n  }\n\n  render() {\n    const classes = {\n      tag: true,\n      [`tag--${this.variant}`]: true,\n      [`tag--${this.size}`]: true,\n      [`tag--${this.color}`]: true,\n      'tag--disabled': this.disabled,\n      'tag--removable': this.removable,\n    };\n\n    // Map tag size to icon size (icons should be smaller)\n    const iconSize =\n      this.size === 'sm' ? 'xs' : this.size === 'lg' ? 'sm' : 'xs';\n\n    return html`\n      <div\n        class=${classMap(classes)}\n        part=\"tag\"\n        role=\"status\"\n        aria-disabled=${this.disabled}\n        @keydown=${this.handleKeyDown}\n        tabindex=${this.removable && !this.disabled ? '0' : '-1'}\n      >\n        <span class=\"tag__content\">\n          <slot></slot>\n        </span>\n        ${this.removable\n          ? html`\n              <button\n                type=\"button\"\n                class=\"tag__close\"\n                part=\"close-button\"\n                aria-label=\"Remove\"\n                ?disabled=${this.disabled}\n                @click=${this.handleRemove}\n                tabindex=\"-1\"\n              >\n                <bp-icon name=\"cross\" size=${iconSize}></bp-icon>\n              </button>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-tag': BpTag;\n  }\n}\n"],"names":["tagStyles","css","BpTag","LitElement","event","removeEvent","keyboardEvent","classes","iconSize","html","classMap","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"tag.js","sources":["../../source/components/tag/tag.style.ts","../../source/components/tag/tag.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tagStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n  }\n\n  .tag {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-xs);\n    font-family: var(--bp-font-family);\n    font-weight: var(--bp-font-weight-medium);\n    line-height: 1.5;\n    border-radius: var(--bp-border-radius-md);\n    border: var(--bp-border-width) solid transparent;\n    transition:\n      background-color var(--bp-transition-fast),\n      border-color var(--bp-transition-fast),\n      color var(--bp-transition-fast),\n      box-shadow var(--bp-transition-fast);\n    cursor: default;\n  }\n\n  .tag:focus-visible {\n    outline: var(--bp-border-width) solid var(--bp-color-focus);\n    outline-offset: var(--bp-border-width);\n  }\n\n  .tag__content {\n    flex: 1;\n  }\n\n  .tag__close {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    margin: 0;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    color: inherit;\n    opacity: 0.7;\n    transition: opacity var(--bp-transition-fast);\n    flex-shrink: 0;\n  }\n\n  .tag__close:hover {\n    opacity: 1;\n  }\n\n  .tag__close:focus-visible {\n    outline: var(--bp-border-width) solid currentColor;\n    outline-offset: var(--bp-border-width);\n    border-radius: var(--bp-border-radius-sm);\n    opacity: 1;\n  }\n\n  /* Variants - Solid */\n  .tag--solid.tag--primary {\n    background-color: var(--bp-color-primary);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--success {\n    background-color: var(--bp-color-success);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--error {\n    background-color: var(--bp-color-error);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--warning {\n    background-color: var(--bp-color-warning);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--info {\n    background-color: var(--bp-color-info);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--neutral {\n    background-color: var(--bp-color-border-strong);\n    color: var(--bp-color-text);\n  }\n\n  /* Variants - Outlined */\n  .tag--outlined {\n    background-color: transparent;\n  }\n\n  .tag--outlined.tag--primary {\n    border-color: var(--bp-color-primary);\n    color: var(--bp-color-primary);\n  }\n\n  .tag--outlined.tag--success {\n    border-color: var(--bp-color-success);\n    color: var(--bp-color-success);\n  }\n\n  .tag--outlined.tag--error {\n    border-color: var(--bp-color-error);\n    color: var(--bp-color-error);\n  }\n\n  .tag--outlined.tag--warning {\n    border-color: var(--bp-color-warning);\n    color: var(--bp-color-warning);\n  }\n\n  .tag--outlined.tag--info {\n    border-color: var(--bp-color-info);\n    color: var(--bp-color-info);\n  }\n\n  .tag--outlined.tag--neutral {\n    border-color: var(--bp-color-border);\n    color: var(--bp-color-text);\n  }\n\n  /* Sizes */\n  .tag--sm {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-xs);\n    height: var(--bp-spacing-6);\n  }\n\n  .tag--sm .tag__close {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n  }\n\n  .tag--md {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-md);\n    font-size: var(--bp-font-size-sm);\n    height: var(--bp-spacing-8);\n  }\n\n  .tag--md .tag__close {\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n  }\n\n  .tag--lg {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-base);\n    height: var(--bp-spacing-10);\n  }\n\n  .tag--lg .tag__close {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n  }\n\n  /* States */\n  .tag--removable {\n    cursor: pointer;\n  }\n\n  .tag--removable:hover {\n    filter: brightness(0.95);\n  }\n\n  .tag--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .tag--disabled .tag__close {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* Touch target size: ensure 44x44px minimum on touch devices */\n  @media (pointer: coarse) {\n    .tag__close {\n      position: relative;\n      min-width: 24px;\n      min-height: 24px;\n    }\n\n    /* Expand touch target with pseudo-element */\n    .tag__close::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 44px;\n      height: 44px;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tagStyles } from './tag.style.js';\nimport { crossSvg } from '../icon/icons/entries/cross.js';\nimport '../icon/icon.js';\n\n/**\n * Tag component for displaying removable labels, chips, or category markers.\n *\n * @element bp-tag\n *\n * @slot - Default slot for tag content (text)\n *\n * @csspart tag - The tag container element\n * @csspart close-button - The close/remove button element\n *\n * @fires bp-remove - Fired when the tag is removed (cancelable)\n *\n * @example\n * ```html\n * <bp-tag>Design</bp-tag>\n * <bp-tag variant=\"outlined\" removable>TypeScript</bp-tag>\n * <bp-tag variant=\"success\" size=\"sm\">Active</bp-tag>\n * ```\n */\n@customElement('bp-tag')\nexport class BpTag extends LitElement {\n  /**\n   * Visual variant of the tag\n   * @type {'solid' | 'outlined'}\n   * @default 'solid'\n   */\n  @property({ type: String, reflect: true }) declare variant:\n    | 'solid'\n    | 'outlined';\n\n  /**\n   * Size of the tag\n   * @type {'sm' | 'md' | 'lg'}\n   * @default 'md'\n   */\n  @property({ type: String, reflect: true }) declare size: 'sm' | 'md' | 'lg';\n\n  /**\n   * Color scheme of the tag\n   * @type {'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral'}\n   * @default 'neutral'\n   */\n  @property({ type: String, reflect: true }) declare color:\n    | 'primary'\n    | 'success'\n    | 'error'\n    | 'warning'\n    | 'info'\n    | 'neutral';\n\n  /**\n   * Whether the tag can be removed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) declare removable: boolean;\n\n  /**\n   * Whether the tag is disabled\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  static styles = [tagStyles];\n\n  constructor() {\n    super();\n    this.variant = 'solid';\n    this.size = 'md';\n    this.color = 'neutral';\n    this.removable = false;\n    this.disabled = false;\n  }\n\n  private handleRemove(event: Event) {\n    event.stopPropagation();\n\n    if (this.disabled) {\n      return;\n    }\n\n    const removeEvent = new CustomEvent('bp-remove', {\n      detail: {\n        color: this.color,\n        timestamp: Date.now(),\n      },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n\n    this.dispatchEvent(removeEvent);\n\n    // Only remove if event wasn't prevented\n    if (!removeEvent.defaultPrevented) {\n      this.remove();\n    }\n  }\n\n  private handleKeyDown(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    const keyboardEvent = event as unknown as {\n      key: string;\n      preventDefault: () => void;\n    };\n\n    // Allow removing with Delete or Backspace when focused\n    if (\n      this.removable &&\n      (keyboardEvent.key === 'Delete' || keyboardEvent.key === 'Backspace')\n    ) {\n      keyboardEvent.preventDefault();\n      this.handleRemove(event);\n    }\n  }\n\n  render() {\n    const classes = {\n      tag: true,\n      [`tag--${this.variant}`]: true,\n      [`tag--${this.size}`]: true,\n      [`tag--${this.color}`]: true,\n      'tag--disabled': this.disabled,\n      'tag--removable': this.removable,\n    };\n\n    // Map tag size to icon size (icons should be smaller)\n    const iconSize =\n      this.size === 'sm' ? 'xs' : this.size === 'lg' ? 'sm' : 'xs';\n\n    return html`\n      <div\n        class=${classMap(classes)}\n        part=\"tag\"\n        role=\"status\"\n        aria-disabled=${this.disabled}\n        @keydown=${this.handleKeyDown}\n        tabindex=${this.removable && !this.disabled ? '0' : '-1'}\n      >\n        <span class=\"tag__content\">\n          <slot></slot>\n        </span>\n        ${this.removable\n          ? html`\n              <button\n                type=\"button\"\n                class=\"tag__close\"\n                part=\"close-button\"\n                aria-label=\"Remove\"\n                ?disabled=${this.disabled}\n                @click=${this.handleRemove}\n                tabindex=\"-1\"\n              >\n                <bp-icon .svg=${crossSvg} size=${iconSize}></bp-icon>\n              </button>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-tag': BpTag;\n  }\n}\n"],"names":["tagStyles","css","BpTag","LitElement","event","removeEvent","keyboardEvent","classes","iconSize","html","classMap","crossSvg","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import '../icon/icon.js';
-import '../icon/icons/entries/chevron-right.js';
 /**
  * Tree node data structure
  */

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

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

package/dist/components/tree.js

@@ -1,9 +1,10 @@
-import { css as g, LitElement as v, nothing as b, html as a } from "lit";
+import { css as g, LitElement as v, nothing as b, html as l } from "lit";
 import { property as d, state as m, customElement as x } from "lit/decorators.js";
 import { ifDefined as h } from "lit/directives/if-defined.js";
 import { repeat as f } from "lit/directives/repeat.js";
 import { m as y } from "../shared/memoize-DlOFy-92.js";
-const w = g`
+import { chevronRightSvg as w } from "../icons/chevron-right.js";
+const $ = g`
   /* Base styles */
   :host {
     display: block;
@@ -215,10 +216,10 @@ const w = g`
     }
   }
 `;
-var $ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (e, t, s, i) => {
-  for (var o = i > 1 ? void 0 : i ? k(t, s) : t, c = e.length - 1, p; c >= 0; c--)
+var k = Object.defineProperty, N = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? N(t, s) : t, c = e.length - 1, p; c >= 0; c--)
     (p = e[c]) && (o = (i ? p(t, s, o) : p(o)) || o);
-  return i && o && $(t, s, o), o;
+  return i && o && k(t, s, o), o;
 };
 let r = class extends v {
   constructor() {
@@ -456,26 +457,26 @@ let r = class extends v {
    * @returns Lit template result
    */
   renderNode(e, t = 0) {
-    const s = e.children && e.children.length > 0, i = this.expandedSet.has(e.id), o = this.isSelected(e.id), c = `node-content ${o ? "node-content--selected" : ""} ${e.href ? "node-content--link" : ""}`, p = a`
+    const s = e.children && e.children.length > 0, i = this.expandedSet.has(e.id), o = this.isSelected(e.id), c = `node-content ${o ? "node-content--selected" : ""} ${e.href ? "node-content--link" : ""}`, p = l`
       <span
         class="node-toggle ${s ? "node-toggle--visible" : ""}"
         part="node-icon"
         @click=${(n) => this.handleToggleClick(n, e)}
       >
-        ${s ? a`<bp-icon
+        ${s ? l`<bp-icon
               class="toggle-icon ${i ? "toggle-icon--expanded" : ""}"
-              name="chevron-right"
+              .svg=${w}
               size="sm"
             ></bp-icon>` : b}
       </span>
-      ${e.icon ? a`<bp-icon
+      ${e.icon ? l`<bp-icon
             class="node-icon"
             part="node-custom-icon"
             name=${e.icon}
             size="sm"
           ></bp-icon>` : b}
       <span class="node-label" part="node-label">${e.label}</span>
-    `, u = e.href ? a`
+    `, u = e.href ? l`
           <a
             class=${c}
             part="node-content"
@@ -486,7 +487,7 @@ let r = class extends v {
           >
             ${p}
           </a>
-        ` : a`
+        ` : l`
           <div
             class=${c}
             part="node-content"
@@ -497,7 +498,7 @@ let r = class extends v {
             ${p}
           </div>
         `;
-    return a`
+    return l`
       <div
         class="node ${e.disabled ? "node--disabled" : ""} ${s && i ? "node--expanded" : ""}"
         part="node"
@@ -512,7 +513,7 @@ let r = class extends v {
         style="--node-level: ${t}"
       >
         ${u}
-        ${s && i ? a`
+        ${s && i ? l`
               <div class="node-children" part="node-children" role="group">
                 ${f(
       e.children,
@@ -526,7 +527,7 @@ let r = class extends v {
   }
   render() {
     const e = this.nodes && this.nodes.length > 0;
-    return a`
+    return l`
       <div
         class="tree tree--${this.size} ${this.showLines ? "tree--lines" : ""}"
         part="tree"
@@ -537,31 +538,31 @@ let r = class extends v {
       this.nodes,
       (t) => t.id,
       (t) => this.renderNode(t, 0)
-    ) : a`<slot></slot>`}
+    ) : l`<slot></slot>`}
       </div>
     `;
   }
 };
-r.styles = [w];
-l([
+r.styles = [$];
+a([
   d({ type: Array })
 ], r.prototype, "nodes", 2);
-l([
+a([
   d({ type: String, reflect: !0 })
 ], r.prototype, "selectedId", 2);
-l([
+a([
   d({ type: Array })
 ], r.prototype, "expandedIds", 2);
-l([
+a([
   d({ type: Boolean, reflect: !0, attribute: "multi-select" })
 ], r.prototype, "multiSelect", 2);
-l([
+a([
   d({ type: Boolean, reflect: !0, attribute: "show-lines" })
 ], r.prototype, "showLines", 2);
-l([
+a([
   d({ type: Boolean, reflect: !0 })
 ], r.prototype, "selectable", 2);
-l([
+a([
   d({
     type: String,
     reflect: !0,
@@ -570,10 +571,10 @@ l([
     }
   })
 ], r.prototype, "size", 2);
-l([
+a([
   m()
 ], r.prototype, "selectedIds", 2);
-r = l([
+r = a([
   x("bp-tree")
 ], r);
 export {

package/dist/components/tree.js.map

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