@trendyol/baklava 2.0.0-beta.33 → 2.0.0-beta.34

package/dist/baklava.js

@@ -1,2 +1,2 @@
-import{a as l}from"./chunk-YZQVPLSP.js";import{a as d}from"./chunk-OJVJFWT3.js";import{a as n}from"./chunk-RMXRDQI4.js";import{a as m}from"./chunk-KWTSWXUL.js";import{a as s}from"./chunk-C5HFLPOK.js";import{a as f}from"./chunk-LZHSSAHO.js";import{a as p}from"./chunk-IDG5M2QP.js";import{a as u}from"./chunk-6WS7INIM.js";import"./chunk-VNGNBBSS.js";import{a as B}from"./chunk-V67B4ADE.js";import{a as r}from"./chunk-54XXQVFL.js";import{a}from"./chunk-IB7GARWV.js";import"./chunk-2TVOKUHE.js";import"./chunk-ENFFFE4I.js";import{a as x}from"./chunk-N6FF6F3Y.js";import"./chunk-KQBKSEYJ.js";import{a as t,b as o,c as e}from"./chunk-WXJKPVRA.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import"./chunk-HG7OBTQS.js";import"./chunk-NZ3RGSR6.js";export{B as BlAlert,r as BlBadge,a as BlButton,x as BlCheckbox,e as BlIcon,l as BlInput,d as BlProgressIndicator,n as BlSelect,m as BlSelectOption,f as BlTab,s as BlTabGroup,p as BlTabPanel,u as BlTooltip,o as getIconPath,t as setIconPath};
+import{a as l}from"./chunk-YZQVPLSP.js";import{a as d}from"./chunk-OJVJFWT3.js";import{a as n}from"./chunk-7SDGSJ2P.js";import{a as m}from"./chunk-KWTSWXUL.js";import{a as s}from"./chunk-C5HFLPOK.js";import{a as f}from"./chunk-EX6STMCI.js";import{a as p}from"./chunk-IDG5M2QP.js";import{a as u}from"./chunk-6WS7INIM.js";import"./chunk-VNGNBBSS.js";import{a as B}from"./chunk-SI4AOUS5.js";import{a as r}from"./chunk-54XXQVFL.js";import{a}from"./chunk-SRQS24UV.js";import"./chunk-2TVOKUHE.js";import"./chunk-ENFFFE4I.js";import{a as x}from"./chunk-N6FF6F3Y.js";import"./chunk-KQBKSEYJ.js";import{a as t,b as o,c as e}from"./chunk-WXJKPVRA.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import"./chunk-HG7OBTQS.js";import"./chunk-NZ3RGSR6.js";export{B as BlAlert,r as BlBadge,a as BlButton,x as BlCheckbox,e as BlIcon,l as BlInput,d as BlProgressIndicator,n as BlSelect,m as BlSelectOption,f as BlTab,s as BlTabGroup,p as BlTabPanel,u as BlTooltip,o as getIconPath,t as setIconPath};
 //# sourceMappingURL=baklava.js.map

package/dist/{chunk-RMXRDQI4.js → chunk-7SDGSJ2P.js}

