@trendyol/baklava 3.3.1 → 3.4.0-beta.1

package/dist/baklava.js

@@ -1,2 +1,2 @@
-import{b as q}from"./chunk-EZJ3WW6Y.js";import{b as N}from"./chunk-GISZRI4I.js";import{b as z}from"./chunk-JC4VETUE.js";import{b as j}from"./chunk-5EAI6722.js";import{b as O}from"./chunk-Y2Q465TD.js";import{b as y}from"./chunk-J5YZ4HBV.js";import{b as v}from"./chunk-P5TOP3NH.js";import{a as F}from"./chunk-G4DOH6BQ.js";import{a as D}from"./chunk-STZJ3LBU.js";import{a as t}from"./chunk-APLBTZ36.js";import{a as T}from"./chunk-QDYWH7BU.js";import{c as b,f as P}from"./chunk-X5XH4HTW.js";import{b as R}from"./chunk-4BLKAURK.js";import{a as C}from"./chunk-5TPDRTCU.js";import{a as g}from"./chunk-WPESQSKX.js";import{a as w}from"./chunk-QF4LGACD.js";import{a as s}from"./chunk-MWG4TBH7.js";import{b as G,d as k,f as A}from"./chunk-NXVLNG4L.js";import{b as S}from"./chunk-HYBPEELZ.js";import{b as H}from"./chunk-SBCJY5IU.js";import{a as c}from"./chunk-H4WETBHJ.js";import{a as i}from"./chunk-2IJL7HNY.js";import{a as n}from"./chunk-RER7OLAQ.js";import{b as u,e as x}from"./chunk-MWFGDECP.js";import{a as J}from"./chunk-GFBXJPT6.js";import{a as h}from"./chunk-DE3A37FL.js";import{b as I}from"./chunk-UOGCEUXK.js";import"./chunk-EZSEQHRH.js";import{a as m}from"./chunk-WC5CTIZH.js";import"./chunk-23PSWIUF.js";import{b as E}from"./chunk-OTAAXK2L.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{a as B}from"./chunk-QKII4FCI.js";import{b as d}from"./chunk-4UO3W4WP.js";import{b as p}from"./chunk-ZE7GYACV.js";import"./chunk-6LT7O7T2.js";import"./chunk-HBPBDC7T.js";import{a as o}from"./chunk-ZLJF4SVG.js";import{a as l}from"./chunk-ERL6CBPO.js";import"./chunk-ECPWEUBG.js";import"./chunk-DINNT5P2.js";import{a as f}from"./chunk-T5MEA7JO.js";import{a as e,b as a,c as r}from"./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{t as BlAccordion,o as BlAccordionGroup,l as BlAlert,f as BlBadge,d as BlButton,E as BlCalendar,u as BlCheckbox,x as BlCheckboxGroup,J as BlDatePicker,B as BlDialog,s as BlDrawer,A as BlDropdown,S as BlDropdownGroup,k as BlDropdownItem,r as BlIcon,m as BlInput,H as BlNotification,N as BlNotificationCard,c as BlPagination,I as BlPopover,T as BlProgressIndicator,b as BlRadio,P as BlRadioGroup,i as BlSelect,n as BlSelectOption,p as BlSpinner,G as BlSplitButton,R as BlSwitch,g as BlTab,C as BlTabGroup,w as BlTabPanel,v as BlTable,O as BlTableBody,z as BlTableCell,y as BlTableHeader,q as BlTableHeaderCell,j as BlTableRow,F as BlTag,D as BlTextarea,h as BlTooltip,a as getIconPath,e as setIconPath};
+import{b as q}from"./chunk-EZJ3WW6Y.js";import{b as N}from"./chunk-GISZRI4I.js";import{b as z}from"./chunk-JC4VETUE.js";import{b as j}from"./chunk-5EAI6722.js";import{b as O}from"./chunk-Y2Q465TD.js";import{b as y}from"./chunk-J5YZ4HBV.js";import{b as v}from"./chunk-P5TOP3NH.js";import{a as F}from"./chunk-G4DOH6BQ.js";import{a as D}from"./chunk-STZJ3LBU.js";import{a as t}from"./chunk-APLBTZ36.js";import{a as T}from"./chunk-QDYWH7BU.js";import{c as b,f as P}from"./chunk-IKYI4JCF.js";import{b as R}from"./chunk-4BLKAURK.js";import{a as C}from"./chunk-5TPDRTCU.js";import{a as g}from"./chunk-WPESQSKX.js";import{a as w}from"./chunk-QF4LGACD.js";import{a as s}from"./chunk-MWG4TBH7.js";import{b as G,d as k,f as A}from"./chunk-NXVLNG4L.js";import{b as S}from"./chunk-HYBPEELZ.js";import{b as H}from"./chunk-SBCJY5IU.js";import{a as c}from"./chunk-H4WETBHJ.js";import{a as i}from"./chunk-2IJL7HNY.js";import{a as n}from"./chunk-RER7OLAQ.js";import{b as u,e as x}from"./chunk-MWFGDECP.js";import{a as J}from"./chunk-GFBXJPT6.js";import{a as h}from"./chunk-DE3A37FL.js";import{b as I}from"./chunk-UOGCEUXK.js";import"./chunk-EZSEQHRH.js";import{a as m}from"./chunk-WC5CTIZH.js";import"./chunk-23PSWIUF.js";import{b as E}from"./chunk-OTAAXK2L.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{a as B}from"./chunk-QKII4FCI.js";import{b as d}from"./chunk-4UO3W4WP.js";import{b as p}from"./chunk-ZE7GYACV.js";import"./chunk-6LT7O7T2.js";import"./chunk-HBPBDC7T.js";import{a as o}from"./chunk-ZLJF4SVG.js";import{a as l}from"./chunk-ERL6CBPO.js";import"./chunk-ECPWEUBG.js";import"./chunk-DINNT5P2.js";import{a as f}from"./chunk-T5MEA7JO.js";import{a as e,b as a,c as r}from"./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{t as BlAccordion,o as BlAccordionGroup,l as BlAlert,f as BlBadge,d as BlButton,E as BlCalendar,u as BlCheckbox,x as BlCheckboxGroup,J as BlDatePicker,B as BlDialog,s as BlDrawer,A as BlDropdown,S as BlDropdownGroup,k as BlDropdownItem,r as BlIcon,m as BlInput,H as BlNotification,N as BlNotificationCard,c as BlPagination,I as BlPopover,T as BlProgressIndicator,b as BlRadio,P as BlRadioGroup,i as BlSelect,n as BlSelectOption,p as BlSpinner,G as BlSplitButton,R as BlSwitch,g as BlTab,C as BlTabGroup,w as BlTabPanel,v as BlTable,O as BlTableBody,z as BlTableCell,y as BlTableHeader,q as BlTableHeaderCell,j as BlTableRow,F as BlTag,D as BlTextarea,h as BlTooltip,a as getIconPath,e as setIconPath};
 //# sourceMappingURL=baklava.js.map

