@trendyol/baklava 2.0.0-beta.88 → 2.0.0-beta.89

package/dist/{chunk-FHOMHSA6.js.map → chunk-CMIFBOTH.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../node_modules/lit-html/src/directives/style-map.ts", "../src/components/textarea/bl-textarea.css", "../src/components/textarea/bl-textarea.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 CSS properties and values.\n *\n * The key should be either a valid CSS property name string, like\n * `'background-color'`, or a valid JavaScript camel case property name\n * for CSSStyleDeclaration like `backgroundColor`.\n */\nexport interface StyleInfo {\n  [name: string]: string | undefined | null;\n}\n\nclass StyleMapDirective extends Directive {\n  _previousStyleProperties?: Set<string>;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    if (\n      partInfo.type !== PartType.ATTRIBUTE ||\n      partInfo.name !== 'style' ||\n      (partInfo.strings?.length as number) > 2\n    ) {\n      throw new Error(\n        'The `styleMap` directive must be used in the `style` attribute ' +\n          'and must be the only part in the attribute.'\n      );\n    }\n  }\n\n  render(styleInfo: Readonly<StyleInfo>) {\n    return Object.keys(styleInfo).reduce((style, prop) => {\n      const value = styleInfo[prop];\n      if (value == null) {\n        return style;\n      }\n      // Convert property names from camel-case to dash-case, i.e.:\n      //  `backgroundColor` -> `background-color`\n      // Vendor-prefixed names need an extra `-` appended to front:\n      //  `webkitAppearance` -> `-webkit-appearance`\n      // Exception is any property name containing a dash, including\n      // custom properties; we assume these are already dash-cased i.e.:\n      //  `--my-button-color` --> `--my-button-color`\n      prop = prop\n        .replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, '-$&')\n        .toLowerCase();\n      return style + `${prop}:${value};`;\n    }, '');\n  }\n\n  override update(part: AttributePart, [styleInfo]: DirectiveParameters<this>) {\n    const {style} = part.element as HTMLElement;\n\n    if (this._previousStyleProperties === undefined) {\n      this._previousStyleProperties = new Set();\n      for (const name in styleInfo) {\n        this._previousStyleProperties.add(name);\n      }\n      return this.render(styleInfo);\n    }\n\n    // Remove old properties that no longer exist in styleInfo\n    // We use forEach() instead of for-of so that re don't require down-level\n    // iteration.\n    this._previousStyleProperties!.forEach((name) => {\n      // If the name isn't in styleInfo or it's null/undefined\n      if (styleInfo[name] == null) {\n        this._previousStyleProperties!.delete(name);\n        if (name.includes('-')) {\n          style.removeProperty(name);\n        } else {\n          // Note reset using empty string (vs null) as IE11 does not always\n          // reset via null (https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles)\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          (style as any)[name] = '';\n        }\n      }\n    });\n\n    // Add or update properties\n    for (const name in styleInfo) {\n      const value = styleInfo[name];\n      if (value != null) {\n        this._previousStyleProperties.add(name);\n        if (name.includes('-')) {\n          style.setProperty(name, value);\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          (style as any)[name] = value;\n        }\n      }\n    }\n    return noChange;\n  }\n}\n\n/**\n * A directive that applies CSS properties to an element.\n *\n * `styleMap` can only be used in the `style` attribute and must be the only\n * expression in the attribute. It takes the property names in the\n * {@link StyleInfo styleInfo} object and adds the property values as CSS\n * properties. Property names with dashes (`-`) are assumed to be valid CSS\n * property names and set on the element's style object using `setProperty()`.\n * Names without dashes are assumed to be camelCased JavaScript property names\n * and set on the element's style object using property assignment, allowing the\n * style object to translate JavaScript-style names to CSS property names.\n *\n * For example `styleMap({backgroundColor: 'red', 'border-top': '5px', '--size':\n * '0'})` sets the `background-color`, `border-top` and `--size` properties.\n *\n * @param styleInfo\n * @see {@link https://lit.dev/docs/templates/directives/#stylemap styleMap code samples on Lit.dev}\n */\nexport const styleMap = directive(StyleMapDirective);\n\n/**\n * The type of the class that powers this directive. Necessary for naming the\n * directive's return type.\n */\nexport type {StyleMapDirective};\n", "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--row-count:1;--maxrow-count:;--line-height:var(--bl-font-title-3-line-height);--scroll-height:var(--line-height);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--border-size:1px;--default-scroll-height:calc((var(--row-count) * var(--line-height)) + var(--padding-vertical));--height:max(var(--scroll-height),var(--default-scroll-height));--input-font:var(--bl-font-body-text-2);--border-radius:var(--bl-size-3xs);--border-color:var(--bl-color-border);display:flex;flex-direction:column;position:relative;gap:var(--bl-size-3xs)}.input-wrapper{border:solid var(--border-size) var(--border-color);border-radius:var(--border-radius);padding-top:var(--padding-vertical);display:flex;box-sizing:border-box}textarea{width:100%;align-self:stretch;outline:0;font:var(--input-font);padding:0 calc(var(--padding-horizontal) - var(--border-size));padding-bottom:var(--padding-vertical);margin:0;border:0;border-radius:var(--border-radius);color:var(--bl-color-content-primary);resize:vertical;display:block}:host([size='large']) .wrapper{--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .wrapper{--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--input-font:var(--bl-font-body-text-3);--line-height:var(--bl-font-title-4-line-height)}textarea:disabled{background-color:var(--bl-color-secondary-background);color:var(--bl-color-content-tertiary);cursor:not-allowed}:host([disabled]) .wrapper{background-color:var(--bl-color-secondary-background)}:host([expand]) textarea{overflow:hidden;resize:none;height:var(--height)}:host([expand][max-rows]) textarea{--maxrow-height:calc((var(--maxrow-count) * var(--line-height)) + var(--padding-vertical));overflow-y:scroll;height:min(var(--height),var(--maxrow-height))}.wrapper:focus-within{--border-color:var(--bl-color-primary)}.dirty.max-len-invalid,.dirty.invalid{--border-color:var(--bl-color-danger)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0;max-width:max-content;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-content-primary-contrast);pointer-events:initial}:host ::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);background-color:initial;padding:0}.hint{display:none;font:var(--bl-font-body-text-3)}:host([character-counter]) .hint,:host([help-text]) .hint,.dirty.invalid .hint{display:flex;gap:var(--bl-size-3xs)}.hint>*{margin:0;padding:0}.help-text,.invalid-text{flex:1}.counter-text{color:var(--bl-color-content-secondary);margin-left:auto}:where(.max-len-invalid,.dirty.invalid) .hint>.counter-text{color:var(--bl-color-danger)}.dirty.invalid label{color:var(--bl-color-danger)}.invalid-text{display:none;color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}:where(.dirty.max-len-invalid,.dirty.invalid) .hint>.invalid-text{display:inline-block}.dirty.invalid .hint>.help-text{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FormControlMixin } from '@open-wc/form-control';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { textAreaValidators } from '../../utilities/form-control';\nimport 'element-internals-polyfill';\nimport style from './bl-textarea.css';\n\nexport type TextareaSize = 'small' | 'medium' | 'large';\n/**\n * @tag bl-textarea\n * @summary Baklava Textarea component\n */\n@customElement('bl-textarea')\nexport default class BlTextarea extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  static formControlValidators = textAreaValidators;\n\n  @query('textarea')\n  validationTarget: HTMLTextAreaElement;\n\n  /**\n   * Name of textarea\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * Makes textarea a mandatory field\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Disables the textarea\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets expandity\n   */\n  @property({ type: Boolean, reflect: true })\n  expand = false;\n\n  /**\n   * Sets max row when expand is true\n   */\n  @property({ type: Number, reflect: true, attribute: 'max-rows' })\n  maxRows?: number;\n\n  /**\n   * Sets textarea size.\n   */\n  @property({ type: String, reflect: true })\n  size?: TextareaSize = 'medium';\n\n  /**\n   * Sets label of the textarea\n   */\n  @property({ reflect: true })\n  label?: string;\n\n  /**\n   * Makes label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: 'label-fixed', reflect: true })\n  labelFixed = false;\n\n  /**\n   * Sets placeholder of the textarea\n   */\n  @property({ reflect: true })\n  placeholder?: string;\n\n  /**\n   * Enables showing character counter.\n   */\n  @property({ type: Boolean, attribute: 'character-counter', reflect: true })\n  characterCounter = false;\n\n  /**\n   * Adds help text\n   */\n  @property({ type: String, attribute: 'help-text', reflect: true })\n  helpText?: string;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: 'invalid-text', reflect: true })\n  customInvalidText?: string;\n\n  /**\n   * Sets minimum length of the textarea\n   */\n  @property({ type: Number, reflect: true })\n  minlength?: number;\n\n  /**\n   * Sets max length of textarea\n   */\n  @property({ type: Number, reflect: true })\n  maxlength?: number;\n\n  /**\n   * Sets initial value of the textarea\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * Sets textarea visible row count.\n   */\n  @property({ type: Number, reflect: true })\n  rows?: number = 4;\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   * Hints browser to autocomplete this field.\n   */\n  @property({ type: String, reflect: true })\n  autocomplete: string;\n\n  /**\n   * Enables/disables spellcheck feature inside the textarea\n   */\n  @property({ type: String, reflect: true, attribute: 'spellcheck' })\n  spellchecker: 'true' | 'false' = 'false';\n\n  @event('bl-input') private onInput: EventDispatcher<string>;\n\n  @event('bl-change') private onChange: EventDispatcher<string>;\n\n  @event('bl-invalid') private onInvalid: EventDispatcher<ValidityState>;\n\n  @state()\n  private customScrollHeight: string | null = null;\n\n  private inputId = Math.random().toString(36).substring(2);\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.internals.form?.addEventListener('submit', () => {\n      this.reportValidity();\n    });\n  }\n\n  private onError = (): void => {\n    this.onInvalid(this.internals.validity);\n  };\n\n  private inputHandler(event: Event) {\n    this.autoResize();\n\n    const value = (event.target as HTMLTextAreaElement).value;\n    this.value = value;\n    this.onInput(value);\n  }\n\n  private changeHandler(event: Event) {\n    const value = (event.target as HTMLTextAreaElement).value;\n\n    this.dirty = true;\n    this.value = value;\n    this.onChange(value);\n  }\n\n  firstUpdated() {\n    this.setValue(this.value);\n    this.autoResize();\n  }\n\n  protected async updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('rows')) {\n      this.autoResize();\n    }\n\n    if (changedProperties.has('value')) {\n      this.setValue(this.value);\n\n      await this.validationComplete;\n\n      this.requestUpdate();\n    }\n  }\n\n  reportValidity() {\n    this.dirty = true;\n    return this.checkValidity();\n  }\n\n  valueChangedCallback(value: string): void {\n    this.value = value;\n  }\n\n  validityCallback(): string | void {\n    return this.customInvalidText || this.validationTarget?.validationMessage;\n  }\n\n  private autoResize() {\n    if (!this.expand) {\n      return;\n    }\n\n    this.validationTarget.style.height = 'auto';\n    const scrollHeight = this.validationTarget.scrollHeight;\n    this.customScrollHeight = `${scrollHeight}px`;\n    this.validationTarget.style.removeProperty('height');\n  }\n\n  @state() private dirty = false;\n\n  render(): TemplateResult {\n    const maxLengthInvalid = this.internals.validity.tooLong;\n    const invalidMessage = !this.checkValidity()\n      ? html`<p class=\"invalid-text\">${this.validationMessage}</p>`\n      : ``;\n    const helpMessage =\n      this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n\n    const label = this.label ? html`<label for=\"${this.inputId}\">${this.label}</label>` : '';\n    const characterCounterText =\n      this.characterCounter && this.maxlength\n        ? `${this.value.length}/${this.maxlength}`\n        : this.characterCounter\n        ? `${this.value.length}`\n        : '';\n    const characterCounter = this.characterCounter\n      ? html`<p class=\"counter-text\">${characterCounterText}</p>`\n      : '';\n\n    const wrapperClasses = {\n      'wrapper': true,\n      'has-value': this.value !== null && this.value !== '',\n      'dirty': this.dirty,\n      'max-len-invalid': maxLengthInvalid,\n      'invalid': !this.checkValidity(),\n    };\n\n    const styles = {\n      '--row-count': `${this.rows}`,\n      '--maxrow-count': this.maxRows ? `${this.maxRows}` : null,\n      '--scroll-height': this.customScrollHeight,\n    };\n\n    return html`\n      <div style=${styleMap(styles)} class=${classMap(wrapperClasses)}>\n        ${label}\n        <div class=\"input-wrapper\">\n          <textarea\n            id=\"${this.inputId}\"\n            name=\"${ifDefined(this.name)}\"\n            .value=${live(this.value)}\n            ?autofocus=${this.autofocus}\n            autocomplete=\"${ifDefined(this.autocomplete)}\"\n            inputmode=\"${ifDefined(this.inputmode)}\"\n            placeholder=\"${ifDefined(this.placeholder)}\"\n            minlength=\"${ifDefined(this.minlength)}\"\n            rows=\"${ifDefined(this.rows)}\"\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            spellcheck=\"${this.spellchecker}\"\n            @change=${this.changeHandler}\n            @input=${this.inputHandler}\n            @invalid=${this.onError}\n          >\n          </textarea>\n        </div>\n        <div class=\"hint\">${invalidMessage}${helpMessage}${characterCounter}</div>\n      </div>\n    `;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-textarea': BlTextarea;\n  }\n}\n"],
-  "mappings": "saA+HaA,EAAWC,EArGxB,cAAgCC,CAAAA,CAG9BC,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,4GAAA,CAIL,CAEDC,OAAOC,EAAAA,CACL,OAAOC,OAAOC,KAAKF,CAAAA,EAAWG,OAAO,CAACC,EAAOC,IAAAA,CAC3C,IAAMC,EAAQN,EAAUK,CAAAA,EACxB,OAAIC,GAAS,KACJF,EAYFA,EAAQ,GAHfC,EAAOA,EACJE,QAAQ,oCAAqC,KAAA,EAC7CC,YAAAA,KACuBF,IAAQ,EACjC,EAAA,CACJ,CAEQG,OAAOC,EAAAA,CAAsBV,CAAAA,EAAAA,CACpC,GAAA,CAAMI,MAACA,CAAAA,EAASM,EAAKC,QAErB,GAAIC,KAAKC,KAAT,OAAiD,CAC/CD,KAAKC,GAA2B,IAAIC,IACpC,QAAWpB,KAAQM,EACjBY,KAAKC,GAAyBE,IAAIrB,CAAAA,EAEpC,OAAOkB,KAAKb,OAAOC,CAAAA,EAMrBY,KAAKC,GAA0BG,QAAStB,GAAAA,CAElCM,EAAUN,CAAAA,GAAS,OACrBkB,KAAKC,GAA0BI,OAAOvB,CAAAA,EAClCA,EAAKwB,SAAS,GAAA,EAChBd,EAAMe,eAAezB,CAAAA,EAKpBU,EAAcV,CAAAA,EAAQ,GAE1B,CAAA,EAIH,QAAWA,KAAQM,EAAW,CAC5B,IAAMM,EAAQN,EAAUN,CAAAA,EACpBY,GAAS,OACXM,KAAKC,GAAyBE,IAAIrB,CAAAA,EAC9BA,EAAKwB,SAAS,GAAA,EAChBd,EAAMgB,YAAY1B,EAAMY,CAAAA,EAGvBF,EAAcV,CAAAA,EAAQY,GAI7B,OAAOe,CACR,CAAA,CAAA,ECzGI,IAAMC,EAASC,mqHACfC,EAAQF,ECgBf,IAAqBG,EAArB,cAAwCC,EAAiBC,CAAU,CAAE,CAArE,kCAcE,UAAO,GAMP,cAAW,GAMX,cAAW,GAMX,YAAS,GAYT,UAAsB,SAYtB,gBAAa,GAYb,sBAAmB,GA8BnB,WAAQ,GAMR,UAAgB,EAYhB,eAAY,GAYZ,kBAAiC,QASjC,KAAQ,mBAAoC,KAE5C,KAAQ,QAAU,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,CAAC,EASxD,KAAQ,QAAU,IAAY,CAC5B,KAAK,UAAU,KAAK,UAAU,QAAQ,CACxC,EA6DS,KAAQ,MAAQ,GAlNzB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CA0IA,mBAAoB,CA/JtB,IAAAC,EAgKI,MAAM,kBAAkB,GACxBA,EAAA,KAAK,UAAU,OAAf,MAAAA,EAAqB,iBAAiB,SAAU,IAAM,CACpD,KAAK,eAAe,CACtB,EACF,CAMQ,aAAaC,EAAc,CACjC,KAAK,WAAW,EAEhB,IAAMC,EAASD,EAAM,OAA+B,MACpD,KAAK,MAAQC,EACb,KAAK,QAAQA,CAAK,CACpB,CAEQ,cAAcD,EAAc,CAClC,IAAMC,EAASD,EAAM,OAA+B,MAEpD,KAAK,MAAQ,GACb,KAAK,MAAQC,EACb,KAAK,SAASA,CAAK,CACrB,CAEA,cAAe,CACb,KAAK,SAAS,KAAK,KAAK,EACxB,KAAK,WAAW,CAClB,CAEA,MAAgB,QAAQC,EAAmC,CACrDA,EAAkB,IAAI,MAAM,GAC9B,KAAK,WAAW,EAGdA,EAAkB,IAAI,OAAO,IAC/B,KAAK,SAAS,KAAK,KAAK,EAExB,MAAM,KAAK,mBAEX,KAAK,cAAc,EAEvB,CAEA,gBAAiB,CACf,YAAK,MAAQ,GACN,KAAK,cAAc,CAC5B,CAEA,qBAAqBD,EAAqB,CACxC,KAAK,MAAQA,CACf,CAEA,kBAAkC,CAtNpC,IAAAF,EAuNI,OAAO,KAAK,qBAAqBA,EAAA,KAAK,mBAAL,YAAAA,EAAuB,kBAC1D,CAEQ,YAAa,CACnB,GAAI,CAAC,KAAK,OACR,OAGF,KAAK,iBAAiB,MAAM,OAAS,OACrC,IAAMI,EAAe,KAAK,iBAAiB,aAC3C,KAAK,mBAAqB,GAAGA,MAC7B,KAAK,iBAAiB,MAAM,eAAe,QAAQ,CACrD,CAIA,QAAyB,CACvB,IAAMC,EAAmB,KAAK,UAAU,SAAS,QAC3CC,EAAkB,KAAK,cAAc,EAEvC,GADAC,4BAA+B,KAAK,wBAElCC,EACJ,KAAK,SAAWD,yBAA4B,KAAK,eAAiB,GAE9DE,EAAQ,KAAK,MAAQF,gBAAmB,KAAK,YAAY,KAAK,gBAAkB,GAChFG,EACJ,KAAK,kBAAoB,KAAK,UAC1B,GAAG,KAAK,MAAM,UAAU,KAAK,YAC7B,KAAK,iBACL,GAAG,KAAK,MAAM,SACd,GACAC,EAAmB,KAAK,iBAC1BJ,4BAA+BG,QAC/B,GAEEE,EAAiB,CACrB,QAAW,GACX,YAAa,KAAK,QAAU,MAAQ,KAAK,QAAU,GACnD,MAAS,KAAK,MACd,kBAAmBP,EACnB,QAAW,CAAC,KAAK,cAAc,CACjC,EAEMQ,EAAS,CACb,cAAe,GAAG,KAAK,OACvB,iBAAkB,KAAK,QAAU,GAAG,KAAK,UAAY,KACrD,kBAAmB,KAAK,kBAC1B,EAEA,OAAON;AAAA,mBACQO,EAASD,CAAM,WAAWE,EAASH,CAAc;AAAA,UAC1DH;AAAA;AAAA;AAAA,kBAGQ,KAAK;AAAA,oBACHO,EAAU,KAAK,IAAI;AAAA,qBAClBA,EAAK,KAAK,KAAK;AAAA,yBACX,KAAK;AAAA,4BACFA,EAAU,KAAK,YAAY;AAAA,yBAC9BA,EAAU,KAAK,SAAS;AAAA,2BACtBA,EAAU,KAAK,WAAW;AAAA,yBAC5BA,EAAU,KAAK,SAAS;AAAA,oBAC7BA,EAAU,KAAK,IAAI;AAAA,wBACf,KAAK;AAAA,wBACL,KAAK;AAAA,0BACH,KAAK;AAAA,sBACT,KAAK;AAAA,qBACN,KAAK;AAAA,uBACH,KAAK;AAAA;AAAA;AAAA;AAAA,4BAIAV,IAAiBE,IAAcG;AAAA;AAAA,KAGzD,CACF,EAjRqBf,EAKZ,sBAAwBqB,EAG/BC,EAAA,CADCJ,EAAM,UAAU,GAPElB,EAQnB,gCAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAbtBvB,EAcnB,oBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAnBvBvB,EAoBnB,wBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAzBvBvB,EA0BnB,wBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA/BvBvB,EAgCnB,sBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,GAAM,UAAW,UAAW,CAAC,GArC7CvB,EAsCnB,uBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA3CtBvB,EA4CnB,oBAMAsB,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GAjDRvB,EAkDnB,qBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,UAAW,cAAe,QAAS,EAAK,CAAC,GAvDjDvB,EAwDnB,0BAMAsB,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GA7DRvB,EA8DnB,2BAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,UAAW,oBAAqB,QAAS,EAAK,CAAC,GAnEvDvB,EAoEnB,gCAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,YAAa,QAAS,EAAK,CAAC,GAzE9CvB,EA0EnB,wBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,eAAgB,QAAS,EAAK,CAAC,GA/EjDvB,EAgFnB,iCAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GArFtBvB,EAsFnB,yBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA3FtBvB,EA4FnB,yBAMAsB,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GAjGRvB,EAkGnB,qBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAvGtBvB,EAwGnB,oBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA7GtBvB,EA8GnB,yBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAnHvBvB,EAoHnB,yBAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAzHtBvB,EA0HnB,4BAMAsB,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,GAAM,UAAW,YAAa,CAAC,GA/H/CvB,EAgInB,4BAE2BsB,EAAA,CAA1BjB,EAAM,UAAU,GAlIEL,EAkIQ,uBAECsB,EAAA,CAA3BjB,EAAM,WAAW,GApICL,EAoIS,wBAECsB,EAAA,CAA5BjB,EAAM,YAAY,GAtIAL,EAsIU,yBAGrBsB,EAAA,CADPE,EAAM,GAxIYxB,EAyIX,kCA0ESsB,EAAA,CAAhBE,EAAM,GAnNYxB,EAmNF,qBAnNEA,EAArBsB,EAAA,CADCC,EAAc,aAAa,GACPvB",
+  "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 CSS properties and values.\n *\n * The key should be either a valid CSS property name string, like\n * `'background-color'`, or a valid JavaScript camel case property name\n * for CSSStyleDeclaration like `backgroundColor`.\n */\nexport interface StyleInfo {\n  [name: string]: string | undefined | null;\n}\n\nclass StyleMapDirective extends Directive {\n  _previousStyleProperties?: Set<string>;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    if (\n      partInfo.type !== PartType.ATTRIBUTE ||\n      partInfo.name !== 'style' ||\n      (partInfo.strings?.length as number) > 2\n    ) {\n      throw new Error(\n        'The `styleMap` directive must be used in the `style` attribute ' +\n          'and must be the only part in the attribute.'\n      );\n    }\n  }\n\n  render(styleInfo: Readonly<StyleInfo>) {\n    return Object.keys(styleInfo).reduce((style, prop) => {\n      const value = styleInfo[prop];\n      if (value == null) {\n        return style;\n      }\n      // Convert property names from camel-case to dash-case, i.e.:\n      //  `backgroundColor` -> `background-color`\n      // Vendor-prefixed names need an extra `-` appended to front:\n      //  `webkitAppearance` -> `-webkit-appearance`\n      // Exception is any property name containing a dash, including\n      // custom properties; we assume these are already dash-cased i.e.:\n      //  `--my-button-color` --> `--my-button-color`\n      prop = prop\n        .replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, '-$&')\n        .toLowerCase();\n      return style + `${prop}:${value};`;\n    }, '');\n  }\n\n  override update(part: AttributePart, [styleInfo]: DirectiveParameters<this>) {\n    const {style} = part.element as HTMLElement;\n\n    if (this._previousStyleProperties === undefined) {\n      this._previousStyleProperties = new Set();\n      for (const name in styleInfo) {\n        this._previousStyleProperties.add(name);\n      }\n      return this.render(styleInfo);\n    }\n\n    // Remove old properties that no longer exist in styleInfo\n    // We use forEach() instead of for-of so that re don't require down-level\n    // iteration.\n    this._previousStyleProperties!.forEach((name) => {\n      // If the name isn't in styleInfo or it's null/undefined\n      if (styleInfo[name] == null) {\n        this._previousStyleProperties!.delete(name);\n        if (name.includes('-')) {\n          style.removeProperty(name);\n        } else {\n          // Note reset using empty string (vs null) as IE11 does not always\n          // reset via null (https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles)\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          (style as any)[name] = '';\n        }\n      }\n    });\n\n    // Add or update properties\n    for (const name in styleInfo) {\n      const value = styleInfo[name];\n      if (value != null) {\n        this._previousStyleProperties.add(name);\n        if (name.includes('-')) {\n          style.setProperty(name, value);\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          (style as any)[name] = value;\n        }\n      }\n    }\n    return noChange;\n  }\n}\n\n/**\n * A directive that applies CSS properties to an element.\n *\n * `styleMap` can only be used in the `style` attribute and must be the only\n * expression in the attribute. It takes the property names in the\n * {@link StyleInfo styleInfo} object and adds the property values as CSS\n * properties. Property names with dashes (`-`) are assumed to be valid CSS\n * property names and set on the element's style object using `setProperty()`.\n * Names without dashes are assumed to be camelCased JavaScript property names\n * and set on the element's style object using property assignment, allowing the\n * style object to translate JavaScript-style names to CSS property names.\n *\n * For example `styleMap({backgroundColor: 'red', 'border-top': '5px', '--size':\n * '0'})` sets the `background-color`, `border-top` and `--size` properties.\n *\n * @param styleInfo\n * @see {@link https://lit.dev/docs/templates/directives/#stylemap styleMap code samples on Lit.dev}\n */\nexport const styleMap = directive(StyleMapDirective);\n\n/**\n * The type of the class that powers this directive. Necessary for naming the\n * directive's return type.\n */\nexport type {StyleMapDirective};\n", "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--row-count:1;--maxrow-count:;--line-height:var(--bl-font-title-3-line-height);--scroll-height:var(--line-height);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--border-size:1px;--default-scroll-height:calc((var(--row-count) * var(--line-height)) + var(--padding-vertical));--height:max(var(--scroll-height),var(--default-scroll-height));--input-font:var(--bl-font-body-text-2);--border-radius:var(--bl-size-3xs);--border-color:var(--bl-color-border);display:flex;flex-direction:column;position:relative;gap:var(--bl-size-3xs)}.input-wrapper{border:solid var(--border-size) var(--border-color);border-radius:var(--border-radius);padding-top:var(--padding-vertical);display:flex;box-sizing:border-box}textarea{width:100%;align-self:stretch;outline:0;font:var(--input-font);padding:0 calc(var(--padding-horizontal) - var(--border-size));padding-bottom:var(--padding-vertical);margin:0;border:0;border-radius:var(--border-radius);color:var(--bl-color-content-primary);resize:vertical;display:block}:host([size='large']) .wrapper{--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .wrapper{--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--input-font:var(--bl-font-body-text-3);--line-height:var(--bl-font-title-4-line-height)}textarea:disabled{background-color:var(--bl-color-secondary-background);color:var(--bl-color-content-tertiary);cursor:not-allowed}:host([disabled]) .wrapper{background-color:var(--bl-color-secondary-background)}:host([expand]) textarea{overflow:hidden;resize:none;height:var(--height)}:host([expand][max-rows]) textarea{--maxrow-height:calc((var(--maxrow-count) * var(--line-height)) + var(--padding-vertical));overflow-y:scroll;height:min(var(--height),var(--maxrow-height))}.wrapper:focus-within{--border-color:var(--bl-color-primary)}.dirty.max-len-invalid,.dirty.invalid{--border-color:var(--bl-color-danger)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0;max-width:max-content;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-content-primary-contrast);pointer-events:initial}:host ::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);background-color:initial;padding:0}.hint{display:none;font:var(--bl-font-body-text-3)}:host([character-counter]) .hint,:host([help-text]) .hint,.dirty.invalid .hint{display:flex;gap:var(--bl-size-3xs)}.hint>*{margin:0;padding:0}.help-text,.invalid-text{flex:1}.counter-text{color:var(--bl-color-content-secondary);margin-left:auto}:where(.max-len-invalid,.dirty.invalid) .hint>.counter-text{color:var(--bl-color-danger)}.dirty.invalid label{color:var(--bl-color-danger)}.invalid-text{display:none;color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}:where(.dirty.max-len-invalid,.dirty.invalid) .hint>.invalid-text{display:inline-block}.dirty.invalid .hint>.help-text{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FormControlMixin } from '@open-wc/form-control';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { textAreaValidators } from '../../utilities/form-control';\nimport 'element-internals-polyfill';\nimport style from './bl-textarea.css';\n\nexport type TextareaSize = 'small' | 'medium' | 'large';\n/**\n * @tag bl-textarea\n * @summary Baklava Textarea component\n */\n@customElement('bl-textarea')\nexport default class BlTextarea extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  static formControlValidators = textAreaValidators;\n\n  @query('textarea')\n  validationTarget: HTMLTextAreaElement;\n\n  /**\n   * Name of textarea\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * Makes textarea a mandatory field\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Disables the textarea\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets expandity\n   */\n  @property({ type: Boolean, reflect: true })\n  expand = false;\n\n  /**\n   * Sets max row when expand is true\n   */\n  @property({ type: Number, reflect: true, attribute: 'max-rows' })\n  maxRows?: number;\n\n  /**\n   * Sets textarea size.\n   */\n  @property({ type: String, reflect: true })\n  size?: TextareaSize = 'medium';\n\n  /**\n   * Sets label of the textarea\n   */\n  @property({ reflect: true })\n  label?: string;\n\n  /**\n   * Makes label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: 'label-fixed', reflect: true })\n  labelFixed = false;\n\n  /**\n   * Sets placeholder of the textarea\n   */\n  @property({ reflect: true })\n  placeholder?: string;\n\n  /**\n   * Enables showing character counter.\n   */\n  @property({ type: Boolean, attribute: 'character-counter', reflect: true })\n  characterCounter = false;\n\n  /**\n   * Adds help text\n   */\n  @property({ type: String, attribute: 'help-text', reflect: true })\n  helpText?: string;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: 'invalid-text', reflect: true })\n  customInvalidText?: string;\n\n  /**\n   * Sets minimum length of the textarea\n   */\n  @property({ type: Number, reflect: true })\n  minlength?: number;\n\n  /**\n   * Sets max length of textarea\n   */\n  @property({ type: Number, reflect: true })\n  maxlength?: number;\n\n  /**\n   * Sets initial value of the textarea\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * Sets textarea visible row count.\n   */\n  @property({ type: Number, reflect: true })\n  rows?: number = 4;\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   * Hints browser to autocomplete this field.\n   */\n  @property({ type: String, reflect: true })\n  autocomplete: string;\n\n  /**\n   * Enables/disables spellcheck feature inside the textarea\n   */\n  @property({ type: String, reflect: true, attribute: 'spellcheck' })\n  spellchecker: 'true' | 'false' = 'false';\n\n  @event('bl-input') private onInput: EventDispatcher<string>;\n\n  @event('bl-change') private onChange: EventDispatcher<string>;\n\n  @event('bl-invalid') private onInvalid: EventDispatcher<ValidityState>;\n\n  @state()\n  private customScrollHeight: string | null = null;\n\n  private inputId = Math.random().toString(36).substring(2);\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.internals.form?.addEventListener('submit', () => {\n      this.reportValidity();\n    });\n  }\n\n  private onError = (): void => {\n    this.onInvalid(this.internals.validity);\n  };\n\n  private inputHandler(event: Event) {\n    this.autoResize();\n\n    const value = (event.target as HTMLTextAreaElement).value;\n    this.value = value;\n    this.onInput(value);\n  }\n\n  private changeHandler(event: Event) {\n    const value = (event.target as HTMLTextAreaElement).value;\n\n    this.dirty = true;\n    this.value = value;\n    this.onChange(value);\n  }\n\n  firstUpdated() {\n    this.setValue(this.value);\n    this.autoResize();\n  }\n\n  protected async updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('rows')) {\n      this.autoResize();\n    }\n\n    if (changedProperties.has('value')) {\n      this.setValue(this.value);\n\n      await this.validationComplete;\n\n      this.requestUpdate();\n    }\n  }\n\n  reportValidity() {\n    this.dirty = true;\n    return this.checkValidity();\n  }\n\n  valueChangedCallback(value: string): void {\n    this.value = value;\n  }\n\n  validityCallback(): string | void {\n    return this.customInvalidText || this.validationTarget?.validationMessage;\n  }\n\n  private autoResize() {\n    if (!this.expand) {\n      return;\n    }\n\n    this.validationTarget.style.height = 'auto';\n    const scrollHeight = this.validationTarget.scrollHeight;\n    this.customScrollHeight = `${scrollHeight}px`;\n    this.validationTarget.style.removeProperty('height');\n  }\n\n  @state() private dirty = false;\n\n  render(): TemplateResult {\n    const maxLengthInvalid = this.internals.validity.tooLong;\n    const invalidMessage = !this.checkValidity()\n      ? html`<p class=\"invalid-text\">${this.validationMessage}</p>`\n      : ``;\n    const helpMessage = this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n\n    const label = this.label ? html`<label for=\"${this.inputId}\">${this.label}</label>` : '';\n    const characterCounterText =\n      this.characterCounter && this.maxlength\n        ? `${this.value.length}/${this.maxlength}`\n        : this.characterCounter\n        ? `${this.value.length}`\n        : '';\n    const characterCounter = this.characterCounter\n      ? html`<p class=\"counter-text\">${characterCounterText}</p>`\n      : '';\n\n    const wrapperClasses = {\n      'wrapper': true,\n      'has-value': this.value !== null && this.value !== '',\n      'dirty': this.dirty,\n      'max-len-invalid': maxLengthInvalid,\n      'invalid': !this.checkValidity(),\n    };\n\n    const styles = {\n      '--row-count': `${this.rows}`,\n      '--maxrow-count': this.maxRows ? `${this.maxRows}` : null,\n      '--scroll-height': this.customScrollHeight,\n    };\n\n    return html`\n      <div style=${styleMap(styles)} class=${classMap(wrapperClasses)}>\n        ${label}\n        <div class=\"input-wrapper\">\n          <textarea\n            id=\"${this.inputId}\"\n            name=\"${ifDefined(this.name)}\"\n            .value=${live(this.value)}\n            ?autofocus=${this.autofocus}\n            autocomplete=\"${ifDefined(this.autocomplete)}\"\n            inputmode=\"${ifDefined(this.inputmode)}\"\n            placeholder=\"${ifDefined(this.placeholder)}\"\n            minlength=\"${ifDefined(this.minlength)}\"\n            rows=\"${ifDefined(this.rows)}\"\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            spellcheck=\"${this.spellchecker}\"\n            @change=${this.changeHandler}\n            @input=${this.inputHandler}\n            @invalid=${this.onError}\n          >\n          </textarea>\n        </div>\n        <div class=\"hint\">${invalidMessage}${helpMessage}${characterCounter}</div>\n      </div>\n    `;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-textarea': BlTextarea;\n  }\n}\n"],
+  "mappings": "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",
   "names": ["styleMap", "directive", "Directive", "constructor", "partInfo", "super", "type", "PartType", "ATTRIBUTE", "name", "_a", "strings", "length", "Error", "render", "styleInfo", "Object", "keys", "reduce", "style", "prop", "value", "replace", "toLowerCase", "update", "part", "element", "this", "_previousStyleProperties", "Set", "add", "forEach", "delete", "includes", "removeProperty", "setProperty", "noChange", "styles", "i", "bl_textarea_default", "BlTextarea", "FormControlMixin", "s", "bl_textarea_default", "_a", "event", "value", "changedProperties", "scrollHeight", "maxLengthInvalid", "invalidMessage", "y", "helpMessage", "label", "characterCounterText", "characterCounter", "wrapperClasses", "styles", "i", "o", "l", "textAreaValidators", "__decorateClass", "e", "t"]
 }

package/dist/{chunk-J774WKKH.js → chunk-EMMMXLJJ.js}

@@ -36,8 +36,7 @@ import{a as h}from"./chunk-KPAWUBRO.js";import{a as o}from"./chunk-23UFIOHV.js";
           <div class="select">
             <label>${this.selectLabel}</label>
             <bl-select @bl-select="${this._selectHandler}" .value=${this.itemsPerPage}>
-              ${this.itemsPerPageOptions.map(n=>s`<bl-select-option
-                  .value=${n.value}
+              ${this.itemsPerPageOptions.map(n=>s`<bl-select-option .value=${n.value}
                   >${n.text}</bl-select-option
                 >`)}
             </bl-select>
@@ -48,4 +47,4 @@ import{a as h}from"./chunk-KPAWUBRO.js";import{a as o}from"./chunk-23UFIOHV.js";
         </div>`:null;return s` <nav class="pagination" aria-label="Pagination">
       ${(()=>{if(!(!this.hasSelect&&!this.hasJumper))return s` <div class="pagination-helpers">${e} ${a}</div> `})()} ${this.renderPages()}
     </nav>`}};r([i({attribute:"current-page",type:Number,reflect:!0})],t.prototype,"currentPage",2),r([i({attribute:"total-items",type:Number})],t.prototype,"totalItems",2),r([i({attribute:"items-per-page",type:Number,reflect:!0})],t.prototype,"itemsPerPage",2),r([i({attribute:"has-jumper",type:Boolean})],t.prototype,"hasJumper",2),r([i({attribute:"jumper-label",type:String})],t.prototype,"jumperLabel",2),r([i({attribute:"has-select",type:Boolean})],t.prototype,"hasSelect",2),r([i({attribute:"select-label",type:String})],t.prototype,"selectLabel",2),r([i({type:Array,attribute:!1})],t.prototype,"itemsPerPageOptions",2),r([g()],t.prototype,"pages",2),r([o("bl-change")],t.prototype,"onChange",2),t=r([c("bl-pagination")],t);export{t as a};
-//# sourceMappingURL=chunk-J774WKKH.js.map
+//# sourceMappingURL=chunk-EMMMXLJJ.js.map

package/dist/{chunk-J774WKKH.js.map → chunk-EMMMXLJJ.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/pagination/bl-pagination.css", "../src/components/pagination/bl-pagination.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none;gap:var(--bl-size-3xs)}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\\\B7 \\\\B7 \\\\B7';color:var(--bl-color-content-primary)}.pagination-helpers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--bl-size-m);color:var(--bl-color-content-primary)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}@media only screen and (max-width:768px){label{display:none}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../button/bl-button';\nimport '../input/bl-input';\nimport '../select/bl-select';\n\nimport style from './bl-pagination.css';\n\n/**\n * @tag bl-pagination\n * @summary Baklava Pagination component\n */\n\n@customElement('bl-pagination')\nexport default class BlPagination extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the current page\n   */\n  @property({ attribute: 'current-page', type: Number, reflect: true })\n  currentPage = 1;\n\n  /**\n   * Sets the total items to be paginated\n   */\n  @property({ attribute: 'total-items', type: Number })\n  totalItems = 0;\n\n  /**\n   * Sets the number of items per page\n   */\n  @property({ attribute: 'items-per-page', type: Number, reflect: true })\n  itemsPerPage = 10;\n\n  /**\n   * Adds jumper element if provided as true\n   */\n  @property({ attribute: 'has-jumper', type: Boolean })\n  hasJumper = false;\n\n  /**\n   * Sets the jumper label\n   */\n  @property({ attribute: 'jumper-label', type: String })\n  jumperLabel = 'Go To';\n\n  /**\n   *  Adds select element to choose the items per page\n   */\n  @property({ attribute: 'has-select', type: Boolean })\n  hasSelect = false;\n\n  /**\n   *  Adds select element to choose the items per page\n   */\n  @property({ attribute: 'select-label', type: String })\n  selectLabel = 'Show';\n\n  /**\n   * Sets the items per page options of the select element\n   *  PROPERTY\n   */\n  @property({ type: Array, attribute: false })\n  itemsPerPageOptions = [\n    {\n      text: '10 Items',\n      value: 10,\n    },\n    {\n      text: '25 Items',\n      value: 25,\n    },\n    {\n      text: '50 Items',\n      value: 50,\n    },\n    {\n      text: '100 Items',\n      value: 100,\n    },\n  ];\n\n  @state() private pages: Array<number | string> = [];\n\n  /**\n   * Fires when the current page changes\n   */\n  @event('bl-change') private onChange: EventDispatcher<{\n    selectedPage: number;\n    prevPage: number;\n    itemsPerPage: number;\n  }>;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    setTimeout(() => {\n      window?.addEventListener('resize', () => this._paginate());\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window?.removeEventListener('resize', this._paginate);\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (\n      changedProperties.has('currentPage') ||\n      changedProperties.has('itemsPerPage') ||\n      changedProperties.has('totalItems')\n    ) {\n      this._paginate();\n    }\n  }\n\n  private _paginate() {\n    this.pages = [];\n    const pageListLength = Math.ceil(Math.abs(this.totalItems / this.itemsPerPage)) || 1;\n\n    if (pageListLength <= 8) {\n      this.pages = Array.from(Array(pageListLength), (_, index) => index + 1);\n      return;\n    }\n\n    this.pages.push(1);\n\n    if (this.currentPage < 5) {\n      this.pages.push(2, 3, 4, 5, '...');\n    } else if (this.currentPage >= 5 && this.currentPage <= pageListLength - 4) {\n      this.pages.push('...', this.currentPage - 1, this.currentPage, this.currentPage + 1, '...');\n    } else {\n      this.pages.push(\n        '...',\n        pageListLength - 4,\n        pageListLength - 3,\n        pageListLength - 2,\n        pageListLength - 1\n      );\n    }\n\n    this.pages.push(pageListLength);\n  }\n\n  private _changePage(selectedPage: number): void {\n    const prevPage = this.currentPage;\n\n    this.currentPage = selectedPage;\n\n    this.onChange({\n      selectedPage,\n      prevPage,\n      itemsPerPage: this.itemsPerPage,\n    });\n  }\n\n  private _pageBack(): void {\n    if (this.currentPage === 1) return;\n    this._changePage(this.currentPage - 1);\n  }\n\n  private _pageForward(): void {\n    if (this.currentPage === this._getLastPage()) return;\n    this._changePage(this.currentPage + 1);\n  }\n\n  private _getLastPage(): number {\n    return +this.pages[this.pages.length - 1];\n  }\n\n  private _inputHandler(event: CustomEvent) {\n    event.stopPropagation();\n    const inputValue = +(event.target as HTMLInputElement).value;\n    const newPage = inputValue > 0 ? Math.min(this._getLastPage(), inputValue) : 1;\n    this._changePage(newPage);\n  }\n\n  private _selectHandler(event: CustomEvent) {\n    this.itemsPerPage = +event?.detail[0]?.value || 100;\n    this._changePage(1);\n  }\n\n  private _renderSinglePage(page: number | string) {\n    if (typeof page === 'string') {\n      return html`<li class=\"dots\"></li>`;\n    }\n    const ariaCurrent = this.currentPage === page ? 'page' : undefined;\n    return html` <li>\n      <bl-button\n        @click=\"${() => this._changePage(page)}\"\n        variant=${this.currentPage === page ? 'primary' : 'tertiary'}\n        kind=\"neutral\"\n        label=\"Page ${page}\"\n        aria-current=${ifDefined(ariaCurrent)}\n      >\n        ${page}\n      </bl-button>\n    </li>`;\n  }\n\n  private renderPages() {\n    return html`\n      <div class=\"page-container\">\n        <bl-button\n          @click=\"${this._pageBack}\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          icon=\"arrow_left\"\n          class=\"previous\"\n          label=\"Previous\"\n          ?disabled=${this.currentPage === 1}\n        ></bl-button>\n        <ul class=\"page-list\">\n          ${window.innerWidth < 768\n            ? html`${this._renderSinglePage(this.currentPage)}`\n            : this.pages.map(page => html`${this._renderSinglePage(page)}`)}\n        </ul>\n        <bl-button\n          @click=\"${this._pageForward}\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          icon=\"arrow_right\"\n          class=\"next\"\n          label=\"Next\"\n          ?disabled=${this.currentPage === this._getLastPage()}\n        ></bl-button>\n      </div>\n    `;\n  }\n\n  render(): TemplateResult {\n    const selectEl = this.hasSelect\n      ? html`\n          <div class=\"select\">\n            <label>${this.selectLabel}</label>\n            <bl-select @bl-select=\"${this._selectHandler}\" .value=${this.itemsPerPage}>\n              ${this.itemsPerPageOptions.map(option => {\n                return html`<bl-select-option\n                  .value=${option.value}\n                  >${option.text}</bl-select-option\n                >`;\n              })}\n            </bl-select>\n          </div>\n        `\n      : null;\n\n    const jumperEl = this.hasJumper\n      ? html` <div class=\"jumper\">\n          <label>${this.jumperLabel}</label>\n          <bl-input .value=\"${this.currentPage}\" @bl-change=\"${this._inputHandler}\"></bl-input>\n        </div>`\n      : null;\n\n    const getHelperElements = () => {\n      if (!this.hasSelect && !this.hasJumper) return;\n      return html` <div class=\"pagination-helpers\">${selectEl} ${jumperEl}</div> `;\n    };\n\n    return html` <nav class=\"pagination\" aria-label=\"Pagination\">\n      ${getHelperElements()} ${this.renderPages()}\n    </nav>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-pagination': BlPagination;\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none;gap:var(--bl-size-3xs)}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\\\B7 \\\\B7 \\\\B7';color:var(--bl-color-content-primary)}.pagination-helpers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--bl-size-m);color:var(--bl-color-content-primary)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}@media only screen and (max-width:768px){label{display:none}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../button/bl-button';\nimport '../input/bl-input';\nimport '../select/bl-select';\n\nimport style from './bl-pagination.css';\n\n/**\n * @tag bl-pagination\n * @summary Baklava Pagination component\n */\n\n@customElement('bl-pagination')\nexport default class BlPagination extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the current page\n   */\n  @property({ attribute: 'current-page', type: Number, reflect: true })\n  currentPage = 1;\n\n  /**\n   * Sets the total items to be paginated\n   */\n  @property({ attribute: 'total-items', type: Number })\n  totalItems = 0;\n\n  /**\n   * Sets the number of items per page\n   */\n  @property({ attribute: 'items-per-page', type: Number, reflect: true })\n  itemsPerPage = 10;\n\n  /**\n   * Adds jumper element if provided as true\n   */\n  @property({ attribute: 'has-jumper', type: Boolean })\n  hasJumper = false;\n\n  /**\n   * Sets the jumper label\n   */\n  @property({ attribute: 'jumper-label', type: String })\n  jumperLabel = 'Go To';\n\n  /**\n   *  Adds select element to choose the items per page\n   */\n  @property({ attribute: 'has-select', type: Boolean })\n  hasSelect = false;\n\n  /**\n   *  Adds select element to choose the items per page\n   */\n  @property({ attribute: 'select-label', type: String })\n  selectLabel = 'Show';\n\n  /**\n   * Sets the items per page options of the select element\n   *  PROPERTY\n   */\n  @property({ type: Array, attribute: false })\n  itemsPerPageOptions = [\n    {\n      text: '10 Items',\n      value: 10,\n    },\n    {\n      text: '25 Items',\n      value: 25,\n    },\n    {\n      text: '50 Items',\n      value: 50,\n    },\n    {\n      text: '100 Items',\n      value: 100,\n    },\n  ];\n\n  @state() private pages: Array<number | string> = [];\n\n  /**\n   * Fires when the current page changes\n   */\n  @event('bl-change') private onChange: EventDispatcher<{\n    selectedPage: number;\n    prevPage: number;\n    itemsPerPage: number;\n  }>;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    setTimeout(() => {\n      window?.addEventListener('resize', () => this._paginate());\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window?.removeEventListener('resize', this._paginate);\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (\n      changedProperties.has('currentPage') ||\n      changedProperties.has('itemsPerPage') ||\n      changedProperties.has('totalItems')\n    ) {\n      this._paginate();\n    }\n  }\n\n  private _paginate() {\n    this.pages = [];\n    const pageListLength = Math.ceil(Math.abs(this.totalItems / this.itemsPerPage)) || 1;\n\n    if (pageListLength <= 8) {\n      this.pages = Array.from(Array(pageListLength), (_, index) => index + 1);\n      return;\n    }\n\n    this.pages.push(1);\n\n    if (this.currentPage < 5) {\n      this.pages.push(2, 3, 4, 5, '...');\n    } else if (this.currentPage >= 5 && this.currentPage <= pageListLength - 4) {\n      this.pages.push('...', this.currentPage - 1, this.currentPage, this.currentPage + 1, '...');\n    } else {\n      this.pages.push(\n        '...',\n        pageListLength - 4,\n        pageListLength - 3,\n        pageListLength - 2,\n        pageListLength - 1\n      );\n    }\n\n    this.pages.push(pageListLength);\n  }\n\n  private _changePage(selectedPage: number): void {\n    const prevPage = this.currentPage;\n\n    this.currentPage = selectedPage;\n\n    this.onChange({\n      selectedPage,\n      prevPage,\n      itemsPerPage: this.itemsPerPage,\n    });\n  }\n\n  private _pageBack(): void {\n    if (this.currentPage === 1) return;\n    this._changePage(this.currentPage - 1);\n  }\n\n  private _pageForward(): void {\n    if (this.currentPage === this._getLastPage()) return;\n    this._changePage(this.currentPage + 1);\n  }\n\n  private _getLastPage(): number {\n    return +this.pages[this.pages.length - 1];\n  }\n\n  private _inputHandler(event: CustomEvent) {\n    event.stopPropagation();\n    const inputValue = +(event.target as HTMLInputElement).value;\n    const newPage = inputValue > 0 ? Math.min(this._getLastPage(), inputValue) : 1;\n    this._changePage(newPage);\n  }\n\n  private _selectHandler(event: CustomEvent) {\n    this.itemsPerPage = +event?.detail[0]?.value || 100;\n    this._changePage(1);\n  }\n\n  private _renderSinglePage(page: number | string) {\n    if (typeof page === 'string') {\n      return html`<li class=\"dots\"></li>`;\n    }\n    const ariaCurrent = this.currentPage === page ? 'page' : undefined;\n    return html` <li>\n      <bl-button\n        @click=\"${() => this._changePage(page)}\"\n        variant=${this.currentPage === page ? 'primary' : 'tertiary'}\n        kind=\"neutral\"\n        label=\"Page ${page}\"\n        aria-current=${ifDefined(ariaCurrent)}\n      >\n        ${page}\n      </bl-button>\n    </li>`;\n  }\n\n  private renderPages() {\n    return html`\n      <div class=\"page-container\">\n        <bl-button\n          @click=\"${this._pageBack}\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          icon=\"arrow_left\"\n          class=\"previous\"\n          label=\"Previous\"\n          ?disabled=${this.currentPage === 1}\n        ></bl-button>\n        <ul class=\"page-list\">\n          ${window.innerWidth < 768\n            ? html`${this._renderSinglePage(this.currentPage)}`\n            : this.pages.map(page => html`${this._renderSinglePage(page)}`)}\n        </ul>\n        <bl-button\n          @click=\"${this._pageForward}\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          icon=\"arrow_right\"\n          class=\"next\"\n          label=\"Next\"\n          ?disabled=${this.currentPage === this._getLastPage()}\n        ></bl-button>\n      </div>\n    `;\n  }\n\n  render(): TemplateResult {\n    const selectEl = this.hasSelect\n      ? html`\n          <div class=\"select\">\n            <label>${this.selectLabel}</label>\n            <bl-select @bl-select=\"${this._selectHandler}\" .value=${this.itemsPerPage}>\n              ${this.itemsPerPageOptions.map(option => {\n                return html`<bl-select-option .value=${option.value}\n                  >${option.text}</bl-select-option\n                >`;\n              })}\n            </bl-select>\n          </div>\n        `\n      : null;\n\n    const jumperEl = this.hasJumper\n      ? html` <div class=\"jumper\">\n          <label>${this.jumperLabel}</label>\n          <bl-input .value=\"${this.currentPage}\" @bl-change=\"${this._inputHandler}\"></bl-input>\n        </div>`\n      : null;\n\n    const getHelperElements = () => {\n      if (!this.hasSelect && !this.hasJumper) return;\n      return html` <div class=\"pagination-helpers\">${selectEl} ${jumperEl}</div> `;\n    };\n\n    return html` <nav class=\"pagination\" aria-label=\"Pagination\">\n      ${getHelperElements()} ${this.renderPages()}\n    </nav>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-pagination': BlPagination;\n  }\n}\n"],
+  "mappings": "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",
   "names": ["styles", "i", "bl_pagination_default", "BlPagination", "s", "bl_pagination_default", "changedProperties", "pageListLength", "_", "index", "selectedPage", "prevPage", "event", "inputValue", "newPage", "_a", "page", "y", "ariaCurrent", "l", "selectEl", "option", "jumperEl", "__decorateClass", "e", "t"]
 }

package/dist/{chunk-BD5KXTYS.js → chunk-HTIGXY2B.js}

@@ -1,8 +1,4 @@
-import{a as f}from"./chunk-DJOD4BTL.js";import{a as v}from"./chunk-OLPYXE2P.js";import{a as i}from"./chunk-23UFIOHV.js";import{a as s,b as n,f as d,g as c,h as o,i as u,j as m}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var k=s`:host{display:flex;flex-direction:row}fieldset{border:0;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-content-primary)}.options{display:flex;flex-flow:var(--bl-radio-direction,column) wrap;gap:16px;margin-block:var(--bl-size-xs)}`,g=k;var b="bl-radio-group",h="bl-radio-change",r=class extends f(d){constructor(){super(...arguments);this.value="";this.required=!1;this.focusedOptionIndex=0}static get styles(){return[g]}get options(){return[].slice.call(this.querySelectorAll(p))}get availableOptions(){return this.options.filter(e=>!e.disabled)}updated(e){e.has("value")&&(this.setValue(this.value),this.onChange(this.value))}handleOptionChecked(e){let a=e.target;this.setValue(a.value),this.onChange(a.value)}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--;else if([" "].includes(e.key)){this.availableOptions[this.focusedOptionIndex].select();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.availableOptions.length-1)),this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}connectedCallback(){super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown)}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}render(){return n`<fieldset
-      role="radiogroup"
-      aria-labelledby="label"
-      aria-required=${this.required}
-    >
+import{a as f}from"./chunk-DJOD4BTL.js";import{a as v}from"./chunk-OLPYXE2P.js";import{a as i}from"./chunk-23UFIOHV.js";import{a as s,b as n,f as d,g as c,h as o,i as u,j as m}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var k=s`:host{display:flex;flex-direction:row}fieldset{border:0;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-content-primary)}.options{display:flex;flex-flow:var(--bl-radio-direction,column) wrap;gap:16px;margin-block:var(--bl-size-xs)}`,g=k;var b="bl-radio-group",h="bl-radio-change",r=class extends f(d){constructor(){super(...arguments);this.value="";this.required=!1;this.focusedOptionIndex=0}static get styles(){return[g]}get options(){return[].slice.call(this.querySelectorAll(p))}get availableOptions(){return this.options.filter(e=>!e.disabled)}updated(e){e.has("value")&&(this.setValue(this.value),this.onChange(this.value))}handleOptionChecked(e){let a=e.target;this.setValue(a.value),this.onChange(a.value)}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--;else if([" "].includes(e.key)){this.availableOptions[this.focusedOptionIndex].select();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.availableOptions.length-1)),this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}connectedCallback(){super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown)}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}render(){return n`<fieldset role="radiogroup" aria-labelledby="label" aria-required=${this.required}>
       <legend>${this.label}</legend>
       <div class="options" @bl-checked=${this.handleOptionChecked}>
         <slot></slot>