@@ -2,9 +2,9 @@ import{b as f,c as m,e as _,f as g,g as x}from"./chunk-VNGNBBSS.js";import{a as
       ${this._selectedOptions.map(y=>i`<li>${y.text}</li>`)}
     </ul>`,t=this._additionalSelectedOptionCount?i`<span>+${this._additionalSelectedOptionCount}</span>`:null,s=i`<bl-button
         class="remove-all"
-        variant="secondary"
         size="small"
-        kind="text"
+        variant="tertiary"
+        kind="neutral"
         icon="close"
         @click=${this._onClickRemove}></bl-button>`,p=this._showPlaceHolder?i`<span class="placeholder">${this.placeholder}</span>`:"";return i`<div
       class="select-input"
@@ -32,4 +32,4 @@ import{b as f,c as m,e as _,f as g,g as x}from"./chunk-VNGNBBSS.js";import{a as
     >
       ${s} ${this.inputTemplate()} ${this.menuTemplate()} ${t} ${e}
     </div> `}get _showPlaceHolder(){return this.label&&!this.labelFixed?!this._selectedOptions.length&&this._isPopoverOpen:!this._selectedOptions.length}_onClickSelectInput(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){this._onBlSelect(this._selectedOptions)}_handleSingleSelect(e){let t=this._connectedOptions.find(s=>s.value!==e.value&&s.selected);t&&(t.selected=!1),this._selectedOptions=[e],this._handleSelectEvent(),this._isPopoverOpen=!1}_handleMultipleSelect(e){let{value:t}=e;e.selected?this._selectedOptions=[...this._selectedOptions,e]:this._selectedOptions=this._selectedOptions.filter(s=>s.value!==t),this._handleSelectEvent()}_handleSelectOptionEvent(e){let t=e.detail;this.multiple?this._handleMultipleSelect(t):this._handleSingleSelect(t)}_onClickRemove(e){e.stopPropagation(),this._connectedOptions.filter(t=>t.selected).forEach(t=>{t.selected=!1}),this._selectedOptions=[],this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple)return;let e=0;for(let t of this._selectedOptionsItems)if(t.offsetLeft<this._selectedOptionsContainer.offsetWidth)e++;else break;this._additionalSelectedOptionCount=this._selectedOptionsItems.length-e}_checkRequired(){this.required&&(this._isInvalid=this._selectedOptions.length===0)}updated(e){e.has("_selectedOptions")&&e.get("_selectedOptions")instanceof Array?(this._checkRequired(),this._checkAdditionalItemCount()):e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this._connectedOptions.forEach(t=>{t.multiple=this.multiple,t.selected=!1}),this._selectedOptions=[])}registerOption(e){if(this._connectedOptions.push(e),e.selected){let t={value:e.value,text:e.textContent,selected:e.selected};this.multiple?this._selectedOptions=[...this._selectedOptions,t]:this._selectedOptions=[t],this.requestUpdate()}}unregisterOption(e){this._connectedOptions.splice(this._connectedOptions.indexOf(e),1),this._selectedOptions=this._selectedOptions.filter(t=>t.value!==e.value)}};l([n({})],o.prototype,"label",2),l([n({})],o.prototype,"placeholder",2),l([n({type:String,reflect:!0})],o.prototype,"size",2),l([n({type:Boolean})],o.prototype,"required",2),l([n({type:Boolean})],o.prototype,"disabled",2),l([n({type:Boolean})],o.prototype,"multiple",2),l([n({type:Boolean,attribute:"label-fixed"})],o.prototype,"labelFixed",2),l([n({type:String,attribute:"help-text"})],o.prototype,"helpText",2),l([n({type:String,attribute:"invalid-text"})],o.prototype,"customInvalidText",2),l([r()],o.prototype,"_isPopoverOpen",2),l([r()],o.prototype,"_selectedOptions",2),l([r()],o.prototype,"_additionalSelectedOptionCount",2),l([r()],o.prototype,"_isInvalid",2),l([a(".selected-options")],o.prototype,"_selectedOptionsContainer",2),l([h(".selected-options li")],o.prototype,"_selectedOptionsItems",2),l([a(".popover")],o.prototype,"_popover",2),l([a(".select-input")],o.prototype,"_selectInput",2),l([u("bl-select")],o.prototype,"_onBlSelect",2),o=l([v("bl-select")],o);export{o as a};
-//# sourceMappingURL=chunk-RMXRDQI4.js.map
+//# sourceMappingURL=chunk-7SDGSJ2P.js.map

package/dist/{chunk-RMXRDQI4.js.map → chunk-7SDGSJ2P.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/select/bl-select.css", "../src/components/select/bl-select.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:#fff;--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:1;--menu-height:250px}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}.placeholder{color:var(--placeholder-color)}:host([disabled]) .placeholder{--placeholder-color:var(--bl-color-content-passive)}.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-color-danger)}.select-input{display:flex;align-items:center;justify-content:space-between;cursor:pointer;outline:0;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-border-radius-s);color:var(--text-color);user-select:none}.remove-all{display:none}.remove-all::after{content:'';position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-content-passive)}.select-open .select-input{border:solid 1px var(--border-focus-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;margin:0;list-style:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:', '}:host([disabled]) .selected-options li{color:var(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:fixed;border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--z-index);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}label{position:absolute;display:flex;align-items:center;top:var(--padding-vertical);left:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]) .select-wrapper{padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);padding:0}.help-text,.invalid-text{margin:var(--bl-size-3xs) 0 0 var(--bl-size-2xs);font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal)}.help-text{color:var(--bl-color-content-secondary)}.invalid-text{color:var(--bl-color-danger)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, PropertyValues } from 'lit';\nimport { customElement, property, state, query, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { computePosition, flip, MiddlewareArguments, offset, size, autoUpdate } from '@floating-ui/dom';\nimport style from '../select/bl-select.css';\nimport '../icon/bl-icon';\nimport '../select/option/bl-select-option';\nimport type BlSelectOption from './option/bl-select-option';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nexport interface ISelectOption {\n  value: string;\n  text: string;\n  selected: boolean;\n}\n\nexport type SelectSize = 'medium' | 'large' | 'small';\n\nexport type CleanUpFunction = () => void;\n\n@customElement('bl-select')\nexport default class BlSelect extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /* Declare reactive properties */\n  /**\n   * Sets the label value\n   */\n  @property({})\n  label?: string;\n\n  /**\n   * Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder.\n   */\n  @property({})\n  placeholder?: string;\n\n  /**\n   * Sets the size value. Select component's height value will be changed accordingly\n   */\n  @property({ type: String, reflect: true })\n  size: SelectSize = 'medium';\n\n  /**\n   * When option is not selected, shows component in error state\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Shows the component in disabled state.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Allows multiple options to be selected\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Makes label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: 'label-fixed' })\n  labelFixed = false;\n\n  /**\n   * Adds help text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText?: string;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: 'invalid-text' })\n  customInvalidText?: string;\n\n  /* Declare internal reactive properties */\n  @state()\n  private _isPopoverOpen = false;\n\n  @state()\n  private _selectedOptions: ISelectOption[] = [];\n\n  @state()\n  private _additionalSelectedOptionCount = 0;\n\n  @state()\n  private _isInvalid = false;\n\n  @query('.selected-options')\n  private _selectedOptionsContainer!: HTMLElement;\n\n  @queryAll('.selected-options li')\n  private _selectedOptionsItems!: Array<HTMLElement>;\n\n  @query('.popover')\n  private _popover: HTMLElement;\n\n  @query('.select-input')\n  private _selectInput: HTMLElement;\n\n  @event('bl-select') private _onBlSelect: EventDispatcher<ISelectOption[]>;\n\n  private _connectedOptions: BlSelectOption[] = [];\n\n  private _cleanUpPopover: CleanUpFunction | null = null;\n\n  get options() {\n    return this._connectedOptions;\n  }\n\n  get isPopoverOpen() {\n    return this._isPopoverOpen;\n  }\n\n  get selectedOptions() {\n    return this._selectedOptions;\n  }\n\n  get additionalSelectedOptionCount() {\n    return this._additionalSelectedOptionCount;\n  }\n\n  get isInvalid() {\n    return this._isInvalid;\n  }\n\n  open() {\n    this._isPopoverOpen = true;\n    this._setupPopover();\n    document.addEventListener('click', this._clickOutsideHandler);\n  }\n\n  close() {\n    this._isPopoverOpen = false;\n    this._cleanUpPopover && this._cleanUpPopover();\n    document.removeEventListener('click', this._clickOutsideHandler);\n  }\n\n  private _clickOutsideHandler = (event: MouseEvent) => {\n    const eventPath = event.composedPath() as HTMLElement[];\n\n    if (!eventPath?.find(el => el.tagName === 'BL-SELECT')?.contains(this)) {\n      this.close();\n      this._checkRequired();\n    }\n  };\n\n  private _setupPopover() {\n    this._cleanUpPopover = autoUpdate(this._selectInput, this._popover, () => {\n      computePosition(this._selectInput, this._popover, {\n        placement: 'bottom',\n        strategy: 'fixed',\n        middleware: [\n          flip(),\n          offset(8),\n          size({\n            apply(args: MiddlewareArguments) {\n              Object.assign(args.elements.floating.style, {\n                width: `${args.elements.reference.getBoundingClientRect().width}px`,\n              });\n            },\n          }),\n        ],\n      }).then(({ x, y }) => {\n        this._popover.style.setProperty('--left', `${x}px`);\n        this._popover.style.setProperty('--top', `${y}px`);\n      });\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this._cleanUpPopover && this._cleanUpPopover();\n  }\n\n  private inputTemplate() {\n    const inputSelectedOptions = html`<ul class=\"selected-options\">\n      ${this._selectedOptions.map(item => html`<li>${item.text}</li>`)}\n    </ul>`;\n    const _selectedItemCount = this._additionalSelectedOptionCount\n      ? html`<span>+${this._additionalSelectedOptionCount}</span>`\n      : null;\n    const removeButton = html`<bl-button\n        class=\"remove-all\"\n        variant=\"secondary\"\n        size=\"small\"\n        kind=\"text\"\n        icon=\"close\"\n        @click=${this._onClickRemove}></bl-button>`;\n    const placeholder = this._showPlaceHolder\n      ? html`<span class=\"placeholder\">${this.placeholder}</span>`\n      : '';\n\n    return html`<div\n      class=\"select-input\"\n      ?disabled=${this.disabled}\n      @click=${this._onClickSelectInput}\n    >\n      ${placeholder} ${inputSelectedOptions} ${_selectedItemCount}\n      <div class=\"actions\">\n        ${removeButton}\n        <bl-icon\n          class=\"dropdown-icon open\"\n          name=\"arrow_up\"\n        ></bl-icon>\n\n        <bl-icon\n          class=\"dropdown-icon closed\"\n          name=\"arrow_down\"\n        ></bl-icon>\n      </div>\n    </div>`;\n  }\n\n  private menuTemplate() {\n    return html`<div class=\"popover\" @bl-select-option=${this._handleSelectOptionEvent}>\n      <slot></slot>\n    </div>`;\n  }\n\n  render() {\n    const invalidMessage = this._isInvalid && this.customInvalidText\n      ? html`<p class=\"invalid-text\">${this.customInvalidText}</p>` : ``;\n    const helpMessage = this.helpText && !invalidMessage\n      ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n    const label = this.label\n      ? html`<label>${this.label}</label>` : '';\n\n    return html`<div\n      class=${classMap({\n      'select-wrapper': true,\n      'select-open': this._isPopoverOpen,\n      'selected': this._selectedOptions.length > 0,\n      'invalid': this._isInvalid,\n    })}\n      tabindex=\"-1\"\n    >\n      ${label} ${this.inputTemplate()} ${this.menuTemplate()} ${helpMessage} ${invalidMessage}\n    </div> `;\n  }\n\n  private get _showPlaceHolder() {\n    if (this.label && !this.labelFixed) {\n      return !this._selectedOptions.length && this._isPopoverOpen;\n    }\n    return !this._selectedOptions.length;\n  }\n\n  private _onClickSelectInput() {\n    this._isPopoverOpen ? this.close() : this.open();\n  }\n\n  private _handleSelectEvent() {\n    this._onBlSelect(this._selectedOptions);\n  }\n\n  private _handleSingleSelect(optionItem: ISelectOption) {\n    const oldItem = this._connectedOptions.find(option => option.value !== optionItem.value && option.selected);\n\n    if (oldItem) {\n      oldItem.selected = false;\n    }\n\n    this._selectedOptions = [optionItem];\n    this._handleSelectEvent();\n    this._isPopoverOpen = false;\n  }\n\n  private _handleMultipleSelect(optionItem: ISelectOption) {\n    const { value } = optionItem;\n\n    if (!optionItem.selected) {\n      this._selectedOptions = this._selectedOptions.filter(item => item.value !== value);\n    } else {\n      this._selectedOptions = [...this._selectedOptions, optionItem];\n    }\n\n    this._handleSelectEvent();\n  }\n\n  private _handleSelectOptionEvent(e: CustomEvent) {\n    const optionItem = e.detail as ISelectOption;\n\n    if (this.multiple) {\n      this._handleMultipleSelect(optionItem);\n    } else {\n      this._handleSingleSelect(optionItem);\n    }\n  }\n\n  private _onClickRemove(e: MouseEvent) {\n    e.stopPropagation();\n\n    this._connectedOptions\n      .filter(option => option.selected)\n      .forEach(option => {\n        option.selected = false;\n      });\n\n    this._selectedOptions = [];\n    this._handleSelectEvent();\n  }\n\n  private _checkAdditionalItemCount() {\n    if (!this.multiple) return;\n\n    let visibleItems = 0;\n    for(const value of this._selectedOptionsItems) {\n      if (value.offsetLeft < this._selectedOptionsContainer.offsetWidth) {\n        visibleItems++;\n      } else {\n        break;\n      }\n    }\n\n    this._additionalSelectedOptionCount = this._selectedOptionsItems.length - visibleItems;\n  }\n\n  private _checkRequired() {\n    if (this.required) {\n      this._isInvalid = this._selectedOptions.length === 0;\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues) {\n    if (\n      _changedProperties.has('_selectedOptions') &&\n      _changedProperties.get('_selectedOptions') instanceof Array\n    ) {\n      this._checkRequired();\n      this._checkAdditionalItemCount();\n    } else if (\n      _changedProperties.has('multiple') &&\n      typeof _changedProperties.get('multiple') === 'boolean'\n    ) {\n      this._connectedOptions.forEach(option => {\n        option.multiple = this.multiple;\n        option.selected = false;\n      });\n      this._selectedOptions = [];\n    }\n  }\n\n  /**\n   * This method is used by `bl-select-option` component to register itself to bl-select.\n   * @param option BlSelectOption reference to be registered\n   */\n  registerOption(option: BlSelectOption) {\n    this._connectedOptions.push(option);\n\n    if (option.selected) {\n      const optionItem = {\n        value: option.value,\n        text: option.textContent,\n        selected: option.selected,\n      } as ISelectOption;\n\n      if (this.multiple) {\n        this._selectedOptions = [...this._selectedOptions, optionItem];\n      } else {\n        this._selectedOptions = [optionItem];\n      }\n\n      this.requestUpdate();\n    }\n  }\n\n  /**\n   * This method is used by `bl-select-option` component to unregister itself from bl-select.\n   * @param option BlSelectOption reference to be unregistered\n   */\n  unregisterOption(option: BlSelectOption) {\n    this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n    this._selectedOptions = this._selectedOptions.filter(item => item.value !== option.value);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-select': BlSelect;\n  }\n}\n"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:#fff;--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:1;--menu-height:250px}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}.placeholder{color:var(--placeholder-color)}:host([disabled]) .placeholder{--placeholder-color:var(--bl-color-content-passive)}.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-color-danger)}.select-input{display:flex;align-items:center;justify-content:space-between;cursor:pointer;outline:0;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-border-radius-s);color:var(--text-color);user-select:none}.remove-all{display:none}.remove-all::after{content:'';position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-content-passive)}.select-open .select-input{border:solid 1px var(--border-focus-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;margin:0;list-style:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:', '}:host([disabled]) .selected-options li{color:var(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:fixed;border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--z-index);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}label{position:absolute;display:flex;align-items:center;top:var(--padding-vertical);left:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]) .select-wrapper{padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);padding:0}.help-text,.invalid-text{margin:var(--bl-size-3xs) 0 0 var(--bl-size-2xs);font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal)}.help-text{color:var(--bl-color-content-secondary)}.invalid-text{color:var(--bl-color-danger)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, PropertyValues } from 'lit';\nimport { customElement, property, state, query, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { computePosition, flip, MiddlewareArguments, offset, size, autoUpdate } from '@floating-ui/dom';\nimport style from '../select/bl-select.css';\nimport '../icon/bl-icon';\nimport '../select/option/bl-select-option';\nimport type BlSelectOption from './option/bl-select-option';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nexport interface ISelectOption {\n  value: string;\n  text: string;\n  selected: boolean;\n}\n\nexport type SelectSize = 'medium' | 'large' | 'small';\n\nexport type CleanUpFunction = () => void;\n\n@customElement('bl-select')\nexport default class BlSelect extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /* Declare reactive properties */\n  /**\n   * Sets the label value\n   */\n  @property({})\n  label?: string;\n\n  /**\n   * Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder.\n   */\n  @property({})\n  placeholder?: string;\n\n  /**\n   * Sets the size value. Select component's height value will be changed accordingly\n   */\n  @property({ type: String, reflect: true })\n  size: SelectSize = 'medium';\n\n  /**\n   * When option is not selected, shows component in error state\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Shows the component in disabled state.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Allows multiple options to be selected\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Makes label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: 'label-fixed' })\n  labelFixed = false;\n\n  /**\n   * Adds help text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText?: string;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: 'invalid-text' })\n  customInvalidText?: string;\n\n  /* Declare internal reactive properties */\n  @state()\n  private _isPopoverOpen = false;\n\n  @state()\n  private _selectedOptions: ISelectOption[] = [];\n\n  @state()\n  private _additionalSelectedOptionCount = 0;\n\n  @state()\n  private _isInvalid = false;\n\n  @query('.selected-options')\n  private _selectedOptionsContainer!: HTMLElement;\n\n  @queryAll('.selected-options li')\n  private _selectedOptionsItems!: Array<HTMLElement>;\n\n  @query('.popover')\n  private _popover: HTMLElement;\n\n  @query('.select-input')\n  private _selectInput: HTMLElement;\n\n  @event('bl-select') private _onBlSelect: EventDispatcher<ISelectOption[]>;\n\n  private _connectedOptions: BlSelectOption[] = [];\n\n  private _cleanUpPopover: CleanUpFunction | null = null;\n\n  get options() {\n    return this._connectedOptions;\n  }\n\n  get isPopoverOpen() {\n    return this._isPopoverOpen;\n  }\n\n  get selectedOptions() {\n    return this._selectedOptions;\n  }\n\n  get additionalSelectedOptionCount() {\n    return this._additionalSelectedOptionCount;\n  }\n\n  get isInvalid() {\n    return this._isInvalid;\n  }\n\n  open() {\n    this._isPopoverOpen = true;\n    this._setupPopover();\n    document.addEventListener('click', this._clickOutsideHandler);\n  }\n\n  close() {\n    this._isPopoverOpen = false;\n    this._cleanUpPopover && this._cleanUpPopover();\n    document.removeEventListener('click', this._clickOutsideHandler);\n  }\n\n  private _clickOutsideHandler = (event: MouseEvent) => {\n    const eventPath = event.composedPath() as HTMLElement[];\n\n    if (!eventPath?.find(el => el.tagName === 'BL-SELECT')?.contains(this)) {\n      this.close();\n      this._checkRequired();\n    }\n  };\n\n  private _setupPopover() {\n    this._cleanUpPopover = autoUpdate(this._selectInput, this._popover, () => {\n      computePosition(this._selectInput, this._popover, {\n        placement: 'bottom',\n        strategy: 'fixed',\n        middleware: [\n          flip(),\n          offset(8),\n          size({\n            apply(args: MiddlewareArguments) {\n              Object.assign(args.elements.floating.style, {\n                width: `${args.elements.reference.getBoundingClientRect().width}px`,\n              });\n            },\n          }),\n        ],\n      }).then(({ x, y }) => {\n        this._popover.style.setProperty('--left', `${x}px`);\n        this._popover.style.setProperty('--top', `${y}px`);\n      });\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this._cleanUpPopover && this._cleanUpPopover();\n  }\n\n  private inputTemplate() {\n    const inputSelectedOptions = html`<ul class=\"selected-options\">\n      ${this._selectedOptions.map(item => html`<li>${item.text}</li>`)}\n    </ul>`;\n    const _selectedItemCount = this._additionalSelectedOptionCount\n      ? html`<span>+${this._additionalSelectedOptionCount}</span>`\n      : null;\n    const removeButton = html`<bl-button\n        class=\"remove-all\"\n        size=\"small\"\n        variant=\"tertiary\"\n        kind=\"neutral\"\n        icon=\"close\"\n        @click=${this._onClickRemove}></bl-button>`;\n    const placeholder = this._showPlaceHolder\n      ? html`<span class=\"placeholder\">${this.placeholder}</span>`\n      : '';\n\n    return html`<div\n      class=\"select-input\"\n      ?disabled=${this.disabled}\n      @click=${this._onClickSelectInput}\n    >\n      ${placeholder} ${inputSelectedOptions} ${_selectedItemCount}\n      <div class=\"actions\">\n        ${removeButton}\n        <bl-icon\n          class=\"dropdown-icon open\"\n          name=\"arrow_up\"\n        ></bl-icon>\n\n        <bl-icon\n          class=\"dropdown-icon closed\"\n          name=\"arrow_down\"\n        ></bl-icon>\n      </div>\n    </div>`;\n  }\n\n  private menuTemplate() {\n    return html`<div class=\"popover\" @bl-select-option=${this._handleSelectOptionEvent}>\n      <slot></slot>\n    </div>`;\n  }\n\n  render() {\n    const invalidMessage = this._isInvalid && this.customInvalidText\n      ? html`<p class=\"invalid-text\">${this.customInvalidText}</p>` : ``;\n    const helpMessage = this.helpText && !invalidMessage\n      ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n    const label = this.label\n      ? html`<label>${this.label}</label>` : '';\n\n    return html`<div\n      class=${classMap({\n      'select-wrapper': true,\n      'select-open': this._isPopoverOpen,\n      'selected': this._selectedOptions.length > 0,\n      'invalid': this._isInvalid,\n    })}\n      tabindex=\"-1\"\n    >\n      ${label} ${this.inputTemplate()} ${this.menuTemplate()} ${helpMessage} ${invalidMessage}\n    </div> `;\n  }\n\n  private get _showPlaceHolder() {\n    if (this.label && !this.labelFixed) {\n      return !this._selectedOptions.length && this._isPopoverOpen;\n    }\n    return !this._selectedOptions.length;\n  }\n\n  private _onClickSelectInput() {\n    this._isPopoverOpen ? this.close() : this.open();\n  }\n\n  private _handleSelectEvent() {\n    this._onBlSelect(this._selectedOptions);\n  }\n\n  private _handleSingleSelect(optionItem: ISelectOption) {\n    const oldItem = this._connectedOptions.find(option => option.value !== optionItem.value && option.selected);\n\n    if (oldItem) {\n      oldItem.selected = false;\n    }\n\n    this._selectedOptions = [optionItem];\n    this._handleSelectEvent();\n    this._isPopoverOpen = false;\n  }\n\n  private _handleMultipleSelect(optionItem: ISelectOption) {\n    const { value } = optionItem;\n\n    if (!optionItem.selected) {\n      this._selectedOptions = this._selectedOptions.filter(item => item.value !== value);\n    } else {\n      this._selectedOptions = [...this._selectedOptions, optionItem];\n    }\n\n    this._handleSelectEvent();\n  }\n\n  private _handleSelectOptionEvent(e: CustomEvent) {\n    const optionItem = e.detail as ISelectOption;\n\n    if (this.multiple) {\n      this._handleMultipleSelect(optionItem);\n    } else {\n      this._handleSingleSelect(optionItem);\n    }\n  }\n\n  private _onClickRemove(e: MouseEvent) {\n    e.stopPropagation();\n\n    this._connectedOptions\n      .filter(option => option.selected)\n      .forEach(option => {\n        option.selected = false;\n      });\n\n    this._selectedOptions = [];\n    this._handleSelectEvent();\n  }\n\n  private _checkAdditionalItemCount() {\n    if (!this.multiple) return;\n\n    let visibleItems = 0;\n    for(const value of this._selectedOptionsItems) {\n      if (value.offsetLeft < this._selectedOptionsContainer.offsetWidth) {\n        visibleItems++;\n      } else {\n        break;\n      }\n    }\n\n    this._additionalSelectedOptionCount = this._selectedOptionsItems.length - visibleItems;\n  }\n\n  private _checkRequired() {\n    if (this.required) {\n      this._isInvalid = this._selectedOptions.length === 0;\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues) {\n    if (\n      _changedProperties.has('_selectedOptions') &&\n      _changedProperties.get('_selectedOptions') instanceof Array\n    ) {\n      this._checkRequired();\n      this._checkAdditionalItemCount();\n    } else if (\n      _changedProperties.has('multiple') &&\n      typeof _changedProperties.get('multiple') === 'boolean'\n    ) {\n      this._connectedOptions.forEach(option => {\n        option.multiple = this.multiple;\n        option.selected = false;\n      });\n      this._selectedOptions = [];\n    }\n  }\n\n  /**\n   * This method is used by `bl-select-option` component to register itself to bl-select.\n   * @param option BlSelectOption reference to be registered\n   */\n  registerOption(option: BlSelectOption) {\n    this._connectedOptions.push(option);\n\n    if (option.selected) {\n      const optionItem = {\n        value: option.value,\n        text: option.textContent,\n        selected: option.selected,\n      } as ISelectOption;\n\n      if (this.multiple) {\n        this._selectedOptions = [...this._selectedOptions, optionItem];\n      } else {\n        this._selectedOptions = [optionItem];\n      }\n\n      this.requestUpdate();\n    }\n  }\n\n  /**\n   * This method is used by `bl-select-option` component to unregister itself from bl-select.\n   * @param option BlSelectOption reference to be unregistered\n   */\n  unregisterOption(option: BlSelectOption) {\n    this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n    this._selectedOptions = this._selectedOptions.filter(item => item.value !== option.value);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-select': BlSelect;\n  }\n}\n"],
   "mappings": "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",
   "names": ["styles", "r", "bl_select_default", "BlSelect", "s", "event", "_a", "eventPath", "el", "bl_select_default", "N", "z", "b", "T", "k", "args", "x", "y", "inputSelectedOptions", "$", "item", "_selectedItemCount", "removeButton", "placeholder", "invalidMessage", "helpMessage", "label", "o", "optionItem", "oldItem", "option", "value", "visibleItems", "_changedProperties", "__decorateClass", "e", "t", "i", "n"]
 }

package/dist/{chunk-LZHSSAHO.js → chunk-EX6STMCI.js}

@@ -3,8 +3,8 @@ import{a as s}from"./chunk-23UFIOHV.js";import{a as l,b as r,f as a,g as n,h as
             <bl-button
               slot="tooltip-trigger"
               icon="info"
-              variant="secondary"
-              kind="text"
+              variant="tertiary"
+              kind="neutral"
               label="${this.helpText}"
             ></bl-button>
             ${this.helpText}
@@ -27,4 +27,4 @@ import{a as s}from"./chunk-23UFIOHV.js";import{a as l,b as r,f as a,g as n,h as
         ${b}
       </button>
     `}};e([o({type:String})],t.prototype,"caption",2),e([o({type:String,reflect:!0})],t.prototype,"name",2),e([o({type:String,attribute:"help-text",reflect:!0})],t.prototype,"helpText",2),e([o({type:String})],t.prototype,"icon",2),e([o({type:Boolean,reflect:!0})],t.prototype,"notify",2),e([o({type:String})],t.prototype,"badge",2),e([o({type:Boolean,reflect:!0})],t.prototype,"selected",2),e([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([s("bl-tab-selected")],t.prototype,"_onSelect",2),t=e([n("bl-tab")],t);export{t as a};
-//# sourceMappingURL=chunk-LZHSSAHO.js.map
+//# sourceMappingURL=chunk-EX6STMCI.js.map

package/dist/{chunk-LZHSSAHO.js.map → chunk-EX6STMCI.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/tab-group/tab/bl-tab.css", "../src/components/tab-group/tab/bl-tab.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:flex;align-items:center;background-color:var(--bl-color-primary-background)}.container{--title-padding-vertical:var(--bl-size-m);--title-padding-horizontal:var(--bl-size-xl);--title-color:var(--bl-color-secondary);--caption-color:var(--bl-color-secondary);--icon-color:var(--bl-color-secondary);--border-bottom-width:var(--bl-size-4xs);--border-left-space:var(--bl-size-xl);--font-title:var(--bl-font-title-3-medium);--font-caption:var(--bl-font-title-4-regular);--tab-right-padding:var(--bl-size-xl);--help-container-width:var(--bl-size-2xl);--tab-height:calc(var(--bl-size-3xl) + var(--bl-size-s));display:flex;border:0;cursor:pointer;background-color:initial;width:max-content;height:var(--tab-height);padding:0 var(--tab-right-padding)}.container::after{position:absolute;content:'';right:0;top:var(--bl-size-m);height:calc(100% - var(--bl-size-2xl));border-right:1px solid var(--bl-color-tertiary-hover)}:host(:last-of-type) .container::after{border-right:0}:host .container::before{content:'';position:absolute;opacity:0;bottom:calc(-1 * var(--bl-size-4xs));left:var(--border-left-space);width:calc(100% - var(--bl-size-4xl));border-bottom:var(--border-bottom-width) solid var(--bl-color-primary)}:host([selected]:not([disabled])) .container::before{opacity:1}:host(:hover) .container,:host([selected]) .container,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .container,:host([selected]) .container{--title-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}:host([disabled]) .container{cursor:not-allowed;--title-color:var(--bl-color-content-passive);--caption-color:var(--bl-color-content-passive);--icon-color:var(--bl-color-content-passive)}:host(:hover) :where(.title,.icon),:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) :where(.title,.icon){transition:color 120ms ease-out}:host([selected]) .border-bottom{display:inline-block}:host([disabled]) .container:hover,:host([disabled]) .container.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__{cursor:not-allowed}:host([help-text]) button{padding-right:0}.tab-button{width:max-content}.help-container{display:flex;justify-content:center;align-items:center;width:var(--help-container-width);height:100%;font-size:var(--bl-font-size-m);pointer-events:visible;padding-right:var(--tab-right-padding)}bl-tooltip{--bl-tooltip-position:fixed}.title{display:flex;align-items:center;justify-content:center;font:var(--font-title);color:var(--title-color);line-height:var(--bl-size-m);white-space:nowrap}.title-container{display:flex;align-items:center;justify-content:center;flex-direction:column;margin:auto}.badge-container{padding-left:var(--bl-size-3xs);display:flex;margin-bottom:1px}.caption{font:var(--font-caption);line-height:var(--bl-size-xs);color:var(--caption-color);text-align:center;margin-top:var(--bl-size-4xs)}.icon{display:flex;color:var(--icon-color);font-size:var(--bl-font-size-l);margin-right:var(--bl-size-3xs);margin-bottom:1px}:host([notify]) .title::after{content:'';height:var(--bl-size-2xs);width:var(--bl-size-2xs);border-radius:var(--bl-size-3xs);margin-left:var(--bl-size-3xs);background-color:var(--bl-color-danger);margin-bottom:1px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../../utilities/event';\n\nimport style from './bl-tab.css';\nimport type BlTabGroup from '../bl-tab-group';\n\n/**\n * @tag bl-tab\n * @summary Baklava Tab component\n */\n@customElement('bl-tab')\nexport default class BlTab extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  private tabGroup: BlTabGroup | null;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.updateComplete.then(() => {\n      this.tabGroup = this.closest<BlTabGroup>('bl-tab-group');\n      // FIXME: We need to warn if parent is not tab-group\n      this.tabGroup?.registerTab(this);\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.tabGroup?.unregisterTab(this);\n  }\n\n  /**\n   * Sets the caption of tab\n   */\n  @property({ type: String })\n  caption: string;\n\n  /**\n   * Name of the tab that should match `tab-panel`'s `tab` attribute\n   */\n  @property({ type: String, reflect: true })\n  name: string;\n\n  /**\n   * Set tooltip text. Should be set to display information icon.\n   */\n  @property({ type: String, attribute: 'help-text', reflect: true })\n  helpText: string;\n\n  /**\n   * Name of the icon which display on the left side of the tab.\n   */\n  @property({ type: String })\n  icon = '';\n\n  /**\n   * Shows notification dot.\n   */\n  @property({ type: Boolean, reflect: true })\n  notify = false;\n\n  /**\n   * Sets the content of the badge.\n   */\n  @property({ type: String })\n  badge = '';\n\n  /**\n   * Set `tab` as selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Set `tab` as disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Fires when tab is selected.\n   */\n  @event('bl-tab-selected') private _onSelect: EventDispatcher<string>;\n\n  /**\n   * Set tab selected.\n   */\n  select() {\n    this._onSelect(this.name);\n  }\n\n  render(): TemplateResult {\n    const title = html` <slot></slot>`;\n\n    const helpTooltip = this.helpText\n      ? html` <div class=\"help-container\">\n          <bl-tooltip>\n            <bl-button\n              slot=\"tooltip-trigger\"\n              icon=\"info\"\n              variant=\"secondary\"\n              kind=\"text\"\n              label=\"${this.helpText}\"\n            ></bl-button>\n            ${this.helpText}\n          </bl-tooltip>\n        </div>`\n      : null;\n\n    const icon = this.icon\n      ? html` <div class=\"icon\">\n          <bl-icon name=\"${this.icon}\"></bl-icon>\n        </div>`\n      : null;\n\n    const badge = this.badge\n      ? html` <div class=\"badge-container\">\n          <bl-badge size=\"small\">${this.badge}</bl-badge>\n        </div>`\n      : null;\n\n    const caption = this.caption ? html` <div class=\"caption\">${this.caption}</div>` : null;\n\n    return html`\n      <button\n        ?disabled=\"${this.disabled}\"\n        role=\"tab\"\n        class=\"container\"\n        @click=\"${() => this.select()}\"\n      >\n        <div class=\"title-container\">\n          <div class=\"title\">${icon} ${title} ${badge}</div>\n          ${caption}\n        </div>\n        ${helpTooltip}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-tab': BlTab;\n  }\n}\n"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:flex;align-items:center;background-color:var(--bl-color-primary-background)}.container{--title-padding-vertical:var(--bl-size-m);--title-padding-horizontal:var(--bl-size-xl);--title-color:var(--bl-color-secondary);--caption-color:var(--bl-color-secondary);--icon-color:var(--bl-color-secondary);--border-bottom-width:var(--bl-size-4xs);--border-left-space:var(--bl-size-xl);--font-title:var(--bl-font-title-3-medium);--font-caption:var(--bl-font-title-4-regular);--tab-right-padding:var(--bl-size-xl);--help-container-width:var(--bl-size-2xl);--tab-height:calc(var(--bl-size-3xl) + var(--bl-size-s));display:flex;border:0;cursor:pointer;background-color:initial;width:max-content;height:var(--tab-height);padding:0 var(--tab-right-padding)}.container::after{position:absolute;content:'';right:0;top:var(--bl-size-m);height:calc(100% - var(--bl-size-2xl));border-right:1px solid var(--bl-color-tertiary-hover)}:host(:last-of-type) .container::after{border-right:0}:host .container::before{content:'';position:absolute;opacity:0;bottom:calc(-1 * var(--bl-size-4xs));left:var(--border-left-space);width:calc(100% - var(--bl-size-4xl));border-bottom:var(--border-bottom-width) solid var(--bl-color-primary)}:host([selected]:not([disabled])) .container::before{opacity:1}:host(:hover) .container,:host([selected]) .container,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .container,:host([selected]) .container{--title-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}:host([disabled]) .container{cursor:not-allowed;--title-color:var(--bl-color-content-passive);--caption-color:var(--bl-color-content-passive);--icon-color:var(--bl-color-content-passive)}:host(:hover) :where(.title,.icon),:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) :where(.title,.icon){transition:color 120ms ease-out}:host([selected]) .border-bottom{display:inline-block}:host([disabled]) .container:hover,:host([disabled]) .container.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__{cursor:not-allowed}:host([help-text]) button{padding-right:0}.tab-button{width:max-content}.help-container{display:flex;justify-content:center;align-items:center;width:var(--help-container-width);height:100%;font-size:var(--bl-font-size-m);pointer-events:visible;padding-right:var(--tab-right-padding)}bl-tooltip{--bl-tooltip-position:fixed}.title{display:flex;align-items:center;justify-content:center;font:var(--font-title);color:var(--title-color);line-height:var(--bl-size-m);white-space:nowrap}.title-container{display:flex;align-items:center;justify-content:center;flex-direction:column;margin:auto}.badge-container{padding-left:var(--bl-size-3xs);display:flex;margin-bottom:1px}.caption{font:var(--font-caption);line-height:var(--bl-size-xs);color:var(--caption-color);text-align:center;margin-top:var(--bl-size-4xs)}.icon{display:flex;color:var(--icon-color);font-size:var(--bl-font-size-l);margin-right:var(--bl-size-3xs);margin-bottom:1px}:host([notify]) .title::after{content:'';height:var(--bl-size-2xs);width:var(--bl-size-2xs);border-radius:var(--bl-size-3xs);margin-left:var(--bl-size-3xs);background-color:var(--bl-color-danger);margin-bottom:1px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../../utilities/event';\n\nimport style from './bl-tab.css';\nimport type BlTabGroup from '../bl-tab-group';\n\n/**\n * @tag bl-tab\n * @summary Baklava Tab component\n */\n@customElement('bl-tab')\nexport default class BlTab extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  private tabGroup: BlTabGroup | null;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.updateComplete.then(() => {\n      this.tabGroup = this.closest<BlTabGroup>('bl-tab-group');\n      // FIXME: We need to warn if parent is not tab-group\n      this.tabGroup?.registerTab(this);\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.tabGroup?.unregisterTab(this);\n  }\n\n  /**\n   * Sets the caption of tab\n   */\n  @property({ type: String })\n  caption: string;\n\n  /**\n   * Name of the tab that should match `tab-panel`'s `tab` attribute\n   */\n  @property({ type: String, reflect: true })\n  name: string;\n\n  /**\n   * Set tooltip text. Should be set to display information icon.\n   */\n  @property({ type: String, attribute: 'help-text', reflect: true })\n  helpText: string;\n\n  /**\n   * Name of the icon which display on the left side of the tab.\n   */\n  @property({ type: String })\n  icon = '';\n\n  /**\n   * Shows notification dot.\n   */\n  @property({ type: Boolean, reflect: true })\n  notify = false;\n\n  /**\n   * Sets the content of the badge.\n   */\n  @property({ type: String })\n  badge = '';\n\n  /**\n   * Set `tab` as selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Set `tab` as disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Fires when tab is selected.\n   */\n  @event('bl-tab-selected') private _onSelect: EventDispatcher<string>;\n\n  /**\n   * Set tab selected.\n   */\n  select() {\n    this._onSelect(this.name);\n  }\n\n  render(): TemplateResult {\n    const title = html` <slot></slot>`;\n\n    const helpTooltip = this.helpText\n      ? html` <div class=\"help-container\">\n          <bl-tooltip>\n            <bl-button\n              slot=\"tooltip-trigger\"\n              icon=\"info\"\n              variant=\"tertiary\"\n              kind=\"neutral\"\n              label=\"${this.helpText}\"\n            ></bl-button>\n            ${this.helpText}\n          </bl-tooltip>\n        </div>`\n      : null;\n\n    const icon = this.icon\n      ? html` <div class=\"icon\">\n          <bl-icon name=\"${this.icon}\"></bl-icon>\n        </div>`\n      : null;\n\n    const badge = this.badge\n      ? html` <div class=\"badge-container\">\n          <bl-badge size=\"small\">${this.badge}</bl-badge>\n        </div>`\n      : null;\n\n    const caption = this.caption ? html` <div class=\"caption\">${this.caption}</div>` : null;\n\n    return html`\n      <button\n        ?disabled=\"${this.disabled}\"\n        role=\"tab\"\n        class=\"container\"\n        @click=\"${() => this.select()}\"\n      >\n        <div class=\"title-container\">\n          <div class=\"title\">${icon} ${title} ${badge}</div>\n          ${caption}\n        </div>\n        ${helpTooltip}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-tab': BlTab;\n  }\n}\n"],
   "mappings": "oJACO,IAAMA,EAASC,omGACfC,EAAQF,ECUf,IAAqBG,EAArB,cAAmCC,CAAW,CAA9C,kCA4CE,UAAO,GAMP,YAAS,GAMT,WAAQ,GAMR,cAAW,GAMX,cAAW,GAnEX,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAIA,mBAAoB,CAClB,MAAM,kBAAkB,EAExB,KAAK,eAAe,KAAK,IAAM,CAtBnC,IAAAC,EAuBM,KAAK,SAAW,KAAK,QAAoB,cAAc,GAEvDA,EAAA,KAAK,WAAL,MAAAA,EAAe,YAAY,KAC7B,CAAC,CACH,CAEA,sBAAuB,CA7BzB,IAAAA,EA8BI,MAAM,qBAAqB,GAC3BA,EAAA,KAAK,WAAL,MAAAA,EAAe,cAAc,KAC/B,CA0DA,QAAS,CACP,KAAK,UAAU,KAAK,IAAI,CAC1B,CAEA,QAAyB,CACvB,IAAMC,EAAQC,kBAERC,EAAc,KAAK,SACrBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAOe,KAAK;AAAA;AAAA,cAEd,KAAK;AAAA;AAAA,gBAGX,KAEEE,EAAO,KAAK,KACdF;AAAA,2BACmB,KAAK;AAAA,gBAExB,KAEEG,EAAQ,KAAK,MACfH;AAAA,mCAC2B,KAAK;AAAA,gBAEhC,KAEEI,EAAU,KAAK,QAAUJ,0BAA6B,KAAK,gBAAkB,KAEnF,OAAOA;AAAA;AAAA,qBAEU,KAAK;AAAA;AAAA;AAAA,kBAGR,IAAM,KAAK,OAAO;AAAA;AAAA;AAAA,+BAGLE,KAAQH,KAASI;AAAA,YACpCC;AAAA;AAAA,UAEFH;AAAA;AAAA,KAGR,CACF,EAvGEI,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAzBPX,EA0BnB,uBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA/BtBX,EAgCnB,oBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,YAAa,QAAS,EAAK,CAAC,GArC9CX,EAsCnB,wBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA3CPX,EA4CnB,oBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAjDvBX,EAkDnB,sBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAvDPX,EAwDnB,qBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7DvBX,EA8DnB,wBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAnEvBX,EAoEnB,wBAKkCU,EAAA,CAAjCE,EAAM,iBAAiB,GAzELZ,EAyEe,yBAzEfA,EAArBU,EAAA,CADC,EAAc,QAAQ,GACFV",
   "names": ["styles", "r", "bl_tab_default", "BlTab", "s", "bl_tab_default", "_a", "title", "$", "helpTooltip", "icon", "badge", "caption", "__decorateClass", "e", "event"]
 }

package/dist/{chunk-V67B4ADE.js → chunk-SI4AOUS5.js}

@@ -1,9 +1,10 @@
-import{a as b}from"./chunk-2TVOKUHE.js";import{a as m}from"./chunk-ENFFFE4I.js";import{a as u}from"./chunk-23UFIOHV.js";import{a as c,b as n,f as p,g as d,h as r}from"./chunk-HG7OBTQS.js";import{a as o}from"./chunk-NZ3RGSR6.js";var h=c`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-content-primary);box-shadow:0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding)}.description{font:var(--bl-font-title-3-regular)}.wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:auto}.content{display:flex;align-items:center;padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);flex:20 1 70%}.icon{margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--main-color);font:var(--bl-font-title-3-medium);margin-bottom:var(--bl-size-4xs)}.action{display:flex;align-items:center;flex:1 1 0%}.caption+.description{font:var(--bl-font-body-text-3)}.close-spaced{margin-top:calc(var(--padding) / 2)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-background)}`,f=h;var g=()=>({fromAttribute:a=>!a||a==="true"?!0:a==="false"?!1:a});var t=class extends p{constructor(){super(...arguments);this.variant="info";this.closable=!1;this.closed=!1}static get styles(){return[f]}open(){this.closed=!1}close(){this.closed=!0}get _hasAlertCaptionSlot(){return this.querySelector(':scope > [slot="caption"]')!==null}_closeHandler(){this.closed=!0,this.onClose(!0)}_predefinedIcons(){switch(this.variant){case"success":return"check_fill";case"danger":return"close_fill";default:return this.variant}}_getIcon(){if(!!this.icon)return this.icon===!0?this._predefinedIcons():this.icon}_initAlertActionSlot(i){i.target.assignedElements().forEach(e=>{var s;if(e.tagName!=="BL-BUTTON"){(s=e.parentNode)==null||s.removeChild(e);return}e.setAttribute("variant","secondary"),e.setAttribute("kind","text"),e.setAttribute("size","medium"),e.removeAttribute("icon")})}render(){let i=this.caption||this._hasAlertCaptionSlot?n`<span class="caption">
+import{a as b}from"./chunk-2TVOKUHE.js";import{a as m}from"./chunk-ENFFFE4I.js";import{a as u}from"./chunk-23UFIOHV.js";import{a as c,b as n,f as p,g as d,h as o}from"./chunk-HG7OBTQS.js";import{a as r}from"./chunk-NZ3RGSR6.js";var h=c`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-content-primary);box-shadow:0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding)}.description{font:var(--bl-font-title-3-regular)}.wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:auto}.content{display:flex;align-items:center;padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);flex:20 1 70%}.icon{margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--main-color);font:var(--bl-font-title-3-medium);margin-bottom:var(--bl-size-4xs)}.action{display:flex;align-items:center;flex:1 1 0%}.caption+.description{font:var(--bl-font-body-text-3)}.close-spaced{margin-top:calc(var(--padding) / 2)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-background)}`,f=h;var g=()=>({fromAttribute:a=>!a||a==="true"?!0:a==="false"?!1:a});var t=class extends p{constructor(){super(...arguments);this.variant="info";this.closable=!1;this.closed=!1}static get styles(){return[f]}open(){this.closed=!1}close(){this.closed=!0}get _hasAlertCaptionSlot(){return this.querySelector(':scope > [slot="caption"]')!==null}_closeHandler(){this.closed=!0,this.onClose(!0)}_predefinedIcons(){switch(this.variant){case"success":return"check_fill";case"danger":return"close_fill";default:return this.variant}}_getIcon(){if(!!this.icon)return this.icon===!0?this._predefinedIcons():this.icon}_initAlertActionSlot(i){i.target.assignedElements().forEach(e=>{var s;if(e.tagName!=="BL-BUTTON"){(s=e.parentNode)==null||s.removeChild(e);return}e.setAttribute("variant","tertiary"),e.setAttribute("kind","neutral"),e.setAttribute("size","medium"),e.removeAttribute("icon")})}render(){let i=this.caption||this._hasAlertCaptionSlot?n`<span class="caption">
             <slot name="caption"> ${this.caption} </slot>
           </span>`:null,l=this._getIcon()?n`<bl-icon class="icon" name=${b(this._getIcon())}></bl-icon>`:null,e=m({close:!0,"close-spaced":!!i}),s=this.closable?n`<bl-button
           class=${e}
           label="close"
-          kind="text"
+          variant="tertiary"
+          kind="neutral"
           icon="close"
           variant="secondary"
           @click=${this._closeHandler}
@@ -20,5 +21,5 @@ import{a as b}from"./chunk-2TVOKUHE.js";import{a as m}from"./chunk-ENFFFE4I.js";
         </div>
         ${s}
       </div>
-    `}};o([r({reflect:!0})],t.prototype,"variant",2),o([r()],t.prototype,"description",2),o([r({converter:g()})],t.prototype,"icon",2),o([r({type:Boolean,reflect:!0})],t.prototype,"closable",2),o([r()],t.prototype,"caption",2),o([r({type:Boolean,reflect:!0})],t.prototype,"closed",2),o([u("bl-close")],t.prototype,"onClose",2),t=o([d("bl-alert")],t);export{t as a};
-//# sourceMappingURL=chunk-V67B4ADE.js.map
+    `}};r([o({reflect:!0})],t.prototype,"variant",2),r([o()],t.prototype,"description",2),r([o({converter:g()})],t.prototype,"icon",2),r([o({type:Boolean,reflect:!0})],t.prototype,"closable",2),r([o()],t.prototype,"caption",2),r([o({type:Boolean,reflect:!0})],t.prototype,"closed",2),r([u("bl-close")],t.prototype,"onClose",2),t=r([d("bl-alert")],t);export{t as a};
+//# sourceMappingURL=chunk-SI4AOUS5.js.map

package/dist/{chunk-V67B4ADE.js.map → chunk-SI4AOUS5.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/alert/bl-alert.css", "../src/utilities/string-boolean.converter.ts", "../src/components/alert/bl-alert.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-content-primary);box-shadow:0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding)}.description{font:var(--bl-font-title-3-regular)}.wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:auto}.content{display:flex;align-items:center;padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);flex:20 1 70%}.icon{margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--main-color);font:var(--bl-font-title-3-medium);margin-bottom:var(--bl-size-4xs)}.action{display:flex;align-items:center;flex:1 1 0%}.caption+.description{font:var(--bl-font-body-text-3)}.close-spaced{margin-top:calc(var(--padding) / 2)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-background)}`;\nexport default styles;\n", "import type { ComplexAttributeConverter } from 'lit';\n\nexport const stringBooleanConverter = (): ComplexAttributeConverter<string | boolean> => {\n  return {\n    fromAttribute: (value: string): string | boolean => {\n      if (!value || value === 'true') return true;\n      if (value === 'false') return false;\n      return value;\n    },\n  };\n};\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-alert.css';\nimport '../icon/bl-icon';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { stringBooleanConverter } from '../../utilities/string-boolean.converter';\nimport { ButtonVariant, ButtonKind, ButtonSize } from '../button/bl-button';\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport type AlertVariant = 'info' | 'warning' | 'success' | 'danger';\n\n/**\n * @tag bl-alert\n * @summary Baklava Alert component\n */\n\n@customElement('bl-alert')\nexport default class BlAlert extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets alert variant\n   */\n  @property({ reflect: true })\n  variant: AlertVariant = 'info';\n\n  /**\n   * Sets alert description\n   */\n  @property()\n  description?: 'string';\n\n  /**\n   * Allows to customize alert icon\n   */\n  @property({ converter: stringBooleanConverter() })\n  icon?: boolean | string;\n\n  /**\n   * Displays a close button.\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * Sets alert caption.\n   */\n  @property()\n  caption?: string;\n\n  /**\n   * Sets alert components display state.\n   */\n  @property({ type: Boolean, reflect: true })\n  closed = false;\n\n  /**\n   * Opens alert component.\n   */\n  public open() {\n    this.closed = false;\n  }\n\n  /**\n   * Closes alert component.\n   */\n  public close() {\n    this.closed = true;\n  }\n\n  /**\n   * Fires when close button clicked.\n   */\n  @event('bl-close') private onClose: EventDispatcher<boolean>;\n\n  private get _hasAlertCaptionSlot() {\n    return this.querySelector(':scope > [slot=\"caption\"]') !== null;\n  }\n\n  private _closeHandler() {\n    this.closed = true;\n    this.onClose(true);\n  }\n\n  private _predefinedIcons() {\n    switch (this.variant) {\n      case 'success':\n        return 'check_fill';\n      case 'danger':\n        return 'close_fill';\n      default:\n        return this.variant;\n    }\n  }\n\n  private _getIcon(): string | undefined {\n    if (!this.icon) return;\n    if (this.icon === true) return this._predefinedIcons();\n    return this.icon;\n  }\n\n  private _initAlertActionSlot(event: Event) {\n    const slotElements = (event.target as HTMLSlotElement).assignedElements();\n    slotElements.forEach(element => {\n      if (element.tagName !== 'BL-BUTTON') {\n        element.parentNode?.removeChild(element);\n        return;\n      }\n      element.setAttribute('variant', 'secondary' as ButtonVariant);\n      element.setAttribute('kind', 'text' as ButtonKind);\n      element.setAttribute('size', 'medium' as ButtonSize);\n      element.removeAttribute('icon');\n    });\n  }\n\n  render(): TemplateResult {\n    const caption =\n      this.caption || this._hasAlertCaptionSlot\n        ? html`<span class=\"caption\">\n            <slot name=\"caption\"> ${this.caption} </slot>\n          </span>`\n        : null;\n    const icon = this._getIcon()\n      ? html`<bl-icon class=\"icon\" name=${ifDefined(this._getIcon())}></bl-icon>`\n      : null;\n\n    const closeClasses = classMap({\n      'close': true,\n      'close-spaced': !!caption,\n    });\n\n    const closable = this.closable\n      ? html`<bl-button\n          class=${closeClasses}\n          label=\"close\"\n          kind=\"text\"\n          icon=\"close\"\n          variant=\"secondary\"\n          @click=${this._closeHandler}\n        ></bl-button>`\n      : null;\n    const description = html`<span class=\"description\">\n      <slot> ${this.description} </slot>\n    </span>`;\n\n    return html`\n      <div class=\"alert\">\n        <div class=\"wrapper\">\n          <div class=\"content\">\n            ${icon}\n            <div class=\"text-content\">${caption} ${description}</div>\n          </div>\n          <slot class=\"action\" name=\"action\" @slotchange=${this._initAlertActionSlot}></slot>\n        </div>\n        ${closable}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-alert': BlAlert;\n  }\n}\n"],
-  "mappings": "oOACO,IAAMA,EAASC,27CACfC,EAAQF,ECAR,IAAMG,EAAyB,KAC7B,CACL,cAAgBC,GACV,CAACA,GAASA,IAAU,OAAe,GACnCA,IAAU,QAAgB,GACvBA,CAEX,GCSF,IAAqBC,EAArB,cAAqCC,CAAW,CAAhD,kCASE,aAAwB,OAkBxB,cAAW,GAYX,YAAS,GAtCT,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAyCO,MAAO,CACZ,KAAK,OAAS,EAChB,CAKO,OAAQ,CACb,KAAK,OAAS,EAChB,CAOA,IAAY,sBAAuB,CACjC,OAAO,KAAK,cAAc,2BAA2B,IAAM,IAC7D,CAEQ,eAAgB,CACtB,KAAK,OAAS,GACd,KAAK,QAAQ,EAAI,CACnB,CAEQ,kBAAmB,CACzB,OAAQ,KAAK,aACN,UACH,MAAO,iBACJ,SACH,MAAO,qBAEP,OAAO,KAAK,QAElB,CAEQ,UAA+B,CACrC,GAAI,EAAC,KAAK,KACV,OAAI,KAAK,OAAS,GAAa,KAAK,iBAAiB,EAC9C,KAAK,IACd,CAEQ,qBAAqBC,EAAc,CACnBA,EAAM,OAA2B,iBAAiB,EAC3D,QAAQC,GAAW,CA1GpC,IAAAC,EA2GM,GAAID,EAAQ,UAAY,YAAa,EACnCC,EAAAD,EAAQ,aAAR,MAAAC,EAAoB,YAAYD,GAChC,MACF,CACAA,EAAQ,aAAa,UAAW,WAA4B,EAC5DA,EAAQ,aAAa,OAAQ,MAAoB,EACjDA,EAAQ,aAAa,OAAQ,QAAsB,EACnDA,EAAQ,gBAAgB,MAAM,CAChC,CAAC,CACH,CAEA,QAAyB,CACvB,IAAME,EACJ,KAAK,SAAW,KAAK,qBACjBC;AAAA,oCAC0B,KAAK;AAAA,mBAE/B,KACAC,EAAO,KAAK,SAAS,EACvBD,+BAAkCE,EAAU,KAAK,SAAS,CAAC,eAC3D,KAEEC,EAAeC,EAAS,CAC5B,MAAS,GACT,eAAgB,CAAC,CAACL,CACpB,CAAC,EAEKM,EAAW,KAAK,SAClBL;AAAA,kBACUG;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKC,KAAK;AAAA,uBAEhB,KACEG,EAAcN;AAAA,eACT,KAAK;AAAA,aAGhB,OAAOA;AAAA;AAAA;AAAA;AAAA,cAIGC;AAAA,wCAC0BF,KAAWO;AAAA;AAAA,2DAEQ,KAAK;AAAA;AAAA,UAEtDD;AAAA;AAAA,KAGR,CACF,EAtIEE,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GARRf,EASnB,uBAMAc,EAAA,CADCC,EAAS,GAdSf,EAenB,2BAMAc,EAAA,CADCC,EAAS,CAAE,UAAWC,EAAuB,CAAE,CAAC,GApB9BhB,EAqBnB,oBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1BvBf,EA2BnB,wBAMAc,EAAA,CADCC,EAAS,GAhCSf,EAiCnB,uBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAtCvBf,EAuCnB,sBAmB2Bc,EAAA,CAA1BX,EAAM,UAAU,GA1DEH,EA0DQ,uBA1DRA,EAArBc,EAAA,CADCG,EAAc,UAAU,GACJjB",
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-content-primary);box-shadow:0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding)}.description{font:var(--bl-font-title-3-regular)}.wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:auto}.content{display:flex;align-items:center;padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);flex:20 1 70%}.icon{margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--main-color);font:var(--bl-font-title-3-medium);margin-bottom:var(--bl-size-4xs)}.action{display:flex;align-items:center;flex:1 1 0%}.caption+.description{font:var(--bl-font-body-text-3)}.close-spaced{margin-top:calc(var(--padding) / 2)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-background)}`;\nexport default styles;\n", "import type { ComplexAttributeConverter } from 'lit';\n\nexport const stringBooleanConverter = (): ComplexAttributeConverter<string | boolean> => {\n  return {\n    fromAttribute: (value: string): string | boolean => {\n      if (!value || value === 'true') return true;\n      if (value === 'false') return false;\n      return value;\n    },\n  };\n};\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-alert.css';\nimport '../icon/bl-icon';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { stringBooleanConverter } from '../../utilities/string-boolean.converter';\nimport { ButtonVariant, ButtonKind, ButtonSize } from '../button/bl-button';\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport type AlertVariant = 'info' | 'warning' | 'success' | 'danger';\n\n/**\n * @tag bl-alert\n * @summary Baklava Alert component\n */\n\n@customElement('bl-alert')\nexport default class BlAlert extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets alert variant\n   */\n  @property({ reflect: true })\n  variant: AlertVariant = 'info';\n\n  /**\n   * Sets alert description\n   */\n  @property()\n  description?: 'string';\n\n  /**\n   * Allows to customize alert icon\n   */\n  @property({ converter: stringBooleanConverter() })\n  icon?: boolean | string;\n\n  /**\n   * Displays a close button.\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * Sets alert caption.\n   */\n  @property()\n  caption?: string;\n\n  /**\n   * Sets alert components display state.\n   */\n  @property({ type: Boolean, reflect: true })\n  closed = false;\n\n  /**\n   * Opens alert component.\n   */\n  public open() {\n    this.closed = false;\n  }\n\n  /**\n   * Closes alert component.\n   */\n  public close() {\n    this.closed = true;\n  }\n\n  /**\n   * Fires when close button clicked.\n   */\n  @event('bl-close') private onClose: EventDispatcher<boolean>;\n\n  private get _hasAlertCaptionSlot() {\n    return this.querySelector(':scope > [slot=\"caption\"]') !== null;\n  }\n\n  private _closeHandler() {\n    this.closed = true;\n    this.onClose(true);\n  }\n\n  private _predefinedIcons() {\n    switch (this.variant) {\n      case 'success':\n        return 'check_fill';\n      case 'danger':\n        return 'close_fill';\n      default:\n        return this.variant;\n    }\n  }\n\n  private _getIcon(): string | undefined {\n    if (!this.icon) return;\n    if (this.icon === true) return this._predefinedIcons();\n    return this.icon;\n  }\n\n  private _initAlertActionSlot(event: Event) {\n    const slotElements = (event.target as HTMLSlotElement).assignedElements();\n    slotElements.forEach(element => {\n      if (element.tagName !== 'BL-BUTTON') {\n        element.parentNode?.removeChild(element);\n        return;\n      }\n      element.setAttribute('variant','tertiary' as ButtonVariant);\n      element.setAttribute('kind', 'neutral' as ButtonKind);\n      element.setAttribute('size', 'medium' as ButtonSize);\n      element.removeAttribute('icon');\n    });\n  }\n\n  render(): TemplateResult {\n    const caption =\n      this.caption || this._hasAlertCaptionSlot\n        ? html`<span class=\"caption\">\n            <slot name=\"caption\"> ${this.caption} </slot>\n          </span>`\n        : null;\n    const icon = this._getIcon()\n      ? html`<bl-icon class=\"icon\" name=${ifDefined(this._getIcon())}></bl-icon>`\n      : null;\n\n    const closeClasses = classMap({\n      'close': true,\n      'close-spaced': !!caption,\n    });\n\n    const closable = this.closable\n      ? html`<bl-button\n          class=${closeClasses}\n          label=\"close\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          icon=\"close\"\n          variant=\"secondary\"\n          @click=${this._closeHandler}\n        ></bl-button>`\n      : null;\n    const description = html`<span class=\"description\">\n      <slot> ${this.description} </slot>\n    </span>`;\n\n    return html`\n      <div class=\"alert\">\n        <div class=\"wrapper\">\n          <div class=\"content\">\n            ${icon}\n            <div class=\"text-content\">${caption} ${description}</div>\n          </div>\n          <slot class=\"action\" name=\"action\" @slotchange=${this._initAlertActionSlot}></slot>\n        </div>\n        ${closable}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-alert': BlAlert;\n  }\n}\n"],
+  "mappings": "oOACO,IAAMA,EAASC,27CACfC,EAAQF,ECAR,IAAMG,EAAyB,KAC7B,CACL,cAAgBC,GACV,CAACA,GAASA,IAAU,OAAe,GACnCA,IAAU,QAAgB,GACvBA,CAEX,GCSF,IAAqBC,EAArB,cAAqCC,CAAW,CAAhD,kCASE,aAAwB,OAkBxB,cAAW,GAYX,YAAS,GAtCT,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAyCO,MAAO,CACZ,KAAK,OAAS,EAChB,CAKO,OAAQ,CACb,KAAK,OAAS,EAChB,CAOA,IAAY,sBAAuB,CACjC,OAAO,KAAK,cAAc,2BAA2B,IAAM,IAC7D,CAEQ,eAAgB,CACtB,KAAK,OAAS,GACd,KAAK,QAAQ,EAAI,CACnB,CAEQ,kBAAmB,CACzB,OAAQ,KAAK,aACN,UACH,MAAO,iBACJ,SACH,MAAO,qBAEP,OAAO,KAAK,QAElB,CAEQ,UAA+B,CACrC,GAAI,EAAC,KAAK,KACV,OAAI,KAAK,OAAS,GAAa,KAAK,iBAAiB,EAC9C,KAAK,IACd,CAEQ,qBAAqBC,EAAc,CACnBA,EAAM,OAA2B,iBAAiB,EAC3D,QAAQC,GAAW,CA1GpC,IAAAC,EA2GM,GAAID,EAAQ,UAAY,YAAa,EACnCC,EAAAD,EAAQ,aAAR,MAAAC,EAAoB,YAAYD,GAChC,MACF,CACAA,EAAQ,aAAa,UAAU,UAA2B,EAC1DA,EAAQ,aAAa,OAAQ,SAAuB,EACpDA,EAAQ,aAAa,OAAQ,QAAsB,EACnDA,EAAQ,gBAAgB,MAAM,CAChC,CAAC,CACH,CAEA,QAAyB,CACvB,IAAME,EACJ,KAAK,SAAW,KAAK,qBACjBC;AAAA,oCAC0B,KAAK;AAAA,mBAE/B,KACAC,EAAO,KAAK,SAAS,EACvBD,+BAAkCE,EAAU,KAAK,SAAS,CAAC,eAC3D,KAEEC,EAAeC,EAAS,CAC5B,MAAS,GACT,eAAgB,CAAC,CAACL,CACpB,CAAC,EAEKM,EAAW,KAAK,SAClBL;AAAA,kBACUG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMC,KAAK;AAAA,uBAEhB,KACEG,EAAcN;AAAA,eACT,KAAK;AAAA,aAGhB,OAAOA;AAAA;AAAA;AAAA;AAAA,cAIGC;AAAA,wCAC0BF,KAAWO;AAAA;AAAA,2DAEQ,KAAK;AAAA;AAAA,UAEtDD;AAAA;AAAA,KAGR,CACF,EAvIEE,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GARRf,EASnB,uBAMAc,EAAA,CADCC,EAAS,GAdSf,EAenB,2BAMAc,EAAA,CADCC,EAAS,CAAE,UAAWC,EAAuB,CAAE,CAAC,GApB9BhB,EAqBnB,oBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1BvBf,EA2BnB,wBAMAc,EAAA,CADCC,EAAS,GAhCSf,EAiCnB,uBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAtCvBf,EAuCnB,sBAmB2Bc,EAAA,CAA1BX,EAAM,UAAU,GA1DEH,EA0DQ,uBA1DRA,EAArBc,EAAA,CADCG,EAAc,UAAU,GACJjB",
   "names": ["styles", "r", "bl_alert_default", "stringBooleanConverter", "value", "BlAlert", "s", "bl_alert_default", "event", "element", "_a", "caption", "$", "icon", "l", "closeClasses", "o", "closable", "description", "__decorateClass", "e", "stringBooleanConverter", "n"]
 }

