@trendyol/baklava 2.2.0-beta.14 → 2.2.0-beta.16

package/dist/baklava.js

@@ -1,2 +1,2 @@
-import{c,f as i}from"./chunk-GTDEKKNK.js";import{b as S}from"./chunk-JDCH6CPC.js";import{a as b}from"./chunk-46EV26PW.js";import{a as I}from"./chunk-VSVRDIIK.js";import{a as P}from"./chunk-JJFKQTCC.js";import{a as g}from"./chunk-BACB2XRD.js";import{a as w}from"./chunk-3V7WS57E.js";import{a as u}from"./chunk-IBIMAAYG.js";import{b as T,d as G}from"./chunk-GZ6UX22X.js";import{b as D}from"./chunk-KWPCEINY.js";import{a as B}from"./chunk-TQGTQR3B.js";import{a as m}from"./chunk-QRG3LQVX.js";import{a as s}from"./chunk-IUVH4INI.js";import{a as x}from"./chunk-NJ5NTMOQ.js";import"./chunk-HGGOQO7A.js";import"./chunk-3B64VOWB.js";import{a as h}from"./chunk-TQLVA27P.js";import"./chunk-ANYJUR6Q.js";import{a as n}from"./chunk-TZVDWFVR.js";import{a as r}from"./chunk-XSWME4GN.js";import{a}from"./chunk-H2YTRXAE.js";import{b as f,e as p}from"./chunk-IRM2I2KP.js";import"./chunk-A7DGJXEE.js";import"./chunk-DJOD4BTL.js";import{a as d}from"./chunk-OEWLCX2T.js";import{b as l}from"./chunk-WFXTKCOT.js";import"./chunk-FPMKZ54Q.js";import{a as o,b as e,c as t}from"./chunk-XFVN5XN3.js";import"./chunk-B27KOFJ6.js";import"./chunk-IRDH7CN2.js";import"./chunk-3WPZVKAO.js";import"./chunk-A42CHPBQ.js";import"./chunk-RLMJN536.js";import"./chunk-EUBAYBYO.js";import"./chunk-VO7C5OZC.js";export{r as BlAlert,a as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,G as BlDropdown,D as BlDropdownGroup,T as BlDropdownItem,t as BlIcon,x as BlInput,B as BlPagination,h as BlPopover,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,s as BlSelectOption,S as BlSwitch,I as BlTab,b as BlTabGroup,P as BlTabPanel,g as BlTextarea,w as BlTooltip,e as getIconPath,o as setIconPath};
+import{c,f as i}from"./chunk-GTDEKKNK.js";import{b as S}from"./chunk-JDCH6CPC.js";import{a as b}from"./chunk-46EV26PW.js";import{a as I}from"./chunk-VSVRDIIK.js";import{a as P}from"./chunk-JJFKQTCC.js";import{a as g}from"./chunk-BACB2XRD.js";import{a as w}from"./chunk-6K7C3BGV.js";import{a as u}from"./chunk-IBIMAAYG.js";import{b as T,d as G}from"./chunk-GZ6UX22X.js";import{b as D}from"./chunk-KWPCEINY.js";import{a as B}from"./chunk-TQGTQR3B.js";import{a as m}from"./chunk-QRG3LQVX.js";import{a as s}from"./chunk-IUVH4INI.js";import{a as x}from"./chunk-6QGT5KOI.js";import"./chunk-HGGOQO7A.js";import"./chunk-3B64VOWB.js";import{a as h}from"./chunk-TQLVA27P.js";import"./chunk-ANYJUR6Q.js";import{a as n}from"./chunk-TZVDWFVR.js";import{a as r}from"./chunk-XSWME4GN.js";import{a}from"./chunk-H2YTRXAE.js";import{b as f,e as p}from"./chunk-IRM2I2KP.js";import"./chunk-A7DGJXEE.js";import"./chunk-DJOD4BTL.js";import{a as d}from"./chunk-OEWLCX2T.js";import{b as l}from"./chunk-WFXTKCOT.js";import"./chunk-FPMKZ54Q.js";import{a as o,b as e,c as t}from"./chunk-XFVN5XN3.js";import"./chunk-B27KOFJ6.js";import"./chunk-IRDH7CN2.js";import"./chunk-3WPZVKAO.js";import"./chunk-A42CHPBQ.js";import"./chunk-RLMJN536.js";import"./chunk-EUBAYBYO.js";import"./chunk-VO7C5OZC.js";export{r as BlAlert,a as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,G as BlDropdown,D as BlDropdownGroup,T as BlDropdownItem,t as BlIcon,x as BlInput,B as BlPagination,h as BlPopover,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,s as BlSelectOption,S as BlSwitch,I as BlTab,b as BlTabGroup,P as BlTabPanel,g as BlTextarea,w as BlTooltip,e as getIconPath,o as setIconPath};
 //# sourceMappingURL=baklava.js.map

package/dist/{chunk-3V7WS57E.js → chunk-6K7C3BGV.js}