@@ -14,7 +10,8 @@ import{a as f}from"./chunk-DJOD4BTL.js";import{a as v}from"./chunk-OLPYXE2P.js";
       aria-disabled=${this.disabled}
       aria-readonly=${this.disabled}
       @blur=${this.blur}
-      @click=${this.select}>
+      @click=${this.select}
+    >
       <p id="label"><slot></slot></p>
     </div>`}};t([o()],l.prototype,"name",2),t([o()],l.prototype,"value",2),t([o({type:Boolean,reflect:!0})],l.prototype,"disabled",2),t([u()],l.prototype,"selected",2),t([i("bl-checked")],l.prototype,"onChecked",2),t([i("bl-focus")],l.prototype,"onFocus",2),t([i("bl-blur")],l.prototype,"onBlur",2),t([m("[role=radio]")],l.prototype,"radioElement",2),l=t([c(p)],l);export{p as a,W as b,l as c,b as d,h as e,r as f};
-//# sourceMappingURL=chunk-BD5KXTYS.js.map
+//# sourceMappingURL=chunk-HTIGXY2B.js.map

package/dist/chunk-HTIGXY2B.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/radio-group/bl-radio-group.css", "../src/components/radio-group/bl-radio-group.ts", "../src/components/radio-group/radio/bl-radio.css", "../src/components/radio-group/radio/bl-radio.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:flex;flex-direction:row}fieldset{border:0;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-content-primary)}.options{display:flex;flex-flow:var(--bl-radio-direction,column) wrap;gap:16px;margin-block:var(--bl-size-xs)}`;\nexport default styles;\n", "import { FormControlMixin } from '@open-wc/form-control';\nimport { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'element-internals-polyfill';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-radio-group.css';\nimport BlRadio, { blRadioTag } from './radio/bl-radio';\n\nexport const blRadioGroupTag = 'bl-radio-group';\n\nexport const blChangeEventName = 'bl-radio-change';\n\n/**\n * @tag bl-radio-group\n * @summary Baklava Button component\n *\n * @cssproperty --bl-radio-direction - Can be used for showing radio options as columns instead of rows. Options are `row` or `column`\n */\n@customElement(blRadioGroupTag)\nexport default class BlRadioGroup extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the radio group label\n   */\n  @property({ type: String })\n  label: string;\n\n  /**\n   * Set and gets the actual value of the field\n   */\n  @property()\n  value = '';\n\n  /**\n   * Sets option as required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  get options(): BlRadio[] {\n    return [].slice.call(this.querySelectorAll(blRadioTag));\n  }\n\n  get availableOptions(): BlRadio[] {\n    return this.options.filter(option => !option.disabled);\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('value')) {\n      this.setValue(this.value);\n      this.onChange(this.value);\n    }\n  }\n\n  /**\n   * Fires when radio group value changed\n   */\n  @event('bl-radio-change') private onChange: EventDispatcher<string>;\n\n  private focusedOptionIndex = 0;\n\n  private handleOptionChecked(event: CustomEvent) {\n    const checkedOption = event.target as BlRadio;\n    this.setValue(checkedOption.value);\n    this.onChange(checkedOption.value);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Next option\n    if (['ArrowDown', 'ArrowRight'].includes(event.key)) {\n      this.focusedOptionIndex++;\n\n      // Previous option\n    } else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {\n      this.focusedOptionIndex--;\n\n      // Select option\n    } else if ([' '].includes(event.key)) {\n      this.availableOptions[this.focusedOptionIndex].select();\n      return;\n    } else {\n      // Other keys are not our interest here\n      return;\n    }\n\n    // Don't exceed array indexes\n    this.focusedOptionIndex = Math.max(\n      0,\n      Math.min(this.focusedOptionIndex, this.availableOptions.length - 1)\n    );\n\n    this.availableOptions[this.focusedOptionIndex].focus();\n\n    event.preventDefault();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.tabIndex = 0;\n    this.addEventListener('focus', this.handleFocus);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  private handleFocus() {\n    this.availableOptions[this.focusedOptionIndex].focus();\n  }\n\n  render(): TemplateResult {\n    return html`<fieldset role=\"radiogroup\" aria-labelledby=\"label\" aria-required=${this.required}>\n      <legend>${this.label}</legend>\n      <div class=\"options\" @bl-checked=${this.handleOptionChecked}>\n        <slot></slot>\n      </div>\n    </fieldset>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blRadioGroupTag]: BlRadioGroup;\n  }\n  interface HTMLElementEventMap {\n    [blChangeEventName]: CustomEvent<string>;\n  }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;cursor:pointer;outline:0}.wrapper{outline:0}#label{display:flex;font:var(--bl-font-title-3-regular);height:var(--bl-size-m);line-height:normal;vertical-align:middle;margin-block:0;color:var(--bl-color-content-primary)}#label::before{content:'';display:inline-block;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);background-color:white;border-radius:var(--bl-border-radius-circle);border:solid 1px var(--bl-color-border);margin-right:var(--bl-size-2xs);vertical-align:middle}.selected #label::before{border-width:4px;border-color:var(--bl-color-primary)}:host(:hover) #label,.selected #label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,.selected #label{color:var(--bl-color-primary)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) #label{color:var(--bl-color-content-passive)}:host([disabled]) #label::before{background-color:var(--bl-color-secondary-background)}:host([disabled]) .selected #label::before{background-color:var(--bl-color-content-passive);border-color:var(--bl-color-secondary-background)}.wrapper:focus-visible #label::before{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`;\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 { event, EventDispatcher } from '../../../utilities/event';\nimport type BlRadioGroup from '../bl-radio-group';\nimport { blChangeEventName, blRadioGroupTag } from '../bl-radio-group';\nimport style from './bl-radio.css';\n\nexport const blRadioTag = 'bl-radio';\n\nexport const blCheckedEventName = 'bl-checked';\n\n/**\n * @tag bl-radio\n * @summary Baklava Radio Option component\n */\n@customElement(blRadioTag)\nexport default class BlRadio extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  @property()\n  name: string;\n\n  @property()\n  value: string;\n\n  /**\n   * Sets option as disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @state() private selected = false;\n\n  /**\n   * Fires when radio is checked\n   */\n  @event('bl-checked') private onChecked: EventDispatcher<string>;\n\n  /**\n   * Fires when radio is blurred\n   */\n  @event('bl-focus') private onFocus: EventDispatcher<string>;\n\n  /**\n   * Fires when radio is blurred\n   */\n  @event('bl-blur') private onBlur: EventDispatcher<string>;\n\n  /**\n   * Sets this option selected\n   */\n  select() {\n    this.selected = true;\n    this.onChecked(this.value);\n  }\n\n  /**\n   * Readonly property to determine if option is currently checked\n   */\n  get checked() {\n    return this.selected;\n  }\n\n  @query('[role=radio]') private radioElement: HTMLElement;\n\n  /**\n   * Focuses this option\n   */\n  focus() {\n    this.radioElement.tabIndex = 0;\n    this.radioElement.focus();\n    this.onFocus(this.value);\n  }\n\n  /**\n   * Blurs from this option\n   */\n  blur() {\n    this.radioElement.tabIndex = -1;\n    this.onBlur(this.value);\n  }\n\n  private handleFieldValueChange = (event: CustomEvent<string>) => {\n    const newValue = event.detail;\n    this.selected = newValue === this.value;\n  };\n\n  private field: BlRadioGroup | null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.field = this.closest<BlRadioGroup>(blRadioGroupTag);\n\n    if (!this.field) {\n      console.warn('bl-radio is designed to be used inside a bl-radio-group', this);\n    }\n\n    this.field?.addEventListener(blChangeEventName, this.handleFieldValueChange);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.field?.removeEventListener(blChangeEventName, this.handleFieldValueChange);\n  }\n\n  render(): TemplateResult {\n    const classes = classMap({\n      wrapper: true,\n      selected: this.selected,\n    });\n\n    return html`<div\n      class=${classes}\n      role=\"radio\"\n      aria-labelledby=\"label\"\n      aria-disabled=${this.disabled}\n      aria-readonly=${this.disabled}\n      @blur=${this.blur}\n      @click=${this.select}\n    >\n      <p id=\"label\"><slot></slot></p>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blRadioTag]: BlRadio;\n  }\n  interface HTMLElementEventMap {\n    [blCheckedEventName]: CustomEvent<string>;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "i", "bl_radio_group_default", "blRadioGroupTag", "blChangeEventName", "BlRadioGroup", "FormControlMixin", "s", "bl_radio_group_default", "blRadioTag", "option", "changedProperties", "event", "checkedOption", "y", "__decorateClass", "e", "styles", "i", "bl_radio_default", "blRadioTag", "blCheckedEventName", "BlRadio", "s", "event", "newValue", "bl_radio_default", "_a", "blRadioGroupTag", "blChangeEventName", "classes", "o", "y", "__decorateClass", "e", "t", "i"]
+}

package/dist/{chunk-RHHUBYKO.js → chunk-J73JZGIX.js}

@@ -8,4 +8,4 @@ import{a as l,b as n,f as r,g as d}from"./chunk-57PTZNIL.js";import{a as i}from"
         <slot></slot>
       </div>
     </div>`}};s=i([d("bl-tab-group")],s);export{s as a};
