@trendyol/baklava 2.1.1-beta.1 → 2.1.1-beta.3

package/dist/baklava.js

@@ -1,2 +1,2 @@
-import{b as S}from"./chunk-2XHCYPYW.js";import{a as b}from"./chunk-TQBAGFBF.js";import{a as I}from"./chunk-BZJZ5L6E.js";import{a as P}from"./chunk-6FK4ZU5B.js";import{a as g}from"./chunk-TC7F23WR.js";import{a as w}from"./chunk-II3XNLPM.js";import{b as T,d as G}from"./chunk-GUUZ6VA7.js";import{b as D}from"./chunk-FSYC7NDP.js";import{a as B}from"./chunk-YV4QD44W.js";import{a as m}from"./chunk-V2JRNKNE.js";import{a as s}from"./chunk-WOA7OETR.js";import{a as x}from"./chunk-R7DGXZ46.js";import"./chunk-HGGOQO7A.js";import"./chunk-3B64VOWB.js";import{a as h}from"./chunk-BQULLIU3.js";import"./chunk-ANYJUR6Q.js";import{a as n}from"./chunk-6SBG3DCG.js";import{c,f as i}from"./chunk-PPLGBF5T.js";import{a as r}from"./chunk-UNA6X23I.js";import{a}from"./chunk-U5KSVPW3.js";import{b as f,e as p}from"./chunk-SOBFXTEO.js";import"./chunk-EPJ347EQ.js";import"./chunk-DJOD4BTL.js";import{a as d}from"./chunk-QCPUN6WO.js";import{a as u}from"./chunk-U2M2YTSP.js";import{b as l}from"./chunk-I2NSXGH6.js";import"./chunk-OLPYXE2P.js";import"./chunk-KPAWUBRO.js";import{a as o,b as e,c as t}from"./chunk-3SON7X7S.js";import"./chunk-RLMJN536.js";import"./chunk-23UFIOHV.js";import"./chunk-57PTZNIL.js";import"./chunk-NZ3RGSR6.js";export{r as BlAlert,a as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,G as BlDropdown,D as BlDropdownGroup,T as BlDropdownItem,t as BlIcon,x as BlInput,B as BlPagination,h as BlPopover,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,s as BlSelectOption,S as BlSwitch,I as BlTab,b as BlTabGroup,P as BlTabPanel,g as BlTextarea,w as BlTooltip,e as getIconPath,o as setIconPath};
+import{b as S}from"./chunk-2XHCYPYW.js";import{a as b}from"./chunk-TQBAGFBF.js";import{a as I}from"./chunk-BZJZ5L6E.js";import{a as P}from"./chunk-6FK4ZU5B.js";import{a as g}from"./chunk-TC7F23WR.js";import{a as w}from"./chunk-II3XNLPM.js";import{b as T,d as G}from"./chunk-GUUZ6VA7.js";import{b as D}from"./chunk-FSYC7NDP.js";import{a as B}from"./chunk-YV4QD44W.js";import{a as m}from"./chunk-V2JRNKNE.js";import{a as s}from"./chunk-WOA7OETR.js";import{a as x}from"./chunk-R7DGXZ46.js";import"./chunk-HGGOQO7A.js";import"./chunk-3B64VOWB.js";import{a as h}from"./chunk-BQULLIU3.js";import"./chunk-ANYJUR6Q.js";import{a as n}from"./chunk-6SBG3DCG.js";import{c,f as i}from"./chunk-LTTJ4GJL.js";import{a as r}from"./chunk-UNA6X23I.js";import{a}from"./chunk-U5KSVPW3.js";import{b as f,e as p}from"./chunk-SOBFXTEO.js";import"./chunk-EPJ347EQ.js";import"./chunk-DJOD4BTL.js";import{a as d}from"./chunk-HJTOJXMY.js";import{a as u}from"./chunk-U2M2YTSP.js";import{b as l}from"./chunk-I2NSXGH6.js";import"./chunk-OLPYXE2P.js";import"./chunk-KPAWUBRO.js";import{a as o,b as e,c as t}from"./chunk-3SON7X7S.js";import"./chunk-RLMJN536.js";import"./chunk-23UFIOHV.js";import"./chunk-57PTZNIL.js";import"./chunk-NZ3RGSR6.js";export{r as BlAlert,a as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,G as BlDropdown,D as BlDropdownGroup,T as BlDropdownItem,t as BlIcon,x as BlInput,B as BlPagination,h as BlPopover,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,s as BlSelectOption,S as BlSwitch,I as BlTab,b as BlTabGroup,P as BlTabPanel,g as BlTextarea,w as BlTooltip,e as getIconPath,o as setIconPath};
 //# sourceMappingURL=baklava.js.map

