diff --git a/src/generated/tokens/primitives.css b/src/generated/tokens/primitives.css
index 9c08259e..ee6b1748 100644
--- a/src/generated/tokens/primitives.css
+++ b/src/generated/tokens/primitives.css
@@ -1,148 +1,3 @@
-:root {
-
-  /* COLOR */
-  /* pure */
-  --color-pure-0: #ffffff;
-  --color-pure-500: #151519;
-  --color-pure-1000: #151519;
-  /* cool */
-  --color-cool-10: #f8fbff;
-  --color-cool-20: #f3f6fa;
-  --color-cool-30: #e0e3e9;
-  --color-cool-40: #ced2db;
-  --color-cool-50: #8d95a3;
-  --color-cool-60: #7a8190;
-  --color-cool-70: #545963;
-  --color-cool-80: #2c2f36;
-  --color-cool-90: #1d1e23;
-  --color-cool-100: #0c0d0e;
-  /* warm */
-  --color-warm-10: #fafafa;
-  --color-warm-20: #f6f6f6;
-  --color-warm-30: #ececec;
-  --color-warm-40: #dedede;
-  --color-warm-50: #b9b9b9;
-  --color-warm-60: #858585;
-  --color-warm-70: #585858;
-  --color-warm-80: #313131;
-  --color-warm-90: #1d1e23;
-  --color-warm-100: #151519;
-  /* blue */
-  --color-blue-10: #f1f8ff;
-  --color-blue-20: #e2f1ff;
-  --color-blue-30: #b7dbff;
-  --color-blue-40: #7ebeff;
-  --color-blue-50: #599fe5;
-  --color-blue-60: #0073e6;
-  --color-blue-70: #0061c2;
-  --color-blue-80: #004d99;
-  --color-blue-90: #002c58;
-  --color-blue-100: #101b25;
-  /* green */
-  --color-green-10: #ecfff7;
-  --color-green-20: #d8ffef;
-  --color-green-30: #beefdb;
-  --color-green-40: #84dab6;
-  --color-green-50: #67b796;
-  --color-green-60: #00864f;
-  --color-green-70: #006d3f;
-  --color-green-80: #005f38;
-  --color-green-90: #00331e;
-  --color-green-100: #081711;
-  /* red */
-  --color-red-10: #fff0f1;
-  --color-red-20: #ffe1e4;
-  --color-red-30: #ffb3bb;
-  --color-red-40: #f98c97;
-  --color-red-50: #f36170;
-  --color-red-60: #d70015;
-  --color-red-70: #b50012;
-  --color-red-80: #8f000e;
-  --color-red-90: #520008;
-  --color-red-100: #220f11;
-  /* orange */
-  --color-orange-10: #fef2e2;
-  --color-orange-20: #ffe7c6;
-  --color-orange-30: #ffd292;
-  --color-orange-40: #ffb348;
-  --color-orange-50: #f5a230;
-  --color-orange-60: #ae6500;
-  --color-orange-70: #965802;
-  --color-orange-80: #764502;
-  --color-orange-90: #402600;
-  --color-orange-100: #1e1100;
-  /* purple */
-  --color-purple-10: #f7f0ff;
-  --color-purple-20: #efe1ff;
-  --color-purple-30: #dcc1fb;
-  --color-purple-40: #cea4ff;
-  --color-purple-50: #9b71df;
-  --color-purple-60: #7e0cff;
-  --color-purple-70: #6400d6;
-  --color-purple-80: #43008f;
-  --color-purple-90: #260052;
-  --color-purple-100: #180f22;
-  /* yellow */
-  --color-yellow-10: #fff7d4;
-  --color-yellow-20: #ffea89;
-  --color-yellow-30: #f3d961;
-  --color-yellow-40: #dbb91c;
-  --color-yellow-50: #c2a728;
-  --color-yellow-60: #8d7400;
-  --color-yellow-70: #766200;
-  --color-yellow-80: #564908;
-  --color-yellow-90: #352b00;
-  --color-yellow-100: #181400;
-  /* teal */
-  --color-teal-10: #ecffff;
-  --color-teal-20: #d9ffff;
-  --color-teal-30: #bcfbfb;
-  --color-teal-40: #91e1e1;
-  --color-teal-50: #65c4c4;
-  --color-teal-60: #1a8080;
-  --color-teal-70: #017474;
-  --color-teal-80: #005b5b;
-  --color-teal-90: #003535;
-  --color-teal-100: #0a1616;
-  /* pink */
-  --color-pink-10: #fff7fc;
-  --color-pink-20: #ffe3f5;
-  --color-pink-30: #ffbee7;
-  --color-pink-40: #ff94d8;
-  --color-pink-50: #ee78c3;
-  --color-pink-60: #d30589;
-  --color-pink-70: #ab006d;
-  --color-pink-80: #840054;
-  --color-pink-90: #640040;
-  --color-pink-100: #2e001e;
-
-  /* RADIUS */
-  --radius-s: 4px;
-  --radius-m: 8px;
-  --radius-l: 16px;
-  --radius-xl: 24px;
-  --radius-2xl: 32px;
-  --radius-3xl: 128px;
-  --radius-4xl: 360px;
-
-  /* SPACING */
-  --spacing-0: 0px;
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-7: 28px;
-  --spacing-8: 32px;
-  --spacing-9: 36px;
-  --spacing-10: 40px;
-  --spacing-11: 44px;
-  --spacing-12: 48px;
-  --spacing-13: 64px;
-  --spacing-14: 80px;
-  --spacing-15: 96px;
-}
 @media (prefers-color-scheme: dark){
   :root {
   
@@ -290,3 +145,149 @@
     --spacing-15: 96px;
   }
 }
+
+:root {
+
+  /* COLOR */
+  /* pure */
+  --color-pure-0: #ffffff;
+  --color-pure-500: #151519;
+  --color-pure-1000: #151519;
+  /* cool */
+  --color-cool-10: #f8fbff;
+  --color-cool-20: #f3f6fa;
+  --color-cool-30: #e0e3e9;
+  --color-cool-40: #ced2db;
+  --color-cool-50: #8d95a3;
+  --color-cool-60: #7a8190;
+  --color-cool-70: #545963;
+  --color-cool-80: #2c2f36;
+  --color-cool-90: #1d1e23;
+  --color-cool-100: #0c0d0e;
+  /* warm */
+  --color-warm-10: #fafafa;
+  --color-warm-20: #f6f6f6;
+  --color-warm-30: #ececec;
+  --color-warm-40: #dedede;
+  --color-warm-50: #b9b9b9;
+  --color-warm-60: #858585;
+  --color-warm-70: #585858;
+  --color-warm-80: #313131;
+  --color-warm-90: #1d1e23;
+  --color-warm-100: #151519;
+  /* blue */
+  --color-blue-10: #f1f8ff;
+  --color-blue-20: #e2f1ff;
+  --color-blue-30: #b7dbff;
+  --color-blue-40: #7ebeff;
+  --color-blue-50: #599fe5;
+  --color-blue-60: #0073e6;
+  --color-blue-70: #0061c2;
+  --color-blue-80: #004d99;
+  --color-blue-90: #002c58;
+  --color-blue-100: #101b25;
+  /* green */
+  --color-green-10: #ecfff7;
+  --color-green-20: #d8ffef;
+  --color-green-30: #beefdb;
+  --color-green-40: #84dab6;
+  --color-green-50: #67b796;
+  --color-green-60: #00864f;
+  --color-green-70: #006d3f;
+  --color-green-80: #005f38;
+  --color-green-90: #00331e;
+  --color-green-100: #081711;
+  /* red */
+  --color-red-10: #fff0f1;
+  --color-red-20: #ffe1e4;
+  --color-red-30: #ffb3bb;
+  --color-red-40: #f98c97;
+  --color-red-50: #f36170;
+  --color-red-60: #d70015;
+  --color-red-70: #b50012;
+  --color-red-80: #8f000e;
+  --color-red-90: #520008;
+  --color-red-100: #220f11;
+  /* orange */
+  --color-orange-10: #fef2e2;
+  --color-orange-20: #ffe7c6;
+  --color-orange-30: #ffd292;
+  --color-orange-40: #ffb348;
+  --color-orange-50: #f5a230;
+  --color-orange-60: #ae6500;
+  --color-orange-70: #965802;
+  --color-orange-80: #764502;
+  --color-orange-90: #402600;
+  --color-orange-100: #1e1100;
+  /* purple */
+  --color-purple-10: #f7f0ff;
+  --color-purple-20: #efe1ff;
+  --color-purple-30: #dcc1fb;
+  --color-purple-40: #cea4ff;
+  --color-purple-50: #9b71df;
+  --color-purple-60: #7e0cff;
+  --color-purple-70: #6400d6;
+  --color-purple-80: #43008f;
+  --color-purple-90: #260052;
+  --color-purple-100: #180f22;
+  /* yellow */
+  --color-yellow-10: #fff7d4;
+  --color-yellow-20: #ffea89;
+  --color-yellow-30: #f3d961;
+  --color-yellow-40: #dbb91c;
+  --color-yellow-50: #c2a728;
+  --color-yellow-60: #8d7400;
+  --color-yellow-70: #766200;
+  --color-yellow-80: #564908;
+  --color-yellow-90: #352b00;
+  --color-yellow-100: #181400;
+  /* teal */
+  --color-teal-10: #ecffff;
+  --color-teal-20: #d9ffff;
+  --color-teal-30: #bcfbfb;
+  --color-teal-40: #91e1e1;
+  --color-teal-50: #65c4c4;
+  --color-teal-60: #1a8080;
+  --color-teal-70: #017474;
+  --color-teal-80: #005b5b;
+  --color-teal-90: #003535;
+  --color-teal-100: #0a1616;
+  /* pink */
+  --color-pink-10: #fff7fc;
+  --color-pink-20: #ffe3f5;
+  --color-pink-30: #ffbee7;
+  --color-pink-40: #ff94d8;
+  --color-pink-50: #ee78c3;
+  --color-pink-60: #d30589;
+  --color-pink-70: #ab006d;
+  --color-pink-80: #840054;
+  --color-pink-90: #640040;
+  --color-pink-100: #2e001e;
+
+  /* RADIUS */
+  --radius-s: 4px;
+  --radius-m: 8px;
+  --radius-l: 16px;
+  --radius-xl: 24px;
+  --radius-2xl: 32px;
+  --radius-3xl: 128px;
+  --radius-4xl: 360px;
+
+  /* SPACING */
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-11: 44px;
+  --spacing-12: 48px;
+  --spacing-13: 64px;
+  --spacing-14: 80px;
+  --spacing-15: 96px;
+}
\ No newline at end of file
diff --git a/src/generated/tokens/semantics.css b/src/generated/tokens/semantics.css
index 6c8aeb8d..b9c5db3d 100644
--- a/src/generated/tokens/semantics.css
+++ b/src/generated/tokens/semantics.css
@@ -1,128 +1,3 @@
-:root {
-
-  /* SURFACE */
-  --surface-default: var(--color-pure-0);
-  --surface-default-inverse: var(--color-warm-100);
-  --surface-hover: var(--color-cool-20);
-  --surface-selected: var(--color-blue-10);
-  --surface-selected-hover: var(--color-blue-20);
-  --surface-disabled: var(--color-cool-30);
-  --surface-cool: var(--color-cool-10);
-  --surface-warm: var(--color-warm-10);
-  --surface-primary: var(--color-blue-60);
-  --surface-primary-subtle: var(--color-blue-10);
-  --surface-secondary: var(--color-yellow-60);
-  /* avatar */
-  --surface-avatar-blue: var(--color-blue-80);
-  --surface-avatar-green: var(--color-green-60);
-  --surface-avatar-orange: var(--color-orange-50);
-  --surface-avatar-pink: var(--color-pink-80);
-  --surface-avatar-purple: var(--color-purple-80);
-  --surface-avatar-teal: var(--color-teal-80);
-  --surface-avatar-yellow: var(--color-yellow-50);
-  --surface-secondary-subtle: var(--color-yellow-10);
-  --surface-positive: var(--color-green-60);
-  --surface-positive-subtle: var(--color-green-10);
-  --surface-warning: var(--color-orange-60);
-  --surface-warning-subtle: var(--color-orange-10);
-  --surface-negative: var(--color-red-60);
-  --surface-negative-subtle: var(--color-red-10);
-  --surface-info: var(--color-purple-60);
-  --surface-info-subtle: var(--color-purple-10);
-
-  /* BORDER */
-  --border-default: var(--color-cool-40);
-  --border-selected: var(--color-cool-90);
-  --border-hover: var(--color-cool-90);
-  --border-subtle: var(--color-cool-30);
-  --border-disabled: var(--color-cool-20);
-  --border-pure: var(--color-pure-0);
-  --border-primary-main: var(--color-blue-60);
-  --border-primary: var(--color-blue-50);
-  --border-secondary: var(--color-yellow-50);
-  --border-positive: var(--color-green-50);
-  --border-warning: var(--color-orange-50);
-  --border-negative: var(--color-red-50);
-  --border-info: var(--color-purple-50);
-
-  /* MAIN */
-  --main-default: var(--color-cool-90);
-  --main-subtle: var(--color-cool-70);
-  --main-primary: var(--color-blue-60);
-  --main-secondary: var(--color-yellow-60);
-  --main-positive: var(--color-green-60);
-  --main-warning: var(--color-orange-60);
-  --main-negative: var(--color-red-60);
-  --main-info: var(--color-purple-60);
-  --main-disabled: var(--color-cool-50);
-  --main-light: var(--color-cool-30);
-  --main-inverse: var(--color-cool-20);
-
-  /* STATE */
-  /* disabled */
-  --state-disabled-disabled: var(--color-cool-30);
-  /* default */
-  --state-default-enabled: var(--color-pure-0);
-  --state-default-hover: var(--color-cool-20);
-  --state-default-selected: var(--color-blue-10);
-  --state-default-focus: var(--color-pure-0);
-  /* primary */
-  --state-primary-enabled: var(--color-blue-60);
-  --state-primary-hover: var(--color-blue-50);
-  --state-primary-selected: var(--color-blue-70);
-  --state-primary-focus: var(--color-blue-60);
-  /* secondary */
-  --state-secondary-enabled: var(--color-yellow-40);
-  --state-secondary-hover: var(--color-yellow-30);
-  --state-secondary-selected: var(--color-yellow-50);
-  --state-secondary-focus: var(--color-yellow-40);
-  /* negative */
-  --state-negative-enabled: var(--color-red-60);
-  --state-negative-hover: var(--color-red-50);
-  --state-negative-selected: var(--color-red-70);
-  --state-negative-focus: var(--color-red-60);
-  /* info */
-  --state-info-enabled: var(--color-purple-60);
-  --state-info-hover: var(--color-purple-50);
-  --state-info-selected: var(--color-purple-70);
-  --state-info-focus: var(--color-purple-60);
-  /* Inverse */
-  --state-inverse-enabled: var(--color-cool-100);
-  --state-inverse-hover: var(--color-cool-90);
-  --state-inverse-selected: var(--color-cool-100);
-  --state-inverse-focus: var(--color-cool-100);
-  /* positive */
-  --state-positive-enabled: var(--color-green-60);
-  --state-positive-hover: var(--color-green-50);
-  --state-positive-selected: var(--color-green-70);
-  --state-positive-focus: var(--color-green-60);
-
-  /* SPACING */
-  --spacing-none: var(--spacing-0);
-  --spacing-minimum: var(--spacing-1);
-  --spacing-small: var(--spacing-2);
-  --spacing-medium: var(--spacing-3);
-  --spacing-large: var(--spacing-4);
-  --spacing-xl: var(--spacing-5);
-  --spacing-2xl: var(--spacing-6);
-  --spacing-3xl: var(--spacing-7);
-  --spacing-4xl: var(--spacing-8);
-  --spacing-5xl: var(--spacing-9);
-  --spacing-6xl: var(--spacing-10);
-  --spacing-7xl: var(--spacing-11);
-  --spacing-8xl: var(--spacing-12);
-  --spacing-9xl: var(--spacing-13);
-  --spacing-10xl: var(--spacing-14);
-  --spacing-11xl: var(--spacing-15);
-
-  /* RADIUS */
-  --radius-none: 0px;
-  --radius-minimal: var(--radius-s);
-  --radius-rounded: var(--radius-m);
-  --radius-large: var(--radius-l);
-  --radius-xl: var(--radius-xl);
-  --radius-full: var(--radius-4xl);
-}
 @media (prefers-contrast: more){
   :root {
   
@@ -250,3 +125,129 @@
     --radius-full: 0px;
   }
 }
