@trendyol/baklava 3.3.0-beta.22 → 3.3.0-beta.24

package/dist/chunk-WPESQSKX.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-neutral-full)}.container{--title-padding-vertical:var(--bl-size-m);--title-padding-horizontal:var(--bl-size-xl);--title-color:var(--bl-color-neutral-darker);--caption-color:var(--bl-color-neutral-darker);--icon-color:var(--bl-color-neutral-darker);--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:none;cursor:pointer;background-color:initial;width:max-content;height:var(--tab-height);padding:0 var(--tab-right-padding);margin-inline-end:1px}.container::after{position:absolute;content:\"\";inset-inline-end:0;top:var(--bl-size-m);height:calc(100% - var(--bl-size-2xl));border-inline-end:1px solid var(--bl-color-neutral-lighter)}:host(:last-of-type) .container::after{border-inline-end:none}:host(:focus-visible){outline:0}.container:focus-visible,:host(:focus-visible) .container{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));inset-inline-start: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(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .container,:host(: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-neutral-lighter);--caption-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-lighter)}:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) :where(.title,.icon),:host(:hover) :where(.title,.icon){transition:color 120ms ease-out}:host([selected]) .border-bottom{display:inline-block}:host([disabled]) .container.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__,:host([disabled]) .container:hover{cursor:not-allowed}:host([help-text]) button{padding-inline-end: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-inline-end:var(--tab-right-padding)}bl-tooltip{--bl-tooltip-position:fixed;display:flex}.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-inline-start: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-inline-end: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-inline-start: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\";\nimport { BaklavaIcon } from \"../../icon/icon-list\";\nimport type BlTabGroup from \"../bl-tab-group\";\nimport style from \"./bl-tab.css\";\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?: BaklavaIcon;\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": "uLACO,IAAMA,EAASC,q5GACfC,EAAQF,ECUf,IAAqBG,EAArB,cAAmCC,CAAW,CAA9C,kCAkDE,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", "x", "helpTooltip", "icon", "badge", "caption", "__decorateClass", "e", "event", "i"]
+}

package/dist/chunk-X5XH4HTW.js

