@stackoverflow/stacks 2.0.8 → 2.1.0-rc.0

package/dist/js/stacks.js

@@ -757,7 +757,7 @@ class Multimap {
     }
 }
 
-class IndexedMultimap extends (/* unused pure expression or super */ null && (Multimap)) {
+class IndexedMultimap extends Multimap {
     constructor() {
         super();
         this.keysByValue = new Map();

package/lib/atomic/misc.less

@@ -267,7 +267,7 @@
 //  $  OUTLINE
 //  ----------------------------------------------------------------------------
 .outline-none { outline: 0 !important; }
-.outline-ring { outline: solid var(--su-static4) var(--focus-ring); }
+.outline-ring { outline: solid var(--su-static4) var(--translucent-secondary); }
 
 .f\:outline-ring {
     &:focus,

package/lib/components/activity-indicator/activity-indicator.a11y.test.ts

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

package/lib/components/activity-indicator/activity-indicator.less

@@ -1,5 +1,5 @@
 .s-activity-indicator {
-    --_ai-focus-ring: var(--focus-ring);
+    --_ai-translucent: var(--translucent-secondary);
     --_ai-bg: var(--theme-secondary-400);
     --_ai-fc: var(--white);
 
@@ -10,7 +10,7 @@
     // VARIANTS
     &&__danger {
         --_ai-bg: var(--red-400);
-        --_ai-focus-ring: var(--focus-ring-error);
+        --_ai-translucent: var(--translucent-error);
 
         .highcontrast-mode({
             --_ai-bg: var(--red-500);
@@ -19,7 +19,7 @@
 
     &&__success {
         --_ai-bg: var(--green-400);
-        --_ai-focus-ring: var(--focus-ring-success);
+        --_ai-translucent: var(--translucent-success);
 
         .highcontrast-mode({
             --_ai-bg: var(--green-500);
@@ -29,7 +29,7 @@
     &&__warning {
         --_ai-bg: var(--yellow-400);
         --_ai-fc: var(--_black-static);
-        --_ai-focus-ring: var(--focus-ring-warning);
+        --_ai-translucent: var(--translucent-warning);
 
         .highcontrast-mode({
             --_ai-bg: var(--yellow-500); // needs to be here to override default high contrast
@@ -38,7 +38,7 @@
     }
 
     background-color: var(--_ai-bg);
-    box-shadow: 0 0 0 var(--su-static4) var(--_ai-focus-ring);
+    box-shadow: 0 0 0 var(--su-static4) var(--_ai-translucent);
     color: var(--_ai-fc);
 
     border-radius: 1000px;

package/lib/components/activity-indicator/activity-indicator.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("activity-indicator", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-activity-indicator",
         variants: ["danger", "success", "warning"],
         children: {

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

@@ -1,4 +1,4 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 // TODO check for visited styling
@@ -8,8 +8,7 @@ const link = (text = "", visited = true, classes = "") =>
     }">${text}</a>`;
 
 describe("anchors", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-anchors",
         modifiers: {
             primary: [
@@ -30,7 +29,6 @@ describe("anchors", () => {
             )}.`,
         },
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
         },
     });

package/lib/components/anchor/anchor.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";
 
 // TODO check for visited styling
@@ -15,8 +15,7 @@ const links = `A ${link(
 )}.`;
 
 describe("anchors", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-anchors",
         modifiers: {
             primary: [
@@ -37,7 +36,6 @@ describe("anchors", () => {
             `,
         },
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
         },
         template: ({ component, testid }) => html`

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

@@ -1,4 +1,4 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 const getChild = (child?: string): string => {
@@ -22,8 +22,7 @@ const getChild = (child?: string): string => {
 };
 
 describe("avatar", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-avatar",
         variants: ["24", "32", "48", "64", "96", "128"],
         children: {

package/lib/components/avatar/avatar.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 base64Image =
@@ -26,8 +26,7 @@ const getChild = (child?: string): string => {
 };
 
 describe("avatar", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-avatar",
         variants: ["24", "32", "48", "64", "96", "128"],
         children: {

package/lib/components/award-bling/award-bling.a11y.test.ts

@@ -1,16 +1,14 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("award-bling", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-award-bling",
         variants: ["gold", "silver", "bronze"],
         children: {
             default: `100 <div class="v-visible-sr">award</div>`,
         },
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
     });

package/lib/components/award-bling/award-bling.visual.test.ts

@@ -1,17 +1,15 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import { html } from "@open-wc/testing";
 import "../../index";
 
 describe("anchors", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-award-bling",
         variants: ["gold", "silver", "bronze"],
         children: {
             default: `100 <div class="v-visible-sr">award</div>`,
         },
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
         template: ({ component, testid }) => html`

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

@@ -1,4 +1,4 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 // import { Icons } from "@stackoverflow/stacks-icons";
 import "../../index";
 
@@ -15,8 +15,7 @@ const variants = {
 describe("badge", () => {
     // Award badges (Default/badge counts)
     variants.blings.map((bling) => {
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             baseClass: "s-badge",
             variants: [bling],
             children: {
@@ -29,23 +28,20 @@ describe("badge", () => {
     });
 
     // Number counts
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-badge",
         variants: variants.numbers,
         children: {
             default: "123",
         },
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
         },
         tag: "span",
     });
 
     // Icon badges
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-badge",
         variants: [...variants.states.filled, ...variants.states.other],
         modifiers: {
@@ -56,15 +52,13 @@ describe("badge", () => {
             //     icon: Icons.IconEyeSm,  // TODO fix the icon imports
         },
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
         },
         tag: "span",
     });
 
     // Filled badges
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-badge",
         variants: variants.states.filled,
         modifiers: {
@@ -75,7 +69,6 @@ describe("badge", () => {
             //     icon: Icons.IconEyeOffSm,  // TODO fix the icon imports
         },
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
             includeNullVariant: false,
         },
@@ -83,8 +76,7 @@ describe("badge", () => {
     });
 
     // User badges
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-badge",
         variants: variants.users,
         modifiers: {
@@ -97,8 +89,7 @@ describe("badge", () => {
     });
 
     // Sizes
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-badge",
         modifiers: {
             primary: ["xs", "sm"],

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

@@ -1,4 +1,4 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 // import { Icons } from "@stackoverflow/stacks-icons";
 import "../../index";
 import { html } from "@open-wc/testing";
@@ -25,8 +25,7 @@ const template = ({ component, testid }: any) => html`
 
 describe("badge", () => {
     // Base badge
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-badge",
         children: {
             default: `base badge`,
@@ -37,8 +36,7 @@ describe("badge", () => {
 
     // Award badges
     variants.blings.map((bling) => {
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             baseClass: "s-badge",
             variants: [bling],
             children: {
@@ -47,7 +45,6 @@ describe("badge", () => {
                 </span>`,
             },
             options: {
-                ...defaultOptions,
                 includeNullVariant: false,
                 includeNullModifier: false,
             },
@@ -57,15 +54,13 @@ describe("badge", () => {
     });
 
     // Number counts
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-badge",
         variants: variants.numbers,
         children: {
             default: "123",
         },
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
             includeNullModifier: false,
         },
@@ -74,8 +69,7 @@ describe("badge", () => {
     });
 
     // Icon badges
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-badge",
         variants: [...variants.states.filled, ...variants.states.other],
         modifiers: {
@@ -86,7 +80,6 @@ describe("badge", () => {
             //     icon: Icons.IconEyeSm,  // TODO fix the icon imports
         },
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
         },
         tag: "span",
@@ -94,8 +87,7 @@ describe("badge", () => {
     });
 
     // Filled badges
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-badge",
         variants: variants.states.filled,
         children: {
@@ -103,7 +95,6 @@ describe("badge", () => {
             //     icon: Icons.IconEyeOffSm,  // TODO fix the icon imports
         },
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
             includeNullVariant: false,
         },
@@ -112,8 +103,7 @@ describe("badge", () => {
     });
 
     // User badges
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-badge",
         variants: variants.users,
         modifiers: {
@@ -123,7 +113,6 @@ describe("badge", () => {
             default: "user badge",
         },
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
         tag: "span",
@@ -131,8 +120,7 @@ describe("badge", () => {
     });
 
     // Sizes
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-badge",
         modifiers: {
             primary: ["xs", "sm"],
@@ -141,7 +129,6 @@ describe("badge", () => {
             default: "size badge",
         },
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
         },
         tag: "span",

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

@@ -1,4 +1,4 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 const bannerChild = `
@@ -19,8 +19,7 @@ const bannerChild = `
 `;
 
 describe("banner", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-banner",
         variants: ["info", "success", "warning", "danger"],
         modifiers: {

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

@@ -1,4 +1,4 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 const bannerChild = `
@@ -19,8 +19,7 @@ const bannerChild = `
 `;
 
 describe("banner", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-banner",
         variants: ["info", "success", "warning", "danger"],
         modifiers: {

package/lib/components/block-link/block-link.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 blockLinkTemplate = ({ component, testid }: any) =>
 
 describe("block-link", () => {
     // Base block link
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-block-link",
         modifiers: {
             global: ["is-selected"],
@@ -26,8 +25,7 @@ describe("block-link", () => {
     });
 
     // Base + danger
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-block-link",
         modifiers: {
             primary: ["danger"],
@@ -36,15 +34,13 @@ describe("block-link", () => {
             default: `block link`,
         },
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
         },
         template: blockLinkTemplate,
     });
 
     // All left and rignt variants
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-block-link",
         variants: ["left is-selected", "right is-selected"],
         modifiers: {
@@ -54,7 +50,6 @@ describe("block-link", () => {
             default: `block link`,
         },
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
         template: blockLinkTemplate,

package/lib/components/block-link/block-link.less

@@ -25,16 +25,9 @@ a.s-block-link,
     &&__left,
     &&__right {
         &.is-selected {
-            &:focus:not(:focus-visible),
-            &:focus-visible {
-                outline: none;
+            &:not(:focus-visible) {
+                box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color);
             }
-
-            &:focus-visible {
-                box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color), 0 0 0 var(--su-static4) var(--focus-ring-muted);
-            }
-
-            box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color);
         }
     }
 
@@ -63,7 +56,11 @@ a.s-block-link,
         color: var(--_bl-fc-visited);
     }
 
-    @focus-styles();
+    &:focus-visible {
+        border-radius: var(--br-sm);
+        .focus-styles(true);
+    }
+
     background-color: var(--_bl-bg); // [1]
     color: var(--_bl-fc);
 

package/lib/components/block-link/block-link.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
@@ -13,8 +13,7 @@ const blockLinkTemplate = ({ component, testid }: any) =>
 
 describe("block-link", () => {
     // Base block link
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-block-link",
         modifiers: {
             global: ["is-selected"],
@@ -26,8 +25,7 @@ describe("block-link", () => {
     });
 
     // Base + danger
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-block-link",
         modifiers: {
             primary: ["danger"],
@@ -36,15 +34,13 @@ describe("block-link", () => {
             default: `block link`,
         },
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
         },
         template: blockLinkTemplate,
     });
 
     // All left and rignt variants
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-block-link",
         variants: ["left is-selected", "right is-selected"],
         modifiers: {
@@ -54,7 +50,6 @@ describe("block-link", () => {
             default: `block link`,
         },
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
         template: blockLinkTemplate,

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

@@ -1,10 +1,9 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import { html } from "@open-wc/testing";
 import "../../index";
 
 describe("breadcrumbs", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-breadcrumbs",
         children: {
             default: `

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

@@ -1,10 +1,9 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import { html } from "@open-wc/testing";
 import "../../index";
 
 describe("breadcrumbs", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-breadcrumbs",
         children: {
             default: `

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

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