+
+:root {
+
+  /* SURFACE */
+  --surface-default: var(--color-pure-0);
+  --surface-default-inverse: var(--color-warm-100);
+  --surface-hover: var(--color-cool-20);
+  --surface-selected: var(--color-blue-10);
+  --surface-selected-hover: var(--color-blue-20);
+  --surface-disabled: var(--color-cool-30);
+  --surface-cool: var(--color-cool-10);
+  --surface-warm: var(--color-warm-10);
+  --surface-primary: var(--color-blue-60);
+  --surface-primary-subtle: var(--color-blue-10);
+  --surface-secondary: var(--color-yellow-60);
+  /* avatar */
+  --surface-avatar-blue: var(--color-blue-80);
+  --surface-avatar-green: var(--color-green-60);
+  --surface-avatar-orange: var(--color-orange-50);
+  --surface-avatar-pink: var(--color-pink-80);
+  --surface-avatar-purple: var(--color-purple-80);
+  --surface-avatar-teal: var(--color-teal-80);
+  --surface-avatar-yellow: var(--color-yellow-50);
+  --surface-secondary-subtle: var(--color-yellow-10);
+  --surface-positive: var(--color-green-60);
+  --surface-positive-subtle: var(--color-green-10);
+  --surface-warning: var(--color-orange-60);
+  --surface-warning-subtle: var(--color-orange-10);
+  --surface-negative: var(--color-red-60);
+  --surface-negative-subtle: var(--color-red-10);
+  --surface-info: var(--color-purple-60);
+  --surface-info-subtle: var(--color-purple-10);
+
+  /* BORDER */
+  --border-default: var(--color-cool-40);
+  --border-selected: var(--color-cool-90);
+  --border-hover: var(--color-cool-90);
+  --border-subtle: var(--color-cool-30);
+  --border-disabled: var(--color-cool-20);
+  --border-pure: var(--color-pure-0);
+  --border-primary-main: var(--color-blue-60);
+  --border-primary: var(--color-blue-50);
+  --border-secondary: var(--color-yellow-50);
+  --border-positive: var(--color-green-50);
+  --border-warning: var(--color-orange-50);
+  --border-negative: var(--color-red-50);
+  --border-info: var(--color-purple-50);
+
+  /* MAIN */
+  --main-default: var(--color-cool-90);
+  --main-subtle: var(--color-cool-70);
+  --main-primary: var(--color-blue-60);
+  --main-secondary: var(--color-yellow-60);
+  --main-positive: var(--color-green-60);
+  --main-warning: var(--color-orange-60);
+  --main-negative: var(--color-red-60);
+  --main-info: var(--color-purple-60);
+  --main-disabled: var(--color-cool-50);
+  --main-light: var(--color-cool-30);
+  --main-inverse: var(--color-cool-20);
+
+  /* STATE */
+  /* disabled */
+  --state-disabled-disabled: var(--color-cool-30);
+  /* default */
+  --state-default-enabled: var(--color-pure-0);
+  --state-default-hover: var(--color-cool-20);
+  --state-default-selected: var(--color-blue-10);
+  --state-default-focus: var(--color-pure-0);
+  /* primary */
+  --state-primary-enabled: var(--color-blue-60);
+  --state-primary-hover: var(--color-blue-50);
+  --state-primary-selected: var(--color-blue-70);
+  --state-primary-focus: var(--color-blue-60);
+  /* secondary */
+  --state-secondary-enabled: var(--color-yellow-40);
+  --state-secondary-hover: var(--color-yellow-30);
+  --state-secondary-selected: var(--color-yellow-50);
+  --state-secondary-focus: var(--color-yellow-40);
+  /* negative */
+  --state-negative-enabled: var(--color-red-60);
+  --state-negative-hover: var(--color-red-50);
+  --state-negative-selected: var(--color-red-70);
+  --state-negative-focus: var(--color-red-60);
+  /* info */
+  --state-info-enabled: var(--color-purple-60);
+  --state-info-hover: var(--color-purple-50);
+  --state-info-selected: var(--color-purple-70);
+  --state-info-focus: var(--color-purple-60);
+  /* Inverse */
+  --state-inverse-enabled: var(--color-cool-100);
+  --state-inverse-hover: var(--color-cool-90);
+  --state-inverse-selected: var(--color-cool-100);
+  --state-inverse-focus: var(--color-cool-100);
+  /* positive */
+  --state-positive-enabled: var(--color-green-60);
+  --state-positive-hover: var(--color-green-50);
+  --state-positive-selected: var(--color-green-70);
+  --state-positive-focus: var(--color-green-60);
+
+  /* SPACING */
+  --spacing-none: var(--spacing-0);
+  --spacing-minimum: var(--spacing-1);
+  --spacing-small: var(--spacing-2);
+  --spacing-medium: var(--spacing-3);
+  --spacing-large: var(--spacing-4);
+  --spacing-xl: var(--spacing-5);
+  --spacing-2xl: var(--spacing-6);
+  --spacing-3xl: var(--spacing-7);
+  --spacing-4xl: var(--spacing-8);
+  --spacing-5xl: var(--spacing-9);
+  --spacing-6xl: var(--spacing-10);
+  --spacing-7xl: var(--spacing-11);
+  --spacing-8xl: var(--spacing-12);
+  --spacing-9xl: var(--spacing-13);
+  --spacing-10xl: var(--spacing-14);
+  --spacing-11xl: var(--spacing-15);
+
+  /* RADIUS */
+  --radius-none: 0px;
+  --radius-minimal: var(--radius-s);
+  --radius-rounded: var(--radius-m);
+  --radius-large: var(--radius-l);
+  --radius-xl: var(--radius-xl);
+  --radius-full: var(--radius-4xl);
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 94b12b19..6ca60699 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -146,4 +146,4 @@ export {
   ZetaTopAppbar,
   ZetaUploadItem,
   ZetaWorkcloudIndicator
-};
\ No newline at end of file
+};
diff --git a/src/test/test-results.xml b/src/test/test-results.xml
index a1e1d6ea..6693cc43 100644
--- a/src/test/test-results.xml
+++ b/src/test/test-results.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <testsuites>
-  <testsuite name="Chromium_playwright_/src/test/action-menu/action-menu-button.test.ts" id="0" tests="6" skipped="0" errors="0" failures="0" time="0.082">
+  <testsuite name="Chromium_playwright_/src/test/action-menu/action-menu-button.test.ts" id="0" tests="6" skipped="0" errors="0" failures="0" time="0.083">
     <properties>
       <property name="test.fileName" value="src/test/action-menu/action-menu-button.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -8,121 +8,121 @@
     </properties>
     <testcase name="meets accessability requirements" time="0.075" classname="zeta-action-menu-button Accessibility" file="src/test/action-menu/action-menu-button.test.ts"/>
     <testcase name="aligns the zeta droppable to the start" time="0.003" classname="zeta-action-menu-button Dimensions" file="src/test/action-menu/action-menu-button.test.ts"/>
-    <testcase name="aligns the zeta droppable to the center" time="0.002" classname="zeta-action-menu-button Dimensions" file="src/test/action-menu/action-menu-button.test.ts"/>
+    <testcase name="aligns the zeta droppable to the center" time="0.001" classname="zeta-action-menu-button Dimensions" file="src/test/action-menu/action-menu-button.test.ts"/>
     <testcase name="aligns the zeta droppable to the end" time="0.001" classname="zeta-action-menu-button Dimensions" file="src/test/action-menu/action-menu-button.test.ts"/>
-    <testcase name="opens the action menu when clicked" time="0" classname="zeta-action-menu-button Interaction" file="src/test/action-menu/action-menu-button.test.ts"/>
+    <testcase name="opens the action menu when clicked" time="0.002" classname="zeta-action-menu-button Interaction" file="src/test/action-menu/action-menu-button.test.ts"/>
     <testcase name="closes the dropdown menu when clicked outside" time="0.001" classname="zeta-action-menu-button Interaction" file="src/test/action-menu/action-menu-button.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/avatar/avatar.test.ts" id="0" tests="8" skipped="0" errors="0" failures="0" time="0.010000000000000002">
+  <testsuite name="Chromium_playwright_/src/test/avatar/avatar.test.ts" id="0" tests="8" skipped="0" errors="0" failures="0" time="0.009000000000000001">
     <properties>
       <property name="test.fileName" value="src/test/avatar/avatar.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="renders the avatar with a custom size" time="0.005" classname="zeta-avatar Content" file="src/test/avatar/avatar.test.ts"/>
+    <testcase name="renders the avatar with a custom size" time="0.004" classname="zeta-avatar Content" file="src/test/avatar/avatar.test.ts"/>
     <testcase name="renders the avatar with the ring" time="0.001" classname="zeta-avatar Content" file="src/test/avatar/avatar.test.ts"/>
     <testcase name="renders the avatar without the ring" time="0" classname="zeta-avatar Content" file="src/test/avatar/avatar.test.ts"/>
     <testcase name="renders the avatar with the close icon" time="0.001" classname="zeta-avatar Content" file="src/test/avatar/avatar.test.ts"/>
     <testcase name="renders the avatar without the close icon" time="0" classname="zeta-avatar Content" file="src/test/avatar/avatar.test.ts"/>
     <testcase name="renders the avatar with an image" time="0.001" classname="zeta-avatar Content" file="src/test/avatar/avatar.test.ts"/>
-    <testcase name="renders the avatar with an icon" time="0.001" classname="zeta-avatar Content" file="src/test/avatar/avatar.test.ts"/>
-    <testcase name="renders the badge on the avatar" time="0.001" classname="zeta-avatar Content" file="src/test/avatar/avatar.test.ts"/>
+    <testcase name="renders the avatar with an icon" time="0" classname="zeta-avatar Content" file="src/test/avatar/avatar.test.ts"/>
+    <testcase name="renders the badge on the avatar" time="0.002" classname="zeta-avatar Content" file="src/test/avatar/avatar.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/bottom-sheets/bottom-sheet.test.ts" id="0" tests="18" skipped="0" errors="0" failures="0" time="0.236">
+  <testsuite name="Chromium_playwright_/src/test/bottom-sheets/bottom-sheet.test.ts" id="0" tests="18" skipped="0" errors="0" failures="0" time="0.243">
     <properties>
       <property name="test.fileName" value="src/test/bottom-sheets/bottom-sheet.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="it meets accessibility requirements" time="0.115" classname="zeta-bottom-sheet + zeta-list-item Accessibility" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
-    <testcase name="renders the bottom sheet" time="0.001" classname="zeta-bottom-sheet + zeta-list-item Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
-    <testcase name="displays the header text correctly" time="0.001" classname="zeta-bottom-sheet + zeta-list-item Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
+    <testcase name="it meets accessibility requirements" time="0.107" classname="zeta-bottom-sheet + zeta-list-item Accessibility" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
+    <testcase name="renders the bottom sheet" time="0" classname="zeta-bottom-sheet + zeta-list-item Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
+    <testcase name="displays the header text correctly" time="0" classname="zeta-bottom-sheet + zeta-list-item Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
     <testcase name="updates when isExpanded changes" time="0" classname="zeta-bottom-sheet + zeta-list-item Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