@@ -1,4 +1,4 @@
-import{a as p}from"./chunk-B27KOFJ6.js";import{a as s,b as a,d as o}from"./chunk-IRDH7CN2.js";import{a as n}from"./chunk-3WPZVKAO.js";import{a as i,b as r,f as l}from"./chunk-EUBAYBYO.js";import{c as t}from"./chunk-VO7C5OZC.js";var h=i`:host{display:contents}.trigger{display:inline-flex;cursor:pointer}bl-popover{--bl-popover-background-color:var(--bl-color-neutral-darker);--bl-popover-arrow-display:block;--bl-popover-border-size:0px;--bl-popover-max-width:424px}.content{color:var(--bl-color-neutral-full)}`,m=h;var e=class extends l{constructor(){super(...arguments);this.placement="top"}static get styles(){return[m]}show(){this.popover.target=this.trigger,this.popover.show(),this.onShow("")}hide(){this.popover.hide(),this.onHide("")}get visible(){return this.popover.visible}triggerTemplate(){return r`<slot
+import{a as p}from"./chunk-B27KOFJ6.js";import{a as s,b as a,d as o}from"./chunk-IRDH7CN2.js";import{a as n}from"./chunk-3WPZVKAO.js";import{a as i,b as r,f as l}from"./chunk-EUBAYBYO.js";import{c as t}from"./chunk-VO7C5OZC.js";var h=i`:host{display:contents}.trigger{display:var(--bl-tooltip-trigger-display, inline-flex);cursor:pointer}bl-popover{--bl-popover-background-color:var(--bl-color-neutral-darker);--bl-popover-arrow-display:block;--bl-popover-border-size:0px;--bl-popover-max-width:424px}.content{color:var(--bl-color-neutral-full)}`,m=h;var e=class extends l{constructor(){super(...arguments);this.placement="top"}static get styles(){return[m]}show(){this.popover.target=this.trigger,this.popover.show(),this.onShow("")}hide(){this.popover.hide(),this.onHide("")}get visible(){return this.popover.visible}triggerTemplate(){return r`<slot
       class="trigger"
       name="tooltip-trigger"
       aria-describedby="tooltip"
@@ -17,4 +17,4 @@ import{a as p}from"./chunk-B27KOFJ6.js";import{a as s,b as a,d as o}from"./chunk
         <slot class="content" id="tooltip" role="tooltip"></slot>
       </bl-popover>
     `}};t([o(".trigger")],e.prototype,"trigger",2),t([o("bl-popover")],e.prototype,"popover",2),t([a({type:String})],e.prototype,"placement",2),t([p("bl-tooltip-show")],e.prototype,"onShow",2),t([p("bl-tooltip-hide")],e.prototype,"onHide",2),e=t([s("bl-tooltip")],e);export{e as a};
-//# sourceMappingURL=chunk-3V7WS57E.js.map
+//# sourceMappingURL=chunk-6K7C3BGV.js.map

package/dist/chunk-6K7C3BGV.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/tooltip/bl-tooltip.css", "../src/components/tooltip/bl-tooltip.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:contents}.trigger{display:var(--bl-tooltip-trigger-display, inline-flex);cursor:pointer}bl-popover{--bl-popover-background-color:var(--bl-color-neutral-darker);--bl-popover-arrow-display:block;--bl-popover-border-size:0px;--bl-popover-max-width:424px}.content{color:var(--bl-color-neutral-full)}`;\nexport default styles;\n", "import { ReferenceElement } from '@floating-ui/core';\nimport { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../popover/bl-popover';\nimport type BlPopover from '../popover/bl-popover';\nimport { Placement } from '../popover/bl-popover';\nimport style from './bl-tooltip.css';\n\n/**\n * @tag bl-tooltip\n * @summary Baklava Tooltip component\n * @dependency bl-popover\n *\n * @cssproperty [--bl-tooltip-trigger-display=inline-flex] Set the display of the tooltip trigger.\n */\n@customElement('bl-tooltip')\nexport default class BlTooltip extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  @query('.trigger') private trigger: ReferenceElement;\n  @query('bl-popover') private popover: BlPopover;\n\n  /**\n   * Sets placement of the tooltip\n   */\n  @property({ type: String })\n  placement: Placement = 'top';\n\n  /**\n   * Fires when hovering over a trigger\n   */\n  @event('bl-tooltip-show') private onShow: EventDispatcher<string>;\n\n  /**\n   * Fires when leaving over from trigger\n   */\n  @event('bl-tooltip-hide') private onHide: EventDispatcher<string>;\n\n  /**\n   * Shows tooltip\n   */\n  show() {\n    this.popover.target = this.trigger;\n    this.popover.show();\n    this.onShow('');\n  }\n\n  /**\n   * Hides tooltip\n   */\n  hide() {\n    this.popover.hide();\n    this.onHide('');\n  }\n\n  /**\n   * Gives the visibility status of the tooltip\n   */\n  get visible(): boolean {\n    return this.popover.visible;\n  }\n\n  private triggerTemplate() {\n    return html`<slot\n      class=\"trigger\"\n      name=\"tooltip-trigger\"\n      aria-describedby=\"tooltip\"\n      @focus=${{ handleEvent: () => this.show(), capture: true }}\n      @blur=${{ handleEvent: () => this.hide(), capture: true }}\n      @mouseover=${() => this.show()}\n      @mouseleave=${() => this.hide()}\n    >\n    </slot>`;\n  }\n\n  render(): TemplateResult {\n    return html`\n      ${this.triggerTemplate()}\n      <bl-popover\n        .target=\"${this.trigger}\"\n        placement=\"${ifDefined(this.placement)}\"\n        @bl-popover-hide=\"${() => this.onHide('')}\"\n      >\n        <slot class=\"content\" id=\"tooltip\" role=\"tooltip\"></slot>\n      </bl-popover>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-tooltip': BlTooltip;\n  }\n}\n"],
+  "mappings": "oOACO,IAAMA,EAAS,yTACfC,EAAQD,ECgBf,IAAqBE,EAArB,cAAuCC,CAAW,CAAlD,kCAYE,eAAuB,MAXvB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAwBA,MAAO,CACL,KAAK,QAAQ,OAAS,KAAK,QAC3B,KAAK,QAAQ,KAAK,EAClB,KAAK,OAAO,EAAE,CAChB,CAKA,MAAO,CACL,KAAK,QAAQ,KAAK,EAClB,KAAK,OAAO,EAAE,CAChB,CAKA,IAAI,SAAmB,CACrB,OAAO,KAAK,QAAQ,OACtB,CAEQ,iBAAkB,CACxB,OAAOC;AAAA;AAAA;AAAA;AAAA,eAII,CAAE,YAAa,IAAM,KAAK,KAAK,EAAG,QAAS,EAAK;AAAA,cACjD,CAAE,YAAa,IAAM,KAAK,KAAK,EAAG,QAAS,EAAK;AAAA,mBAC3C,IAAM,KAAK,KAAK;AAAA,oBACf,IAAM,KAAK,KAAK;AAAA;AAAA,YAGlC,CAEA,QAAyB,CACvB,OAAOA;AAAA,QACH,KAAK,gBAAgB;AAAA;AAAA,mBAEV,KAAK;AAAA,qBACHC,EAAU,KAAK,SAAS;AAAA,4BACjB,IAAM,KAAK,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA,KAK9C,CACF,EApE6BC,EAAA,CAA1BC,EAAM,UAAU,GALEN,EAKQ,uBACEK,EAAA,CAA5BC,EAAM,YAAY,GANAN,EAMU,uBAM7BK,EAAA,CADCE,EAAS,CAAE,KAAM,MAAO,CAAC,GAXPP,EAYnB,yBAKkCK,EAAA,CAAjCG,EAAM,iBAAiB,GAjBLR,EAiBe,sBAKAK,EAAA,CAAjCG,EAAM,iBAAiB,GAtBLR,EAsBe,sBAtBfA,EAArBK,EAAA,CADCE,EAAc,YAAY,GACNP",
+  "names": ["styles", "bl_tooltip_default", "BlTooltip", "s", "bl_tooltip_default", "y", "l", "__decorateClass", "i", "e", "event"]
+}

package/dist/{chunk-NJ5NTMOQ.js → chunk-6QGT5KOI.js}