package/dist/chunk-HJTOJXMY.js

@@ -0,0 +1,33 @@
+import{a as c}from"./chunk-23UFIOHV.js";import{a as h,b as l,f as v,g,h as d,j as n}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var b=h`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl) var(--bl-size-xl) var(--bl-size-m) var(--bl-size-xl);overflow:auto}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`,m=b;var t=class extends v{constructor(){super(...arguments);this.open=!1;this.clickOutsideHandler=e=>{e.composedPath().includes(this.container)||this.closeDialog()};this.onKeydown=e=>{e.code==="Escape"&&this.open&&(e.preventDefault(),this.closeDialog())}}static get styles(){return[m]}updated(e){e.has("open")&&this.toggleDialogHandler()}get hasHtmlDialogSupport(){return!!window.HTMLDialogElement}get _hasFooter(){return[...this.childNodes].some(e=>e.nodeName==="BL-BUTTON")}toggleDialogHandler(){var e,a,i,r;this.open?((a=(e=this.dialog)==null?void 0:e.showModal)==null||a.call(e),this.onOpen({isOpen:!0}),document.body.style.overflow="hidden",this.toggleFooterShadow(),window==null||window.addEventListener("keydown",s=>this.onKeydown(s)),window==null||window.addEventListener("resize",()=>this.toggleFooterShadow())):((r=(i=this.dialog)==null?void 0:i.close)==null||r.call(i),this.onClose({isOpen:!1}),document.body.style.overflow="auto",window==null||window.removeEventListener("keydown",this.onKeydown),window==null||window.removeEventListener("resize",this.toggleFooterShadow))}closeDialog(){this.open=!1}toggleFooterShadow(){var e,a,i,r,s,p;((e=this.content)==null?void 0:e.scrollHeight)>((a=this.content)==null?void 0:a.offsetHeight)?(r=(i=this.footer)==null?void 0:i.classList)==null||r.add("shadow"):(p=(s=this.footer)==null?void 0:s.classList)==null||p.remove("shadow")}renderFooter(){return this._hasFooter?l`<footer>
+          <slot name="primary-action"></slot>
+          <slot name="secondary-action"></slot>
+          <slot name="tertiary-action"></slot>
+        </footer>`:""}renderContainer(){let e=this.caption?l`<h2 id="dialog-caption">${this.caption}</h2>`:"";return l` <div class="container">
+      <header>
+        ${e}
+        <bl-button
+          @click="${this.closeDialog}"
+          icon="close"
+          variant="tertiary"
+          kind="neutral"
+        ></bl-button>
+      </header>
+      <section class="content"><slot /></section>
+      ${this.renderFooter()}
+    </div>`}render(){return this.hasHtmlDialogSupport?l`
+          <dialog
+            class="dialog"
+            aria-labelledby="dialog-caption"
+            @click=${this.clickOutsideHandler}
+          >
+            ${this.renderContainer()}
+          </dialog>
+        `:l`<div
+          class="dialog-polyfill"
+          role="dialog"
+          aria-labelledby="dialog-caption"
+          @click=${this.clickOutsideHandler}
+        >
+          ${this.renderContainer()}
+        </div>`}};o([d({type:Boolean,reflect:!0})],t.prototype,"open",2),o([d({type:String})],t.prototype,"caption",2),o([n(".dialog")],t.prototype,"dialog",2),o([n("footer")],t.prototype,"footer",2),o([n(".container")],t.prototype,"container",2),o([n(".content")],t.prototype,"content",2),o([c("bl-dialog-open")],t.prototype,"onOpen",2),o([c("bl-dialog-close")],t.prototype,"onClose",2),t=o([g("bl-dialog")],t);export{t as a};
+//# sourceMappingURL=chunk-HJTOJXMY.js.map