@@ -0,0 +1,17 @@
+import{a as f}from"./chunk-XDUIVR6I.js";import{a as v}from"./chunk-6LT7O7T2.js";import{a as i}from"./chunk-GRL4DWKG.js";import{a as c,b as a,c as u,e as m}from"./chunk-5MOOXA2X.js";import{a as s,b as n,f as d}from"./chunk-4OT5AMS5.js";import{d as t}from"./chunk-IZ2LK5GK.js";var y=s`:host{display:block}fieldset{border:none;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-radio-direction,column) wrap;align-items:var(--bl-radio-group-cross-axis-item-alignment,normal);align-content:var(--bl-radio-group-cross-axis-content-alignment,normal);justify-content:var(--bl-radio-group-main-axis-content-alignment,normal);gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`,g=y;var p="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[...this.querySelectorAll(b)]}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 o=e.target;this.setValue(o.value),this.onChange(o.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 id="label">${this.label}</legend>
+      <div class="options" @bl-checked=${this.handleOptionChecked}>
+        <slot></slot>
+      </div>
+    </fieldset>`}};t([a({type:String})],r.prototype,"label",2),t([a()],r.prototype,"value",2),t([a({type:Boolean,reflect:!0})],r.prototype,"required",2),t([i("bl-radio-change")],r.prototype,"onChange",2),r=t([c(p)],r);var C=s`:host{cursor:pointer;outline:0}.wrapper{--size:var(--bl-size-m);outline:0}#label{display:flex;font:var(--bl-font-title-3-regular);line-height:normal;align-items:var(--bl-radio-align-items,center);margin-block:0;color:var(--bl-color-neutral-darker);gap:var(--bl-size-2xs)}#label::before{content:"";display:inline-block;box-sizing:border-box;min-width:var(--size);min-height:var(--size);max-width:var(--size);max-height:var(--size);background-color:#fff;border-radius:var(--bl-border-radius-circle);border:solid 1px var(--bl-color-neutral-lighter)}.selected #label::before{border-width:var(--bl-size-3xs);border-color:var(--bl-color-primary)}.selected #label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,:host(:hover) #label{color:var(--bl-color-primary)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .wrapper{--size:calc(var(--bl-size-m) - 2px)}:host([disabled]) #label{color:var(--bl-color-neutral-light)}:host([disabled]) #label::before{background-color:var(--bl-color-neutral-lightest);border-width:0;box-shadow:0 0 0 1px var(--bl-color-neutral-lighter)}:host([disabled]) .selected #label::before{background-color:var(--bl-color-neutral-light);border-color:var(--bl-color-neutral-lightest);border-width:calc(var(--bl-size-3xs) - 1px)}.wrapper:focus-visible #label::before{box-shadow:0 0 0 1px #fff,0 0 0 3px var(--bl-color-primary)}`,x=C;var b="bl-radio",W="bl-checked",l=class extends d{constructor(){super(...arguments);this.disabled=!1;this.selected=!1;this.handleFieldValueChange=e=>{let o=e.detail;this.selected=o===this.value}}static get styles(){return[x]}select(){this.selected=!0,this.onChecked(this.value)}get checked(){return this.selected}focus(){this.radioElement.tabIndex=0,this.radioElement.focus(),this.onFocus(this.value)}blur(){this.radioElement.tabIndex=-1,this.onBlur(this.value)}connectedCallback(){var e;super.connectedCallback(),this.field=this.closest(p),this.field||console.warn("bl-radio is designed to be used inside a bl-radio-group",this),(e=this.field)==null||e.addEventListener(h,this.handleFieldValueChange)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.field)==null||e.removeEventListener(h,this.handleFieldValueChange)}render(){let e=v({wrapper:!0,selected:this.selected});return n`<div
+      class=${e}
+      role="radio"
+      aria-labelledby="label"
+      aria-disabled=${this.disabled}
+      aria-readonly=${this.disabled}
+      @blur=${this.blur}
+      @click=${this.select}
+    >
+      <p id="label"><slot></slot></p>
+    </div>`}};t([a()],l.prototype,"name",2),t([a()],l.prototype,"value",2),t([a({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(b)],l);export{b as a,W as b,l as c,p as d,h as e,r as f};
+//# sourceMappingURL=chunk-X5XH4HTW.js.map

package/dist/chunk-X5XH4HTW.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:block}fieldset{border:none;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-radio-direction,column) wrap;align-items:var(--bl-radio-group-cross-axis-item-alignment,normal);align-content:var(--bl-radio-group-cross-axis-content-alignment,normal);justify-content:var(--bl-radio-group-main-axis-content-alignment,normal);gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { FormControlMixin } from \"@open-wc/form-control\";\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=row] Can be used for showing radio options as columns instead of rows. Options are `row` or `column`\n * @cssproperty [--bl-radio-group-cross-axis-item-alignment=normal] Can be used for aligning radio items on cross axis. Acts same with align-item\n * @cssproperty [--bl-radio-group-cross-axis-content-alignment=normal] Can be used for aligning radio group content on cross axis. Acts same with align-content\n * @cssproperty [--bl-radio-group-main-axis-content-alignment=normal] Can be used for aligning radio group content on main axis. Acts same with justify-content\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 [...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\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 id=\"label\">${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{cursor:pointer;outline:0}.wrapper{--size:var(--bl-size-m);outline:0}#label{display:flex;font:var(--bl-font-title-3-regular);line-height:normal;align-items:var(--bl-radio-align-items,center);margin-block:0;color:var(--bl-color-neutral-darker);gap:var(--bl-size-2xs)}#label::before{content:\"\";display:inline-block;box-sizing:border-box;min-width:var(--size);min-height:var(--size);max-width:var(--size);max-height:var(--size);background-color:#fff;border-radius:var(--bl-border-radius-circle);border:solid 1px var(--bl-color-neutral-lighter)}.selected #label::before{border-width:var(--bl-size-3xs);border-color:var(--bl-color-primary)}.selected #label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,:host(:hover) #label{color:var(--bl-color-primary)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .wrapper{--size:calc(var(--bl-size-m) - 2px)}:host([disabled]) #label{color:var(--bl-color-neutral-light)}:host([disabled]) #label::before{background-color:var(--bl-color-neutral-lightest);border-width:0;box-shadow:0 0 0 1px var(--bl-color-neutral-lighter)}:host([disabled]) .selected #label::before{background-color:var(--bl-color-neutral-light);border-color:var(--bl-color-neutral-lightest);border-width:calc(var(--bl-size-3xs) - 1px)}.wrapper:focus-visible #label::before{box-shadow:0 0 0 1px #fff,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 * @cssprop [--bl-radio-align-items=center] Align items of radio option\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\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": "mRACO,IAAMA,EAASC,odACfC,EAAQF,ECMR,IAAMG,EAAkB,iBAElBC,EAAoB,kBAYZC,EAArB,cAA0CC,EAAiBC,CAAU,CAAE,CAAvE,kCAeE,WAAQ,GAMR,cAAW,GAsBX,KAAQ,mBAAqB,EA1C7B,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAoBA,IAAI,SAAqB,CACvB,MAAO,CAAC,GAAG,KAAK,iBAAiBC,CAAU,CAAC,CAC9C,CAEA,IAAI,kBAA8B,CAChC,OAAO,KAAK,QAAQ,OAAOC,GAAU,CAACA,EAAO,QAAQ,CACvD,CAEA,QAAQC,EAA+C,CACjDA,EAAkB,IAAI,OAAO,IAC/B,KAAK,SAAS,KAAK,KAAK,EACxB,KAAK,SAAS,KAAK,KAAK,EAE5B,CASQ,oBAAoBC,EAAoB,CAC9C,IAAMC,EAAgBD,EAAM,OAE5B,KAAK,SAASC,EAAc,KAAK,EACjC,KAAK,SAASA,EAAc,KAAK,CACnC,CAEQ,cAAcD,EAAsB,CAE1C,GAAI,CAAC,YAAa,YAAY,EAAE,SAASA,EAAM,GAAG,EAChD,KAAK,6BAGI,CAAC,UAAW,WAAW,EAAE,SAASA,EAAM,GAAG,EACpD,KAAK,6BAGI,CAAC,GAAG,EAAE,SAASA,EAAM,GAAG,EAAG,CACpC,KAAK,iBAAiB,KAAK,kBAAkB,EAAE,OAAO,EACtD,WAGA,QAIF,KAAK,mBAAqB,KAAK,IAC7B,EACA,KAAK,IAAI,KAAK,mBAAoB,KAAK,iBAAiB,OAAS,CAAC,CACpE,EAEA,KAAK,iBAAiB,KAAK,kBAAkB,EAAE,MAAM,EAErDA,EAAM,eAAe,CACvB,CAEA,mBAA0B,CACxB,MAAM,kBAAkB,EAExB,KAAK,SAAW,EAChB,KAAK,iBAAiB,QAAS,KAAK,WAAW,EAC/C,KAAK,iBAAiB,UAAW,KAAK,aAAa,CACrD,CAEQ,aAAc,CACpB,KAAK,iBAAiB,KAAK,kBAAkB,EAAE,MAAM,CACvD,CAEA,QAAyB,CACvB,OAAOE,sEAAyE,KAAK;AAAA,2BAC9D,KAAK;AAAA,yCACS,KAAK;AAAA;AAAA;AAAA,gBAI5C,CACF,EA5FEC,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GARPX,EASnB,qBAMAU,EAAA,CADCC,EAAS,GAdSX,EAenB,qBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApBvBX,EAqBnB,wBAoBkCU,EAAA,CAAjCH,EAAM,iBAAiB,GAzCLP,EAyCe,wBAzCfA,EAArBU,EAAA,CADCC,EAAcb,CAAe,GACTE,GCrBd,IAAMY,EAASC,o2CACfC,EAAQF,ECMR,IAAMG,EAAa,WAEbC,EAAqB,aASbC,EAArB,cAAqCC,CAAW,CAAhD,kCAeE,cAAW,GAEF,KAAQ,SAAW,GAmD5B,KAAQ,uBAA0BC,GAA+B,CAC/D,IAAMC,EAAWD,EAAM,OAEvB,KAAK,SAAWC,IAAa,KAAK,KACpC,EAvEA,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAkCA,QAAS,CACP,KAAK,SAAW,GAChB,KAAK,UAAU,KAAK,KAAK,CAC3B,CAKA,IAAI,SAAU,CACZ,OAAO,KAAK,QACd,CAOA,OAAQ,CACN,KAAK,aAAa,SAAW,EAC7B,KAAK,aAAa,MAAM,EACxB,KAAK,QAAQ,KAAK,KAAK,CACzB,CAKA,MAAO,CACL,KAAK,aAAa,SAAW,GAC7B,KAAK,OAAO,KAAK,KAAK,CACxB,CAUA,mBAA0B,CA/F5B,IAAAC,EAgGI,MAAM,kBAAkB,EAExB,KAAK,MAAQ,KAAK,QAAsBC,CAAe,EAElD,KAAK,OACR,QAAQ,KAAK,0DAA2D,IAAI,GAG9ED,EAAA,KAAK,QAAL,MAAAA,EAAY,iBAAiBE,EAAmB,KAAK,uBACvD,CAEA,sBAA6B,CA3G/B,IAAAF,EA4GI,MAAM,qBAAqB,GAC3BA,EAAA,KAAK,QAAL,MAAAA,EAAY,oBAAoBE,EAAmB,KAAK,uBAC1D,CAEA,QAAyB,CACvB,IAAMC,EAAUC,EAAS,CACvB,QAAS,GACT,SAAU,KAAK,QACjB,CAAC,EAED,OAAOC;AAAA,cACGF;AAAA;AAAA;AAAA,sBAGQ,KAAK;AAAA,sBACL,KAAK;AAAA,cACb,KAAK;AAAA,eACJ,KAAK;AAAA;AAAA;AAAA,WAIlB,CACF,EAzGEG,EAAA,CADCC,EAAS,GALSZ,EAMnB,oBAGAW,EAAA,CADCC,EAAS,GARSZ,EASnB,qBAMAW,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBZ,EAenB,wBAEiBW,EAAA,CAAhBE,EAAM,GAjBYb,EAiBF,wBAKYW,EAAA,CAA5BT,EAAM,YAAY,GAtBAF,EAsBU,yBAKFW,EAAA,CAA1BT,EAAM,UAAU,GA3BEF,EA2BQ,uBAKDW,EAAA,CAAzBT,EAAM,SAAS,GAhCGF,EAgCO,sBAiBKW,EAAA,CAA9BG,EAAM,cAAc,GAjDFd,EAiDY,4BAjDZA,EAArBW,EAAA,CADCC,EAAcd,CAAU,GACJE",
+  "names": ["styles", "i", "bl_radio_group_default", "blRadioGroupTag", "blChangeEventName", "BlRadioGroup", "FormControlMixin", "s", "bl_radio_group_default", "blRadioTag", "option", "changedProperties", "event", "checkedOption", "x", "__decorateClass", "e", "styles", "i", "bl_radio_default", "blRadioTag", "blCheckedEventName", "BlRadio", "s", "event", "newValue", "bl_radio_default", "_a", "blRadioGroupTag", "blChangeEventName", "classes", "o", "x", "__decorateClass", "e", "t", "i"]
+}

package/dist/{chunk-IGNJQVQF.js → chunk-ZE7GYACV.js}

@@ -1,6 +1,6 @@
-import{a as i,b as r}from"./chunk-5MOOXA2X.js";import{a as o,b as l,f as s}from"./chunk-4OT5AMS5.js";import{d as t}from"./chunk-IZ2LK5GK.js";var n=o`:host{cursor:wait;display:inline-flex;align-items:center}.spinner{animation:spin 1s linear infinite}:host([overlay]){position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:rgba(39 49 66 / 70%);z-index:10}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`,a=n;var c="bl-spinner",e=class extends s{constructor(){super(...arguments);this.size="var(--bl-font-size-m)";this.disabled=!1;this.overlay=!1;this.color="var(--bl-color-primary)"}static get styles(){return[a]}render(){return l`<bl-icon
+import{a as i,b as r}from"./chunk-5MOOXA2X.js";import{a as o,b as l,f as s}from"./chunk-4OT5AMS5.js";import{d as t}from"./chunk-IZ2LK5GK.js";var n=o`:host{cursor:wait;display:inline-flex;align-items:center}.spinner{animation:1s linear infinite spin}:host([overlay]){position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:rgba(39 49 66 / 70%);z-index:10}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}`,a=n;var c="bl-spinner",e=class extends s{constructor(){super(...arguments);this.size="var(--bl-font-size-m)";this.disabled=!1;this.overlay=!1;this.color="var(--bl-color-primary)"}static get styles(){return[a]}render(){return l`<bl-icon
       class="spinner"
       name="loading"
       style="color: ${this.disabled?"var(--bl-color-neutral-light)":this.color}; font-size: ${this.size};"
     ></bl-icon>`}};t([r({type:String,reflect:!0})],e.prototype,"size",2),t([r({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([r({type:Boolean,reflect:!0})],e.prototype,"overlay",2),t([r({type:String,reflect:!0})],e.prototype,"color",2),e=t([i(c)],e);export{c as a,e as b};
-//# sourceMappingURL=chunk-IGNJQVQF.js.map
+//# sourceMappingURL=chunk-ZE7GYACV.js.map

package/dist/chunk-ZE7GYACV.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/spinner/bl-spinner.css", "../src/components/spinner/bl-spinner.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{cursor:wait;display:inline-flex;align-items:center}.spinner{animation:1s linear infinite spin}:host([overlay]){position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:rgba(39 49 66 / 70%);z-index:10}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport \"../icon/bl-icon\";\nimport style from \"./bl-spinner.css\";\n\nexport const blSpinnerTag = \"bl-spinner\";\n/**\n * @tag bl-spinner\n * @summary Baklava Spinner component\n *\n */\n@customElement(blSpinnerTag)\nexport default class BlSpinner extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the spinner size\n   */\n  @property({ type: String, reflect: true })\n  size = \"var(--bl-font-size-m)\";\n\n  /**\n   * Sets the disabled state for spinner\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled? = false;\n\n  /**\n   * Sets the overlay state for spinner\n   */\n  @property({ type: Boolean, reflect: true })\n  overlay? = false;\n\n  /**\n   * Sets the color of the spinner\n   */\n  @property({ type: String, reflect: true })\n  color: string = \"var(--bl-color-primary)\";\n\n  render(): TemplateResult {\n    return html`<bl-icon\n      class=\"spinner\"\n      name=\"loading\"\n      style=\"color: ${this.disabled\n        ? \"var(--bl-color-neutral-light)\"\n        : this.color}; font-size: ${this.size};\"\n    ></bl-icon>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blSpinnerTag]: BlSpinner;\n  }\n}\n"],
+  "mappings": "6IACO,IAAMA,EAASC,2WACfC,EAAQF,ECGR,IAAMG,EAAe,aAOPC,EAArB,cAAuC,CAAW,CAAlD,kCASE,UAAO,wBAMP,cAAY,GAMZ,aAAW,GAMX,WAAgB,0BA1BhB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CA0BA,QAAyB,CACvB,OAAOC;AAAA;AAAA;AAAA,sBAGW,KAAK,SACjB,gCACA,KAAK,qBAAqB,KAAK;AAAA,gBAEvC,CACF,EA7BEC,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBJ,EASnB,oBAMAG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBJ,EAenB,wBAMAG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApBvBJ,EAqBnB,uBAMAG,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA1BtBJ,EA2BnB,qBA3BmBA,EAArBG,EAAA,CADCC,EAAcL,CAAY,GACNC",
+  "names": ["styles", "i", "bl_spinner_default", "blSpinnerTag", "BlSpinner", "bl_spinner_default", "x", "__decorateClass", "e"]
+}

package/dist/{chunk-N4GAO7FQ.js → chunk-ZJBBQHF3.js}

@@ -1,4 +1,4 @@
-import{a as b}from"./chunk-JAZGOWKA.js";import{a as s,b as n}from"./chunk-5MOOXA2X.js";import{a as i,b as o,f as a}from"./chunk-4OT5AMS5.js";import{d as l}from"./chunk-IZ2LK5GK.js";var d=i`:host{display:table-cell;border:1px solid var(--bl-color-neutral-lighter);padding:var(--bl-size-m);font:var(--bl-font-title-3-regular);color:var(--bl-color-neutral-darker);box-sizing:border-box;vertical-align:middle;word-break:break-word;background-color:var(--bl-color-neutral-full);background-clip:padding-box;border-top:none;border-inline-end:none}.table-cell{display:flex;align-items:center}.table-cell.shadow-right::before{content:"";position:absolute;inset-inline-end:-1px;top:0;width:16px;height:100%;z-index:-1;border-inline-end:1px solid var(--bl-color-neutral-lighter);box-shadow:calc(8px * var(--bl-text-x-direction)) 0 16px 0 rgb(39 49 66 / 10%)}.table-cell.shadow-left::before{content:"";position:absolute;inset-inline-start:-1px;top:0;width:16px;height:100%;z-index:-1;border-inline-start:1px solid var(--bl-color-neutral-lighter);box-shadow:calc(-8px * var(--bl-text-x-direction)) 0 16px 0 rgb(39 49 66 / 10%)}bl-checkbox{margin-inline-end:var(--bl-size-m)}`,c=d;var h="bl-table-cell",t=class extends a{constructor(){super(...arguments);this.disableSelection=!1}static get styles(){return[c]}get _table(){return this.closest("bl-table")}get _tableRow(){return this.closest("bl-table-row")}get disabled(){return this.disableSelection}get selectable(){var e;return this.index===0&&!!((e=this._table)!=null&&e.isSelectable(!1))&&this.selectionKey}get index(){let e=this.parentNode;return e?[...e.children].indexOf(this):-1}get selectionKey(){return this._tableRow?this._tableRow.selectionKey:""}get checked(){var e;return!!((e=this._tableRow)!=null&&e.checked)}get shadowRight(){var e;return!!((e=this._tableRow)!=null&&e.stickyFirstColumn)&&this.index===0}get shadowLeft(){var e;return!!((e=this._tableRow)!=null&&e.stickyLastColumn)&&this.nextElementSibling===null}connectedCallback(){super.connectedCallback(),this.closest(b)||console.warn("bl-table-cell is designed to be used inside a bl-table-row",this)}onChange(e){var r;(r=this._table)==null||r.onSelectionChange(!1,e.detail,this.selectionKey)}_renderCheckbox(){return this.selectable?o`<bl-checkbox
+import{a as b}from"./chunk-LEAVDIGF.js";import{a as s,b as n}from"./chunk-5MOOXA2X.js";import{a as i,b as o,f as a}from"./chunk-4OT5AMS5.js";import{d as l}from"./chunk-IZ2LK5GK.js";var d=i`:host{display:table-cell;border:1px solid var(--bl-color-neutral-lighter);padding:var(--bl-size-m);font:var(--bl-font-title-3-regular);color:var(--bl-color-neutral-darker);box-sizing:border-box;vertical-align:middle;word-break:break-word;background-color:var(--bl-color-neutral-full);background-clip:padding-box;border-top:none;border-inline-end:none}.table-cell{display:flex;align-items:center}.table-cell.shadow-right::before{content:"";position:absolute;inset-inline-end:-1px;top:0;width:16px;height:100%;z-index:-1;border-inline-end:1px solid var(--bl-color-neutral-lighter);box-shadow:calc(8px * var(--bl-text-x-direction)) 0 16px 0 rgb(39 49 66 / 10%)}.table-cell.shadow-left::before{content:"";position:absolute;inset-inline-start:-1px;top:0;width:16px;height:100%;z-index:-1;border-inline-start:1px solid var(--bl-color-neutral-lighter);box-shadow:calc(-8px * var(--bl-text-x-direction)) 0 16px 0 rgb(39 49 66 / 10%)}bl-checkbox{margin-inline-end:var(--bl-size-m)}`,c=d;var h="bl-table-cell",t=class extends a{constructor(){super(...arguments);this.disableSelection=!1}static get styles(){return[c]}get _table(){return this.closest("bl-table")}get _tableRow(){return this.closest("bl-table-row")}get disabled(){return this.disableSelection}get selectable(){var e;return this.index===0&&!!((e=this._table)!=null&&e.isSelectable(!1))&&this.selectionKey}get index(){let e=this.parentNode;return e?[...e.children].indexOf(this):-1}get selectionKey(){return this._tableRow?this._tableRow.selectionKey:""}get checked(){var e;return!!((e=this._tableRow)!=null&&e.checked)}get shadowRight(){var e;return!!((e=this._tableRow)!=null&&e.stickyFirstColumn)&&this.index===0}get shadowLeft(){var e;return!!((e=this._tableRow)!=null&&e.stickyLastColumn)&&this.nextElementSibling===null}connectedCallback(){super.connectedCallback(),this.closest(b)||console.warn("bl-table-cell is designed to be used inside a bl-table-row",this)}onChange(e){var r;(r=this._table)==null||r.onSelectionChange(!1,e.detail,this.selectionKey)}_renderCheckbox(){return this.selectable?o`<bl-checkbox
           ?checked=${this.checked}
           ?disabled=${this.disabled}
           value="row"
@@ -8,4 +8,4 @@ import{a as b}from"./chunk-JAZGOWKA.js";import{a as s,b as n}from"./chunk-5MOOXA
       ${this._renderCheckbox()}
       <slot></slot>
     </div>`}};l([n({type:Boolean,reflect:!0,attribute:"disabled"})],t.prototype,"disableSelection",2),t=l([s(h)],t);export{h as a,t as b};
-//# sourceMappingURL=chunk-N4GAO7FQ.js.map
+//# sourceMappingURL=chunk-ZJBBQHF3.js.map

package/dist/chunk-ZLJF4SVG.js

@@ -0,0 +1,4 @@
+import{a as s,b as a,g as d}from"./chunk-5MOOXA2X.js";import{a as e,b as i,f as c}from"./chunk-4OT5AMS5.js";import{d as t}from"./chunk-IZ2LK5GK.js";var p=e`.accordion-group{display:flex;flex-direction:column;gap:0}.accordion-group ::slotted(bl-accordion:first-child){--bl-accordion-radius-bottom-right:0;--bl-accordion-radius-bottom-left:0;--bl-accordion-border-bottom:0}.accordion-group ::slotted(bl-accordion:not(:last-child,:first-child)){--bl-accordion-radius-bottom-right:0;--bl-accordion-radius-bottom-left:0;--bl-accordion-radius-top-left:0;--bl-accordion-radius-top-right:0;--bl-accordion-border-bottom:0}.accordion-group ::slotted(bl-accordion:last-child){--bl-accordion-radius-top-right:0;--bl-accordion-radius-top-left:0}`,n=p;var o=class extends c{constructor(){super(...arguments);this.multiple=!1}static get styles(){return[n]}handleToggleAccordions(r){let m=r.target;!this.multiple&&r.detail&&this.accordions.forEach(l=>{m!==l&&l.collapse()})}render(){return i`<div class="accordion-group" @bl-toggle=${this.handleToggleAccordions}>
+      <slot></slot>
+    </div>`}};t([a({reflect:!0,type:Boolean})],o.prototype,"multiple",2),t([d({selector:"bl-accordion"})],o.prototype,"accordions",2),o=t([s("bl-accordion-group")],o);export{o as a};
+//# sourceMappingURL=chunk-ZLJF4SVG.js.map

package/dist/chunk-ZLJF4SVG.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/accordion-group/bl-accordion-group.css", "../src/components/accordion-group/bl-accordion-group.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.accordion-group{display:flex;flex-direction:column;gap:0}.accordion-group ::slotted(bl-accordion:first-child){--bl-accordion-radius-bottom-right:0;--bl-accordion-radius-bottom-left:0;--bl-accordion-border-bottom:0}.accordion-group ::slotted(bl-accordion:not(:last-child,:first-child)){--bl-accordion-radius-bottom-right:0;--bl-accordion-radius-bottom-left:0;--bl-accordion-radius-top-left:0;--bl-accordion-radius-top-right:0;--bl-accordion-border-bottom:0}.accordion-group ::slotted(bl-accordion:last-child){--bl-accordion-radius-top-right:0;--bl-accordion-radius-top-left:0}`;\nexport default styles;\n", "import { html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, queryAssignedElements } from \"lit/decorators.js\";\nimport { CSSResultGroup } from \"lit/development\";\nimport { BlAccordion } from \"../../baklava\";\nimport style from \"./bl-accordion-group.css\";\n\n@customElement(\"bl-accordion-group\")\nexport default class BlAccordionGroup extends LitElement {\n  /**\n   * Allow multiple accordions to be open at once\n   */\n  @property({ reflect: true, type: Boolean })\n  multiple = false;\n\n  @queryAssignedElements({ selector: \"bl-accordion\" })\n  accordions: BlAccordion[];\n\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  handleToggleAccordions(e: CustomEvent<boolean>) {\n    const target = e.target as BlAccordion;\n\n    if (!this.multiple && e.detail) {\n      this.accordions.forEach(a => {\n        if (target !== a) {\n          a.collapse();\n        }\n      });\n    }\n  }\n\n  render(): TemplateResult {\n    return html`<div class=\"accordion-group\" @bl-toggle=${this.handleToggleAccordions}>\n      <slot></slot>\n    </div>`;\n  }\n}\n"],
+  "mappings": "oJACO,IAAMA,EAASC,okBACfC,EAAQF,ECKf,IAAqBG,EAArB,cAA8CC,CAAW,CAAzD,kCAKE,cAAW,GAKX,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAEA,uBAAuBC,EAAyB,CAC9C,IAAMC,EAASD,EAAE,OAEb,CAAC,KAAK,UAAYA,EAAE,QACtB,KAAK,WAAW,QAAQE,GAAK,CACvBD,IAAWC,GACbA,EAAE,SAAS,CAEf,CAAC,CAEL,CAEA,QAAyB,CACvB,OAAOC,4CAA+C,KAAK;AAAA;AAAA,WAG7D,CACF,EA1BEC,EAAA,CADCJ,EAAS,CAAE,QAAS,GAAM,KAAM,OAAQ,CAAC,GAJvBH,EAKnB,wBAGAO,EAAA,CADCC,EAAsB,CAAE,SAAU,cAAe,CAAC,GAPhCR,EAQnB,0BARmBA,EAArBO,EAAA,CADCJ,EAAc,oBAAoB,GACdH",
+  "names": ["styles", "i", "bl_accordion_group_default", "BlAccordionGroup", "s", "bl_accordion_group_default", "e", "target", "a", "x", "__decorateClass", "l"]
+}

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

@@ -1,2 +1,2 @@
-import{a}from"../../../chunk-X73CSBRO.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-ECPWEUBG.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../../chunk-APLBTZ36.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-ECPWEUBG.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-accordion.js.map

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-NGJM4NWA.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-ZLJF4SVG.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-accordion-group.js.map

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-4QFXDW3W.js";import"../../chunk-ECPWEUBG.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-ERL6CBPO.js";import"../../chunk-ECPWEUBG.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-alert.js.map

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-4BZSILLM.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-T5MEA7JO.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-badge.js.map

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

@@ -1,2 +1,2 @@
-import{b as a}from"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{b as a}from"../../chunk-HZV6GUII.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-button.js.map

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

@@ -1,2 +1,2 @@
-import{b as a}from"../../chunk-4KQZCR3J.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-WEEGH2F4.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{b as a}from"../../chunk-KJUZJAHW.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-WEEGH2F4.js";import"../../chunk-HZV6GUII.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-calendar.js.map

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

@@ -1,2 +1,2 @@
-import{c as a,d as b,e as c}from"../../chunk-FTQX7CEW.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{b as blChangeEventName,a as blCheckboxGroupTag,c as default};
+import{c as a,d as b,e as c}from"../../chunk-MWFGDECP.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{b as blChangeEventName,a as blCheckboxGroupTag,c as default};
 //# sourceMappingURL=bl-checkbox-group.js.map

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

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-FTQX7CEW.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blCheckboxTag,b as default};
+import{a,b}from"../../../chunk-MWFGDECP.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blCheckboxTag,b as default};
 //# sourceMappingURL=bl-checkbox.js.map

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-QPODIOFV.js";import"../../chunk-QMVEWMEI.js";import"../../chunk-BNUJWONI.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-757CMI4A.js";import"../../chunk-23PSWIUF.js";import"../../chunk-4KQZCR3J.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-WEEGH2F4.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-Q7CEGCDI.js";import"../../chunk-DE3A37FL.js";import"../../chunk-UOGCEUXK.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-IDRA37BX.js";import"../../chunk-23PSWIUF.js";import"../../chunk-KJUZJAHW.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-WEEGH2F4.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-HZV6GUII.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-datepicker.js.map

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-GXDVWGFU.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-OXHRXOBD.js";import"../../chunk-HZV6GUII.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-dialog.js.map

package/dist/components/dialog/bl-dialog.stories.d.ts

@@ -28,4 +28,5 @@ export declare const DialogWithFullWidthActions: Story;
 export declare const DialogWithTabGroup: Story;
 export declare const CriticalDialog: Story;
 export declare const CaptionLineClampDialog: Story;
+export declare const RTLSupport: Story;
 //# sourceMappingURL=bl-dialog.stories.d.ts.map

package/dist/components/dialog/bl-dialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bl-dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/bl-dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAOhE,QAAA,MAAM,IAAI,EAAE,IA4BX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAkKlC,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KASpC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAUpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KASvC,CAAC;AAGF,eAAO,MAAM,0BAA0B,EAAE,KAUxC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAOpC,CAAC"}
+{"version":3,"file":"bl-dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/bl-dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAOhE,QAAA,MAAM,IAAI,EAAE,IA4BX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAkMlC,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KASpC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAUpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KASvC,CAAC;AAGF,eAAO,MAAM,0BAA0B,EAAE,KAUxC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAOpC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAC"}

package/dist/components/dialog/bl-dialog.stories.js

@@ -1,4 +1,4 @@
-import{a as c}from"../../chunk-HSVSMABT.js";import{a as n}from"../../chunk-DINNT5P2.js";import{b as l}from"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import{b as e}from"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";var m={title:"Components/Dialog",component:"bl-dialog",parameters:{chromatic:{viewports:[1e3]},controls:{exclude:["id"]}},decorators:[c],argTypes:{open:{control:"boolean"},polyfilled:{control:"boolean"},caption:{control:"text"},content:{control:"text"}}},q=m,t=i=>async()=>{let a=document.getElementById(i);a.open=!0},o=i=>e`
+import{a as c}from"../../chunk-HSVSMABT.js";import{a as n}from"../../chunk-DINNT5P2.js";import{b as s}from"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import{b as e}from"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";var d={title:"Components/Dialog",component:"bl-dialog",parameters:{chromatic:{viewports:[1e3]},controls:{exclude:["id"]}},decorators:[c],argTypes:{open:{control:"boolean"},polyfilled:{control:"boolean"},caption:{control:"text"},content:{control:"text"}}},q=d,t=i=>async()=>{let a=document.getElementById(i);a.open=!0},o=i=>e`
 <bl-button @bl-click="${t(i.id)}" variant="secondary">Open Dialog</bl-button>
 
 <bl-dialog
@@ -8,7 +8,7 @@ import{a as c}from"../../chunk-HSVSMABT.js";import{a as n}from"../../chunk-DINNT
   ?open="${i.open}"
   ?polyfilled="${i.polyfilled}"
   ?critical="${i.critical}">
-    ${l(i.content)}${i.primaryAction?e`
+    ${s(i.content)}${i.primaryAction?e`
 
   <bl-button slot="primary-action" variant="primary" ?autofocus=${i.focusPrimary} size="large">${i.primaryAction}</bl-button>`:""}${i.secondaryAction?e`
   <bl-button slot="secondary-action" variant="secondary" ?autofocus=${i.focusSecondary} size="large">${i.secondaryAction}</bl-button>`:""}${i.tertiaryAction?e`
@@ -16,7 +16,7 @@ import{a as c}from"../../chunk-HSVSMABT.js";import{a as n}from"../../chunk-DINNT
   ${i.closeAction?e`
     <bl-button slot="primary-action" variant="primary" ?autofocus=${i.focusSecondary} size="large" @click=${a=>{var r;return(r=a.target.closest("bl-dialog"))==null?void 0:r.toggleAttribute("open")}}>${i.closeAction}</bl-button>`:""}
 </bl-dialog>
-`,s=i=>e`
+`,l=i=>e`
 <style>
   bl-dialog.full-width-actions bl-button {
     --bl-button-display: block;
@@ -25,7 +25,7 @@ import{a as c}from"../../chunk-HSVSMABT.js";import{a as n}from"../../chunk-DINNT
 </style>
 
 ${o({...i,className:"full-width-actions"})}
-`,d=i=>e`
+`,m=i=>e`
 <style>
   bl-dialog.limited-width .content {
     max-width: 500px;
@@ -124,7 +124,7 @@ when an unknown printer took a galley of type and scrambled it to make a type sp
 </p>
 
 `})}
-`,y=i=>e`
+`,b=i=>e`
 <style>
   #dl-caption-line-clamp {
     --bl-dialog-width: 31rem;
@@ -133,5 +133,35 @@ when an unknown printer took a galley of type and scrambled it to make a type sp
 </style>
 
 ${o({...i,caption:"I am a very long text I am a very long text I am a very long text",content:"You can adjust the line clamp"})}
-`,v={args:{id:"dl-basic",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel"},render:o,play:t("dl-basic")},L={args:{id:"dl-sticky-footer",caption:"Terms And Conditions",primaryAction:"Agree",secondaryAction:"Disagree"},render:d,play:t("dl-sticky-footer")},w={args:{id:"dl-sizing",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel",caption:"I am a long text but I will not block the width."},render:u,play:t("dl-sizing")},k={args:{id:"dl-focused-action",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",focusSecondary:!0,tertiaryAction:"Cancel"},render:o,play:t("dl-focused-action")},D={args:{id:"dl-focused-input",caption:"Name your file",content:'<p>Please provide a name for your file</p><bl-input placeholder="filename.pdf" autofocus></bl-input>',primaryAction:"OK",tertiaryAction:"Cancel"},render:o,play:t("dl-focused-input")},C={args:{id:"dl-full-width-action",caption:"Action completed",content:"<p>Your process is done!</p>",primaryAction:"OK"},render:s,play:t("dl-full-width-action")},T={args:{id:"dl-full-width-actions",caption:"Are you sure to delete?",content:"<p>Do you want to really delete the file?</p>",primaryAction:"Delete",secondaryAction:"Cancel"},render:s,play:t("dl-full-width-actions")},$={args:{id:"dl-tab-group",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel"},render:p,play:t("dl-tab-group")},I={args:{id:"dl-critical",caption:"Critical Action Required",content:"<p>This action is irreversible. Please confirm to proceed.</p>",closeAction:"Confirm",critical:!0},render:s,play:t("dl-critical")},S={args:{id:"dl-caption-line-clamp",closeAction:"Confirm"},render:y,play:t("dl-caption-line-clamp")};export{v as BasicUsage,S as CaptionLineClampDialog,I as CriticalDialog,w as DialogSizing,k as DialogWithFocusedAction,D as DialogWithFocusedInput,C as DialogWithFullWidthAction,T as DialogWithFullWidthActions,L as DialogWithStickyFooter,$ as DialogWithTabGroup,q as default};
+`,y=i=>e`
+  <div style="display: flex; gap: 32px;">
+    <!-- LTR Example -->
+    <div>
+      <bl-button @bl-click="${t(`${i.id}-ltr`)}" variant="secondary">Open LTR Dialog</bl-button>
+      <bl-dialog
+        id="${i.id}-ltr"
+        caption="Delete Confirmation"
+        ?critical="${i.critical}">
+        <p>Are you sure you want to delete this file? This action cannot be undone.</p>
+        <bl-alert icon variant="warning">All associated data will be permanently deleted.</bl-alert>
+        <bl-button slot="primary-action" variant="primary" size="large">Delete</bl-button>
+        <bl-button slot="secondary-action" variant="secondary" size="large">Cancel</bl-button>
+      </bl-dialog>
+    </div>
+
+    <!-- RTL Example -->
+    <div dir="rtl">
+      <bl-button @bl-click="${t(`${i.id}-rtl`)}" variant="secondary">Open RTL Dialog</bl-button>
+      <bl-dialog
+        id="${i.id}-rtl"
+        caption="تأكيد الحذف"
+        ?critical="${i.critical}">
+        <p>هل أنت متأكد أنك تريد حذف هذا الملف؟ لا يمكن التراجع عن هذا الإجراء.</p>
+        <bl-alert icon variant="warning">سيتم حذف جميع البيانات المرتبطة بشكل دائم.</bl-alert>
+        <bl-button slot="primary-action" variant="primary" size="large">حذف</bl-button>
+        <bl-button slot="secondary-action" variant="secondary" size="large">إلغاء</bl-button>
+      </bl-dialog>
+    </div>
+  </div>
+`,L={args:{id:"dl-basic",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel"},render:o,play:t("dl-basic")},T={args:{id:"dl-sticky-footer",caption:"Terms And Conditions",primaryAction:"Agree",secondaryAction:"Disagree"},render:m,play:t("dl-sticky-footer")},w={args:{id:"dl-sizing",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel",caption:"I am a long text but I will not block the width."},render:u,play:t("dl-sizing")},D={args:{id:"dl-focused-action",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",focusSecondary:!0,tertiaryAction:"Cancel"},render:o,play:t("dl-focused-action")},$={args:{id:"dl-focused-input",caption:"Name your file",content:'<p>Please provide a name for your file</p><bl-input placeholder="filename.pdf" autofocus></bl-input>',primaryAction:"OK",tertiaryAction:"Cancel"},render:o,play:t("dl-focused-input")},k={args:{id:"dl-full-width-action",caption:"Action completed",content:"<p>Your process is done!</p>",primaryAction:"OK"},render:l,play:t("dl-full-width-action")},C={args:{id:"dl-full-width-actions",caption:"Are you sure to delete?",content:"<p>Do you want to really delete the file?</p>",primaryAction:"Delete",secondaryAction:"Cancel"},render:l,play:t("dl-full-width-actions")},S={args:{id:"dl-tab-group",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel"},render:p,play:t("dl-tab-group")},I={args:{id:"dl-critical",caption:"Critical Action Required",content:"<p>This action is irreversible. Please confirm to proceed.</p>",closeAction:"Confirm",critical:!0},render:l,play:t("dl-critical")},U={args:{id:"dl-caption-line-clamp",closeAction:"Confirm"},render:b,play:t("dl-caption-line-clamp")},E={args:{id:"dl-rtl"},render:y,parameters:{docs:{description:{story:'The dialog component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir="rtl"` attribute on the parent element.'}}}};export{L as BasicUsage,U as CaptionLineClampDialog,I as CriticalDialog,w as DialogSizing,D as DialogWithFocusedAction,$ as DialogWithFocusedInput,k as DialogWithFullWidthAction,C as DialogWithFullWidthActions,T as DialogWithStickyFooter,S as DialogWithTabGroup,E as RTLSupport,q as default};
 //# sourceMappingURL=bl-dialog.stories.js.map

package/dist/components/dialog/bl-dialog.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dialog/bl-dialog.stories.ts"],
-  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/web-components\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { fullscreenLayout } from \"../../utilities/chromatic-decorators\";\nimport type BlDialog from \"./bl-dialog\";\n\nconst meta: Meta = {\n  title: \"Components/Dialog\",\n  component: \"bl-dialog\",\n  parameters: {\n    chromatic: {\n      viewports: [1000]\n    },\n    controls: {\n      exclude: [\"id\"],\n    }\n  },\n  decorators: [\n    fullscreenLayout,\n  ],\n  argTypes: {\n    open: {\n      control: \"boolean\",\n    },\n    polyfilled: {\n      control: \"boolean\",\n    },\n    caption: {\n      control: \"text\"\n    },\n    content: {\n      control: \"text\"\n    }\n  }\n};\n\nexport default meta;\n\ninterface DialogArgs {\n  id: string;\n  className?: string;\n  caption?: string;\n  open?: boolean;\n  polyfilled?: boolean;\n  content?: string;\n  primaryAction?: string;\n  secondaryAction?: string;\n  tertiaryAction?: string;\n  focusPrimary?: boolean;\n  focusSecondary?: boolean;\n  focusTertiary?: boolean;\n  critical?: boolean;\n  closeAction?: string;\n}\n\ntype Story = StoryObj<DialogArgs>;\n\nconst dialogOpener = (dialogId: string) => async () => {\n  const dialog = document.getElementById(dialogId) as BlDialog;\n\n  dialog.open = true;\n};\n\nconst BasicTemplate = (args: DialogArgs) => html`\n<bl-button @bl-click=\"${dialogOpener(args.id)}\" variant=\"secondary\">Open Dialog</bl-button>\n\n<bl-dialog\n  id=${args.id}\n  class=\"${ifDefined(args.className)}\"\n  caption=\"${ifDefined(args.caption)}\"\n  ?open=\"${args.open}\"\n  ?polyfilled=\"${args.polyfilled}\"\n  ?critical=\"${args.critical}\">\n    ${\n      unsafeHTML(args.content)\n    }${\n      args.primaryAction ? html`\n\n  <bl-button slot=\"primary-action\" variant=\"primary\" ?autofocus=${args.focusPrimary} size=\"large\">${args.primaryAction}</bl-button>` : \"\"}${\n      args.secondaryAction ? html`\n  <bl-button slot=\"secondary-action\" variant=\"secondary\" ?autofocus=${args.focusSecondary} size=\"large\">${args.secondaryAction}</bl-button>` : \"\"}${\n      args.tertiaryAction ? html`\n  <bl-button slot=\"tertiary-action\" variant=\"tertiary\" ?autofocus=${args.focusTertiary} size=\"large\">${args.tertiaryAction}</bl-button>` : \"\"}\n  ${\n    args.closeAction ? html`\n    <bl-button slot=\"primary-action\" variant=\"primary\" ?autofocus=${args.focusSecondary} size=\"large\" @click=${(e: CustomEvent) => (e.target as HTMLElement).closest(\"bl-dialog\")?.toggleAttribute(\"open\")}>${args.closeAction}</bl-button>` : \"\"}\n</bl-dialog>\n`;\n\nconst FullWidthActionsTemplate = (args: DialogArgs) => html`\n<style>\n  bl-dialog.full-width-actions bl-button {\n    --bl-button-display: block;\n    flex: 1;\n  }\n</style>\n\n${BasicTemplate({...args, className: \"full-width-actions\"})}\n`;\n\nconst TemplateWithStickyFooter = (args: DialogArgs) => html`\n<style>\n  bl-dialog.limited-width .content {\n    max-width: 500px;\n    max-height: 500px;\n  }\n</style>\n\n${BasicTemplate({...args, className: \"limited-width\", content: `<div class=\"content\">\n  <bl-alert icon>Please read all terms and conditions.</bl-alert>\n  <h4>Lorem ipsum dolor sit amet</h4>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n   Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <ul>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n  </ul>\n  <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.\n  Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form\n  accompanied by English versions from the 1914 translation by H. Rackham.</p>\n  <h4>Quis autem vel eum iure reprehenderit qui</h4>\n  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry\n  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scramble\n  it to make a type specimen book.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <ul>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n  </ul>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n</div>`\n})}`;\n\nconst SizingTemplate = (args: DialogArgs) => html`\n<style>\n  #dl-sizing {\n    --bl-dialog-width: 31rem;\n  }\n\n  .my-dialog-content {\n    height:200px;\n    margin:0;\n    padding:0;\n  }\n</style>\n\n${BasicTemplate({...args, content: `<p class=\"my-dialog-content\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,\nwhen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,\nremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing\nsoftware like Aldus PageMaker including versions of Lorem Ipsum. Let us help determine location. This means sending anonymous location data to us.\nContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,\na Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites\nof the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\"\n(The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,\n\"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.</p>` })}\n`;\n\nconst TabGroupTemplate = (args: DialogArgs) => html`\n<style>\n  .tab-dialog-content {\n    height:50px;\n    margin-top: 20px;\n  }\n</style>\n\n${BasicTemplate({...args, content: `\n<bl-tab-group>\n  <bl-tab name=\"test-1\" slot=\"tabs\" caption=\"Caption\">Tab 1</bl-tab>\n  <bl-tab name=\"test-2\" slot=\"tabs\">Tab 2</bl-tab>\n  <bl-tab name=\"test-3\" slot=\"tabs\" disabled caption=\"Caption\">Tab 3</bl-tab>\n</bl-tab-group>\n<p class=\"tab-dialog-content\">\nNormal dialog contents has default padding in bl-dialog component. But bl-tab-group has full width in bl-dialog component.\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,\nwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.\n</p>\n\n` })}\n`;\n\nconst CaptionLineClampTemplate = (args: DialogArgs) => html`\n<style>\n  #dl-caption-line-clamp {\n    --bl-dialog-width: 31rem;\n    --bl-dialog-caption-line-clamp: 2;\n  }\n</style>\n\n${BasicTemplate({...args, caption: \"I am a very long text I am a very long text I am a very long text\", content: \"You can adjust the line clamp\" })}\n`;\n\nexport const BasicUsage: Story = {\n  args: {\n    id: \"dl-basic\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-basic\")\n};\n\nexport const DialogWithStickyFooter: Story = {\n  args: {\n    id: \"dl-sticky-footer\",\n    caption: \"Terms And Conditions\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n  },\n  render: TemplateWithStickyFooter,\n  play: dialogOpener(\"dl-sticky-footer\")\n};\n\nexport const DialogSizing: Story = {\n  args: {\n    id: \"dl-sizing\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n    caption: \"I am a long text but I will not block the width.\"\n  },\n  render: SizingTemplate,\n  play: dialogOpener(\"dl-sizing\")\n};\n\nexport const DialogWithFocusedAction: Story = {\n  args: {\n    id: \"dl-focused-action\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    focusSecondary: true,\n    tertiaryAction: \"Cancel\"\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-focused-action\")\n};\n\nexport const DialogWithFocusedInput: Story = {\n  args: {\n    id: \"dl-focused-input\",\n    caption: \"Name your file\",\n    content: '<p>Please provide a name for your file</p><bl-input placeholder=\"filename.pdf\" autofocus></bl-input>',\n    primaryAction: \"OK\",\n    tertiaryAction: \"Cancel\"\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-focused-input\")\n};\n\nexport const DialogWithFullWidthAction: Story = {\n  args: {\n    id: \"dl-full-width-action\",\n    caption: \"Action completed\",\n    content: \"<p>Your process is done!</p>\",\n    primaryAction: \"OK\"\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-full-width-action\")\n};\n\n\nexport const DialogWithFullWidthActions: Story = {\n  args: {\n    id: \"dl-full-width-actions\",\n    caption: \"Are you sure to delete?\",\n    content: \"<p>Do you want to really delete the file?</p>\",\n    primaryAction: \"Delete\",\n    secondaryAction: \"Cancel\"\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-full-width-actions\")\n};\n\nexport const DialogWithTabGroup: Story = {\n  args: {\n    id: \"dl-tab-group\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n  },\n  render: TabGroupTemplate,\n  play: dialogOpener(\"dl-tab-group\")\n};\n\nexport const CriticalDialog: Story = {\n  args: {\n    id: \"dl-critical\",\n    caption: \"Critical Action Required\",\n    content: \"<p>This action is irreversible. Please confirm to proceed.</p>\",\n    closeAction: \"Confirm\",\n    critical: true,\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-critical\")\n};\n\nexport const CaptionLineClampDialog: Story = {\n  args: {\n    id: \"dl-caption-line-clamp\",\n    closeAction: \"Confirm\"\n  },\n  render: CaptionLineClampTemplate,\n  play: dialogOpener(\"dl-caption-line-clamp\")\n};\n"],
-  "mappings": "gPAOA,IAAMA,EAAa,CACjB,MAAO,oBACP,UAAW,YACX,WAAY,CACV,UAAW,CACT,UAAW,CAAC,GAAI,CAClB,EACA,SAAU,CACR,QAAS,CAAC,IAAI,CAChB,CACF,EACA,WAAY,CACVC,CACF,EACA,SAAU,CACR,KAAM,CACJ,QAAS,SACX,EACA,WAAY,CACV,QAAS,SACX,EACA,QAAS,CACP,QAAS,MACX,EACA,QAAS,CACP,QAAS,MACX,CACF,CACF,EAEOC,EAAQF,EAqBTG,EAAgBC,GAAqB,SAAY,CACrD,IAAMC,EAAS,SAAS,eAAeD,CAAQ,EAE/CC,EAAO,KAAO,EAChB,EAEMC,EAAiBC,GAAqBC;AAAA,wBACpBL,EAAaI,EAAK,EAAE;AAAA;AAAA;AAAA,OAGrCA,EAAK;AAAA,WACDE,EAAUF,EAAK,SAAS;AAAA,aACtBE,EAAUF,EAAK,OAAO;AAAA,WACxBA,EAAK;AAAA,iBACCA,EAAK;AAAA,eACPA,EAAK;AAAA,MAEdG,EAAWH,EAAK,OAAO,IAEvBA,EAAK,cAAgBC;AAAA;AAAA,kEAEuCD,EAAK,6BAA6BA,EAAK,4BAA8B,KACjIA,EAAK,gBAAkBC;AAAA,sEACyCD,EAAK,+BAA+BA,EAAK,8BAAgC,KACzIA,EAAK,eAAiBC;AAAA,oEACwCD,EAAK,8BAA8BA,EAAK,6BAA+B;AAAA,IAEvIA,EAAK,YAAcC;AAAA,oEAC6CD,EAAK,sCAAuCI,GAAgB,CAtFhI,IAAAC,EAsFoI,OAAAA,EAAAD,EAAE,OAAuB,QAAQ,WAAW,IAA5C,YAAAC,EAA+C,gBAAgB,YAAWL,EAAK,0BAA4B;AAAA;AAAA,EAIzOM,EAA4BN,GAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrDF,EAAc,CAAC,GAAGC,EAAM,UAAW,oBAAoB,CAAC;AAAA,EAGpDO,EAA4BP,GAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrDF,EAAc,CAAC,GAAGC,EAAM,UAAW,gBAAiB,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAiD/D,CAAC,IAEKQ,EAAkBR,GAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAa3CF,EAAc,CAAC,GAAGC,EAAM,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0EAQwC,CAAC;AAAA,EAGtES,EAAoBT,GAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ7CF,EAAc,CAAC,GAAGC,EAAM,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAYjC,CAAC;AAAA,EAGGU,EAA4BV,GAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrDF,EAAc,CAAC,GAAGC,EAAM,QAAS,oEAAqE,QAAS,+BAAgC,CAAC;AAAA,EAGrIW,EAAoB,CAC/B,KAAM,CACJ,GAAI,WACJ,QAAS,wBACT,QAAS,oFACT,cAAe,QACf,gBAAiB,WACjB,eAAgB,QAClB,EACA,OAAQZ,EACR,KAAMH,EAAa,UAAU,CAC/B,EAEagB,EAAgC,CAC3C,KAAM,CACJ,GAAI,mBACJ,QAAS,uBACT,cAAe,QACf,gBAAiB,UACnB,EACA,OAAQL,EACR,KAAMX,EAAa,kBAAkB,CACvC,EAEaiB,EAAsB,CACjC,KAAM,CACJ,GAAI,YACJ,cAAe,QACf,gBAAiB,WACjB,eAAgB,SAChB,QAAS,kDACX,EACA,OAAQL,EACR,KAAMZ,EAAa,WAAW,CAChC,EAEakB,EAAiC,CAC5C,KAAM,CACJ,GAAI,oBACJ,QAAS,wBACT,QAAS,oFACT,cAAe,QACf,gBAAiB,WACjB,eAAgB,GAChB,eAAgB,QAClB,EACA,OAAQf,EACR,KAAMH,EAAa,mBAAmB,CACxC,EAEamB,EAAgC,CAC3C,KAAM,CACJ,GAAI,mBACJ,QAAS,iBACT,QAAS,uGACT,cAAe,KACf,eAAgB,QAClB,EACA,OAAQhB,EACR,KAAMH,EAAa,kBAAkB,CACvC,EAEaoB,EAAmC,CAC9C,KAAM,CACJ,GAAI,uBACJ,QAAS,mBACT,QAAS,+BACT,cAAe,IACjB,EACA,OAAQV,EACR,KAAMV,EAAa,sBAAsB,CAC3C,EAGaqB,EAAoC,CAC/C,KAAM,CACJ,GAAI,wBACJ,QAAS,0BACT,QAAS,gDACT,cAAe,SACf,gBAAiB,QACnB,EACA,OAAQX,EACR,KAAMV,EAAa,uBAAuB,CAC5C,EAEasB,EAA4B,CACvC,KAAM,CACJ,GAAI,eACJ,QAAS,wBACT,QAAS,oFACT,cAAe,QACf,gBAAiB,WACjB,eAAgB,QAClB,EACA,OAAQT,EACR,KAAMb,EAAa,cAAc,CACnC,EAEauB,EAAwB,CACnC,KAAM,CACJ,GAAI,cACJ,QAAS,2BACT,QAAS,iEACT,YAAa,UACb,SAAU,EACZ,EACA,OAAQb,EACR,KAAMV,EAAa,aAAa,CAClC,EAEawB,EAAgC,CAC3C,KAAM,CACJ,GAAI,wBACJ,YAAa,SACf,EACA,OAAQV,EACR,KAAMd,EAAa,uBAAuB,CAC5C",
-  "names": ["meta", "fullscreenLayout", "bl_dialog_stories_default", "dialogOpener", "dialogId", "dialog", "BasicTemplate", "args", "x", "l", "o", "e", "_a", "FullWidthActionsTemplate", "TemplateWithStickyFooter", "SizingTemplate", "TabGroupTemplate", "CaptionLineClampTemplate", "BasicUsage", "DialogWithStickyFooter", "DialogSizing", "DialogWithFocusedAction", "DialogWithFocusedInput", "DialogWithFullWidthAction", "DialogWithFullWidthActions", "DialogWithTabGroup", "CriticalDialog", "CaptionLineClampDialog"]
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/web-components\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { fullscreenLayout } from \"../../utilities/chromatic-decorators\";\nimport type BlDialog from \"./bl-dialog\";\n\nconst meta: Meta = {\n  title: \"Components/Dialog\",\n  component: \"bl-dialog\",\n  parameters: {\n    chromatic: {\n      viewports: [1000]\n    },\n    controls: {\n      exclude: [\"id\"],\n    }\n  },\n  decorators: [\n    fullscreenLayout,\n  ],\n  argTypes: {\n    open: {\n      control: \"boolean\",\n    },\n    polyfilled: {\n      control: \"boolean\",\n    },\n    caption: {\n      control: \"text\"\n    },\n    content: {\n      control: \"text\"\n    }\n  }\n};\n\nexport default meta;\n\ninterface DialogArgs {\n  id: string;\n  className?: string;\n  caption?: string;\n  open?: boolean;\n  polyfilled?: boolean;\n  content?: string;\n  primaryAction?: string;\n  secondaryAction?: string;\n  tertiaryAction?: string;\n  focusPrimary?: boolean;\n  focusSecondary?: boolean;\n  focusTertiary?: boolean;\n  critical?: boolean;\n  closeAction?: string;\n}\n\ntype Story = StoryObj<DialogArgs>;\n\nconst dialogOpener = (dialogId: string) => async () => {\n  const dialog = document.getElementById(dialogId) as BlDialog;\n\n  dialog.open = true;\n};\n\nconst BasicTemplate = (args: DialogArgs) => html`\n<bl-button @bl-click=\"${dialogOpener(args.id)}\" variant=\"secondary\">Open Dialog</bl-button>\n\n<bl-dialog\n  id=${args.id}\n  class=\"${ifDefined(args.className)}\"\n  caption=\"${ifDefined(args.caption)}\"\n  ?open=\"${args.open}\"\n  ?polyfilled=\"${args.polyfilled}\"\n  ?critical=\"${args.critical}\">\n    ${\n      unsafeHTML(args.content)\n    }${\n      args.primaryAction ? html`\n\n  <bl-button slot=\"primary-action\" variant=\"primary\" ?autofocus=${args.focusPrimary} size=\"large\">${args.primaryAction}</bl-button>` : \"\"}${\n      args.secondaryAction ? html`\n  <bl-button slot=\"secondary-action\" variant=\"secondary\" ?autofocus=${args.focusSecondary} size=\"large\">${args.secondaryAction}</bl-button>` : \"\"}${\n      args.tertiaryAction ? html`\n  <bl-button slot=\"tertiary-action\" variant=\"tertiary\" ?autofocus=${args.focusTertiary} size=\"large\">${args.tertiaryAction}</bl-button>` : \"\"}\n  ${\n    args.closeAction ? html`\n    <bl-button slot=\"primary-action\" variant=\"primary\" ?autofocus=${args.focusSecondary} size=\"large\" @click=${(e: CustomEvent) => (e.target as HTMLElement).closest(\"bl-dialog\")?.toggleAttribute(\"open\")}>${args.closeAction}</bl-button>` : \"\"}\n</bl-dialog>\n`;\n\nconst FullWidthActionsTemplate = (args: DialogArgs) => html`\n<style>\n  bl-dialog.full-width-actions bl-button {\n    --bl-button-display: block;\n    flex: 1;\n  }\n</style>\n\n${BasicTemplate({...args, className: \"full-width-actions\"})}\n`;\n\nconst TemplateWithStickyFooter = (args: DialogArgs) => html`\n<style>\n  bl-dialog.limited-width .content {\n    max-width: 500px;\n    max-height: 500px;\n  }\n</style>\n\n${BasicTemplate({...args, className: \"limited-width\", content: `<div class=\"content\">\n  <bl-alert icon>Please read all terms and conditions.</bl-alert>\n  <h4>Lorem ipsum dolor sit amet</h4>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n   Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <ul>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n  </ul>\n  <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.\n  Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form\n  accompanied by English versions from the 1914 translation by H. Rackham.</p>\n  <h4>Quis autem vel eum iure reprehenderit qui</h4>\n  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry\n  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scramble\n  it to make a type specimen book.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <ul>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n  </ul>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n</div>`\n})}`;\n\nconst SizingTemplate = (args: DialogArgs) => html`\n<style>\n  #dl-sizing {\n    --bl-dialog-width: 31rem;\n  }\n\n  .my-dialog-content {\n    height:200px;\n    margin:0;\n    padding:0;\n  }\n</style>\n\n${BasicTemplate({...args, content: `<p class=\"my-dialog-content\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,\nwhen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,\nremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing\nsoftware like Aldus PageMaker including versions of Lorem Ipsum. Let us help determine location. This means sending anonymous location data to us.\nContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,\na Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites\nof the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\"\n(The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,\n\"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.</p>` })}\n`;\n\nconst TabGroupTemplate = (args: DialogArgs) => html`\n<style>\n  .tab-dialog-content {\n    height:50px;\n    margin-top: 20px;\n  }\n</style>\n\n${BasicTemplate({...args, content: `\n<bl-tab-group>\n  <bl-tab name=\"test-1\" slot=\"tabs\" caption=\"Caption\">Tab 1</bl-tab>\n  <bl-tab name=\"test-2\" slot=\"tabs\">Tab 2</bl-tab>\n  <bl-tab name=\"test-3\" slot=\"tabs\" disabled caption=\"Caption\">Tab 3</bl-tab>\n</bl-tab-group>\n<p class=\"tab-dialog-content\">\nNormal dialog contents has default padding in bl-dialog component. But bl-tab-group has full width in bl-dialog component.\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,\nwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.\n</p>\n\n` })}\n`;\n\nconst CaptionLineClampTemplate = (args: DialogArgs) => html`\n<style>\n  #dl-caption-line-clamp {\n    --bl-dialog-width: 31rem;\n    --bl-dialog-caption-line-clamp: 2;\n  }\n</style>\n\n${BasicTemplate({...args, caption: \"I am a very long text I am a very long text I am a very long text\", content: \"You can adjust the line clamp\" })}\n`;\n\nconst RTLTemplate = (args: DialogArgs) => html`\n  <div style=\"display: flex; gap: 32px;\">\n    <!-- LTR Example -->\n    <div>\n      <bl-button @bl-click=\"${dialogOpener(`${args.id}-ltr`)}\" variant=\"secondary\">Open LTR Dialog</bl-button>\n      <bl-dialog\n        id=\"${args.id}-ltr\"\n        caption=\"Delete Confirmation\"\n        ?critical=\"${args.critical}\">\n        <p>Are you sure you want to delete this file? This action cannot be undone.</p>\n        <bl-alert icon variant=\"warning\">All associated data will be permanently deleted.</bl-alert>\n        <bl-button slot=\"primary-action\" variant=\"primary\" size=\"large\">Delete</bl-button>\n        <bl-button slot=\"secondary-action\" variant=\"secondary\" size=\"large\">Cancel</bl-button>\n      </bl-dialog>\n    </div>\n\n    <!-- RTL Example -->\n    <div dir=\"rtl\">\n      <bl-button @bl-click=\"${dialogOpener(`${args.id}-rtl`)}\" variant=\"secondary\">Open RTL Dialog</bl-button>\n      <bl-dialog\n        id=\"${args.id}-rtl\"\n        caption=\"\u062A\u0623\u0643\u064A\u062F \u0627\u0644\u062D\u0630\u0641\"\n        ?critical=\"${args.critical}\">\n        <p>\u0647\u0644 \u0623\u0646\u062A \u0645\u062A\u0623\u0643\u062F \u0623\u0646\u0643 \u062A\u0631\u064A\u062F \u062D\u0630\u0641 \u0647\u0630\u0627 \u0627\u0644\u0645\u0644\u0641\u061F \u0644\u0627 \u064A\u0645\u0643\u0646 \u0627\u0644\u062A\u0631\u0627\u062C\u0639 \u0639\u0646 \u0647\u0630\u0627 \u0627\u0644\u0625\u062C\u0631\u0627\u0621.</p>\n        <bl-alert icon variant=\"warning\">\u0633\u064A\u062A\u0645 \u062D\u0630\u0641 \u062C\u0645\u064A\u0639 \u0627\u0644\u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0645\u0631\u062A\u0628\u0637\u0629 \u0628\u0634\u0643\u0644 \u062F\u0627\u0626\u0645.</bl-alert>\n        <bl-button slot=\"primary-action\" variant=\"primary\" size=\"large\">\u062D\u0630\u0641</bl-button>\n        <bl-button slot=\"secondary-action\" variant=\"secondary\" size=\"large\">\u0625\u0644\u063A\u0627\u0621</bl-button>\n      </bl-dialog>\n    </div>\n  </div>\n`;\n\nexport const BasicUsage: Story = {\n  args: {\n    id: \"dl-basic\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-basic\")\n};\n\nexport const DialogWithStickyFooter: Story = {\n  args: {\n    id: \"dl-sticky-footer\",\n    caption: \"Terms And Conditions\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n  },\n  render: TemplateWithStickyFooter,\n  play: dialogOpener(\"dl-sticky-footer\")\n};\n\nexport const DialogSizing: Story = {\n  args: {\n    id: \"dl-sizing\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n    caption: \"I am a long text but I will not block the width.\"\n  },\n  render: SizingTemplate,\n  play: dialogOpener(\"dl-sizing\")\n};\n\nexport const DialogWithFocusedAction: Story = {\n  args: {\n    id: \"dl-focused-action\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    focusSecondary: true,\n    tertiaryAction: \"Cancel\"\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-focused-action\")\n};\n\nexport const DialogWithFocusedInput: Story = {\n  args: {\n    id: \"dl-focused-input\",\n    caption: \"Name your file\",\n    content: '<p>Please provide a name for your file</p><bl-input placeholder=\"filename.pdf\" autofocus></bl-input>',\n    primaryAction: \"OK\",\n    tertiaryAction: \"Cancel\"\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-focused-input\")\n};\n\nexport const DialogWithFullWidthAction: Story = {\n  args: {\n    id: \"dl-full-width-action\",\n    caption: \"Action completed\",\n    content: \"<p>Your process is done!</p>\",\n    primaryAction: \"OK\"\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-full-width-action\")\n};\n\n\nexport const DialogWithFullWidthActions: Story = {\n  args: {\n    id: \"dl-full-width-actions\",\n    caption: \"Are you sure to delete?\",\n    content: \"<p>Do you want to really delete the file?</p>\",\n    primaryAction: \"Delete\",\n    secondaryAction: \"Cancel\"\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-full-width-actions\")\n};\n\nexport const DialogWithTabGroup: Story = {\n  args: {\n    id: \"dl-tab-group\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n  },\n  render: TabGroupTemplate,\n  play: dialogOpener(\"dl-tab-group\")\n};\n\nexport const CriticalDialog: Story = {\n  args: {\n    id: \"dl-critical\",\n    caption: \"Critical Action Required\",\n    content: \"<p>This action is irreversible. Please confirm to proceed.</p>\",\n    closeAction: \"Confirm\",\n    critical: true,\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-critical\")\n};\n\nexport const CaptionLineClampDialog: Story = {\n  args: {\n    id: \"dl-caption-line-clamp\",\n    closeAction: \"Confirm\"\n  },\n  render: CaptionLineClampTemplate,\n  play: dialogOpener(\"dl-caption-line-clamp\")\n};\n\nexport const RTLSupport: Story = {\n  args: {\n    id: \"dl-rtl\",\n  },\n  render: RTLTemplate,\n  parameters: {\n    docs: {\n      description: {\n        story: 'The dialog component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir=\"rtl\"` attribute on the parent element.'\n      }\n    }\n  }\n};\n"],
+  "mappings": "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",
+  "names": ["meta", "fullscreenLayout", "bl_dialog_stories_default", "dialogOpener", "dialogId", "dialog", "BasicTemplate", "args", "x", "l", "o", "e", "_a", "FullWidthActionsTemplate", "TemplateWithStickyFooter", "SizingTemplate", "TabGroupTemplate", "CaptionLineClampTemplate", "RTLTemplate", "BasicUsage", "DialogWithStickyFooter", "DialogSizing", "DialogWithFocusedAction", "DialogWithFocusedInput", "DialogWithFullWidthAction", "DialogWithFullWidthActions", "DialogWithTabGroup", "CriticalDialog", "CaptionLineClampDialog", "RTLSupport"]
 }

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-FCEMOH4J.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-MWG4TBH7.js";import"../../chunk-HZV6GUII.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-drawer.js.map

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

@@ -1,2 +1,2 @@
-import{e as a,f as b}from"../../chunk-ILK55FB6.js";import"../../chunk-73RGV4UX.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as blDropdownTag,b as default};
+import{e as a,f as b}from"../../chunk-NXVLNG4L.js";import"../../chunk-HYBPEELZ.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-HZV6GUII.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as blDropdownTag,b as default};
 //# sourceMappingURL=bl-dropdown.js.map

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

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-73RGV4UX.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blDropdownGroupTag,b as default};
+import{a,b}from"../../../chunk-HYBPEELZ.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blDropdownGroupTag,b as default};
 //# sourceMappingURL=bl-dropdown-group.js.map