-//# sourceMappingURL=chunk-RHHUBYKO.js.map
+//# sourceMappingURL=chunk-J73JZGIX.js.map

package/dist/{chunk-RHHUBYKO.js.map → chunk-J73JZGIX.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/tab-group/bl-tab-group.css", "../src/components/tab-group/bl-tab-group.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.tabs{background-color:var(--bl-color-primary-background);border-bottom:var(--bl-size-4xs) solid var(--bl-color-secondary-background);display:flex;flex-direction:row}.tabs-list{overflow-x:scroll;border-radius:var(--bl-border-radius-m) var(--bl-border-radius-m) 0 0}.panels{border-radius:0 0 var(--bl-border-radius-m) var(--bl-border-radius-m)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport style from './bl-tab-group.css';\nimport './tab-panel/bl-tab-panel';\nimport './tab/bl-tab';\nimport type BlTabPanel from './tab-panel/bl-tab-panel';\nimport type BlTab from './tab/bl-tab';\n\n/**\n * @tag bl-tab-group\n * @summary Baklava Tab group component\n */\n@customElement('bl-tab-group')\nexport default class BlTabGroup extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  private _connectedTabs: BlTab[] = [];\n  private _connectedPanels: BlTabPanel[] = [];\n  private _tabFocus = 0;\n\n  get tabs() {\n    return this._connectedTabs;\n  }\n\n  get panels() {\n    return this._connectedPanels;\n  }\n\n  /**\n   * This method is used by `tab` component to register them self to the tab group.\n   * @param tab BlTab reference to be registered\n   */\n  registerTab(tab: BlTab) {\n    const isFirstAndNotDisabled =\n      this._connectedTabs.filter(t => !t.disabled).length === 0 && !tab.disabled;\n    this._connectedTabs.push(tab);\n\n    if ((!tab.disabled && tab.selected) || isFirstAndNotDisabled) {\n      this.selectedTabName = tab.name;\n      this._tabFocus = this._connectedTabs.length - 1;\n    }\n  }\n\n  /**\n   * This method is used by `tab` component to unregister them self to the tab group.\n   * @param tab BlTab reference to be unregistered\n   */\n  unregisterTab(tab: BlTab) {\n    this._connectedTabs.splice(this._connectedTabs.indexOf(tab), 1);\n    if (tab.selected) {\n      this._connectedTabs.find(t => !t.disabled)?.select();\n    }\n  }\n\n  /**\n   * This method is used by `tab-panel` component to register them self to the tab group.\n   * @param panel BlTabPanel reference to be registered\n   */\n  registerTabPanel(panel: BlTabPanel) {\n    panel.hidden = panel.tab !== this.selectedTabName;\n    panel.tabIndex = 0;\n    this._connectedPanels.push(panel);\n  }\n\n  /**\n   * This method is used by `tab-panel` component to unregister them self to the tab group.\n   * @param panel BlTabPanel reference to be unregistered\n   */\n  unregisterTabPanel(panel: BlTabPanel) {\n    this._connectedTabs.splice(this._connectedPanels.indexOf(panel), 1);\n  }\n\n  private _selectedTabName: string;\n\n  get selectedTabName() {\n    return this._selectedTabName;\n  }\n\n  set selectedTabName(name: string) {\n    this._selectedTabName = name;\n    this._connectedTabs.forEach(t => {\n      t.selected = name === t.name;\n    });\n    this._connectedPanels.forEach(p => {\n      p.hidden = p.tab !== this._selectedTabName;\n    });\n  }\n\n  private _handleTabSelected(e: CustomEvent) {\n    this.selectedTabName = e.detail;\n    this._tabFocus = this._connectedTabs.findIndex(t => t.name === e.detail);\n  }\n\n  private _handleTabListKeyDown(e: KeyboardEvent) {\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n      if (e.key === \"ArrowRight\") {\n        do {\n          this._tabFocus++;\n          if (this._tabFocus >= this._connectedTabs.length) {\n            this._tabFocus = 0;\n          }\n        } while (this._connectedTabs[this._tabFocus].disabled);\n      } else if (e.key === \"ArrowLeft\") {\n        do {\n          this._tabFocus--;\n          if (this._tabFocus < 0) {\n            this._tabFocus = this._connectedTabs.length - 1;\n          }\n        } while (this._connectedTabs[this._tabFocus].disabled);\n      }\n\n      this._connectedTabs[this._tabFocus].focus();\n    }\n  }\n\n  render(): TemplateResult {\n    return html` <div class=\"container\" @bl-tab-selected=\"${this._handleTabSelected}\">\n      <div role=\"tablist\" @keydown=${this._handleTabListKeyDown} class=\"tabs-list\">\n        <div class=\"tabs\">\n          <slot name=\"tabs\"></slot>\n        </div>\n      </div>\n      <div role=\"tabpanel\" class=\"panels\">\n        <slot></slot>\n      </div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-tab-group': BlTabGroup;\n  }\n}\n"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.tabs{background-color:var(--bl-color-primary-background);border-bottom:var(--bl-size-4xs) solid var(--bl-color-secondary-background);display:flex;flex-direction:row}.tabs-list{overflow-x:scroll;border-radius:var(--bl-border-radius-m) var(--bl-border-radius-m) 0 0}.panels{border-radius:0 0 var(--bl-border-radius-m) var(--bl-border-radius-m)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport style from './bl-tab-group.css';\nimport './tab-panel/bl-tab-panel';\nimport './tab/bl-tab';\nimport type BlTabPanel from './tab-panel/bl-tab-panel';\nimport type BlTab from './tab/bl-tab';\n\n/**\n * @tag bl-tab-group\n * @summary Baklava Tab group component\n */\n@customElement('bl-tab-group')\nexport default class BlTabGroup extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  private _connectedTabs: BlTab[] = [];\n  private _connectedPanels: BlTabPanel[] = [];\n  private _tabFocus = 0;\n\n  get tabs() {\n    return this._connectedTabs;\n  }\n\n  get panels() {\n    return this._connectedPanels;\n  }\n\n  /**\n   * This method is used by `tab` component to register them self to the tab group.\n   * @param tab BlTab reference to be registered\n   */\n  registerTab(tab: BlTab) {\n    const isFirstAndNotDisabled =\n      this._connectedTabs.filter(t => !t.disabled).length === 0 && !tab.disabled;\n    this._connectedTabs.push(tab);\n\n    if ((!tab.disabled && tab.selected) || isFirstAndNotDisabled) {\n      this.selectedTabName = tab.name;\n      this._tabFocus = this._connectedTabs.length - 1;\n    }\n  }\n\n  /**\n   * This method is used by `tab` component to unregister them self to the tab group.\n   * @param tab BlTab reference to be unregistered\n   */\n  unregisterTab(tab: BlTab) {\n    this._connectedTabs.splice(this._connectedTabs.indexOf(tab), 1);\n    if (tab.selected) {\n      this._connectedTabs.find(t => !t.disabled)?.select();\n    }\n  }\n\n  /**\n   * This method is used by `tab-panel` component to register them self to the tab group.\n   * @param panel BlTabPanel reference to be registered\n   */\n  registerTabPanel(panel: BlTabPanel) {\n    panel.hidden = panel.tab !== this.selectedTabName;\n    panel.tabIndex = 0;\n    this._connectedPanels.push(panel);\n  }\n\n  /**\n   * This method is used by `tab-panel` component to unregister them self to the tab group.\n   * @param panel BlTabPanel reference to be unregistered\n   */\n  unregisterTabPanel(panel: BlTabPanel) {\n    this._connectedTabs.splice(this._connectedPanels.indexOf(panel), 1);\n  }\n\n  private _selectedTabName: string;\n\n  get selectedTabName() {\n    return this._selectedTabName;\n  }\n\n  set selectedTabName(name: string) {\n    this._selectedTabName = name;\n    this._connectedTabs.forEach(t => {\n      t.selected = name === t.name;\n    });\n    this._connectedPanels.forEach(p => {\n      p.hidden = p.tab !== this._selectedTabName;\n    });\n  }\n\n  private _handleTabSelected(e: CustomEvent) {\n    this.selectedTabName = e.detail;\n    this._tabFocus = this._connectedTabs.findIndex(t => t.name === e.detail);\n  }\n\n  private _handleTabListKeyDown(e: KeyboardEvent) {\n    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {\n      if (e.key === 'ArrowRight') {\n        do {\n          this._tabFocus++;\n          if (this._tabFocus >= this._connectedTabs.length) {\n            this._tabFocus = 0;\n          }\n        } while (this._connectedTabs[this._tabFocus].disabled);\n      } else if (e.key === 'ArrowLeft') {\n        do {\n          this._tabFocus--;\n          if (this._tabFocus < 0) {\n            this._tabFocus = this._connectedTabs.length - 1;\n          }\n        } while (this._connectedTabs[this._tabFocus].disabled);\n      }\n\n      this._connectedTabs[this._tabFocus].focus();\n    }\n  }\n\n  render(): TemplateResult {\n    return html` <div class=\"container\" @bl-tab-selected=\"${this._handleTabSelected}\">\n      <div role=\"tablist\" @keydown=${this._handleTabListKeyDown} class=\"tabs-list\">\n        <div class=\"tabs\">\n          <slot name=\"tabs\"></slot>\n        </div>\n      </div>\n      <div role=\"tabpanel\" class=\"panels\">\n        <slot></slot>\n      </div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-tab-group': BlTabGroup;\n  }\n}\n"],
   "mappings": "qGACO,IAAMA,EAASC,2VACfC,EAAQF,ECWf,IAAqBG,EAArB,cAAwCC,CAAW,CAAnD,kCAKE,KAAQ,eAA0B,CAAC,EACnC,KAAQ,iBAAiC,CAAC,EAC1C,KAAQ,UAAY,EANpB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAMA,IAAI,MAAO,CACT,OAAO,KAAK,cACd,CAEA,IAAI,QAAS,CACX,OAAO,KAAK,gBACd,CAMA,YAAYC,EAAY,CACtB,IAAMC,EACJ,KAAK,eAAe,OAAOC,GAAK,CAACA,EAAE,QAAQ,EAAE,SAAW,GAAK,CAACF,EAAI,SACpE,KAAK,eAAe,KAAKA,CAAG,GAEvB,CAACA,EAAI,UAAYA,EAAI,UAAaC,KACrC,KAAK,gBAAkBD,EAAI,KAC3B,KAAK,UAAY,KAAK,eAAe,OAAS,EAElD,CAMA,cAAcA,EAAY,CAjD5B,IAAAG,EAkDI,KAAK,eAAe,OAAO,KAAK,eAAe,QAAQH,CAAG,EAAG,CAAC,EAC1DA,EAAI,YACNG,EAAA,KAAK,eAAe,KAAKD,GAAK,CAACA,EAAE,QAAQ,IAAzC,MAAAC,EAA4C,SAEhD,CAMA,iBAAiBC,EAAmB,CAClCA,EAAM,OAASA,EAAM,MAAQ,KAAK,gBAClCA,EAAM,SAAW,EACjB,KAAK,iBAAiB,KAAKA,CAAK,CAClC,CAMA,mBAAmBA,EAAmB,CACpC,KAAK,eAAe,OAAO,KAAK,iBAAiB,QAAQA,CAAK,EAAG,CAAC,CACpE,CAIA,IAAI,iBAAkB,CACpB,OAAO,KAAK,gBACd,CAEA,IAAI,gBAAgBC,EAAc,CAChC,KAAK,iBAAmBA,EACxB,KAAK,eAAe,QAAQ,GAAK,CAC/B,EAAE,SAAWA,IAAS,EAAE,IAC1B,CAAC,EACD,KAAK,iBAAiB,QAAQC,GAAK,CACjCA,EAAE,OAASA,EAAE,MAAQ,KAAK,gBAC5B,CAAC,CACH,CAEQ,mBAAmB,EAAgB,CACzC,KAAK,gBAAkB,EAAE,OACzB,KAAK,UAAY,KAAK,eAAe,UAAU,GAAK,EAAE,OAAS,EAAE,MAAM,CACzE,CAEQ,sBAAsB,EAAkB,CAC9C,GAAI,EAAE,MAAQ,cAAgB,EAAE,MAAQ,YAAa,CACnD,GAAI,EAAE,MAAQ,aACZ,GACE,KAAK,YACD,KAAK,WAAa,KAAK,eAAe,SACxC,KAAK,UAAY,SAEZ,KAAK,eAAe,KAAK,SAAS,EAAE,kBACpC,EAAE,MAAQ,YACnB,GACE,KAAK,YACD,KAAK,UAAY,IACnB,KAAK,UAAY,KAAK,eAAe,OAAS,SAEzC,KAAK,eAAe,KAAK,SAAS,EAAE,UAG/C,KAAK,eAAe,KAAK,SAAS,EAAE,MAAM,EAE9C,CAEA,QAAyB,CACvB,OAAOC,8CAAiD,KAAK;AAAA,qCAC5B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASxC,CACF,EApHqBV,EAArBW,EAAA,CADCC,EAAc,cAAc,GACRZ",
   "names": ["styles", "i", "bl_tab_group_default", "BlTabGroup", "s", "bl_tab_group_default", "tab", "isFirstAndNotDisabled", "t", "_a", "panel", "name", "p", "y", "__decorateClass", "e"]
 }

package/dist/{chunk-WWAUSDYZ.js → chunk-MGQL62CQ.js}

@@ -28,4 +28,4 @@ import{a as c}from"./chunk-23UFIOHV.js";import{a as l,b as r,f as a,g as n,h as
         ${d}
       </button>
     `}};e([i({type:String})],t.prototype,"caption",2),e([i({type:String,reflect:!0})],t.prototype,"name",2),e([i({type:String,attribute:"help-text",reflect:!0})],t.prototype,"helpText",2),e([i({type:String})],t.prototype,"icon",2),e([i({type:Boolean,reflect:!0})],t.prototype,"notify",2),e([i({type:String})],t.prototype,"badge",2),e([i({type:Boolean,reflect:!0})],t.prototype,"selected",2),e([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([c("bl-tab-selected")],t.prototype,"_onSelect",2),e([s(".container")],t.prototype,"tab",2),t=e([n("bl-tab")],t);export{t as a};
-//# sourceMappingURL=chunk-WWAUSDYZ.js.map
+//# sourceMappingURL=chunk-MGQL62CQ.js.map

package/dist/chunk-MGQL62CQ.js.map

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

package/dist/{chunk-2I5EAQVM.js → chunk-NPBDEGIU.js}

@@ -1,4 +1,4 @@
-import{a as f}from"./chunk-L3EQLCFT.js";import{a as g}from"./chunk-EPJ347EQ.js";import{a as u}from"./chunk-DJOD4BTL.js";import{a as b}from"./chunk-ZV3Y7O4M.js";import{a as c}from"./chunk-OLPYXE2P.js";import{a as o}from"./chunk-KPAWUBRO.js";import{a as s}from"./chunk-23UFIOHV.js";import{a as d,b as l,f as p,g as h,h as i,i as n,j as v}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var E=d`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-border);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--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);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-accent-primary-background);display:flex;flex-direction:column;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)}: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)}.input-wrapper{--border-size:1px;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(--padding-horizontal) - var(--border-size));border-radius:var(--bl-size-3xs)}:host([disabled]) .input-wrapper{cursor:not-allowed;background-color:var(--bl-color-secondary-background);--text-color:var(--bl-color-content-passive)}.input-wrapper:has(input:autofill){background-color:var(--autofill-bg-color)}.input-wrapper:has(input:-webkit-autofill){background-color:var(--autofill-bg-color)}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--input-font);color:var(--bl-color-content-tertiary);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:8px;flex-basis:var(--icon-size);align-self:center;height:var(--icon-size)}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-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host .wrapper:focus-within ::placeholder{color:var(--bl-color-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-primary-background);pointer-events:initial}:where(.has-icon:not(:focus-within),.has-icon:not(.has-value)) label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}: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}`,m=E;var e=class extends u(p){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.autofocus=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this.onKeydown=r=>{r.code==="Enter"&&this.form&&b(this.form)};this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1;this.passwordVisible=!1;this.passwordInput=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[m]}connectedCallback(){var r;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),this.addEventListener("invalid",this.onError),(r=this.form)==null||r.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("invalid",this.onError)}textVisibilityToggle(){this.passwordVisible=!this.passwordVisible}validityCallback(){var r;return this.customInvalidText||((r=this.validationTarget)==null?void 0:r.validationMessage)}reportValidity(){return this.dirty=!0,this.checkValidity()}inputHandler(r){let a=r.target.value;this.value=a,this.onInput(a)}changeHandler(r){let a=r.target.value;this.dirty=!0,this.value=a,this.onChange(a)}firstUpdated(){this.passwordInput=this.type==="password",this.setValue(this.value)}async updated(r){r.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}render(){let r=this.checkValidity()?"":l`<p id="errorMessage" aria-live="polite" class="invalid-text">
+import{a as f}from"./chunk-XQN3H7RG.js";import{a as g}from"./chunk-EPJ347EQ.js";import{a as u}from"./chunk-DJOD4BTL.js";import{a as b}from"./chunk-ZEBKUNFE.js";import{a as c}from"./chunk-OLPYXE2P.js";import{a as o}from"./chunk-KPAWUBRO.js";import{a as s}from"./chunk-23UFIOHV.js";import{a as d,b as l,f as p,g as h,h as i,i as n,j as v}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var E=d`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-border);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--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);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-accent-primary-background);display:flex;flex-direction:column;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)}: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)}.input-wrapper{--border-size:1px;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(--padding-horizontal) - var(--border-size));border-radius:var(--bl-size-3xs)}:host([disabled]) .input-wrapper{cursor:not-allowed;background-color:var(--bl-color-secondary-background);--text-color:var(--bl-color-content-passive)}.input-wrapper:has(input:autofill){background-color:var(--autofill-bg-color)}.input-wrapper:has(input:-webkit-autofill){background-color:var(--autofill-bg-color)}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--input-font);color:var(--bl-color-content-tertiary);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:8px;flex-basis:var(--icon-size);align-self:center;height:var(--icon-size)}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-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host .wrapper:focus-within ::placeholder{color:var(--bl-color-content-tertiary);-webkit-text-fill-color:var(--bl-color-content-tertiary)}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-primary-background);pointer-events:initial}:where(.has-icon:not(:focus-within),.has-icon:not(.has-value)) label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}: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}`,m=E;var e=class extends u(p){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.autofocus=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this.onKeydown=r=>{r.code==="Enter"&&this.form&&b(this.form)};this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1;this.passwordVisible=!1;this.passwordInput=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[m]}connectedCallback(){var r;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),this.addEventListener("invalid",this.onError),(r=this.form)==null||r.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("invalid",this.onError)}textVisibilityToggle(){this.passwordVisible=!this.passwordVisible}validityCallback(){var r;return this.customInvalidText||((r=this.validationTarget)==null?void 0:r.validationMessage)}reportValidity(){return this.dirty=!0,this.checkValidity()}inputHandler(r){let a=r.target.value;this.value=a,this.onInput(a)}changeHandler(r){let a=r.target.value;this.dirty=!0,this.value=a,this.onChange(a)}firstUpdated(){this.passwordInput=this.type==="password",this.setValue(this.value)}async updated(r){r.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}render(){let r=this.checkValidity()?"":l`<p id="errorMessage" aria-live="polite" class="invalid-text">
           ${this.validationMessage}
         </p>`,a=this.helpText?l`<p id="helpText" class="help-text">${this.helpText}</p>`:"",y=this.icon?l`<bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",x=this.label?l`<label for=${this.inputId}>${this.label}</label>`:"",w=this.passwordInput?l`<bl-button
           size="small"
