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

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

@@ -1,9 +1,9 @@
-import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT5P2.js";import{b as t}from"../../chunk-4OT5AMS5.js";import{e}from"../../chunk-IZ2LK5GK.js";var N={title:"Components/Notification",component:"bl-notification",parameters:{chromatic:{viewports:[1e3]}},decorators:[s],argTypes:{duration:{control:"number",description:"Duration in seconds",defaultValue:7},caption:{control:"text",description:"Caption of the notification"},description:{control:"text",description:"Description of the notification. Required."},icon:{control:"text",defaultValue:"true",description:"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon."},variant:{options:["info","warning","success","error"],default:"info",control:{type:"select"},description:"Variant of the notification"},permanent:{control:"boolean",defaultValue:!1,description:"If true, the notification will not have duration and will be removed when the user clicks on the close button."},primaryAction:{control:"object",description:"Primary action of the notification. onClick and label properties are required."},secondaryAction:{control:"object",description:"Secondary action of the notification. onClick and label properties are required."}},args:{noAnimation:!1,duration:20,caption:"Notification Caption",description:"Notification Description",icon:"true",variant:"info",permanent:!1,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}}},S=N,c=i=>{let o=document.querySelector("bl-notification");return o==null?void 0:o.addNotification(i)},A=i=>JSON.stringify(i,null,6),n=i=>t`
+import{a as p}from"../../chunk-HSVSMABT.js";import{a as s}from"../../chunk-DINNT5P2.js";import{b as t}from"../../chunk-4OT5AMS5.js";import{e}from"../../chunk-IZ2LK5GK.js";var A={title:"Components/Notification",component:"bl-notification",parameters:{chromatic:{viewports:[1e3]}},decorators:[p],argTypes:{duration:{control:"number",description:"Duration in seconds",defaultValue:7},caption:{control:"text",description:"Caption of the notification"},description:{control:"text",description:"Description of the notification. Required."},icon:{control:"text",defaultValue:"true",description:"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon."},variant:{options:["info","warning","success","error"],default:"info",control:{type:"select"},description:"Variant of the notification"},permanent:{control:"boolean",defaultValue:!1,description:"If true, the notification will not have duration and will be removed when the user clicks on the close button."},primaryAction:{control:"object",description:"Primary action of the notification. onClick and label properties are required."},secondaryAction:{control:"object",description:"Secondary action of the notification. onClick and label properties are required."}},args:{noAnimation:!1,duration:20,caption:"Notification Caption",description:"Notification Description",icon:"true",variant:"info",permanent:!1,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}}},k=A,c=i=>{let o=document.querySelector("bl-notification");return o==null?void 0:o.addNotification(i)},b=i=>JSON.stringify(i,null,6),r=i=>t`
   <bl-notification
     ?no-animation=${i.noAnimation}
-    duration=${l(i.duration)}
+    duration=${s(i.duration)}
   ></bl-notification>
-`,f,r=(i,o="Add Notification")=>{let a=o.toLowerCase().replace(/\s/g,"-");return t(f||(f=e([`
+`,d,n=(i,o="Add Notification")=>{let a=o.toLowerCase().replace(/\s/g,"-");return t(d||(d=e([`
     <bl-button id=`,">",`</bl-button>
 
     <script>
@@ -16,7 +16,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT
         });
       })();
     <\/script>
-  `])),a,o,a,A(i))},k={render(i){return t`${n(i)} ${r(i)} `},args:{duration:60,primaryAction:void 0,secondaryAction:void 0},play:({args:i})=>{c(i),c({...i,variant:"success"}),c({...i,variant:"warning"}),c({...i,variant:"error"})}},p,E={render(i){return t(p||(p=e([`
+  `])),a,o,a,b(i))},E={render(i){return t`${r(i)} ${n(i)} `},args:{duration:60,primaryAction:void 0,secondaryAction:void 0},play:({args:i})=>{c(i),c({...i,variant:"success"}),c({...i,variant:"warning"}),c({...i,variant:"error"})}},f,g={render(i){return t(f||(f=e([`
       `,`
       <bl-button>Remove Notification</bl-button>
 
@@ -36,7 +36,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),n(i))}},d,w={render(i){return t(d||(d=e([`
+    `])),r(i))}},m,w={render(i){return t(m||(m=e([`
       `,`
       <bl-button>Remove Notifications</bl-button>
 
@@ -70,7 +70,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),n(i))}},m,g={render(i){return t(m||(m=e([`
+    `])),r(i))}},u,$={render(i){return t(u||(u=e([`
       `,`
       <script>
         (function () {
@@ -89,7 +89,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),n(i))}},u,x={render(i){return t(u||(u=e([`
+    `])),r(i))}},y,h={render(i){return t(y||(y=e([`
       `,`
       <script>
         (function () {
@@ -114,7 +114,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),n(i))}},y,$={render(i){return t(y||(y=e([`
+    `])),r(i))}},N,x={render(i){return t(N||(N=e([`
       `,`
       <script>
         (function () {
@@ -139,11 +139,27 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),n(i))},play:()=>{c({caption:"Notification Caption",description:"Notification Description",permanent:!0,primaryAction:{label:"Primary Action",onClick:i=>{i.remove()}},secondaryAction:{label:"Secondary Action",onClick:i=>{i.remove()}}})}},h={render(i){return t` ${n(i)} ${r(i)} `},args:{permanent:!0},play:({args:i})=>{c(i)}},P={render(i){return t`
-      ${n(i)}
-      ${r({caption:"Notification Caption",description:"Notification Variant: info",permanent:!0,variant:"info",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Info")}
-      ${r({caption:"Notification Caption",description:"Notification Variant: success",permanent:!0,variant:"success",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Success")}
-      ${r({caption:"Notification Caption",description:"Notification Variant: warning",permanent:!0,variant:"warning",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Warning")}
-      ${r({caption:"Notification Caption",description:"Notification Variant: error",permanent:!0,variant:"error",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Error")}
-    `},play:()=>{let i=["info","success","warning","error"];for(let o of i)c({caption:"Notification Caption",description:`Notification Variant: ${o}`,permanent:!0,variant:o,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}})}};export{$ as ActionsRemoveExample,k as AddExample,h as PermanentExample,g as PrimaryActionExample,w as RemoveAwaitExample,E as RemoveExample,x as SecondaryActionExample,P as VariantsExample,S as default};
+    `])),r(i))},play:()=>{c({caption:"Notification Caption",description:"Notification Description",permanent:!0,primaryAction:{label:"Primary Action",onClick:i=>{i.remove()}},secondaryAction:{label:"Secondary Action",onClick:i=>{i.remove()}}})}},P={render(i){return t` ${r(i)} ${n(i)} `},args:{permanent:!0},play:({args:i})=>{c(i)}},q={render(i){return t`
+      ${r(i)}
+      ${n({caption:"Notification Caption",description:"Notification Variant: info",permanent:!0,variant:"info",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Info")}
+      ${n({caption:"Notification Caption",description:"Notification Variant: success",permanent:!0,variant:"success",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Success")}
+      ${n({caption:"Notification Caption",description:"Notification Variant: warning",permanent:!0,variant:"warning",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Warning")}
+      ${n({caption:"Notification Caption",description:"Notification Variant: error",permanent:!0,variant:"error",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Error")}
+    `},play:()=>{let i=["info","success","warning","error"];for(let o of i)c({caption:"Notification Caption",description:`Notification Variant: ${o}`,permanent:!0,variant:o,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}})}},D={render(i){return t`
+      <div class="rtl-container" dir="rtl" lang="ar">
+        ${r(i)}
+        ${n({caption:"\u0631\u0633\u0627\u0644\u0629 \u062A\u0631\u062D\u064A\u0628",description:"\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643 \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0646\u0627! \u0646\u062A\u0645\u0646\u0649 \u0644\u0643 \u062A\u062C\u0631\u0628\u0629 \u0645\u0645\u062A\u0639\u0629.",duration:7,variant:"info",icon:!0,primaryAction:{label:"\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646",onClick(){}}},"Info")}
+        ${n({caption:"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0645\u0647\u0645\u0629",description:"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0645\u0647\u0645\u062A\u0643 \u0628\u0646\u062C\u0627\u062D.",duration:10,variant:"success",icon:!0},"Success")}
+        ${n({caption:"\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u062A\u062E\u0632\u064A\u0646",description:"\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0645\u0646\u062E\u0641\u0636\u0629.",duration:15,variant:"warning",icon:!0,primaryAction:{label:"\u062A\u0631\u0642\u064A\u0629",onClick(){}},secondaryAction:{label:"\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F",onClick(){}}},"Warning")}
+        ${n({caption:"\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0627\u062A\u0635\u0627\u0644",description:"\u062A\u0639\u0630\u0631 \u0627\u0644\u0627\u062A\u0635\u0627\u0644 \u0628\u0627\u0644\u062E\u0627\u062F\u0645. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.",duration:20,variant:"error",icon:!0,primaryAction:{label:"\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629",onClick(){}}},"Error")}
+      </div>
+
+      <style>
+        .rtl-container {
+          width: 100%;
+          min-height: 100%;
+          padding: 1rem;
+        }
+      </style>
+    `},play:()=>{[{caption:"\u0631\u0633\u0627\u0644\u0629 \u062A\u0631\u062D\u064A\u0628",description:"\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643 \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0646\u0627! \u0646\u062A\u0645\u0646\u0649 \u0644\u0643 \u062A\u062C\u0631\u0628\u0629 \u0645\u0645\u062A\u0639\u0629.",duration:7,variant:"info",icon:!0,primaryAction:{label:"\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646",onClick(){}}},{caption:"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0645\u0647\u0645\u0629",description:"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0645\u0647\u0645\u062A\u0643 \u0628\u0646\u062C\u0627\u062D.",duration:10,variant:"success",icon:!0},{caption:"\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u062A\u062E\u0632\u064A\u0646",description:"\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0645\u0646\u062E\u0641\u0636\u0629.",duration:15,variant:"warning",icon:!0,primaryAction:{label:"\u062A\u0631\u0642\u064A\u0629",onClick(){}},secondaryAction:{label:"\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F",onClick(){}}},{caption:"\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0627\u062A\u0635\u0627\u0644",description:"\u062A\u0639\u0630\u0631 \u0627\u0644\u0627\u062A\u0635\u0627\u0644 \u0628\u0627\u0644\u062E\u0627\u062F\u0645. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.",duration:20,variant:"error",icon:!0,primaryAction:{label:"\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629",onClick(){}}}].forEach((o,a)=>{setTimeout(()=>{let l=document.querySelector(".rtl-container bl-notification");l==null||l.addNotification(o)},a*300)})},args:{noAnimation:!0,duration:7}};export{x as ActionsRemoveExample,E as AddExample,P as PermanentExample,$ as PrimaryActionExample,D as RTLExample,w as RemoveAwaitExample,g as RemoveExample,h as SecondaryActionExample,q as VariantsExample,k as default};
 //# sourceMappingURL=bl-notification.stories.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/notification/bl-notification.stories.ts"],
-  "sourcesContent": ["import { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { Meta, StoryObj } from \"@storybook/web-components\";\nimport { fullscreenLayout } from \"../../utilities/chromatic-decorators\";\nimport type { NotificationProps, Notification } from \"./bl-notification\";\n\nconst meta: Meta = {\n  title: \"Components/Notification\",\n  component: \"bl-notification\",\n  parameters: {\n    chromatic: {\n      viewports: [1000],\n    },\n  },\n  decorators: [fullscreenLayout],\n  argTypes: {\n    // Notification Card Props\n    duration: {\n      control: \"number\",\n      description: \"Duration in seconds\",\n      defaultValue: 7,\n    },\n    caption: {\n      control: \"text\",\n      description: \"Caption of the notification\",\n    },\n    description: {\n      control: \"text\",\n      description: \"Description of the notification. Required.\",\n    },\n    icon: {\n      control: \"text\",\n      defaultValue: \"true\",\n      description:\n        \"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon.\",\n    },\n    variant: {\n      options: [\"info\", \"warning\", \"success\", \"error\"],\n      default: \"info\",\n      control: { type: \"select\" },\n      description: \"Variant of the notification\",\n    },\n    permanent: {\n      control: \"boolean\",\n      defaultValue: false,\n      description:\n        \"If true, the notification will not have duration and will be removed when the user clicks on the close button.\",\n    },\n    primaryAction: {\n      control: \"object\",\n      description: \"Primary action of the notification. onClick and label properties are required.\",\n    },\n    secondaryAction: {\n      control: \"object\",\n      description:\n        \"Secondary action of the notification. onClick and label properties are required.\",\n    },\n  },\n  args: {\n    noAnimation: false,\n    duration: 20,\n    caption: \"Notification Caption\",\n    description: \"Notification Description\",\n    icon: \"true\",\n    variant: \"info\",\n    permanent: false,\n    primaryAction: {\n      label: \"Primary Action\",\n      onClick() {},\n    },\n    secondaryAction: {\n      label: \"Secondary Action\",\n      onClick() {},\n    },\n  },\n};\n\nexport default meta;\n\nconst addNotification = (options: NotificationProps) => {\n  const el = document.querySelector(\"bl-notification\");\n\n  return el?.addNotification(options);\n};\n\nconst stringifyArgs = (args: NotificationArgs | NotificationProps) => {\n  return JSON.stringify(args, null, 6);\n};\n\nexport type NotificationArgs = {\n  noAnimation: boolean;\n  duration: number;\n} & NotificationProps;\n\nexport type Story = StoryObj<NotificationArgs>;\n\nconst BasicTemplate = (args: NotificationArgs) => html`\n  <bl-notification\n    ?no-animation=${args.noAnimation}\n    duration=${ifDefined(args.duration)}\n  ></bl-notification>\n`;\n\nconst NotificationCreator = (args: NotificationProps, buttonLabel = \"Add Notification\") => {\n  const slug = buttonLabel.toLowerCase().replace(/\\s/g, \"-\");\n\n  return html`\n    <bl-button id=${slug}>${buttonLabel}</bl-button>\n\n    <script>\n      (function () {\n        const notificationElement = document.querySelector(\"bl-notification\");\n        const addButton = document.querySelector(\"bl-button#${slug}\");\n\n        addButton.addEventListener(\"bl-click\", () => {\n          notificationElement.addNotification(${stringifyArgs(args)});\n        });\n      })();\n    </script>\n  `;\n};\n\nexport const AddExample: Story = {\n  render(args: NotificationArgs) {\n    return html`${BasicTemplate(args)} ${NotificationCreator(args)} `;\n  },\n  args: {\n    duration: 60,\n    primaryAction: undefined,\n    secondaryAction: undefined,\n  },\n  play: ({ args }) => {\n    addNotification(args);\n    addNotification({ ...args, variant: \"success\" });\n    addNotification({ ...args, variant: \"warning\" });\n    addNotification({ ...args, variant: \"error\" });\n  },\n};\n\nexport const RemoveExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <bl-button>Remove Notification</bl-button>\n\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n          const removeButton = document.querySelector(\"bl-button\");\n\n          const notification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n          });\n\n          removeButton.addEventListener(\"bl-click\", () => {\n            notification.remove(); // notificationElement.removeNotification(notification.id);\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const RemoveAwaitExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <bl-button>Remove Notifications</bl-button>\n\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n          const removeButton = document.querySelector(\"bl-button\");\n\n          const firstNotification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n          });\n\n          const secondNotification = notificationElement.addNotification({\n            caption: \"Notification Caption Second\",\n            description: \"Notification Description Second\",\n            permanent: true,\n          });\n\n          const thirdNotification = notificationElement.addNotification({\n            caption: \"Notification Caption Third\",\n            description: \"Notification Description Third\",\n            permanent: true,\n          });\n\n          removeButton.addEventListener(\"bl-click\", async () => {\n            await secondNotification.remove();\n            await thirdNotification.remove();\n            await firstNotification.remove();\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const PrimaryActionExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: () => {\n                window.alert(\"Primary Action Clicked\");\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const SecondaryActionExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: () => {\n                window.alert(\"Primary Action Clicked\");\n              },\n            },\n            secondaryAction: {\n              label: \"Secondary Action\",\n              onClick: () => {\n                window.alert(\"Secondary Action Clicked\");\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const ActionsRemoveExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          const notification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: notification => {\n                notification.remove();\n              },\n            },\n            secondaryAction: {\n              label: \"Secondary Action\",\n              onClick: notification => {\n                notification.remove();\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n  play: () => {\n    addNotification({\n      caption: \"Notification Caption\",\n      description: \"Notification Description\",\n      permanent: true,\n      primaryAction: {\n        label: \"Primary Action\",\n        onClick: (notification: Notification) => {\n          notification.remove();\n        },\n      },\n      secondaryAction: {\n        label: \"Secondary Action\",\n        onClick: (notification: Notification) => {\n          notification.remove();\n        },\n      },\n    });\n  },\n};\n\nexport const PermanentExample: Story = {\n  render(args: NotificationArgs) {\n    return html` ${BasicTemplate(args)} ${NotificationCreator(args)} `;\n  },\n  args: {\n    permanent: true,\n  },\n  play: ({ args }) => {\n    addNotification(args);\n  },\n};\n\nexport const VariantsExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: info\",\n          permanent: true,\n          variant: \"info\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Info\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: success\",\n          permanent: true,\n          variant: \"success\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Success\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: warning\",\n          permanent: true,\n          variant: \"warning\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Warning\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: error\",\n          permanent: true,\n          variant: \"error\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Error\"\n      )}\n    `;\n  },\n  play: () => {\n    const variants = [\"info\", \"success\", \"warning\", \"error\"] as const;\n\n    for (const variant of variants) {\n      addNotification({\n        caption: \"Notification Caption\",\n        description: `Notification Variant: ${variant}`,\n        permanent: true,\n        variant,\n        primaryAction: {\n          label: \"Primary Action\",\n          onClick() {},\n        },\n        secondaryAction: {\n          label: \"Secondary Action\",\n          onClick() {},\n        },\n      });\n    }\n  },\n};\n"],
-  "mappings": "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",
-  "names": ["meta", "fullscreenLayout", "bl_notification_stories_default", "addNotification", "options", "el", "stringifyArgs", "args", "BasicTemplate", "x", "_a", "NotificationCreator", "buttonLabel", "slug", "__template", "AddExample", "_b", "RemoveExample", "_c", "RemoveAwaitExample", "_d", "PrimaryActionExample", "_e", "SecondaryActionExample", "_f", "ActionsRemoveExample", "notification", "PermanentExample", "VariantsExample", "variants", "variant"]
+  "sourcesContent": ["import { Meta, StoryObj } from \"@storybook/web-components\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { fullscreenLayout } from \"../../utilities/chromatic-decorators\";\nimport type { Notification, NotificationProps } from \"./bl-notification\";\n\nconst meta: Meta = {\n  title: \"Components/Notification\",\n  component: \"bl-notification\",\n  parameters: {\n    chromatic: {\n      viewports: [1000],\n    },\n  },\n  decorators: [fullscreenLayout],\n  argTypes: {\n    // Notification Card Props\n    duration: {\n      control: \"number\",\n      description: \"Duration in seconds\",\n      defaultValue: 7,\n    },\n    caption: {\n      control: \"text\",\n      description: \"Caption of the notification\",\n    },\n    description: {\n      control: \"text\",\n      description: \"Description of the notification. Required.\",\n    },\n    icon: {\n      control: \"text\",\n      defaultValue: \"true\",\n      description:\n        \"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon.\",\n    },\n    variant: {\n      options: [\"info\", \"warning\", \"success\", \"error\"],\n      default: \"info\",\n      control: { type: \"select\" },\n      description: \"Variant of the notification\",\n    },\n    permanent: {\n      control: \"boolean\",\n      defaultValue: false,\n      description:\n        \"If true, the notification will not have duration and will be removed when the user clicks on the close button.\",\n    },\n    primaryAction: {\n      control: \"object\",\n      description: \"Primary action of the notification. onClick and label properties are required.\",\n    },\n    secondaryAction: {\n      control: \"object\",\n      description:\n        \"Secondary action of the notification. onClick and label properties are required.\",\n    },\n  },\n  args: {\n    noAnimation: false,\n    duration: 20,\n    caption: \"Notification Caption\",\n    description: \"Notification Description\",\n    icon: \"true\",\n    variant: \"info\",\n    permanent: false,\n    primaryAction: {\n      label: \"Primary Action\",\n      onClick() {},\n    },\n    secondaryAction: {\n      label: \"Secondary Action\",\n      onClick() {},\n    },\n  },\n};\n\nexport default meta;\n\nconst addNotification = (options: NotificationProps) => {\n  const el = document.querySelector(\"bl-notification\");\n\n  return el?.addNotification(options);\n};\n\nconst stringifyArgs = (args: NotificationArgs | NotificationProps) => {\n  return JSON.stringify(args, null, 6);\n};\n\nexport type NotificationArgs = {\n  noAnimation: boolean;\n  duration: number;\n} & NotificationProps;\n\nexport type Story = StoryObj<NotificationArgs>;\n\nconst BasicTemplate = (args: NotificationArgs) => html`\n  <bl-notification\n    ?no-animation=${args.noAnimation}\n    duration=${ifDefined(args.duration)}\n  ></bl-notification>\n`;\n\nconst NotificationCreator = (args: NotificationProps, buttonLabel = \"Add Notification\") => {\n  const slug = buttonLabel.toLowerCase().replace(/\\s/g, \"-\");\n\n  return html`\n    <bl-button id=${slug}>${buttonLabel}</bl-button>\n\n    <script>\n      (function () {\n        const notificationElement = document.querySelector(\"bl-notification\");\n        const addButton = document.querySelector(\"bl-button#${slug}\");\n\n        addButton.addEventListener(\"bl-click\", () => {\n          notificationElement.addNotification(${stringifyArgs(args)});\n        });\n      })();\n    </script>\n  `;\n};\n\nexport const AddExample: Story = {\n  render(args: NotificationArgs) {\n    return html`${BasicTemplate(args)} ${NotificationCreator(args)} `;\n  },\n  args: {\n    duration: 60,\n    primaryAction: undefined,\n    secondaryAction: undefined,\n  },\n  play: ({ args }) => {\n    addNotification(args);\n    addNotification({ ...args, variant: \"success\" });\n    addNotification({ ...args, variant: \"warning\" });\n    addNotification({ ...args, variant: \"error\" });\n  },\n};\n\nexport const RemoveExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <bl-button>Remove Notification</bl-button>\n\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n          const removeButton = document.querySelector(\"bl-button\");\n\n          const notification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n          });\n\n          removeButton.addEventListener(\"bl-click\", () => {\n            notification.remove(); // notificationElement.removeNotification(notification.id);\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const RemoveAwaitExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <bl-button>Remove Notifications</bl-button>\n\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n          const removeButton = document.querySelector(\"bl-button\");\n\n          const firstNotification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n          });\n\n          const secondNotification = notificationElement.addNotification({\n            caption: \"Notification Caption Second\",\n            description: \"Notification Description Second\",\n            permanent: true,\n          });\n\n          const thirdNotification = notificationElement.addNotification({\n            caption: \"Notification Caption Third\",\n            description: \"Notification Description Third\",\n            permanent: true,\n          });\n\n          removeButton.addEventListener(\"bl-click\", async () => {\n            await secondNotification.remove();\n            await thirdNotification.remove();\n            await firstNotification.remove();\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const PrimaryActionExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: () => {\n                window.alert(\"Primary Action Clicked\");\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const SecondaryActionExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: () => {\n                window.alert(\"Primary Action Clicked\");\n              },\n            },\n            secondaryAction: {\n              label: \"Secondary Action\",\n              onClick: () => {\n                window.alert(\"Secondary Action Clicked\");\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const ActionsRemoveExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          const notification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: notification => {\n                notification.remove();\n              },\n            },\n            secondaryAction: {\n              label: \"Secondary Action\",\n              onClick: notification => {\n                notification.remove();\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n  play: () => {\n    addNotification({\n      caption: \"Notification Caption\",\n      description: \"Notification Description\",\n      permanent: true,\n      primaryAction: {\n        label: \"Primary Action\",\n        onClick: (notification: Notification) => {\n          notification.remove();\n        },\n      },\n      secondaryAction: {\n        label: \"Secondary Action\",\n        onClick: (notification: Notification) => {\n          notification.remove();\n        },\n      },\n    });\n  },\n};\n\nexport const PermanentExample: Story = {\n  render(args: NotificationArgs) {\n    return html` ${BasicTemplate(args)} ${NotificationCreator(args)} `;\n  },\n  args: {\n    permanent: true,\n  },\n  play: ({ args }) => {\n    addNotification(args);\n  },\n};\n\nexport const VariantsExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: info\",\n          permanent: true,\n          variant: \"info\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Info\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: success\",\n          permanent: true,\n          variant: \"success\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Success\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: warning\",\n          permanent: true,\n          variant: \"warning\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Warning\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: error\",\n          permanent: true,\n          variant: \"error\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Error\"\n      )}\n    `;\n  },\n  play: () => {\n    const variants = [\"info\", \"success\", \"warning\", \"error\"] as const;\n\n    for (const variant of variants) {\n      addNotification({\n        caption: \"Notification Caption\",\n        description: `Notification Variant: ${variant}`,\n        permanent: true,\n        variant,\n        primaryAction: {\n          label: \"Primary Action\",\n          onClick() {},\n        },\n        secondaryAction: {\n          label: \"Secondary Action\",\n          onClick() {},\n        },\n      });\n    }\n  },\n};\n\nexport const RTLExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      <div class=\"rtl-container\" dir=\"rtl\" lang=\"ar\">\n        ${BasicTemplate(args)}\n        ${NotificationCreator(\n          {\n            caption: \"\u0631\u0633\u0627\u0644\u0629 \u062A\u0631\u062D\u064A\u0628\",\n            description: \"\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643 \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0646\u0627! \u0646\u062A\u0645\u0646\u0649 \u0644\u0643 \u062A\u062C\u0631\u0628\u0629 \u0645\u0645\u062A\u0639\u0629.\",\n            duration: 7,\n            variant: \"info\" as const,\n            icon: true,\n            primaryAction: {\n              label: \"\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646\",\n              onClick() {},\n            },\n          },\n          \"Info\"\n        )}\n        ${NotificationCreator(\n          {\n            caption: \"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0645\u0647\u0645\u0629\",\n            description: \"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0645\u0647\u0645\u062A\u0643 \u0628\u0646\u062C\u0627\u062D.\",\n            duration: 10,\n            variant: \"success\" as const,\n            icon: true,\n          },\n          \"Success\"\n        )}\n        ${NotificationCreator(\n          {\n            caption: \"\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u062A\u062E\u0632\u064A\u0646\",\n            description: \"\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0645\u0646\u062E\u0641\u0636\u0629.\",\n            duration: 15,\n            variant: \"warning\" as const,\n            icon: true,\n            primaryAction: {\n              label: \"\u062A\u0631\u0642\u064A\u0629\",\n              onClick() {},\n            },\n            secondaryAction: {\n              label: \"\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F\",\n              onClick() {},\n            },\n          },\n          \"Warning\"\n        )}\n        ${NotificationCreator(\n          {\n            caption: \"\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0627\u062A\u0635\u0627\u0644\",\n            description: \"\u062A\u0639\u0630\u0631 \u0627\u0644\u0627\u062A\u0635\u0627\u0644 \u0628\u0627\u0644\u062E\u0627\u062F\u0645. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.\",\n            duration: 20,\n            variant: \"error\" as const,\n            icon: true,\n            primaryAction: {\n              label: \"\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629\",\n              onClick() {},\n            },\n          },\n          \"Error\"\n        )}\n      </div>\n\n      <style>\n        .rtl-container {\n          width: 100%;\n          min-height: 100%;\n          padding: 1rem;\n        }\n      </style>\n    `;\n  },\n  play: () => {\n    const rtlNotifications: NotificationProps[] = [\n      {\n        caption: \"\u0631\u0633\u0627\u0644\u0629 \u062A\u0631\u062D\u064A\u0628\",\n        description: \"\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643 \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0646\u0627! \u0646\u062A\u0645\u0646\u0649 \u0644\u0643 \u062A\u062C\u0631\u0628\u0629 \u0645\u0645\u062A\u0639\u0629.\",\n        duration: 7,\n        variant: \"info\",\n        icon: true,\n        primaryAction: {\n          label: \"\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646\",\n          onClick() {},\n        },\n      },\n      {\n        caption: \"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0645\u0647\u0645\u0629\",\n        description: \"\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0645\u0647\u0645\u062A\u0643 \u0628\u0646\u062C\u0627\u062D.\",\n        duration: 10,\n        variant: \"success\",\n        icon: true,\n      },\n      {\n        caption: \"\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u062A\u062E\u0632\u064A\u0646\",\n        description: \"\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0645\u0646\u062E\u0641\u0636\u0629.\",\n        duration: 15,\n        variant: \"warning\",\n        icon: true,\n        primaryAction: {\n          label: \"\u062A\u0631\u0642\u064A\u0629\",\n          onClick() {},\n        },\n        secondaryAction: {\n          label: \"\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F\",\n          onClick() {},\n        },\n      },\n      {\n        caption: \"\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0627\u062A\u0635\u0627\u0644\",\n        description: \"\u062A\u0639\u0630\u0631 \u0627\u0644\u0627\u062A\u0635\u0627\u0644 \u0628\u0627\u0644\u062E\u0627\u062F\u0645. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.\",\n        duration: 20,\n        variant: \"error\",\n        icon: true,\n        primaryAction: {\n          label: \"\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629\",\n          onClick() {},\n        },\n      },\n    ];\n\n    // Add RTL notifications\n    rtlNotifications.forEach((notification, index) => {\n      setTimeout(() => {\n        const rtlContainer = document.querySelector<HTMLElement & { addNotification: typeof addNotification }>(\".rtl-container bl-notification\");\n\n        rtlContainer?.addNotification(notification);\n      }, index * 300);\n    });\n  },\n  args: {\n    noAnimation: true,\n    duration: 7,\n  },\n};\n"],
+  "mappings": "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",
+  "names": ["meta", "fullscreenLayout", "bl_notification_stories_default", "addNotification", "options", "el", "stringifyArgs", "args", "BasicTemplate", "x", "l", "_a", "NotificationCreator", "buttonLabel", "slug", "__template", "AddExample", "_b", "RemoveExample", "_c", "RemoveAwaitExample", "_d", "PrimaryActionExample", "_e", "SecondaryActionExample", "_f", "ActionsRemoveExample", "notification", "PermanentExample", "VariantsExample", "variants", "variant", "RTLExample", "index", "rtlContainer"]
 }

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

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-UZJOCLOO.js";import"../../../chunk-ECPWEUBG.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as CloseSource,b as default};
+import{a,b}from"../../../chunk-DIGACNOH.js";import"../../../chunk-ECPWEUBG.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as CloseSource,b as default};
 //# sourceMappingURL=bl-notification-card.js.map

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

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

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

@@ -1,2 +1,2 @@
-import{b as a}from"../../chunk-BNUJWONI.js";import"../../chunk-EZSEQHRH.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{a as default};
+import{b as a}from"../../chunk-UOGCEUXK.js";import"../../chunk-EZSEQHRH.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{a as default};
 //# sourceMappingURL=bl-popover.js.map

package/dist/components/progress-indicator/bl-progress-indicator.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-GMVJABPT.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-QDYWH7BU.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-progress-indicator.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-FVBGMXMC.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-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};
 //# 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-FVBGMXMC.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-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};
 //# sourceMappingURL=bl-radio.js.map

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-OAF3R4PW.js";import"../../chunk-WXWKIQAK.js";import"../../chunk-FTQX7CEW.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-ECPWEUBG.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-2IJL7HNY.js";import"../../chunk-RER7OLAQ.js";import"../../chunk-MWFGDECP.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-HZV6GUII.js";import"../../chunk-ZE7GYACV.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-ECPWEUBG.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-select.js.map

package/dist/components/select/option/bl-select-option.js

@@ -1,2 +1,2 @@
-import{a}from"../../../chunk-WXWKIQAK.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../../chunk-RER7OLAQ.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-select-option.js.map

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

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

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

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

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

@@ -1,2 +1,2 @@
-import{a,b}from"../../chunk-J45OQI7D.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-DINNT5P2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as blSwitchTag,b as default};
+import{a,b}from"../../chunk-4BLKAURK.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-DINNT5P2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as blSwitchTag,b as default};
 //# sourceMappingURL=bl-switch.js.map

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-5TPDRTCU.js";import"../../chunk-YZRAUVUQ.js";import"../../chunk-QF4LGACD.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-5TPDRTCU.js";import"../../chunk-WPESQSKX.js";import"../../chunk-QF4LGACD.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-tab-group.js.map

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

@@ -1,2 +1,2 @@
-import{a}from"../../../chunk-YZRAUVUQ.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../../chunk-WPESQSKX.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-tab.js.map

package/dist/components/table/table-cell/bl-table-cell.js

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-N4GAO7FQ.js";import"../../../chunk-JAZGOWKA.js";import"../../../chunk-VJRVHJVZ.js";import"../../../chunk-T5EQ4OXS.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-FTQX7CEW.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableCellTag,b as default};
+import{a,b}from"../../../chunk-ZJBBQHF3.js";import"../../../chunk-LEAVDIGF.js";import"../../../chunk-VJRVHJVZ.js";import"../../../chunk-7VMGFJ5X.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-MWFGDECP.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableCellTag,b as default};
 //# sourceMappingURL=bl-table-cell.js.map

package/dist/components/table/table-header/bl-table-header.js

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-T5EQ4OXS.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableHeaderTag,b as default};
+import{a,b}from"../../../chunk-7VMGFJ5X.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableHeaderTag,b as default};
 //# sourceMappingURL=bl-table-header.js.map

package/dist/components/table/table-header-cell/bl-table-header-cell.js

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-CAIHRZ24.js";import"../../../chunk-JAZGOWKA.js";import"../../../chunk-VJRVHJVZ.js";import"../../../chunk-T5EQ4OXS.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-FTQX7CEW.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableHeaderCellTag,b as default};
+import{a,b}from"../../../chunk-Q5D7W6YP.js";import"../../../chunk-LEAVDIGF.js";import"../../../chunk-VJRVHJVZ.js";import"../../../chunk-7VMGFJ5X.js";import"../../../chunk-STMCW2R6.js";import"../../../chunk-MWFGDECP.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-BH64QNLE.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-IZ2LK5GK.js";export{a as blTableHeaderCellTag,b as default};
 //# sourceMappingURL=bl-table-header-cell.js.map

package/dist/components/table/table-row/bl-table-row.js

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

package/dist/components/tag/bl-tag.d.ts

@@ -0,0 +1,52 @@
+import { CSSResultGroup, LitElement, TemplateResult } from "lit";
+import "../button/bl-button";
+import "../icon/bl-icon";
+import { BaklavaIcon } from "../icon/icon-list";
+export type TagSize = "small" | "medium" | "large";
+type TagVariant = "selectable" | "removable";
+/**
+ * @tag bl-tag
+ * @summary Baklava Tag component
+ */
+export default class BlTag extends LitElement {
+    static get styles(): CSSResultGroup;
+    /**
+     * Sets the tag size
+     */
+    size: TagSize;
+    /**
+     * Sets the tag variant
+     */
+    variant: TagVariant;
+    /**
+     * Sets the name of the icon
+     */
+    icon?: BaklavaIcon;
+    /**
+     * Sets the selected state of the tag
+     */
+    selected: boolean;
+    /**
+     *  Disables the tag
+     */
+    disabled: boolean;
+    /**
+     * Sets the value of the tag
+     */
+    value: string | null;
+    /**
+     * Dispatches when the tag is clicked
+     */
+    private _onBlTagClick;
+    private _handleClick;
+    private _removeButtonTemplate;
+    private _iconTemplate;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "bl-tag": BlTag;
+    }
+}
+export {};
+//# sourceMappingURL=bl-tag.d.ts.map

package/dist/components/tag/bl-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bl-tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/bl-tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhF,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACnD,KAAK,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;AAE7C;;;GAGG;AAEH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAAU;IAC3C,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,IAAI,EAAE,OAAO,CAAY;IAEzB;;OAEG;IAEH,OAAO,EAAE,UAAU,CAAgB;IAEnC;;OAEG;IAEH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5B;;OAEG;IACoB,OAAO,CAAC,aAAa,CAGzC;IAEH,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,qBAAqB;IAiB7B,OAAO,CAAC,aAAa;IAKrB,MAAM,IAAI,cAAc;CAoBzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

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

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

package/dist/components/tag/bl-tag.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/tag/bl-tag.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=bl-tag.test.d.ts.map

package/dist/components/tag/bl-tag.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bl-tag.test.d.ts","sourceRoot":"","sources":["../../../src/components/tag/bl-tag.test.ts"],"names":[],"mappings":""}

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-KBNVATXF.js";import"../../chunk-23PSWIUF.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-STZJ3LBU.js";import"../../chunk-23PSWIUF.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-textarea.js.map

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-QMVEWMEI.js";import"../../chunk-BNUJWONI.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-DE3A37FL.js";import"../../chunk-UOGCEUXK.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-DINNT5P2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-tooltip.js.map

package/dist/custom-elements.json

@@ -3147,6 +3147,118 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/tag/bl-tag.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BlTag",
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<{\n    value: string | null;\n    selected: boolean;\n  }>"
+              },
+              "description": "Dispatches when the tag is clicked",
+              "name": "bl-tag-click"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "TagSize"
+              },
+              "default": "\"medium\"",
+              "description": "Sets the tag size",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "TagVariant"
+              },
+              "default": "\"selectable\"",
+              "description": "Sets the tag variant",
+              "fieldName": "variant"
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "BaklavaIcon | undefined"
+              },
+              "description": "Sets the name of the icon",
+              "fieldName": "icon"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the selected state of the tag",
+              "fieldName": "selected"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the tag",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Sets the value of the tag",
+              "fieldName": "value"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "bl-tag",
+          "summary": [
+            {
+              "name": "Baklava",
+              "description": "Tag component"
+            }
+          ],
+          "jsDoc": "/**\n * @tag bl-tag\n * @summary Baklava Tag component\n */",
+          "tag": [
+            {
+              "name": "bl-tag",
+              "description": ""
+            }
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "BlTag",
+            "module": "src/components/tag/bl-tag.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bl-tag",
+          "declaration": {
+            "name": "BlTag",
+            "module": "src/components/tag/bl-tag.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/textarea/bl-textarea.ts",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@trendyol/baklava",
   "type": "module",
-  "version": "3.3.0-beta.22",
+  "version": "3.3.0-beta.24",
   "description": "Trendyol Baklava Design System",
   "main": "dist/baklava.js",
   "module": "dist/baklava.js",

package/dist/chunk-4BZSILLM.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/components/badge/bl-badge.css", "../src/components/badge/bl-badge.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;max-width:100%}.badge{--bg-color:var(--bl-badge-bg-color, var(--bl-color-primary-contrast));--color:var(--bl-badge-color, var(--bl-color-primary));--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-4xs);--padding-horizontal:var(--bl-size-3xs);--margin-icon:var(--bl-size-3xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl);display:flex;gap:var(--margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;border:none;border-radius:var(--bl-size-4xs);margin:0;padding:var(--padding-vertical) var(--padding-horizontal);background-color:var(--bg-color);color:var(--color, white);font:var(--font);font-kerning:none;height:var(--height)}:host([size=\"small\"]) .badge{--font:var(--bl-font-caption);--height:var(--bl-size-m)}:host([size=\"large\"]) .badge{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-2xs);--height:var(--bl-size-2xl);--icon-size:var(--bl-size-m)}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host([size=\"small\"]) bl-icon{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport \"../icon/bl-icon\";\nimport { BaklavaIcon } from \"../icon/icon-list\";\nimport style from \"./bl-badge.css\";\n\nexport type BadgeSize = \"small\" | \"medium\" | \"large\";\n\n/**\n * @tag bl-badge\n * @summary Baklava Badge component\n *\n * @cssproperty [--bl-badge-bg-color=--bl-color-primary-contrast] Sets the background color of badge\n * @cssproperty [--bl-badge-color=--bl-color-primary] Sets the color of badge\n */\n\n@customElement(\"bl-badge\")\nexport default class BlBadge extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the badge size\n   */\n  @property({ type: String, reflect: true })\n  size: BadgeSize = \"medium\";\n\n  /**\n   * Sets the name of the icon\n   */\n  @property({ type: String })\n  icon?: BaklavaIcon;\n\n  render(): TemplateResult {\n    const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : \"\";\n\n    return html`<span class=\"badge\">\n      <slot name=\"icon\">${icon}</slot>\n      <slot></slot>\n    </span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bl-badge\": BlBadge;\n  }\n}\n"],
-  "mappings": "6IACO,IAAMA,EAAS,6kCACfC,EAAQD,ECef,IAAqBE,EAArB,cAAqCC,CAAW,CAAhD,kCASE,UAAkB,SARlB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAcA,QAAyB,CACvB,IAAMC,EAAO,KAAK,KAAOC,kBAAqB,KAAK,kBAAoB,GAEvE,OAAOA;AAAA,0BACeD;AAAA;AAAA,YAGxB,CACF,EAhBEE,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBN,EASnB,oBAMAK,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAdPN,EAenB,oBAfmBA,EAArBK,EAAA,CADCC,EAAc,UAAU,GACJN",
-  "names": ["styles", "bl_badge_default", "BlBadge", "s", "bl_badge_default", "icon", "x", "__decorateClass", "e"]
-}