Tap30 · mimshins · Sep 30, 2025 · Sep 30, 2025 · Sep 30, 2025 · Sep 30, 2025
diff --git a/.changeset/spicy-carpets-win.md b/.changeset/spicy-carpets-win.md
@@ -0,0 +1,6 @@
+---
+"@tapsioss/web-components": patch
+---
+
+Use slot variables in test renderings.
+
diff --git a/packages/web-components/src/badge-wrapper/badge-wrapper.test.ts b/packages/web-components/src/badge-wrapper/badge-wrapper.test.ts
@@ -1,4 +1,5 @@
 import { describe, expect, render, test } from "@internals/test-helpers";
+import { Slots } from "./constants.ts";
 
 describe("🧩 badge-wrapper", () => {
   test("🧪 should show anchor and badge slots in all anchor shapes", async ({
@@ -11,7 +12,7 @@ describe("🧩 badge-wrapper", () => {
         page,
         `
         <tapsi-badge-wrapper data-testid="test-badge-wrapper" anchor-shape="${anchorShape}">
-          <tapsi-badge slot="badge" data-testid="test-badge-wrapper-badge-slot" value="1" color="success"></tapsi-badge>
+          <tapsi-badge slot=${Slots.BADGE} data-testid="test-badge-wrapper-badge-slot" value="1" color="success"></tapsi-badge>
           <tapsi-button data-testid="test-badge-wrapper-anchor-slot">click</tapsi-button>
         </tapsi-badge-wrapper>`,
       );
@@ -31,7 +32,7 @@ describe("🧩 badge-wrapper", () => {
       page,
       `
         <tapsi-badge-wrapper badge-side="left" data-testid="test-badge-wrapper" anchor-shape="circle">
-          <tapsi-badge slot="badge" data-testid="test-badge-wrapper-badge-slot" value="1" color="success"></tapsi-badge>
+          <tapsi-badge slot=${Slots.BADGE} data-testid="test-badge-wrapper-badge-slot" value="1" color="success"></tapsi-badge>
           <div data-testid="test-badge-wrapper-anchor-slot" style="border-radius: 50%; height: 400px; width: 600px; background: red;"></div>
         </tapsi-badge-wrapper>`,
     );
@@ -83,7 +84,7 @@ describe("🧩 badge-wrapper", () => {
       page,
       `
         <tapsi-badge-wrapper badge-side="left" data-testid="test-badge-wrapper" anchor-shape="pill">
-          <tapsi-badge slot="badge" data-testid="test-badge-wrapper-badge-slot" value="1" color="success"></tapsi-badge>
+          <tapsi-badge slot=${Slots.BADGE} data-testid="test-badge-wrapper-badge-slot" value="1" color="success"></tapsi-badge>
           <div data-testid="test-badge-wrapper-anchor-slot" style="border-radius: 99999px; height: 400px; width: 600px; background: red;"></div>
         </tapsi-badge-wrapper>`,
     );
@@ -135,7 +136,7 @@ describe("🧩 badge-wrapper", () => {
       page,
       `
         <tapsi-badge-wrapper badge-side="left" data-testid="test-badge-wrapper" anchor-shape="rectangle">
-          <tapsi-badge slot="badge" data-testid="test-badge-wrapper-badge-slot" value="1" color="success"></tapsi-badge>
+          <tapsi-badge slot=${Slots.BADGE} data-testid="test-badge-wrapper-badge-slot" value="1" color="success"></tapsi-badge>
           <div data-testid="test-badge-wrapper-anchor-slot" style="height: 400px; width: 600px; background: red;"></div>
         </tapsi-badge-wrapper>`,
     );

diff --git a/packages/web-components/src/badge/badge.test.ts b/packages/web-components/src/badge/badge.test.ts
@@ -1,4 +1,5 @@
 import { describe, expect, render, test } from "@internals/test-helpers";
+import { Slots } from "./constants.ts";
 
 describe("🧩 badge", () => {
   test("🧪 should show value when variant is not `dot`", async ({ page }) => {
@@ -27,7 +28,7 @@ describe("🧩 badge", () => {
     page,
   }) => {
     const iconSlot = `
-    <svg data-testid="test-badge-icon-slot" slot="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg data-testid="test-badge-icon-slot" slot=${Slots.ICON} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M11.9996 22C10.7496 22 9.57878 21.7625 8.48711 21.2875C7.39544 20.8125 6.44544 20.1708 5.63711 19.3625C4.82878 18.5541 4.18711 17.6041 3.71211 16.5125C3.23711 15.4208 2.99961 14.25 2.99961 13C2.99961 11.75 3.23711 10.5791 3.71211 9.48748C4.18711 8.39581 4.82878 7.44581 5.63711 6.63748C6.44544 5.82914 7.39544 5.18748 8.48711 4.71248C9.57878 4.23748 10.7496 3.99998 11.9996 3.99998C13.2496 3.99998 14.4204 4.23748 15.5121 4.71248C16.6038 5.18748 17.5538 5.82914 18.3621 6.63748C19.1704 7.44581 19.8121 8.39581 20.2871 9.48748C20.7621 10.5791 20.9996 11.75 20.9996 13C20.9996 14.25 20.7621 15.4208 20.2871 16.5125C19.8121 17.6041 19.1704 18.5541 18.3621 19.3625C17.5538 20.1708 16.6038 20.8125 15.5121 21.2875C14.4204 21.7625 13.2496 22 11.9996 22ZM14.7996 17.2L16.1996 15.8L12.9996 12.6V7.99998H10.9996V13.4L14.7996 17.2ZM5.59961 2.34998L6.99961 3.74998L2.74961 7.99998L1.34961 6.59998L5.59961 2.34998ZM18.3996 2.34998L22.6496 6.59998L21.2496 7.99998L16.9996 3.74998L18.3996 2.34998ZM11.9996 20C13.9496 20 15.6038 19.3208 16.9621 17.9625C18.3204 16.6041 18.9996 14.95 18.9996 13C18.9996 11.05 18.3204 9.39581 16.9621 8.03748C15.6038 6.67914 13.9496 5.99998 11.9996 5.99998C10.0496 5.99998 8.39544 6.67914 7.03711 8.03748C5.67878 9.39581 4.99961 11.05 4.99961 13C4.99961 14.95 5.67878 16.6041 7.03711 17.9625C8.39544 19.3208 10.0496 20 11.9996 20Z" fill="black"/>
     </svg>
     `;

diff --git a/packages/web-components/src/banner/banner.test.ts b/packages/web-components/src/banner/banner.test.ts
@@ -1,4 +1,5 @@
 import { describe, expect, render, test } from "@internals/test-helpers";
+import { Slots } from "./constants.ts";
 
 describe("🧩 banner", () => {
   test("🧪 should render banner elements", async ({ page }) => {
@@ -11,7 +12,7 @@ describe("🧩 banner", () => {
       description="description"
       image="https://picsum.photos/200"
   >
-    <tapsi-button slot="action">click</tapsi-button>
+    <tapsi-button slot=${Slots.ACTION}>click</tapsi-button>
   </tapsi-banner>`,
     );
 

diff --git a/packages/web-components/src/bottom-navigation/bottom-navigation.test.ts b/packages/web-components/src/bottom-navigation/bottom-navigation.test.ts
@@ -8,6 +8,7 @@ import {
   setupMocks,
   test,
 } from "@internals/test-helpers";
+import { Slots } from "./item/constants.ts";
 import { type BottomNavigationItem } from "./item/index.ts";
 
 describe("🧩 bottom-navigation-item", () => {
@@ -101,7 +102,7 @@ describe("🧩 bottom-navigation-item", () => {
       page,
       `
       <tapsi-bottom-navigation-item value="value-1" data-testid="test-bottom-navigation-item-1">
-        <svg data-testid="test-bottom-navigation-item-icon" slot="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg data-testid="test-bottom-navigation-item-icon" slot=${Slots.ICON} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M11.9996 22C10.7496 22 9.57878 21.7625 8.48711 21.2875C7.39544 20.8125 6.44544 20.1708 5.63711 19.3625C4.82878 18.5541 4.18711 17.6041 3.71211 16.5125C3.23711 15.4208 2.99961 14.25 2.99961 13C2.99961 11.75 3.23711 10.5791 3.71211 9.48748C4.18711 8.39581 4.82878 7.44581 5.63711 6.63748C6.44544 5.82914 7.39544 5.18748 8.48711 4.71248C9.57878 4.23748 10.7496 3.99998 11.9996 3.99998C13.2496 3.99998 14.4204 4.23748 15.5121 4.71248C16.6038 5.18748 17.5538 5.82914 18.3621 6.63748C19.1704 7.44581 19.8121 8.39581 20.2871 9.48748C20.7621 10.5791 20.9996 11.75 20.9996 13C20.9996 14.25 20.7621 15.4208 20.2871 16.5125C19.8121 17.6041 19.1704 18.5541 18.3621 19.3625C17.5538 20.1708 16.6038 20.8125 15.5121 21.2875C14.4204 21.7625 13.2496 22 11.9996 22ZM14.7996 17.2L16.1996 15.8L12.9996 12.6V7.99998H10.9996V13.4L14.7996 17.2ZM5.59961 2.34998L6.99961 3.74998L2.74961 7.99998L1.34961 6.59998L5.59961 2.34998ZM18.3996 2.34998L22.6496 6.59998L21.2496 7.99998L16.9996 3.74998L18.3996 2.34998ZM11.9996 20C13.9496 20 15.6038 19.3208 16.9621 17.9625C18.3204 16.6041 18.9996 14.95 18.9996 13C18.9996 11.05 18.3204 9.39581 16.9621 8.03748C15.6038 6.67914 13.9496 5.99998 11.9996 5.99998C10.0496 5.99998 8.39544 6.67914 7.03711 8.03748C5.67878 9.39581 4.99961 11.05 4.99961 13C4.99961 14.95 5.67878 16.6041 7.03711 17.9625C8.39544 19.3208 10.0496 20 11.9996 20Z" fill="black"/>
         </svg>
         آیتم ۱

diff --git a/packages/web-components/src/button/standard/button.test.ts b/packages/web-components/src/button/standard/button.test.ts
@@ -7,6 +7,7 @@ import {
   setupMocks,
   test,
 } from "@internals/test-helpers";
+import { Slots } from "./constants.ts";
 
 describe("🧩 button", () => {
   afterEach(async ({ page }) => {
@@ -177,11 +178,11 @@ describe("🧩 button", () => {
       page,
       `
 <tapsi-button label="test-button" data-testid="test-button">
-    <svg data-testid="test-button-leading-slot" slot="leading-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg data-testid="test-button-leading-slot" slot=${Slots.LEADING_ICON} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M11.9996 22C10.7496 22 9.57878 21.7625 8.48711 21.2875C7.39544 20.8125 6.44544 20.1708 5.63711 19.3625C4.82878 18.5541 4.18711 17.6041 3.71211 16.5125C3.23711 15.4208 2.99961 14.25 2.99961 13C2.99961 11.75 3.23711 10.5791 3.71211 9.48748C4.18711 8.39581 4.82878 7.44581 5.63711 6.63748C6.44544 5.82914 7.39544 5.18748 8.48711 4.71248C9.57878 4.23748 10.7496 3.99998 11.9996 3.99998C13.2496 3.99998 14.4204 4.23748 15.5121 4.71248C16.6038 5.18748 17.5538 5.82914 18.3621 6.63748C19.1704 7.44581 19.8121 8.39581 20.2871 9.48748C20.7621 10.5791 20.9996 11.75 20.9996 13C20.9996 14.25 20.7621 15.4208 20.2871 16.5125C19.8121 17.6041 19.1704 18.5541 18.3621 19.3625C17.5538 20.1708 16.6038 20.8125 15.5121 21.2875C14.4204 21.7625 13.2496 22 11.9996 22ZM14.7996 17.2L16.1996 15.8L12.9996 12.6V7.99998H10.9996V13.4L14.7996 17.2ZM5.59961 2.34998L6.99961 3.74998L2.74961 7.99998L1.34961 6.59998L5.59961 2.34998ZM18.3996 2.34998L22.6496 6.59998L21.2496 7.99998L16.9996 3.74998L18.3996 2.34998ZM11.9996 20C13.9496 20 15.6038 19.3208 16.9621 17.9625C18.3204 16.6041 18.9996 14.95 18.9996 13C18.9996 11.05 18.3204 9.39581 16.9621 8.03748C15.6038 6.67914 13.9496 5.99998 11.9996 5.99998C10.0496 5.99998 8.39544 6.67914 7.03711 8.03748C5.67878 9.39581 4.99961 11.05 4.99961 13C4.99961 14.95 5.67878 16.6041 7.03711 17.9625C8.39544 19.3208 10.0496 20 11.9996 20Z" fill="black"/>
     </svg>
     کلیک کنید
-    <svg data-testid="test-button-trailing-slot" slot="trailing-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg data-testid="test-button-trailing-slot" slot=${Slots.TRAILING_ICON} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M11.9996 22C10.7496 22 9.57878 21.7625 8.48711 21.2875C7.39544 20.8125 6.44544 20.1708 5.63711 19.3625C4.82878 18.5541 4.18711 17.6041 3.71211 16.5125C3.23711 15.4208 2.99961 14.25 2.99961 13C2.99961 11.75 3.23711 10.5791 3.71211 9.48748C4.18711 8.39581 4.82878 7.44581 5.63711 6.63748C6.44544 5.82914 7.39544 5.18748 8.48711 4.71248C9.57878 4.23748 10.7496 3.99998 11.9996 3.99998C13.2496 3.99998 14.4204 4.23748 15.5121 4.71248C16.6038 5.18748 17.5538 5.82914 18.3621 6.63748C19.1704 7.44581 19.8121 8.39581 20.2871 9.48748C20.7621 10.5791 20.9996 11.75 20.9996 13C20.9996 14.25 20.7621 15.4208 20.2871 16.5125C19.8121 17.6041 19.1704 18.5541 18.3621 19.3625C17.5538 20.1708 16.6038 20.8125 15.5121 21.2875C14.4204 21.7625 13.2496 22 11.9996 22ZM14.7996 17.2L16.1996 15.8L12.9996 12.6V7.99998H10.9996V13.4L14.7996 17.2ZM5.59961 2.34998L6.99961 3.74998L2.74961 7.99998L1.34961 6.59998L5.59961 2.34998ZM18.3996 2.34998L22.6496 6.59998L21.2496 7.99998L16.9996 3.74998L18.3996 2.34998ZM11.9996 20C13.9496 20 15.6038 19.3208 16.9621 17.9625C18.3204 16.6041 18.9996 14.95 18.9996 13C18.9996 11.05 18.3204 9.39581 16.9621 8.03748C15.6038 6.67914 13.9496 5.99998 11.9996 5.99998C10.0496 5.99998 8.39544 6.67914 7.03711 8.03748C5.67878 9.39581 4.99961 11.05 4.99961 13C4.99961 14.95 5.67878 16.6041 7.03711 17.9625C8.39544 19.3208 10.0496 20 11.9996 20Z" fill="black"/>
     </svg>
 </tapsi-button>`,

diff --git a/packages/web-components/src/chip/chip.test.ts b/packages/web-components/src/chip/chip.test.ts
@@ -1,4 +1,5 @@
 import { describe, expect, render, test } from "@internals/test-helpers";
+import { Slots } from "./constants.ts";
 
 describe("🧩 chip", () => {
   test("🧪 should toggle with keyboard interaction", async ({ page }) => {
@@ -41,11 +42,11 @@ describe("🧩 chip", () => {
       page,
       `
 <tapsi-chip data-testid="test-chip" value="value">
-    <svg data-testid="test-chip-leading-slot" slot="leading-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg data-testid="test-chip-leading-slot" slot=${Slots.LEADING_ICON} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M11.9996 22C10.7496 22 9.57878 21.7625 8.48711 21.2875C7.39544 20.8125 6.44544 20.1708 5.63711 19.3625C4.82878 18.5541 4.18711 17.6041 3.71211 16.5125C3.23711 15.4208 2.99961 14.25 2.99961 13C2.99961 11.75 3.23711 10.5791 3.71211 9.48748C4.18711 8.39581 4.82878 7.44581 5.63711 6.63748C6.44544 5.82914 7.39544 5.18748 8.48711 4.71248C9.57878 4.23748 10.7496 3.99998 11.9996 3.99998C13.2496 3.99998 14.4204 4.23748 15.5121 4.71248C16.6038 5.18748 17.5538 5.82914 18.3621 6.63748C19.1704 7.44581 19.8121 8.39581 20.2871 9.48748C20.7621 10.5791 20.9996 11.75 20.9996 13C20.9996 14.25 20.7621 15.4208 20.2871 16.5125C19.8121 17.6041 19.1704 18.5541 18.3621 19.3625C17.5538 20.1708 16.6038 20.8125 15.5121 21.2875C14.4204 21.7625 13.2496 22 11.9996 22ZM14.7996 17.2L16.1996 15.8L12.9996 12.6V7.99998H10.9996V13.4L14.7996 17.2ZM5.59961 2.34998L6.99961 3.74998L2.74961 7.99998L1.34961 6.59998L5.59961 2.34998ZM18.3996 2.34998L22.6496 6.59998L21.2496 7.99998L16.9996 3.74998L18.3996 2.34998ZM11.9996 20C13.9496 20 15.6038 19.3208 16.9621 17.9625C18.3204 16.6041 18.9996 14.95 18.9996 13C18.9996 11.05 18.3204 9.39581 16.9621 8.03748C15.6038 6.67914 13.9496 5.99998 11.9996 5.99998C10.0496 5.99998 8.39544 6.67914 7.03711 8.03748C5.67878 9.39581 4.99961 11.05 4.99961 13C4.99961 14.95 5.67878 16.6041 7.03711 17.9625C8.39544 19.3208 10.0496 20 11.9996 20Z" fill="black"/>
     </svg>
     چیپ
-    <svg data-testid="test-chip-trailing-slot" slot="trailing-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg data-testid="test-chip-trailing-slot" slot=${Slots.TRAILING_ICON} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M11.9996 22C10.7496 22 9.57878 21.7625 8.48711 21.2875C7.39544 20.8125 6.44544 20.1708 5.63711 19.3625C4.82878 18.5541 4.18711 17.6041 3.71211 16.5125C3.23711 15.4208 2.99961 14.25 2.99961 13C2.99961 11.75 3.23711 10.5791 3.71211 9.48748C4.18711 8.39581 4.82878 7.44581 5.63711 6.63748C6.44544 5.82914 7.39544 5.18748 8.48711 4.71248C9.57878 4.23748 10.7496 3.99998 11.9996 3.99998C13.2496 3.99998 14.4204 4.23748 15.5121 4.71248C16.6038 5.18748 17.5538 5.82914 18.3621 6.63748C19.1704 7.44581 19.8121 8.39581 20.2871 9.48748C20.7621 10.5791 20.9996 11.75 20.9996 13C20.9996 14.25 20.7621 15.4208 20.2871 16.5125C19.8121 17.6041 19.1704 18.5541 18.3621 19.3625C17.5538 20.1708 16.6038 20.8125 15.5121 21.2875C14.4204 21.7625 13.2496 22 11.9996 22ZM14.7996 17.2L16.1996 15.8L12.9996 12.6V7.99998H10.9996V13.4L14.7996 17.2ZM5.59961 2.34998L6.99961 3.74998L2.74961 7.99998L1.34961 6.59998L5.59961 2.34998ZM18.3996 2.34998L22.6496 6.59998L21.2496 7.99998L16.9996 3.74998L18.3996 2.34998ZM11.9996 20C13.9496 20 15.6038 19.3208 16.9621 17.9625C18.3204 16.6041 18.9996 14.95 18.9996 13C18.9996 11.05 18.3204 9.39581 16.9621 8.03748C15.6038 6.67914 13.9496 5.99998 11.9996 5.99998C10.0496 5.99998 8.39544 6.67914 7.03711 8.03748C5.67878 9.39581 4.99961 11.05 4.99961 13C4.99961 14.95 5.67878 16.6041 7.03711 17.9625C8.39544 19.3208 10.0496 20 11.9996 20Z" fill="black"/>
     </svg>
 </tapsi-chip>`,

diff --git a/packages/web-components/src/discount-card/discount-card.test.ts b/packages/web-components/src/discount-card/discount-card.test.ts
@@ -8,7 +8,7 @@ import {
   render,
   test,
 } from "@internals/test-helpers";
-import { ErrorMessages } from "./constants.ts";
+import { ErrorMessages, Slots } from "./constants.ts";
 
 describe("🧩 discount-card", () => {
   const scope = "discount-card";
@@ -47,7 +47,7 @@ describe("🧩 discount-card", () => {
         badge-text="10%"
         expiry-date-label="Expires in 2 days"
       >
-        <svg slot="header-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg slot=${Slots.HEADER_ICON} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor"/>
         </svg>
       </tapsi-discount-card>`,
@@ -84,11 +84,11 @@ describe("🧩 discount-card", () => {
         badge-text="10%"
         expiry-date-label="Expires in 2 days"
       >
-        <svg data-testid="header-icon" slot="header-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg data-testid="header-icon" slot=${Slots.HEADER_ICON} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor"/>
         </svg>
-        <img data-testid="thumbnail" slot="thumbnail" src="https://picsum.photos/60/60" alt="Thumbnail" />
-        <tapsi-button data-testid="action-button" slot="action">Use Discount</tapsi-button>
+        <img data-testid="thumbnail" slot=${Slots.THUMBNAIL} src="https://picsum.photos/60/60" alt="Thumbnail" />
+        <tapsi-button data-testid="action-button" slot=${Slots.ACTION}>Use Discount</tapsi-button>
       </tapsi-discount-card>`,
     );
 
@@ -131,7 +131,7 @@ describe("🧩 discount-card", () => {
         badge-text="10%"
         expiry-date-label="Expires in 2 days"
       >
-        <svg slot="header-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg slot=${Slots.HEADER_ICON} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor"/>
         </svg>
       </tapsi-discount-card>`,
@@ -235,7 +235,7 @@ describe("🧩 discount-card", () => {
           ${
             variant !== "none"
               ? `
-          <svg slot="header-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg slot=${Slots.HEADER_ICON} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor"/>
           </svg>
           `
@@ -312,13 +312,13 @@ describe("🧩 discount-card", () => {
         ${
           variant !== "none"
             ? `
-        <svg slot="header-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg slot=${Slots.HEADER_ICON} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor"/>
         </svg>
         `
             : ""
         }
-        <tapsi-button slot="action">Use Discount</tapsi-button>
+        <tapsi-button slot=${Slots.ACTION}>Use Discount</tapsi-button>
       </tapsi-discount-card>`,
       );