@stackoverflow/stacks 2.0.9 → 2.1.0

package/lib/components/button/button.less

@@ -5,35 +5,49 @@
     // --_bu-bg: inherit; // [1]
     --_bu-br: var(--br-md);
     --_bu-fc: var(--theme-button-color, var(--theme-secondary-400));
-    --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
     --_bu-fs: var(--fs-body1);
     --_bu-p: 0.8em;
-    // STATE AND INTERACTION CUSTOM PROPERTIES
-    --_bu-bc-selected: transparent;
+
+    // Active
+    --_bu-bc-active: var(--_bu-bc);
     --_bu-bg-active: var(--theme-button-active-background-color, var(--theme-secondary-300));
+    --_bu-fc-active: var(--theme-button-hover-color, var(--theme-secondary-500)); // Note: hover color used on purpose
+
+    // Hover
+    --_bu-bc-hover: var(--_bu-bc);
     --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-200));
-    --_bu-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
-    --_bu-fc-active: var(--theme-button-hover-color, var(--theme-secondary-500)); // Note: hover color used here intentionally
     --_bu-fc-hover: var(--theme-button-hover-color, var(--theme-secondary-500));
+
+    // BASE SELECTED MODIFIER
+    --_bu-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
     --_bu-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
-    // Filled
+
+    // FILLED VARIANT
     --_bu-filled-bc: transparent;
-    --_bu-filled-bc-active: transparent;
-    --_bu-filled-bc-selected: transparent;
     --_bu-filled-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
-    --_bu-filled-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
-    --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
-    --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
     --_bu-filled-fc: var(--theme-button-primary-color, var(--white));
+    // Filled + Selected
+    --_bu-filled-bc-selected: transparent;
+    --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
+    --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white));
+    // Filled + Active
+    --_bu-filled-bc-active: var(--_bu-filled-bc);
+    --_bu-filled-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
     --_bu-filled-fc-active: var(--theme-button-primary-hover-color, var(--white));
+    // Filled + Hover
+    --_bu-filled-bc-hover: var(--_bu-filled-bc);
+    --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
     --_bu-filled-fc-hover: var(--theme-button-primary-hover-color, var(--white));
-    --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white));
-    // Outlined
+
+    // OUTLINED VARIANT
     --_bu-outlined-bc: var(--theme-button-outlined-border-color, var(--theme-secondary-400));
     --_bu-outlined-bg: var(--theme-button-outlined-background-color);
+    --_bg-outlined-fc: var(--theme-button-outlined-color, var(--theme-secondary-400));
+    // Outlined + Selected
     --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color, var(--theme-secondary-400));
     --_bu-outlined-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
     --_bu-outlined-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
+
     // CHILD COMPONENT CUSTOM PROPERTIES
     --_bu-badge-o: 0.5;
     --_bu-dropdown-bw: var(--su-static4);
@@ -81,9 +95,9 @@
     }
 
     &.is-selected,