package/dist/{chunk-X5XH4HTW.js → chunk-IKYI4JCF.js}

@@ -1,17 +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}>
+import{a as f}from"./chunk-XDUIVR6I.js";import{a as m}from"./chunk-6LT7O7T2.js";import{a as o}from"./chunk-GRL4DWKG.js";import{a as c,b as i,c as u,e as v}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 h="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[...this.querySelectorAll(p)]}get availableOptions(){return this.options.filter(e=>!e.disabled)}updated(e){e.has("value")&&(this.setValue(this.value),this.onChange(this.value))}handleOptionChecked(e){let a=e.target;this.setValue(a.value),this.onChange(a.value)}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++,this.focusedOptionIndex>=this.availableOptions.length&&(this.focusedOptionIndex=0),this.availableOptions[this.focusedOptionIndex].select();else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--,this.focusedOptionIndex<0&&(this.focusedOptionIndex=this.availableOptions.length-1),this.availableOptions[this.focusedOptionIndex].select();else if([" "].includes(e.key)){this.availableOptions[this.focusedOptionIndex].select();return}else return;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
+    </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(h)],r);var O=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=O;var p="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(h),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
       class=${e}
       role="radio"
       aria-labelledby="label"
       aria-disabled=${this.disabled}
-      aria-readonly=${this.disabled}
+      aria-checked=${this.selected}
       @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