package/dist/chunk-SRQS24UV.js

@@ -0,0 +1,18 @@
+import{a}from"./chunk-2TVOKUHE.js";import{a as v}from"./chunk-ENFFFE4I.js";import{a as h}from"./chunk-23UFIOHV.js";import{a as c,b as l,f as d,g as b,h as t}from"./chunk-HG7OBTQS.js";import{a as r}from"./chunk-NZ3RGSR6.js";var m=c`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative}.button{--main-color:var(--bl-color-primary);--main-hover-color:var(--bl-color-primary-hover);--text-hover-color:var(--bl-color-secondary-background);--content-color:var(--bl-color-primary-background);--bg-color:var(--main-color);--border-color:var(--main-color);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-m);--margin-icon:var(--padding-vertical);--icon-size:var(--bl-size-m);--font:var(--bl-font-title-3-medium);--height:var(--bl-size-2xl);display:flex;gap:var(--margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--height);border:solid 1px var(--border-color);border-radius:6px;text-decoration:none;padding:var(--padding-vertical) var(--padding-horizontal);cursor:pointer;background-color:var(--bg-color);color:var(--content-color);font:var(--font);font-kerning:none;user-select:none}:host(:hover) .button,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']) .button{--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-2xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl)}:host([size='large']) .button{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-xl);--margin-icon:var(--bl-size-2xs);--height:var(--bl-size-3xl)}.button:focus{outline:0}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host .has-icon:not(.has-content){--padding-horizontal:var(--padding-vertical);--margin-icon:0}:host([variant='secondary']) .button{--bg-color:transparent;--content-color:var(--main-color)}:host([variant='tertiary']) .button{--content-color:var(--main-color);--border-color:transparent;--bg-color:transparent}:host([kind='neutral']) .button{--main-color:var(--bl-color-secondary);--main-hover-color:var(--bl-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed}:host([disabled]) .button{--main-color:var(--bl-color-tertiary);--main-hover-color:var(--bl-color-tertiary);--content-color:var(--bl-color-content-passive);--bg-color:var(--main-color);pointer-events:none;text-decoration:none}:host([variant='secondary']:hover:not([disabled])) .button,:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--bl-color-primary-background);--bg-color:var(--main-hover-color)}:host([variant='tertiary']:hover:not([disabled])) .button,:host([variant='tertiary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--main-hover-color);--bg-color:var(--text-hover-color)}`,p=m;var o=class extends d{constructor(){super(...arguments);this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.target="_self"}static get styles(){return[p]}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(e=>{var n;let i=e.nodeType;return i===e.TEXT_NODE&&((n=e.textContent)==null?void 0:n.trim())!==""||i===e.ELEMENT_NODE&&!e.hasAttribute("slot")})}render(){let s=!!this.href,e=this.icon?l`<bl-icon name=${this.icon}></bl-icon>`:"",i=l`<slot name="icon">${e}</slot> <span class="label"><slot></slot></span>`,n=v({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return s?l`<a
+          class=${n}
+          aria-disabled="${a(this.disabled)}"
+          aria-label="${a(this.label)}"
+          href=${a(this.href)}
+          target=${a(this.target)}
+          role="button"
+          >${i}</a
+        >`:l`<button
+          class=${n}
+          aria-disabled="${a(this.disabled)}"
+          aria-label="${a(this.label)}"
+          ?disabled=${this.disabled}
+          @click="${this._handleClick}"
+        >
+          ${i}
+        </button>`}_handleClick(){this.onClick("Click event fired!")}};r([t({type:String,reflect:!0})],o.prototype,"variant",2),r([t({type:String,reflect:!0})],o.prototype,"kind",2),r([t({type:String,reflect:!0})],o.prototype,"size",2),r([t({type:String})],o.prototype,"label",2),r([t({type:Boolean,reflect:!0})],o.prototype,"disabled",2),r([t({type:String})],o.prototype,"href",2),r([t({type:String})],o.prototype,"icon",2),r([t({type:String})],o.prototype,"target",2),r([t({type:String})],o.prototype,"type",2),r([h("bl-click")],o.prototype,"onClick",2),o=r([b("bl-button")],o);export{o as a};
+//# sourceMappingURL=chunk-SRQS24UV.js.map

package/dist/chunk-SRQS24UV.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/button/bl-button.css", "../src/components/button/bl-button.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative}.button{--main-color:var(--bl-color-primary);--main-hover-color:var(--bl-color-primary-hover);--text-hover-color:var(--bl-color-secondary-background);--content-color:var(--bl-color-primary-background);--bg-color:var(--main-color);--border-color:var(--main-color);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-m);--margin-icon:var(--padding-vertical);--icon-size:var(--bl-size-m);--font:var(--bl-font-title-3-medium);--height:var(--bl-size-2xl);display:flex;gap:var(--margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--height);border:solid 1px var(--border-color);border-radius:6px;text-decoration:none;padding:var(--padding-vertical) var(--padding-horizontal);cursor:pointer;background-color:var(--bg-color);color:var(--content-color);font:var(--font);font-kerning:none;user-select:none}:host(:hover) .button,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']) .button{--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-2xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl)}:host([size='large']) .button{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-xl);--margin-icon:var(--bl-size-2xs);--height:var(--bl-size-3xl)}.button:focus{outline:0}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host .has-icon:not(.has-content){--padding-horizontal:var(--padding-vertical);--margin-icon:0}:host([variant='secondary']) .button{--bg-color:transparent;--content-color:var(--main-color)}:host([variant='tertiary']) .button{--content-color:var(--main-color);--border-color:transparent;--bg-color:transparent}:host([kind='neutral']) .button{--main-color:var(--bl-color-secondary);--main-hover-color:var(--bl-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed}:host([disabled]) .button{--main-color:var(--bl-color-tertiary);--main-hover-color:var(--bl-color-tertiary);--content-color:var(--bl-color-content-passive);--bg-color:var(--main-color);pointer-events:none;text-decoration:none}:host([variant='secondary']:hover:not([disabled])) .button,:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--bl-color-primary-background);--bg-color:var(--main-hover-color)}:host([variant='tertiary']:hover:not([disabled])) .button,:host([variant='tertiary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--main-hover-color);--bg-color:var(--text-hover-color)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-button.css';\nimport '../icon/bl-icon';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonKind = 'default' | 'neutral' | 'success' | 'danger';\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type TargetType = '_blank' | '_parent' | '_self' | '_top';\n\n/**\n * @tag bl-button\n * @summary Baklava Button component\n *\n * @cssproperty --bl-button-display - Sets the display property of button. Default value is 'inline-block'.\n *\n */\n@customElement('bl-button')\nexport default class BlButton extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the button variant\n   */\n  @property({ type: String, reflect: true })\n  variant: ButtonVariant = 'primary';\n\n  /**\n   * Sets the button kind\n   */\n  @property({ type: String, reflect: true })\n  kind: ButtonKind = 'default';\n\n  /**\n   * Sets the button size\n   */\n  @property({ type: String, reflect: true })\n  size: ButtonSize = 'medium';\n\n  /**\n   * Sets the button label. Used for accessibility.\n   */\n  @property({ type: String })\n  label: string;\n\n  /**\n   * Sets button as disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Set link url. If set, button will be rendered as anchor tag.\n   */\n  @property({ type: String })\n  href?: string;\n\n  /**\n   * Sets the icon name. Shows icon with bl-icon component\n   */\n  @property({ type: String })\n  icon?: string;\n\n  /**\n   * Sets the anchor target. Used when `href` is set.\n   */\n  @property({ type: String })\n  target?: TargetType = '_self';\n\n  /**\n   * Sets the type of the button. Set `submit` to use button as the submitter of parent form.\n   */\n  @property({ type: String })\n  type: 'submit' | null;\n\n  /**\n   * Fires when button clicked\n   */\n  @event('bl-click') private onClick: EventDispatcher<string>;\n\n  get _hasIconSlot() {\n    return this.querySelector(':scope > [slot=\"icon\"]') !== null;\n  }\n\n  get _hasDefaultSlot() {\n    const childNodes = [...this.childNodes];\n    return childNodes.some(node => {\n      const nodeType = node.nodeType;\n      // has only text node.\n      if (nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n        return true;\n      }\n      // has element node, it should not have slot attribute.\n      if (nodeType === node.ELEMENT_NODE) {\n        if (!(node as HTMLElement).hasAttribute('slot')) {\n          return true;\n        }\n      }\n      return false;\n    });\n  }\n\n  render(): TemplateResult {\n    const isAnchor = !!this.href;\n    const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n    const slots = html`<slot name=\"icon\">${icon}</slot> <span class=\"label\"><slot></slot></span>`;\n    const classes = classMap({\n      'button': true,\n      'has-icon': this.icon || this._hasIconSlot,\n      'has-content': this._hasDefaultSlot,\n    });\n\n    return isAnchor\n      ? html`<a\n          class=${classes}\n          aria-disabled=\"${ifDefined(this.disabled)}\"\n          aria-label=\"${ifDefined(this.label)}\"\n          href=${ifDefined(this.href)}\n          target=${ifDefined(this.target)}\n          role=\"button\"\n          >${slots}</a\n        >`\n      : html`<button\n          class=${classes}\n          aria-disabled=\"${ifDefined(this.disabled)}\"\n          aria-label=\"${ifDefined(this.label)}\"\n          ?disabled=${this.disabled}\n          @click=\"${this._handleClick}\"\n        >\n          ${slots}\n        </button>`;\n  }\n\n  private _handleClick() {\n    this.onClick('Click event fired!');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-button': BlButton;\n  }\n}\n"],
+  "mappings": "+NACO,IAAMA,EAASC,0+FACfC,EAAQF,ECmBf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAyB,UAMzB,UAAmB,UAMnB,UAAmB,SAYnB,cAAW,GAkBX,YAAsB,QAlDtB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CA6DA,IAAI,cAAe,CACjB,OAAO,KAAK,cAAc,wBAAwB,IAAM,IAC1D,CAEA,IAAI,iBAAkB,CAEpB,MADmB,CAAC,GAAG,KAAK,UAAU,EACpB,KAAKC,GAAQ,CA3FnC,IAAAC,EA4FM,IAAMC,EAAWF,EAAK,SAMtB,OAJIE,IAAaF,EAAK,aAAaC,EAAAD,EAAK,cAAL,YAAAC,EAAkB,UAAW,IAI5DC,IAAaF,EAAK,cAChB,CAAEA,EAAqB,aAAa,MAAM,CAKlD,CAAC,CACH,CAEA,QAAyB,CACvB,IAAMG,EAAW,CAAC,CAAC,KAAK,KAClBC,EAAO,KAAK,KAAOC,kBAAqB,KAAK,kBAAoB,GACjEC,EAAQD,sBAAyBD,oDACjCG,EAAUC,EAAS,CACvB,OAAU,GACV,WAAY,KAAK,MAAQ,KAAK,aAC9B,cAAe,KAAK,eACtB,CAAC,EAED,OAAOL,EACHE;AAAA,kBACUE;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,iBAC3BA,EAAU,KAAK,IAAI;AAAA,mBACjBA,EAAU,KAAK,MAAM;AAAA;AAAA,aAE3BH;AAAA,WAELD;AAAA,kBACUE;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,sBACtB,KAAK;AAAA,oBACP,KAAK;AAAA;AAAA,YAEbH;AAAA,kBAEV,CAEQ,cAAe,CACrB,KAAK,QAAQ,oBAAoB,CACnC,CACF,EA/GEI,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBd,EASnB,uBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAdtBd,EAenB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GApBtBd,EAqBnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA1BPd,EA2BnB,qBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhCvBd,EAiCnB,wBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAtCPd,EAuCnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA5CPd,EA6CnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAlDPd,EAmDnB,sBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAxDPd,EAyDnB,oBAK2Ba,EAAA,CAA1BE,EAAM,UAAU,GA9DEf,EA8DQ,uBA9DRA,EAArBa,EAAA,CADCG,EAAc,WAAW,GACLhB",
+  "names": ["styles", "r", "bl_button_default", "BlButton", "s", "bl_button_default", "node", "_a", "nodeType", "isAnchor", "icon", "$", "slots", "classes", "o", "l", "__decorateClass", "e", "event", "n"]
+}