-    .s-btn-group.s-btn-group--radio &--radio:checked + & {
+    &--radio:checked + & {
         background-color: var(--_bu-bg-selected);
-        border-color: var(--_bu-bc-selected);
+        border-color: var(--_bu-bc-selected, transparent);
         color: var(--_bu-fc-selected);
 
         .s-btn--number {
@@ -139,7 +153,6 @@
     &&__link {
         --_bu-baw: 0;
         --_bu-br: 0;
-        --_bu-focus-ring: none;
         --_bu-p: 0;
 
         &,
@@ -171,7 +184,6 @@
             --_bu-bg: none;
             --_bu-br: 0;
             --_bu-fc: unset;
-            --_bu-focus-ring: none;
             --_bu-p: 0;
 
             cursor: default;
@@ -241,7 +253,6 @@
         --_bu-fc-active: var(--_bu-fc);
         --_bu-fc-hover: var(--red-500);
         --_bu-fc-selected: var(--red-600);
-        --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-error);
         --_bu-filled-bc: transparent;
         --_bu-filled-bc-selected: var(--_bu-filled-bc);
         --_bu-filled-bg: var(--red-400);
@@ -261,6 +272,7 @@
     }
 
     &&__muted {
+        --_bu-bc-hover: var(--black-300);
         --_bu-bg-active: var(--black-150);
         --_bu-bg-hover: var(--black-100);
         --_bu-bg-selected: var(--black-200);
@@ -268,7 +280,6 @@
         --_bu-fc-active: var(--_bu-fc);
         --_bu-fc-hover: var(--black-500);
         --_bu-fc-selected: var(--black-500);
-        --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
         // The filled modifier on the muted button is deprecated and is to be
         // removed in Stacks Classic v2
         --_bu-filled-bc: transparent;
@@ -285,7 +296,11 @@
         --_bu-outlined-bc-selected: var(--black-300);
         --_bu-outlined-bg-selected: var(--_bu-bg-selected);
         --_bu-outlined-fc-selected: var(--_bu-fc-selected);
+        --_bu-number-fc-filled: var(--white);
         --_bu-number-fc-selected: var(--white);
+        --_bu-bg-focus: var(--black-400);
+        --_bu-fc-focus: var(--white);
+        --_bu-number-fc-focus: var(--black-500);
 
         .highcontrast-mode({
             --_bu-bg-hover: var(--black-225);
@@ -350,7 +365,6 @@
         --_bu-fc: var(--fc-medium);
         --_bu-fc-active: var(--fc-dark);
         --_bu-fc-hover: var(--black-600);
-        --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
     }
 
     &&__github {
@@ -360,7 +374,6 @@
         --_bu-fc: var(--white);
         --_bu-fc-active: var(--white);
         --_bu-fc-hover: var(--white);
-        --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
         --_bu-hc-bc: transparent;
     }
 
@@ -393,12 +406,35 @@
     }
 
     // INTERACTION
-    &:not(.is-selected):not(&__link):not(&__unset) {
-        &:hover, &:focus {
+    &:not(&__link):not(&__unset):focus-visible,
+    &--radio:focus-visible + & {
+        border-color: var(--theme-secondary-400) !important;
+        .focus-styles(true, true);
+    }
+
+    &:not(&__link):not(&__unset)&:not(&__facebook):not(&__github):not(&__google):not(.is-selected):focus-visible,
+    &--radio:focus-visible + & {
+        &,
+        &.s-btn__filled {
+            &:not(:hover) .s-btn--number {
+                color: var(--_bu-number-fc-focus, var(--_bu-number-fc-filled));
+            }
+
+            background-color: var(--_bu-bg-focus, var(--_bu-filled-bg));
+            color: var(--_bu-fc-focus, var(--_bu-filled-fc));
+        }
+    }
+
+    &:not(&__link):not(&__unset)&:not(&__facebook):not(&__github):not(&__google):not(.is-selected) {
+        &:hover {
             &.s-btn__filled {
                 background-color: var(--_bu-filled-bg-hover);
+                border-color: var(--_bu-filled-bc-hover);
                 color: var(--_bu-filled-fc-hover);
             }
+            &:not(.s-btn__outlined) {
+                border-color: var(--_bu-bc-hover);
+            }
 
             background-color: var(--_bu-bg-hover);
             color: var(--_bu-fc-hover);
@@ -407,28 +443,27 @@
         &:active {
             &.s-btn__filled {
                 background-color: var(--_bu-filled-bg-active);
+                border-color: var(--_bu-filled-bc-active);
                 color: var(--_bu-filled-fc-active);
             }
 
             background-color: var(--_bu-bg-active);
+            border-color: var(--_bu-bc-active);
             color: var(--_bu-fc-active);
         }
+    }
 
-        &:visited:not(:hover):not(:focus) {
-            &.s-btn__filled {
-                background-color: var(--_bu-filled-bg);
-                color: var(--_bu-filled-fc);
-            }
 
-            background-color: var(--_bu-bg);
-            color: var(--_bu-fc);
+    &:visited:not(:hover):not(:focus) {
+        &.s-btn__filled {
+            background-color: var(--_bu-filled-bg);
+            border-color: var(--_bu-filled-bc);
+            color: var(--_bu-filled-fc);
         }
-    }
 
-    &:focus,
-    &--radio:focus + & {
-        box-shadow: var(--_bu-focus-ring);
-        outline: none;
+        background-color: var(--_bu-bg);
+        border-color: var(--_bu-bc);
+        color: var(--_bu-fc);
     }
 
     background-color: var(--_bu-bg, inherit); // [1]

package/lib/components/button/button.visual.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 const getChild = (child?: string): string => {
@@ -16,8 +16,7 @@ const getChild = (child?: string): string => {
 
 describe("button", () => {
     // TODO test disabled states, interaction pseudo-classes
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-btn",
         variants: ["danger", "muted"],
         modifiers: {

package/lib/components/card/card.a11y.test.ts

@@ -1,9 +1,8 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("card", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-card",
         variants: ["muted"],
         children: {

package/lib/components/card/card.visual.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -25,8 +25,7 @@ const baseChild = `
 `;
 
 describe("card", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-card",
         variants: ["muted"],
         children: {
@@ -36,8 +35,7 @@ describe("card", () => {
     });
 
     // Stacked
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-card",
         variants: ["stacked"], // dummy variant for testid differentiation
         children: {
@@ -48,7 +46,6 @@ describe("card", () => {
         },
         template: cardTemplate,
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
     });

package/lib/components/check-control/check-control.a11y.test.ts

@@ -1,12 +1,11 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 ["checkbox", "radio"].forEach((type) => {
     describe("s-check-control", () => {
         // TODO include indeterminate
         ["checked", "unchecked"].forEach((state) => {
-            runComponentTests({
-                type: "a11y",
+            runA11yTests({
                 baseClass: "s-check-control",
                 modifiers: {
                     global: ["has-warning", "has-error", "has-success"],
@@ -26,7 +25,6 @@ import "../../index";
                     `,
                 },
                 options: {
-                    ...defaultOptions,
                     testidSuffix: `${state}-${type}`,
                 },
             });

package/lib/components/check-control/check-control.visual.test.ts

@@ -1,12 +1,11 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 ["checkbox", "radio"].forEach((type) => {
     describe("s-check-control", () => {
         // TODO include indeterminate
         ["checked", "unchecked"].forEach((state) => {
-            runComponentTests({
-                type: "visual",
+            runVisualTests({
                 baseClass: "s-check-control",
                 modifiers: {
                     global: ["has-warning", "has-error", "has-success"],
@@ -29,7 +28,6 @@ import "../../index";
                     `,
                 },
                 options: {
-                    ...defaultOptions,
                     testidSuffix: `${state}-${type}`,
                 },
             });

package/lib/components/check-group/check-group.a11y.test.ts

@@ -1,4 +1,4 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 type CheckGroup = "checkbox" | "radio";
@@ -14,8 +14,7 @@ checkTypes.forEach((type) => {
             { type, id: `test-${type}1`, state: "checked" },
             { type, id: `test-${type}2` },
         ];
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             tag: "fieldset",
             baseClass: "s-check-group",
             variants: ["horizontal"],
@@ -43,7 +42,6 @@ checkTypes.forEach((type) => {
                 `,
             },
             options: {
-                ...defaultOptions,
                 testidSuffix: type,
             },
         });

package/lib/components/check-group/check-group.visual.test.ts

@@ -1,4 +1,4 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 type CheckGroup = "checkbox" | "radio";
@@ -16,8 +16,7 @@ const checkTypes: CheckGroup[] = ["checkbox", "radio"];
                 { type, id: `test-${type}1`, state: "checked" },
                 { type, id: `test-${type}2` },
             ];
-            runComponentTests({
-                type: "visual",
+            runVisualTests({
                 tag: "fieldset",
                 baseClass: "s-check-group",
                 attributes: {
@@ -48,7 +47,6 @@ const checkTypes: CheckGroup[] = ["checkbox", "radio"];
                     `,
                 },
                 options: {
-                    ...defaultOptions,
                     includeNullVariant: !isHorizontal,
                     testidSuffix: type,
                 },

package/lib/components/checkbox_radio/checkbox_radio.a11y.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13,8 +13,7 @@ const checkboxTemplate = ({ component, testid, id }: any) =>
     describe(type, () => {
         // TODO include indeterminate
         ["checked", "unchecked"].forEach((state) => {
-            runComponentTests({
-                type: "a11y",
+            runA11yTests({
                 tag: "input",
                 baseClass: `s-${type}`,
                 attributes: {
@@ -30,7 +29,6 @@ const checkboxTemplate = ({ component, testid, id }: any) =>
                         id: "test-id",
                     }),
                 options: {
-                    ...defaultOptions,
                     testidSuffix: state,
                 },
             });

package/lib/components/checkbox_radio/checkbox_radio.less

@@ -2,10 +2,8 @@
 .s-radio {
     --_ch-baw: var(--su-static1);
     --_ch-bc: var(--bc-dark);
-    --_ch-bc-focus: var(--theme-secondary-400);
     --_ch-bg: var(--white);
     --_ch-bg-image: unset;
-    --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
 
     // CONTEXTUAL STYLES
     fieldset[disabled] &,
@@ -30,7 +28,7 @@
 
     // INTERACTION
     &:focus {
-        box-shadow: var(--_ch-bs-focus);
+        .focus-styles();
     }
 
     background-color: var(--_ch-bg);
@@ -64,7 +62,6 @@
     .highcontrast-dark-mode({
         &:checked, &:indeterminate {
             --_ch-bc: var(--blue-500) !important;
-            --_ch-bc-focus: var(--_ch-bc);
             --_ch-bg: var(--blue-400);
         }
     });
@@ -73,10 +70,6 @@
     &:checked, &:indeterminate {
         --_ch-bc: var(--theme-secondary-400) !important;
         --_ch-bg: var(--theme-secondary-400);
-
-        &:focus {
-            --_ch-bc-focus: var(--theme-secondary-400);
-        }
     }
 
     &:checked {
@@ -87,11 +80,6 @@
         --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
     }
 
-    // INTERACTION
-    &:focus {
-        border-color: var(--_ch-bc-focus);
-    }
-
     background-image: var(--_ch-bg-image);
 
     background-position: center center;

package/lib/components/checkbox_radio/checkbox_radio.visual.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15,8 +15,7 @@ const checkboxTemplate = ({ component, testid }: any) =>
     describe(type, () => {
         // TODO include indeterminate
         ["checked", "unchecked"].forEach((state) => {
-            runComponentTests({
-                type: "visual",
+            runVisualTests({
                 tag: "input",
                 baseClass: `s-${type}`,
                 attributes: {
@@ -26,7 +25,6 @@ const checkboxTemplate = ({ component, testid }: any) =>
                 template: ({ component, testid }) =>
                     checkboxTemplate({ component, testid }),
                 options: {
-                    ...defaultOptions,
                     testidSuffix: state,
                 },
             });

package/lib/components/code-block/code-block.a11y.test.ts

@@ -1,18 +1,16 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import highlightedFixtures from "./code-block.fixtures";
 import "../../index";
 
 describe("code block", () => {
     Object.keys(highlightedFixtures).forEach((language) => {
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             tag: "pre",
             baseClass: `s-code-block language-${language}`,
             children: {
                 default: highlightedFixtures[language],
             },
             options: {
-                ...defaultOptions,
                 includeNullModifier: false,
             },
             attributes: {

package/lib/components/code-block/code-block.visual.test.ts

@@ -1,18 +1,16 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import highlightedFixtures from "./code-block.fixtures";
 import "../../index";
 
 describe("code block", () => {
     Object.keys(highlightedFixtures).forEach((language) => {
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             tag: "pre",
             baseClass: `s-code-block language-${language}`,
             children: {
                 default: highlightedFixtures[language],
             },
             options: {
-                ...defaultOptions,
                 includeNullModifier: false,
             },
         });

package/lib/components/description/description.a11y.test.ts

@@ -1,19 +1,17 @@
 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 // account for parent with `.is-disabled` class
 [true, false].forEach((isDisabled) => {
     describe("description", () => {
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             tag: "p",
             baseClass: "s-description",
             children: {
                 default: `Describes the site in the product, emails, integrations, and logs.`,
             },
             options: {
-                ...defaultOptions,
                 testidSuffix: isDisabled ? "is-disabled" : "",
             },
             template: ({ component, testid }) => html`

package/lib/components/description/description.visual.test.ts

@@ -1,19 +1,17 @@
 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 // account for parent with `.is-disabled` class
 [true, false].forEach((isDisabled) => {
     describe("description", () => {
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             tag: "p",
             baseClass: "s-description",
             children: {
                 default: `Describes the site in the product, emails, integrations, and logs.`,
             },
             options: {
-                ...defaultOptions,
                 testidSuffix: isDisabled ? "is-disabled" : "",
             },
             template: ({ component, testid }) => html`

package/lib/components/empty-state/empty-state.a11y.test.ts

@@ -1,11 +1,10 @@
 import { html } from "@open-wc/testing";
 import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("empty-state", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-empty-state",
         children: {
             default: `${SpotEmptyXL}<p class="mt24"><strong>Hello!</strong> This is a wonderful empty state component.</p>`,

package/lib/components/empty-state/empty-state.visual.test.ts

@@ -1,11 +1,10 @@
 import { html } from "@open-wc/testing";
 import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 describe("empty-state", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-empty-state",
         children: {
             default: `${SpotEmptyXL}<p class="mt24"><strong>Hello!</strong> This is a wonderful empty state component.</p>`,

package/lib/components/expandable/expandable.a11y.test.ts

@@ -1,10 +1,9 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("expandable", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-expandable",
         modifiers: {
             global: ["is-expanded"],

package/lib/components/expandable/expandable.visual.test.ts

@@ -1,10 +1,9 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 describe("expandable", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-expandable",
         modifiers: {
             global: ["is-expanded"],

package/lib/components/input-fill/input-fill.a11y.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -8,8 +8,7 @@ const template = ({ component, testid }: any) => html`
 `;
 
 describe("input-fill", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: `s-input-fill`,
         modifiers: {
             global: ["order-first", "order-last"],

package/lib/components/input-fill/input-fill.visual.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -8,8 +8,7 @@ const template = ({ component, testid }: any) => html`
 `;
 
 describe("input-fill", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: `s-input-fill`,
         modifiers: {
             global: ["order-first", "order-last"],