@trendyol/baklava 3.4.0-beta.17 → 3.4.0-beta.19

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+interface StepperArgs {
+    type?: "dot" | "number" | "icon";
+    direction?: "horizontal" | "vertical";
+    usage?: "clickable" | "non-clickable";
+    customStyles?: string;
+}
+declare const meta: Meta<StepperArgs>;
+export default meta;
+type Story = StoryObj<StepperArgs>;
+export declare const Default: Story;
+export declare const DotType: Story;
+export declare const NumberType: Story;
+export declare const IconType: Story;
+export declare const VerticalDirection: Story;
+export declare const NonClickable: Story;
+export declare const WithErrorState: Story;
+export declare const WithDisabledItems: Story;
+export declare const MinimalSteps: Story;
+export declare const ManySteps: Story;
+export declare const WithoutDescriptions: Story;
+export declare const InteractiveExample: Story;
+//# sourceMappingURL=bl-stepper.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bl-stepper.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/bl-stepper.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAOhE,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,KAAK,CAAC,EAAE,WAAW,GAAG,eAAe,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CAgE3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAgBnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgE1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAc5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAcjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA8DhC,CAAC"}

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

@@ -0,0 +1,100 @@
+import{a as n}from"../../chunk-M4E4CVZ4.js";import{a as l}from"../../chunk-DINNT5P2.js";import{b as s}from"../../chunk-4OT5AMS5.js";import"../../chunk-BWWXE4SL.js";var c="https://www.figma.com/design/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=23617-1414",d="https://github.com/Trendyol/baklava/blob/main/src/components/stepper/doc/ADR.md",b={title:"Components/Stepper",component:"bl-stepper",parameters:{chromatic:{viewports:[1e3]},controls:{exclude:["customStyles"]},docs:{description:{component:`<div class="bl-docs-container"><p class="bl-docs-description">The Stepper component displays progress through a sequence of steps. It supports different visual styles (dot, number, icon), directions (horizontal, vertical), and usage modes (clickable, non-clickable). Maximum 9 items are allowed.</p><div class="bl-docs-links" style="display: flex; gap: var(--bl-size-2xs); margin-top: var(--bl-size-m);"><bl-badge icon="document"<bl-link variant='inline' href='`+d+`' target='_blank'>ADR</bl-link></bl-badge><bl-badge icon="puzzle"<bl-link variant='inline' href='`+c+"' target='_blank'>Figma</bl-link></bl-badge></div></div>"}}},decorators:[n],argTypes:{type:{control:{type:"select"},options:["dot","number","icon"],description:"Stepper render style",table:{type:{summary:"StepperType"},defaultValue:{summary:"dot"}}},direction:{control:{type:"select"},options:["horizontal","vertical"],description:"Stepper direction",table:{type:{summary:"StepperDirection"},defaultValue:{summary:"horizontal"}}},usage:{control:{type:"select"},options:["clickable","non-clickable"],description:"Stepper usage mode",table:{type:{summary:"StepperUsage"},defaultValue:{summary:"clickable"}}}}},S=b,o=i=>s`
+  <bl-stepper
+    type=${l(i.type)}
+    direction=${l(i.direction)}
+    usage=${l(i.usage)}
+    style=${l(i.customStyles)}
+  >
+    <bl-stepper-item id="1" title="Step 1" description="First step description" variant="success"></bl-stepper-item>
+    <bl-stepper-item id="2" title="Step 2" description="Second step description" variant="active"></bl-stepper-item>
+    <bl-stepper-item id="3" title="Step 3" description="Third step description" variant="default"></bl-stepper-item>
+    <bl-stepper-item id="4" title="Step 4" description="Fourth step description" variant="default"></bl-stepper-item>
+  </bl-stepper>
+`,y={args:{type:"dot",direction:"horizontal",usage:"clickable"},render:o},f={args:{type:"dot",direction:"horizontal",usage:"clickable"},render:o},g={args:{type:"number",direction:"horizontal",usage:"clickable"},render:o},h={args:{type:"icon",direction:"horizontal",usage:"clickable"},render:i=>s`
+    <bl-stepper
+      type=${l(i.type)}
+      direction=${l(i.direction)}
+      usage=${l(i.usage)}
+      style=${l(i.customStyles)}
+    >
+      <bl-stepper-item id="1" title="Step 1" description="First step description" variant="success" icon="check"></bl-stepper-item>
+      <bl-stepper-item id="2" title="Step 2" description="Second step description" variant="active" icon="settings"></bl-stepper-item>
+      <bl-stepper-item id="3" title="Step 3" description="Third step description" variant="default" icon="clock"></bl-stepper-item>
+      <bl-stepper-item id="4" title="Step 4" description="Fourth step description" variant="default" icon="lock"></bl-stepper-item>
+    </bl-stepper>
+  `},k={args:{type:"number",direction:"vertical",usage:"clickable"},render:o},z={args:{type:"dot",direction:"horizontal",usage:"non-clickable"},render:()=>s`
+    <div style="display: flex; flex-direction: column; gap: var(--bl-size-m);">
+      <bl-stepper type="dot" direction="horizontal" usage="non-clickable" id="non-clickable-stepper">
+        <bl-stepper-item id="1" title="Account Setup" description="Create your account" variant="success"></bl-stepper-item>
+        <bl-stepper-item id="2" title="Profile Information" description="Add your details" variant="active"></bl-stepper-item>
+        <bl-stepper-item id="3" title="Preferences" description="Set your preferences" variant="default"></bl-stepper-item>
+        <bl-stepper-item id="4" title="Confirmation" description="Review and confirm" variant="default"></bl-stepper-item>
+      </bl-stepper>
+
+      <div style="display: flex; gap: var(--bl-size-xs);">
+        <bl-button variant="secondary" size="small" @click=${()=>{let p=document.getElementById("non-clickable-stepper").querySelectorAll("bl-stepper-item"),e=0;if(p.forEach((t,r)=>{t.variant==="active"&&(e=r)}),e>0){let t=e-1;p.forEach((r,a)=>{a===t?r.variant="active":a<t?r.variant="success":r.variant="default"})}}}>Previous</bl-button>
+
+        <bl-button variant="primary" size="small" @click=${()=>{let p=document.getElementById("non-clickable-stepper").querySelectorAll("bl-stepper-item"),e=0;if(p.forEach((t,r)=>{t.variant==="active"&&(e=r)}),e<p.length-1){let t=e+1;p.forEach((r,a)=>{a===t?r.variant="active":a<t?r.variant="success":r.variant="default"})}}}>Next</bl-button>
+      </div>
+    </div>
+  `},I={args:{type:"number",direction:"horizontal",usage:"clickable"},render:()=>s`
+    <bl-stepper type="number" direction="horizontal" usage="clickable">
+      <bl-stepper-item id="1" title="Step 1" description="First step description" variant="success"></bl-stepper-item>
+      <bl-stepper-item id="2" title="Step 2" description="Second step description" variant="active"></bl-stepper-item>
+      <bl-stepper-item id="3" title="Step 3" description="Third step description" variant="error"></bl-stepper-item>
+      <bl-stepper-item id="4" title="Step 4" description="Fourth step description" variant="default"></bl-stepper-item>
+    </bl-stepper>
+  `},B={args:{type:"dot",direction:"horizontal",usage:"clickable"},render:()=>s`
+    <bl-stepper type="dot" direction="horizontal" usage="clickable">
+      <bl-stepper-item id="1" title="Step 1" description="First step description" variant="success"></bl-stepper-item>
+      <bl-stepper-item id="2" title="Step 2" description="Second step description" variant="active"></bl-stepper-item>
+      <bl-stepper-item id="3" title="Step 3" description="Third step description" variant="default" disabled></bl-stepper-item>
+      <bl-stepper-item id="4" title="Step 4" description="Fourth step description" variant="default"></bl-stepper-item>
+    </bl-stepper>
+  `},x={args:{type:"number",direction:"horizontal",usage:"clickable"},render:()=>s`
+    <bl-stepper type="number" direction="horizontal" usage="clickable">
+      <bl-stepper-item id="1" title="Step 1" variant="active"></bl-stepper-item>
+      <bl-stepper-item id="2" title="Step 2" variant="default"></bl-stepper-item>
+    </bl-stepper>
+  `},A={args:{type:"dot",direction:"horizontal",usage:"clickable"},render:()=>s`
+    <bl-stepper type="dot" direction="horizontal" usage="clickable">
+      <bl-stepper-item id="1" title="Step 1" variant="success"></bl-stepper-item>
+      <bl-stepper-item id="2" title="Step 2" variant="success"></bl-stepper-item>
+      <bl-stepper-item id="3" title="Step 3" variant="success"></bl-stepper-item>
+      <bl-stepper-item id="4" title="Step 4" variant="active"></bl-stepper-item>
+      <bl-stepper-item id="5" title="Step 5" variant="default"></bl-stepper-item>
+      <bl-stepper-item id="6" title="Step 6" variant="default"></bl-stepper-item>
+      <bl-stepper-item id="7" title="Step 7" variant="default"></bl-stepper-item>
+      <bl-stepper-item id="8" title="Step 8" variant="default"></bl-stepper-item>
+      <bl-stepper-item id="9" title="Step 9" variant="default"></bl-stepper-item>
+      <bl-stepper-item id="10" title="Step 10" variant="default"></bl-stepper-item>
+      <bl-stepper-item id="11" title="Step 11" variant="default"></bl-stepper-item>
+    </bl-stepper>
+  `},E={args:{type:"number",direction:"horizontal",usage:"clickable"},render:()=>s`
+    <bl-stepper type="number" direction="horizontal" usage="clickable">
+      <bl-stepper-item id="1" title="Step 1" variant="success"></bl-stepper-item>
+      <bl-stepper-item id="2" title="Step 2" variant="active"></bl-stepper-item>
+      <bl-stepper-item id="3" title="Step 3" variant="default"></bl-stepper-item>
+      <bl-stepper-item id="4" title="Step 4" variant="default"></bl-stepper-item>
+    </bl-stepper>
+  `},$={args:{type:"number",direction:"horizontal",usage:"clickable"},render:()=>s`
+    <div style="display: flex; flex-direction: column; gap: var(--bl-size-m);">
+      <bl-stepper type="number" direction="horizontal" usage="clickable" id="interactive-stepper">
+        <bl-stepper-item id="1" title="Account Setup" description="Create your account" variant="success"></bl-stepper-item>
+        <bl-stepper-item id="2" title="Profile Information" description="Add your details" variant="active"></bl-stepper-item>
+        <bl-stepper-item id="3" title="Preferences" description="Set your preferences" variant="default"></bl-stepper-item>
+        <bl-stepper-item id="4" title="Confirmation" description="Review and confirm" variant="default"></bl-stepper-item>
+      </bl-stepper>
+
+      <div style="display: flex; gap: var(--bl-size-xs);">
+        <bl-button variant="secondary" size="small" @click=${()=>{document.getElementById("interactive-stepper").querySelectorAll("bl-stepper-item").forEach((e,t)=>{t===0?e.variant="active":t<1?e.variant="success":e.variant="default"})}}>Go to Step 1</bl-button>
+
+        <bl-button variant="secondary" size="small" @click=${()=>{document.getElementById("interactive-stepper").querySelectorAll("bl-stepper-item").forEach((e,t)=>{t===1?e.variant="active":t<1?e.variant="success":e.variant="default"})}}>Go to Step 2</bl-button>
+
+        <bl-button variant="secondary" size="small" @click=${()=>{document.getElementById("interactive-stepper").querySelectorAll("bl-stepper-item").forEach((e,t)=>{t===2?e.variant="active":t<2?e.variant="success":e.variant="default"})}}>Go to Step 3</bl-button>
+
+        <bl-button variant="secondary" size="small" @click=${()=>{document.getElementById("interactive-stepper").querySelectorAll("bl-stepper-item").forEach((e,t)=>{t===3?e.variant="active":t<3?e.variant="success":e.variant="default"})}}>Go to Step 4</bl-button>
+      </div>
+    </div>
+  `};export{y as Default,f as DotType,h as IconType,$ as InteractiveExample,A as ManySteps,x as MinimalSteps,z as NonClickable,g as NumberType,k as VerticalDirection,B as WithDisabledItems,I as WithErrorState,E as WithoutDescriptions,S as default};
+//# sourceMappingURL=bl-stepper.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/stepper/bl-stepper.stories.ts"],
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/web-components\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { centeredLayout } from \"../../utilities/chromatic-decorators\";\nimport BlStepper from \"./bl-stepper\";\nimport BlStepperItem from \"./bl-stepper-item\";\n\ninterface StepperArgs {\n  type?: \"dot\" | \"number\" | \"icon\";\n  direction?: \"horizontal\" | \"vertical\";\n  usage?: \"clickable\" | \"non-clickable\";\n  customStyles?: string;\n}\n\nconst FIGMA_LINK = \"https://www.figma.com/design/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=23617-1414\";\nconst ADR_LINK = \"https://github.com/Trendyol/baklava/blob/main/src/components/stepper/doc/ADR.md\";\n\nconst meta: Meta<StepperArgs> = {\n  title: \"Components/Stepper\",\n  component: \"bl-stepper\",\n  parameters: {\n    chromatic: {\n      viewports: [1000]\n    },\n    controls: {\n      exclude: [\"customStyles\"],\n    },\n    docs: {\n      description: {\n        component:\n          \"<div class=\\\"bl-docs-container\\\">\" +\n            \"<p class=\\\"bl-docs-description\\\">\" +\n              \"The Stepper component displays progress through a sequence of steps. \" +\n              \"It supports different visual styles (dot, number, icon), directions (horizontal, vertical), \" +\n              \"and usage modes (clickable, non-clickable). Maximum 9 items are allowed.\" +\n            \"</p>\" +\n\n            \"<div class=\\\"bl-docs-links\\\" style=\\\"display: flex; gap: var(--bl-size-2xs); margin-top: var(--bl-size-m);\\\">\" +\n              \"<bl-badge icon=\\\"document\\\"\" +\n                \"<bl-link variant='inline' href='\" + ADR_LINK + \"' target='_blank'>ADR</bl-link>\" +\n              \"</bl-badge>\" +\n              \"<bl-badge icon=\\\"puzzle\\\"\" +\n                \"<bl-link variant='inline' href='\" + FIGMA_LINK + \"' target='_blank'>Figma</bl-link>\" +\n              \"</bl-badge>\" +\n            \"</div>\" +\n          \"</div>\",\n      },\n    },\n  },\n  decorators: [\n    centeredLayout,\n  ],\n  argTypes: {\n    type: {\n      control: { type: \"select\" },\n      options: [\"dot\", \"number\", \"icon\"],\n      description: \"Stepper render style\",\n      table: {\n        type: { summary: \"StepperType\" },\n        defaultValue: { summary: \"dot\" },\n      },\n    },\n    direction: {\n      control: { type: \"select\" },\n      options: [\"horizontal\", \"vertical\"],\n      description: \"Stepper direction\",\n      table: {\n        type: { summary: \"StepperDirection\" },\n        defaultValue: { summary: \"horizontal\" },\n      },\n    },\n    usage: {\n      control: { type: \"select\" },\n      options: [\"clickable\", \"non-clickable\"],\n      description: \"Stepper usage mode\",\n      table: {\n        type: { summary: \"StepperUsage\" },\n        defaultValue: { summary: \"clickable\" },\n      },\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<StepperArgs>;\n\nconst StepperTemplate = (args: StepperArgs) => html`\n  <bl-stepper\n    type=${ifDefined(args.type)}\n    direction=${ifDefined(args.direction)}\n    usage=${ifDefined(args.usage)}\n    style=${ifDefined(args.customStyles)}\n  >\n    <bl-stepper-item id=\"1\" title=\"Step 1\" description=\"First step description\" variant=\"success\"></bl-stepper-item>\n    <bl-stepper-item id=\"2\" title=\"Step 2\" description=\"Second step description\" variant=\"active\"></bl-stepper-item>\n    <bl-stepper-item id=\"3\" title=\"Step 3\" description=\"Third step description\" variant=\"default\"></bl-stepper-item>\n    <bl-stepper-item id=\"4\" title=\"Step 4\" description=\"Fourth step description\" variant=\"default\"></bl-stepper-item>\n  </bl-stepper>\n`;\n\nexport const Default: Story = {\n  args: {\n    type: \"dot\",\n    direction: \"horizontal\",\n    usage: \"clickable\",\n  },\n  render: StepperTemplate,\n};\n\nexport const DotType: Story = {\n  args: {\n    type: \"dot\",\n    direction: \"horizontal\",\n    usage: \"clickable\",\n  },\n  render: StepperTemplate,\n};\n\nexport const NumberType: Story = {\n  args: {\n    type: \"number\",\n    direction: \"horizontal\",\n    usage: \"clickable\",\n  },\n  render: StepperTemplate,\n};\n\nexport const IconType: Story = {\n  args: {\n    type: \"icon\",\n    direction: \"horizontal\",\n    usage: \"clickable\",\n  },\n  render: (args) => html`\n    <bl-stepper\n      type=${ifDefined(args.type)}\n      direction=${ifDefined(args.direction)}\n      usage=${ifDefined(args.usage)}\n      style=${ifDefined(args.customStyles)}\n    >\n      <bl-stepper-item id=\"1\" title=\"Step 1\" description=\"First step description\" variant=\"success\" icon=\"check\"></bl-stepper-item>\n      <bl-stepper-item id=\"2\" title=\"Step 2\" description=\"Second step description\" variant=\"active\" icon=\"settings\"></bl-stepper-item>\n      <bl-stepper-item id=\"3\" title=\"Step 3\" description=\"Third step description\" variant=\"default\" icon=\"clock\"></bl-stepper-item>\n      <bl-stepper-item id=\"4\" title=\"Step 4\" description=\"Fourth step description\" variant=\"default\" icon=\"lock\"></bl-stepper-item>\n    </bl-stepper>\n  `,\n};\n\nexport const VerticalDirection: Story = {\n  args: {\n    type: \"number\",\n    direction: \"vertical\",\n    usage: \"clickable\",\n  },\n  render: StepperTemplate,\n};\n\nexport const NonClickable: Story = {\n  args: {\n    type: \"dot\",\n    direction: \"horizontal\",\n    usage: \"non-clickable\",\n  },\n  render: () => html`\n    <div style=\"display: flex; flex-direction: column; gap: var(--bl-size-m);\">\n      <bl-stepper type=\"dot\" direction=\"horizontal\" usage=\"non-clickable\" id=\"non-clickable-stepper\">\n        <bl-stepper-item id=\"1\" title=\"Account Setup\" description=\"Create your account\" variant=\"success\"></bl-stepper-item>\n        <bl-stepper-item id=\"2\" title=\"Profile Information\" description=\"Add your details\" variant=\"active\"></bl-stepper-item>\n        <bl-stepper-item id=\"3\" title=\"Preferences\" description=\"Set your preferences\" variant=\"default\"></bl-stepper-item>\n        <bl-stepper-item id=\"4\" title=\"Confirmation\" description=\"Review and confirm\" variant=\"default\"></bl-stepper-item>\n      </bl-stepper>\n\n      <div style=\"display: flex; gap: var(--bl-size-xs);\">\n        <bl-button variant=\"secondary\" size=\"small\" @click=${() => {\n          const stepper = document.getElementById(\"non-clickable-stepper\") as BlStepper;\n          const items = stepper.querySelectorAll(\"bl-stepper-item\") as NodeListOf<BlStepperItem>;\n\n          // Find current active step\n          let currentStep = 0;\n\n          items.forEach((item: BlStepperItem, index: number) => {\n            if (item.variant === \"active\") currentStep = index;\n          });\n\n          // Go to previous step\n          if (currentStep > 0) {\n            const prevStep = currentStep - 1;\n\n            items.forEach((item: BlStepperItem, index: number) => {\n              if (index === prevStep) item.variant = \"active\";\n              else if (index < prevStep) item.variant = \"success\";\n              else item.variant = \"default\";\n            });\n          }\n        }}>Previous</bl-button>\n\n        <bl-button variant=\"primary\" size=\"small\" @click=${() => {\n          const stepper = document.getElementById(\"non-clickable-stepper\") as BlStepper;\n          const items = stepper.querySelectorAll(\"bl-stepper-item\") as NodeListOf<BlStepperItem>;\n\n          // Find current active step\n          let currentStep = 0;\n\n          items.forEach((item: BlStepperItem, index: number) => {\n            if (item.variant === \"active\") currentStep = index;\n          });\n\n          // Go to next step\n          if (currentStep < items.length - 1) {\n            const nextStep = currentStep + 1;\n\n            items.forEach((item: BlStepperItem, index: number) => {\n              if (index === nextStep) item.variant = \"active\";\n              else if (index < nextStep) item.variant = \"success\";\n              else item.variant = \"default\";\n            });\n          }\n        }}>Next</bl-button>\n      </div>\n    </div>\n  `,\n};\n\nexport const WithErrorState: Story = {\n  args: {\n    type: \"number\",\n    direction: \"horizontal\",\n    usage: \"clickable\",\n  },\n  render: () => html`\n    <bl-stepper type=\"number\" direction=\"horizontal\" usage=\"clickable\">\n      <bl-stepper-item id=\"1\" title=\"Step 1\" description=\"First step description\" variant=\"success\"></bl-stepper-item>\n      <bl-stepper-item id=\"2\" title=\"Step 2\" description=\"Second step description\" variant=\"active\"></bl-stepper-item>\n      <bl-stepper-item id=\"3\" title=\"Step 3\" description=\"Third step description\" variant=\"error\"></bl-stepper-item>\n      <bl-stepper-item id=\"4\" title=\"Step 4\" description=\"Fourth step description\" variant=\"default\"></bl-stepper-item>\n    </bl-stepper>\n  `,\n};\n\nexport const WithDisabledItems: Story = {\n  args: {\n    type: \"dot\",\n    direction: \"horizontal\",\n    usage: \"clickable\",\n  },\n  render: () => html`\n    <bl-stepper type=\"dot\" direction=\"horizontal\" usage=\"clickable\">\n      <bl-stepper-item id=\"1\" title=\"Step 1\" description=\"First step description\" variant=\"success\"></bl-stepper-item>\n      <bl-stepper-item id=\"2\" title=\"Step 2\" description=\"Second step description\" variant=\"active\"></bl-stepper-item>\n      <bl-stepper-item id=\"3\" title=\"Step 3\" description=\"Third step description\" variant=\"default\" disabled></bl-stepper-item>\n      <bl-stepper-item id=\"4\" title=\"Step 4\" description=\"Fourth step description\" variant=\"default\"></bl-stepper-item>\n    </bl-stepper>\n  `,\n};\n\nexport const MinimalSteps: Story = {\n  args: {\n    type: \"number\",\n    direction: \"horizontal\",\n    usage: \"clickable\",\n  },\n  render: () => html`\n    <bl-stepper type=\"number\" direction=\"horizontal\" usage=\"clickable\">\n      <bl-stepper-item id=\"1\" title=\"Step 1\" variant=\"active\"></bl-stepper-item>\n      <bl-stepper-item id=\"2\" title=\"Step 2\" variant=\"default\"></bl-stepper-item>\n    </bl-stepper>\n  `,\n};\n\nexport const ManySteps: Story = {\n  args: {\n    type: \"dot\",\n    direction: \"horizontal\",\n    usage: \"clickable\",\n  },\n  render: () => html`\n    <bl-stepper type=\"dot\" direction=\"horizontal\" usage=\"clickable\">\n      <bl-stepper-item id=\"1\" title=\"Step 1\" variant=\"success\"></bl-stepper-item>\n      <bl-stepper-item id=\"2\" title=\"Step 2\" variant=\"success\"></bl-stepper-item>\n      <bl-stepper-item id=\"3\" title=\"Step 3\" variant=\"success\"></bl-stepper-item>\n      <bl-stepper-item id=\"4\" title=\"Step 4\" variant=\"active\"></bl-stepper-item>\n      <bl-stepper-item id=\"5\" title=\"Step 5\" variant=\"default\"></bl-stepper-item>\n      <bl-stepper-item id=\"6\" title=\"Step 6\" variant=\"default\"></bl-stepper-item>\n      <bl-stepper-item id=\"7\" title=\"Step 7\" variant=\"default\"></bl-stepper-item>\n      <bl-stepper-item id=\"8\" title=\"Step 8\" variant=\"default\"></bl-stepper-item>\n      <bl-stepper-item id=\"9\" title=\"Step 9\" variant=\"default\"></bl-stepper-item>\n      <bl-stepper-item id=\"10\" title=\"Step 10\" variant=\"default\"></bl-stepper-item>\n      <bl-stepper-item id=\"11\" title=\"Step 11\" variant=\"default\"></bl-stepper-item>\n    </bl-stepper>\n  `,\n};\n\nexport const WithoutDescriptions: Story = {\n  args: {\n    type: \"number\",\n    direction: \"horizontal\",\n    usage: \"clickable\",\n  },\n  render: () => html`\n    <bl-stepper type=\"number\" direction=\"horizontal\" usage=\"clickable\">\n      <bl-stepper-item id=\"1\" title=\"Step 1\" variant=\"success\"></bl-stepper-item>\n      <bl-stepper-item id=\"2\" title=\"Step 2\" variant=\"active\"></bl-stepper-item>\n      <bl-stepper-item id=\"3\" title=\"Step 3\" variant=\"default\"></bl-stepper-item>\n      <bl-stepper-item id=\"4\" title=\"Step 4\" variant=\"default\"></bl-stepper-item>\n    </bl-stepper>\n  `,\n};\n\nexport const InteractiveExample: Story = {\n  args: {\n    type: \"number\",\n    direction: \"horizontal\",\n    usage: \"clickable\",\n  },\n  render: () => html`\n    <div style=\"display: flex; flex-direction: column; gap: var(--bl-size-m);\">\n      <bl-stepper type=\"number\" direction=\"horizontal\" usage=\"clickable\" id=\"interactive-stepper\">\n        <bl-stepper-item id=\"1\" title=\"Account Setup\" description=\"Create your account\" variant=\"success\"></bl-stepper-item>\n        <bl-stepper-item id=\"2\" title=\"Profile Information\" description=\"Add your details\" variant=\"active\"></bl-stepper-item>\n        <bl-stepper-item id=\"3\" title=\"Preferences\" description=\"Set your preferences\" variant=\"default\"></bl-stepper-item>\n        <bl-stepper-item id=\"4\" title=\"Confirmation\" description=\"Review and confirm\" variant=\"default\"></bl-stepper-item>\n      </bl-stepper>\n\n      <div style=\"display: flex; gap: var(--bl-size-xs);\">\n        <bl-button variant=\"secondary\" size=\"small\" @click=${() => {\n          const stepper = document.getElementById(\"interactive-stepper\") as BlStepper;\n          const items = stepper.querySelectorAll(\"bl-stepper-item\") as NodeListOf<BlStepperItem>;\n\n          items.forEach((item: BlStepperItem, index: number) => {\n            if (index === 0) item.variant = \"active\";\n            else if (index < 1) item.variant = \"success\";\n            else item.variant = \"default\";\n          });\n        }}>Go to Step 1</bl-button>\n\n        <bl-button variant=\"secondary\" size=\"small\" @click=${() => {\n          const stepper = document.getElementById(\"interactive-stepper\") as BlStepper;\n          const items = stepper.querySelectorAll(\"bl-stepper-item\") as NodeListOf<BlStepperItem>;\n\n          items.forEach((item: BlStepperItem, index: number) => {\n            if (index === 1) item.variant = \"active\";\n            else if (index < 1) item.variant = \"success\";\n            else item.variant = \"default\";\n          });\n        }}>Go to Step 2</bl-button>\n\n        <bl-button variant=\"secondary\" size=\"small\" @click=${() => {\n          const stepper = document.getElementById(\"interactive-stepper\") as BlStepper;\n          const items = stepper.querySelectorAll(\"bl-stepper-item\") as NodeListOf<BlStepperItem>;\n\n          items.forEach((item: BlStepperItem, index: number) => {\n            if (index === 2) item.variant = \"active\";\n            else if (index < 2) item.variant = \"success\";\n            else item.variant = \"default\";\n          });\n        }}>Go to Step 3</bl-button>\n\n        <bl-button variant=\"secondary\" size=\"small\" @click=${() => {\n          const stepper = document.getElementById(\"interactive-stepper\") as BlStepper;\n          const items = stepper.querySelectorAll(\"bl-stepper-item\") as NodeListOf<BlStepperItem>;\n\n          items.forEach((item: BlStepperItem, index: number) => {\n            if (index === 3) item.variant = \"active\";\n            else if (index < 3) item.variant = \"success\";\n            else item.variant = \"default\";\n          });\n        }}>Go to Step 4</bl-button>\n      </div>\n    </div>\n  `,\n};\n"],
+  "mappings": "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",
+  "names": ["FIGMA_LINK", "ADR_LINK", "meta", "centeredLayout", "bl_stepper_stories_default", "StepperTemplate", "args", "x", "Default", "DotType", "NumberType", "IconType", "VerticalDirection", "NonClickable", "items", "currentStep", "item", "index", "prevStep", "nextStep", "WithErrorState", "WithDisabledItems", "MinimalSteps", "ManySteps", "WithoutDescriptions", "InteractiveExample"]
+}

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

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

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

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

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

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-3MLXIDOD.js";import"../../chunk-WZBUJ4ER.js";import"../../chunk-YH3MSMXL.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-BWWXE4SL.js";export{a as default};
+import{a}from"../../chunk-3MLXIDOD.js";import"../../chunk-YH3MSMXL.js";import"../../chunk-WZBUJ4ER.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-BWWXE4SL.js";export{a as default};
 //# sourceMappingURL=bl-tab-group.js.map

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

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-TKTRDALH.js";import"../../../chunk-QKUMEP5P.js";import"../../../chunk-JN5BKKQZ.js";import"../../../chunk-DPKNQOJX.js";import"../../../chunk-FCOVZEHC.js";import"../../../chunk-6XM52E7W.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-3OQA4BKQ.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-HBPBDC7T.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-BWWXE4SL.js";export{a as blTableCellTag,b as default};
+import{a,b}from"../../../chunk-LZ6VDMPM.js";import"../../../chunk-5QGKDF4O.js";import"../../../chunk-JN5BKKQZ.js";import"../../../chunk-DPKNQOJX.js";import"../../../chunk-FCOVZEHC.js";import"../../../chunk-6XM52E7W.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-3OQA4BKQ.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-HBPBDC7T.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-BWWXE4SL.js";export{a as blTableCellTag,b as default};
 //# sourceMappingURL=bl-table-cell.js.map

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

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-2EK4TAKQ.js";import"../../../chunk-QKUMEP5P.js";import"../../../chunk-JN5BKKQZ.js";import"../../../chunk-DPKNQOJX.js";import"../../../chunk-FCOVZEHC.js";import"../../../chunk-6XM52E7W.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-3OQA4BKQ.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-HBPBDC7T.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-BWWXE4SL.js";export{a as blTableHeaderCellTag,b as default};
+import{a,b}from"../../../chunk-JTNWYMYZ.js";import"../../../chunk-5QGKDF4O.js";import"../../../chunk-JN5BKKQZ.js";import"../../../chunk-DPKNQOJX.js";import"../../../chunk-FCOVZEHC.js";import"../../../chunk-6XM52E7W.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-3OQA4BKQ.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-HBPBDC7T.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-BWWXE4SL.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-QKUMEP5P.js";import"../../../chunk-JN5BKKQZ.js";import"../../../chunk-DPKNQOJX.js";import"../../../chunk-FCOVZEHC.js";import"../../../chunk-6XM52E7W.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-3OQA4BKQ.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-HBPBDC7T.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-BWWXE4SL.js";export{a as blTableRowTag,b as default};
+import{a,b}from"../../../chunk-5QGKDF4O.js";import"../../../chunk-JN5BKKQZ.js";import"../../../chunk-DPKNQOJX.js";import"../../../chunk-FCOVZEHC.js";import"../../../chunk-6XM52E7W.js";import"../../../chunk-EG7U7PM3.js";import"../../../chunk-AYJMIZZ3.js";import"../../../chunk-XDUIVR6I.js";import"../../../chunk-HZ6A5QFC.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-3OQA4BKQ.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-HBPBDC7T.js";import"../../../chunk-5MOOXA2X.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-BWWXE4SL.js";export{a as blTableRowTag,b as default};
 //# sourceMappingURL=bl-table-row.js.map