-    <testcase name="applies the correct header alignment" time="0" classname="zeta-bottom-sheet + zeta-list-item Dimensions" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
+    <testcase name="applies the correct header alignment" time="0.001" classname="zeta-bottom-sheet + zeta-list-item Dimensions" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
     <testcase name="applies the correct css display for list items" time="0" classname="zeta-bottom-sheet + zeta-list-item Dimensions" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
-    <testcase name="it meets accessibility requirements" time="0.039" classname="zeta-bottom-sheet + zeta-grid-menu-item Accessibility" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
+    <testcase name="it meets accessibility requirements" time="0.044" classname="zeta-bottom-sheet + zeta-grid-menu-item Accessibility" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
     <testcase name="renders the bottom sheet" time="0" classname="zeta-bottom-sheet + zeta-grid-menu-item Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
-    <testcase name="displays the header text correctly" time="0" classname="zeta-bottom-sheet + zeta-grid-menu-item Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
-    <testcase name="updates when isExpanded changes" time="0" classname="zeta-bottom-sheet + zeta-grid-menu-item Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
+    <testcase name="displays the header text correctly" time="0.001" classname="zeta-bottom-sheet + zeta-grid-menu-item Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
+    <testcase name="updates when isExpanded changes" time="0.001" classname="zeta-bottom-sheet + zeta-grid-menu-item Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
     <testcase name="applies the correct header alignment" time="0.001" classname="zeta-bottom-sheet + zeta-grid-menu-item Dimensions" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
     <testcase name="applies the correct css display for grid items" time="0" classname="zeta-bottom-sheet + zeta-grid-menu-item Dimensions" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
-    <testcase name="it meets accessibility requirements" time="0.078" classname="zeta-bottom-sheet + generic content Accessibility" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
+    <testcase name="it meets accessibility requirements" time="0.086" classname="zeta-bottom-sheet + generic content Accessibility" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
     <testcase name="renders the bottom sheet" time="0" classname="zeta-bottom-sheet + generic content Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
     <testcase name="displays the header text correctly" time="0.001" classname="zeta-bottom-sheet + generic content Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
     <testcase name="updates when isExpanded changes" time="0" classname="zeta-bottom-sheet + generic content Content" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
-    <testcase name="applies the correct header alignment" time="0" classname="zeta-bottom-sheet + generic content Dimensions" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
+    <testcase name="applies the correct header alignment" time="0.001" classname="zeta-bottom-sheet + generic content Dimensions" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
     <testcase name="applies the correct css display for generic content" time="0" classname="zeta-bottom-sheet + generic content Dimensions" file="src/test/bottom-sheets/bottom-sheet.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/breadcrumbs/breadcrumb.test.ts" id="0" tests="4" skipped="1" errors="0" failures="0" time="0.096">
+  <testsuite name="Chromium_playwright_/src/test/breadcrumbs/breadcrumb.test.ts" id="0" tests="4" skipped="1" errors="0" failures="0" time="0.107">
     <properties>
       <property name="test.fileName" value="src/test/breadcrumbs/breadcrumb.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.095" classname="zeta-breadcrumb Accessibility" file="src/test/breadcrumbs/breadcrumb.test.ts"/>
-    <testcase name="renders the correct number of breadcrumb items" time="0.001" classname="zeta-breadcrumb Content" file="src/test/breadcrumbs/breadcrumb.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.107" classname="zeta-breadcrumb Accessibility" file="src/test/breadcrumbs/breadcrumb.test.ts"/>
+    <testcase name="renders the correct number of breadcrumb items" time="0" classname="zeta-breadcrumb Content" file="src/test/breadcrumbs/breadcrumb.test.ts"/>
     <testcase name="renders the truncated breadcrumb " time="0" classname="zeta-breadcrumb Content" file="src/test/breadcrumbs/breadcrumb.test.ts"/>
     <testcase name="renders the correct number of breadcrumb items after the more menu has been clicked" time="0" classname="zeta-breadcrumb Interaction" file="src/test/breadcrumbs/breadcrumb.test.ts">
       <skipped/>
     </testcase>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/button/button.test.ts" id="0" tests="5" skipped="0" errors="0" failures="0" time="0.085">
+  <testsuite name="Chromium_playwright_/src/test/button/button.test.ts" id="0" tests="5" skipped="0" errors="0" failures="0" time="0.104">
     <properties>
       <property name="test.fileName" value="src/test/button/button.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.082" classname="zeta-button Accessibility" file="src/test/button/button.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.102" classname="zeta-button Accessibility" file="src/test/button/button.test.ts"/>
     <testcase name="should render the correct text within the button" time="0" classname="zeta-button Content" file="src/test/button/button.test.ts"/>
     <testcase name="should reset forms" time="0.001" classname="zeta-button AS form reset control Interaction" file="src/test/button/button.test.ts"/>
     <testcase name="should not reset forms if disabled via JS" time="0.001" classname="zeta-button AS form reset control Interaction" file="src/test/button/button.test.ts"/>
-    <testcase name="should not reset forms if disabled via DOM" time="0.001" classname="zeta-button AS form reset control Interaction" file="src/test/button/button.test.ts"/>
+    <testcase name="should not reset forms if disabled via DOM" time="0" classname="zeta-button AS form reset control Interaction" file="src/test/button/button.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/button/icon-button.test.ts" id="0" tests="25" skipped="0" errors="0" failures="0" time="0.21899999999999997">
+  <testsuite name="Chromium_playwright_/src/test/button/icon-button.test.ts" id="0" tests="25" skipped="0" errors="0" failures="0" time="0.16800000000000004">
     <properties>
       <property name="test.fileName" value="src/test/button/icon-button.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements for the primary flavor" time="0.091" classname="zeta-icon-button Accessibility" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="meets accessibility requirements for the positive flavor" time="0.027" classname="zeta-icon-button Accessibility" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="meets accessibility requirements for the negative flavor" time="0.029" classname="zeta-icon-button Accessibility" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="meets accessibility requirements for the outline flavor" time="0.018" classname="zeta-icon-button Accessibility" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="meets accessibility requirements for the outline-subtle flavor" time="0.019" classname="zeta-icon-button Accessibility" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="meets accessibility requirements for the text flavor" time="0.021" classname="zeta-icon-button Accessibility" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="meets accessibility requirements for the primary flavor" time="0.068" classname="zeta-icon-button Accessibility" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="meets accessibility requirements for the positive flavor" time="0.019" classname="zeta-icon-button Accessibility" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="meets accessibility requirements for the negative flavor" time="0.019" classname="zeta-icon-button Accessibility" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="meets accessibility requirements for the outline flavor" time="0.017" classname="zeta-icon-button Accessibility" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="meets accessibility requirements for the outline-subtle flavor" time="0.018" classname="zeta-icon-button Accessibility" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="meets accessibility requirements for the text flavor" time="0.015" classname="zeta-icon-button Accessibility" file="src/test/button/icon-button.test.ts"/>
     <testcase name="should render the correct icon" time="0.001" classname="zeta-icon-button Content" file="src/test/button/icon-button.test.ts"/>
     <testcase name="should display correct icon color when disabled" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
     <testcase name="should display correct icon color for primary flavor" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
     <testcase name="should display correct icon color for negative flavor" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="should display correct icon color for text flavor" time="0" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="should display correct icon color for text flavor" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
     <testcase name="should display correct icon color for outline-subtle flavor" time="0" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
     <testcase name="button should have correct background color for the primary flavor" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
     <testcase name="button should have correct background color for the secondary flavor" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="button should have correct background color for the positive flavor" time="0" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="button should have correct background color for the negative flavor" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="button should have correct background color for the outline flavor" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="button should have correct background color for the positive flavor" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="button should have correct background color for the negative flavor" time="0" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="button should have correct background color for the outline flavor" time="0" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
     <testcase name="button should have correct background color for the outline-subtle flavor" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="button should have correct background color for the text flavor" time="0" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="button should have correct background color for the text flavor" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
     <testcase name="should render the button with the correct color when set by CSS Variable" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="should render the icon with the correct color when set by CSS Variable" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="should render the icon with the correct color when disabled when set by CSS Variable" time="0.001" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="should render the icon with the correct color when set by CSS Variable" time="0" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="should render the icon with the correct color when disabled when set by CSS Variable" time="0" classname="zeta-icon-button Styling" file="src/test/button/icon-button.test.ts"/>
     <testcase name="should reset forms" time="0.001" classname="zeta-icon-button AS form reset control Interaction" file="src/test/button/icon-button.test.ts"/>
-    <testcase name="should not reset forms if disabled via JS" time="0.001" classname="zeta-icon-button AS form reset control Interaction" file="src/test/button/icon-button.test.ts"/>
+    <testcase name="should not reset forms if disabled via JS" time="0" classname="zeta-icon-button AS form reset control Interaction" file="src/test/button/icon-button.test.ts"/>
     <testcase name="should not reset forms if disabled via DOM" time="0" classname="zeta-icon-button AS form reset control Interaction" file="src/test/button/icon-button.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/card/card-header.test.ts" id="0" tests="5" skipped="0" errors="0" failures="0" time="0.075">
+  <testsuite name="Chromium_playwright_/src/test/card/card-header.test.ts" id="0" tests="5" skipped="0" errors="0" failures="0" time="0.105">
     <properties>
       <property name="test.fileName" value="src/test/card/card-header.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessability requirements" time="0.075" classname="zeta-card-header Accessibility" file="src/test/card/card-header.test.ts"/>
-    <testcase name="sets the heading correctly" time="0" classname="zeta-card-header Content" file="src/test/card/card-header.test.ts"/>
+    <testcase name="meets accessability requirements" time="0.104" classname="zeta-card-header Accessibility" file="src/test/card/card-header.test.ts"/>
+    <testcase name="sets the heading correctly" time="0.001" classname="zeta-card-header Content" file="src/test/card/card-header.test.ts"/>
     <testcase name="sets the subheading correctly" time="0" classname="zeta-card-header Content" file="src/test/card/card-header.test.ts"/>
     <testcase name="sets the leading content correctly" time="0" classname="zeta-card-header Content" file="src/test/card/card-header.test.ts"/>
     <testcase name="sets the trailing content correctly" time="0" classname="zeta-card-header Content" file="src/test/card/card-header.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/checkbox/checkbox.test.ts" id="0" tests="7" skipped="0" errors="0" failures="0" time="0.002">
+  <testsuite name="Chromium_playwright_/src/test/checkbox/checkbox.test.ts" id="0" tests="7" skipped="0" errors="0" failures="0" time="0.004">
     <properties>
       <property name="test.fileName" value="src/test/checkbox/checkbox.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -132,9 +132,9 @@
     <testcase name="sets the id attribute correctly" time="0" classname="zeta-checkbox Content" file="src/test/checkbox/checkbox.test.ts"/>
     <testcase name="creates from document.createElement" time="0" classname="zeta-checkbox Content" file="src/test/checkbox/checkbox.test.ts"/>
     <testcase name="creates from constructor" time="0" classname="zeta-checkbox Content" file="src/test/checkbox/checkbox.test.ts"/>
-    <testcase name="changes the checked state when clicked" time="0.001" classname="zeta-checkbox Interaction" file="src/test/checkbox/checkbox.test.ts"/>
+    <testcase name="changes the checked state when clicked" time="0.002" classname="zeta-checkbox Interaction" file="src/test/checkbox/checkbox.test.ts"/>
     <testcase name="renders the checkbox label correctly" time="0" classname="zeta-checkbox + label Content" file="src/test/checkbox/checkbox.test.ts"/>
-    <testcase name="checks the checkbox when label text is clicked" time="0" classname="zeta-checkbox + label Interaction" file="src/test/checkbox/checkbox.test.ts"/>
+    <testcase name="checks the checkbox when label text is clicked" time="0.001" classname="zeta-checkbox + label Interaction" file="src/test/checkbox/checkbox.test.ts"/>
     <system-out><![CDATA[Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.]]></system-out>
     <system-out><![CDATA[Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.]]></system-out>
     <system-out><![CDATA[Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.]]></system-out>
@@ -143,19 +143,19 @@
     <system-out><![CDATA[Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.]]></system-out>
     <system-out><![CDATA[Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.]]></system-out>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/dialog/dialog.test.ts" id="0" tests="5" skipped="0" errors="0" failures="0" time="0.009999999999999998">
+  <testsuite name="Chromium_playwright_/src/test/dialog/dialog.test.ts" id="0" tests="5" skipped="0" errors="0" failures="0" time="0.013000000000000001">
     <properties>
       <property name="test.fileName" value="src/test/dialog/dialog.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="creates from document.createElement" time="0.001" classname="zeta-dialog Content" file="src/test/dialog/dialog.test.ts"/>
+    <testcase name="creates from document.createElement" time="0.002" classname="zeta-dialog Content" file="src/test/dialog/dialog.test.ts"/>
     <testcase name="creates from constructor" time="0" classname="zeta-dialog Content" file="src/test/dialog/dialog.test.ts"/>
     <testcase name="changes open property on open" time="0.009" classname="zeta-dialog Content" file="src/test/dialog/dialog.test.ts"/>
-    <testcase name="changes open property on close" time="0" classname="zeta-dialog Content" file="src/test/dialog/dialog.test.ts"/>
-    <testcase name="calls close method and sets return value" time="0" classname="zeta-dialog Content" file="src/test/dialog/dialog.test.ts"/>
+    <testcase name="changes open property on close" time="0.001" classname="zeta-dialog Content" file="src/test/dialog/dialog.test.ts"/>
+    <testcase name="calls close method and sets return value" time="0.001" classname="zeta-dialog Content" file="src/test/dialog/dialog.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/dropdown/dropdown-menu-button.test.ts" id="0" tests="10" skipped="1" errors="0" failures="0" time="0.032">
+  <testsuite name="Chromium_playwright_/src/test/dropdown/dropdown-menu-button.test.ts" id="0" tests="10" skipped="1" errors="0" failures="0" time="0.025">
     <properties>
       <property name="test.fileName" value="src/test/dropdown/dropdown-menu-button.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -164,15 +164,15 @@
     <testcase name="meets accessability requirements" time="0" classname="zeta-dropdown-menu-button Accessibility" file="src/test/dropdown/dropdown-menu-button.test.ts">
       <skipped/>
     </testcase>