package/dist/components/alert/bl-alert.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-V67B4ADE.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
+import{a}from"../../chunk-SI4AOUS5.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
 //# sourceMappingURL=bl-alert.js.map

package/dist/components/button/bl-button.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-IB7GARWV.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
+import{a}from"../../chunk-SRQS24UV.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
 //# sourceMappingURL=bl-button.js.map

package/dist/components/select/bl-select.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-RMXRDQI4.js";import"../../chunk-KWTSWXUL.js";import"../../chunk-VNGNBBSS.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
+import{a}from"../../chunk-7SDGSJ2P.js";import"../../chunk-KWTSWXUL.js";import"../../chunk-VNGNBBSS.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
 //# sourceMappingURL=bl-select.js.map

package/dist/components/tab-group/bl-tab-group.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-C5HFLPOK.js";import"../../chunk-LZHSSAHO.js";import"../../chunk-IDG5M2QP.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
+import{a}from"../../chunk-C5HFLPOK.js";import"../../chunk-EX6STMCI.js";import"../../chunk-IDG5M2QP.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
 //# sourceMappingURL=bl-tab-group.js.map

package/dist/components/tab-group/tab/bl-tab.js

@@ -1,2 +1,2 @@
-import{a}from"../../../chunk-LZHSSAHO.js";import"../../../chunk-23UFIOHV.js";import"../../../chunk-HG7OBTQS.js";import"../../../chunk-NZ3RGSR6.js";export{a as default};
+import{a}from"../../../chunk-EX6STMCI.js";import"../../../chunk-23UFIOHV.js";import"../../../chunk-HG7OBTQS.js";import"../../../chunk-NZ3RGSR6.js";export{a as default};
 //# sourceMappingURL=bl-tab.js.map