package/dist/chunk-HJTOJXMY.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/dialog/bl-dialog.css", "../src/components/dialog/bl-dialog.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl) var(--bl-size-xl) var(--bl-size-m) var(--bl-size-xl);overflow:auto}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`;\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 '../button/bl-button';\nimport style from './bl-dialog.css';\n\ntype DialogElement = {\n  showModal: () => void;\n  close: () => void;\n};\n\n/**\n * @tag bl-dialog\n * @summary Baklava Dialog component\n */\n@customElement('bl-dialog')\nexport default class BlDialog extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets dialog open-close status\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Sets the dialog title\n   */\n  @property({ type: String })\n  caption?: string;\n\n  @query('.dialog')\n  private dialog: HTMLDialogElement & DialogElement;\n\n  @query('footer')\n  private footer: HTMLElement;\n\n  @query('.container')\n  private container: HTMLElement;\n\n  @query('.content')\n  private content: HTMLElement;\n\n  /**\n   * Fires when the dialog is opened\n   */\n  @event('bl-dialog-open') private onOpen: EventDispatcher<object>;\n\n  /**\n   * Fires when the dialog is closed\n   */\n  @event('bl-dialog-close') private onClose: EventDispatcher<object>;\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('open')) {\n      this.toggleDialogHandler();\n    }\n  }\n\n  private get hasHtmlDialogSupport() {\n    return !!window.HTMLDialogElement;\n  }\n\n  private get _hasFooter() {\n    return [...this.childNodes].some(node => node.nodeName === 'BL-BUTTON');\n  }\n\n  private toggleDialogHandler() {\n    if (this.open) {\n      this.dialog?.showModal?.();\n      this.onOpen({ isOpen: true });\n      document.body.style.overflow = 'hidden';\n      this.toggleFooterShadow();\n      window?.addEventListener('keydown', event => this.onKeydown(event));\n      window?.addEventListener('resize', () => this.toggleFooterShadow());\n    } else {\n      this.dialog?.close?.();\n      this.onClose({ isOpen: false });\n      document.body.style.overflow = 'auto';\n      window?.removeEventListener('keydown', this.onKeydown);\n      window?.removeEventListener('resize', this.toggleFooterShadow);\n    }\n  }\n\n  private closeDialog() {\n    this.open = false;\n  }\n\n  private clickOutsideHandler = (event: MouseEvent) => {\n    const eventPath = event.composedPath() as HTMLElement[];\n\n    if (!eventPath.includes(this.container)) {\n      this.closeDialog();\n    }\n  };\n\n  private onKeydown = (event: KeyboardEvent): void => {\n    if (event.code === 'Escape' && this.open) {\n      event.preventDefault();\n      this.closeDialog();\n    }\n  };\n\n  private toggleFooterShadow() {\n    if (this.content?.scrollHeight > this.content?.offsetHeight) {\n      this.footer?.classList?.add('shadow');\n    } else {\n      this.footer?.classList?.remove('shadow');\n    }\n  }\n\n  private renderFooter() {\n    return this._hasFooter\n      ? html`<footer>\n          <slot name=\"primary-action\"></slot>\n          <slot name=\"secondary-action\"></slot>\n          <slot name=\"tertiary-action\"></slot>\n        </footer>`\n      : '';\n  }\n\n  private renderContainer() {\n    const title = this.caption ? html`<h2 id=\"dialog-caption\">${this.caption}</h2>` : '';\n\n    return html` <div class=\"container\">\n      <header>\n        ${title}\n        <bl-button\n          @click=\"${this.closeDialog}\"\n          icon=\"close\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n        ></bl-button>\n      </header>\n      <section class=\"content\"><slot /></section>\n      ${this.renderFooter()}\n    </div>`;\n  }\n\n  render(): TemplateResult {\n    return this.hasHtmlDialogSupport\n      ? html`\n          <dialog\n            class=\"dialog\"\n            aria-labelledby=\"dialog-caption\"\n            @click=${this.clickOutsideHandler}\n          >\n            ${this.renderContainer()}\n          </dialog>\n        `\n      : html`<div\n          class=\"dialog-polyfill\"\n          role=\"dialog\"\n          aria-labelledby=\"dialog-caption\"\n          @click=${this.clickOutsideHandler}\n        >\n          ${this.renderContainer()}\n        </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-dialog': BlDialog;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "i", "bl_dialog_default", "BlDialog", "s", "event", "bl_dialog_default", "changedProperties", "node", "_a", "_b", "_c", "_d", "_e", "_f", "y", "title", "__decorateClass", "e", "i"]
+}