-    <testcase name="renders the text correctly" time="0" classname="zeta-dropdown-menu-button Content" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
-    <testcase name="has the same width as the zeta droppable" time="0.003" classname="zeta-dropdown-menu-button Dimensions" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
+    <testcase name="renders the text correctly" time="0.001" classname="zeta-dropdown-menu-button Content" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
+    <testcase name="has the same width as the zeta droppable" time="0.002" classname="zeta-dropdown-menu-button Dimensions" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
     <testcase name="aligns the zeta droppable to the bottom of the dropdown menu button" time="0.002" classname="zeta-dropdown-menu-button Dimensions" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
     <testcase name="opens the dropdown menu when clicked" time="0.002" classname="zeta-dropdown-menu-button Interaction" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
-    <testcase name="closes the dropdown menu when clicked outside" time="0.003" classname="zeta-dropdown-menu-button Interaction" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
+    <testcase name="closes the dropdown menu when clicked outside" time="0.002" classname="zeta-dropdown-menu-button Interaction" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
     <testcase name="closes the dropdown menu when clicked inside" time="0.002" classname="zeta-dropdown-menu-button Interaction" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
     <testcase name="returns the selected item when a wrapping form is submitted" time="0.002" classname="zeta-dropdown-menu-button Interaction" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
-    <testcase name="returns the selected checkboxes when a wrapping form is submitted" time="0.011" classname="zeta-dropdown-menu-button Interaction" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
-    <testcase name="returns the selected radio button when a wrapping form is submitted" time="0.007" classname="zeta-dropdown-menu-button Interaction" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
+    <testcase name="returns the selected checkboxes when a wrapping form is submitted" time="0.006" classname="zeta-dropdown-menu-button Interaction" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
+    <testcase name="returns the selected radio button when a wrapping form is submitted" time="0.006" classname="zeta-dropdown-menu-button Interaction" file="src/test/dropdown/dropdown-menu-button.test.ts"/>
     <system-out><![CDATA[FormData]]></system-out>
     <system-out><![CDATA[[object Object]]]></system-out>
     <system-out><![CDATA[FormData]]></system-out>
@@ -194,7 +194,7 @@
     <system-out><![CDATA[FormData]]></system-out>
     <system-out><![CDATA[[object Object]]]></system-out>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/dropdown/dropdown-menu-item.test.ts" id="0" tests="11" skipped="2" errors="0" failures="0" time="0.097">
+  <testsuite name="Chromium_playwright_/src/test/dropdown/dropdown-menu-item.test.ts" id="0" tests="11" skipped="2" errors="0" failures="0" time="0.096">
     <properties>
       <property name="test.fileName" value="src/test/dropdown/dropdown-menu-item.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -202,10 +202,10 @@
     </properties>
     <testcase name="meets accessability requirements" time="0.091" classname="zeta-dropdown-menu-item Accessibility" file="src/test/dropdown/dropdown-menu-item.test.ts"/>
     <testcase name="renders the given text" time="0" classname="zeta-dropdown-menu-item Content" file="src/test/dropdown/dropdown-menu-item.test.ts"/>
-    <testcase name="renders an icon with the correct name with the &apos;default&apos; type" time="0" classname="zeta-dropdown-menu-item Content" file="src/test/dropdown/dropdown-menu-item.test.ts"/>
+    <testcase name="renders an icon with the correct name with the &apos;default&apos; type" time="0.001" classname="zeta-dropdown-menu-item Content" file="src/test/dropdown/dropdown-menu-item.test.ts"/>
     <testcase name="sets the rounded attribute correctly" time="0" classname="zeta-dropdown-menu-item Content" file="src/test/dropdown/dropdown-menu-item.test.ts"/>
     <testcase name="sets the disabled attribute correctly" time="0" classname="zeta-dropdown-menu-item Content" file="src/test/dropdown/dropdown-menu-item.test.ts"/>
-    <testcase name="sets the correct colors when not disabled" time="0.002" classname="zeta-dropdown-menu-item Styling" file="src/test/dropdown/dropdown-menu-item.test.ts"/>
+    <testcase name="sets the correct colors when not disabled" time="0.001" classname="zeta-dropdown-menu-item Styling" file="src/test/dropdown/dropdown-menu-item.test.ts"/>
     <testcase name="sets the correct colors when disabled" time="0" classname="zeta-dropdown-menu-item Styling" file="src/test/dropdown/dropdown-menu-item.test.ts"/>
     <testcase name="sets the correct icon color when not disabled" time="0" classname="zeta-dropdown-menu-item Styling" file="src/test/dropdown/dropdown-menu-item.test.ts">
       <skipped/>
@@ -214,99 +214,102 @@
       <skipped/>
     </testcase>
     <testcase name="sets the correct border radius when rounded is true" time="0.001" classname="zeta-dropdown-menu-item Styling" file="src/test/dropdown/dropdown-menu-item.test.ts"/>
-    <testcase name="sets the correct border radius when rounded is false" time="0.003" classname="zeta-dropdown-menu-item Styling" file="src/test/dropdown/dropdown-menu-item.test.ts"/>
+    <testcase name="sets the correct border radius when rounded is false" time="0.002" classname="zeta-dropdown-menu-item Styling" file="src/test/dropdown/dropdown-menu-item.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/dropdown/droppable.test.ts" id="0" tests="7" skipped="0" errors="0" failures="0" time="0.061">
+  <testsuite name="Chromium_playwright_/src/test/dropdown/droppable.test.ts" id="0" tests="7" skipped="0" errors="0" failures="0" time="0.065">
     <properties>
       <property name="test.fileName" value="src/test/dropdown/droppable.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessability requirements" time="0.059" classname="zeta-droppable Accessibility" file="src/test/dropdown/droppable.test.ts"/>
+    <testcase name="meets accessability requirements" time="0.062" classname="zeta-droppable Accessibility" file="src/test/dropdown/droppable.test.ts"/>
     <testcase name="sets the open attribute correctly" time="0.001" classname="zeta-droppable Content" file="src/test/dropdown/droppable.test.ts"/>
     <testcase name="is visible when open is true" time="0" classname="zeta-droppable Content" file="src/test/dropdown/droppable.test.ts"/>
-    <testcase name="is not visible when open is false" time="0" classname="zeta-droppable Content" file="src/test/dropdown/droppable.test.ts"/>
-    <testcase name="sets the rounded attribute correctly" time="0.001" classname="zeta-droppable Content" file="src/test/dropdown/droppable.test.ts"/>
-    <testcase name="sets the correct border radius when rounded is true" time="0" classname="zeta-droppable Styling" file="src/test/dropdown/droppable.test.ts"/>
+    <testcase name="is not visible when open is false" time="0.001" classname="zeta-droppable Content" file="src/test/dropdown/droppable.test.ts"/>
+    <testcase name="sets the rounded attribute correctly" time="0" classname="zeta-droppable Content" file="src/test/dropdown/droppable.test.ts"/>
+    <testcase name="sets the correct border radius when rounded is true" time="0.001" classname="zeta-droppable Styling" file="src/test/dropdown/droppable.test.ts"/>
     <testcase name="sets the correct border radius when rounded is false" time="0" classname="zeta-droppable Styling" file="src/test/dropdown/droppable.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/fab/fab.test.ts" id="0" tests="12" skipped="0" errors="0" failures="0" time="0.12200000000000001">
+  <testsuite name="Chromium_playwright_/src/test/fab/fab.test.ts" id="0" tests="12" skipped="0" errors="0" failures="0" time="0.10600000000000001">
     <properties>
       <property name="test.fileName" value="src/test/fab/fab.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessability requirements" time="0.112" classname="zeta-fab Accessibility" file="src/test/fab/fab.test.ts"/>
-    <testcase name="renders a button with a label" time="0" classname="zeta-fab Content" file="src/test/fab/fab.test.ts"/>
+    <testcase name="meets accessability requirements" time="0.095" classname="zeta-fab Accessibility" file="src/test/fab/fab.test.ts"/>
+    <testcase name="renders a button with a label" time="0.001" classname="zeta-fab Content" file="src/test/fab/fab.test.ts"/>
     <testcase name="renders a button with an icon" time="0" classname="zeta-fab Content" file="src/test/fab/fab.test.ts"/>
-    <testcase name="renders no label when label is empty" time="0.001" classname="zeta-fab Content" file="src/test/fab/fab.test.ts"/>
+    <testcase name="renders no label when label is empty" time="0" classname="zeta-fab Content" file="src/test/fab/fab.test.ts"/>
     <testcase name="renders an extended fab" time="0.001" classname="zeta-fab Content" file="src/test/fab/fab.test.ts"/>
-    <testcase name="renders a default fab" time="0.001" classname="zeta-fab Content" file="src/test/fab/fab.test.ts"/>
+    <testcase name="renders a default fab" time="0" classname="zeta-fab Content" file="src/test/fab/fab.test.ts"/>
     <testcase name="renders a small fab" time="0.001" classname="zeta-fab Dimensions" file="src/test/fab/fab.test.ts"/>
-    <testcase name="renders a large fab" time="0.001" classname="zeta-fab Dimensions" file="src/test/fab/fab.test.ts"/>
+    <testcase name="renders a large fab" time="0.002" classname="zeta-fab Dimensions" file="src/test/fab/fab.test.ts"/>
     <testcase name="renders a full rounded fab" time="0" classname="zeta-fab Styling" file="src/test/fab/fab.test.ts"/>
     <testcase name="renders a rounded small fab" time="0.002" classname="zeta-fab Styling" file="src/test/fab/fab.test.ts"/>
-    <testcase name="renders a rounded large fab" time="0.001" classname="zeta-fab Styling" file="src/test/fab/fab.test.ts"/>
+    <testcase name="renders a rounded large fab" time="0.002" classname="zeta-fab Styling" file="src/test/fab/fab.test.ts"/>
     <testcase name="renders a non-rounded fab" time="0.002" classname="zeta-fab Styling" file="src/test/fab/fab.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/file-upload/file-upload.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.115">
+  <testsuite name="Chromium_playwright_/src/test/file-upload/file-upload.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.128">
     <properties>
       <property name="test.fileName" value="src/test/file-upload/file-upload.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.115" classname="zeta-file-upload Accessibility" file="src/test/file-upload/file-upload.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.128" classname="zeta-file-upload Accessibility" file="src/test/file-upload/file-upload.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/file-upload/upload-item.test.ts" id="0" tests="5" skipped="0" errors="0" failures="0" time="0.012000000000000004">
+  <testsuite name="Chromium_playwright_/src/test/file-upload/upload-item.test.ts" id="0" tests="5" skipped="0" errors="0" failures="0" time="0.013000000000000001">
     <properties>
       <property name="test.fileName" value="src/test/file-upload/upload-item.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="renders default flavor correctly" time="0.008" classname="zeta-upload-item Content" file="src/test/file-upload/upload-item.test.ts"/>
+    <testcase name="renders default flavor correctly" time="0.007" classname="zeta-upload-item Content" file="src/test/file-upload/upload-item.test.ts"/>
     <testcase name="renders completed flavor correctly" time="0.001" classname="zeta-upload-item Content" file="src/test/file-upload/upload-item.test.ts"/>
     <testcase name="renders error flavor correctly" time="0.001" classname="zeta-upload-item Content" file="src/test/file-upload/upload-item.test.ts"/>
     <testcase name="updates progress correctly" time="0.001" classname="zeta-upload-item Content" file="src/test/file-upload/upload-item.test.ts"/>
-    <testcase name="fires ZetaCancelUploadEventDetail when close icon is clicked" time="0.001" classname="zeta-upload-item Interaction" file="src/test/file-upload/upload-item.test.ts"/>
+    <testcase name="fires ZetaCancelUploadEventDetail when close icon is clicked" time="0.003" classname="zeta-upload-item Interaction" file="src/test/file-upload/upload-item.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/global-header/global-header.test.ts" id="0" tests="3" skipped="0" errors="0" failures="0" time="0.08900000000000001">
+  <testsuite name="Chromium_playwright_/src/test/global-header/global-header.test.ts" id="0" tests="3" skipped="0" errors="1" failures="1" time="0.063">
     <properties>
       <property name="test.fileName" value="src/test/global-header/global-header.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.067" classname="zeta-global-header Accessibility" file="src/test/global-header/global-header.test.ts"/>
-    <testcase name="renders background color" time="0.001" classname="zeta-global-header Styling" file="src/test/global-header/global-header.test.ts"/>
-    <testcase name="renders background in dark-mode" time="0.021" classname="zeta-global-header Styling" file="src/test/global-header/global-header.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.058" classname="zeta-global-header Accessibility" file="src/test/global-header/global-header.test.ts"/>
+    <testcase name="renders background color" time="0" classname="zeta-global-header Styling" file="src/test/global-header/global-header.test.ts"/>
+    <testcase name="renders background in dark-mode" time="0.005" classname="zeta-global-header Styling" file="src/test/global-header/global-header.test.ts" line="41">
+      <failure message="expected &apos;rgb(255, 255, 255)&apos; to not equal &apos;rgb(255, 255, 255)&apos;" type="AssertionError"><![CDATA[AssertionError: expected 'rgb(255, 255, 255)' to not equal 'rgb(255, 255, 255)'
+  at n.<anonymous> (src/test/global-header/global-header.test.ts?wtr-session-id=K1UbVi7EuAnmL2a6FLrit:41:44)]]></failure>
+    </testcase>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/grid-menu-item/grid-menu-item.test.ts" id="0" tests="4" skipped="0" errors="0" failures="0" time="0.09">
+  <testsuite name="Chromium_playwright_/src/test/grid-menu-item/grid-menu-item.test.ts" id="0" tests="4" skipped="0" errors="0" failures="0" time="0.074">
     <properties>
       <property name="test.fileName" value="src/test/grid-menu-item/grid-menu-item.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.089" classname="zeta-grid-menu-item Accessibility" file="src/test/grid-menu-item/grid-menu-item.test.ts"/>