@@ -1,12 +1,16 @@
-import{a as m}from"./chunk-HGGOQO7A.js";import{a as f}from"./chunk-A7DGJXEE.js";import{a as g}from"./chunk-DJOD4BTL.js";import{a as u}from"./chunk-WFXTKCOT.js";import{a as p}from"./chunk-FPMKZ54Q.js";import{a as n}from"./chunk-B27KOFJ6.js";import{a as b,b as i,c,d as v}from"./chunk-IRDH7CN2.js";import{a as r}from"./chunk-3WPZVKAO.js";import{a as h,b as o,f as d}from"./chunk-EUBAYBYO.js";import{c as t}from"./chunk-VO7C5OZC.js";var V=h`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding) - var(--border-size)) 0 calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding) - var(--border-size));background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in .1s;font:var(--input-font);top:var(--padding-vertical);left:var(--bl-input-padding-start, var(--padding-horizontal));right:var(--bl-input-padding-end, var(--padding-horizontal));pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) + var(--icon-size) + var(--padding-vertical))}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0 0 0 var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within, .wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);/**
+import{a as m}from"./chunk-HGGOQO7A.js";import{a as f}from"./chunk-A7DGJXEE.js";import{a as g}from"./chunk-DJOD4BTL.js";import{a as u}from"./chunk-WFXTKCOT.js";import{a as p}from"./chunk-FPMKZ54Q.js";import{a as n}from"./chunk-B27KOFJ6.js";import{a as b,b as i,c,d as v}from"./chunk-IRDH7CN2.js";import{a as r}from"./chunk-3WPZVKAO.js";import{a as h,b as l,f as d}from"./chunk-EUBAYBYO.js";import{c as t}from"./chunk-VO7C5OZC.js";var S=h`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding) - var(--border-size)) 0 calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding) - var(--border-size));background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in .1s;font:var(--input-font);top:var(--padding-vertical);left:var(--bl-input-padding-start, var(--padding-horizontal));right:var(--bl-input-padding-end, var(--padding-horizontal));pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) + var(--icon-size) + var(--padding-vertical))}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0 0 0 var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within, .wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);/**
    * Some browsers doesn't allow setting background-color
    * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
    */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);/**
    * Some browsers doesn't allow setting background-color
    * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
-   */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding));right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.dirty.invalid .custom-icon ~ .error-icon{display:none}`,y=V;var e=class extends g(d){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.autofocus=!1;this.size="medium";this.disabled=!1;this.readonly=!1;this.labelFixed=!1;this.onKeydown=a=>{a.code==="Enter"&&this.form&&u(this.form)};this.dirty=!1;this.passwordVisible=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[y]}set customInvalidText(a){this._customInvalidText=a,this.setValue(this.value)}get customInvalidText(){return this._customInvalidText}connectedCallback(){var a;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),(a=this.form)==null||a.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown)}textVisibilityToggle(){this.passwordVisible=!this.passwordVisible}validityCallback(){var a;return this.onInvalid(this.internals.validity),this.customInvalidText||((a=this.validationTarget)==null?void 0:a.validationMessage)}async forceCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(this.customInvalidText||"An error occurred"),this.setValue(this.value),this.reportValidity()}async clearCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(""),this.setValue(this.value),this.reportValidity()}reportValidity(){return this.dirty=!0,this.requestUpdate(),this.checkValidity()}inputHandler(a){let l=a.target.value;this.value=l,this.onInput(l)}changeHandler(a){let l=a.target.value;this.dirty=!0,this.value=l,this.onChange(l)}firstUpdated(){this.setValue(this.value)}async updated(a){a.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}render(){let a=this.checkValidity()?"":o`<p id="errorMessage" aria-live="polite" class="invalid-text">
+   */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon),::slotted(bl-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding));right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}`,y=S;var e=class extends g(d){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.autofocus=!1;this.size="medium";this.disabled=!1;this.readonly=!1;this.labelFixed=!1;this.onKeydown=a=>{a.code==="Enter"&&this.form&&u(this.form)};this.dirty=!1;this.passwordVisible=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[y]}set customInvalidText(a){this._customInvalidText=a,this.setValue(this.value)}get customInvalidText(){return this._customInvalidText}connectedCallback(){var a;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),(a=this.form)==null||a.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown)}textVisibilityToggle(){this.passwordVisible=!this.passwordVisible}validityCallback(){var a;return this.onInvalid(this.internals.validity),this.customInvalidText||((a=this.validationTarget)==null?void 0:a.validationMessage)}async forceCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(this.customInvalidText||"An error occurred"),this.setValue(this.value),this.reportValidity()}async clearCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(""),this.setValue(this.value),this.reportValidity()}reportValidity(){return this.dirty=!0,this.requestUpdate(),this.checkValidity()}inputHandler(a){let o=a.target.value;this.value=o,this.onInput(o)}changeHandler(a){let o=a.target.value;this.dirty=!0,this.value=o,this.onChange(o)}firstUpdated(){this.setValue(this.value)}async updated(a){a.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}render(){let a=this.checkValidity()?"":l`<p id="errorMessage" aria-live="polite" class="invalid-text">
           ${this.validationMessage}
-        </p>`,l=this.helpText?o`<p id="helpText" class="help-text">${this.helpText}</p>`:"",x=this.icon?o`<bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",w=this.label?o`<label for=${this.inputId}>${this.label}</label>`:"",s=this.type==="password",k=s?o`<bl-button
+        </p>`,o=this.helpText?l`<p id="helpText" class="help-text">${this.helpText}</p>`:"",x=l`
+      <slot name="icon">
+        ${this.icon?l`<bl-icon name="${this.icon}"></bl-icon>`:l`<bl-icon class="error-icon" name="alert"></bl-icon>`}
+      </slot>
+    `,w=this.label?l`<label for=${this.inputId}>${this.label}</label>`:"",s=this.type==="password",k=s?l`<bl-button
           size="small"
           kind="neutral"
           variant="tertiary"
@@ -16,13 +20,13 @@ import{a as m}from"./chunk-HGGOQO7A.js";import{a as f}from"./chunk-A7DGJXEE.js";
         >
           <bl-icon class="reveal-icon" slot="icon" name="eye_on"></bl-icon>
           <bl-icon class="reveal-icon" slot="icon" name="eye_off"></bl-icon>
-        </bl-button>`:"",z={wrapper:!0,dirty:this.dirty,invalid:!this.checkValidity(),"has-icon":s||this.icon||this.dirty&&!this.checkValidity(),"has-value":this.value!==null&&this.value!==""},$=this.passwordVisible?"text":"password",T=s?$:this.type;return o`<div class=${p(z)}>
+        </bl-button>`:"",z=this.icon||this._hasIconSlot,$={wrapper:!0,dirty:this.dirty,invalid:!this.checkValidity(),"has-icon":s||z||this.dirty&&!this.checkValidity(),"has-value":this.value!==null&&this.value!==""},T=this.passwordVisible?"text":"password",V=s?T:this.type;return l`<div class=${p($)}>
       ${w}
       <fieldset class="input-wrapper">
         <legend><span>${this.label}</span></legend>
         <input
           id=${this.inputId}
-          type=${T}
+          type=${V}
           .value=${f(this.value)}
           inputmode="${r(this.inputmode)}"
           ?autofocus=${this.autofocus}
@@ -45,9 +49,8 @@ import{a as m}from"./chunk-HGGOQO7A.js";import{a as f}from"./chunk-A7DGJXEE.js";
         />
         <div class="icon">
           ${k} ${x}
-          <bl-icon class="error-icon" name="alert"></bl-icon>
         </div>
       </fieldset>