@@ -42,4 +42,4 @@ import{a as f}from"./chunk-L3EQLCFT.js";import{a as g}from"./chunk-EPJ347EQ.js";
       </div>
       <div class="hint">${r} ${a}</div>
     </div>`}};e.formControlValidators=f,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({type:Number,reflect:!0})],e.prototype,"min",2),t([i({type:Number,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,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),t([i({type:String,attribute:"invalid-text",reflect:!0})],e.prototype,"customInvalidText",2),t([i({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),t([s("bl-change")],e.prototype,"onChange",2),t([s("bl-input")],e.prototype,"onInput",2),t([s("bl-invalid")],e.prototype,"onInvalid",2),t([n()],e.prototype,"dirty",2),t([n()],e.prototype,"passwordVisible",2),t([n()],e.prototype,"passwordInput",2),e=t([h("bl-input")],e);export{e as a};
-//# sourceMappingURL=chunk-2I5EAQVM.js.map
+//# sourceMappingURL=chunk-NPBDEGIU.js.map

package/dist/{chunk-C5UMBCON.js → chunk-NYLRILUV.js}

@@ -2,4 +2,4 @@ import{a as m,b as u,c as g,d as f,e as w,f as y,g as E,h as x}from"./chunk-ANYJ
       <slot id="popover" aria-live=${this._visible?"polite":"off"}></slot>
       <div class="arrow" aria-hidden="true"></div>
     </div>`}};r([a(".popover")],t.prototype,"popover",2),r([a(".arrow")],t.prototype,"arrow",2),r([i({type:String})],t.prototype,"placement",2),r([s()],t.prototype,"_target",2),r([i({type:Boolean,attribute:"fit-size"})],t.prototype,"fitSize",2),r([i({type:Number})],t.prototype,"offset",2),r([s()],t.prototype,"_visible",2),r([n("bl-popover-show")],t.prototype,"onBlPopoverShow",2),r([n("bl-popover-hide")],t.prototype,"onBlPopoverHide",2),r([i()],t.prototype,"target",1),t=r([c("bl-popover")],t);export{t as a};
