bromcom-ui-next 0.1.30 → 0.1.31

package/dist/components/bcm-tabs.js.map

@@ -1 +1 @@
-{"file":"bcm-tabs.js","mappings":"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","names":["BcmTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tabs/bcm-tabs.css?tag=bcm-tabs&encapsulation=shadow","src/components/tabs/tabs.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n:host([variant='full-width']) {\n  width: 100%;\n}\n\n:host([variant='auto-width']) {\n  width: auto;\n}\n","import { Component, State, Prop, Element, h, Host, Listen, ComponentInterface, Event, EventEmitter, Watch, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @description Tab interface component\n * @slot - Default slot for content area\n * @slot tabs-list - Special slot for tab list\n */\n@Component({\n  tag: 'bcm-tabs',\n  styleUrl: 'bcm-tabs.css',\n  shadow: true,\n})\nexport class BcmTabs implements ComponentInterface {\n  @Element() el: HTMLElement;\n\n  /**\n   * Default active tab value\n   */\n  @Prop({ reflect: true })\n  defaultValue: string;\n\n  /**\n   * Tab size\n   */\n  @Prop({ reflect: true })\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Tab variant - controls width behavior\n   */\n  @Prop({ reflect: true })\n  variant: 'full-width' | 'auto-width' = 'full-width';\n\n  /**\n   * Whether to enable smooth animations for inkbar and transitions\n   */\n  @Prop({ reflect: true })\n  smooth: boolean = true;\n\n  /**\n   * Triggers when tab changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmTabChange',\n  })\n  bcmTabChange: EventEmitter<{\n    activeTab: string;\n    element: HTMLBcmTabsTriggerElement;\n    previousTab?: string;\n  }>;\n\n  /**\n   * Active tab value\n   */\n  @State() activeTab: string;\n\n  /**\n   * Previous active tab value\n   */\n  @State() previousTab: string;\n\n  private triggers: HTMLBcmTabsTriggerElement[] = [];\n  private contents: HTMLBcmTabsContentElement[] = [];\n  private tabsList: HTMLBcmTabsListElement;\n\n  componentWillLoad() {\n    this.activeTab = this.defaultValue;\n  }\n\n  componentDidLoad() {\n    this.refreshElementReferences();\n    this.updateTriggerProperties();\n    this.updateTabsListProperties();\n\n    // Eğer defaultValue yoksa ilk tab'ı aktif yap\n    if (!this.defaultValue && this.triggers.length > 0) {\n      this.activeTab = this.triggers[0].value;\n    }\n\n    this.setupRelations(); // activeTab ayarlandıktan sonra relations'ı kur\n\n    // auto-width variant'ında inkbar hesaplaması için ek gecikme\n    if (this.variant === 'auto-width') {\n      requestAnimationFrame(() => {\n        this.updateInkbar();\n        this.updateContentVisibility();\n      });\n    } else {\n      this.updateInkbar();\n      this.updateContentVisibility();\n    }\n  }\n\n  /**\n   * Refreshes DOM element references\n   */\n  private refreshElementReferences() {\n    this.triggers = Array.from(this.el.querySelectorAll('bcm-tabs-trigger'));\n    this.contents = Array.from(this.el.querySelectorAll('bcm-tabs-content'));\n    this.tabsList = this.el.querySelector('bcm-tabs-list');\n  }\n\n  /**\n   * Establishes relationships between tabs and content\n   */\n  private setupRelations() {\n    this.triggers.forEach(trigger => {\n      trigger.active = trigger.value === this.activeTab;\n      const panel = this.contents.find(content => content.value === trigger.value);\n      if (panel) {\n        const panelId = `panel-${trigger.value}`;\n        panel.id = panelId;\n        trigger.setAttribute('aria-controls', panelId);\n        panel.setAttribute('aria-labelledby', `trigger-${trigger.value}`);\n        trigger.id = `trigger-${trigger.value}`;\n      }\n    });\n  }\n\n  private updateTriggerProperties() {\n    if (this.triggers?.length > 0) {\n      this.triggers.forEach(trigger => {\n        trigger.size = this.size;\n        trigger.variant = this.variant;\n        trigger.smooth = this.smooth;\n      });\n    }\n  }\n\n  private updateTabsListProperties() {\n    if (this.tabsList) {\n      this.tabsList.variant = this.variant;\n      this.tabsList.smooth = this.smooth;\n    }\n  }\n\n  @Watch('size')\n  handleSizeChange() {\n    this.updateTriggerProperties();\n  }\n\n  @Watch('variant')\n  handleVariantChange() {\n    this.updateTriggerProperties();\n    this.updateTabsListProperties();\n\n    // auto-width variant'ında inkbar hesaplaması için ek gecikme\n    if (this.variant === 'auto-width') {\n      requestAnimationFrame(() => {\n        this.updateInkbar();\n      });\n    } else {\n      this.updateInkbar();\n    }\n  }\n\n  @Watch('smooth')\n  handleSmoothChange() {\n    this.updateTriggerProperties();\n    this.updateTabsListProperties();\n  }\n\n  @Method()\n  async disableTab(value: string): Promise<void> {\n    const trigger = this.triggers.find(t => t.value === value);\n    if (trigger) {\n      trigger.disabled = true;\n    }\n  }\n\n  @Method()\n  async enableTab(value: string): Promise<void> {\n    const trigger = this.triggers.find(t => t.value === value);\n    if (trigger) {\n      trigger.disabled = false;\n    }\n  }\n\n  /**\n   * Disables all tabs\n   */\n  @Method()\n  async disableAllTabs() {\n    this.triggers.forEach(trigger => {\n      trigger.disabled = true;\n    });\n  }\n\n  /**\n   * Enables all tabs\n   */\n  @Method()\n  async enableAllTabs() {\n    this.triggers.forEach(trigger => {\n      trigger.disabled = false;\n    });\n  }\n\n  /**\n   * Returns the active tab value\n   */\n  @Method()\n  async getActiveTab(): Promise<string> {\n    return this.activeTab;\n  }\n\n  /**\n   * Sets the active tab\n   */\n  @Method()\n  async setActiveTab(value: string): Promise<void> {\n    const trigger = this.triggers.find(t => t.value === value);\n    if (trigger && !trigger.disabled) {\n      this.previousTab = this.activeTab;\n      this.activeTab = value;\n      this.updateInkbar();\n      this.updateContentVisibility();\n      this.updateTabStatus();\n\n      this.bcmTabChange.emit({\n        activeTab: this.activeTab,\n        element: trigger,\n        previousTab: this.previousTab,\n      });\n    }\n  }\n\n  /**\n   * Updates tab status\n   */\n  private updateTabStatus() {\n    this.triggers.forEach(trigger => {\n      const isActive = trigger.value === this.activeTab;\n      trigger.active = isActive;\n    });\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.updateInkbar();\n  }\n\n  /**\n   * Triggered when a tab is selected\n   */\n  @Listen('bcmTabSelected', { capture: true })\n  handleTabSelected(event: CustomEvent<string>) {\n    this.previousTab = this.activeTab;\n    this.activeTab = event.detail;\n\n    this.updateTabStatus();\n    this.updateInkbar();\n    this.updateContentVisibility();\n\n    const activeElement = this.triggers.find(trigger => trigger.value === this.activeTab);\n    if (activeElement) {\n      this.bcmTabChange.emit({\n        activeTab: this.activeTab,\n        element: activeElement,\n        previousTab: this.previousTab,\n      });\n    }\n  }\n\n  /**\n   * Updates content visibility\n   */\n  private updateContentVisibility() {\n    this.contents.forEach(content => {\n      const isVisible = content.value === this.activeTab;\n      content.style.display = isVisible ? 'block' : 'none';\n      content.setAttribute('aria-hidden', (!isVisible).toString());\n    });\n  }\n\n  /**\n   * Updates inkbar position\n   */\n  private updateInkbar() {\n    if (!this.tabsList) {\n      console.warn('bcm-tabs-list not found');\n      return;\n    }\n\n    const totalTriggers = this.triggers.length;\n    if (totalTriggers === 0) return;\n\n    const inkbar = this.tabsList?.shadowRoot?.querySelector('.inkbar') as HTMLElement;\n    const activeTrigger = this.triggers.find(trigger => trigger.value === this.activeTab);\n\n    if (activeTrigger && inkbar) {\n      // auto-width variant'ında container genişliği henüz hesaplanmamış olabilir\n      // Bu durumda bir sonraki frame'de tekrar deneyelim\n      if (this.variant === 'auto-width') {\n        requestAnimationFrame(() => {\n          this.updateInkbarPosition(inkbar, activeTrigger as unknown as HTMLElement);\n        });\n      } else {\n        this.updateInkbarPosition(inkbar, activeTrigger as unknown as HTMLElement);\n      }\n    } else {\n      if (inkbar) inkbar.style.opacity = '0';\n    }\n  }\n\n  /**\n   * Updates inkbar position and size\n   */\n  private updateInkbarPosition(inkbar: HTMLElement, activeTrigger: HTMLElement) {\n    const triggerRect = activeTrigger.getBoundingClientRect();\n    const groupRect = this.tabsList?.shadowRoot?.querySelector('.tabs-list')?.getBoundingClientRect();\n\n    if (triggerRect && groupRect) {\n      const left = triggerRect.left - groupRect.left;\n      const width = triggerRect.width;\n\n      // Her iki variant için de aynı davranış: sadece aktif tab altında göster\n      inkbar.style.width = `${width}px`;\n      inkbar.style.transform = `translateX(${left}px)`;\n      inkbar.style.left = '0';\n      inkbar.style.right = 'auto';\n\n      // smooth prop'una göre opacity geçişi\n      if (this.smooth) {\n        inkbar.style.opacity = '1';\n      } else {\n        // Animasyon olmadan anında göster\n        inkbar.style.transition = 'none';\n        inkbar.style.opacity = '1';\n        // Bir sonraki frame'de transition'ı geri yükle\n        requestAnimationFrame(() => {\n          inkbar.style.transition = '';\n        });\n      }\n    } else {\n      console.warn('Group or trigger rect calculation failed');\n      inkbar.style.opacity = '0';\n    }\n  }\n\n  /**\n   * Tab container class\n   */\n  private tabClass = tv({\n    base: 'tabs-container bcm-ui-element flex flex-col',\n    variants: {\n      variant: {\n        'full-width': 'w-full',\n        'auto-width': 'w-auto',\n      },\n    },\n    defaultVariants: {\n      variant: 'full-width',\n    },\n  });\n\n  render() {\n    return (\n      <Host>\n        <div class={this.tabClass({ variant: this.variant })}>\n          <slot name=\"tabs-list\" />\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-tabs.js","mappings":"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","names":["BcmTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tabs/bcm-tabs.css?tag=bcm-tabs&encapsulation=shadow","src/components/tabs/tabs.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.tabs-container {\n  /* CSS Variables for inkbar positioning */\n  --active-index: 0;\n  --tab-count: 1;\n}\n\n/* Smooth animation timing function */\n.inkbar {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, Watch, State, Listen, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * Modern Tabs component with CSS-first approach\n * @slot - Default slot for bcm-tab components\n */\n@Component({\n  tag: 'bcm-tabs',\n  styleUrl: 'bcm-tabs.css',\n  shadow: true,\n})\nexport class BcmTabs {\n  @Element() el: HTMLElement;\n\n  /**\n   * Active tab value\n   */\n  @Prop({ mutable: true, reflect: true })\n  value: string;\n\n  /**\n   * Tab size variant\n   */\n  @Prop({ reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Visual variant\n   */\n  @Prop({ reflect: true })\n  variant: 'line' | 'enclosed' = 'line';\n\n  /**\n   * Enable shadow on main container\n   */\n  @Prop({ reflect: true })\n  shadow: boolean = false;\n\n  /**\n   * Emits when active tab changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmTabChange',\n  })\n  bcmTabChange: EventEmitter<{\n    value: string;\n    previousValue: string;\n  }>;\n\n  @State() tabs: Array<{ value: string; label: string; disabled: boolean }> = [];\n  @State() activeIndex: number = 0;\n\n  private tabElements: Element[] = [];\n\n  componentWillLoad() {\n    this.discoverTabs();\n  }\n\n  componentDidLoad() {\n    this.updateActiveIndex();\n    this.updateTabStates();\n  }\n\n  /**\n   * Discovers all bcm-tab children\n   */\n  private discoverTabs() {\n    this.tabElements = Array.from(this.el.querySelectorAll('bcm-tab'));\n    this.tabs = this.tabElements.map((tab: any) => ({\n      value: tab.value,\n      label: tab.label || tab.value,\n      disabled: tab.disabled || false,\n    }));\n\n    // Set initial value if not provided\n    if (!this.value && this.tabs.length > 0) {\n      const firstEnabledTab = this.tabs.find(t => !t.disabled);\n      if (firstEnabledTab) {\n        this.value = firstEnabledTab.value;\n      }\n    }\n  }\n\n  /**\n   * Updates the active index based on current value\n   */\n  private updateActiveIndex() {\n    const index = this.tabs.findIndex(t => t.value === this.value);\n    this.activeIndex = index >= 0 ? index : 0;\n  }\n\n  /**\n   * Updates active/inactive state of all tab elements\n   */\n  private updateTabStates() {\n    this.tabElements.forEach((tab: any) => {\n      tab.active = tab.value === this.value;\n    });\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string, oldValue: string) {\n    this.updateActiveIndex();\n    this.updateTabStates();\n    this.updateCSSVariables();\n\n    if (oldValue !== newValue) {\n      this.bcmTabChange.emit({\n        value: newValue,\n        previousValue: oldValue,\n      });\n    }\n  }\n\n  @Watch('size')\n  handleSizeChange() {\n    this.propagatePropsToTabs();\n  }\n\n  /**\n   * Propagates parent props to child tabs\n   */\n  private propagatePropsToTabs() {\n    this.tabElements.forEach((tab: any) => {\n      tab.size = this.size;\n    });\n  }\n\n  /**\n   * Updates CSS custom properties for inkbar positioning\n   */\n  private updateCSSVariables() {\n    const tabsContainer = this.el.shadowRoot?.querySelector('.tabs-container') as HTMLElement;\n    if (tabsContainer) {\n      tabsContainer.style.setProperty('--active-index', this.activeIndex.toString());\n      tabsContainer.style.setProperty('--tab-count', this.tabs.length.toString());\n    }\n  }\n\n  /**\n   * Handles tab click events from children\n   */\n  @Listen('bcmTabClick')\n  handleTabClick(event: CustomEvent<string>) {\n    const clickedValue = event.detail;\n    const tab = this.tabs.find(t => t.value === clickedValue);\n\n    if (tab && !tab.disabled) {\n      this.value = clickedValue;\n    }\n  }\n\n  /**\n   * Keyboard navigation support\n   */\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    const target = ev.target as HTMLElement;\n    if (!target.classList.contains('tab-button')) return;\n\n    let newIndex = this.activeIndex;\n\n    switch (ev.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        ev.preventDefault();\n        newIndex = this.getNextEnabledTabIndex(this.activeIndex);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        ev.preventDefault();\n        newIndex = this.getPreviousEnabledTabIndex(this.activeIndex);\n        break;\n      case 'Home':\n        ev.preventDefault();\n        newIndex = this.getFirstEnabledTabIndex();\n        break;\n      case 'End':\n        ev.preventDefault();\n        newIndex = this.getLastEnabledTabIndex();\n        break;\n      default:\n        return;\n    }\n\n    if (newIndex !== this.activeIndex) {\n      this.value = this.tabs[newIndex].value;\n      this.focusTabAtIndex(newIndex);\n    }\n  }\n\n  private getNextEnabledTabIndex(currentIndex: number): number {\n    for (let i = currentIndex + 1; i < this.tabs.length; i++) {\n      if (!this.tabs[i].disabled) return i;\n    }\n    return currentIndex;\n  }\n\n  private getPreviousEnabledTabIndex(currentIndex: number): number {\n    for (let i = currentIndex - 1; i >= 0; i--) {\n      if (!this.tabs[i].disabled) return i;\n    }\n    return currentIndex;\n  }\n\n  private getFirstEnabledTabIndex(): number {\n    const index = this.tabs.findIndex(t => !t.disabled);\n    return index >= 0 ? index : 0;\n  }\n\n  private getLastEnabledTabIndex(): number {\n    for (let i = this.tabs.length - 1; i >= 0; i--) {\n      if (!this.tabs[i].disabled) return i;\n    }\n    return this.tabs.length - 1;\n  }\n\n  private focusTabAtIndex(index: number) {\n    const buttons = this.el.shadowRoot?.querySelectorAll('.tab-button');\n    if (buttons && buttons[index]) {\n      (buttons[index] as HTMLElement).focus();\n    }\n  }\n\n  /**\n   * Public method to programmatically set active tab\n   */\n  @Method()\n  async setActiveTab(value: string): Promise<void> {\n    const tab = this.tabs.find(t => t.value === value);\n    if (tab && !tab.disabled) {\n      this.value = value;\n    }\n  }\n\n  /**\n   * Public method to get active tab value\n   */\n  @Method()\n  async getActiveTab(): Promise<string> {\n    return this.value;\n  }\n\n  /**\n   * Tailwind class configuration\n   */\n  private containerClass = tv({\n    base: 'tabs-container flex flex-col w-full',\n    variants: {\n      shadow: {\n        true: 'shadow-md rounded-lg',\n        false: '',\n      },\n    },\n  });\n\n  private tabsListClass = tv({\n    base: 'tabs-list relative flex border-b border-color-default',\n    variants: {\n      variant: {\n        line: 'bg-transparent',\n        enclosed: 'bg-color-background-subtle border border-color-default rounded-t-lg',\n      },\n    },\n  });\n\n  private inkbarClass = tv({\n    base: 'inkbar absolute bottom-0 left-0 h-0.5 bg-color-primary pointer-events-none',\n    variants: {\n      variant: {\n        line: 'transition-transform duration-200 ease-smooth',\n        enclosed: 'hidden',\n      },\n    },\n  });\n\n  render() {\n    this.updateCSSVariables();\n    this.propagatePropsToTabs();\n\n    return (\n      <Host>\n        <div class={this.containerClass({ shadow: this.shadow })}>\n          {/* Tab buttons list */}\n          <div class={this.tabsListClass({ variant: this.variant })} role=\"tablist\">\n            {this.tabs.map((tab, index) => (\n              <button\n                key={tab.value}\n                class={`tab-button flex-1 px-4 py-2 text-center font-medium transition-colors border-none ${\n                  tab.value === this.value\n                    ? 'text-color-primary'\n                    : tab.disabled\n                    ? 'text-color-disabled cursor-not-allowed opacity-50'\n                    : 'text-color-placeholder hover:text-color-primary cursor-pointer'\n                } ${this.size === 'sm' ? 'text-sm py-1.5 px-3' : this.size === 'lg' ? 'text-lg py-3 px-5' : 'text-base py-2 px-4'} bg-transparent`}\n                role=\"tab\"\n                aria-selected={(tab.value === this.value).toString()}\n                aria-controls={`panel-${tab.value}`}\n                id={`tab-${tab.value}`}\n                disabled={tab.disabled}\n                onClick={() => !tab.disabled && (this.value = tab.value)}\n                tabindex={index === this.activeIndex ? 0 : -1}\n              >\n                {tab.label}\n              </button>\n            ))}\n\n            {/* Inkbar - CSS-animated */}\n            {this.variant === 'line' && (\n              <div\n                class={this.inkbarClass({ variant: this.variant })}\n                style={{\n                  transform: `translateX(calc(${this.activeIndex} * 100% / ${this.tabs.length}))`,\n                  width: `calc(100% / ${this.tabs.length})`,\n                }}\n              />\n            )}\n          </div>\n\n          {/* Tab panels */}\n          <div class=\"tabs-content\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bcm-text.js

@@ -19,7 +19,7 @@ const variantTagMap = {
     infoAccent: 'p',
 };
 
-const textCss = ".m-0{margin:0}.appearance-none{appearance:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-0{padding:0}.text-size-12{font-size:var(--bcm-ui-font-size-12,60px);line-height:var(--bcm-ui-line-height-12,72px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-caption{color:var(--bcm-ui-color-text-caption)}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.text-color-label{color:var(--bcm-ui-color-text-label)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+const textCss = ".static{position:static}.m-0{margin:0}.appearance-none{appearance:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-0{padding:0}.text-size-12{font-size:var(--bcm-ui-font-size-12,60px);line-height:var(--bcm-ui-line-height-12,72px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-caption{color:var(--bcm-ui-color-text-caption)}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.text-color-label{color:var(--bcm-ui-color-text-label)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 
 const BcmText$1 = /*@__PURE__*/ proxyCustomElement(class BcmText extends H {
     constructor(registerHost) {
@@ -28,93 +28,94 @@ const BcmText$1 = /*@__PURE__*/ proxyCustomElement(class BcmText extends H {
             this.__registerHost();
         }
         this.__attachShadow();
-        /** Text variant */
-        this.variant = 'body';
-        /** Text size */
-        this.size = 'medium';
-        /** Text overflow behavior */
-        this.overflow = false;
-        this.variantClassMap = {
-            display: 'font-semibold text-size-12 text-color-header',
-            heading1: 'font-semibold text-size-7 text-color-header',
-            heading2: 'font-semibold text-size-6 text-color-header',
-            title1: {
-                small: 'font-semibold text-size-5 text-color-header',
-                medium: 'font-semibold text-size-6 text-color-header',
-                large: 'font-semibold text-size-7 text-color-header',
-            },
-            title2: {
-                small: 'font-semibold text-size-4 text-color-default',
-                medium: 'font-semibold text-size-5 text-color-default',
-                large: 'font-semibold text-size-6 text-color-default',
-            },
-            title3: {
-                small: 'font-semibold text-size-3 text-color-disabled',
-                medium: 'font-semibold text-size-4 text-color-disabled',
-                large: 'font-semibold text-size-5 text-color-disabled',
-            },
-            body: {
-                small: 'font-regular text-size-4 text-color-default',
-                medium: 'font-regular text-size-5 text-color-default',
-                large: 'font-regular text-size-6 text-color-default',
-            },
-            bodyAccent: {
-                small: 'font-medium text-size-4 text-color-default',
-                medium: 'font-medium text-size-5 text-color-default',
-                large: 'font-medium text-size-6 text-color-default',
-            },
-            helper: {
-                small: 'font-regular text-size-4 text-color-helper',
-                medium: 'font-regular text-size-5 text-color-helper',
-                large: 'font-regular text-size-6 text-color-helper',
-            },
-            caption: {
-                small: 'font-regular text-size-3 text-color-caption',
-                medium: 'font-regular text-size-4 text-color-caption',
-                large: 'font-regular text-size-5 text-color-caption',
-            },
-            link: {
-                small: 'font-medium text-size-4 underline text-color-primary',
-                medium: 'font-medium text-size-5 underline text-color-primary',
-                large: 'font-medium text-size-6 underline text-color-primary',
-            },
-            label: {
-                small: 'font-medium text-size-3 text-color-label',
-                medium: 'font-medium text-size-4 text-color-label',
-                large: 'font-medium text-size-5 text-color-label',
-            },
-            placeholder: {
-                small: 'font-regular text-size-4 text-color-placeholder',
-                medium: 'font-regular text-size-5 text-color-placeholder',
-                large: 'font-regular text-size-6 text-color-placeholder',
-            },
-            info: {
-                small: 'font-regular text-size-3 text-color-default',
-                medium: 'font-regular text-size-4 text-color-default',
-                large: 'font-regular text-size-5 text-color-default',
-            },
-            infoAccent: {
-                small: 'font-medium text-size-3 text-color-header',
-                medium: 'font-medium text-size-4 text-color-header',
-                large: 'font-medium text-size-5 text-color-header',
-            },
-        };
-        this.getTextClass = (variant, size) => {
-            const variantClasses = this.variantClassMap[variant];
-            if (typeof variantClasses === 'string') {
-                return variantClasses;
-            }
-            return variantClasses[size];
-        };
-        this.getOverflowClass = (overflow) => {
-            return overflow ? 'truncate' : '';
-        };
     }
+    /** Text content */
+    text;
+    /** Text variant */
+    variant = 'body';
+    /** Text size */
+    size = 'medium';
+    /** Text overflow behavior */
+    overflow = false;
+    variantClassMap = {
+        display: 'font-semibold text-size-12 text-color-header',
+        heading1: 'font-semibold text-size-7 text-color-header',
+        heading2: 'font-semibold text-size-6 text-color-header',
+        title1: {
+            small: 'font-semibold text-size-5 text-color-header',
+            medium: 'font-semibold text-size-6 text-color-header',
+            large: 'font-semibold text-size-7 text-color-header',
+        },
+        title2: {
+            small: 'font-semibold text-size-4 text-color-default',
+            medium: 'font-semibold text-size-5 text-color-default',
+            large: 'font-semibold text-size-6 text-color-default',
+        },
+        title3: {
+            small: 'font-semibold text-size-3 text-color-disabled',
+            medium: 'font-semibold text-size-4 text-color-disabled',
+            large: 'font-semibold text-size-5 text-color-disabled',
+        },
+        body: {
+            small: 'font-regular text-size-4 text-color-default',
+            medium: 'font-regular text-size-5 text-color-default',
+            large: 'font-regular text-size-6 text-color-default',
+        },
+        bodyAccent: {
+            small: 'font-medium text-size-4 text-color-default',
+            medium: 'font-medium text-size-5 text-color-default',
+            large: 'font-medium text-size-6 text-color-default',
+        },
+        helper: {
+            small: 'font-regular text-size-4 text-color-helper',
+            medium: 'font-regular text-size-5 text-color-helper',
+            large: 'font-regular text-size-6 text-color-helper',
+        },
+        caption: {
+            small: 'font-regular text-size-3 text-color-caption',
+            medium: 'font-regular text-size-4 text-color-caption',
+            large: 'font-regular text-size-5 text-color-caption',
+        },
+        link: {
+            small: 'font-medium text-size-4 underline text-color-primary',
+            medium: 'font-medium text-size-5 underline text-color-primary',
+            large: 'font-medium text-size-6 underline text-color-primary',
+        },
+        label: {
+            small: 'font-medium text-size-3 text-color-label',
+            medium: 'font-medium text-size-4 text-color-label',
+            large: 'font-medium text-size-5 text-color-label',
+        },
+        placeholder: {
+            small: 'font-regular text-size-4 text-color-placeholder',
+            medium: 'font-regular text-size-5 text-color-placeholder',
+            large: 'font-regular text-size-6 text-color-placeholder',
+        },
+        info: {
+            small: 'font-regular text-size-3 text-color-default',
+            medium: 'font-regular text-size-4 text-color-default',
+            large: 'font-regular text-size-5 text-color-default',
+        },
+        infoAccent: {
+            small: 'font-medium text-size-3 text-color-header',
+            medium: 'font-medium text-size-4 text-color-header',
+            large: 'font-medium text-size-5 text-color-header',
+        },
+    };
+    getTextClass = (variant, size) => {
+        const variantClasses = this.variantClassMap[variant];
+        if (typeof variantClasses === 'string') {
+            return variantClasses;
+        }
+        return variantClasses[size];
+    };
+    getOverflowClass = (overflow) => {
+        return overflow ? 'truncate' : '';
+    };
     render() {
-        var _a;
         const Tag = variantTagMap[this.variant];
         const variantClass = this.getTextClass(this.variant, this.size);
-        const overflowClass = this.getOverflowClass((_a = this.overflow) !== null && _a !== void 0 ? _a : false);
+        const overflowClass = this.getOverflowClass(this.overflow ?? false);
         return (h(Tag, { key: '9092013eaaba071fe3a198b91462ffaa3b71cc2c', class: classNames('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: 'f7f07d4d2484df0b8c4c2a36b9499c837c2a6c32' }, this.text)));
     }
     static get style() { return textCss; }

package/dist/components/bcm-text.js.map

@@ -1 +1 @@
-{"file":"bcm-text.js","mappings":"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","names":["BcmText","__stencil_proxyCustomElement","HTMLElement","cs"],"sources":["src/components/text/text.utils.ts","src/components/text/text.scss?tag=bcm-text&encapsulation=shadow","src/components/text/text.component.tsx"],"sourcesContent":["import { TextVariant, TextTag } from './text.types';\n\nexport const variantTagMap: Record<TextVariant, TextTag> = {\n  display: 'h1',\n  heading1: 'h2',\n  heading2: 'h3',\n  title1: 'h4',\n  title2: 'h5',\n  title3: 'h6',\n  body: 'p',\n  bodyAccent: 'p',\n  helper: 'p',\n  caption: 'p',\n  label: 'label',\n  placeholder: 'p',\n  link: 'a',\n  info: 'p',\n  infoAccent: 'p',\n};\n","","import { Component, h, Prop } from '@stencil/core';\nimport cs from 'classnames';\nimport { TextVariant, TextSize } from './text.types';\nimport { variantTagMap } from './text.utils';\n\n@Component({\n  tag: 'bcm-text',\n  styleUrl: 'text.scss',\n  shadow: true,\n})\nexport class BcmText {\n  /** Text content */\n  @Prop()\n  text: string;\n\n  /** Text variant */\n  @Prop()\n  variant: TextVariant = 'body';\n\n  /** Text size */\n  @Prop()\n  size: TextSize = 'medium';\n\n  /** Text overflow behavior */\n  @Prop()\n  overflow: boolean = false;\n\n  private readonly variantClassMap = {\n    display: 'font-semibold text-size-12 text-color-header',\n    heading1: 'font-semibold text-size-7 text-color-header',\n    heading2: 'font-semibold text-size-6 text-color-header',\n    title1: {\n      small: 'font-semibold text-size-5 text-color-header',\n      medium: 'font-semibold text-size-6 text-color-header',\n      large: 'font-semibold text-size-7 text-color-header',\n    },\n    title2: {\n      small: 'font-semibold text-size-4 text-color-default',\n      medium: 'font-semibold text-size-5 text-color-default',\n      large: 'font-semibold text-size-6 text-color-default',\n    },\n    title3: {\n      small: 'font-semibold text-size-3 text-color-disabled',\n      medium: 'font-semibold text-size-4 text-color-disabled',\n      large: 'font-semibold text-size-5 text-color-disabled',\n    },\n    body: {\n      small: 'font-regular text-size-4 text-color-default',\n      medium: 'font-regular text-size-5 text-color-default',\n      large: 'font-regular text-size-6 text-color-default',\n    },\n    bodyAccent: {\n      small: 'font-medium text-size-4 text-color-default',\n      medium: 'font-medium text-size-5 text-color-default',\n      large: 'font-medium text-size-6 text-color-default',\n    },\n    helper: {\n      small: 'font-regular text-size-4 text-color-helper',\n      medium: 'font-regular text-size-5 text-color-helper',\n      large: 'font-regular text-size-6 text-color-helper',\n    },\n    caption: {\n      small: 'font-regular text-size-3 text-color-caption',\n      medium: 'font-regular text-size-4 text-color-caption',\n      large: 'font-regular text-size-5 text-color-caption',\n    },\n    link: {\n      small: 'font-medium text-size-4 underline text-color-primary',\n      medium: 'font-medium text-size-5 underline text-color-primary',\n      large: 'font-medium text-size-6 underline text-color-primary',\n    },\n    label: {\n      small: 'font-medium text-size-3 text-color-label',\n      medium: 'font-medium text-size-4 text-color-label',\n      large: 'font-medium text-size-5 text-color-label',\n    },\n    placeholder: {\n      small: 'font-regular text-size-4 text-color-placeholder',\n      medium: 'font-regular text-size-5 text-color-placeholder',\n      large: 'font-regular text-size-6 text-color-placeholder',\n    },\n    info: {\n      small: 'font-regular text-size-3 text-color-default',\n      medium: 'font-regular text-size-4 text-color-default',\n      large: 'font-regular text-size-5 text-color-default',\n    },\n    infoAccent: {\n      small: 'font-medium text-size-3 text-color-header',\n      medium: 'font-medium text-size-4 text-color-header',\n      large: 'font-medium text-size-5 text-color-header',\n    },\n  } as const;\n\n  private getTextClass = (variant: TextVariant, size: TextSize): string => {\n    const variantClasses = this.variantClassMap[variant];\n\n    if (typeof variantClasses === 'string') {\n      return variantClasses;\n    }\n\n    return variantClasses[size];\n  };\n\n  private getOverflowClass = (overflow: boolean): string => {\n    return overflow ? 'truncate' : '';\n  };\n\n  render() {\n    const Tag = variantTagMap[this.variant];\n    const variantClass = this.getTextClass(this.variant, this.size);\n    const overflowClass = this.getOverflowClass(this.overflow ?? false);\n\n    return (\n      <Tag class={cs('bcm-text appearance-none m-0 p-0', variantClass, overflowClass)} part=\"text\">\n        <slot>{this.text}</slot>\n      </Tag>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-text.js","mappings":"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","names":["BcmText","__stencil_proxyCustomElement","HTMLElement","cs"],"sources":["src/components/text/text.utils.ts","src/components/text/text.scss?tag=bcm-text&encapsulation=shadow","src/components/text/text.component.tsx"],"sourcesContent":["import { TextVariant, TextTag } from './text.types';\n\nexport const variantTagMap: Record<TextVariant, TextTag> = {\n  display: 'h1',\n  heading1: 'h2',\n  heading2: 'h3',\n  title1: 'h4',\n  title2: 'h5',\n  title3: 'h6',\n  body: 'p',\n  bodyAccent: 'p',\n  helper: 'p',\n  caption: 'p',\n  label: 'label',\n  placeholder: 'p',\n  link: 'a',\n  info: 'p',\n  infoAccent: 'p',\n};\n","","import { Component, h, Prop } from '@stencil/core';\nimport cs from 'classnames';\nimport { TextVariant, TextSize } from './text.types';\nimport { variantTagMap } from './text.utils';\n\n@Component({\n  tag: 'bcm-text',\n  styleUrl: 'text.scss',\n  shadow: true,\n})\nexport class BcmText {\n  /** Text content */\n  @Prop()\n  text: string;\n\n  /** Text variant */\n  @Prop()\n  variant: TextVariant = 'body';\n\n  /** Text size */\n  @Prop()\n  size: TextSize = 'medium';\n\n  /** Text overflow behavior */\n  @Prop()\n  overflow: boolean = false;\n\n  private readonly variantClassMap = {\n    display: 'font-semibold text-size-12 text-color-header',\n    heading1: 'font-semibold text-size-7 text-color-header',\n    heading2: 'font-semibold text-size-6 text-color-header',\n    title1: {\n      small: 'font-semibold text-size-5 text-color-header',\n      medium: 'font-semibold text-size-6 text-color-header',\n      large: 'font-semibold text-size-7 text-color-header',\n    },\n    title2: {\n      small: 'font-semibold text-size-4 text-color-default',\n      medium: 'font-semibold text-size-5 text-color-default',\n      large: 'font-semibold text-size-6 text-color-default',\n    },\n    title3: {\n      small: 'font-semibold text-size-3 text-color-disabled',\n      medium: 'font-semibold text-size-4 text-color-disabled',\n      large: 'font-semibold text-size-5 text-color-disabled',\n    },\n    body: {\n      small: 'font-regular text-size-4 text-color-default',\n      medium: 'font-regular text-size-5 text-color-default',\n      large: 'font-regular text-size-6 text-color-default',\n    },\n    bodyAccent: {\n      small: 'font-medium text-size-4 text-color-default',\n      medium: 'font-medium text-size-5 text-color-default',\n      large: 'font-medium text-size-6 text-color-default',\n    },\n    helper: {\n      small: 'font-regular text-size-4 text-color-helper',\n      medium: 'font-regular text-size-5 text-color-helper',\n      large: 'font-regular text-size-6 text-color-helper',\n    },\n    caption: {\n      small: 'font-regular text-size-3 text-color-caption',\n      medium: 'font-regular text-size-4 text-color-caption',\n      large: 'font-regular text-size-5 text-color-caption',\n    },\n    link: {\n      small: 'font-medium text-size-4 underline text-color-primary',\n      medium: 'font-medium text-size-5 underline text-color-primary',\n      large: 'font-medium text-size-6 underline text-color-primary',\n    },\n    label: {\n      small: 'font-medium text-size-3 text-color-label',\n      medium: 'font-medium text-size-4 text-color-label',\n      large: 'font-medium text-size-5 text-color-label',\n    },\n    placeholder: {\n      small: 'font-regular text-size-4 text-color-placeholder',\n      medium: 'font-regular text-size-5 text-color-placeholder',\n      large: 'font-regular text-size-6 text-color-placeholder',\n    },\n    info: {\n      small: 'font-regular text-size-3 text-color-default',\n      medium: 'font-regular text-size-4 text-color-default',\n      large: 'font-regular text-size-5 text-color-default',\n    },\n    infoAccent: {\n      small: 'font-medium text-size-3 text-color-header',\n      medium: 'font-medium text-size-4 text-color-header',\n      large: 'font-medium text-size-5 text-color-header',\n    },\n  } as const;\n\n  private getTextClass = (variant: TextVariant, size: TextSize): string => {\n    const variantClasses = this.variantClassMap[variant];\n\n    if (typeof variantClasses === 'string') {\n      return variantClasses;\n    }\n\n    return variantClasses[size];\n  };\n\n  private getOverflowClass = (overflow: boolean): string => {\n    return overflow ? 'truncate' : '';\n  };\n\n  render() {\n    const Tag = variantTagMap[this.variant];\n    const variantClass = this.getTextClass(this.variant, this.size);\n    const overflowClass = this.getOverflowClass(this.overflow ?? false);\n\n    return (\n      <Tag class={cs('bcm-text appearance-none m-0 p-0', variantClass, overflowClass)} part=\"text\">\n        <slot>{this.text}</slot>\n      </Tag>\n    );\n  }\n}\n"],"version":3}