-    <testcase name="renders the given icon" time="0.001" classname="zeta-grid-menu-item Content" file="src/test/grid-menu-item/grid-menu-item.test.ts"/>
-    <testcase name="renders the given label" time="0" classname="zeta-grid-menu-item Content" file="src/test/grid-menu-item/grid-menu-item.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.073" classname="zeta-grid-menu-item Accessibility" file="src/test/grid-menu-item/grid-menu-item.test.ts"/>
+    <testcase name="renders the given icon" time="0" classname="zeta-grid-menu-item Content" file="src/test/grid-menu-item/grid-menu-item.test.ts"/>
+    <testcase name="renders the given label" time="0.001" classname="zeta-grid-menu-item Content" file="src/test/grid-menu-item/grid-menu-item.test.ts"/>
     <testcase name="renders the given badge" time="0" classname="zeta-grid-menu-item Content" file="src/test/grid-menu-item/grid-menu-item.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/in-page-banner/in-page-banner.test.ts" id="0" tests="3" skipped="0" errors="0" failures="0" time="0.116">
+  <testsuite name="Chromium_playwright_/src/test/in-page-banner/in-page-banner.test.ts" id="0" tests="3" skipped="0" errors="0" failures="0" time="0.083">
     <properties>
       <property name="test.fileName" value="src/test/in-page-banner/in-page-banner.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.116" classname="zeta-in-page-banner Accessibility" file="src/test/in-page-banner/in-page-banner.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.083" classname="zeta-in-page-banner Accessibility" file="src/test/in-page-banner/in-page-banner.test.ts"/>
     <testcase name="sets the heading correctly" time="0" classname="zeta-in-page-banner Content" file="src/test/in-page-banner/in-page-banner.test.ts"/>
     <testcase name="sets the subheading correctly" time="0" classname="zeta-in-page-banner Content" file="src/test/in-page-banner/in-page-banner.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/navigation-bar/navigation-bar.test.ts" id="0" tests="6" skipped="1" errors="0" failures="0" time="0.111">
+  <testsuite name="Chromium_playwright_/src/test/navigation-bar/navigation-bar.test.ts" id="0" tests="6" skipped="1" errors="0" failures="0" time="0.087">
     <properties>
       <property name="test.fileName" value="src/test/navigation-bar/navigation-bar.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessability requirements" time="0.11" classname="zeta-navigation-bar Accessibility" file="src/test/navigation-bar/navigation-bar.test.ts"/>
+    <testcase name="meets accessability requirements" time="0.086" classname="zeta-navigation-bar Accessibility" file="src/test/navigation-bar/navigation-bar.test.ts"/>
     <testcase name="renders the correct number of navigation bar items" time="0" classname="zeta-navigation-bar Content" file="src/test/navigation-bar/navigation-bar.test.ts"/>
     <testcase name="renders the correct label and icon for each navigation bar item" time="0" classname="zeta-navigation-bar Content" file="src/test/navigation-bar/navigation-bar.test.ts"/>
     <testcase name="renders the correct badge content for each navigation bar item" time="0" classname="zeta-navigation-bar Content" file="src/test/navigation-bar/navigation-bar.test.ts"/>
@@ -315,39 +318,39 @@
       <skipped/>
     </testcase>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/navigation-drawer/navigation-drawer.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.054">
+  <testsuite name="Chromium_playwright_/src/test/navigation-drawer/navigation-drawer.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.053">
     <properties>
       <property name="test.fileName" value="src/test/navigation-drawer/navigation-drawer.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.054" classname="zeta-navigation-drawer Accessibility" file="src/test/navigation-drawer/navigation-drawer.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.053" classname="zeta-navigation-drawer Accessibility" file="src/test/navigation-drawer/navigation-drawer.test.ts"/>
     <system-out><![CDATA[Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.]]></system-out>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/navigation-drawer-footer/navigation-drawer-footer.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.08">
+  <testsuite name="Chromium_playwright_/src/test/navigation-drawer-footer/navigation-drawer-footer.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.078">
     <properties>
       <property name="test.fileName" value="src/test/navigation-drawer-footer/navigation-drawer-footer.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.08" classname="zeta-navigation-drawer-footer Accessibility" file="src/test/navigation-drawer-footer/navigation-drawer-footer.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.078" classname="zeta-navigation-drawer-footer Accessibility" file="src/test/navigation-drawer-footer/navigation-drawer-footer.test.ts"/>
     <system-out><![CDATA[Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.]]></system-out>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/navigation-drawer-item/navigation-drawer-item.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.072">
+  <testsuite name="Chromium_playwright_/src/test/navigation-drawer-item/navigation-drawer-item.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.071">
     <properties>
       <property name="test.fileName" value="src/test/navigation-drawer-item/navigation-drawer-item.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.072" classname="zeta-navigation-drawer-item Accessibility" file="src/test/navigation-drawer-item/navigation-drawer-item.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.071" classname="zeta-navigation-drawer-item Accessibility" file="src/test/navigation-drawer-item/navigation-drawer-item.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/navigation-drawer-sub-item/navigation-drawer-sub-item.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.068">
+  <testsuite name="Chromium_playwright_/src/test/navigation-drawer-sub-item/navigation-drawer-sub-item.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.069">
     <properties>
       <property name="test.fileName" value="src/test/navigation-drawer-sub-item/navigation-drawer-sub-item.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.068" classname="zeta-navigation-drawer-sub-item Accessibility" file="src/test/navigation-drawer-sub-item/navigation-drawer-sub-item.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.069" classname="zeta-navigation-drawer-sub-item Accessibility" file="src/test/navigation-drawer-sub-item/navigation-drawer-sub-item.test.ts"/>
   </testsuite>
   <testsuite name="Chromium_playwright_/src/test/navigation-header/navigation-header.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.047">
     <properties>
@@ -357,13 +360,13 @@
     </properties>
     <testcase name="meets accessibility requirements" time="0.047" classname="zeta-navigation-header Accessibility" file="src/test/navigation-header/navigation-header.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/navigation-profile/navigation-profile.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.048">
+  <testsuite name="Chromium_playwright_/src/test/navigation-profile/navigation-profile.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.049">
     <properties>
       <property name="test.fileName" value="src/test/navigation-profile/navigation-profile.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.048" classname="zeta-navigation-profile Accessibility" file="src/test/navigation-profile/navigation-profile.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.049" classname="zeta-navigation-profile Accessibility" file="src/test/navigation-profile/navigation-profile.test.ts"/>
   </testsuite>
   <testsuite name="Chromium_playwright_/src/test/navigation-rail/navigation-rail-item.test.ts" id="0" tests="4" skipped="1" errors="0" failures="0" time="0.007">
     <properties>
@@ -371,23 +374,23 @@
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="renders the label slot correctly" time="0.005" classname="zeta-navigation-rail-item Content" file="src/test/navigation-rail/navigation-rail-item.test.ts"/>
+    <testcase name="renders the label slot correctly" time="0.006" classname="zeta-navigation-rail-item Content" file="src/test/navigation-rail/navigation-rail-item.test.ts"/>
     <testcase name="renders the icon slot correctly" time="0.001" classname="zeta-navigation-rail-item Content" file="src/test/navigation-rail/navigation-rail-item.test.ts"/>
-    <testcase name="reflects the &apos;selected&apos; property correctly" time="0.001" classname="zeta-navigation-rail-item Content" file="src/test/navigation-rail/navigation-rail-item.test.ts"/>
+    <testcase name="reflects the &apos;selected&apos; property correctly" time="0" classname="zeta-navigation-rail-item Content" file="src/test/navigation-rail/navigation-rail-item.test.ts"/>
     <testcase name="goes to the correct href when clicked" time="0" classname="zeta-navigation-rail-item Interaction" file="src/test/navigation-rail/navigation-rail-item.test.ts">
       <skipped/>
     </testcase>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/navigation-rail/navigation-rail.test.ts" id="0" tests="2" skipped="0" errors="0" failures="0" time="0.009999999999999998">
+  <testsuite name="Chromium_playwright_/src/test/navigation-rail/navigation-rail.test.ts" id="0" tests="2" skipped="0" errors="0" failures="0" time="0.011">
     <properties>
       <property name="test.fileName" value="src/test/navigation-rail/navigation-rail.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="renders the navigation items" time="0.009" classname="zeta-navigation-rail Content" file="src/test/navigation-rail/navigation-rail.test.ts"/>
+    <testcase name="renders the navigation items" time="0.01" classname="zeta-navigation-rail Content" file="src/test/navigation-rail/navigation-rail.test.ts"/>
     <testcase name="hides any slotted elements that aren&apos;t zeta-navigation-rail-item" time="0.001" classname="zeta-navigation-rail Content" file="src/test/navigation-rail/navigation-rail.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/pagination/pagination.test.ts" id="0" tests="10" skipped="0" errors="0" failures="0" time="0.027999999999999997">
+  <testsuite name="Chromium_playwright_/src/test/pagination/pagination.test.ts" id="0" tests="10" skipped="0" errors="0" failures="0" time="0.02900000000000001">
     <properties>
       <property name="test.fileName" value="src/test/pagination/pagination.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -395,14 +398,14 @@
     </properties>
     <testcase name="creates from document.createElement" time="0.001" classname="zeta-pagination Content" file="src/test/pagination/pagination.test.ts"/>
     <testcase name="creates from constructor" time="0" classname="zeta-pagination Content" file="src/test/pagination/pagination.test.ts"/>
-    <testcase name="should disable left controls" time="0.011" classname="zeta-pagination Content" file="src/test/pagination/pagination.test.ts"/>
-    <testcase name="should disable right controls" time="0.003" classname="zeta-pagination Content" file="src/test/pagination/pagination.test.ts"/>
-    <testcase name="should not set invalid page" time="0.003" classname="zeta-pagination Content" file="src/test/pagination/pagination.test.ts"/>
+    <testcase name="should disable left controls" time="0.012" classname="zeta-pagination Content" file="src/test/pagination/pagination.test.ts"/>
+    <testcase name="should disable right controls" time="0.004" classname="zeta-pagination Content" file="src/test/pagination/pagination.test.ts"/>
+    <testcase name="should not set invalid page" time="0.002" classname="zeta-pagination Content" file="src/test/pagination/pagination.test.ts"/>
     <testcase name="should not set invalid page" time="0.002" classname="zeta-pagination Content" file="src/test/pagination/pagination.test.ts"/>
-    <testcase name="should show left and right dots" time="0.001" classname="zeta-pagination Content" file="src/test/pagination/pagination.test.ts"/>
+    <testcase name="should show left and right dots" time="0.002" classname="zeta-pagination Content" file="src/test/pagination/pagination.test.ts"/>
     <testcase name="should not show any dots" time="0.002" classname="zeta-pagination Content" file="src/test/pagination/pagination.test.ts"/>
     <testcase name="should increment page" time="0.003" classname="zeta-pagination Interaction" file="src/test/pagination/pagination.test.ts"/>
-    <testcase name="should decrement page" time="0.002" classname="zeta-pagination Interaction" file="src/test/pagination/pagination.test.ts"/>
+    <testcase name="should decrement page" time="0.001" classname="zeta-pagination Interaction" file="src/test/pagination/pagination.test.ts"/>
     <system-out><![CDATA[Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.]]></system-out>
     <system-out><![CDATA[Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.]]></system-out>
     <system-out><![CDATA[Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.]]></system-out>
@@ -414,15 +417,15 @@
     <system-out><![CDATA[Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.]]></system-out>
     <system-out><![CDATA[Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.]]></system-out>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/progress-bar/progress-bar.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.065">
+  <testsuite name="Chromium_playwright_/src/test/progress-bar/progress-bar.test.ts" id="0" tests="1" skipped="0" errors="0" failures="0" time="0.064">
     <properties>
       <property name="test.fileName" value="src/test/progress-bar/progress-bar.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.065" classname="zeta-progress-bar Accessibility" file="src/test/progress-bar/progress-bar.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.064" classname="zeta-progress-bar Accessibility" file="src/test/progress-bar/progress-bar.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/progress-circle/progress-circle.test.ts" id="0" tests="7" skipped="0" errors="0" failures="0" time="0.011000000000000001">
+  <testsuite name="Chromium_playwright_/src/test/progress-circle/progress-circle.test.ts" id="0" tests="7" skipped="0" errors="0" failures="0" time="0.011000000000000003">
     <properties>
       <property name="test.fileName" value="src/test/progress-circle/progress-circle.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -430,13 +433,13 @@
     </properties>
     <testcase name="creates from document.createElement" time="0.001" classname="zeta-progress-circle Content" file="src/test/progress-circle/progress-circle.test.ts"/>
     <testcase name="creates from constructor" time="0" classname="zeta-progress-circle Content" file="src/test/progress-circle/progress-circle.test.ts"/>
