@stackoverflow/stacks 2.0.8 → 2.1.0-rc.0

package/lib/components/progress-bar/progress-bar.visual.test.ts

@@ -3,7 +3,7 @@ import {
     IconAchievementsSm,
     IconCheckmarkSm,
 } from "@stackoverflow/stacks-icons/icons";
-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
@@ -97,8 +97,7 @@ const getChildren = (type: string) => {
 };
 describe("progress-bar", () => {
     // Base
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-progress",
         variants: ["brand", "info"],
         children: {
@@ -108,8 +107,7 @@ describe("progress-bar", () => {
     });
 
     // Badge
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-progress",
         variants: ["badge"],
         modifiers: {
@@ -120,15 +118,13 @@ describe("progress-bar", () => {
         },
         template,
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
             includeNullModifier: false,
         },
     });
 
     // Circular
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-progress",
         variants: ["circular"],
         modifiers: {
@@ -142,15 +138,13 @@ describe("progress-bar", () => {
             style: "--s-progress-value: .75",
         },
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
             includeNullModifier: false,
         },
     });
 
     // Privilege
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-progress",
         variants: ["privilege"],
         children: {
@@ -158,14 +152,12 @@ describe("progress-bar", () => {
         },
         template,
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
     });
 
     // Segmented
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-progress",
         variants: ["segmented"],
         children: {
@@ -173,14 +165,12 @@ describe("progress-bar", () => {
         },
         template,
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
     });
 
     // Stepped
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-progress",
         variants: ["stepped"],
         children: {
@@ -192,7 +182,6 @@ describe("progress-bar", () => {
             </div>
         `,
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
     });

package/lib/components/select/select.less

@@ -2,8 +2,6 @@
     --_se-arrow-bc: currentColor transparent;
     --_se-arrow-size: var(--su-static4); // Constant
     --_se-select-bc: var(--bc-darker);
-    --_se-select-bc-focus: var(--theme-secondary-400);
-    --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
     --_se-select-bg: var(--white);
     --_se-select-br: var(--br-md);
     --_se-select-fc: var(--black);
@@ -100,22 +98,10 @@
             cursor: not-allowed;
         }
 
-        // CHILD ELEMENTS
-        &::-moz-focus-inner {
-            outline: none !important;
-        }
-
         // INTERACTION
         &:focus {
-            .highcontrast-mode({
-                --_se-select-bc-focus: var(--black);
-            });
-
-            border-color: var(--_se-select-bc-focus);
-            box-shadow: var(--_se-select-bs-focus);
-
             color: var(--black);
-            outline: 0;
+            .focus-styles();
         }
 
         background-color: var(--_se-select-bg);

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

@@ -1,9 +1,8 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("spinner", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-spinner",
         modifiers: {
             primary: ["xs", "sm", "md", "lg"],

package/lib/components/spinner/spinner.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("spinner", () => {
     // default, sizes
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-spinner",
         modifiers: {
             primary: ["xs", "sm", "md", "lg"],
@@ -20,8 +19,7 @@ describe("spinner", () => {
         template,
     });
     // applied font color
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-spinner",
         modifiers: {
             global: ["fc-theme-primary"],
@@ -32,8 +30,7 @@ describe("spinner", () => {
         template,
     });
     // .is-loading
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "is-loading",
         children: {
             default: `Loading…`,

package/lib/components/table/table.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
@@ -76,7 +76,7 @@ const children = {
         </tbody>
         <tfoot class="s-table--totals">
             <tr>
-                <td scope="row"><span class="v-visible-sr">Empty</span></td>
+                <td><span class="v-visible-sr">Empty</span></td>
                 <th scope="row" class="ta-left">Totals</th>
                 <td><span class="v-visible-sr">Empty</span></td>
                 <td colspan="2">160</td>
@@ -88,8 +88,7 @@ const children = {
 
 describe("table", () => {
     // default, sizes
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-table",
         variants: ["stripes"],
         modifiers: {

package/lib/components/table/table.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
@@ -89,8 +89,7 @@ const children = {
 
 describe("table", () => {
     // default, sizes
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-table",
         variants: ["stripes"],
         modifiers: {

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

@@ -1,5 +1,5 @@
 import { IconClearSm } from "@stackoverflow/stacks-icons";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 const children = {
@@ -9,8 +9,7 @@ const children = {
 };
 
 describe("tag", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-tag",
         variants: ["ignored", "watched", "moderator", "muted", "required"],
         modifiers: {

package/lib/components/tag/tag.less

@@ -1,8 +1,8 @@
 .s-tag {
-    // Border color
-    --_ta-bc: var(--theme-tag-border-color, transparent);
-    --_ta-bc-hover: var(--theme-tag-hover-border-color, transparent);
-    --_ta-bc-selected: var(--theme-tag-selected-border-color, transparent);
+    // Border color (bg color used as fallback
+    --_ta-bc: var(--theme-tag-border-color, var(--_ta-bg));
+    --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--_ta-bg-hover));
+    --_ta-bc-selected: var(--theme-tag-selected-border-color, var(--_ta-bg-selected));
     // Background color
     --_ta-bg: var(--theme-tag-background-color, var(--theme-secondary-100));
     --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--theme-secondary-200));
@@ -18,6 +18,7 @@
     --_ta-pl: var(--_ta-px);
     --_ta-pr: var(--_ta-px);
     --_ta-px: var(--su4);
+    --_ta-dismiss-padding: calc(var(--_ta-px) - var(--su-static1));
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
@@ -32,10 +33,8 @@
         &,
         a&,
         a&:active,
-        a&:hover,
-        a&:focus {
+        a&:hover {
             .highcontrast-mode({
-                --_ta-bc-selected: transparent;
                 --_ta-fc-selected: var(--white);
             });
 
@@ -121,13 +120,10 @@
     }
 
     &&__muted:not(&__moderator):not(&__required) {
-        --_ta-bc: transparent;
         --_ta-bg: var(--black-150);
         --_ta-fc: var(--black-400);
-        --_ta-bc-hover: transparent;
         --_ta-bg-hover: var(--black-200);
         --_ta-fc-hover: var(--black-500);
-        --_ta-bc-selected: transparent;
         --_ta-bg-selected: var(--black-225);
         --_ta-fc-selected: var(--black-600);
 
@@ -137,9 +133,9 @@
     &&__required:not(&__moderator) {
         // TODO *eventually* remove the custom theme overrides once we can reconcile Meta theming needs
         // Border color
-        --_ta-bc: var(--theme-tag-required-border-color, transparent);
-        --_ta-bc-hover: var(--theme-tag-required-hover-border-color, transparent);
-        --_ta-bc-selected: var(--theme-tag-required-selected-border-color, transparent);
+        --_ta-bc: var(--theme-tag-required-border-color, var(--_ta-bg));
+        --_ta-bc-hover: var(--theme-tag-required-hover-border-color, var(--_ta-bg-hover));
+        --_ta-bc-selected: var(--theme-tag-required-selected-border-color, var(--_ta-bg-selected));
         // Background color
         --_ta-bg: var(--theme-tag-required-background-color, var(--theme-secondary-500));
         --_ta-bg-hover: var(--theme-tag-required-hover-background-color, var(--theme-secondary-400));
@@ -155,7 +151,16 @@
     }
 
     // CHILD ELEMENTS
-    & &--dismiss { // Style adjustment to @Svg.ClearSm
+    & button&--dismiss:not(.s-btn) {
+        all: unset;
+    }
+
+    & &--dismiss,
+    & button&--dismiss:not(.s-btn) { // Style adjustment to @Svg.ClearSm
+        &:focus-visible {
+            .focus-styles();
+        }
+
         &:hover {
             .highcontrast-mode({
                 color: var(--white);
@@ -165,18 +170,16 @@
             color: var(--_ta-bg);
         }
 
-        align-content: center;
-        align-self: center;
+        align-items: center;
+        align-self: stretch;
         background-color: transparent;
         border-radius: var(--br-sm);
         color: inherit;
         cursor: pointer;
         display: flex;
-        height: var(--su-static16);
         justify-content: center;
-        margin-left: var(--su4);
-        padding: var(--su1);
-        width: var(--su-static16);
+        margin: var(--su-static1) calc(var(--_ta-dismiss-padding) * -1) var(--su-static1) var(--_ta-dismiss-padding);
+        padding: var(--_ta-dismiss-padding);
     }
 
     & &--sponsor { // The small sponsor favicon displayed within a tag
@@ -196,7 +199,6 @@
     // INTERACTION
     a&:not(.is-selected) {
         &:hover,
-        &:focus,
         &:active {
             .highcontrast-mode({
                 border-color: currentColor;
@@ -208,6 +210,10 @@
         }
     }
 
+    &:focus-visible {
+        .focus-styles(false, true);
+    }
+
     background-color: var(--_ta-bg);
     border: var(--su-static1) solid var(--_ta-bc);
     border-radius: var(--_ta-br);

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

@@ -1,6 +1,6 @@
 import { html } from "@open-wc/testing";
 import { IconClearSm } from "@stackoverflow/stacks-icons";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 const children = {
@@ -15,8 +15,7 @@ const template = ({ component, testid }: any) => html`
 `;
 
 describe("tag", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-tag",
         variants: ["ignored", "watched", "moderator", "muted", "required"],
         modifiers: {
@@ -27,8 +26,7 @@ describe("tag", () => {
     });
 
     // Size modifiers
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-tag",
         modifiers: {
             primary: ["xs", "sm", "md", "lg"],
@@ -39,7 +37,6 @@ describe("tag", () => {
         },
         template,
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
         },
     });

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

@@ -1,11 +1,10 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import { html } from "@open-wc/testing";
 import "../../index";
 
 describe("toast > notice", () => {
     // This is a test of notice component wrapped in a toast component
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-notice", // s-toast is a wrapper around s-notice
         variants: ["info", "success", "warning", "danger"],
         modifiers: {

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

@@ -1,11 +1,10 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import { html } from "@open-wc/testing";
 import "../../index";
 
 describe("toast > notice", () => {
     // This is a test of notice component wrapped in a toast component
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-notice", // s-toast is a wrapper around s-notice
         variants: ["info", "success", "warning", "danger"],
         modifiers: {

package/lib/components/toggle-switch/toggle-switch.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";
 
 describe("toggle-switch", () => {
@@ -11,8 +11,7 @@ describe("toggle-switch", () => {
             }`;
             const id = `toggle-switch${idSuffix}`;
 
-            runComponentTests({
-                type: "a11y",
+            runA11yTests({
                 baseClass: "s-toggle-switch",
                 modifiers: {
                     global: idSuffix ? [idSuffix.substring(1)] : [], // for proper testid generation
@@ -36,8 +35,7 @@ describe("toggle-switch", () => {
 
     // Multiple toggle switch variant
     [true, false].forEach((offChecked) => {
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             baseClass: "s-toggle-switch",
             variants: ["multiple"],
             modifiers: {
@@ -58,7 +56,6 @@ describe("toggle-switch", () => {
                 `,
             },
             options: {
-                ...defaultOptions,
                 includeNullVariant: false,
             },
             template: ({ component, testid }) => html`

package/lib/components/toggle-switch/toggle-switch.less

@@ -4,7 +4,6 @@
     --_ts-bg: var(--black-350);
     --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill}'/%3e%3c/svg%3e");
     --_ts-bg-ps: left center;
-    --_ts-bs-color: transparent;
     --_ts-multiple-bg: unset;
     --_ts-multiple-fc: var(--black-400);
 
@@ -36,13 +35,10 @@
                     }
                 }
 
-                &:focus + label {
-                    --_ts-bs-color: var(--focus-ring-success);
+            }
 
-                    &.s-toggle-switch--label-off {
-                        --_ts-bs-color: var(--focus-ring-muted);
-                    }
-                }
+            &:focus-visible + label {
+                .focus-styles(true);
             }
 
             left: -999em;
@@ -53,7 +49,6 @@
 
         label {
             background-color: var(--_ts-multiple-bg);
-            box-shadow: 0 0 0 var(--su-static4) var(--_ts-bs-color);
             color: var(--_ts-multiple-fc);
 
             border-radius: 1000px;
@@ -80,15 +75,10 @@
         &:checked {
             --_ts-bg: var(--green-400);
             --_ts-bg-ps: right center;
-
-            &:focus {
-                --_ts-bs-color: var(--focus-ring-success);
-            }
         }
 
-        &:focus {
-            --_ts-bs-color: var(--focus-ring-muted);
-            outline: none;
+        &:focus-visible {
+            .focus-styles();
         }
 
         &[disabled] {
@@ -97,7 +87,6 @@
 
         background-color: var(--_ts-bg);
         background-position: var(--_ts-bg-ps);
-        box-shadow: 0 0 0 var(--su-static4) var(--_ts-bs-color);
 
         appearance: none;
         background-image: var(--_ts-bg-image);

package/lib/components/toggle-switch/toggle-switch.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";
 
 describe("toggle-switch", () => {
@@ -11,8 +11,7 @@ describe("toggle-switch", () => {
             }`;
             const id = `toggle-switch-${testidSuffix}`;
 
-            runComponentTests({
-                type: "visual",
+            runVisualTests({
                 baseClass: "s-toggle-switch",
                 tag: "input",
                 attributes: {
@@ -22,7 +21,6 @@ describe("toggle-switch", () => {
                     ...(disabled ? { disabled: "" } : {}),
                 },
                 options: {
-                    ...defaultOptions,
                     includeNullModifier: false,
                     testidSuffix,
                 },
@@ -38,8 +36,7 @@ describe("toggle-switch", () => {
 
     // Multiple toggle switch variant
     [true, false].forEach((offChecked) => {
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             baseClass: "s-toggle-switch",
             variants: ["multiple"],
             children: {
@@ -59,7 +56,6 @@ describe("toggle-switch", () => {
                 `,
             },
             options: {
-                ...defaultOptions,
                 includeNullModifier: false,
                 includeNullVariant: false,
                 testidSuffix: offChecked ? "unchecked" : "checked",