package/dist/components/dropdown/item/bl-dropdown-item.js

@@ -1,2 +1,2 @@
-import{c as a,d as b}from"../../../chunk-ILK55FB6.js";import"../../../chunk-73RGV4UX.js";import"../../../chunk-IPYZIIRV.js";import"../../../chunk-VU6LRFZR.js";import"../../../chunk-IGNJQVQF.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blDropdownItemTag,b as default};
+import{c as a,d as b}from"../../../chunk-NXVLNG4L.js";import"../../../chunk-HYBPEELZ.js";import"../../../chunk-IPYZIIRV.js";import"../../../chunk-HZV6GUII.js";import"../../../chunk-ZE7GYACV.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blDropdownItemTag,b as default};
 //# sourceMappingURL=bl-dropdown-item.js.map

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-757CMI4A.js";import"../../chunk-23PSWIUF.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-IDRA37BX.js";import"../../chunk-23PSWIUF.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-HZV6GUII.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-input.js.map

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

@@ -1,2 +1,2 @@
-import{a,b}from"../../chunk-75V3FKJS.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-DINNT5P2.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as SWIPE_UP_THRESHOLD,b as default};
+import{a,b}from"../../chunk-SBCJY5IU.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-DINNT5P2.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as SWIPE_UP_THRESHOLD,b as default};
 //# sourceMappingURL=bl-notification.js.map

package/dist/components/notification/bl-notification.stories.d.ts

@@ -15,4 +15,5 @@ export declare const SecondaryActionExample: Story;
 export declare const ActionsRemoveExample: Story;
 export declare const PermanentExample: Story;
 export declare const VariantsExample: Story;
+export declare const RTLExample: Story;
 //# sourceMappingURL=bl-notification.stories.d.ts.map

package/dist/components/notification/bl-notification.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bl-notification.stories.d.ts","sourceRoot":"","sources":["../../../src/components/notification/bl-notification.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,mBAAmB,CAAC;AAEzE,QAAA,MAAM,IAAI,EAAE,IAqEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAYpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,iBAAiB,CAAC;AAEtB,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AA4B/C,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAwB3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAsChC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAuBlC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA6BpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAgDlC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8F7B,CAAC"}
+{"version":3,"file":"bl-notification.stories.d.ts","sourceRoot":"","sources":["../../../src/components/notification/bl-notification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,KAAK,EAAgB,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEzE,QAAA,MAAM,IAAI,EAAE,IAqEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAYpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,iBAAiB,CAAC;AAEtB,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AA4B/C,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAwB3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAsChC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAuBlC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA6BpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAgDlC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8F7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAqIxB,CAAC"}