-//# sourceMappingURL=chunk-C5UMBCON.js.map
+//# sourceMappingURL=chunk-NYLRILUV.js.map

package/dist/chunk-NYLRILUV.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/popover/bl-popover.css", "../src/components/popover/bl-popover.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.popover{--arrow-display:var(--bl-popover-arrow-display,none);--background-color:var(--bl-popover-background-color,var(--bl-color-primary-background));--border-color:var(--bl-popover-border-color,var(--bl-color-primary-hover));--padding:var(--bl-popover-padding,var(--bl-size-m));--border-radius:var(--bl-popover-border-radius,var(--bl-size-3xs));--position:var(--bl-popover-position,fixed);position:var(--position);box-sizing:border-box;border:1px solid var(--border-color);padding:var(--padding);border-radius:var(--border-radius);z-index:var(--bl-index-popover);width:max-content;hyphens:auto;background-color:var(--background-color);font:var(--bl-font-title-3-regular);color:var(--bl-color-content-primary)}.popover:not(.visible){visibility:hidden}.arrow{--arrow-rotation:45deg;box-sizing:border-box;display:var(--arrow-display);position:absolute;background-color:var(--background-color);width:var(--bl-size-2xs);height:var(--bl-size-2xs);transform:rotate(var(--arrow-rotation));border:1px solid var(--border-color);border-bottom:0;border-right:0}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow,\n  inline,\n  autoUpdate,\n  size,\n  Middleware,\n  MiddlewareState,\n} from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\nimport style from './bl-popover.css';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nexport type Placement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end'\n  | 'left-start'\n  | 'left'\n  | 'left-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end';\n\n/**\n * @tag bl-popover\n * @summary Baklava Popover component\n *\n * @cssproperty [--bl-popover-arrow-display=none] - Sets the display of popovers arrow. Set as `block` to make arrow visible.\n * @cssproperty [--bl-popover-background-color=--bl-color-primary-background] - Sets the background color of popover.\n * @cssproperty [--bl-popover-border-color=--bl-color-primary-hover] - Sets the border color of popover.\n * @cssproperty [--bl-popover-padding=--bl-size-m] - Sets the padding of popover.\n * @cssproperty [--bl-popover-border-radius=--bl-size-3xs] - Sets the border radius of popover.\n * @cssproperty [--bl-popover-position=fixed] - Sets the position of popover. You can set it to `absolute` if parent element is a fixed positioned element like drawer or dialog.\n */\n@customElement('bl-popover')\nexport default class BlPopover extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  @query('.popover') private popover: HTMLElement;\n  @query('.arrow') private arrow: HTMLElement;\n\n  /**\n   * Sets placement of the popover\n   */\n  @property({ type: String })\n  placement: Placement = 'bottom';\n\n  /**\n   * Target elements state\n   */\n  @state() _target: string | Element;\n\n  /**\n   * Sets size of popover same as trigger element\n   */\n  @property({ type: Boolean, attribute: 'fit-size' })\n  fitSize = false;\n\n  /**\n   * Sets the distance between popover and target/trigger element\n   */\n  @property({ type: Number })\n  offset = 8;\n\n  /**\n   * Visibility state\n   */\n  @state() private _visible = false;\n\n  /**\n   * Fires when the popover is shown\n   */\n  @event('bl-popover-show') private onBlPopoverShow: EventDispatcher<string>;\n\n  /**\n   * Fires when popover becomes hidden\n   */\n  @event('bl-popover-hide') private onBlPopoverHide: EventDispatcher<string>;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this._handlePopoverShowEvent = this._handlePopoverShowEvent.bind(this);\n    this._handleKeyupEvent = this._handleKeyupEvent.bind(this);\n    this._handleClickOutside = this._handleClickOutside.bind(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.popoverAutoUpdateCleanup && this.popoverAutoUpdateCleanup();\n  }\n\n  private getMiddleware(): Middleware[] {\n    const middlewareParams: Middleware[] = [];\n    middlewareParams.push(offset(this.offset), inline(), flip(), shift({ padding: 4 }));\n\n    if (this.fitSize) {\n      middlewareParams.push(\n        size({\n          apply(args: MiddlewareState) {\n            if (args.elements.floating && args.elements.reference) {\n              Object.assign(args.elements.floating.style, {\n                width: `${args.elements.reference.getBoundingClientRect().width}px`,\n              });\n            }\n          },\n        })\n      );\n    }\n\n    middlewareParams.push(arrow({ element: this.arrow, padding: 5 }));\n\n    return middlewareParams;\n  }\n\n  private _handleClickOutside = (event: MouseEvent) => {\n    const eventPath = event.composedPath() as HTMLElement[];\n    if (!eventPath.includes(this._target as HTMLElement) && !eventPath.includes(this)) {\n      this.hide();\n    }\n  };\n\n  private popoverAutoUpdateCleanup: () => void;\n\n  private setPopover() {\n    if (this.target) {\n      this.popoverAutoUpdateCleanup = autoUpdate(this.target as Element, this.popover, () => {\n        computePosition(this.target as Element, this.popover, {\n          placement: this.placement,\n          strategy: 'fixed',\n          middleware: this.getMiddleware(),\n        }).then(({ x, y, placement, middlewareData }) => {\n          Object.assign(this.popover.style, {\n            left: `${x}px`,\n            top: `${y}px`,\n          });\n\n          if (middlewareData.arrow) {\n            const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n            Object.assign(this.arrow.style, {\n              left: `${arrowX}px`,\n              top: `${arrowY}px`,\n            });\n\n            const arrowFlipDirections = {\n              top: 'bottom',\n              right: 'left',\n              bottom: 'top',\n              left: 'right',\n            };\n            const arrowRotateDegrees = {\n              top: '225deg',\n              right: '315deg',\n              bottom: '45deg',\n              left: '135deg',\n            };\n            const popoverPlacement = placement.split('-')[0] as keyof typeof arrowFlipDirections;\n            const arrowDirection = arrowFlipDirections[popoverPlacement];\n\n            this.arrow.style.setProperty(arrowDirection, '-5px');\n            this.arrow.style.setProperty('--arrow-rotation', arrowRotateDegrees[popoverPlacement]);\n          }\n        });\n      });\n    }\n  }\n\n  /**\n   * Sets the target element of the popover to align and trigger.\n   * It can be a string id of the target element or can be a direct Element reference of it.\n   */\n  @property()\n  get target(): string | Element {\n    return this._target;\n  }\n\n  set target(value: string | Element) {\n    if (typeof value === 'string') {\n      this._target = document.getElementById(value) as Element;\n    } else if (value instanceof Element) {\n      this._target = value;\n    } else {\n      console.warn(\n        'BlPopover target only accepts an Element instance or a string id of a DOM element.'\n      );\n    }\n  }\n\n  /**\n   * Shows popover\n   */\n  show() {\n    this._visible = true;\n    this.setPopover();\n    this.onBlPopoverShow('');\n    document.addEventListener('click', this._handleClickOutside);\n    document.addEventListener('keyup', this._handleKeyupEvent);\n    document.addEventListener('bl-popover-show', this._handlePopoverShowEvent);\n  }\n\n  /**\n   * Hides popover\n   */\n  hide() {\n    this._visible = false;\n    document.removeEventListener('click', this._handleClickOutside);\n    document.removeEventListener('keyup', this._handleKeyupEvent);\n    document.removeEventListener('bl-popover-show', this._handlePopoverShowEvent);\n    this.onBlPopoverHide('');\n  }\n\n  /**\n   * Gives the visibility status of the popover\n   */\n  get visible(): boolean {\n    return this._visible;\n  }\n\n  private _handlePopoverShowEvent(event: Event) {\n    if (event.target !== this) {\n      this.hide();\n    }\n  }\n\n  private _handleKeyupEvent(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.visible) {\n      this.hide();\n      event.preventDefault();\n    }\n  }\n\n  render(): TemplateResult {\n    const classes = classMap({\n      popover: true,\n      visible: this._visible,\n    });\n\n    return html`<div class=${classes}>\n      <slot id=\"popover\" aria-live=${this._visible ? 'polite' : 'off'}></slot>\n      <div class=\"arrow\" aria-hidden=\"true\"></div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-popover': BlPopover;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "i", "bl_popover_default", "BlPopover", "s", "event", "eventPath", "bl_popover_default", "middlewareParams", "O", "T", "b", "D", "k", "args", "u", "P", "z", "x", "y", "placement", "middlewareData", "arrowX", "arrowY", "arrowFlipDirections", "arrowRotateDegrees", "popoverPlacement", "arrowDirection", "value", "classes", "o", "__decorateClass", "i", "e", "t"]
+}