-    <testcase name="should set value to 100 if above 100" time="0.005" classname="zeta-progress-circle Content" file="src/test/progress-circle/progress-circle.test.ts"/>
-    <testcase name="should set value to 0 if below 0" time="0" classname="zeta-progress-circle Content" file="src/test/progress-circle/progress-circle.test.ts"/>
-    <testcase name="should set value " time="0" classname="zeta-progress-circle Content" file="src/test/progress-circle/progress-circle.test.ts"/>
-    <testcase name="should render uploading components" time="0.003" classname="zeta-progress-circle Content" file="src/test/progress-circle/progress-circle.test.ts"/>
-    <testcase name="should fire a ZetaCancelUploadEvent on button click" time="0.002" classname="zeta-progress-circle Interaction" file="src/test/progress-circle/progress-circle.test.ts"/>
+    <testcase name="should set value to 100 if above 100" time="0.006" classname="zeta-progress-circle Content" file="src/test/progress-circle/progress-circle.test.ts"/>
+    <testcase name="should set value to 0 if below 0" time="0.001" classname="zeta-progress-circle Content" file="src/test/progress-circle/progress-circle.test.ts"/>
+    <testcase name="should set value " time="0.001" classname="zeta-progress-circle Content" file="src/test/progress-circle/progress-circle.test.ts"/>
+    <testcase name="should render uploading components" time="0.001" classname="zeta-progress-circle Content" file="src/test/progress-circle/progress-circle.test.ts"/>
+    <testcase name="should fire a ZetaCancelUploadEvent on button click" time="0.001" classname="zeta-progress-circle Interaction" file="src/test/progress-circle/progress-circle.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/radio-button/radio-button.test.ts" id="0" tests="9" skipped="3" errors="0" failures="0" time="0.005">
+  <testsuite name="Chromium_playwright_/src/test/radio-button/radio-button.test.ts" id="0" tests="9" skipped="3" errors="0" failures="0" time="0.004">
     <properties>
       <property name="test.fileName" value="src/test/radio-button/radio-button.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -452,32 +455,32 @@
       <skipped/>
     </testcase>
     <testcase name="sets the name attribute correctly" time="0.002" classname="zeta-radio-button Content" file="src/test/radio-button/radio-button.test.ts"/>
-    <testcase name="sets the id attribute correctly" time="0.001" classname="zeta-radio-button Content" file="src/test/radio-button/radio-button.test.ts"/>
+    <testcase name="sets the id attribute correctly" time="0" classname="zeta-radio-button Content" file="src/test/radio-button/radio-button.test.ts"/>
     <testcase name="renders the radio button as unchecked by default" time="0" classname="zeta-radio-button Content" file="src/test/radio-button/radio-button.test.ts"/>
     <testcase name="changes the checked state when clicked" time="0.001" classname="zeta-radio-button Interaction" file="src/test/radio-button/radio-button.test.ts"/>
     <testcase name="renders the radio label correctly" time="0" classname="zeta-radio-button label Content" file="src/test/radio-button/radio-button.test.ts"/>
     <testcase name="checks the radio when label is clicked" time="0.001" classname="zeta-radio-button label Interaction" file="src/test/radio-button/radio-button.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/range-selector/range-selector.test.ts" id="0" tests="14" skipped="0" errors="0" failures="0" time="0.11">
+  <testsuite name="Chromium_playwright_/src/test/range-selector/range-selector.test.ts" id="0" tests="14" skipped="0" errors="0" failures="0" time="0.10300000000000001">
     <properties>
       <property name="test.fileName" value="src/test/range-selector/range-selector.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.103" classname="zeta-range-selector Accessibility" file="src/test/range-selector/range-selector.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.095" classname="zeta-range-selector Accessibility" file="src/test/range-selector/range-selector.test.ts"/>
     <testcase name="renders the zeta slider" time="0" classname="zeta-range-selector Content" file="src/test/range-selector/range-selector.test.ts"/>
     <testcase name="renders the label" time="0.001" classname="zeta-range-selector Content" file="src/test/range-selector/range-selector.test.ts"/>
-    <testcase name="renders the lower input field" time="0" classname="zeta-range-selector Content" file="src/test/range-selector/range-selector.test.ts"/>
+    <testcase name="renders the lower input field" time="0.001" classname="zeta-range-selector Content" file="src/test/range-selector/range-selector.test.ts"/>
     <testcase name="renders the upper input field" time="0" classname="zeta-range-selector Content" file="src/test/range-selector/range-selector.test.ts"/>
     <testcase name="sets the initial values correctly" time="0" classname="zeta-range-selector Content" file="src/test/range-selector/range-selector.test.ts"/>
-    <testcase name="sets the lower input width and height correctly" time="0.001" classname="zeta-range-selector Dimensions" file="src/test/range-selector/range-selector.test.ts"/>
-    <testcase name="sets the upper input width and height correctly" time="0.001" classname="zeta-range-selector Dimensions" file="src/test/range-selector/range-selector.test.ts"/>
+    <testcase name="sets the lower input width and height correctly" time="0" classname="zeta-range-selector Dimensions" file="src/test/range-selector/range-selector.test.ts"/>
+    <testcase name="sets the upper input width and height correctly" time="0" classname="zeta-range-selector Dimensions" file="src/test/range-selector/range-selector.test.ts"/>
     <testcase name="sets the correct styles for the label" time="0.001" classname="zeta-range-selector Styling" file="src/test/range-selector/range-selector.test.ts"/>
     <testcase name="sets the correct styles for the lower input" time="0" classname="zeta-range-selector Styling" file="src/test/range-selector/range-selector.test.ts"/>
-    <testcase name="sets the correct styles for the upper input" time="0.001" classname="zeta-range-selector Styling" file="src/test/range-selector/range-selector.test.ts"/>
+    <testcase name="sets the correct styles for the upper input" time="0" classname="zeta-range-selector Styling" file="src/test/range-selector/range-selector.test.ts"/>
     <testcase name="updates the hidden input value when the slider value changes" time="0.002" classname="zeta-range-selector Interaction" file="src/test/range-selector/range-selector.test.ts"/>