package/dist/{chunk-PPLGBF5T.js → chunk-LTTJ4GJL.js}

@@ -1,9 +1,9 @@
-import{a as f}from"./chunk-DJOD4BTL.js";import{a as m}from"./chunk-OLPYXE2P.js";import{a as o}from"./chunk-23UFIOHV.js";import{a as s,b as n,f as d,g as c,h as i,i as u,j as v}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var y=s`:host{display:flex;flex-direction:row}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;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`,g=y;var p="bl-radio-group",b="bl-radio-change",r=class extends f(d){constructor(){super(...arguments);this.value="";this.required=!1;this.focusedOptionIndex=0}static get styles(){return[g]}get options(){return[].slice.call(this.querySelectorAll(h))}get availableOptions(){return this.options.filter(e=>!e.disabled)}updated(e){e.has("value")&&(this.setValue(this.value),this.onChange(this.value))}handleOptionChecked(e){let a=e.target;this.setValue(a.value),this.onChange(a.value)}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--;else if([" "].includes(e.key)){this.availableOptions[this.focusedOptionIndex].select();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.availableOptions.length-1)),this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}connectedCallback(){super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown)}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}render(){return n`<fieldset role="radiogroup" aria-labelledby="label" aria-required=${this.required}>
-      <legend>${this.label}</legend>
+import{a as f}from"./chunk-DJOD4BTL.js";import{a as m}from"./chunk-OLPYXE2P.js";import{a as o}from"./chunk-23UFIOHV.js";import{a as s,b as n,f as d,g as c,h as i,i as u,j as v}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var y=s`:host{display:flex;flex-direction:row}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;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`,g=y;var b="bl-radio-group",p="bl-radio-change",r=class extends f(d){constructor(){super(...arguments);this.value="";this.required=!1;this.focusedOptionIndex=0}static get styles(){return[g]}get options(){return[].slice.call(this.querySelectorAll(h))}get availableOptions(){return this.options.filter(e=>!e.disabled)}updated(e){e.has("value")&&(this.setValue(this.value),this.onChange(this.value))}handleOptionChecked(e){let a=e.target;this.setValue(a.value),this.onChange(a.value)}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--;else if([" "].includes(e.key)){this.availableOptions[this.focusedOptionIndex].select();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.availableOptions.length-1)),this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}connectedCallback(){super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown)}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}render(){return n`<fieldset role="radiogroup" aria-labelledby="label" aria-required=${this.required}>
+      <legend id="label">${this.label}</legend>
       <div class="options" @bl-checked=${this.handleOptionChecked}>
         <slot></slot>
       </div>
-    </fieldset>`}};t([i({type:String})],r.prototype,"label",2),t([i()],r.prototype,"value",2),t([i({type:Boolean,reflect:!0})],r.prototype,"required",2),t([o("bl-radio-change")],r.prototype,"onChange",2),r=t([c(p)],r);var C=s`:host{display:inline-block;cursor:pointer;outline:none}.wrapper{--size:var(--bl-size-m);outline:none}#label{display:flex;font:var(--bl-font-title-3-regular);height:var(--size);line-height:normal;vertical-align:middle;margin-block:0;color:var(--bl-color-neutral-darker)}#label::before{content:'';display:inline-block;box-sizing:border-box;width:var(--size);height:var(--size);background-color:white;border-radius:var(--bl-border-radius-circle);border:solid 1px var(--bl-color-neutral-lighter);margin-right:var(--bl-size-2xs);vertical-align:middle}.selected #label::before{border-width:var(--bl-size-3xs);border-color:var(--bl-color-primary)}:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,.selected #label,:host(:hover) #label,.selected #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 white,0 0 0 3px var(--bl-color-primary)}`,x=C;var h="bl-radio",W="bl-checked",l=class extends d{constructor(){super(...arguments);this.disabled=!1;this.selected=!1;this.handleFieldValueChange=e=>{let a=e.detail;this.selected=a===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(b,this.handleFieldValueChange)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.field)==null||e.removeEventListener(b,this.handleFieldValueChange)}render(){let e=m({wrapper:!0,selected:this.selected});return n`<div
+    </fieldset>`}};t([i({type:String})],r.prototype,"label",2),t([i()],r.prototype,"value",2),t([i({type:Boolean,reflect:!0})],r.prototype,"required",2),t([o("bl-radio-change")],r.prototype,"onChange",2),r=t([c(b)],r);var C=s`:host{display:inline-block;cursor:pointer;outline:none}.wrapper{--size:var(--bl-size-m);outline:none}#label{display:flex;font:var(--bl-font-title-3-regular);height:var(--size);line-height:normal;vertical-align:middle;margin-block:0;color:var(--bl-color-neutral-darker)}#label::before{content:'';display:inline-block;box-sizing:border-box;width:var(--size);height:var(--size);background-color:white;border-radius:var(--bl-border-radius-circle);border:solid 1px var(--bl-color-neutral-lighter);margin-right:var(--bl-size-2xs);vertical-align:middle}.selected #label::before{border-width:var(--bl-size-3xs);border-color:var(--bl-color-primary)}:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,.selected #label,:host(:hover) #label,.selected #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 white,0 0 0 3px var(--bl-color-primary)}`,x=C;var h="bl-radio",W="bl-checked",l=class extends d{constructor(){super(...arguments);this.disabled=!1;this.selected=!1;this.handleFieldValueChange=e=>{let a=e.detail;this.selected=a===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(b),this.field||console.warn("bl-radio is designed to be used inside a bl-radio-group",this),(e=this.field)==null||e.addEventListener(p,this.handleFieldValueChange)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.field)==null||e.removeEventListener(p,this.handleFieldValueChange)}render(){let e=m({wrapper:!0,selected:this.selected});return n`<div
       class=${e}
       role="radio"
       aria-labelledby="label"
@@ -13,5 +13,5 @@ import{a as f}from"./chunk-DJOD4BTL.js";import{a as m}from"./chunk-OLPYXE2P.js";
       @click=${this.select}
     >
       <p id="label"><slot></slot></p>
-    </div>`}};t([i()],l.prototype,"name",2),t([i()],l.prototype,"value",2),t([i({type:Boolean,reflect:!0})],l.prototype,"disabled",2),t([u()],l.prototype,"selected",2),t([o("bl-checked")],l.prototype,"onChecked",2),t([o("bl-focus")],l.prototype,"onFocus",2),t([o("bl-blur")],l.prototype,"onBlur",2),t([v("[role=radio]")],l.prototype,"radioElement",2),l=t([c(h)],l);export{h as a,W as b,l as c,p as d,b as e,r as f};
-//# sourceMappingURL=chunk-PPLGBF5T.js.map
+    </div>`}};t([i()],l.prototype,"name",2),t([i()],l.prototype,"value",2),t([i({type:Boolean,reflect:!0})],l.prototype,"disabled",2),t([u()],l.prototype,"selected",2),t([o("bl-checked")],l.prototype,"onChecked",2),t([o("bl-focus")],l.prototype,"onFocus",2),t([o("bl-blur")],l.prototype,"onBlur",2),t([v("[role=radio]")],l.prototype,"radioElement",2),l=t([c(h)],l);export{h as a,W as b,l as c,b as d,p as e,r as f};
+//# sourceMappingURL=chunk-LTTJ4GJL.js.map