package/dist/custom-elements.json

@@ -203,7 +203,7 @@
               "type": {
                 "text": "ButtonKind"
               },
-              "default": "'contained'",
+              "default": "'default'",
               "description": "Sets the button kind",
               "fieldName": "kind"
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendyol/baklava",
-  "version": "2.0.0-beta.33",
+  "version": "2.0.0-beta.34",
   "description": "Trendyol Baklava Design System",
   "main": "dist/baklava.js",
   "module": "dist/baklava.js",

package/dist/chunk-IB7GARWV.js

@@ -1,18 +0,0 @@
-import{a as n}from"./chunk-2TVOKUHE.js";import{a as h}from"./chunk-ENFFFE4I.js";import{a as d}from"./chunk-23UFIOHV.js";import{a as s,b as a,f as c,g as u,h as r}from"./chunk-HG7OBTQS.js";import{a as o}from"./chunk-NZ3RGSR6.js";var p=s`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative;--bl-button-main-color:var(--bl-color-primary);--bl-button-main-hover-color:var(--bl-color-primary-hover);--bl-button-text-hover-color:var(--bl-color-secondary-background);--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-color);--bl-button-border-color:var(--bl-button-main-color);--bl-button-padding-vertical:var(--bl-size-2xs);--bl-button-padding-horizontal:var(--bl-size-m);--bl-button-margin-icon:var(--bl-button-padding-vertical);--bl-button-icon-size:var(--bl-size-m);--bl-button-font:var(--bl-font-title-3-medium);--bl-button-height:var(--bl-size-2xl)}.button{display:flex;gap:var(--bl-button-margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--bl-button-height);border:solid 1px var(--bl-button-border-color);border-radius:6px;text-decoration:none;padding:var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);cursor:pointer;background-color:var(--bl-button-bg-color);color:var(--bl-button-content-color);font:var(--bl-button-font);font-kerning:none;user-select:none}:host(:hover),:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__){--bl-button-bg-color:var(--bl-button-main-hover-color);--bl-button-border-color:var(--bl-button-main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']){--bl-button-font:var(--bl-font-title-4-medium);--bl-button-padding-vertical:var(--bl-size-3xs);--bl-button-padding-horizontal:var(--bl-size-2xs);--bl-button-icon-size:var(--bl-size-s);--bl-button-height:var(--bl-size-xl)}:host([size='large']){--bl-button-font:var(--bl-font-title-3-medium);--bl-button-padding-vertical:var(--bl-size-xs);--bl-button-padding-horizontal:var(--bl-size-xl);--bl-button-margin-icon:var(--bl-size-2xs);--bl-button-height:var(--bl-size-3xl)}.button:focus{outline:0}:host ::slotted(bl-icon){font-size:var(--bl-button-icon-size)}.has-icon:not(.has-content){--bl-button-padding-horizontal:var(--bl-button-padding-vertical);--bl-button-margin-icon:0}:host([variant='secondary']){--bl-button-main-color:var(--bl-color-secondary);--bl-button-main-hover-color:var(--bl-color-secondary-hover)}:host([variant='success']){--bl-button-main-color:var(--bl-color-success);--bl-button-main-hover-color:var(--bl-color-success-hover)}:host([variant='danger']){--bl-button-main-color:var(--bl-color-danger);--bl-button-main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed;--bl-button-main-color:var(--bl-color-tertiary);--bl-button-main-hover-color:var(--bl-color-tertiary);--bl-button-content-color:var(--bl-color-content-passive);--bl-button-bg-color:var(--bl-button-main-color)}:host([disabled]) .button{pointer-events:none;text-decoration:none}:host([kind='text']){--bl-button-content-color:var(--bl-button-main-color);--bl-button-border-color:transparent;--bl-button-bg-color:transparent}:host([kind='outline']){--bl-button-bg-color:transparent;--bl-button-content-color:var(--bl-button-main-color)}:host([kind='outline']:hover:not([disabled])),:host([kind='outline'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])){--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-hover-color)}:host([kind='text']:hover:not([disabled])),:host([kind='text'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])){--bl-button-content-color:var(--bl-button-main-hover-color);--bl-button-bg-color:var(--bl-button-text-hover-color)}`,v=p;var t=class extends c{constructor(){super(...arguments);this.variant="primary";this.kind="contained";this.size="medium";this.disabled=!1;this.target="_self"}static get styles(){return[v]}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(e=>{var i;let l=e.nodeType;return l===e.TEXT_NODE&&((i=e.textContent)==null?void 0:i.trim())!==""||l===e.ELEMENT_NODE&&!e.hasAttribute("slot")})}render(){let b=!!this.href,e=this.icon?a`<bl-icon name=${this.icon}></bl-icon>`:"",l=a`<slot name="icon">${e}</slot> <span class="label"><slot></slot></span>`,i=h({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return b?a`<a
-          class=${i}
-          aria-disabled="${n(this.disabled)}"
-          aria-label="${n(this.label)}"
-          href=${n(this.href)}
-          target=${n(this.target)}
-          role="button"
-          >${l}</a
-        >`:a`<button
-          class=${i}
-          aria-disabled="${n(this.disabled)}"
-          aria-label="${n(this.label)}"
-          ?disabled=${this.disabled}
-          @click="${this._handleClick}"
-        >
-          ${l}
-        </button>`}_handleClick(){this.onClick("Click event fired!")}};o([r({type:String,reflect:!0})],t.prototype,"variant",2),o([r({type:String,reflect:!0})],t.prototype,"kind",2),o([r({type:String,reflect:!0})],t.prototype,"size",2),o([r({type:String})],t.prototype,"label",2),o([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([r({type:String})],t.prototype,"href",2),o([r({type:String})],t.prototype,"icon",2),o([r({type:String})],t.prototype,"target",2),o([r({type:String})],t.prototype,"type",2),o([d("bl-click")],t.prototype,"onClick",2),t=o([u("bl-button")],t);export{t as a};
-//# sourceMappingURL=chunk-IB7GARWV.js.map

package/dist/chunk-IB7GARWV.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/components/button/bl-button.css", "../src/components/button/bl-button.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative;--bl-button-main-color:var(--bl-color-primary);--bl-button-main-hover-color:var(--bl-color-primary-hover);--bl-button-text-hover-color:var(--bl-color-secondary-background);--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-color);--bl-button-border-color:var(--bl-button-main-color);--bl-button-padding-vertical:var(--bl-size-2xs);--bl-button-padding-horizontal:var(--bl-size-m);--bl-button-margin-icon:var(--bl-button-padding-vertical);--bl-button-icon-size:var(--bl-size-m);--bl-button-font:var(--bl-font-title-3-medium);--bl-button-height:var(--bl-size-2xl)}.button{display:flex;gap:var(--bl-button-margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--bl-button-height);border:solid 1px var(--bl-button-border-color);border-radius:6px;text-decoration:none;padding:var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);cursor:pointer;background-color:var(--bl-button-bg-color);color:var(--bl-button-content-color);font:var(--bl-button-font);font-kerning:none;user-select:none}:host(:hover),:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__){--bl-button-bg-color:var(--bl-button-main-hover-color);--bl-button-border-color:var(--bl-button-main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']){--bl-button-font:var(--bl-font-title-4-medium);--bl-button-padding-vertical:var(--bl-size-3xs);--bl-button-padding-horizontal:var(--bl-size-2xs);--bl-button-icon-size:var(--bl-size-s);--bl-button-height:var(--bl-size-xl)}:host([size='large']){--bl-button-font:var(--bl-font-title-3-medium);--bl-button-padding-vertical:var(--bl-size-xs);--bl-button-padding-horizontal:var(--bl-size-xl);--bl-button-margin-icon:var(--bl-size-2xs);--bl-button-height:var(--bl-size-3xl)}.button:focus{outline:0}:host ::slotted(bl-icon){font-size:var(--bl-button-icon-size)}.has-icon:not(.has-content){--bl-button-padding-horizontal:var(--bl-button-padding-vertical);--bl-button-margin-icon:0}:host([variant='secondary']){--bl-button-main-color:var(--bl-color-secondary);--bl-button-main-hover-color:var(--bl-color-secondary-hover)}:host([variant='success']){--bl-button-main-color:var(--bl-color-success);--bl-button-main-hover-color:var(--bl-color-success-hover)}:host([variant='danger']){--bl-button-main-color:var(--bl-color-danger);--bl-button-main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed;--bl-button-main-color:var(--bl-color-tertiary);--bl-button-main-hover-color:var(--bl-color-tertiary);--bl-button-content-color:var(--bl-color-content-passive);--bl-button-bg-color:var(--bl-button-main-color)}:host([disabled]) .button{pointer-events:none;text-decoration:none}:host([kind='text']){--bl-button-content-color:var(--bl-button-main-color);--bl-button-border-color:transparent;--bl-button-bg-color:transparent}:host([kind='outline']){--bl-button-bg-color:transparent;--bl-button-content-color:var(--bl-button-main-color)}:host([kind='outline']:hover:not([disabled])),:host([kind='outline'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])){--bl-button-content-color:var(--bl-color-primary-background);--bl-button-bg-color:var(--bl-button-main-hover-color)}:host([kind='text']:hover:not([disabled])),:host([kind='text'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])){--bl-button-content-color:var(--bl-button-main-hover-color);--bl-button-bg-color:var(--bl-button-text-hover-color)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-button.css';\nimport '../icon/bl-icon';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger';\nexport type ButtonKind = 'contained' | 'outline' | 'text';\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type TargetType = '_blank' | '_parent' | '_self' | '_top';\n\n/**\n * @tag bl-button\n * @summary Baklava Button component\n *\n * @cssproperty --bl-button-display - Sets the display property of button. Default value is 'inline-block'.\n *\n */\n@customElement('bl-button')\nexport default class BlButton extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the button variant\n   */\n  @property({ type: String, reflect: true })\n  variant: ButtonVariant = 'primary';\n\n  /**\n   * Sets the button kind\n   */\n  @property({ type: String, reflect: true })\n  kind: ButtonKind = 'contained';\n\n  /**\n   * Sets the button size\n   */\n  @property({ type: String, reflect: true })\n  size: ButtonSize = 'medium';\n\n  /**\n   * Sets the button label. Used for accessibility.\n   */\n  @property({ type: String })\n  label: string;\n\n  /**\n   * Sets button as disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Set link url. If set, button will be rendered as anchor tag.\n   */\n  @property({ type: String })\n  href?: string;\n\n  /**\n   * Sets the icon name. Shows icon with bl-icon component\n   */\n  @property({ type: String })\n  icon?: string;\n\n  /**\n   * Sets the anchor target. Used when `href` is set.\n   */\n  @property({ type: String })\n  target?: TargetType = '_self';\n\n  /**\n   * Sets the type of the button. Set `submit` to use button as the submitter of parent form.\n   */\n   @property({ type: String })\n   type: 'submit' | null;\n\n  /**\n   * Fires when button clicked\n   */\n  @event('bl-click') private onClick: EventDispatcher<string>;\n\n  get _hasIconSlot() {\n    return this.querySelector(':scope > [slot=\"icon\"]') !== null;\n  }\n\n  get _hasDefaultSlot() {\n    const childNodes = [...this.childNodes];\n    return childNodes.some(node => {\n      const nodeType = node.nodeType;\n      // has only text node.\n      if (nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n        return true;\n      }\n      // has element node, it should not have slot attribute.\n      if (nodeType === node.ELEMENT_NODE) {\n        if (!(node as HTMLElement).hasAttribute('slot')) {\n          return true;\n        }\n      }\n      return false;\n    });\n  }\n\n  render(): TemplateResult {\n    const isAnchor = !!this.href;\n    const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n    const slots = html`<slot name=\"icon\">${icon}</slot> <span class=\"label\"><slot></slot></span>`;\n    const classes = classMap({\n      'button': true,\n      'has-icon': this.icon || this._hasIconSlot,\n      'has-content': this._hasDefaultSlot,\n    });\n\n    return isAnchor\n      ? html`<a\n          class=${classes}\n          aria-disabled=\"${ifDefined(this.disabled)}\"\n          aria-label=\"${ifDefined(this.label)}\"\n          href=${ifDefined(this.href)}\n          target=${ifDefined(this.target)}\n          role=\"button\"\n          >${slots}</a\n        >`\n      : html`<button\n          class=${classes}\n          aria-disabled=\"${ifDefined(this.disabled)}\"\n          aria-label=\"${ifDefined(this.label)}\"\n          ?disabled=${this.disabled}\n          @click=\"${this._handleClick}\"\n        >\n          ${slots}\n        </button>`;\n  }\n\n  private _handleClick() {\n    this.onClick('Click event fired!');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-button': BlButton;\n  }\n}\n"],
-  "mappings": "oOACO,IAAMA,EAASC,u/GACfC,EAAQF,ECmBf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAyB,UAMzB,UAAmB,YAMnB,UAAmB,SAYnB,cAAW,GAkBX,YAAsB,QAlDtB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CA6DA,IAAI,cAAe,CACjB,OAAO,KAAK,cAAc,wBAAwB,IAAM,IAC1D,CAEA,IAAI,iBAAkB,CAEpB,MADmB,CAAC,GAAG,KAAK,UAAU,EACpB,KAAKC,GAAQ,CA3FnC,IAAAC,EA4FM,IAAMC,EAAWF,EAAK,SAMtB,OAJIE,IAAaF,EAAK,aAAaC,EAAAD,EAAK,cAAL,YAAAC,EAAkB,UAAW,IAI5DC,IAAaF,EAAK,cAChB,CAAEA,EAAqB,aAAa,MAAM,CAKlD,CAAC,CACH,CAEA,QAAyB,CACvB,IAAMG,EAAW,CAAC,CAAC,KAAK,KAClBC,EAAO,KAAK,KAAOC,kBAAqB,KAAK,kBAAoB,GACjEC,EAAQD,sBAAyBD,oDACjCG,EAAUC,EAAS,CACvB,OAAU,GACV,WAAY,KAAK,MAAQ,KAAK,aAC9B,cAAe,KAAK,eACtB,CAAC,EAED,OAAOL,EACHE;AAAA,kBACUE;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,iBAC3BA,EAAU,KAAK,IAAI;AAAA,mBACjBA,EAAU,KAAK,MAAM;AAAA;AAAA,aAE3BH;AAAA,WAELD;AAAA,kBACUE;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,sBACtB,KAAK;AAAA,oBACP,KAAK;AAAA;AAAA,YAEbH;AAAA,kBAEV,CAEQ,cAAe,CACrB,KAAK,QAAQ,oBAAoB,CACnC,CACF,EA/GEI,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBd,EASnB,uBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAdtBd,EAenB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GApBtBd,EAqBnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA1BPd,EA2BnB,qBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhCvBd,EAiCnB,wBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAtCPd,EAuCnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA5CPd,EA6CnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAlDPd,EAmDnB,sBAMCa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAxDRd,EAyDlB,oBAK0Ba,EAAA,CAA1BE,EAAM,UAAU,GA9DEf,EA8DQ,uBA9DRA,EAArBa,EAAA,CADCG,EAAc,WAAW,GACLhB",
-  "names": ["styles", "r", "bl_button_default", "BlButton", "s", "bl_button_default", "node", "_a", "nodeType", "isAnchor", "icon", "$", "slots", "classes", "o", "l", "__decorateClass", "e", "event", "n"]
-}