package/dist/{chunk-4IAGV6FP.js → chunk-QV3A6DWH.js}

@@ -1,4 +1,4 @@
-import{a as b}from"./chunk-KPAWUBRO.js";import{a as d}from"./chunk-23UFIOHV.js";import{a as l,b as c,f as n,g as h,h as a}from"./chunk-57PTZNIL.js";import{a as r}from"./chunk-NZ3RGSR6.js";var p=l`:host{display:inline-block;cursor:pointer}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);--animation-duration:var(--bl-switch-animation-duration,300ms);--switch-color:var(--bl-switch-color,var(--bl-color-primary));background-color:var(--bl-color-content-passive);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:"";display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{background-color:var(--switch-color)}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([disabled]) .switch{opacity:.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px}`,u=p;var m="bl-switch",t=class extends n{constructor(){super(...arguments);this.checked=!1;this.disabled=!1}static get styles(){return[u]}toggle(){this.disabled||(this.checked=!this.checked,this.onToggle(this.checked))}handleKeyDown(e){(e.code==="Enter"||e.code==="Space")&&(this.toggle(),e.preventDefault())}render(){var i,o,s;let e=(s=(o=this.ariaLabel)!=null?o:(i=this.attributes.getNamedItem("aria-label"))==null?void 0:i.value)!=null?s:void 0;return c`
+import{a as b}from"./chunk-KPAWUBRO.js";import{a as d}from"./chunk-23UFIOHV.js";import{a as l,b as c,f as n,g as h,h as a}from"./chunk-57PTZNIL.js";import{a as r}from"./chunk-NZ3RGSR6.js";var p=l`:host{display:inline-block;cursor:pointer}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);--animation-duration:var(--bl-switch-animation-duration,300ms);--switch-color:var(--bl-switch-color,var(--bl-color-primary));background-color:var(--bl-color-content-passive);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:'';display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{background-color:var(--switch-color)}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([disabled]) .switch{opacity:.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:'';position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px}`,u=p;var m="bl-switch",t=class extends n{constructor(){super(...arguments);this.checked=!1;this.disabled=!1}static get styles(){return[u]}toggle(){this.disabled||(this.checked=!this.checked,this.onToggle(this.checked))}handleKeyDown(e){(e.code==="Enter"||e.code==="Space")&&(this.toggle(),e.preventDefault())}render(){var i,o,s;let e=(s=(o=this.ariaLabel)!=null?o:(i=this.attributes.getNamedItem("aria-label"))==null?void 0:i.value)!=null?s:void 0;return c`
       <span
         class="switch"
         role="switch"
@@ -11,4 +11,4 @@ import{a as b}from"./chunk-KPAWUBRO.js";import{a as d}from"./chunk-23UFIOHV.js";
       >
       </span>
     `}};r([a({type:Boolean,reflect:!0})],t.prototype,"checked",2),r([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([d("bl-switch-toggle")],t.prototype,"onToggle",2),t=r([h(m)],t);export{m as a,t as b};
-//# sourceMappingURL=chunk-4IAGV6FP.js.map
+//# sourceMappingURL=chunk-QV3A6DWH.js.map

package/dist/chunk-QV3A6DWH.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/switch/bl-switch.css", "../src/components/switch/bl-switch.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;cursor:pointer}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);--animation-duration:var(--bl-switch-animation-duration,300ms);--switch-color:var(--bl-switch-color,var(--bl-color-primary));background-color:var(--bl-color-content-passive);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:'';display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{background-color:var(--switch-color)}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([disabled]) .switch{opacity:.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:'';position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-switch.css';\n\nexport const blSwitchTag = 'bl-switch';\n\n/**\n * @tag bl-switch\n * @summary Baklava Switch component\n */\n@customElement(blSwitchTag)\nexport default class BlSwitch extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the checked state for switch\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Sets the disabled state for switch\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled? = false;\n\n  /**\n   * Fires whenever user toggles the switch\n   */\n  @event('bl-switch-toggle') private onToggle: EventDispatcher<boolean>;\n\n  toggle() {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.onToggle(this.checked);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      this.toggle();\n      event.preventDefault();\n    }\n  }\n\n  render(): TemplateResult {\n    const ariaLabel =\n      this.ariaLabel ?? this.attributes.getNamedItem('aria-label')?.value ?? undefined;\n\n    return html`\n      <span\n        class=\"switch\"\n        role=\"switch\"\n        aria-checked=${this.checked}\n        aria-readonly=${!!this.disabled}\n        @click=${this.toggle}\n        @keydown=${this.handleKeyDown}\n        aria-label=${ifDefined(ariaLabel)}\n        tabindex=\"0\"\n      >\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blSwitchTag]: BlSwitch;\n  }\n}\n"],
+  "mappings": "4LACO,IAAMA,EAASC,g6CACfC,EAAQF,ECIR,IAAMG,EAAc,YAONC,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAU,GAMV,cAAY,GAdZ,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAmBA,QAAS,CACH,KAAK,WAET,KAAK,QAAU,CAAC,KAAK,QACrB,KAAK,SAAS,KAAK,OAAO,EAC5B,CAEQ,cAAcC,EAAsB,EACtCA,EAAM,OAAS,SAAWA,EAAM,OAAS,WAC3C,KAAK,OAAO,EACZA,EAAM,eAAe,EAEzB,CAEA,QAAyB,CAjD3B,IAAAC,EAAAC,EAAAC,EAkDI,IAAMC,GACJD,GAAAD,EAAA,KAAK,YAAL,KAAAA,GAAkBD,EAAA,KAAK,WAAW,aAAa,YAAY,IAAzC,YAAAA,EAA4C,QAA9D,KAAAE,EAAuE,OAEzE,OAAOE;AAAA;AAAA;AAAA;AAAA,uBAIY,KAAK;AAAA,wBACJ,CAAC,CAAC,KAAK;AAAA,iBACd,KAAK;AAAA,mBACH,KAAK;AAAA,qBACHC,EAAUF,CAAS;AAAA;AAAA;AAAA;AAAA,KAKtC,CACF,EA7CEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBX,EASnB,uBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBX,EAenB,wBAKmCU,EAAA,CAAlCP,EAAM,kBAAkB,GApBNH,EAoBgB,wBApBhBA,EAArBU,EAAA,CADCC,EAAcZ,CAAW,GACLC",
+  "names": ["styles", "i", "bl_switch_default", "blSwitchTag", "BlSwitch", "s", "bl_switch_default", "event", "_a", "_b", "_c", "ariaLabel", "y", "l", "__decorateClass", "e"]
+}