-    <testcase name="updates the slider value when the lower input value changes" time="0" classname="zeta-range-selector Interaction" file="src/test/range-selector/range-selector.test.ts"/>
-    <testcase name="updates the slider value when the lower input value changes" time="0" classname="zeta-range-selector Interaction" file="src/test/range-selector/range-selector.test.ts"/>
+    <testcase name="updates the slider value when the lower input value changes" time="0.001" classname="zeta-range-selector Interaction" file="src/test/range-selector/range-selector.test.ts"/>
+    <testcase name="updates the slider value when the lower input value changes" time="0.002" classname="zeta-range-selector Interaction" file="src/test/range-selector/range-selector.test.ts"/>
     <system-out><![CDATA[Element zeta-range-selector scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update. See https://lit.dev/msg/change-in-update for more information.]]></system-out>
     <system-out><![CDATA[[object Object]]]></system-out>
     <system-out><![CDATA[Element zeta-range-selector scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update. See https://lit.dev/msg/change-in-update for more information.]]></system-out>
@@ -507,7 +510,7 @@
     <system-out><![CDATA[Element zeta-range-selector scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update. See https://lit.dev/msg/change-in-update for more information.]]></system-out>
     <system-out><![CDATA[[object Object]]]></system-out>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/search/search.test.ts" id="0" tests="13" skipped="1" errors="0" failures="0" time="0.019000000000000003">
+  <testsuite name="Chromium_playwright_/src/test/search/search.test.ts" id="0" tests="13" skipped="1" errors="0" failures="0" time="0.020000000000000004">
     <properties>
       <property name="test.fileName" value="src/test/search/search.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -515,16 +518,16 @@
     </properties>
     <testcase name="creates from document.createElement" time="0.001" classname="zeta-search Content" file="src/test/search/search.test.ts"/>
     <testcase name="creates from constructor" time="0" classname="zeta-search Content" file="src/test/search/search.test.ts"/>
-    <testcase name="focus on input when field focused" time="0.009" classname="zeta-search Content" file="src/test/search/search.test.ts"/>
-    <testcase name="blur input when field is blurred" time="0.001" classname="zeta-search Content" file="src/test/search/search.test.ts"/>
+    <testcase name="focus on input when field focused" time="0.008" classname="zeta-search Content" file="src/test/search/search.test.ts"/>
+    <testcase name="blur input when field is blurred" time="0.002" classname="zeta-search Content" file="src/test/search/search.test.ts"/>
     <testcase name="should render microphone icon" time="0.002" classname="zeta-search Content" file="src/test/search/search.test.ts"/>
     <testcase name="should not render microphone icon" time="0.001" classname="zeta-search Content" file="src/test/search/search.test.ts"/>
-    <testcase name="should set correct default icon size" time="0" classname="zeta-search Dimensions" file="src/test/search/search.test.ts"/>
-    <testcase name="should set correct small icon size" time="0" classname="zeta-search Dimensions" file="src/test/search/search.test.ts"/>
+    <testcase name="should set correct default icon size" time="0.001" classname="zeta-search Dimensions" file="src/test/search/search.test.ts"/>
+    <testcase name="should set correct small icon size" time="0.001" classname="zeta-search Dimensions" file="src/test/search/search.test.ts"/>
     <testcase name="should set correct large icon size" time="0.001" classname="zeta-search Dimensions" file="src/test/search/search.test.ts"/>
     <testcase name="should set correct disabled icon color" time="0.001" classname="zeta-search Styling" file="src/test/search/search.test.ts"/>
     <testcase name="clears input" time="0.002" classname="zeta-search Interaction" file="src/test/search/search.test.ts"/>
-    <testcase name="should call input onchange" time="0.001" classname="zeta-search Interaction" file="src/test/search/search.test.ts"/>
+    <testcase name="should call input onchange" time="0" classname="zeta-search Interaction" file="src/test/search/search.test.ts"/>
     <testcase name="should not be activatable" time="0" classname="zeta-search Interaction" file="src/test/search/search.test.ts">
       <skipped/>
     </testcase>
@@ -542,13 +545,13 @@
     <system-out><![CDATA[resetInput]]></system-out>
     <system-out><![CDATA[resetInput]]></system-out>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/segmented-control/segmented-control.test.ts" id="0" tests="4" skipped="0" errors="0" failures="0" time="0.017">
+  <testsuite name="Chromium_playwright_/src/test/segmented-control/segmented-control.test.ts" id="0" tests="4" skipped="0" errors="0" failures="0" time="0.013000000000000001">
     <properties>
       <property name="test.fileName" value="src/test/segmented-control/segmented-control.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="renders the segmented control with the correct number of items" time="0.012" classname="zeta-segmented-control Content" file="src/test/segmented-control/segmented-control.test.ts"/>
+    <testcase name="renders the segmented control with the correct number of items" time="0.008" classname="zeta-segmented-control Content" file="src/test/segmented-control/segmented-control.test.ts"/>
     <testcase name="sets the first item as active by default" time="0.001" classname="zeta-segmented-control Content" file="src/test/segmented-control/segmented-control.test.ts"/>
     <testcase name="hides any slotted elements that aren&apos;t zeta-segmented-item" time="0.002" classname="zeta-segmented-control Content" file="src/test/segmented-control/segmented-control.test.ts"/>
     <testcase name="updates the active item when a different item is clicked" time="0.002" classname="zeta-segmented-control Interaction" file="src/test/segmented-control/segmented-control.test.ts"/>
@@ -563,66 +566,66 @@
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.144" classname="zeta-select-input Accessibility" file="src/test/select-input/select-input.test.ts"/>
-    <testcase name="renders a label" time="0" classname="zeta-select-input Content" file="src/test/select-input/select-input.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.141" classname="zeta-select-input Accessibility" file="src/test/select-input/select-input.test.ts"/>
+    <testcase name="renders a label" time="0.001" classname="zeta-select-input Content" file="src/test/select-input/select-input.test.ts"/>
     <testcase name="renders required" time="0" classname="zeta-select-input Content" file="src/test/select-input/select-input.test.ts"/>
-    <testcase name="renders a hint" time="0" classname="zeta-select-input Content" file="src/test/select-input/select-input.test.ts"/>
-    <testcase name="renders a select input" time="0" classname="zeta-select-input Content" file="src/test/select-input/select-input.test.ts"/>
-    <testcase name="renders a hidden options div" time="0" classname="zeta-select-input Content" file="src/test/select-input/select-input.test.ts"/>
+    <testcase name="renders a hint" time="0.001" classname="zeta-select-input Content" file="src/test/select-input/select-input.test.ts"/>
+    <testcase name="renders a select input" time="0.001" classname="zeta-select-input Content" file="src/test/select-input/select-input.test.ts"/>
+    <testcase name="renders a hidden options div" time="0.001" classname="zeta-select-input Content" file="src/test/select-input/select-input.test.ts"/>
     <testcase name="renders the options box with the same width as the input" time="0.002" classname="zeta-select-input Dimensions" file="src/test/select-input/select-input.test.ts"/>
     <testcase name="renders the options box with the correct height" time="0.001" classname="zeta-select-input Dimensions" file="src/test/select-input/select-input.test.ts"/>
-    <testcase name="renders the options box on input click" time="0.002" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
-    <testcase name="renders the options box on input space key press" time="0.001" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
-    <testcase name="closes the options box on outside click" time="0.001" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
-    <testcase name="closes the options box on input click" time="0" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
+    <testcase name="renders the options box on input click" time="0.001" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
+    <testcase name="renders the options box on input space key press" time="0.002" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
+    <testcase name="closes the options box on outside click" time="0" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
+    <testcase name="closes the options box on input click" time="0.001" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
     <testcase name="closes the options box on input space key press" time="0.001" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
-    <testcase name="sets the selected option on option click" time="0.002" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
+    <testcase name="sets the selected option on option click" time="0.001" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
     <testcase name="sets the selected option on option space key press" time="0.001" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
-    <testcase name="doesn&apos;t deselect the selected option on option click" time="0.001" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
-    <testcase name="doesn&apos;t deselect the selected option on option space key press" time="0.002" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
+    <testcase name="doesn&apos;t deselect the selected option on option click" time="0.002" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
+    <testcase name="doesn&apos;t deselect the selected option on option space key press" time="0.001" classname="zeta-select-input Interaction" file="src/test/select-input/select-input.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/slider/slider.test.ts" id="0" tests="16" skipped="0" errors="0" failures="0" time="0.062000000000000006">
+  <testsuite name="Chromium_playwright_/src/test/slider/slider.test.ts" id="0" tests="16" skipped="0" errors="0" failures="0" time="0.066">
     <properties>
       <property name="test.fileName" value="src/test/slider/slider.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.053" classname="zeta-slider Accessibility" file="src/test/slider/slider.test.ts"/>
-    <testcase name="renders the track" time="0" classname="zeta-slider Content" file="src/test/slider/slider.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.056" classname="zeta-slider Accessibility" file="src/test/slider/slider.test.ts"/>
+    <testcase name="renders the track" time="0.001" classname="zeta-slider Content" file="src/test/slider/slider.test.ts"/>
     <testcase name="renders the left handle and not the right handle when type is default" time="0" classname="zeta-slider Content" file="src/test/slider/slider.test.ts"/>
-    <testcase name="renders the right handle when type is range" time="0" classname="zeta-slider Content" file="src/test/slider/slider.test.ts"/>
-    <testcase name="sets initial values correctly" time="0" classname="zeta-slider Content" file="src/test/slider/slider.test.ts"/>
-    <testcase name="sets the track height correctly" time="0.001" classname="zeta-slider Dimensions" file="src/test/slider/slider.test.ts"/>
-    <testcase name="sets the handle width and height correctly" time="0.001" classname="zeta-slider Dimensions" file="src/test/slider/slider.test.ts"/>
+    <testcase name="renders the right handle when type is range" time="0.001" classname="zeta-slider Content" file="src/test/slider/slider.test.ts"/>
+    <testcase name="sets initial values correctly" time="0.001" classname="zeta-slider Content" file="src/test/slider/slider.test.ts"/>
+    <testcase name="sets the track height correctly" time="0" classname="zeta-slider Dimensions" file="src/test/slider/slider.test.ts"/>
+    <testcase name="sets the handle width and height correctly" time="0" classname="zeta-slider Dimensions" file="src/test/slider/slider.test.ts"/>
     <testcase name="sets the correct margin on the slider" time="0" classname="zeta-slider Dimensions" file="src/test/slider/slider.test.ts"/>
     <testcase name="sets the correct background color for the track" time="0" classname="zeta-slider Styling" file="src/test/slider/slider.test.ts"/>
     <testcase name="sets the correct color for the selected area" time="0" classname="zeta-slider Styling" file="src/test/slider/slider.test.ts"/>
-    <testcase name="sets the correct background color for the handle" time="0.001" classname="zeta-slider Styling" file="src/test/slider/slider.test.ts"/>
+    <testcase name="sets the correct background color for the handle" time="0" classname="zeta-slider Styling" file="src/test/slider/slider.test.ts"/>
     <testcase name="sets the correct color for the selected area and handle when pressed down" time="0.001" classname="zeta-slider Styling" file="src/test/slider/slider.test.ts"/>
     <testcase name="sets the correct border radius for the handle" time="0.001" classname="zeta-slider Styling" file="src/test/slider/slider.test.ts"/>
-    <testcase name="sets the correct border radius for the track" time="0" classname="zeta-slider Styling" file="src/test/slider/slider.test.ts"/>
+    <testcase name="sets the correct border radius for the track" time="0.001" classname="zeta-slider Styling" file="src/test/slider/slider.test.ts"/>
     <testcase name="updates the value when the handle is dragged" time="0.001" classname="zeta-slider Interaction" file="src/test/slider/slider.test.ts"/>
     <testcase name="updates the lower and upper values when the handles are dragged" time="0.003" classname="zeta-slider Interaction" file="src/test/slider/slider.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/slider-input-field/slider-input-field.test.ts" id="0" tests="13" skipped="0" errors="0" failures="0" time="0.119">
+  <testsuite name="Chromium_playwright_/src/test/slider-input-field/slider-input-field.test.ts" id="0" tests="13" skipped="0" errors="0" failures="0" time="0.11499999999999999">
     <properties>
       <property name="test.fileName" value="src/test/slider-input-field/slider-input-field.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.108" classname="zeta-slider-input-field Accessibility" file="src/test/slider-input-field/slider-input-field.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.104" classname="zeta-slider-input-field Accessibility" file="src/test/slider-input-field/slider-input-field.test.ts"/>
     <testcase name="renders the zeta slider" time="0" classname="zeta-slider-input-field Content" file="src/test/slider-input-field/slider-input-field.test.ts"/>
     <testcase name="renders the label" time="0" classname="zeta-slider-input-field Content" file="src/test/slider-input-field/slider-input-field.test.ts"/>
     <testcase name="renders the input field" time="0" classname="zeta-slider-input-field Content" file="src/test/slider-input-field/slider-input-field.test.ts"/>
     <testcase name="renders the min and max labels" time="0" classname="zeta-slider-input-field Content" file="src/test/slider-input-field/slider-input-field.test.ts"/>
     <testcase name="sets the initial values correctly" time="0" classname="zeta-slider-input-field Content" file="src/test/slider-input-field/slider-input-field.test.ts"/>
     <testcase name="sets the input width and height correctly" time="0" classname="zeta-slider-input-field Dimensions" file="src/test/slider-input-field/slider-input-field.test.ts"/>
-    <testcase name="sets the correct styles for the label" time="0.001" classname="zeta-slider-input-field Styling" file="src/test/slider-input-field/slider-input-field.test.ts"/>
+    <testcase name="sets the correct styles for the label" time="0" classname="zeta-slider-input-field Styling" file="src/test/slider-input-field/slider-input-field.test.ts"/>
     <testcase name="sets the correct styles for the input" time="0" classname="zeta-slider-input-field Styling" file="src/test/slider-input-field/slider-input-field.test.ts"/>
     <testcase name="sets the correct styles for the range labels" time="0" classname="zeta-slider-input-field Styling" file="src/test/slider-input-field/slider-input-field.test.ts"/>
     <testcase name="updates the hidden input value when the slider value changes" time="0.001" classname="zeta-slider-input-field Interaction" file="src/test/slider-input-field/slider-input-field.test.ts"/>
     <testcase name="updates the slider value when the input value changes" time="0.001" classname="zeta-slider-input-field Interaction" file="src/test/slider-input-field/slider-input-field.test.ts"/>
-    <testcase name="returns the correct data when in a form" time="0.008" classname="zeta-slider-input-field Interaction" file="src/test/slider-input-field/slider-input-field.test.ts"/>
+    <testcase name="returns the correct data when in a form" time="0.009" classname="zeta-slider-input-field Interaction" file="src/test/slider-input-field/slider-input-field.test.ts"/>
     <system-out><![CDATA[Element zeta-slider-input-field scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update. See https://lit.dev/msg/change-in-update for more information.]]></system-out>
     <system-out><![CDATA[Element zeta-slider-input-field scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update. See https://lit.dev/msg/change-in-update for more information.]]></system-out>
     <system-out><![CDATA[Element zeta-slider-input-field scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update. See https://lit.dev/msg/change-in-update for more information.]]></system-out>
@@ -637,7 +640,7 @@
     <system-out><![CDATA[Element zeta-slider-input-field scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update. See https://lit.dev/msg/change-in-update for more information.]]></system-out>
     <system-out><![CDATA[Element zeta-slider-input-field scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update. See https://lit.dev/msg/change-in-update for more information.]]></system-out>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/snackbar/snackbar.test.ts" id="0" tests="19" skipped="1" errors="0" failures="0" time="0.19199999999999998">
+  <testsuite name="Chromium_playwright_/src/test/snackbar/snackbar.test.ts" id="0" tests="19" skipped="1" errors="0" failures="0" time="0.20800000000000002">
     <properties>
       <property name="test.fileName" value="src/test/snackbar/snackbar.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -647,23 +650,23 @@
       <skipped/>
     </testcase>
     <testcase name="displays the correct text in the slot" time="0.001" classname="zeta-snackbar Content" file="src/test/snackbar/snackbar.test.ts"/>
-    <testcase name="displays the correct text in the action button" time="0.001" classname="zeta-snackbar Content" file="src/test/snackbar/snackbar.test.ts"/>
-    <testcase name="displays the correct icon in the slot" time="0" classname="zeta-snackbar Content" file="src/test/snackbar/snackbar.test.ts"/>
+    <testcase name="displays the correct text in the action button" time="0" classname="zeta-snackbar Content" file="src/test/snackbar/snackbar.test.ts"/>
+    <testcase name="displays the correct icon in the slot" time="0.001" classname="zeta-snackbar Content" file="src/test/snackbar/snackbar.test.ts"/>
     <testcase name="sets full border radius correctly" time="0.001" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
     <testcase name="sets true border radius correctly" time="0.001" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
     <testcase name="sets false border radius correctly" time="0" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
-    <testcase name="sets the correct colors for default status" time="0" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
-    <testcase name="sets the correct colors for positive status" time="0" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
-    <testcase name="sets the correct colors for info status" time="0.001" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
+    <testcase name="sets the correct colors for default status" time="0.001" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
+    <testcase name="sets the correct colors for positive status" time="0.001" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
+    <testcase name="sets the correct colors for info status" time="0" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
     <testcase name="sets the correct colors for warning status" time="0.001" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
-    <testcase name="sets the correct colors for negative status" time="0" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
+    <testcase name="sets the correct colors for negative status" time="0.001" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
     <testcase name="sets the correct colors for view status" time="0" classname="zeta-snackbar Styling" file="src/test/snackbar/snackbar.test.ts"/>
-    <testcase name="removes the element from the screen when the close icon is clicked" time="0.041" classname="zeta-snackbar Interaction" file="src/test/snackbar/snackbar.test.ts"/>
-    <testcase name="removes the element from the screen when the close icon is enter pressed" time="0.01" classname="zeta-snackbar Interaction" file="src/test/snackbar/snackbar.test.ts"/>
-    <testcase name="removes the element from the screen when the close icon is space pressed" time="0.005" classname="zeta-snackbar Interaction" file="src/test/snackbar/snackbar.test.ts"/>
-    <testcase name="calls the action function on enter pressed" time="0.052" classname="zeta-snackbar Interaction" file="src/test/snackbar/snackbar.test.ts"/>
-    <testcase name="calls the action function on space pressed" time="0.054" classname="zeta-snackbar Interaction" file="src/test/snackbar/snackbar.test.ts"/>
-    <testcase name="calls the action function on mouse click" time="0.024" classname="zeta-snackbar Interaction" file="src/test/snackbar/snackbar.test.ts"/>
+    <testcase name="removes the element from the screen when the close icon is clicked" time="0.012" classname="zeta-snackbar Interaction" file="src/test/snackbar/snackbar.test.ts"/>
+    <testcase name="removes the element from the screen when the close icon is enter pressed" time="0.006" classname="zeta-snackbar Interaction" file="src/test/snackbar/snackbar.test.ts"/>
+    <testcase name="removes the element from the screen when the close icon is space pressed" time="0.006" classname="zeta-snackbar Interaction" file="src/test/snackbar/snackbar.test.ts"/>
+    <testcase name="calls the action function on enter pressed" time="0.081" classname="zeta-snackbar Interaction" file="src/test/snackbar/snackbar.test.ts"/>
+    <testcase name="calls the action function on space pressed" time="0.058" classname="zeta-snackbar Interaction" file="src/test/snackbar/snackbar.test.ts"/>
+    <testcase name="calls the action function on mouse click" time="0.037" classname="zeta-snackbar Interaction" file="src/test/snackbar/snackbar.test.ts"/>
     <system-out><![CDATA[Action Clicked]]></system-out>
     <system-out><![CDATA[Action Clicked]]></system-out>
     <system-out><![CDATA[Action Clicked]]></system-out>
@@ -722,7 +725,7 @@
     <system-out><![CDATA[Action Clicked]]></system-out>
     <system-out><![CDATA[Action Clicked]]></system-out>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/stepper-input/stepper-input.test.ts" id="0" tests="9" skipped="3" errors="0" failures="0" time="0.015000000000000003">
+  <testsuite name="Chromium_playwright_/src/test/stepper-input/stepper-input.test.ts" id="0" tests="9" skipped="3" errors="0" failures="0" time="0.016">
     <properties>
       <property name="test.fileName" value="src/test/stepper-input/stepper-input.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -730,9 +733,9 @@
     </properties>
     <testcase name="creates from document.createElement" time="0.001" classname="zeta-stepper-input Content" file="src/test/stepper-input/stepper-input.test.ts"/>
     <testcase name="creates from constructor" time="0" classname="zeta-stepper-input Content" file="src/test/stepper-input/stepper-input.test.ts"/>
-    <testcase name="sets value" time="0.008" classname="zeta-stepper-input Content" file="src/test/stepper-input/stepper-input.test.ts"/>
+    <testcase name="sets value" time="0.01" classname="zeta-stepper-input Content" file="src/test/stepper-input/stepper-input.test.ts"/>
     <testcase name="sets value to max value" time="0.002" classname="zeta-stepper-input Content" file="src/test/stepper-input/stepper-input.test.ts"/>
-    <testcase name="sets value to min value" time="0.003" classname="zeta-stepper-input Content" file="src/test/stepper-input/stepper-input.test.ts"/>
+    <testcase name="sets value to min value" time="0.002" classname="zeta-stepper-input Content" file="src/test/stepper-input/stepper-input.test.ts"/>
     <testcase name="doesn&apos;t change value" time="0.001" classname="zeta-stepper-input Content" file="src/test/stepper-input/stepper-input.test.ts"/>
     <testcase name="doesn&apos;t change value via input change" time="0" classname="zeta-stepper-input Content" file="src/test/stepper-input/stepper-input.test.ts">
       <skipped/>
@@ -760,10 +763,10 @@
       <property name="browser.launcher" value="playwright"/>
     </properties>
     <testcase name="creates from document.createElement" time="0.001" classname="zeta-stepper Content" file="src/test/stepper-input/stepper.test.ts"/>
-    <testcase name="creates from constructor" time="0.001" classname="zeta-stepper Content" file="src/test/stepper-input/stepper.test.ts"/>
-    <testcase name="should render steps" time="0.005" classname="zeta-stepper Content" file="src/test/stepper-input/stepper.test.ts"/>
+    <testcase name="creates from constructor" time="0" classname="zeta-stepper Content" file="src/test/stepper-input/stepper.test.ts"/>
+    <testcase name="should render steps" time="0.006" classname="zeta-stepper Content" file="src/test/stepper-input/stepper.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/switch/switch.test.ts" id="0" tests="15" skipped="0" errors="0" failures="0" time="0.13">
+  <testsuite name="Chromium_playwright_/src/test/switch/switch.test.ts" id="0" tests="15" skipped="0" errors="0" failures="0" time="0.134">
     <properties>
       <property name="test.fileName" value="src/test/switch/switch.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -772,32 +775,32 @@
     <testcase name="creates from document.createElement" time="0.001" classname="zeta-switch Content" file="src/test/switch/switch.test.ts"/>
     <testcase name="creates from constructor" time="0" classname="zeta-switch Content" file="src/test/switch/switch.test.ts"/>
     <testcase name="focus on button when switch focused" time="0.001" classname="zeta-switch Content" file="src/test/switch/switch.test.ts"/>
-    <testcase name="blur on button when switch blurred" time="0.001" classname="zeta-switch Content" file="src/test/switch/switch.test.ts"/>
+    <testcase name="blur on button when switch blurred" time="0.002" classname="zeta-switch Content" file="src/test/switch/switch.test.ts"/>
     <testcase name="activeIcon color" time="0.001" classname="zeta-switch Styling" file="src/test/switch/switch.test.ts"/>
     <testcase name="inactiveIcon color" time="0.001" classname="zeta-switch Styling" file="src/test/switch/switch.test.ts"/>
-    <testcase name="track backgroundColor" time="0" classname="zeta-switch Styling" file="src/test/switch/switch.test.ts"/>
-    <testcase name="thumb backgroundColor" time="0" classname="zeta-switch Styling" file="src/test/switch/switch.test.ts"/>
-    <testcase name="should toggle the state when clicked by accessibility tools" time="0.003" classname="zeta-switch Interaction" file="src/test/switch/switch.test.ts"/>
-    <testcase name="inactiveIcon color, :hover color" time="0.011" classname="zeta-switch disabled Styling" file="src/test/switch/switch.test.ts"/>
-    <testcase name="activeIcon color, :hover color" time="0.016" classname="zeta-switch disabled Styling" file="src/test/switch/switch.test.ts"/>
-    <testcase name="track backgroundColor, :hover backgroundColor" time="0.015" classname="zeta-switch disabled Styling" file="src/test/switch/switch.test.ts"/>
-    <testcase name="thumb backgroundColor, :hover backgroundColor" time="0.015" classname="zeta-switch disabled Styling" file="src/test/switch/switch.test.ts"/>
+    <testcase name="track backgroundColor" time="0.001" classname="zeta-switch Styling" file="src/test/switch/switch.test.ts"/>
+    <testcase name="thumb backgroundColor" time="0.001" classname="zeta-switch Styling" file="src/test/switch/switch.test.ts"/>
+    <testcase name="should toggle the state when clicked by accessibility tools" time="0.002" classname="zeta-switch Interaction" file="src/test/switch/switch.test.ts"/>
+    <testcase name="inactiveIcon color, :hover color" time="0.014" classname="zeta-switch disabled Styling" file="src/test/switch/switch.test.ts"/>
+    <testcase name="activeIcon color, :hover color" time="0.013" classname="zeta-switch disabled Styling" file="src/test/switch/switch.test.ts"/>
+    <testcase name="track backgroundColor, :hover backgroundColor" time="0.016" classname="zeta-switch disabled Styling" file="src/test/switch/switch.test.ts"/>
+    <testcase name="thumb backgroundColor, :hover backgroundColor" time="0.016" classname="zeta-switch disabled Styling" file="src/test/switch/switch.test.ts"/>
     <testcase name="track backgroundColor" time="0.032" classname="zeta-switch:hover Styling" file="src/test/switch/switch.test.ts"/>
     <testcase name="thumb backgroundColor" time="0.033" classname="zeta-switch:hover Styling" file="src/test/switch/switch.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/tag/tag.test.ts" id="0" tests="5" skipped="0" errors="0" failures="0" time="0.056">
+  <testsuite name="Chromium_playwright_/src/test/tag/tag.test.ts" id="0" tests="5" skipped="0" errors="0" failures="0" time="0.058">
     <properties>
       <property name="test.fileName" value="src/test/tag/tag.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="it meets accessibility requirements" time="0.053" classname="zeta-tag Accessibility" file="src/test/tag/tag.test.ts"/>
+    <testcase name="it meets accessibility requirements" time="0.057" classname="zeta-tag Accessibility" file="src/test/tag/tag.test.ts"/>
     <testcase name="sets the default properties correctly" time="0" classname="zeta-tag Content" file="src/test/tag/tag.test.ts"/>
     <testcase name="manages point attribute correctly" time="0.001" classname="zeta-tag Content" file="src/test/tag/tag.test.ts"/>
-    <testcase name="manages text attribute correctly" time="0.001" classname="zeta-tag Content" file="src/test/tag/tag.test.ts"/>
-    <testcase name="renders the passed text into a span" time="0.001" classname="zeta-tag Content" file="src/test/tag/tag.test.ts"/>
+    <testcase name="manages text attribute correctly" time="0" classname="zeta-tag Content" file="src/test/tag/tag.test.ts"/>
+    <testcase name="renders the passed text into a span" time="0" classname="zeta-tag Content" file="src/test/tag/tag.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/text-input/text-input.test.ts" id="0" tests="27" skipped="1" errors="0" failures="0" time="0.475">
+  <testsuite name="Chromium_playwright_/src/test/text-input/text-input.test.ts" id="0" tests="27" skipped="1" errors="0" failures="0" time="0.44199999999999995">
     <properties>
       <property name="test.fileName" value="src/test/text-input/text-input.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -807,33 +810,33 @@
       <skipped/>
     </testcase>
     <testcase name="creates from constructor" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
-    <testcase name="focus on input when field focused" time="0.008" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
+    <testcase name="focus on input when field focused" time="0.011" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="should not focus on input when field disabled" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="blur on input when field blurred" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="should render icon" time="0.002" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
-    <testcase name="should render icon on the right" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
+    <testcase name="should render icon on the right" time="0.002" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="should render prefix" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
-    <testcase name="should render suffix" time="0" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
-    <testcase name="should render label" time="0" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
-    <testcase name="should render hint text" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
+    <testcase name="should render suffix" time="0.002" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
+    <testcase name="should render label" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
+    <testcase name="should render hint text" time="0.002" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="should render error icon" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="should render error text" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="should change value" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="should apply type textarea" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="should apply type password" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
-    <testcase name="should apply type time" time="0.006" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
+    <testcase name="should apply type time" time="0.007" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="should apply type data" time="0.001" classname="zeta-text-input Content" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="should render error icon color" time="0.002" classname="zeta-text-input Styling" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="should render error text color" time="0.001" classname="zeta-text-input Styling" file="src/test/text-input/text-input.test.ts"/>
-    <testcase name="should set disabled color to icon when field is disabled" time="0.002" classname="zeta-text-input Styling" file="src/test/text-input/text-input.test.ts"/>
-    <testcase name="should toggle password visibility" time="0.001" classname="zeta-text-input Interaction" file="src/test/text-input/text-input.test.ts"/>
-    <testcase name="should dispatch onInput when value changes" time="0.203" classname="zeta-text-input Interaction" file="src/test/text-input/text-input.test.ts"/>
-    <testcase name="should dispatch onChange when value changes" time="0.163" classname="zeta-text-input Interaction" file="src/test/text-input/text-input.test.ts"/>
-    <testcase name="should dispatch onChange when field is deselected &amp; value has changed" time="0.039" classname="zeta-text-input Interaction" file="src/test/text-input/text-input.test.ts"/>
-    <testcase name="should dispatch onFocus when field is focused" time="0.036" classname="zeta-text-input Interaction" file="src/test/text-input/text-input.test.ts"/>
+    <testcase name="should set disabled color to icon when field is disabled" time="0.003" classname="zeta-text-input Styling" file="src/test/text-input/text-input.test.ts"/>
+    <testcase name="should toggle password visibility" time="0.002" classname="zeta-text-input Interaction" file="src/test/text-input/text-input.test.ts"/>
+    <testcase name="should dispatch onInput when value changes" time="0.173" classname="zeta-text-input Interaction" file="src/test/text-input/text-input.test.ts"/>
+    <testcase name="should dispatch onChange when value changes" time="0.143" classname="zeta-text-input Interaction" file="src/test/text-input/text-input.test.ts"/>
+    <testcase name="should dispatch onChange when field is deselected &amp; value has changed" time="0.04" classname="zeta-text-input Interaction" file="src/test/text-input/text-input.test.ts"/>
+    <testcase name="should dispatch onFocus when field is focused" time="0.041" classname="zeta-text-input Interaction" file="src/test/text-input/text-input.test.ts"/>
     <testcase name="should dispatch onBlur when field is deselected" time="0" classname="zeta-text-input Interaction" file="src/test/text-input/text-input.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/top-appbar/top-appbar.test.ts" id="0" tests="6" skipped="0" errors="0" failures="0" time="0.007">
+  <testsuite name="Chromium_playwright_/src/test/top-appbar/top-appbar.test.ts" id="0" tests="6" skipped="0" errors="0" failures="0" time="0.008">
     <properties>
       <property name="test.fileName" value="src/test/top-appbar/top-appbar.test.ts"/>
       <property name="browser.name" value="Chromium"/>
@@ -844,27 +847,27 @@
     <testcase name="renders the appbar with extended title" time="0" classname="zeta-top-appbar Content" file="src/test/top-appbar/top-appbar.test.ts"/>
     <testcase name="renders content in the appbars leading slot" time="0.001" classname="zeta-top-appbar Content" file="src/test/top-appbar/top-appbar.test.ts"/>
     <testcase name="renders content in the appbars trailing slot" time="0.001" classname="zeta-top-appbar Content" file="src/test/top-appbar/top-appbar.test.ts"/>
-    <testcase name="renders content in the appbar" time="0" classname="zeta-top-appbar Content" file="src/test/top-appbar/top-appbar.test.ts"/>
+    <testcase name="renders content in the appbar" time="0.001" classname="zeta-top-appbar Content" file="src/test/top-appbar/top-appbar.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/chips/assist-chip/assist-chip.test.ts" id="0" tests="3" skipped="0" errors="0" failures="0" time="0.103">
+  <testsuite name="Chromium_playwright_/src/test/chips/assist-chip/assist-chip.test.ts" id="0" tests="3" skipped="0" errors="0" failures="0" time="0.111">
     <properties>
       <property name="test.fileName" value="src/test/chips/assist-chip/assist-chip.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="meets accessibility requirements" time="0.103" classname="zeta-assist-chip Accessibility" file="src/test/chips/assist-chip/assist-chip.test.ts"/>
+    <testcase name="meets accessibility requirements" time="0.111" classname="zeta-assist-chip Accessibility" file="src/test/chips/assist-chip/assist-chip.test.ts"/>
     <testcase name="sets the correct text on the chip" time="0" classname="zeta-assist-chip Content" file="src/test/chips/assist-chip/assist-chip.test.ts"/>
     <testcase name="displays the correct icon" time="0" classname="zeta-assist-chip Content" file="src/test/chips/assist-chip/assist-chip.test.ts"/>
   </testsuite>
-  <testsuite name="Chromium_playwright_/src/test/chips/filter-chip/filter-chip.test.ts" id="0" tests="3" skipped="0" errors="0" failures="0" time="0.09">
+  <testsuite name="Chromium_playwright_/src/test/chips/filter-chip/filter-chip.test.ts" id="0" tests="3" skipped="0" errors="0" failures="0" time="0.093">
     <properties>
       <property name="test.fileName" value="src/test/chips/filter-chip/filter-chip.test.ts"/>
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="it meets accessibility requirements" time="0.089" classname="zeta-filter-chip Accessibility" file="src/test/chips/filter-chip/filter-chip.test.ts"/>
+    <testcase name="it meets accessibility requirements" time="0.091" classname="zeta-filter-chip Accessibility" file="src/test/chips/filter-chip/filter-chip.test.ts"/>
     <testcase name="sets the correct text on the chip" time="0" classname="zeta-filter-chip Content" file="src/test/chips/filter-chip/filter-chip.test.ts"/>
-    <testcase name="shows the check icon when active" time="0.001" classname="zeta-filter-chip Content" file="src/test/chips/filter-chip/filter-chip.test.ts"/>
+    <testcase name="shows the check icon when active" time="0.002" classname="zeta-filter-chip Content" file="src/test/chips/filter-chip/filter-chip.test.ts"/>
   </testsuite>
   <testsuite name="Chromium_playwright_/src/test/chips/input-chip/input-chip.test.ts" id="0" tests="2" skipped="0" errors="0" failures="0" time="0.062">
     <properties>
@@ -872,7 +875,7 @@
       <property name="browser.name" value="Chromium"/>
       <property name="browser.launcher" value="playwright"/>
     </properties>
-    <testcase name="it meets accessibility requirements" time="0.061" classname="zeta-input-chip Accessibility" file="src/test/chips/input-chip/input-chip.test.ts"/>
-    <testcase name="sets the correct text on the chip" time="0.001" classname="zeta-input-chip Content" file="src/test/chips/input-chip/input-chip.test.ts"/>
+    <testcase name="it meets accessibility requirements" time="0.062" classname="zeta-input-chip Accessibility" file="src/test/chips/input-chip/input-chip.test.ts"/>
+    <testcase name="sets the correct text on the chip" time="0" classname="zeta-input-chip Content" file="src/test/chips/input-chip/input-chip.test.ts"/>
   </testsuite>
 </testsuites>
\ No newline at end of file