package/dist/chunk-LTTJ4GJL.js.map

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

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-QCPUN6WO.js";import"../../chunk-I2NSXGH6.js";import"../../chunk-OLPYXE2P.js";import"../../chunk-KPAWUBRO.js";import"../../chunk-3SON7X7S.js";import"../../chunk-RLMJN536.js";import"../../chunk-23UFIOHV.js";import"../../chunk-57PTZNIL.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
+import{a}from"../../chunk-HJTOJXMY.js";import"../../chunk-I2NSXGH6.js";import"../../chunk-OLPYXE2P.js";import"../../chunk-KPAWUBRO.js";import"../../chunk-3SON7X7S.js";import"../../chunk-RLMJN536.js";import"../../chunk-23UFIOHV.js";import"../../chunk-57PTZNIL.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
 //# sourceMappingURL=bl-dialog.js.map

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

@@ -1,2 +1,2 @@
-import{d as a,e as b,f as c}from"../../chunk-PPLGBF5T.js";import"../../chunk-DJOD4BTL.js";import"../../chunk-OLPYXE2P.js";import"../../chunk-RLMJN536.js";import"../../chunk-23UFIOHV.js";import"../../chunk-57PTZNIL.js";import"../../chunk-NZ3RGSR6.js";export{b as blChangeEventName,a as blRadioGroupTag,c as default};
+import{d as a,e as b,f as c}from"../../chunk-LTTJ4GJL.js";import"../../chunk-DJOD4BTL.js";import"../../chunk-OLPYXE2P.js";import"../../chunk-RLMJN536.js";import"../../chunk-23UFIOHV.js";import"../../chunk-57PTZNIL.js";import"../../chunk-NZ3RGSR6.js";export{b as blChangeEventName,a as blRadioGroupTag,c as default};
 //# sourceMappingURL=bl-radio-group.js.map

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

