@krollins/blueprint 0.1.12 → 0.1.14

package/dist/components/tabs.js.map

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

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;AAEzB;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC;;;;OAIG;IACgD,OAAO,EACtD,OAAO,GACP,UAAU,CAAC;IAEf;;;;OAIG;IACgD,IAAI,EACnD,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;IAET;;;;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;AAIvC,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

@@ -0,0 +1,291 @@
+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`
+  /* Base styles */
+  :host {
+    display: inline-block;
+  }
+
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--bp-spacing-xs);
+    font-family: var(--bp-font-family);
+    font-weight: var(--bp-font-weight-medium);
+    line-height: 1.5;
+    border-radius: var(--bp-border-radius-md);
+    border: var(--bp-border-width) solid transparent;
+    transition:
+      background-color var(--bp-transition-fast),
+      border-color var(--bp-transition-fast),
+      color var(--bp-transition-fast),
+      box-shadow var(--bp-transition-fast);
+    cursor: default;
+  }
+
+  .tag:focus-visible {
+    outline: var(--bp-border-width) solid var(--bp-color-focus);
+    outline-offset: var(--bp-border-width);
+  }
+
+  .tag__content {
+    flex: 1;
+  }
+
+  .tag__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+    transition: opacity var(--bp-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .tag__close:hover {
+    opacity: 1;
+  }
+
+  .tag__close:focus-visible {
+    outline: var(--bp-border-width) solid currentColor;
+    outline-offset: var(--bp-border-width);
+    border-radius: var(--bp-border-radius-sm);
+    opacity: 1;
+  }
+
+  /* Variants - Solid */
+  .tag--solid.tag--primary {
+    background-color: var(--bp-color-primary);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .tag--solid.tag--success {
+    background-color: var(--bp-color-success);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .tag--solid.tag--error {
+    background-color: var(--bp-color-error);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .tag--solid.tag--warning {
+    background-color: var(--bp-color-warning);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .tag--solid.tag--info {
+    background-color: var(--bp-color-info);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .tag--solid.tag--neutral {
+    background-color: var(--bp-color-border-strong);
+    color: var(--bp-color-text);
+  }
+
+  /* Variants - Outlined */
+  .tag--outlined {
+    background-color: transparent;
+  }
+
+  .tag--outlined.tag--primary {
+    border-color: var(--bp-color-primary);
+    color: var(--bp-color-primary);
+  }
+
+  .tag--outlined.tag--success {
+    border-color: var(--bp-color-success);
+    color: var(--bp-color-success);
+  }
+
+  .tag--outlined.tag--error {
+    border-color: var(--bp-color-error);
+    color: var(--bp-color-error);
+  }
+
+  .tag--outlined.tag--warning {
+    border-color: var(--bp-color-warning);
+    color: var(--bp-color-warning);
+  }
+
+  .tag--outlined.tag--info {
+    border-color: var(--bp-color-info);
+    color: var(--bp-color-info);
+  }
+
+  .tag--outlined.tag--neutral {
+    border-color: var(--bp-color-border);
+    color: var(--bp-color-text);
+  }
+
+  /* Sizes */
+  .tag--sm {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-xs);
+    height: var(--bp-spacing-6);
+  }
+
+  .tag--sm .tag__close {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+  }
+
+  .tag--md {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-md);
+    font-size: var(--bp-font-size-sm);
+    height: var(--bp-spacing-8);
+  }
+
+  .tag--md .tag__close {
+    width: var(--bp-spacing-5);
+    height: var(--bp-spacing-5);
+  }
+
+  .tag--lg {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-lg);
+    font-size: var(--bp-font-size-base);
+    height: var(--bp-spacing-10);
+  }
+
+  .tag--lg .tag__close {
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+  }
+
+  /* States */
+  .tag--removable {
+    cursor: pointer;
+  }
+
+  .tag--removable:hover {
+    filter: brightness(0.95);
+  }
+
+  .tag--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .tag--disabled .tag__close {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Touch target size: ensure 44x44px minimum on touch devices */
+  @media (pointer: coarse) {
+    .tag__close {
+      position: relative;
+      min-width: 24px;
+      min-height: 24px;
+    }
+
+    /* Expand touch target with pseudo-element */
+    .tag__close::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 44px;
+      height: 44px;
+    }
+  }
+`;
+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;
+};
+let t = class extends d {
+  constructor() {
+    super(), this.variant = "solid", this.size = "md", this.color = "neutral", this.removable = !1, this.disabled = !1;
+  }
+  handleRemove(o) {
+    if (o.stopPropagation(), this.disabled)
+      return;
+    const r = new CustomEvent("bp-remove", {
+      detail: {
+        color: this.color,
+        timestamp: Date.now()
+      },
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    });
+    this.dispatchEvent(r), r.defaultPrevented || this.remove();
+  }
+  handleKeyDown(o) {
+    if (this.disabled)
+      return;
+    const r = o;
+    this.removable && (r.key === "Delete" || r.key === "Backspace") && (r.preventDefault(), this.handleRemove(o));
+  }
+  render() {
+    const o = {
+      tag: !0,
+      [`tag--${this.variant}`]: !0,
+      [`tag--${this.size}`]: !0,
+      [`tag--${this.color}`]: !0,
+      "tag--disabled": this.disabled,
+      "tag--removable": this.removable
+    }, r = this.size === "sm" ? "xs" : this.size === "lg" ? "sm" : "xs";
+    return p`
+      <div
+        class=${v(o)}
+        part="tag"
+        role="status"
+        aria-disabled=${this.disabled}
+        @keydown=${this.handleKeyDown}
+        tabindex=${this.removable && !this.disabled ? "0" : "-1"}
+      >
+        <span class="tag__content">
+          <slot></slot>
+        </span>
+        ${this.removable ? p`
+              <button
+                type="button"
+                class="tag__close"
+                part="close-button"
+                aria-label="Remove"
+                ?disabled=${this.disabled}
+                @click=${this.handleRemove}
+                tabindex="-1"
+              >
+                <bp-icon name="cross" size=${r}></bp-icon>
+              </button>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+t.styles = [u];
+a([
+  i({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+a([
+  i({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+a([
+  i({ type: String, reflect: !0 })
+], t.prototype, "color", 2);
+a([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "removable", 2);
+a([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+t = a([
+  g("bp-tag")
+], t);
+export {
+  t as BpTag
+};
+//# sourceMappingURL=tag.js.map

package/dist/components/tag.js.map

@@ -0,0 +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';\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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"}

package/dist/components/text.js

@@ -0,0 +1,278 @@
+import { css as h, LitElement as g, html as c } from "lit";
+import { property as i, customElement as x } from "lit/decorators.js";
+const m = h`
+  /* Base styles */
+  :host {
+    display: inline-block;
+  }
+
+  :host([as='span']) {
+    display: inline;
+  }
+
+  .text {
+    margin: 0;
+    padding: 0;
+    font-family: var(--bp-font-family);
+    color: var(--bp-color-text);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  /* Sizes */
+  .text--xs {
+    font-size: var(--bp-font-size-xs);
+  }
+
+  .text--sm {
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .text--base {
+    font-size: var(--bp-font-size-base);
+  }
+
+  .text--lg {
+    font-size: var(--bp-font-size-lg);
+  }
+
+  .text--xl {
+    font-size: var(--bp-font-size-xl);
+  }
+
+  /* Font weights */
+  .text--light {
+    font-weight: var(--bp-font-weight-light);
+  }
+
+  .text--normal {
+    font-weight: var(--bp-font-weight-normal);
+  }
+
+  .text--medium {
+    font-weight: var(--bp-font-weight-medium);
+  }
+
+  .text--semibold {
+    font-weight: var(--bp-font-weight-semibold);
+  }
+
+  .text--bold {
+    font-weight: var(--bp-font-weight-bold);
+  }
+
+  /* Variants */
+  .text--default {
+    color: var(--bp-color-text);
+  }
+
+  .text--muted {
+    color: var(--bp-color-text-muted);
+  }
+
+  .text--primary {
+    color: var(--bp-color-primary);
+  }
+
+  .text--success {
+    color: var(--bp-color-success);
+  }
+
+  .text--warning {
+    color: var(--bp-color-warning);
+  }
+
+  .text--error {
+    color: var(--bp-color-error);
+  }
+
+  /* Alignment */
+  .text--align-left {
+    text-align: left;
+  }
+
+  .text--align-center {
+    text-align: center;
+  }
+
+  .text--align-right {
+    text-align: right;
+  }
+
+  .text--align-justify {
+    text-align: justify;
+  }
+
+  /* Text transform */
+  .text--transform-uppercase {
+    text-transform: uppercase;
+  }
+
+  .text--transform-lowercase {
+    text-transform: lowercase;
+  }
+
+  .text--transform-capitalize {
+    text-transform: capitalize;
+  }
+
+  /* Letter spacing (tracking) */
+  .text--tracking-tighter {
+    letter-spacing: -0.05em;
+  }
+
+  .text--tracking-tight {
+    letter-spacing: -0.025em;
+  }
+
+  .text--tracking-wide {
+    letter-spacing: 0.025em;
+  }
+
+  .text--tracking-wider {
+    letter-spacing: 0.05em;
+  }
+
+  /* Line height variants */
+  .text--line-height-none {
+    line-height: var(--bp-line-height-none);
+  }
+
+  .text--line-height-tight {
+    line-height: var(--bp-line-height-tight);
+  }
+
+  .text--line-height-snug {
+    line-height: var(--bp-line-height-snug);
+  }
+
+  .text--line-height-relaxed {
+    line-height: var(--bp-line-height-relaxed);
+  }
+
+  .text--line-height-loose {
+    line-height: var(--bp-line-height-loose);
+  }
+
+  /* Multi-line clamp */
+  .text--clamp-1,
+  .text--clamp-2,
+  .text--clamp-3,
+  .text--clamp-4,
+  .text--clamp-5,
+  .text--clamp-6 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .text--clamp-1 {
+    -webkit-line-clamp: 1;
+  }
+
+  .text--clamp-2 {
+    -webkit-line-clamp: 2;
+  }
+
+  .text--clamp-3 {
+    -webkit-line-clamp: 3;
+  }
+
+  .text--clamp-4 {
+    -webkit-line-clamp: 4;
+  }
+
+  .text--clamp-5 {
+    -webkit-line-clamp: 5;
+  }
+
+  .text--clamp-6 {
+    -webkit-line-clamp: 6;
+  }
+
+  /* States */
+  .text--italic {
+    font-style: italic;
+  }
+
+  .text--truncate {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+`;
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (l, a, o, n) => {
+  for (var r = n > 1 ? void 0 : n ? b(a, o) : a, s = l.length - 1, p; s >= 0; s--)
+    (p = l[s]) && (r = (n ? p(a, o, r) : p(r)) || r);
+  return n && r && f(a, o, r), r;
+};
+let t = class extends g {
+  constructor() {
+    super(), this.as = "p", this.size = "base", this.weight = "normal", this.variant = "default", this.align = "left", this.transform = "none", this.tracking = "normal", this.lineHeight = "normal", this.clamp = 0, this.italic = !1, this.truncate = !1;
+  }
+  render() {
+    const l = [
+      "text",
+      `text--${this.size}`,
+      `text--${this.weight}`,
+      `text--${this.variant}`,
+      `text--align-${this.align}`,
+      this.transform !== "none" ? `text--transform-${this.transform}` : "",
+      this.tracking !== "normal" ? `text--tracking-${this.tracking}` : "",
+      this.lineHeight !== "normal" ? `text--line-height-${this.lineHeight}` : "",
+      this.clamp > 0 ? `text--clamp-${this.clamp}` : "",
+      this.italic ? "text--italic" : "",
+      this.truncate ? "text--truncate" : ""
+    ].filter(Boolean).join(" ");
+    switch (this.as) {
+      case "span":
+        return c`<span part="text" class="${l}"><slot></slot></span>`;
+      case "div":
+        return c`<div part="text" class="${l}"><slot></slot></div>`;
+      default:
+        return c`<p part="text" class="${l}"><slot></slot></p>`;
+    }
+  }
+};
+t.styles = [m];
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "as", 2);
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "weight", 2);
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "align", 2);
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "transform", 2);
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "tracking", 2);
+e([
+  i({ type: String, reflect: !0, attribute: "line-height" })
+], t.prototype, "lineHeight", 2);
+e([
+  i({ type: Number, reflect: !0 })
+], t.prototype, "clamp", 2);
+e([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "italic", 2);
+e([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "truncate", 2);
+t = e([
+  x("bp-text")
+], t);
+export {
+  t as BpText
+};
+//# sourceMappingURL=text.js.map