+    </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(p)],l);export{p as a,W as b,l as c,h as d,b as e,r as f};
+//# sourceMappingURL=chunk-IKYI4JCF.js.map

package/dist/chunk-IKYI4JCF.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      if (this.focusedOptionIndex >= this.availableOptions.length) {\n        this.focusedOptionIndex = 0; // Wrap around to the first option\n      }\n      this.availableOptions[this.focusedOptionIndex].select();\n\n      // Previous option\n    } else if ([\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n      this.focusedOptionIndex--;\n      if (this.focusedOptionIndex < 0) {\n        this.focusedOptionIndex = this.availableOptions.length - 1; // Wrap around to the last option\n      }\n      this.availableOptions[this.focusedOptionIndex].select();\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    this.availableOptions[this.focusedOptionIndex].focus();\n\n    event.preventDefault();\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-checked=${this.selected}\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", "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/components/radio-group/bl-radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bl-radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/bl-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGvE,OAAO,4BAA4B,CAAC;AAGpC,OAAO,OAAuB,MAAM,kBAAkB,CAAC;AAEvD,eAAO,MAAM,eAAe,mBAAmB,CAAC;AAEhD,eAAO,MAAM,iBAAiB,oBAAoB,CAAC;;AAEnD;;;;;;;;GAQG;AAEH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,iBAA4B;IACpE,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB,IAAI,OAAO,IAAI,OAAO,EAAE,CAEvB;IAED,IAAI,gBAAgB,IAAI,OAAO,EAAE,CAEhC;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD;;OAEG;IACuB,OAAO,CAAC,QAAQ,CAA0B;IAEpE,OAAO,CAAC,kBAAkB,CAAK;IAE/B,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,aAAa;IA6BrB,iBAAiB,IAAI,IAAI;IAQzB,OAAO,CAAC,WAAW;IAInB,MAAM,IAAI,cAAc;CAQzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC;KACjC;IACD,UAAU,mBAAmB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;KAC1C;CACF"}
+{"version":3,"file":"bl-radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/bl-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGvE,OAAO,4BAA4B,CAAC;AAGpC,OAAO,OAAuB,MAAM,kBAAkB,CAAC;AAEvD,eAAO,MAAM,eAAe,mBAAmB,CAAC;AAEhD,eAAO,MAAM,iBAAiB,oBAAoB,CAAC;;AAEnD;;;;;;;;GAQG;AAEH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,iBAA4B;IACpE,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB,IAAI,OAAO,IAAI,OAAO,EAAE,CAEvB;IAED,IAAI,gBAAgB,IAAI,OAAO,EAAE,CAEhC;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD;;OAEG;IACuB,OAAO,CAAC,QAAQ,CAA0B;IAEpE,OAAO,CAAC,kBAAkB,CAAK;IAE/B,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,aAAa;IA8BrB,iBAAiB,IAAI,IAAI;IAQzB,OAAO,CAAC,WAAW;IAInB,MAAM,IAAI,cAAc;CAQzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC;KACjC;IACD,UAAU,mBAAmB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;KAC1C;CACF"}

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-X5XH4HTW.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{b as blChangeEventName,a as blRadioGroupTag,c as default};
+import{d as a,e as b,f as c}from"../../chunk-IKYI4JCF.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.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-X5XH4HTW.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{b as blCheckedEventName,a as blRadioTag,c as default};
+import{a,b,c}from"../../../chunk-IKYI4JCF.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.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": "3.3.1",
+  "version": "3.4.0-beta.1",
   "description": "Trendyol Baklava Design System",
   "main": "dist/baklava.js",
   "module": "dist/baklava.js",

package/dist/chunk-X5XH4HTW.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: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": "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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", "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"]
-}