@@ -1,2 +1,2 @@
-import{a,b,c}from"../../../chunk-PPLGBF5T.js";import"../../../chunk-DJOD4BTL.js";import"../../../chunk-OLPYXE2P.js";import"../../../chunk-RLMJN536.js";import"../../../chunk-23UFIOHV.js";import"../../../chunk-57PTZNIL.js";import"../../../chunk-NZ3RGSR6.js";export{b as blCheckedEventName,a as blRadioTag,c as default};
+import{a,b,c}from"../../../chunk-LTTJ4GJL.js";import"../../../chunk-DJOD4BTL.js";import"../../../chunk-OLPYXE2P.js";import"../../../chunk-RLMJN536.js";import"../../../chunk-23UFIOHV.js";import"../../../chunk-57PTZNIL.js";import"../../../chunk-NZ3RGSR6.js";export{b as blCheckedEventName,a as blRadioTag,c as default};
 //# sourceMappingURL=bl-radio.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@trendyol/baklava",
   "type": "module",
-  "version": "2.1.1-beta.1",
+  "version": "2.1.1-beta.3",
   "description": "Trendyol Baklava Design System",
   "main": "dist/baklava.js",
   "module": "dist/baklava.js",
@@ -40,7 +40,6 @@
     "format": "npm-run-all -s format:*",
     "format:code": "eslint --fix ./src && prettier --write ./src",
     "fix": "npm run format && npm run lint",
-    "chromatic": "npx chromatic --only-changed --allow-console-errors",
     "ci": "rm -rf node_modules && npm install --frozen-lockfile",
     "clean": "npm-run-all -s clean:*",
     "clean:dist": "rimraf dist",

package/dist/chunk-PPLGBF5T.js.map

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

package/dist/chunk-QCPUN6WO.js