-      <div class="hint">${a} ${l}</div>
+      <div class="hint">${a} ${o}</div>
     </div>`}};e.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0},e.formControlValidators=m,t([v("input")],e.prototype,"validationTarget",2),t([i({reflect:!0})],e.prototype,"name",2),t([i({reflect:!0})],e.prototype,"type",2),t([i({reflect:!0})],e.prototype,"label",2),t([i({reflect:!0})],e.prototype,"placeholder",2),t([i({reflect:!0})],e.prototype,"value",2),t([i({type:Boolean,reflect:!0})],e.prototype,"required",2),t([i({type:Number,reflect:!0})],e.prototype,"minlength",2),t([i({type:Number,reflect:!0})],e.prototype,"maxlength",2),t([i({reflect:!0})],e.prototype,"min",2),t([i({reflect:!0})],e.prototype,"max",2),t([i({type:String,reflect:!0})],e.prototype,"pattern",2),t([i({type:Number,reflect:!0})],e.prototype,"step",2),t([i({type:String,reflect:!0})],e.prototype,"autocomplete",2),t([i({type:String,reflect:!0})],e.prototype,"inputmode",2),t([i({type:Boolean,reflect:!0})],e.prototype,"autofocus",2),t([i({type:String,reflect:!0})],e.prototype,"icon",2),t([i({type:String,reflect:!0})],e.prototype,"size",2),t([i({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([i({type:Boolean,reflect:!0})],e.prototype,"readonly",2),t([i({type:Boolean,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),t([i({type:String,attribute:"invalid-text",reflect:!0})],e.prototype,"customInvalidText",1),t([i({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),t([n("bl-change")],e.prototype,"onChange",2),t([n("bl-input")],e.prototype,"onInput",2),t([n("bl-invalid")],e.prototype,"onInvalid",2),t([c()],e.prototype,"dirty",2),t([c()],e.prototype,"passwordVisible",2),e=t([b("bl-input")],e);export{e as a};
-//# sourceMappingURL=chunk-NJ5NTMOQ.js.map
+//# sourceMappingURL=chunk-6QGT5KOI.js.map

package/dist/chunk-6QGT5KOI.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding) - var(--border-size)) 0 calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding) - var(--border-size));background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in .1s;font:var(--input-font);top:var(--padding-vertical);left:var(--bl-input-padding-start, var(--padding-horizontal));right:var(--bl-input-padding-end, var(--padding-horizontal));pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) + var(--icon-size) + var(--padding-vertical))}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0 0 0 var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within, .wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);/**\n   * Some browsers doesn't allow setting background-color\n   * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill\n   */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);/**\n   * Some browsers doesn't allow setting background-color\n   * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill\n   */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon),::slotted(bl-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding));right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '@open-wc/form-control';\nimport { submit } from '@open-wc/form-helpers';\nimport { live } from 'lit/directives/live.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { innerInputValidators } from '../../utilities/form-control';\nimport 'element-internals-polyfill';\nimport '../icon/bl-icon';\nimport '../button/bl-button';\n\nimport style from './bl-input.css';\n\nexport type InputSize = 'small' | 'medium' | 'large';\n/**\n * @tag bl-input\n * @summary Baklava Input component\n *\n * @cssproperty [--bl-input-padding-start] Sets the padding start\n * @cssproperty [--bl-input-padding-end] Sets the padding end\n */\n@customElement('bl-input')\nexport default class BlInput extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static formControlValidators = innerInputValidators;\n\n  @query('input')\n  validationTarget: HTMLInputElement;\n\n  /**\n   * Sets name of the input\n   */\n  @property({ reflect: true })\n  name?: string;\n\n  /**\n   * Type of the input. It's used to set `type` attribute of native input inside. Only `text`, `number` and `password` is supported for now.\n   */\n  @property({ reflect: true })\n  type: 'text' | 'date' | 'password' | 'number' | 'tel' | 'url' = 'text';\n\n  /**\n   * Sets label of the input\n   */\n  @property({ reflect: true })\n  label?: string;\n\n  /**\n   * Sets placeholder of the input\n   */\n  @property({ reflect: true })\n  placeholder?: string;\n\n  /**\n   * Sets initial value of the input\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * Makes input a mandatory field\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Sets minimum length of the input\n   */\n  @property({ type: Number, reflect: true })\n  minlength?: number;\n\n  /**\n   * Sets maximum length of the input\n   */\n  @property({ type: Number, reflect: true })\n  maxlength?: number;\n\n  /**\n   * Sets the minimum acceptable value for the input\n   */\n  @property({ reflect: true })\n  min?: number | string;\n\n  /**\n   * Sets the maximum acceptable value for the input\n   */\n  @property({ reflect: true })\n  max?: number | string;\n\n  /**\n   * Sets a regex pattern form the input validation\n   */\n  @property({ type: String, reflect: true })\n  pattern?: string;\n\n  /**\n   * Sets the increase and decrease step to a `number` input\n   */\n  @property({ type: Number, reflect: true })\n  step?: number;\n\n  /**\n   * Hints browser to autocomplete this field.\n   */\n  @property({ type: String, reflect: true })\n  autocomplete: string;\n\n  /**\n   * Sets the input mode of the field for asking browser to show the desired keyboard.\n   */\n  @property({ type: String, reflect: true })\n  inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /**\n   * Sets input to get keyboard focus automatically\n   */\n  @property({ type: Boolean, reflect: true })\n  autofocus = false;\n\n  /**\n   * Sets the custom icon name. `bl-icon` component is used to show an icon\n   */\n  @property({ type: String, reflect: true })\n  icon?: string;\n\n  /**\n   * Sets input size.\n   */\n  @property({ type: String, reflect: true })\n  size?: InputSize = 'medium';\n\n  /**\n   * Disables the input\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Makes the input readonly.\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Makes label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: 'label-fixed', reflect: true })\n  labelFixed = false;\n\n  /**\n   * Overrides error message. This message will override default error messages\n   */\n  @property({ type: String, attribute: 'invalid-text', reflect: true })\n  set customInvalidText(value: string) {\n    this._customInvalidText = value;\n    this.setValue(this.value);\n  }\n\n  get customInvalidText(): string {\n    return this._customInvalidText;\n  }\n\n  private _customInvalidText: string;\n\n  /**\n   * Adds help text\n   */\n  @property({ type: String, attribute: 'help-text', reflect: true })\n  helpText?: string;\n\n  /**\n   * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n   */\n  @event('bl-change') private onChange: EventDispatcher<string>;\n\n  /**\n   * Fires when the value of an input element has been changed.\n   */\n  @event('bl-input') private onInput: EventDispatcher<string>;\n\n  /**\n   * Fires when the value of an input element has been changed.\n   */\n  @event('bl-invalid') private onInvalid: EventDispatcher<ValidityState>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeydown);\n\n    this.form?.addEventListener('submit', () => {\n      this.reportValidity();\n    });\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.onKeydown);\n  }\n\n  private onKeydown = (event: KeyboardEvent): void => {\n    if (event.code === 'Enter' && this.form) {\n      submit(this.form);\n    }\n  };\n\n  @state() private dirty = false;\n\n  @state() private passwordVisible = false;\n\n  private textVisibilityToggle() {\n    this.passwordVisible = !this.passwordVisible;\n  }\n\n  validityCallback(): string | void {\n    this.onInvalid(this.internals.validity);\n    return this.customInvalidText || this.validationTarget?.validationMessage;\n  }\n\n  /**\n   * Force to set input as in invalid state.\n   */\n  async forceCustomError() {\n    await this.updateComplete;\n    this.validationTarget.setCustomValidity(this.customInvalidText || 'An error occurred');\n    this.setValue(this.value);\n    this.reportValidity();\n  }\n\n  /**\n   * Clear forced invalid state\n   */\n  async clearCustomError() {\n    await this.updateComplete;\n    this.validationTarget.setCustomValidity('');\n    this.setValue(this.value);\n    this.reportValidity();\n  }\n\n  reportValidity() {\n    this.dirty = true;\n    this.requestUpdate();\n    return this.checkValidity();\n  }\n\n  private inputHandler(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n\n    this.value = value;\n    this.onInput(value);\n  }\n\n  private changeHandler(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n\n    this.dirty = true;\n    this.value = value;\n    this.onChange(value);\n  }\n\n  firstUpdated() {\n    this.setValue(this.value);\n  }\n\n  protected async updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      this.setValue(this.value);\n\n      await this.validationComplete;\n\n      this.requestUpdate();\n    }\n  }\n\n  private inputId = Math.random().toString(36).substring(2);\n\n  private get _hasIconSlot() {\n    return this.querySelector(':scope > [slot=\"icon\"]') !== null;\n  }\n\n  render(): TemplateResult {\n    const invalidMessage = !this.checkValidity()\n      ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n          ${this.validationMessage}\n        </p>`\n      : ``;\n    const helpMessage = this.helpText\n      ? html`<p id=\"helpText\" class=\"help-text\">${this.helpText}</p>`\n      : ``;\n\n    const icon = html`\n      <slot name=\"icon\">\n        ${this.icon\n          ? html`<bl-icon name=\"${this.icon}\"></bl-icon>`\n          : html`<bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>`\n        }\n      </slot>\n    `;\n\n    const label = this.label ? html`<label for=${this.inputId}>${this.label}</label>` : '';\n    const passwordInput = this.type === 'password';\n\n    const revealButton = passwordInput\n      ? html`<bl-button\n          size=\"small\"\n          kind=\"neutral\"\n          variant=\"tertiary\"\n          class=\"${classMap({\n            'reveal-button': true,\n            'password-visible': this.passwordVisible,\n          })}\"\n          aria-label=\"Toggle password reveal\"\n          @bl-click=\"${this.textVisibilityToggle}\"\n        >\n          <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_on\"></bl-icon>\n          <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_off\"></bl-icon>\n        </bl-button>`\n      : '';\n\n    const hasCustomIcon = this.icon || this._hasIconSlot;\n    const classes = {\n      'wrapper': true,\n      'dirty': this.dirty,\n      'invalid': !this.checkValidity(),\n      'has-icon': passwordInput || hasCustomIcon || (this.dirty && !this.checkValidity()),\n      'has-value': this.value !== null && this.value !== '',\n    };\n\n    const passwordType = this.passwordVisible ? 'text' : 'password';\n    const inputType = passwordInput ? passwordType : this.type;\n\n    return html`<div class=${classMap(classes)}>\n      ${label}\n      <fieldset class=\"input-wrapper\">\n        <legend><span>${this.label}</span></legend>\n        <input\n          id=${this.inputId}\n          type=${inputType}\n          .value=${live(this.value)}\n          inputmode=\"${ifDefined(this.inputmode)}\"\n          ?autofocus=${this.autofocus}\n          autocomplete=\"${ifDefined(this.autocomplete)}\"\n          placeholder=\"${ifDefined(this.placeholder)}\"\n          minlength=\"${ifDefined(this.minlength)}\"\n          maxlength=\"${ifDefined(this.maxlength)}\"\n          min=\"${ifDefined(this.min)}\"\n          max=\"${ifDefined(this.max)}\"\n          pattern=\"${ifDefined(this.pattern)}\"\n          step=\"${ifDefined(this.step)}\"\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          @change=${this.changeHandler}\n          @input=${this.inputHandler}\n          aria-invalid=${this.checkValidity() ? 'false' : 'true'}\n          aria-describedby=${ifDefined(this.helpText ? 'helpText' : undefined)}\n          aria-errormessage=${ifDefined(this.checkValidity() ? undefined : 'errorMessage')}\n        />\n        <div class=\"icon\">\n          ${revealButton} ${icon}\n        </div>\n      </fieldset>\n      <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-input': BlInput;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "i", "bl_input_default", "BlInput", "FormControlMixin", "s", "event", "submit", "bl_input_default", "value", "_a", "changedProperties", "invalidMessage", "y", "helpMessage", "icon", "label", "passwordInput", "revealButton", "o", "hasCustomIcon", "classes", "passwordType", "inputType", "l", "innerInputValidators", "__decorateClass", "i", "e", "t"]
+}