package/dist/{chunk-KQBXYF3J.js → chunk-VYKKWEKI.js}

@@ -1,5 +1,9 @@
-import{a}from"./chunk-KPAWUBRO.js";import{a as l,b as e,f as r,g as s,h as i}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var d=l`:host{position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-content-secondary)}:host(:not(:first-child)){border-top:1px solid var(--bl-color-border)}:host(:not(:last-child)){border-bottom:1px solid var(--bl-color-border)}:host(:not([caption])) ::slotted(:first-child){padding-block:var(--bl-size-xs) 0}:host(:not(:last-child)) ::slotted(:last-child){padding-block:0 var(--bl-size-xs)}:host(:not(:first-child)) .caption{padding-block:var(--bl-size-xs) 0}`,n=d;var c="bl-dropdown-group",t=class extends r{static get styles(){return[n]}render(){let p=this.caption?e`<span class="caption">${this.caption}</span>`:"";return e`<div class="dropdown-group" role="group" aria-labelledby="${a(this.caption)}">
-            ${p}
-          <slot></slot>
-        </div>`}};o([i({type:String})],t.prototype,"caption",2),t=o([s(c)],t);export{c as a,t as b};
-//# sourceMappingURL=chunk-KQBXYF3J.js.map
+import{a}from"./chunk-KPAWUBRO.js";import{a as l,b as e,f as r,g as s,h as i}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var d=l`:host{position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-content-secondary)}:host(:not(:first-child)){border-top:1px solid var(--bl-color-border)}:host(:not(:last-child)){border-bottom:1px solid var(--bl-color-border)}:host(:not([caption])) ::slotted(:first-child){padding-block:var(--bl-size-xs) 0}:host(:not(:last-child)) ::slotted(:last-child){padding-block:0 var(--bl-size-xs)}:host(:not(:first-child)) .caption{padding-block:var(--bl-size-xs) 0}`,n=d;var c="bl-dropdown-group",t=class extends r{static get styles(){return[n]}render(){let p=this.caption?e`<span class="caption">${this.caption}</span>`:"";return e`<div
+      class="dropdown-group"
+      role="group"
+      aria-labelledby="${a(this.caption)}"
+    >
+      ${p}
+      <slot></slot>
+    </div>`}};o([i({type:String})],t.prototype,"caption",2),t=o([s(c)],t);export{c as a,t as b};
+//# sourceMappingURL=chunk-VYKKWEKI.js.map

