@trendyol/baklava 2.0.0-beta.10 → 2.0.0-beta.13

package/README.md

@@ -19,4 +19,4 @@ Preferred way of using Baklava is using it via CDN. Just import library JS and C
 
 This way library will be served from a very high performant CDN and all of the Baklava web components will be ready to use inside your web project.
 
-Please check our [Storybook Documentation](https://next--6267ebb4dd54f5004a65f14a.chromatic.com/) for detailed information about design system, components and contribution guideline.
+Please check our [Storybook Documentation](https://trendyol.github.io/baklava/) for detailed information about design system, components and contribution guideline.

package/dist/baklava.js

@@ -1,2 +1,2 @@
-import{a as r}from"./chunk-CGZOADFQ.js";import{a}from"./chunk-X4LRPXVB.js";import{k as t,l as o,m as e}from"./chunk-LZZFV4ZE.js";import"./chunk-NZ3RGSR6.js";export{r as BlBadge,a as BlButton,e as BlIcon,o as getIconPath,t as setIconPath};
+import{a as f}from"./chunk-LJVEBQTA.js";import{a}from"./chunk-NA2LJ7AF.js";import{a as r}from"./chunk-OQVMZFLV.js";import"./chunk-DHVCDAR2.js";import{m as t,n as o,p as e}from"./chunk-ZXOB5CCG.js";import"./chunk-NZ3RGSR6.js";export{f as BlBadge,a as BlButton,e as BlIcon,r as BlInput,o as getIconPath,t as setIconPath};
 //# sourceMappingURL=baklava.js.map

package/dist/chunk-DHVCDAR2.js

@@ -0,0 +1,7 @@
+import{c as a,d,j as h,k as l,l as c}from"./chunk-ZXOB5CCG.js";var u=l(class extends c{constructor(e){var s;if(super(e),e.type!==h.ATTRIBUTE||e.name!=="class"||((s=e.strings)===null||s===void 0?void 0:s.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(s=>e[s]).join(" ")+" "}update(e,[s]){var i,r;if(this.et===void 0){this.et=new Set,e.strings!==void 0&&(this.st=new Set(e.strings.join(" ").split(/\s/).filter(t=>t!=="")));for(let t in s)s[t]&&!(!((i=this.st)===null||i===void 0)&&i.has(t))&&this.et.add(t);return this.render(s)}let o=e.element.classList;this.et.forEach(t=>{t in s||(o.remove(t),this.et.delete(t))});for(let t in s){let n=!!s[t];n===this.et.has(t)||((r=this.st)===null||r===void 0?void 0:r.has(t))||(n?(o.add(t),this.et.add(t)):(o.remove(t),this.et.delete(t)))}return a}});var y=e=>e!=null?e:d;export{u as a,y as b};
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+//# sourceMappingURL=chunk-DHVCDAR2.js.map

package/dist/chunk-DHVCDAR2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../node_modules/lit-html/src/directives/class-map.ts", "../node_modules/lit-html/src/directives/if-defined.ts"],
+  "sourcesContent": ["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {AttributePart, noChange} from '../lit-html.js';\nimport {\n  directive,\n  Directive,\n  DirectiveParameters,\n  PartInfo,\n  PartType,\n} from '../directive.js';\n\n/**\n * A key-value set of class names to truthy values.\n */\nexport interface ClassInfo {\n  readonly [name: string]: string | boolean | number;\n}\n\nclass ClassMapDirective extends Directive {\n  /**\n   * Stores the ClassInfo object applied to a given AttributePart.\n   * Used to unset existing values when a new ClassInfo object is applied.\n   */\n  private _previousClasses?: Set<string>;\n  private _staticClasses?: Set<string>;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    if (\n      partInfo.type !== PartType.ATTRIBUTE ||\n      partInfo.name !== 'class' ||\n      (partInfo.strings?.length as number) > 2\n    ) {\n      throw new Error(\n        '`classMap()` can only be used in the `class` attribute ' +\n          'and must be the only part in the attribute.'\n      );\n    }\n  }\n\n  render(classInfo: ClassInfo) {\n    // Add spaces to ensure separation from static classes\n    return (\n      ' ' +\n      Object.keys(classInfo)\n        .filter((key) => classInfo[key])\n        .join(' ') +\n      ' '\n    );\n  }\n\n  override update(part: AttributePart, [classInfo]: DirectiveParameters<this>) {\n    // Remember dynamic classes on the first render\n    if (this._previousClasses === undefined) {\n      this._previousClasses = new Set();\n      if (part.strings !== undefined) {\n        this._staticClasses = new Set(\n          part.strings\n            .join(' ')\n            .split(/\\s/)\n            .filter((s) => s !== '')\n        );\n      }\n      for (const name in classInfo) {\n        if (classInfo[name] && !this._staticClasses?.has(name)) {\n          this._previousClasses.add(name);\n        }\n      }\n      return this.render(classInfo);\n    }\n\n    const classList = part.element.classList;\n\n    // Remove old classes that no longer apply\n    // We use forEach() instead of for-of so that we don't require down-level\n    // iteration.\n    this._previousClasses.forEach((name) => {\n      if (!(name in classInfo)) {\n        classList.remove(name);\n        this._previousClasses!.delete(name);\n      }\n    });\n\n    // Add or remove classes based on their classMap value\n    for (const name in classInfo) {\n      // We explicitly want a loose truthy check of `value` because it seems\n      // more convenient that '' and 0 are skipped.\n      const value = !!classInfo[name];\n      if (\n        value !== this._previousClasses.has(name) &&\n        !this._staticClasses?.has(name)\n      ) {\n        if (value) {\n          classList.add(name);\n          this._previousClasses.add(name);\n        } else {\n          classList.remove(name);\n          this._previousClasses.delete(name);\n        }\n      }\n    }\n    return noChange;\n  }\n}\n\n/**\n * A directive that applies dynamic CSS classes.\n *\n * This must be used in the `class` attribute and must be the only part used in\n * the attribute. It takes each property in the `classInfo` argument and adds\n * the property name to the element's `classList` if the property value is\n * truthy; if the property value is falsey, the property name is removed from\n * the element's `class`.\n *\n * For example `{foo: bar}` applies the class `foo` if the value of `bar` is\n * truthy.\n *\n * @param classInfo\n */\nexport const classMap = directive(ClassMapDirective);\n\n/**\n * The type of the class that powers this directive. Necessary for naming the\n * directive's return type.\n */\nexport type {ClassMapDirective};\n", "/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {nothing} from '../lit-html.js';\n\n/**\n * For AttributeParts, sets the attribute if the value is defined and removes\n * the attribute if the value is undefined.\n *\n * For other part types, this directive is a no-op.\n */\nexport const ifDefined = <T>(value: T) => value ?? nothing;\n"],
+  "mappings": "mEA2HaA,EAAWC,EArGxB,cAAgCC,CAAAA,CAQ9BC,YAAYC,EAAAA,CAAAA,IAAAA,EAEV,GADAC,MAAMD,CAAAA,EAEJA,EAASE,OAASC,EAASC,WAC3BJ,EAASK,OAAS,WACjBC,EAAAN,EAASO,WADDF,MACCE,IAAAA,OAAAA,OAAAA,EAASC,QAAoB,EAEvC,MAAUC,MACR,oGAAA,CAAA,CAMNC,OAAOC,EAAAA,CAEL,MACE,IACAC,OAAOC,KAAKF,CAAAA,EACTG,OAAQC,GAAQJ,EAAUI,EAAAA,EAC1BC,KAAK,GAAA,EACR,GAAA,CAIKC,OAAOC,EAAAA,CAAsBP,CAAAA,EAAAA,CAAAA,IAAAA,EAAAA,EAEpC,GAAIQ,KAAKC,KAAT,OAAyC,CACvCD,KAAKC,GAAmB,IAAIC,IACxBH,EAAKX,UADmBc,SAE1BF,KAAKG,GAAiB,IAAID,IACxBH,EAAKX,QACFS,KAAK,GAAA,EACLO,MAAM,IAAA,EACNT,OAAQU,GAAMA,IAAM,EAANA,CAAAA,GAGrB,QAAWnB,KAAQM,EACbA,EAAUN,IAAAA,EAA+B,GAArBC,EAAAa,KAAKG,MAAgB,MAAAhB,IAAhBgB,SAAgBhB,EAAAmB,IAAIpB,CAAAA,IAC/Cc,KAAKC,GAAiBM,IAAIrB,CAAAA,EAG9B,OAAOc,KAAKT,OAAOC,CAAAA,CAAAA,CAGrB,IAAMgB,EAAYT,EAAKU,QAAQD,UAK/BR,KAAKC,GAAiBS,QAASxB,GAAAA,CACvBA,KAAQM,IACZgB,EAAUG,OAAOzB,CAAAA,EACjBc,KAAKC,GAAkBW,OAAO1B,CAAAA,EAAAA,CAAAA,EAKlC,QAAWA,KAAQM,EAAW,CAG5B,IAAMqB,EAAAA,CAAAA,CAAUrB,EAAUN,GAExB2B,IAAUb,KAAKC,GAAiBK,IAAIpB,CAAAA,KACnC4B,EAAAd,KAAKG,MAAgB,MAAAW,IAAhBX,OAAgBW,OAAAA,EAAAR,IAAIpB,CAAAA,KAEtB2B,GACFL,EAAUD,IAAIrB,CAAAA,EACdc,KAAKC,GAAiBM,IAAIrB,CAAAA,IAE1BsB,EAAUG,OAAOzB,CAAAA,EACjBc,KAAKC,GAAiBW,OAAO1B,CAAAA,GAAAA,CAInC,OAAO6B,CAAAA,CAAAA,CAAAA,EC3FE,IAAAC,EAAgBC,GAAaA,GAAAA,KAAAA,EAASC",
+  "names": ["classMap", "directive", "Directive", "constructor", "partInfo", "super", "type", "PartType", "ATTRIBUTE", "name", "_a", "strings", "length", "Error", "render", "classInfo", "Object", "keys", "filter", "key", "join", "update", "part", "this", "_previousClasses", "Set", "_staticClasses", "split", "s", "has", "add", "classList", "element", "forEach", "remove", "delete", "value", "_b", "noChange", "ifDefined", "value", "nothing"]
+}

package/dist/{chunk-CGZOADFQ.js → chunk-LJVEBQTA.js}

@@ -1,4 +1,4 @@
-import{a as i,b as a,e as o,f as r,g as t}from"./chunk-LZZFV4ZE.js";import{a as l}from"./chunk-NZ3RGSR6.js";var s=i`:host {
+import{a as i,b as a,e as o,f as r,g as t}from"./chunk-ZXOB5CCG.js";import{a as l}from"./chunk-NZ3RGSR6.js";var s=i`:host {
   display: inline-block;
   max-width: 100%;
 
@@ -54,4 +54,4 @@ import{a as i,b as a,e as o,f as r,g as t}from"./chunk-LZZFV4ZE.js";import{a as
       <slot name="icon">${n}</slot>
       <slot></slot>
     </span>`}};l([t({type:String,reflect:!0})],e.prototype,"size",2),l([t({type:String})],e.prototype,"icon",2),e=l([r("bl-badge")],e);export{e as a};
-//# sourceMappingURL=chunk-CGZOADFQ.js.map
+//# sourceMappingURL=chunk-LJVEBQTA.js.map

package/dist/{chunk-CGZOADFQ.js.map → chunk-LJVEBQTA.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/badge/bl-badge.css", "../src/components/badge/bl-badge.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host {\n  display: inline-block;\n  max-width: 100%;\n\n  --bl-badge-bg-color: var(--bl-color-accent-primary-background);\n  --bl-badge-color: var(--bl-color-primary);\n  --bl-badge-font: var(--bl-font-title-4-medium);\n  --bl-badge-padding-vertical: var(--bl-size-3xs);\n  --bl-badge-padding-horizontal: var(--bl-size-3xs);\n  --bl-badge-margin-icon: var(--bl-size-3xs);\n  --bl-badge-icon-size: var(--bl-size-s);\n  --bl-badge-height: var(--bl-size-xl);\n}\n\n.badge {\n  display: flex;\n  gap: var(--bl-badge-margin-icon);\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  border: none;\n  border-radius: var(--bl-size-4xs);\n  margin: 0;\n  padding: var(--bl-badge-padding-vertical) var(--bl-badge-padding-horizontal);\n  background-color: var(--bl-badge-bg-color);\n  color: var(--bl-badge-color, white);\n  font: var(--bl-badge-font);\n  font-kerning: none;\n  height: var(--bl-badge-height);\n}\n\n:host([size='small']) {\n  --bl-badge-font: var(--bl-font-caption-small-text);\n  --bl-badge-height: var(--bl-size-m);\n}\n\n:host([size='large']) {\n  --bl-badge-font: var(--bl-font-title-3-medium);\n  --bl-badge-padding-vertical: var(--bl-size-2xs);\n  --bl-badge-padding-horizontal: var(--bl-size-2xs);\n  --bl-badge-height: var(--bl-size-2xl);\n  --bl-badge-icon-size: var(--bl-size-m);\n}\n\n:host ::slotted(bl-icon) {\n  font-size: var(--bl-badge-icon-size);\n}\n\n:host([size='small']) bl-icon {\n  display: none;\n}\n`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport style from './bl-badge.css';\nimport '../icon/bl-icon';\n\nexport type BadgeSize = 'small' | 'medium' | 'large';\n\n/**\n * @tag bl-badge\n * @summary Baklava Badge component\n *\n * @property {string} size - Sets the badge size\n * @property {string} icon - Sets the name of the icon\n *\n * @cssproperty --bl-badge-bg-color - Sets the background color of badge. Default value is '--bl-color-accent-primary-background'\n * @cssproperty --bl-badge-color - Sets the color of badge. Default value is '--bl-color-primary'\n */\n\n@customElement('bl-badge')\nexport default class BlBadge extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  @property({ type: String, reflect: true })\n  size: BadgeSize = 'medium';\n\n  @property({ type: String })\n  icon?: string;\n\n  render(): TemplateResult {\n    const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n\n    return html`<span class=\"badge\">\n      <slot name=\"icon\">${icon}</slot>\n      <slot></slot>\n    </span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-badge': BlBadge;\n  }\n}\n"],
-  "mappings": "4GACO,GAAM,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqDf,EAAQ,ECnCf,mBAAqC,EAAW,CAAhD,kCAME,UAAkB,mBALP,SAAyB,CAClC,MAAO,CAAC,CAAK,CACf,CAQA,QAAyB,CACvB,GAAM,GAAO,KAAK,KAAO,kBAAqB,KAAK,kBAAoB,GAEvE,MAAO;AAAA,0BACe;AAAA;AAAA,YAGxB,CACF,EAbE,GADA,AAAC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GACzC,AANF,EAME,oBAGA,GADA,AAAC,EAAS,CAAE,KAAM,MAAO,CAAC,GAC1B,AATF,EASE,oBATF,KADA,AAAC,EAAc,UAAU,GACzB",
-  "names": []
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host {\n  display: inline-block;\n  max-width: 100%;\n\n  --bl-badge-bg-color: var(--bl-color-accent-primary-background);\n  --bl-badge-color: var(--bl-color-primary);\n  --bl-badge-font: var(--bl-font-title-4-medium);\n  --bl-badge-padding-vertical: var(--bl-size-3xs);\n  --bl-badge-padding-horizontal: var(--bl-size-3xs);\n  --bl-badge-margin-icon: var(--bl-size-3xs);\n  --bl-badge-icon-size: var(--bl-size-s);\n  --bl-badge-height: var(--bl-size-xl);\n}\n\n.badge {\n  display: flex;\n  gap: var(--bl-badge-margin-icon);\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  border: none;\n  border-radius: var(--bl-size-4xs);\n  margin: 0;\n  padding: var(--bl-badge-padding-vertical) var(--bl-badge-padding-horizontal);\n  background-color: var(--bl-badge-bg-color);\n  color: var(--bl-badge-color, white);\n  font: var(--bl-badge-font);\n  font-kerning: none;\n  height: var(--bl-badge-height);\n}\n\n:host([size='small']) {\n  --bl-badge-font: var(--bl-font-caption-small-text);\n  --bl-badge-height: var(--bl-size-m);\n}\n\n:host([size='large']) {\n  --bl-badge-font: var(--bl-font-title-3-medium);\n  --bl-badge-padding-vertical: var(--bl-size-2xs);\n  --bl-badge-padding-horizontal: var(--bl-size-2xs);\n  --bl-badge-height: var(--bl-size-2xl);\n  --bl-badge-icon-size: var(--bl-size-m);\n}\n\n:host ::slotted(bl-icon) {\n  font-size: var(--bl-badge-icon-size);\n}\n\n:host([size='small']) bl-icon {\n  display: none;\n}\n`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport style from './bl-badge.css';\nimport '../icon/bl-icon';\n\nexport type BadgeSize = 'small' | 'medium' | 'large';\n\n/**\n * @tag bl-badge\n * @summary Baklava Badge component\n *\n * @cssproperty --bl-badge-bg-color - Sets the background color of badge. Default value is `--bl-color-accent-primary-background`\n * @cssproperty --bl-badge-color - Sets the color of badge. Default value is `--bl-color-primary`\n */\n\n@customElement('bl-badge')\nexport default class BlBadge extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the badge size\n   */\n  @property({ type: String, reflect: true })\n  size: BadgeSize = 'medium';\n\n  /**\n   * Sets the name of the icon\n   */\n  @property({ type: String })\n  icon?: string;\n\n  render(): TemplateResult {\n    const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n\n    return html`<span class=\"badge\">\n      <slot name=\"icon\">${icon}</slot>\n      <slot></slot>\n    </span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-badge': BlBadge;\n  }\n}\n"],
+  "mappings": "4GACO,IAAMA,EAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqDfC,EAAQF,ECtCf,IAAqBG,EAArB,cAAqCC,CAAW,CAAhD,kCASE,UAAkB,SARlB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAcA,QAAyB,CACvB,IAAMC,EAAO,KAAK,KAAOC,kBAAqB,KAAK,kBAAoB,GAEvE,OAAOA;AAAA,0BACeD;AAAA;AAAA,YAGxB,CACF,EAhBEE,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBN,EASnB,oBAMAK,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAdPN,EAenB,oBAfmBA,EAArBK,EAAA,CADCE,EAAc,UAAU,GACJP",
+  "names": ["styles", "r", "bl_badge_default", "BlBadge", "s", "bl_badge_default", "icon", "$", "__decorateClass", "e", "n"]
 }

package/dist/{chunk-X4LRPXVB.js → chunk-NA2LJ7AF.js}

@@ -1,4 +1,4 @@
-import{a as d,b as c,c as h,d as p,e as v,f as m,g as a,h as f,i as g,j as y}from"./chunk-LZZFV4ZE.js";import{a as r}from"./chunk-NZ3RGSR6.js";var x=g(class extends y{constructor(e){var n;if(super(e),e.type!==f.ATTRIBUTE||e.name!=="class"||((n=e.strings)===null||n===void 0?void 0:n.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(n=>e[n]).join(" ")+" "}update(e,[n]){var s,l;if(this.et===void 0){this.et=new Set,e.strings!==void 0&&(this.st=new Set(e.strings.join(" ").split(/\s/).filter(t=>t!=="")));for(let t in n)n[t]&&!(!((s=this.st)===null||s===void 0)&&s.has(t))&&this.et.add(t);return this.render(n)}let i=e.element.classList;this.et.forEach(t=>{t in n||(i.remove(t),this.et.delete(t))});for(let t in n){let u=!!n[t];u===this.et.has(t)||((l=this.st)===null||l===void 0?void 0:l.has(t))||(u?(i.add(t),this.et.add(t)):(i.remove(t),this.et.delete(t)))}return h}});var b=e=>e??p;var S=d`:host {
+import{a as h,b as l}from"./chunk-DHVCDAR2.js";import{a as s,b as i,e as c,f as u,g as e,o as d}from"./chunk-ZXOB5CCG.js";import{a as o}from"./chunk-NZ3RGSR6.js";var v=s`:host {
   display: var(--bl-button-display, inline-block);
   max-width: 100%;
   position: relative;
@@ -13,6 +13,7 @@ import{a as d,b as c,c as h,d as p,e as v,f as m,g as a,h as f,i as g,j as y}fro
   --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 {
@@ -22,10 +23,9 @@ import{a as d,b as c,c as h,d as p,e as v,f as m,g as a,h as f,i as g,j as y}fro
   align-items: center;
   box-sizing: border-box;
   width: 100%;
-  border: none;
+  height: var(--bl-button-height);
+  border: solid 1px var(--bl-button-border-color);
   border-radius: 6px;
-  margin: 0;
-  box-shadow: inset 0 0 0 1px var(--bl-button-border-color);
   text-decoration: none;
   padding: var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);
   cursor: pointer;
@@ -52,13 +52,15 @@ import{a as d,b as c,c as h,d as p,e as v,f as m,g as a,h as f,i as g,j as y}fro
   --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-l);
+  --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 {
@@ -89,13 +91,13 @@ import{a as d,b as c,c as h,d as p,e as v,f as m,g as a,h as f,i as g,j as y}fro
   --bl-button-main-hover-color: var(--bl-color-danger-hover);
 }
 
-:host([plain]) {
+:host([text]) {
   --bl-button-content-color: var(--bl-button-main-color);
   --bl-button-border-color: transparent;
   --bl-button-bg-color: transparent;
 }
 
-:host([plain]) .button {
+:host([text]) .button {
   text-decoration: underline;
 }
 
@@ -105,6 +107,7 @@ import{a as d,b as c,c as h,d as p,e as v,f as m,g as a,h as f,i as g,j as y}fro
   --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 {
@@ -120,31 +123,26 @@ import{a as d,b as c,c as h,d as p,e as v,f as m,g as a,h as f,i as g,j as y}fro
   --bl-button-content-color: var(--bl-button-main-color);
 }
 
-:host([plain]:not([disabled])) .button:hover {
+:host([text]:not([disabled])) .button:hover {
   --bl-button-content-color: var(--bl-button-main-hover-color);
   --bl-button-border-color: transparent;
   --bl-button-bg-color: transparent;
 }
-`,z=S;var o=class extends v{constructor(){super(...arguments);this.primary=!1;this.secondary=!1;this.success=!1;this.danger=!1;this.outline=!1;this.plain=!1;this.size="medium";this.disabled=!1;this.target="_self"}static get styles(){return[z]}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(l=>{let i=l.nodeType;return i===l.TEXT_NODE&&l.textContent?.trim()!==""||i===l.ELEMENT_NODE&&!l.hasAttribute("slot")})}render(){let s=!!this.href,l=this.icon?c`<bl-icon name=${this.icon}></bl-icon>`:"",i=c`<slot name="icon">${l}</slot> <span class="label"><slot></slot></span>`,t=x({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return s?c`<a
-          class=${t}
-          aria-disabled="${b(this.disabled)}"
-          aria-label="${b(this.label)}"
-          href=${b(this.href)}
-          target=${b(this.target)}
+`,p=v;var t=class extends c{constructor(){super(...arguments);this.primary=!1;this.secondary=!1;this.success=!1;this.danger=!1;this.outline=!1;this.text=!1;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(r=>{var a;let n=r.nodeType;return n===r.TEXT_NODE&&((a=r.textContent)==null?void 0:a.trim())!==""||n===r.ELEMENT_NODE&&!r.hasAttribute("slot")})}render(){let b=!!this.href,r=this.icon?i`<bl-icon name=${this.icon}></bl-icon>`:"",n=i`<slot name="icon">${r}</slot> <span class="label"><slot></slot></span>`,a=h({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return b?i`<a
+          class=${a}
+          aria-disabled="${l(this.disabled)}"
+          aria-label="${l(this.label)}"
+          href=${l(this.href)}
+          target=${l(this.target)}
           role="button"
-          >${i}</a
-        >`:c`<button
-          class=${t}
-          aria-disabled="${b(this.disabled)}"
-          aria-label="${b(this.label)}"
+          >${n}</a
+        >`:i`<button
+          class=${a}
+          aria-disabled="${l(this.disabled)}"
+          aria-label="${l(this.label)}"
           ?disabled=${this.disabled}
           @click="${this._handleClick}"
         >
-          ${i}
-        </button>`}_handleClick(){this.event("bl-click","Click event fired!")}event(s,l){this.dispatchEvent(new CustomEvent(s,{detail:l,bubbles:!0,composed:!0}))}};r([a({type:Boolean,reflect:!0})],o.prototype,"primary",2),r([a({type:Boolean,reflect:!0})],o.prototype,"secondary",2),r([a({type:Boolean,reflect:!0})],o.prototype,"success",2),r([a({type:Boolean,reflect:!0})],o.prototype,"danger",2),r([a({type:Boolean,reflect:!0})],o.prototype,"outline",2),r([a({type:Boolean,reflect:!0})],o.prototype,"plain",2),r([a({type:String,reflect:!0})],o.prototype,"size",2),r([a({type:String})],o.prototype,"label",2),r([a({type:Boolean,reflect:!0})],o.prototype,"disabled",2),r([a({type:String})],o.prototype,"href",2),r([a({type:String})],o.prototype,"icon",2),r([a({type:String})],o.prototype,"target",2),o=r([m("bl-button")],o);export{o as a};
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-//# sourceMappingURL=chunk-X4LRPXVB.js.map
+          ${n}
+        </button>`}_handleClick(){this.onClick("Click event fired!")}};o([e({type:Boolean,reflect:!0})],t.prototype,"primary",2),o([e({type:Boolean,reflect:!0})],t.prototype,"secondary",2),o([e({type:Boolean,reflect:!0})],t.prototype,"success",2),o([e({type:Boolean,reflect:!0})],t.prototype,"danger",2),o([e({type:Boolean,reflect:!0})],t.prototype,"outline",2),o([e({type:Boolean,reflect:!0})],t.prototype,"text",2),o([e({type:String,reflect:!0})],t.prototype,"size",2),o([e({type:String})],t.prototype,"label",2),o([e({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([e({type:String})],t.prototype,"href",2),o([e({type:String})],t.prototype,"icon",2),o([e({type:String})],t.prototype,"target",2),o([d("bl-click")],t.prototype,"onClick",2),t=o([u("bl-button")],t);export{t as a};
+//# sourceMappingURL=chunk-NA2LJ7AF.js.map

package/dist/chunk-NA2LJ7AF.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 {\n  display: var(--bl-button-display, inline-block);\n  max-width: 100%;\n  position: relative;\n\n  --bl-button-main-color: var(--bl-color-primary);\n  --bl-button-main-hover-color: var(--bl-color-primary-hover);\n  --bl-button-content-color: #fff;\n  --bl-button-bg-color: var(--bl-button-main-color);\n  --bl-button-border-color: var(--bl-button-main-color);\n  --bl-button-padding-vertical: var(--bl-size-2xs);\n  --bl-button-padding-horizontal: var(--bl-size-m);\n  --bl-button-margin-icon: var(--bl-button-padding-vertical);\n  --bl-button-icon-size: var(--bl-size-m);\n  --bl-button-font: var(--bl-font-title-3-medium);\n  --bl-button-height: var(--bl-size-2xl);\n}\n\n.button {\n  display: flex;\n  gap: var(--bl-button-margin-icon);\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--bl-button-height);\n  border: solid 1px var(--bl-button-border-color);\n  border-radius: 6px;\n  text-decoration: none;\n  padding: var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);\n  cursor: pointer;\n  background-color: var(--bl-button-bg-color);\n  color: var(--bl-button-content-color);\n  font: var(--bl-button-font);\n  font-kerning: none;\n  user-select: none;\n}\n\n.button:hover {\n  --bl-button-bg-color: var(--bl-button-main-hover-color);\n  --bl-button-border-color: var(--bl-button-main-hover-color);\n}\n\n.label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host([size='small']) {\n  --bl-button-font: var(--bl-font-title-4-medium);\n  --bl-button-padding-vertical: var(--bl-size-3xs);\n  --bl-button-padding-horizontal: var(--bl-size-2xs);\n  --bl-button-icon-size: var(--bl-size-s);\n  --bl-button-height: var(--bl-size-xl);\n}\n\n:host([size='large']) {\n  --bl-button-font: var(--bl-font-title-3-medium);\n  --bl-button-padding-vertical: var(--bl-size-xs);\n  --bl-button-padding-horizontal: var(--bl-size-xl);\n  --bl-button-margin-icon: var(--bl-size-2xs);\n  --bl-button-height: var(--bl-size-3xl);\n}\n\n.button:focus {\n  outline: none;\n}\n\n:host ::slotted(bl-icon) {\n  font-size: var(--bl-button-icon-size);\n}\n\n.has-icon:not(.has-content) {\n  --bl-button-padding-horizontal: var(--bl-button-padding-vertical);\n  --bl-button-margin-icon: 0;\n}\n\n:host([secondary]) {\n  --bl-button-main-color: var(--bl-color-secondary);\n  --bl-button-main-hover-color: var(--bl-color-secondary-hover);\n}\n\n:host([success]) {\n  --bl-button-main-color: var(--bl-color-success);\n  --bl-button-main-hover-color: var(--bl-color-success-hover);\n}\n\n:host([danger]) {\n  --bl-button-main-color: var(--bl-color-danger);\n  --bl-button-main-hover-color: var(--bl-color-danger-hover);\n}\n\n:host([text]) {\n  --bl-button-content-color: var(--bl-button-main-color);\n  --bl-button-border-color: transparent;\n  --bl-button-bg-color: transparent;\n}\n\n:host([text]) .button {\n  text-decoration: underline;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n\n  --bl-button-main-color: var(--bl-color-tertiary);\n  --bl-button-main-hover-color: var(--bl-color-tertiary);\n  --bl-button-content-color: var(--bl-color-content-passive);\n  --bl-button-bg-color: var(--bl-button-main-color);\n}\n\n:host([disabled]) .button {\n  pointer-events: none;\n  text-decoration: none;\n}\n\n:host([outline]) {\n  --bl-button-bg-color: transparent;\n}\n\n:host([outline]:not(:hover):not([disabled])) {\n  --bl-button-content-color: var(--bl-button-main-color);\n}\n\n:host([text]:not([disabled])) .button:hover {\n  --bl-button-content-color: var(--bl-button-main-hover-color);\n  --bl-button-border-color: transparent;\n  --bl-button-bg-color: transparent;\n}\n`;\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 ButtonSize = 'small' | 'medium' | 'large';\nexport type TargetType = '_blank' | '_parent' | '_self' | '_top';\n\n/**\n * @tag bl-button\n * @summary Baklava Button component\n *\n * @property {boolean} primary - Sets variant to primary\n * @property {boolean} secondary - Sets variant to secondary\n * @property {boolean} success - Sets variant to success\n * @property {boolean} danger - Sets variant to danger\n * @property {boolean} outline - Sets button version to outline\n * @property {boolean} text - Sets the button version to text\n * @property {boolean} disabled - Disables the button\n * @property {string} size - Sets the button size\n * @property {string} icon - Sets the name of the icon\n * @property {string} href - Sets link of the button\n * @property {string} target - Sets button target (should be defined with href)\n * @property {string} label - Sets the accessibility text for the button. Use it with icon-only buttons.\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  @property({ type: Boolean, reflect: true })\n  primary = false;\n\n  @property({ type: Boolean, reflect: true })\n  secondary = false;\n\n  @property({ type: Boolean, reflect: true })\n  success = false;\n\n  @property({ type: Boolean, reflect: true })\n  danger = false;\n\n  @property({ type: Boolean, reflect: true })\n  outline = false;\n\n  @property({ type: Boolean, reflect: true })\n  text = false;\n\n  @property({ type: String, reflect: true })\n  size: ButtonSize = 'medium';\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  href?: string;\n\n  @property({ type: String })\n  icon?: string;\n\n  @property({ type: String })\n  target?: TargetType = '_self';\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 ? true : false;\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": "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",
+  "names": ["styles", "r", "bl_button_default", "BlButton", "s", "bl_button_default", "node", "_a", "nodeType", "isAnchor", "icon", "$", "slots", "classes", "o", "__decorateClass", "event", "n"]
+}

package/dist/chunk-OQVMZFLV.js

@@ -0,0 +1,185 @@
+import{a as b,b as l}from"./chunk-DHVCDAR2.js";import{a as n,b as a,e as s,f as d,g as r,h as p,i as c,o}from"./chunk-ZXOB5CCG.js";import{a as i}from"./chunk-NZ3RGSR6.js";var m=n`:host {
+  display: inline-block;
+  width: 200px;
+  position: relative;
+
+  --bl-input-padding-vertical: var(--bl-size-2xs);
+  --bl-input-padding-horizontal: var(--bl-size-xs);
+  --bl-input-border-color: var(--bl-color-border);
+  --bl-input-icon-color: var(--bl-color-content-tertiary);
+  --bl-input-text-color: var(--bl-color-content-primary);
+  --bl-input-height: var(--bl-size-2xl);
+}
+
+input {
+  outline: none;
+  box-sizing: border-box;
+  height: var(--bl-input-height);
+  border: solid 1px var(--bl-input-border-color);
+  width: 100%;
+  font: var(--bl-font-title-3-regular);
+  padding: 0 var(--bl-input-padding-horizontal);
+  margin: 0;
+  border-radius: 4px;
+  color: var(--bl-input-text-color);
+}
+
+bl-icon {
+  position: absolute;
+  top: var(--bl-input-padding-vertical);
+  right: var(--bl-input-padding-horizontal);
+  font-size: var(--bl-size-m);
+  z-index: 1;
+  color: var(--bl-input-icon-color);
+}
+
+:host([label-fixed]) bl-icon {
+  top: calc(var(--bl-input-padding-vertical) + var(--bl-size-m));
+}
+
+input:focus ~ bl-icon {
+  --bl-input-icon-color: var(--bl-color-primary);
+}
+
+input:focus {
+  --bl-input-border-color: var(--bl-color-primary);
+}
+
+:host ::placeholder {
+  color: var(--bl-color-content-tertiary);
+}
+
+:host([label]) ::placeholder {
+  color: transparent;
+  transition: color ease-out 0.4s;
+}
+
+:host input:focus::placeholder,
+:host([label-fixed]) ::placeholder {
+  color: var(--bl-color-content-tertiary);
+}
+
+input:disabled {
+  background-color: var(--bl-color-primary-background);
+
+  --bl-input-text-color: var(--bl-color-content-tertiary);
+}
+
+input.dirty:invalid {
+  --bl-input-border-color: var(--bl-color-danger);
+}
+
+input.has-icon {
+  padding-right: calc(var(--bl-size-xs) * 2 + var(--bl-size-m));
+}
+
+.error-icon,
+.invalid-text {
+  display: none;
+}
+
+label {
+  position: absolute;
+  top: var(--bl-input-padding-vertical);
+  left: var(--bl-input-padding-horizontal);
+  transition: all ease-in 0.2s;
+  pointer-events: none;
+  font: var(--bl-font-title-3-regular);
+  color: var(--bl-color-content-tertiary);
+  padding: 0;
+}
+
+:where(input:focus, input.has-value) ~ label {
+  top: 0;
+  left: var(--bl-size-2xs);
+  transform: translateY(-50%);
+  font: var(--bl-font-form-label);
+  color: var(--bl-color-content-secondary);
+  padding: 0 var(--bl-size-3xs);
+  background-color: var(--bl-color-primary-background);
+  pointer-events: initial;
+}
+
+:host([label-fixed]) {
+  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-form-label);
+  color: var(--bl-color-content-secondary);
+  padding: 0;
+}
+
+.dirty:invalid ~ label {
+  color: var(--bl-color-danger);
+}
+
+.invalid-text,
+.help-text {
+  font: var(--bl-font-title-4-regular);
+  padding: var(--bl-size-3xs) var(--bl-input-padding-horizontal);
+  margin: 0;
+}
+
+.invalid-text {
+  color: var(--bl-color-danger);
+}
+
+.help-text {
+  color: var(--bl-color-content-secondary);
+}
+
+.error-icon {
+  color: var(--bl-color-danger);
+}
+
+.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;
+}
+
+.dirty:invalid ~ .custom-icon {
+  --bl-input-icon-color: var(--bl-color-danger);
+}
+
+:host([size='large']) {
+  --bl-input-height: var(--bl-size-3xl);
+  --bl-input-padding-vertical: var(--bl-size-xs);
+  --bl-input-padding-horizontal: var(--bl-size-m);
+}
+`,h=m;var t=class extends s{constructor(){super(...arguments);this.type="text";this.required=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this._dirty=!1}static get styles(){return[h]}reportValidity(){this._dirty=!0,this.input.checkValidity()}get dirty(){return this._dirty}get hasValue(){var e;return((e=this.input)==null?void 0:e.value.length)>0}get _invalidText(){var e;return this.customInvalidText||((e=this.input)==null?void 0:e.validationMessage)}get _invalidState(){var e;return this.input&&!((e=this.input)!=null&&e.validity.valid)}inputHandler(){var e;this.validity=(e=this.input)==null?void 0:e.validity,this.value=this.input.value,this.onInput(this.input.value)}changeHandler(){this._dirty=!0,this.onChange(this.input.value)}firstUpdated(){var e;this.validity=(e=this.input)==null?void 0:e.validity,this._invalidState&&this.requestUpdate()}render(){let e=this._invalidState?a`<p class="invalid-text">${this._invalidText}</p>`:"",v=this.helpText?a`<p class="help-text">${this.helpText}</p>`:"",u=this.icon?a` <bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",g=this.label?a`<label>${this.label}</label>`:"";return a`
+      <input
+        type=${this.type}
+        class=${b({dirty:this.dirty,"has-icon":this.icon||this.dirty&&this._invalidState,"has-value":this.hasValue})}
+        value=${l(this.value)}
+        placeholder="${l(this.placeholder)}"
+        minlength="${l(this.minlength)}"
+        maxlength="${l(this.maxlength)}"
+        min="${l(this.min)}"
+        max="${l(this.max)}"
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        @change=${this.changeHandler}
+        @input=${this.inputHandler}
+      />
+      ${g} ${u}
+      <bl-icon class="error-icon" name="alert"></bl-icon>
+      ${e} ${v}
+    `}};i([c("input")],t.prototype,"input",2),i([r({})],t.prototype,"type",2),i([r({})],t.prototype,"label",2),i([r({})],t.prototype,"placeholder",2),i([r({})],t.prototype,"value",2),i([r({type:Boolean})],t.prototype,"required",2),i([r({type:Number})],t.prototype,"minlength",2),i([r({type:Number})],t.prototype,"maxlength",2),i([r({type:Number})],t.prototype,"min",2),i([r({type:Number})],t.prototype,"max",2),i([r({type:String})],t.prototype,"icon",2),i([r({type:String,reflect:!0})],t.prototype,"size",2),i([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([r({type:Boolean,attribute:"label-fixed"})],t.prototype,"labelFixed",2),i([r({type:String,attribute:"invalid-text"})],t.prototype,"customInvalidText",2),i([r({type:String,attribute:"help-text"})],t.prototype,"helpText",2),i([o("bl-change")],t.prototype,"onChange",2),i([o("bl-input")],t.prototype,"onInput",2),i([p()],t.prototype,"_dirty",2),t=i([d("bl-input")],t);export{t as a};
+//# sourceMappingURL=chunk-OQVMZFLV.js.map

package/dist/chunk-OQVMZFLV.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 {\n  display: inline-block;\n  width: 200px;\n  position: relative;\n\n  --bl-input-padding-vertical: var(--bl-size-2xs);\n  --bl-input-padding-horizontal: var(--bl-size-xs);\n  --bl-input-border-color: var(--bl-color-border);\n  --bl-input-icon-color: var(--bl-color-content-tertiary);\n  --bl-input-text-color: var(--bl-color-content-primary);\n  --bl-input-height: var(--bl-size-2xl);\n}\n\ninput {\n  outline: none;\n  box-sizing: border-box;\n  height: var(--bl-input-height);\n  border: solid 1px var(--bl-input-border-color);\n  width: 100%;\n  font: var(--bl-font-title-3-regular);\n  padding: 0 var(--bl-input-padding-horizontal);\n  margin: 0;\n  border-radius: 4px;\n  color: var(--bl-input-text-color);\n}\n\nbl-icon {\n  position: absolute;\n  top: var(--bl-input-padding-vertical);\n  right: var(--bl-input-padding-horizontal);\n  font-size: var(--bl-size-m);\n  z-index: 1;\n  color: var(--bl-input-icon-color);\n}\n\n:host([label-fixed]) bl-icon {\n  top: calc(var(--bl-input-padding-vertical) + var(--bl-size-m));\n}\n\ninput:focus ~ bl-icon {\n  --bl-input-icon-color: var(--bl-color-primary);\n}\n\ninput:focus {\n  --bl-input-border-color: var(--bl-color-primary);\n}\n\n:host ::placeholder {\n  color: var(--bl-color-content-tertiary);\n}\n\n:host([label]) ::placeholder {\n  color: transparent;\n  transition: color ease-out 0.4s;\n}\n\n:host input:focus::placeholder,\n:host([label-fixed]) ::placeholder {\n  color: var(--bl-color-content-tertiary);\n}\n\ninput:disabled {\n  background-color: var(--bl-color-primary-background);\n\n  --bl-input-text-color: var(--bl-color-content-tertiary);\n}\n\ninput.dirty:invalid {\n  --bl-input-border-color: var(--bl-color-danger);\n}\n\ninput.has-icon {\n  padding-right: calc(var(--bl-size-xs) * 2 + var(--bl-size-m));\n}\n\n.error-icon,\n.invalid-text {\n  display: none;\n}\n\nlabel {\n  position: absolute;\n  top: var(--bl-input-padding-vertical);\n  left: var(--bl-input-padding-horizontal);\n  transition: all ease-in 0.2s;\n  pointer-events: none;\n  font: var(--bl-font-title-3-regular);\n  color: var(--bl-color-content-tertiary);\n  padding: 0;\n}\n\n:where(input:focus, input.has-value) ~ label {\n  top: 0;\n  left: var(--bl-size-2xs);\n  transform: translateY(-50%);\n  font: var(--bl-font-form-label);\n  color: var(--bl-color-content-secondary);\n  padding: 0 var(--bl-size-3xs);\n  background-color: var(--bl-color-primary-background);\n  pointer-events: initial;\n}\n\n:host([label-fixed]) {\n  padding-top: var(--bl-size-m);\n}\n\n:host([label-fixed]) label {\n  top: 0;\n  left: 0;\n  transition: none;\n  transform: none;\n  pointer-events: initial;\n  font: var(--bl-font-form-label);\n  color: var(--bl-color-content-secondary);\n  padding: 0;\n}\n\n.dirty:invalid ~ label {\n  color: var(--bl-color-danger);\n}\n\n.invalid-text,\n.help-text {\n  font: var(--bl-font-title-4-regular);\n  padding: var(--bl-size-3xs) var(--bl-input-padding-horizontal);\n  margin: 0;\n}\n\n.invalid-text {\n  color: var(--bl-color-danger);\n}\n\n.help-text {\n  color: var(--bl-color-content-secondary);\n}\n\n.error-icon {\n  color: var(--bl-color-danger);\n}\n\n.dirty:invalid ~ .invalid-text {\n  display: block;\n}\n\n.dirty:invalid ~ .help-text {\n  display: none;\n}\n\n.dirty:invalid ~ .error-icon {\n  display: inline-block;\n}\n\n.dirty:invalid ~ .custom-icon ~ .error-icon {\n  display: none;\n}\n\n.dirty:invalid ~ .custom-icon {\n  --bl-input-icon-color: var(--bl-color-danger);\n}\n\n:host([size='large']) {\n  --bl-input-height: var(--bl-size-3xl);\n  --bl-input-padding-vertical: var(--bl-size-xs);\n  --bl-input-padding-horizontal: var(--bl-size-m);\n}\n`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } 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 { event, EventDispatcher } from '../../utilities/event';\nimport '../icon/bl-icon';\n\nimport style from './bl-input.css';\n\nexport type InputSize = 'medium' | 'large';\n/**\n * @tag bl-input\n * @summary Baklava Input component\n */\n@customElement('bl-input')\nexport default class BlInput extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  @query('input') private input: HTMLInputElement;\n\n  /**\n   * Type of the input. It's used to set `type` attribute of native input inside. Only `text` and `number` is supported for now.\n   */\n  @property({})\n  type: 'text' | 'number' = 'text';\n\n  /**\n   * Sets label of the input\n   */\n  @property({})\n  label?: string;\n\n  /**\n   * Sets placeholder of the input\n   */\n  @property({})\n  placeholder?: string;\n\n  /**\n   * Sets initial value of the input\n   */\n  @property({})\n  value?: string;\n\n  /**\n   * Makes input a mandatory field\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Sets minimum length of the input\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   * Sets maximum length of the input\n   */\n  @property({ type: Number })\n  maxlength?: number;\n\n  /**\n   * Sets the smallest number can be entered to a `number` input\n   */\n  @property({ type: Number })\n  min?: number;\n\n  /**\n   * Sets the biggest number can be entered to a `number` input\n   */\n  @property({ type: Number })\n  max?: number;\n\n  /**\n   * Sets the custom icon name. `bl-icon` component is used to show an icon\n   */\n  @property({ type: String })\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 label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: 'label-fixed' })\n  labelFixed = false;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: 'invalid-text' })\n  customInvalidText?: string;\n\n  /**\n   * Adds help text\n   */\n  @property({ type: String, attribute: 'help-text' })\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   * Current validity state of input\n   */\n  validity: ValidityState;\n\n  /**\n   * Runs input validation\n   */\n  reportValidity() {\n    this._dirty = true;\n    this.input.checkValidity();\n  }\n\n  @state() private _dirty = false;\n\n  private get dirty(): boolean {\n    return this._dirty;\n  }\n\n  private get hasValue(): boolean {\n    return this.input?.value.length > 0;\n  }\n\n  private get _invalidText() {\n    return this.customInvalidText || this.input?.validationMessage;\n  }\n\n  private get _invalidState() {\n    return this.input && !this.input?.validity.valid;\n  }\n\n  private inputHandler() {\n    this.validity = this.input?.validity;\n    this.value = this.input.value;\n    this.onInput(this.input.value);\n  }\n\n  private changeHandler() {\n    this._dirty = true;\n    this.onChange(this.input.value);\n  }\n\n  firstUpdated() {\n    this.validity = this.input?.validity;\n    if (this._invalidState) {\n      this.requestUpdate();\n    }\n  }\n\n  render(): TemplateResult {\n    const invalidMessage = this._invalidState\n      ? html`<p class=\"invalid-text\">${this._invalidText}</p>`\n      : ``;\n    const helpMessage = this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n    const icon = this.icon\n      ? html` <bl-icon class=\"custom-icon\" name=\"${this.icon}\"></bl-icon>`\n      : '';\n    const label = this.label ? html`<label>${this.label}</label>` : '';\n\n    return html`\n      <input\n        type=${this.type}\n        class=${classMap({\n          'dirty': this.dirty,\n          'has-icon': this.icon || (this.dirty && this._invalidState),\n          'has-value': this.hasValue,\n        })}\n        value=${ifDefined(this.value)}\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        ?required=${this.required}\n        ?disabled=${this.disabled}\n        @change=${this.changeHandler}\n        @input=${this.inputHandler}\n      />\n      ${label} ${icon}\n      <bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>\n      ${invalidMessage} ${helpMessage}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-input': BlInput;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "r", "bl_input_default", "BlInput", "bl_input_default", "_a", "invalidMessage", "$", "helpMessage", "icon", "label", "o", "__decorateClass", "i", "e", "event", "t", "n"]
+}

package/dist/chunk-ZXOB5CCG.js

@@ -0,0 +1,31 @@
+import{a as w}from"./chunk-NZ3RGSR6.js";var D=window.ShadowRoot&&(window.ShadyCSS===void 0||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,B=Symbol(),nt=new WeakMap,N=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==B)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o,e=this.t;if(D&&t===void 0){let i=e!==void 0&&e.length===1;i&&(t=nt.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&nt.set(e,t))}return t}toString(){return this.cssText}},lt=r=>new N(typeof r=="string"?r:r+"",void 0,B),V=(r,...t)=>{let e=r.length===1?r[0]:t.reduce((i,s,o)=>i+(n=>{if(n._$cssResult$===!0)return n.cssText;if(typeof n=="number")return n;throw Error("Value passed to 'css' function must be a 'css' function result: "+n+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+r[o+1],r[0]);return new N(e,r,B)},W=(r,t)=>{D?r.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet):t.forEach(e=>{let i=document.createElement("style"),s=window.litNonce;s!==void 0&&i.setAttribute("nonce",s),i.textContent=e.cssText,r.appendChild(i)})},j=D?r=>r:r=>r instanceof CSSStyleSheet?(t=>{let e="";for(let i of t.cssRules)e+=i.cssText;return lt(e)})(r):r;var K,at=window.trustedTypes,Rt=at?at.emptyScript:"",ht=window.reactiveElementPolyfillSupport,Z={toAttribute(r,t){switch(t){case Boolean:r=r?Rt:null;break;case Object:case Array:r=r==null?r:JSON.stringify(r)}return r},fromAttribute(r,t){let e=r;switch(t){case Boolean:e=r!==null;break;case Number:e=r===null?null:Number(r);break;case Object:case Array:try{e=JSON.parse(r)}catch{e=null}}return e}},ct=(r,t)=>t!==r&&(t==t||r==r),G={attribute:!0,type:String,converter:Z,reflect:!1,hasChanged:ct},m=class extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(t){var e;(e=this.h)!==null&&e!==void 0||(this.h=[]),this.h.push(t)}static get observedAttributes(){this.finalize();let t=[];return this.elementProperties.forEach((e,i)=>{let s=this._$Ep(i,e);s!==void 0&&(this._$Ev.set(s,i),t.push(s))}),t}static createProperty(t,e=G){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){let i=typeof t=="symbol"?Symbol():"__"+t,s=this.getPropertyDescriptor(t,i,e);s!==void 0&&Object.defineProperty(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(s){let o=this[t];this[e]=s,this.requestUpdate(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||G}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;let t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){let e=this.properties,i=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(let s of i)this.createProperty(s,e[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let i=new Set(t.flat(1/0).reverse());for(let s of i)e.unshift(j(s))}else t!==void 0&&e.push(j(t));return e}static _$Ep(t,e){let i=e.attribute;return i===!1?void 0:typeof i=="string"?i:typeof t=="string"?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$Eg(),this.requestUpdate(),(t=this.constructor.h)===null||t===void 0||t.forEach(e=>e(this))}addController(t){var e,i;((e=this._$ES)!==null&&e!==void 0?e:this._$ES=[]).push(t),this.renderRoot!==void 0&&this.isConnected&&((i=t.hostConnected)===null||i===void 0||i.call(t))}removeController(t){var e;(e=this._$ES)===null||e===void 0||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])})}createRenderRoot(){var t;let e=(t=this.shadowRoot)!==null&&t!==void 0?t:this.attachShadow(this.constructor.shadowRootOptions);return W(e,this.constructor.elementStyles),e}connectedCallback(){var t;this.renderRoot===void 0&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$ES)===null||t===void 0||t.forEach(e=>{var i;return(i=e.hostConnected)===null||i===void 0?void 0:i.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$ES)===null||t===void 0||t.forEach(e=>{var i;return(i=e.hostDisconnected)===null||i===void 0?void 0:i.call(e)})}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$EO(t,e,i=G){var s,o;let n=this.constructor._$Ep(t,i);if(n!==void 0&&i.reflect===!0){let c=((o=(s=i.converter)===null||s===void 0?void 0:s.toAttribute)!==null&&o!==void 0?o:Z.toAttribute)(e,i.type);this._$El=t,c==null?this.removeAttribute(n):this.setAttribute(n,c),this._$El=null}}_$AK(t,e){var i,s;let o=this.constructor,n=o._$Ev.get(t);if(n!==void 0&&this._$El!==n){let c=o.getPropertyOptions(n),l=c.converter,a=(s=(i=l==null?void 0:l.fromAttribute)!==null&&i!==void 0?i:typeof l=="function"?l:null)!==null&&s!==void 0?s:Z.fromAttribute;this._$El=n,this[n]=a(e,c.type),this._$El=null}}requestUpdate(t,e,i){let s=!0;t!==void 0&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||ct)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),i.reflect===!0&&this._$El!==t&&(this._$EC===void 0&&(this._$EC=new Map),this._$EC.set(t,i))):s=!1),!this.isUpdatePending&&s&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(e){Promise.reject(e)}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach((s,o)=>this[o]=s),this._$Ei=void 0);let e=!1,i=this._$AL;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),(t=this._$ES)===null||t===void 0||t.forEach(s=>{var o;return(o=s.hostUpdate)===null||o===void 0?void 0:o.call(s)}),this.update(i)):this._$Ek()}catch(s){throw e=!1,this._$Ek(),s}e&&this._$AE(i)}willUpdate(t){}_$AE(t){var e;(e=this._$ES)===null||e===void 0||e.forEach(i=>{var s;return(s=i.hostUpdated)===null||s===void 0?void 0:s.call(i)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){this._$EC!==void 0&&(this._$EC.forEach((e,i)=>this._$EO(i,this[i],e)),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}};m.finalized=!0,m.elementProperties=new Map,m.elementStyles=[],m.shadowRootOptions={mode:"open"},ht==null||ht({ReactiveElement:m}),((K=globalThis.reactiveElementVersions)!==null&&K!==void 0?K:globalThis.reactiveElementVersions=[]).push("1.3.3");var J,C=globalThis.trustedTypes,dt=C?C.createPolicy("lit-html",{createHTML:r=>r}):void 0,y=`lit$${(Math.random()+"").slice(9)}$`,yt="?"+y,Mt=`<${yt}>`,T=document,R=(r="")=>T.createComment(r),M=r=>r===null||typeof r!="object"&&typeof r!="function",_t=Array.isArray,Ot=r=>{var t;return _t(r)||typeof((t=r)===null||t===void 0?void 0:t[Symbol.iterator])=="function"},H=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ut=/-->/g,pt=/>/g,g=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,vt=/'/g,mt=/"/g,gt=/^(?:script|style|textarea|title)$/i,At=r=>(t,...e)=>({_$litType$:r,strings:t,values:e}),Et=At(1),Kt=At(2),f=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),ft=new WeakMap,bt=(r,t,e)=>{var i,s;let o=(i=e==null?void 0:e.renderBefore)!==null&&i!==void 0?i:t,n=o._$litPart$;if(n===void 0){let c=(s=e==null?void 0:e.renderBefore)!==null&&s!==void 0?s:null;o._$litPart$=n=new E(t.insertBefore(R(),c),c,void 0,e!=null?e:{})}return n._$AI(r),n},x=T.createTreeWalker(T,129,null,!1),kt=(r,t)=>{let e=r.length-1,i=[],s,o=t===2?"<svg>":"",n=H;for(let l=0;l<e;l++){let a=r[l],v,h,u=-1,p=0;for(;p<a.length&&(n.lastIndex=p,h=n.exec(a),h!==null);)p=n.lastIndex,n===H?h[1]==="!--"?n=ut:h[1]!==void 0?n=pt:h[2]!==void 0?(gt.test(h[2])&&(s=RegExp("</"+h[2],"g")),n=g):h[3]!==void 0&&(n=g):n===g?h[0]===">"?(n=s!=null?s:H,u=-1):h[1]===void 0?u=-2:(u=n.lastIndex-h[2].length,v=h[1],n=h[3]===void 0?g:h[3]==='"'?mt:vt):n===mt||n===vt?n=g:n===ut||n===pt?n=H:(n=g,s=void 0);let k=n===g&&r[l+1].startsWith("/>")?" ":"";o+=n===H?a+Mt:u>=0?(i.push(v),a.slice(0,u)+"$lit$"+a.slice(u)+y+k):a+y+(u===-2?(i.push(void 0),l):k)}let c=o+(r[e]||"<?>")+(t===2?"</svg>":"");if(!Array.isArray(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return[dt!==void 0?dt.createHTML(c):c,i]},A=class{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let o=0,n=0,c=t.length-1,l=this.parts,[a,v]=kt(t,e);if(this.el=A.createElement(a,i),x.currentNode=this.el.content,e===2){let h=this.el.content,u=h.firstChild;u.remove(),h.append(...u.childNodes)}for(;(s=x.nextNode())!==null&&l.length<c;){if(s.nodeType===1){if(s.hasAttributes()){let h=[];for(let u of s.getAttributeNames())if(u.endsWith("$lit$")||u.startsWith(y)){let p=v[n++];if(h.push(u),p!==void 0){let k=s.getAttribute(p.toLowerCase()+"$lit$").split(y),L=/([.?@])?(.*)/.exec(p);l.push({type:1,index:o,name:L[2],strings:k,ctor:L[1]==="."?Y:L[1]==="?"?Q:L[1]==="@"?X:U})}else l.push({type:6,index:o})}for(let u of h)s.removeAttribute(u)}if(gt.test(s.tagName)){let h=s.textContent.split(y),u=h.length-1;if(u>0){s.textContent=C?C.emptyScript:"";for(let p=0;p<u;p++)s.append(h[p],R()),x.nextNode(),l.push({type:2,index:++o});s.append(h[u],R())}}}else if(s.nodeType===8)if(s.data===yt)l.push({type:2,index:o});else{let h=-1;for(;(h=s.data.indexOf(y,h+1))!==-1;)l.push({type:7,index:o}),h+=y.length-1}o++}}static createElement(t,e){let i=T.createElement("template");return i.innerHTML=t,i}};function P(r,t,e=r,i){var s,o,n,c;if(t===f)return t;let l=i!==void 0?(s=e._$Cl)===null||s===void 0?void 0:s[i]:e._$Cu,a=M(t)?void 0:t._$litDirective$;return(l==null?void 0:l.constructor)!==a&&((o=l==null?void 0:l._$AO)===null||o===void 0||o.call(l,!1),a===void 0?l=void 0:(l=new a(r),l._$AT(r,e,i)),i!==void 0?((n=(c=e)._$Cl)!==null&&n!==void 0?n:c._$Cl=[])[i]=l:e._$Cu=l),l!==void 0&&(t=P(r,l._$AS(r,t.values),l,i)),t}var F=class{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;let{el:{content:i},parts:s}=this._$AD,o=((e=t==null?void 0:t.creationScope)!==null&&e!==void 0?e:T).importNode(i,!0);x.currentNode=o;let n=x.nextNode(),c=0,l=0,a=s[0];for(;a!==void 0;){if(c===a.index){let v;a.type===2?v=new E(n,n.nextSibling,this,t):a.type===1?v=new a.ctor(n,a.name,a.strings,this,t):a.type===6&&(v=new tt(n,this,t)),this.v.push(v),a=s[++l]}c!==(a==null?void 0:a.index)&&(n=x.nextNode(),c++)}return o}m(t){let e=0;for(let i of this.v)i!==void 0&&(i.strings!==void 0?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}},E=class{constructor(t,e,i,s){var o;this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cg=(o=s==null?void 0:s.isConnected)===null||o===void 0||o}get _$AU(){var t,e;return(e=(t=this._$AM)===null||t===void 0?void 0:t._$AU)!==null&&e!==void 0?e:this._$Cg}get parentNode(){let t=this._$AA.parentNode,e=this._$AM;return e!==void 0&&t.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=P(this,t,e),M(t)?t===d||t==null||t===""?(this._$AH!==d&&this._$AR(),this._$AH=d):t!==this._$AH&&t!==f&&this.$(t):t._$litType$!==void 0?this.T(t):t.nodeType!==void 0?this.k(t):Ot(t)?this.S(t):this.$(t)}M(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t))}$(t){this._$AH!==d&&M(this._$AH)?this._$AA.nextSibling.data=t:this.k(T.createTextNode(t)),this._$AH=t}T(t){var e;let{values:i,_$litType$:s}=t,o=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=A.createElement(s.h,this.options)),s);if(((e=this._$AH)===null||e===void 0?void 0:e._$AD)===o)this._$AH.m(i);else{let n=new F(o,this),c=n.p(this.options);n.m(i),this.k(c),this._$AH=n}}_$AC(t){let e=ft.get(t.strings);return e===void 0&&ft.set(t.strings,e=new A(t)),e}S(t){_t(this._$AH)||(this._$AH=[],this._$AR());let e=this._$AH,i,s=0;for(let o of t)s===e.length?e.push(i=new E(this.M(R()),this.M(R()),this,this.options)):i=e[s],i._$AI(o),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){var i;for((i=this._$AP)===null||i===void 0||i.call(this,!1,!0,e);t&&t!==this._$AB;){let s=t.nextSibling;t.remove(),t=s}}setConnected(t){var e;this._$AM===void 0&&(this._$Cg=t,(e=this._$AP)===null||e===void 0||e.call(this,t))}},U=class{constructor(t,e,i,s,o){this.type=1,this._$AH=d,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=o,i.length>2||i[0]!==""||i[1]!==""?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=d}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,s){let o=this.strings,n=!1;if(o===void 0)t=P(this,t,e,0),n=!M(t)||t!==this._$AH&&t!==f,n&&(this._$AH=t);else{let c=t,l,a;for(t=o[0],l=0;l<o.length-1;l++)a=P(this,c[i+l],e,l),a===f&&(a=this._$AH[l]),n||(n=!M(a)||a!==this._$AH[l]),a===d?t=d:t!==d&&(t+=(a!=null?a:"")+o[l+1]),this._$AH[l]=a}n&&!s&&this.C(t)}C(t){t===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t!=null?t:"")}},Y=class extends U{constructor(){super(...arguments),this.type=3}C(t){this.element[this.name]=t===d?void 0:t}},Lt=C?C.emptyScript:"",Q=class extends U{constructor(){super(...arguments),this.type=4}C(t){t&&t!==d?this.element.setAttribute(this.name,Lt):this.element.removeAttribute(this.name)}},X=class extends U{constructor(t,e,i,s,o){super(t,e,i,s,o),this.type=5}_$AI(t,e=this){var i;if((t=(i=P(this,t,e,0))!==null&&i!==void 0?i:d)===f)return;let s=this._$AH,o=t===d&&s!==d||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==d&&(s===d||o);o&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;typeof this._$AH=="function"?this._$AH.call((i=(e=this.options)===null||e===void 0?void 0:e.host)!==null&&i!==void 0?i:this.element,t):this._$AH.handleEvent(t)}},tt=class{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){P(this,t)}};var $t=window.litHtmlPolyfillSupport;$t==null||$t(A,E),((J=globalThis.litHtmlVersions)!==null&&J!==void 0?J:globalThis.litHtmlVersions=[]).push("2.2.6");var et,it;var _=class extends m{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;let i=super.createRenderRoot();return(t=(e=this.renderOptions).renderBefore)!==null&&t!==void 0||(e.renderBefore=i.firstChild),i}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=bt(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)===null||t===void 0||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)===null||t===void 0||t.setConnected(!1)}render(){return f}};_.finalized=!0,_._$litElement$=!0,(et=globalThis.litElementHydrateSupport)===null||et===void 0||et.call(globalThis,{LitElement:_});var St=globalThis.litElementPolyfillSupport;St==null||St({LitElement:_});((it=globalThis.litElementVersions)!==null&&it!==void 0?it:globalThis.litElementVersions=[]).push("3.2.1");var wt=r=>t=>typeof t=="function"?((e,i)=>(window.customElements.define(e,i),i))(r,t):((e,i)=>{let{kind:s,elements:o}=i;return{kind:s,elements:o,finisher(n){window.customElements.define(e,n)}}})(r,t);var Dt=(r,t)=>t.kind==="method"&&t.descriptor&&!("value"in t.descriptor)?{...t,finisher(e){e.createProperty(t.key,r)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:t.key,initializer(){typeof t.initializer=="function"&&(this[t.key]=t.initializer.call(this))},finisher(e){e.createProperty(t.key,r)}};function q(r){return(t,e)=>e!==void 0?((i,s,o)=>{s.constructor.createProperty(o,i)})(r,t,e):Dt(r,t)}function xt(r){return q({...r,state:!0})}var b=({finisher:r,descriptor:t})=>(e,i)=>{var s;if(i===void 0){let o=(s=e.originalKey)!==null&&s!==void 0?s:e.key,n=t!=null?{kind:"method",placement:"prototype",key:o,descriptor:t(e.key)}:{...e,key:o};return r!=null&&(n.finisher=function(c){r(c,o)}),n}{let o=e.constructor;t!==void 0&&Object.defineProperty(e,i,t(i)),r==null||r(o,i)}};function de(r,t){return b({descriptor:e=>{let i={get(){var s,o;return(o=(s=this.renderRoot)===null||s===void 0?void 0:s.querySelector(r))!==null&&o!==void 0?o:null},enumerable:!0,configurable:!0};if(t){let s=typeof e=="symbol"?Symbol():"__"+e;i.get=function(){var o,n;return this[s]===void 0&&(this[s]=(n=(o=this.renderRoot)===null||o===void 0?void 0:o.querySelector(r))!==null&&n!==void 0?n:null),this[s]}}return i}})}var st,ye=((st=window.HTMLSlotElement)===null||st===void 0?void 0:st.prototype.assignedElements)!=null?(r,t)=>r.assignedElements(t):(r,t)=>r.assignedNodes(t).filter(e=>e.nodeType===Node.ELEMENT_NODE);var Ct={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},I=r=>(...t)=>({_$litDirective$:r,values:t}),z=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};var S=class extends z{constructor(t){if(super(t),this.it=d,t.type!==Ct.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===d||t==null)return this.ft=void 0,this.it=t;if(t===f)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this.ft;this.it=t;let e=[t];return e.raw=e,this.ft={_$litType$:this.constructor.resultType,strings:e,values:[]}}};S.directiveName="unsafeHTML",S.resultType=1;var Le=I(S);var O=class extends S{};O.directiveName="unsafeSVG",O.resultType=2;var Tt=I(O);var Ut="./assets";function jt(r){Ut=r}function Nt(){return Ut}var Pt=import.meta.url;Pt&&jt(Pt.split("/").slice(0,-1).concat("assets").join("/"));function qt(r,t){return function(e,i){r.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!1,composed:!0,...i}))}}function rt(r){return(t,e)=>{Object.defineProperty(t,e,{get(){return qt(this,r||e)},enumerable:!0,configurable:!0})}}var zt=V`:host {
+  display: inline-block;
+  position: relative;
+  width: 1em;
+  height: 1em;
+  min-width: 1em;
+  min-height: 1em;
+}
+
+:host div,
+:host svg {
+  width: 100%;
+  height: 100%;
+}
+`,Ht=zt;var ot=new Map,$=class extends _{static get styles(){return[Ht]}get name(){return this._iconName}set name(e){e!==this._iconName&&(this._iconName=e,this.load())}async load(){let i=`${Nt()}/${this.name}.svg`;ot.has(i)||ot.set(i,fetch(i));try{let s=await ot.get(i),o=await(s==null?void 0:s.clone());o!=null&&o.ok?(this.svg=await o.text(),this.onLoad(`${this.name} icon loaded`),this.requestUpdate()):this.onError(`${this.name} icon failed to load`)}catch(s){this.onError(`${this.name} icon failed to load [${s}]`)}}render(){return Et`<div aria-hidden="true">${Tt(this.svg)}</div>`}};w([q()],$.prototype,"name",1),w([rt("bl-load")],$.prototype,"onLoad",2),w([rt("bl-error")],$.prototype,"onError",2),w([xt()],$.prototype,"svg",2),$=w([wt("bl-icon")],$);export{V as a,Et as b,f as c,d,_ as e,wt as f,q as g,xt as h,de as i,Ct as j,I as k,z as l,jt as m,Nt as n,rt as o,$ as p};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+//# sourceMappingURL=chunk-ZXOB5CCG.js.map