@@ -1,33 +0,0 @@
-import{a as c}from"./chunk-23UFIOHV.js";import{a as h,b as l,f as v,g,h as d,j as n}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var b=h`.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl) var(--bl-size-xl) var(--bl-size-m) var(--bl-size-xl);overflow:auto}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`,m=b;var t=class extends v{constructor(){super(...arguments);this.open=!1;this.clickOutsideHandler=e=>{e.composedPath().includes(this.container)||this.closeDialog()};this.onKeydown=e=>{e.code==="Escape"&&this.open&&(e.preventDefault(),this.closeDialog())}}static get styles(){return[m]}updated(e){e.has("open")&&this.toggleDialogHandler()}get hasHtmlDialogSupport(){return!!window.HTMLDialogElement}get _hasFooter(){return[...this.childNodes].some(e=>e.nodeName==="BL-BUTTON")}toggleDialogHandler(){var e,a,i,r;this.open?((a=(e=this.dialog)==null?void 0:e.showModal)==null||a.call(e),this.onOpen({isOpen:!0}),document.body.style.overflow="hidden",this.toggleFooterShadow(),window==null||window.addEventListener("keydown",s=>this.onKeydown(s)),window==null||window.addEventListener("resize",()=>this.toggleFooterShadow())):((r=(i=this.dialog)==null?void 0:i.close)==null||r.call(i),this.onClose({isOpen:!1}),document.body.style.overflow="auto",window==null||window.removeEventListener("keydown",this.onKeydown),window==null||window.removeEventListener("resize",this.toggleFooterShadow))}closeDialog(){this.open=!1}toggleFooterShadow(){var e,a,i,r,s,p;((e=this.content)==null?void 0:e.scrollHeight)>((a=this.content)==null?void 0:a.offsetHeight)?(r=(i=this.footer)==null?void 0:i.classList)==null||r.add("shadow"):(p=(s=this.footer)==null?void 0:s.classList)==null||p.remove("shadow")}renderFooter(){return this._hasFooter?l`<footer>
-          <slot name="primary-action"></slot>
-          <slot name="secondary-action"></slot>
-          <slot name="tertiary-action"></slot>
-        </footer>`:""}renderContainer(){let e=this.caption?l`<h2 id="dialog-caption">${this.caption}</h2>`:"";return l` <div class="container">
-      <header>
-        ${e}
-        <bl-button
-          @click="${this.closeDialog}"
-          icon="close"
-          variant="tertiary"
-          kind="neutral"
-        ></bl-button>
-      </header>
-      <section class="content"><slot /></section>
-      ${this.renderFooter()}
-    </div>`}render(){return this.hasHtmlDialogSupport?l`
-          <dialog
-            class="dialog"
-            aria-labelledby="dialog-caption"
-            @click=${this.clickOutsideHandler}
-          >
-            ${this.renderContainer()}
-          </dialog>
-        `:l`<div
-          class="dialog-polyfill"
-          role="dialog"
-          aria-labelledby="dialog-caption"
-          @click=${this.clickOutsideHandler}
-        >
-          ${this.renderContainer()}
-        </div>`}};o([d({type:Boolean,reflect:!0})],t.prototype,"open",2),o([d({type:String})],t.prototype,"caption",2),o([n(".dialog")],t.prototype,"dialog",2),o([n("footer")],t.prototype,"footer",2),o([n(".container")],t.prototype,"container",2),o([n(".content")],t.prototype,"content",2),o([c("bl-dialog-open")],t.prototype,"onOpen",2),o([c("bl-dialog-close")],t.prototype,"onClose",2),t=o([g("bl-dialog")],t);export{t as a};
-//# sourceMappingURL=chunk-QCPUN6WO.js.map