package/dist/{chunk-KQBXYF3J.js.map → chunk-VYKKWEKI.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/dropdown/group/bl-dropdown-group.css", "../src/components/dropdown/group/bl-dropdown-group.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-content-secondary)}:host(:not(:first-child)){border-top:1px solid var(--bl-color-border)}:host(:not(:last-child)){border-bottom:1px solid var(--bl-color-border)}:host(:not([caption])) ::slotted(:first-child){padding-block:var(--bl-size-xs) 0}:host(:not(:last-child)) ::slotted(:last-child){padding-block:0 var(--bl-size-xs)}:host(:not(:first-child)) .caption{padding-block:var(--bl-size-xs) 0}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport style from './bl-dropdown-group.css';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const blDropdownGroupTag = 'bl-dropdown-group';\n\n/**\n * @tag bl-dropdown-group\n * @summary Baklava Dropdown Group component\n */\n@customElement(blDropdownGroupTag)\nexport default class BlDropdownGroup extends LitElement {\n    static get styles(): CSSResultGroup {\n        return [style];\n    }\n\n    /**\n     * Sets the caption.\n     */\n    @property({ type: String })\n    caption?: string;\n\n\n    render(): TemplateResult {\n        const caption = this.caption ? html`<span class=\"caption\">${this.caption}</span>` : ''\n\n        return html`<div class=\"dropdown-group\" role=\"group\" aria-labelledby=\"${ifDefined(this.caption)}\">\n            ${caption}\n          <slot></slot>\n        </div>`\n    }\n\n}\n\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [blDropdownGroupTag]: BlDropdownGroup;\n    }\n}\n\n"],
-  "mappings": "+IACO,IAAMA,EAASC,+pBACfC,EAAQF,ECGR,IAAMG,EAAqB,oBAObC,EAArB,cAA6CC,CAAW,CACpD,WAAW,QAAyB,CAChC,MAAO,CAACC,CAAK,CACjB,CASA,QAAyB,CACrB,IAAMC,EAAU,KAAK,QAAUC,0BAA6B,KAAK,iBAAmB,GAEpF,OAAOA,8DAAiEC,EAAU,KAAK,OAAO;AAAA,cACxFF;AAAA;AAAA,eAGV,CAEJ,EAZIG,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GARTP,EASjB,uBATiBA,EAArBM,EAAA,CADCC,EAAcR,CAAkB,GACZC",
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-content-secondary)}:host(:not(:first-child)){border-top:1px solid var(--bl-color-border)}:host(:not(:last-child)){border-bottom:1px solid var(--bl-color-border)}:host(:not([caption])) ::slotted(:first-child){padding-block:var(--bl-size-xs) 0}:host(:not(:last-child)) ::slotted(:last-child){padding-block:0 var(--bl-size-xs)}:host(:not(:first-child)) .caption{padding-block:var(--bl-size-xs) 0}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport style from './bl-dropdown-group.css';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const blDropdownGroupTag = 'bl-dropdown-group';\n\n/**\n * @tag bl-dropdown-group\n * @summary Baklava Dropdown Group component\n */\n@customElement(blDropdownGroupTag)\nexport default class BlDropdownGroup extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the caption.\n   */\n  @property({ type: String })\n  caption?: string;\n\n  render(): TemplateResult {\n    const caption = this.caption ? html`<span class=\"caption\">${this.caption}</span>` : '';\n\n    return html`<div\n      class=\"dropdown-group\"\n      role=\"group\"\n      aria-labelledby=\"${ifDefined(this.caption)}\"\n    >\n      ${caption}\n      <slot></slot>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blDropdownGroupTag]: BlDropdownGroup;\n  }\n}\n"],
+  "mappings": "+IACO,IAAMA,EAASC,+pBACfC,EAAQF,ECGR,IAAMG,EAAqB,oBAObC,EAArB,cAA6CC,CAAW,CACtD,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAQA,QAAyB,CACvB,IAAMC,EAAU,KAAK,QAAUC,0BAA6B,KAAK,iBAAmB,GAEpF,OAAOA;AAAA;AAAA;AAAA,yBAGcC,EAAU,KAAK,OAAO;AAAA;AAAA,QAEvCF;AAAA;AAAA,WAGN,CACF,EAdEG,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GARPP,EASnB,uBATmBA,EAArBM,EAAA,CADCC,EAAcR,CAAkB,GACZC",
   "names": ["styles", "i", "bl_dropdown_group_default", "blDropdownGroupTag", "BlDropdownGroup", "s", "bl_dropdown_group_default", "caption", "y", "l", "__decorateClass", "e"]
 }

package/dist/{chunk-N35VLT2U.js → chunk-W6FBJD54.js}

@@ -1,4 +1,4 @@
-import{a}from"./chunk-23UFIOHV.js";import{a as o,b as i,f as s,g as l,h as n,i as d}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var h=o`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;right:-100%;bottom:0;width:424px;padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top),var(--bl-size-xl));padding-right:max(env(safe-area-inset-right),var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom),var(--bl-size-xl));background:var(--bl-color-primary-background);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration,.25s);z-index:var(--bl-index-sticky)}:host([open]) .drawer{right:0}iframe{height:100%;width:100%;border:0}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:24px;margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-secondary);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}@media only screen and (max-width:424px){:host([open]) .drawer{width:calc(100vw - 24px)}}`,c=h;var e=class extends s{constructor(){super(...arguments);this.open=!1;this.domExistence=!1}static get styles(){return[c]}connectedCallback(){super.connectedCallback(),window==null||window.addEventListener("bl-drawer-open",r=>{r.target!==this&&this.closeDrawer()})}updated(r){r.has("open")&&this.toggleDialogHandler()}toggleDialogHandler(){this.open?(this.domExistenceSchedule&&clearTimeout(this.domExistenceSchedule),this.domExistence=!0,this.onOpen("")):(this.domExistenceSchedule=window.setTimeout(()=>{this.domExistence=!1},1e3),this.onClose(""))}closeDrawer(){this.open=!1}renderContent(){let r=this.embedUrl?i`<iframe src=${this.embedUrl}></iframe>`:i`<slot></slot>`;return i`<section class=${this.embedUrl?"iframe-content":"content"}>
+import{a}from"./chunk-23UFIOHV.js";import{a as o,b as i,f as s,g as l,h as n,i as d}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var h=o`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;right:-100%;bottom:0;width:424px;padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top),var(--bl-size-xl));padding-right:max(env(safe-area-inset-right),var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom),var(--bl-size-xl));background:var(--bl-color-primary-background);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration,0.25s);z-index:var(--bl-index-sticky)}:host([open]) .drawer{right:0}iframe{height:100%;width:100%;border:0}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:24px;margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-secondary);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}@media only screen and (max-width:424px){:host([open]) .drawer{width:calc(100vw - 24px)}}`,c=h;var e=class extends s{constructor(){super(...arguments);this.open=!1;this.domExistence=!1}static get styles(){return[c]}connectedCallback(){super.connectedCallback(),window==null||window.addEventListener("bl-drawer-open",r=>{r.target!==this&&this.closeDrawer()})}updated(r){r.has("open")&&this.toggleDialogHandler()}toggleDialogHandler(){this.open?(this.domExistenceSchedule&&clearTimeout(this.domExistenceSchedule),this.domExistence=!0,this.onOpen("")):(this.domExistenceSchedule=window.setTimeout(()=>{this.domExistence=!1},1e3),this.onClose(""))}closeDrawer(){this.open=!1}renderContent(){let r=this.embedUrl?i`<iframe src=${this.embedUrl}></iframe>`:i`<slot></slot>`;return i`<section class=${this.embedUrl?"iframe-content":"content"}>
       ${r}
     </section>`}renderContainer(){let r=this.caption?i`<h2 id="drawer-caption">${this.caption}</h2>`:"",p=this.externalLink?i`<bl-button
           icon="external_link"
@@ -23,4 +23,4 @@ import{a}from"./chunk-23UFIOHV.js";import{a as o,b as i,f as s,g as l,h as n,i a
       </header>
       ${this.renderContent()}
     </div>`}render(){return this.domExistence?i`<div class="drawer">${this.renderContainer()}</div>`:i``}};t([n({type:Boolean,reflect:!0})],e.prototype,"open",2),t([n({type:String})],e.prototype,"caption",2),t([n({type:String,attribute:"embed-url"})],e.prototype,"embedUrl",2),t([n({type:String,attribute:"external-link"})],e.prototype,"externalLink",2),t([a("bl-drawer-open")],e.prototype,"onOpen",2),t([a("bl-drawer-close")],e.prototype,"onClose",2),t([d()],e.prototype,"domExistence",2),e=t([l("bl-drawer")],e);export{e as a};
-//# sourceMappingURL=chunk-N35VLT2U.js.map
+//# sourceMappingURL=chunk-W6FBJD54.js.map

package/dist/chunk-W6FBJD54.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/drawer/bl-drawer.css", "../src/components/drawer/bl-drawer.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;right:-100%;bottom:0;width:424px;padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top),var(--bl-size-xl));padding-right:max(env(safe-area-inset-right),var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom),var(--bl-size-xl));background:var(--bl-color-primary-background);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration,0.25s);z-index:var(--bl-index-sticky)}:host([open]) .drawer{right:0}iframe{height:100%;width:100%;border:0}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:24px;margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-secondary);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}@media only screen and (max-width:424px){:host([open]) .drawer{width:calc(100vw - 24px)}}`;\nexport default styles;\n", "import { customElement, property, state } from 'lit/decorators.js';\nimport { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../button/bl-button';\nimport style from './bl-drawer.css';\nimport { PropertyValues } from 'lit';\n\n/**\n * @tag bl-drawer\n * @summary Baklava Drawer component\n *\n */\n\n@customElement('bl-drawer')\nexport default class BlDrawer extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets drawer open-close status\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   *  Sets the drawer title\n   */\n  @property({ type: String })\n  caption?: string;\n\n  /**\n   *  Sets the drawer embed url for iframe\n   */\n  @property({ type: String, attribute: 'embed-url' })\n  embedUrl?: string;\n\n  /**\n   *  Sets the drawer external link\n   */\n  @property({ type: String, attribute: 'external-link' })\n  externalLink?: string;\n\n  /**\n   * Fires when the drawer is opened\n   */\n  @event('bl-drawer-open') private onOpen: EventDispatcher<string>;\n\n  /**\n   * Fires when the drawer is closed\n   */\n  @event('bl-drawer-close') private onClose: EventDispatcher<string>;\n\n  connectedCallback() {\n    super.connectedCallback();\n    window?.addEventListener('bl-drawer-open', event => {\n      if (event.target !== this) this.closeDrawer();\n    });\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('open')) {\n      this.toggleDialogHandler();\n    }\n  }\n\n  private domExistenceSchedule: number;\n\n  private toggleDialogHandler() {\n    if (this.open) {\n      if (this.domExistenceSchedule) {\n        clearTimeout(this.domExistenceSchedule);\n      }\n\n      this.domExistence = true;\n      // FIXME: Allow events without payload\n      this.onOpen('');\n    } else {\n      // Give some time for exit animation\n      this.domExistenceSchedule = window.setTimeout(() => {\n        this.domExistence = false;\n      }, 1000);\n\n      // FIXME: Allow events without payload\n      this.onClose('');\n    }\n  }\n\n  @state() private domExistence = false;\n\n  private closeDrawer() {\n    this.open = false;\n  }\n\n  private renderContent() {\n    const content = this.embedUrl\n      ? html`<iframe src=${this.embedUrl}></iframe>`\n      : html`<slot></slot>`;\n\n    return html`<section class=${this.embedUrl ? 'iframe-content' : 'content'}>\n      ${content}\n    </section>`;\n  }\n\n  private renderContainer() {\n    const title = this.caption ? html`<h2 id=\"drawer-caption\">${this.caption}</h2>` : '';\n    const external_button = this.externalLink\n      ? html`<bl-button\n          icon=\"external_link\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          size=\"small\"\n          href=\"${this.externalLink}\"\n          target=\"_blank\"\n        ></bl-button>`\n      : '';\n\n    return html`<div class=\"container\">\n      <header>\n        ${title}\n        <div class=\"header-buttons\">\n          ${external_button}\n          <bl-button\n            @click=\"${this.closeDrawer}\"\n            icon=\"close\"\n            size=\"small\"\n            variant=\"tertiary\"\n            kind=\"neutral\"\n          ></bl-button>\n        </div>\n      </header>\n      ${this.renderContent()}\n    </div>`;\n  }\n\n  render(): TemplateResult {\n    if (this.domExistence) {\n      return html`<div class=\"drawer\">${this.renderContainer()}</div>`;\n    } else {\n      return html``;\n    }\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-drawer': BlDrawer;\n  }\n}\n"],
+  "mappings": "sJACO,IAAMA,EAASC,8kCACfC,EAAQF,ECYf,IAAqBG,EAArB,cAAsC,CAAW,CAAjD,kCASE,UAAO,GAiEE,KAAQ,aAAe,GAzEhC,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAoCA,mBAAoB,CAClB,MAAM,kBAAkB,EACxB,qBAAQ,iBAAiB,iBAAkBC,GAAS,CAC9CA,EAAM,SAAW,MAAM,KAAK,YAAY,CAC9C,EACF,CAEA,QAAQC,EAAyC,CAC3CA,EAAkB,IAAI,MAAM,GAC9B,KAAK,oBAAoB,CAE7B,CAIQ,qBAAsB,CACxB,KAAK,MACH,KAAK,sBACP,aAAa,KAAK,oBAAoB,EAGxC,KAAK,aAAe,GAEpB,KAAK,OAAO,EAAE,IAGd,KAAK,qBAAuB,OAAO,WAAW,IAAM,CAClD,KAAK,aAAe,EACtB,EAAG,GAAI,EAGP,KAAK,QAAQ,EAAE,EAEnB,CAIQ,aAAc,CACpB,KAAK,KAAO,EACd,CAEQ,eAAgB,CACtB,IAAMC,EAAU,KAAK,SACjBC,gBAAmB,KAAK,qBACxBA,iBAEJ,OAAOA,mBAAsB,KAAK,SAAW,iBAAmB;AAAA,QAC5DD;AAAA,eAEN,CAEQ,iBAAkB,CACxB,IAAME,EAAQ,KAAK,QAAUD,4BAA+B,KAAK,eAAiB,GAC5EE,EAAkB,KAAK,aACzBF;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKU,KAAK;AAAA;AAAA,uBAGf,GAEJ,OAAOA;AAAA;AAAA,UAEDC;AAAA;AAAA,YAEEC;AAAA;AAAA,sBAEU,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQnB,KAAK,cAAc;AAAA,WAEzB,CAEA,QAAyB,CACvB,OAAI,KAAK,aACAF,wBAA2B,KAAK,gBAAgB,UAEhDA,GAEX,CACF,EAvHEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBT,EASnB,oBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAdPT,EAenB,uBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,WAAY,CAAC,GApB/BT,EAqBnB,wBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,eAAgB,CAAC,GA1BnCT,EA2BnB,4BAKiCQ,EAAA,CAAhCN,EAAM,gBAAgB,GAhCJF,EAgCc,sBAKCQ,EAAA,CAAjCN,EAAM,iBAAiB,GArCLF,EAqCe,uBAqCjBQ,EAAA,CAAhBE,EAAM,GA1EYV,EA0EF,4BA1EEA,EAArBQ,EAAA,CADCC,EAAc,WAAW,GACLT",
+  "names": ["styles", "i", "bl_drawer_default", "BlDrawer", "bl_drawer_default", "event", "changedProperties", "content", "y", "title", "external_button", "__decorateClass", "e", "t"]
+}