package/dist/components/input/bl-input.d.ts

@@ -149,6 +149,7 @@ export default class BlInput extends BlInput_base {
     firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): Promise<void>;
     private inputId;
+    private get _hasIconSlot();
     render(): TemplateResult;
 }
 declare global {

package/dist/components/input/bl-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bl-input.d.ts","sourceRoot":"","sources":["../../../src/components/input/bl-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AASvF,OAAO,4BAA4B,CAAC;AACpC,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAI7B,oBAAY,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;;AACrD;;;;;;GAMG;AAEH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,YAA4B;IAC/D,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IACD,MAAM,CAAC,iBAAiB;;;;;MAA6D;IAErF,MAAM,CAAC,qBAAqB;;;;;QAAwB;IAGpD,gBAAgB,EAAE,gBAAgB,CAAC;IAEnC;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAU;IAEvE;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExF;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,IAAI,CAAC,EAAE,SAAS,CAAY;IAE5B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IACH,IACI,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAGlC;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,OAAO,CAAC,kBAAkB,CAAS;IAEnC;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACiB,OAAO,CAAC,QAAQ,CAA0B;IAE9D;;OAEG;IACgB,OAAO,CAAC,OAAO,CAA0B;IAE5D;;OAEG;IACkB,OAAO,CAAC,SAAS,CAAiC;IAEvE,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,SAAS,CAIf;IAEO,OAAO,CAAC,KAAK,CAAS;IAEtB,OAAO,CAAC,eAAe,CAAS;IAEzC,OAAO,CAAC,oBAAoB;IAI5B,gBAAgB,IAAI,MAAM,GAAG,IAAI;IAKjC;;OAEG;IACG,gBAAgB;IAOtB;;OAEG;IACG,gBAAgB;IAOtB,cAAc;IAMd,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAQrB,YAAY;cAII,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAUzD,OAAO,CAAC,OAAO,CAA2C;IAE1D,MAAM,IAAI,cAAc;CA6EzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"bl-input.d.ts","sourceRoot":"","sources":["../../../src/components/input/bl-input.ts"],"names":[],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-NJ5NTMOQ.js";import"../../chunk-HGGOQO7A.js";import"../../chunk-3B64VOWB.js";import"../../chunk-A7DGJXEE.js";import"../../chunk-DJOD4BTL.js";import"../../chunk-WFXTKCOT.js";import"../../chunk-FPMKZ54Q.js";import"../../chunk-XFVN5XN3.js";import"../../chunk-B27KOFJ6.js";import"../../chunk-IRDH7CN2.js";import"../../chunk-3WPZVKAO.js";import"../../chunk-A42CHPBQ.js";import"../../chunk-RLMJN536.js";import"../../chunk-EUBAYBYO.js";import"../../chunk-VO7C5OZC.js";export{a as default};
+import{a}from"../../chunk-6QGT5KOI.js";import"../../chunk-HGGOQO7A.js";import"../../chunk-3B64VOWB.js";import"../../chunk-A7DGJXEE.js";import"../../chunk-DJOD4BTL.js";import"../../chunk-WFXTKCOT.js";import"../../chunk-FPMKZ54Q.js";import"../../chunk-XFVN5XN3.js";import"../../chunk-B27KOFJ6.js";import"../../chunk-IRDH7CN2.js";import"../../chunk-3WPZVKAO.js";import"../../chunk-A42CHPBQ.js";import"../../chunk-RLMJN536.js";import"../../chunk-EUBAYBYO.js";import"../../chunk-VO7C5OZC.js";export{a as default};
 //# sourceMappingURL=bl-input.js.map

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-TQGTQR3B.js";import"../../chunk-QRG3LQVX.js";import"../../chunk-IUVH4INI.js";import"../../chunk-NJ5NTMOQ.js";import"../../chunk-HGGOQO7A.js";import"../../chunk-3B64VOWB.js";import"../../chunk-ANYJUR6Q.js";import"../../chunk-A7DGJXEE.js";import"../../chunk-DJOD4BTL.js";import"../../chunk-WFXTKCOT.js";import"../../chunk-FPMKZ54Q.js";import"../../chunk-XFVN5XN3.js";import"../../chunk-B27KOFJ6.js";import"../../chunk-IRDH7CN2.js";import"../../chunk-3WPZVKAO.js";import"../../chunk-A42CHPBQ.js";import"../../chunk-RLMJN536.js";import"../../chunk-EUBAYBYO.js";import"../../chunk-VO7C5OZC.js";export{a as default};
+import{a}from"../../chunk-TQGTQR3B.js";import"../../chunk-QRG3LQVX.js";import"../../chunk-IUVH4INI.js";import"../../chunk-6QGT5KOI.js";import"../../chunk-HGGOQO7A.js";import"../../chunk-3B64VOWB.js";import"../../chunk-ANYJUR6Q.js";import"../../chunk-A7DGJXEE.js";import"../../chunk-DJOD4BTL.js";import"../../chunk-WFXTKCOT.js";import"../../chunk-FPMKZ54Q.js";import"../../chunk-XFVN5XN3.js";import"../../chunk-B27KOFJ6.js";import"../../chunk-IRDH7CN2.js";import"../../chunk-3WPZVKAO.js";import"../../chunk-A42CHPBQ.js";import"../../chunk-RLMJN536.js";import"../../chunk-EUBAYBYO.js";import"../../chunk-VO7C5OZC.js";export{a as default};
 //# sourceMappingURL=bl-pagination.js.map

package/dist/components/tooltip/bl-tooltip.d.ts

@@ -6,7 +6,7 @@ import { Placement } from '../popover/bl-popover';
  * @summary Baklava Tooltip component
  * @dependency bl-popover
  *
- * @property {string} placement - Sets the tooltip placement
+ * @cssproperty [--bl-tooltip-trigger-display=inline-flex] Set the display of the tooltip trigger.
  */
 export default class BlTooltip extends LitElement {
     static get styles(): CSSResultGroup;

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-3V7WS57E.js";import"../../chunk-TQLVA27P.js";import"../../chunk-ANYJUR6Q.js";import"../../chunk-FPMKZ54Q.js";import"../../chunk-B27KOFJ6.js";import"../../chunk-IRDH7CN2.js";import"../../chunk-3WPZVKAO.js";import"../../chunk-RLMJN536.js";import"../../chunk-EUBAYBYO.js";import"../../chunk-VO7C5OZC.js";export{a as default};
+import{a}from"../../chunk-6K7C3BGV.js";import"../../chunk-TQLVA27P.js";import"../../chunk-ANYJUR6Q.js";import"../../chunk-FPMKZ54Q.js";import"../../chunk-B27KOFJ6.js";import"../../chunk-IRDH7CN2.js";import"../../chunk-3WPZVKAO.js";import"../../chunk-RLMJN536.js";import"../../chunk-EUBAYBYO.js";import"../../chunk-VO7C5OZC.js";export{a as default};
 //# sourceMappingURL=bl-tooltip.js.map

package/dist/custom-elements.json

@@ -2076,6 +2076,13 @@
           "kind": "class",
           "description": "",
           "name": "BlTooltip",
+          "cssProperties": [
+            {
+              "description": "Set the display of the tooltip trigger.",
+              "name": "--bl-tooltip-trigger-display",
+              "default": "inline-flex"
+            }
+          ],
           "events": [
             {
               "type": {
@@ -2096,10 +2103,10 @@
             {
               "name": "placement",
               "type": {
-                "text": "string"
+                "text": "Placement"
               },
               "default": "'top'",
-              "description": "Sets the tooltip placement",
+              "description": "Sets placement of the tooltip",
               "fieldName": "placement"
             }
           ],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@trendyol/baklava",
   "type": "module",
-  "version": "2.2.0-beta.14",
+  "version": "2.2.0-beta.16",
   "description": "Trendyol Baklava Design System",
   "main": "dist/baklava.js",
   "module": "dist/baklava.js",
@@ -90,7 +90,7 @@
     "@storybook/testing-library": "^0.1.0",
     "@storybook/web-components": "7.0.18",
     "@storybook/web-components-vite": "^7.0.18",
-    "@types/estree": "0.0.47",
+    "@types/estree": "1.0.0",
     "@types/prettier": "^2.6.4",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",

package/dist/chunk-3V7WS57E.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/components/tooltip/bl-tooltip.css", "../src/components/tooltip/bl-tooltip.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:contents}.trigger{display:inline-flex;cursor:pointer}bl-popover{--bl-popover-background-color:var(--bl-color-neutral-darker);--bl-popover-arrow-display:block;--bl-popover-border-size:0px;--bl-popover-max-width:424px}.content{color:var(--bl-color-neutral-full)}`;\nexport default styles;\n", "import { ReferenceElement } from '@floating-ui/core';\nimport { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../popover/bl-popover';\nimport type BlPopover from '../popover/bl-popover';\nimport { Placement } from '../popover/bl-popover';\nimport style from './bl-tooltip.css';\n\n/**\n * @tag bl-tooltip\n * @summary Baklava Tooltip component\n * @dependency bl-popover\n *\n * @property {string} placement - Sets the tooltip placement\n */\n@customElement('bl-tooltip')\nexport default class BlTooltip extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  @query('.trigger') private trigger: ReferenceElement;\n  @query('bl-popover') private popover: BlPopover;\n\n  /**\n   * Sets placement of the tooltip\n   */\n  @property({ type: String })\n  placement: Placement = 'top';\n\n  /**\n   * Fires when hovering over a trigger\n   */\n  @event('bl-tooltip-show') private onShow: EventDispatcher<string>;\n\n  /**\n   * Fires when leaving over from trigger\n   */\n  @event('bl-tooltip-hide') private onHide: EventDispatcher<string>;\n\n  /**\n   * Shows tooltip\n   */\n  show() {\n    this.popover.target = this.trigger;\n    this.popover.show();\n    this.onShow('');\n  }\n\n  /**\n   * Hides tooltip\n   */\n  hide() {\n    this.popover.hide();\n    this.onHide('');\n  }\n\n  /**\n   * Gives the visibility status of the tooltip\n   */\n  get visible(): boolean {\n    return this.popover.visible;\n  }\n\n  private triggerTemplate() {\n    return html`<slot\n      class=\"trigger\"\n      name=\"tooltip-trigger\"\n      aria-describedby=\"tooltip\"\n      @focus=${{ handleEvent: () => this.show(), capture: true }}\n      @blur=${{ handleEvent: () => this.hide(), capture: true }}\n      @mouseover=${() => this.show()}\n      @mouseleave=${() => this.hide()}\n    >\n    </slot>`;\n  }\n\n  render(): TemplateResult {\n    return html`\n      ${this.triggerTemplate()}\n      <bl-popover\n        .target=\"${this.trigger}\"\n        placement=\"${ifDefined(this.placement)}\"\n        @bl-popover-hide=\"${() => this.onHide('')}\"\n      >\n        <slot class=\"content\" id=\"tooltip\" role=\"tooltip\"></slot>\n      </bl-popover>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-tooltip': BlTooltip;\n  }\n}\n"],
-  "mappings": "oOACO,IAAMA,EAAS,sRACfC,EAAQD,ECgBf,IAAqBE,EAArB,cAAuCC,CAAW,CAAlD,kCAYE,eAAuB,MAXvB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAwBA,MAAO,CACL,KAAK,QAAQ,OAAS,KAAK,QAC3B,KAAK,QAAQ,KAAK,EAClB,KAAK,OAAO,EAAE,CAChB,CAKA,MAAO,CACL,KAAK,QAAQ,KAAK,EAClB,KAAK,OAAO,EAAE,CAChB,CAKA,IAAI,SAAmB,CACrB,OAAO,KAAK,QAAQ,OACtB,CAEQ,iBAAkB,CACxB,OAAOC;AAAA;AAAA;AAAA;AAAA,eAII,CAAE,YAAa,IAAM,KAAK,KAAK,EAAG,QAAS,EAAK;AAAA,cACjD,CAAE,YAAa,IAAM,KAAK,KAAK,EAAG,QAAS,EAAK;AAAA,mBAC3C,IAAM,KAAK,KAAK;AAAA,oBACf,IAAM,KAAK,KAAK;AAAA;AAAA,YAGlC,CAEA,QAAyB,CACvB,OAAOA;AAAA,QACH,KAAK,gBAAgB;AAAA;AAAA,mBAEV,KAAK;AAAA,qBACHC,EAAU,KAAK,SAAS;AAAA,4BACjB,IAAM,KAAK,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA,KAK9C,CACF,EApE6BC,EAAA,CAA1BC,EAAM,UAAU,GALEN,EAKQ,uBACEK,EAAA,CAA5BC,EAAM,YAAY,GANAN,EAMU,uBAM7BK,EAAA,CADCE,EAAS,CAAE,KAAM,MAAO,CAAC,GAXPP,EAYnB,yBAKkCK,EAAA,CAAjCG,EAAM,iBAAiB,GAjBLR,EAiBe,sBAKAK,EAAA,CAAjCG,EAAM,iBAAiB,GAtBLR,EAsBe,sBAtBfA,EAArBK,EAAA,CADCE,EAAc,YAAY,GACNP",
-  "names": ["styles", "bl_tooltip_default", "BlTooltip", "s", "bl_tooltip_default", "y", "l", "__decorateClass", "i", "e", "event"]
-}

package/dist/chunk-NJ5NTMOQ.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding) - var(--border-size)) 0 calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding) - var(--border-size));background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in .1s;font:var(--input-font);top:var(--padding-vertical);left:var(--bl-input-padding-start, var(--padding-horizontal));right:var(--bl-input-padding-end, var(--padding-horizontal));pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) + var(--icon-size) + var(--padding-vertical))}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0 0 0 var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within, .wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);/**\n   * Some browsers doesn't allow setting background-color\n   * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill\n   */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);/**\n   * Some browsers doesn't allow setting background-color\n   * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill\n   */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding));right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.dirty.invalid .custom-icon ~ .error-icon{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '@open-wc/form-control';\nimport { submit } from '@open-wc/form-helpers';\nimport { live } from 'lit/directives/live.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { innerInputValidators } from '../../utilities/form-control';\nimport 'element-internals-polyfill';\nimport '../icon/bl-icon';\nimport '../button/bl-button';\n\nimport style from './bl-input.css';\n\nexport type InputSize = 'small' | 'medium' | 'large';\n/**\n * @tag bl-input\n * @summary Baklava Input component\n *\n * @cssproperty [--bl-input-padding-start] Sets the padding start\n * @cssproperty [--bl-input-padding-end] Sets the padding end\n */\n@customElement('bl-input')\nexport default class BlInput extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static formControlValidators = innerInputValidators;\n\n  @query('input')\n  validationTarget: HTMLInputElement;\n\n  /**\n   * Sets name of the input\n   */\n  @property({ reflect: true })\n  name?: string;\n\n  /**\n   * Type of the input. It's used to set `type` attribute of native input inside. Only `text`, `number` and `password` is supported for now.\n   */\n  @property({ reflect: true })\n  type: 'text' | 'date' | 'password' | 'number' | 'tel' | 'url' = 'text';\n\n  /**\n   * Sets label of the input\n   */\n  @property({ reflect: true })\n  label?: string;\n\n  /**\n   * Sets placeholder of the input\n   */\n  @property({ reflect: true })\n  placeholder?: string;\n\n  /**\n   * Sets initial value of the input\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * Makes input a mandatory field\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Sets minimum length of the input\n   */\n  @property({ type: Number, reflect: true })\n  minlength?: number;\n\n  /**\n   * Sets maximum length of the input\n   */\n  @property({ type: Number, reflect: true })\n  maxlength?: number;\n\n  /**\n   * Sets the minimum acceptable value for the input\n   */\n  @property({ reflect: true })\n  min?: number | string;\n\n  /**\n   * Sets the maximum acceptable value for the input\n   */\n  @property({ reflect: true })\n  max?: number | string;\n\n  /**\n   * Sets a regex pattern form the input validation\n   */\n  @property({ type: String, reflect: true })\n  pattern?: string;\n\n  /**\n   * Sets the increase and decrease step to a `number` input\n   */\n  @property({ type: Number, reflect: true })\n  step?: number;\n\n  /**\n   * Hints browser to autocomplete this field.\n   */\n  @property({ type: String, reflect: true })\n  autocomplete: string;\n\n  /**\n   * Sets the input mode of the field for asking browser to show the desired keyboard.\n   */\n  @property({ type: String, reflect: true })\n  inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /**\n   * Sets input to get keyboard focus automatically\n   */\n  @property({ type: Boolean, reflect: true })\n  autofocus = false;\n\n  /**\n   * Sets the custom icon name. `bl-icon` component is used to show an icon\n   */\n  @property({ type: String, reflect: true })\n  icon?: string;\n\n  /**\n   * Sets input size.\n   */\n  @property({ type: String, reflect: true })\n  size?: InputSize = 'medium';\n\n  /**\n   * Disables the input\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Makes the input readonly.\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Makes label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: 'label-fixed', reflect: true })\n  labelFixed = false;\n\n  /**\n   * Overrides error message. This message will override default error messages\n   */\n  @property({ type: String, attribute: 'invalid-text', reflect: true })\n  set customInvalidText(value: string) {\n    this._customInvalidText = value;\n    this.setValue(this.value);\n  }\n\n  get customInvalidText(): string {\n    return this._customInvalidText;\n  }\n\n  private _customInvalidText: string;\n\n  /**\n   * Adds help text\n   */\n  @property({ type: String, attribute: 'help-text', reflect: true })\n  helpText?: string;\n\n  /**\n   * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n   */\n  @event('bl-change') private onChange: EventDispatcher<string>;\n\n  /**\n   * Fires when the value of an input element has been changed.\n   */\n  @event('bl-input') private onInput: EventDispatcher<string>;\n\n  /**\n   * Fires when the value of an input element has been changed.\n   */\n  @event('bl-invalid') private onInvalid: EventDispatcher<ValidityState>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeydown);\n\n    this.form?.addEventListener('submit', () => {\n      this.reportValidity();\n    });\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.onKeydown);\n  }\n\n  private onKeydown = (event: KeyboardEvent): void => {\n    if (event.code === 'Enter' && this.form) {\n      submit(this.form);\n    }\n  };\n\n  @state() private dirty = false;\n\n  @state() private passwordVisible = false;\n\n  private textVisibilityToggle() {\n    this.passwordVisible = !this.passwordVisible;\n  }\n\n  validityCallback(): string | void {\n    this.onInvalid(this.internals.validity);\n    return this.customInvalidText || this.validationTarget?.validationMessage;\n  }\n\n  /**\n   * Force to set input as in invalid state.\n   */\n  async forceCustomError() {\n    await this.updateComplete;\n    this.validationTarget.setCustomValidity(this.customInvalidText || 'An error occurred');\n    this.setValue(this.value);\n    this.reportValidity();\n  }\n\n  /**\n   * Clear forced invalid state\n   */\n  async clearCustomError() {\n    await this.updateComplete;\n    this.validationTarget.setCustomValidity('');\n    this.setValue(this.value);\n    this.reportValidity();\n  }\n\n  reportValidity() {\n    this.dirty = true;\n    this.requestUpdate();\n    return this.checkValidity();\n  }\n\n  private inputHandler(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n\n    this.value = value;\n    this.onInput(value);\n  }\n\n  private changeHandler(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n\n    this.dirty = true;\n    this.value = value;\n    this.onChange(value);\n  }\n\n  firstUpdated() {\n    this.setValue(this.value);\n  }\n\n  protected async updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      this.setValue(this.value);\n\n      await this.validationComplete;\n\n      this.requestUpdate();\n    }\n  }\n\n  private inputId = Math.random().toString(36).substring(2);\n\n  render(): TemplateResult {\n    const invalidMessage = !this.checkValidity()\n      ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n          ${this.validationMessage}\n        </p>`\n      : ``;\n    const helpMessage = this.helpText\n      ? html`<p id=\"helpText\" class=\"help-text\">${this.helpText}</p>`\n      : ``;\n\n    const icon = this.icon ? html`<bl-icon class=\"custom-icon\" name=\"${this.icon}\"></bl-icon>` : '';\n    const label = this.label ? html`<label for=${this.inputId}>${this.label}</label>` : '';\n    const passwordInput = this.type === 'password';\n\n    const revealButton = passwordInput\n      ? html`<bl-button\n          size=\"small\"\n          kind=\"neutral\"\n          variant=\"tertiary\"\n          class=\"${classMap({\n            'reveal-button': true,\n            'password-visible': this.passwordVisible,\n          })}\"\n          aria-label=\"Toggle password reveal\"\n          @bl-click=\"${this.textVisibilityToggle}\"\n        >\n          <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_on\"></bl-icon>\n          <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_off\"></bl-icon>\n        </bl-button>`\n      : '';\n\n    const classes = {\n      'wrapper': true,\n      'dirty': this.dirty,\n      'invalid': !this.checkValidity(),\n      'has-icon': passwordInput || this.icon || (this.dirty && !this.checkValidity()),\n      'has-value': this.value !== null && this.value !== '',\n    };\n\n    const passwordType = this.passwordVisible ? 'text' : 'password';\n    const inputType = passwordInput ? passwordType : this.type;\n\n    return html`<div class=${classMap(classes)}>\n      ${label}\n      <fieldset class=\"input-wrapper\">\n        <legend><span>${this.label}</span></legend>\n        <input\n          id=${this.inputId}\n          type=${inputType}\n          .value=${live(this.value)}\n          inputmode=\"${ifDefined(this.inputmode)}\"\n          ?autofocus=${this.autofocus}\n          autocomplete=\"${ifDefined(this.autocomplete)}\"\n          placeholder=\"${ifDefined(this.placeholder)}\"\n          minlength=\"${ifDefined(this.minlength)}\"\n          maxlength=\"${ifDefined(this.maxlength)}\"\n          min=\"${ifDefined(this.min)}\"\n          max=\"${ifDefined(this.max)}\"\n          pattern=\"${ifDefined(this.pattern)}\"\n          step=\"${ifDefined(this.step)}\"\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          @change=${this.changeHandler}\n          @input=${this.inputHandler}\n          aria-invalid=${this.checkValidity() ? 'false' : 'true'}\n          aria-describedby=${ifDefined(this.helpText ? 'helpText' : undefined)}\n          aria-errormessage=${ifDefined(this.checkValidity() ? undefined : 'errorMessage')}\n        />\n        <div class=\"icon\">\n          ${revealButton} ${icon}\n          <bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>\n        </div>\n      </fieldset>\n      <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-input': BlInput;\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["styles", "i", "bl_input_default", "BlInput", "FormControlMixin", "s", "event", "submit", "bl_input_default", "value", "_a", "changedProperties", "invalidMessage", "y", "helpMessage", "icon", "label", "passwordInput", "revealButton", "o", "classes", "passwordType", "inputType", "l", "innerInputValidators", "__decorateClass", "i", "e", "t"]
-}