package/dist/chunk-QCPUN6WO.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/components/dialog/bl-dialog.css", "../src/components/dialog/bl-dialog.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl) var(--bl-size-xl) var(--bl-size-m) var(--bl-size-xl);overflow:auto}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`;\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 '../button/bl-button';\nimport style from './bl-dialog.css';\n\ntype DialogElement = {\n  showModal: () => void;\n  close: () => void;\n};\n\n/**\n * @tag bl-dialog\n * @summary Baklava Dialog component\n */\n@customElement('bl-dialog')\nexport default class BlDialog extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets dialog open-close status\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Sets the dialog title\n   */\n  @property({ type: String })\n  caption?: string;\n\n  @query('.dialog')\n  private dialog: HTMLDialogElement & DialogElement;\n\n  @query('footer')\n  private footer: HTMLElement;\n\n  @query('.container')\n  private container: HTMLElement;\n\n  @query('.content')\n  private content: HTMLElement;\n\n  /**\n   * Fires when the dialog is opened\n   */\n  @event('bl-dialog-open') private onOpen: EventDispatcher<object>;\n\n  /**\n   * Fires when the dialog is closed\n   */\n  @event('bl-dialog-close') private onClose: EventDispatcher<object>;\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('open')) {\n      this.toggleDialogHandler();\n    }\n  }\n\n  private get hasHtmlDialogSupport() {\n    return !!window.HTMLDialogElement;\n  }\n\n  private get _hasFooter() {\n    return [...this.childNodes].some(node => node.nodeName === 'BL-BUTTON');\n  }\n\n  private toggleDialogHandler() {\n    if (this.open) {\n      this.dialog?.showModal?.();\n      this.onOpen({ isOpen: true });\n      document.body.style.overflow = 'hidden';\n      this.toggleFooterShadow();\n      window?.addEventListener('keydown', event => this.onKeydown(event));\n      window?.addEventListener('resize', () => this.toggleFooterShadow());\n    } else {\n      this.dialog?.close?.();\n      this.onClose({ isOpen: false });\n      document.body.style.overflow = 'auto';\n      window?.removeEventListener('keydown', this.onKeydown);\n      window?.removeEventListener('resize', this.toggleFooterShadow);\n    }\n  }\n\n  private closeDialog() {\n    this.open = false;\n  }\n\n  private clickOutsideHandler = (event: MouseEvent) => {\n    const eventPath = event.composedPath() as HTMLElement[];\n\n    if (!eventPath.includes(this.container)) {\n      this.closeDialog();\n    }\n  };\n\n  private onKeydown = (event: KeyboardEvent): void => {\n    if (event.code === 'Escape' && this.open) {\n      event.preventDefault();\n      this.closeDialog();\n    }\n  };\n\n  private toggleFooterShadow() {\n    if (this.content?.scrollHeight > this.content?.offsetHeight) {\n      this.footer?.classList?.add('shadow');\n    } else {\n      this.footer?.classList?.remove('shadow');\n    }\n  }\n\n  private renderFooter() {\n    return this._hasFooter\n      ? html`<footer>\n          <slot name=\"primary-action\"></slot>\n          <slot name=\"secondary-action\"></slot>\n          <slot name=\"tertiary-action\"></slot>\n        </footer>`\n      : '';\n  }\n\n  private renderContainer() {\n    const title = this.caption ? html`<h2 id=\"dialog-caption\">${this.caption}</h2>` : '';\n\n    return html` <div class=\"container\">\n      <header>\n        ${title}\n        <bl-button\n          @click=\"${this.closeDialog}\"\n          icon=\"close\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n        ></bl-button>\n      </header>\n      <section class=\"content\"><slot /></section>\n      ${this.renderFooter()}\n    </div>`;\n  }\n\n  render(): TemplateResult {\n    return this.hasHtmlDialogSupport\n      ? html`\n          <dialog\n            class=\"dialog\"\n            aria-labelledby=\"dialog-caption\"\n            @click=${this.clickOutsideHandler}\n          >\n            ${this.renderContainer()}\n          </dialog>\n        `\n      : html`<div\n          class=\"dialog-polyfill\"\n          role=\"dialog\"\n          aria-labelledby=\"dialog-caption\"\n          @click=${this.clickOutsideHandler}\n        >\n          ${this.renderContainer()}\n        </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-dialog': BlDialog;\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["styles", "i", "bl_dialog_default", "BlDialog", "s", "event", "bl_dialog_default", "changedProperties", "node", "_a", "_b", "_c", "_d", "_e", "_f", "y", "title", "__decorateClass", "e", "i"]
-}