@stackoverflow/stacks 2.3.3 → 2.5.0

package/lib/atomic/v1/__snapshots__/typography.less.test.ts.snap

@@ -1,16 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`atomic: border v1 > should output all v1 atomic css classes for colors 1`] = `
-".fc-dark-legacy {
-    color: var(--fc-dark-legacy) !important;
-}
-
-.fc-medium-legacy {
-    color: var(--fc-medium-legacy) !important;
-}
-
-.fc-light-legacy {
-    color: var(--fc-light-legacy) !important;
-}
-"
-`;

package/lib/atomic/v1/border.less

@@ -1,210 +0,0 @@
-// DEPRECATED
-
-//  ============================================================================
-//  $   COLORS
-//  ============================================================================
-//  $$  WHITE
-//  ----------------------------------------------------------------------------
-.bc-white-legacy-1 { border-color: var(--black-legacy-500) !important; }
-.bc-white-legacy-2 { border-color: var(--black-legacy-300) !important; }
-.bc-white-legacy-3,
-.bc-white-legacy { border-color: var(--white-legacy) !important; }
-
-.highcontrast-mode({
-    .bc-white-legacy-1 { border-color: var(--black-legacy-025) !important; }
-    .bc-white-legacy-2 { border-color: var(--black-legacy-050) !important; }
-});
-
-//  $$  BLACK
-//  ----------------------------------------------------------------------------
-.bc-black-legacy-025 { border-color: var(--black-legacy-025) !important; }
-.bc-black-legacy-1,
-.bc-black-legacy-050 { border-color: var(--black-legacy-050) !important; }
-.bc-black-legacy-2,
-.bc-black-legacy-075 { border-color: var(--black-legacy-075) !important; }
-.bc-black-legacy-3,
-.bc-black-legacy-100 { border-color: var(--black-legacy-100) !important; }
-.bc-black-legacy-150 { border-color: var(--black-legacy-150) !important; }
-.bc-black-legacy-4,
-.bc-black-legacy-200 { border-color: var(--black-legacy-200) !important; }
-.bc-black-legacy-5,
-.bc-black-legacy-300 { border-color: var(--black-legacy-300) !important; }
-.bc-black-legacy-350 { border-color: var(--black-legacy-350) !important; }
-.bc-black-legacy-6,
-.bc-black-legacy-400 { border-color: var(--black-legacy-400) !important; }
-.bc-black-legacy-7,
-.bc-black-legacy-500 { border-color: var(--black-legacy-500) !important; }
-.bc-black-legacy-600 { border-color: var(--black-legacy-600) !important; }
-.bc-black-legacy-8,
-.bc-black-legacy-700 { border-color: var(--black-legacy-700) !important; }
-.bc-black-legacy-750 { border-color: var(--black-legacy-750) !important; }
-.bc-black-legacy-9,
-.bc-black-legacy-800 { border-color: var(--black-legacy-800) !important; }
-.bc-black-legacy-10,
-.bc-black-legacy-900 { border-color: var(--black-legacy-900) !important; }
-
-.highcontrast-mode({
-    .bc-black-legacy-1,
-    .bc-black-legacy-2,
-    .bc-black-legacy-3,
-    .bc-black-legacy-4,
-    .bc-black-legacy-025,
-    .bc-black-legacy-050,
-    .bc-black-legacy-075,
-    .bc-black-legacy-100,
-    .bc-black-legacy-150,
-    .bc-black-legacy-200 { border-color: var(--black-legacy-300) !important; }
-});
-
-//  $$  ORANGE
-//  ----------------------------------------------------------------------------
-.bc-orange-legacy-050 { border-color: var(--orange-legacy-050) !important; }
-.bc-orange-legacy-1,
-.bc-orange-legacy-100 { border-color: var(--orange-legacy-100) !important; }
-.bc-orange-legacy-200 { border-color: var(--orange-legacy-200) !important; }
-.bc-orange-legacy-300 { border-color: var(--orange-legacy-300) !important; }
-.bc-orange-legacy-2,
-.bc-orange-legacy-400 { border-color: var(--orange-legacy-400) !important; }
-.bc-orange-legacy-500 { border-color: var(--orange-legacy-500) !important; }
-.bc-orange-legacy-3,
-.bc-orange-legacy-600 { border-color: var(--orange-legacy-600) !important; }
-.bc-orange-legacy-700 { border-color: var(--orange-legacy-700) !important; }
-.bc-orange-legacy-800 { border-color: var(--orange-legacy-800) !important; }
-.bc-orange-legacy-900 { border-color: var(--orange-legacy-900) !important; }
-
-//  $$  BLUE
-//  ----------------------------------------------------------------------------
-.bc-blue-legacy-050 { border-color: var(--blue-legacy-050) !important; }
-.bc-blue-legacy-1,
-.bc-blue-legacy-100 { border-color: var(--blue-legacy-100) !important; }
-.bc-blue-legacy-200 { border-color: var(--blue-legacy-200) !important; }
-.bc-blue-legacy-300 { border-color: var(--blue-legacy-300) !important; }
-.bc-blue-legacy-2,
-.bc-blue-legacy-400 { border-color: var(--blue-legacy-400) !important; }
-.bc-blue-legacy-500 { border-color: var(--blue-legacy-500) !important; }
-.bc-blue-legacy-3,
-.bc-blue-legacy-600 { border-color: var(--blue-legacy-600) !important; }
-.bc-blue-legacy-700 { border-color: var(--blue-legacy-700) !important; }
-.bc-blue-legacy-800 { border-color: var(--blue-legacy-800) !important; }
-.bc-blue-legacy-900 { border-color: var(--blue-legacy-900) !important; }
-
-//  $$  POWDER
-//  ----------------------------------------------------------------------------
-.bc-powder-legacy-050 { border-color: var(--powder-legacy-050) !important; }
-.bc-powder-legacy-1,
-.bc-powder-legacy-100 { border-color: var(--powder-legacy-100) !important; }
-.bc-powder-legacy-200 { border-color: var(--powder-legacy-200) !important; }
-.bc-powder-legacy-300 { border-color: var(--powder-legacy-300) !important; }
-.bc-powder-legacy-2,
-.bc-powder-legacy-400 { border-color: var(--powder-legacy-400) !important; }
-.bc-powder-legacy-500 { border-color: var(--powder-legacy-500) !important; }
-.bc-powder-legacy-3,
-.bc-powder-legacy-600 { border-color: var(--powder-legacy-600) !important; }
-.bc-powder-legacy-700 { border-color: var(--powder-legacy-700) !important; }
-.bc-powder-legacy-800 { border-color: var(--powder-legacy-800) !important; }
-.bc-powder-legacy-900 { border-color: var(--powder-legacy-900) !important; }
-
-//  $$  GREEN
-//  ----------------------------------------------------------------------------
-.bc-green-legacy-025 { border-color: var(--green-legacy-025) !important; }
-.bc-green-legacy-050 { border-color: var(--green-legacy-050) !important; }
-.bc-green-legacy-1,
-.bc-green-legacy-100 { border-color: var(--green-legacy-100) !important; }
-.bc-green-legacy-200 { border-color: var(--green-legacy-200) !important; }
-.bc-green-legacy-300 { border-color: var(--green-legacy-300) !important; }
-.bc-green-legacy-2,
-.bc-green-legacy-400 { border-color: var(--green-legacy-400) !important; }
-.bc-green-legacy-500 { border-color: var(--green-legacy-500) !important; }
-.bc-green-legacy-3,
-.bc-success-legacy,
-.bc-green-legacy-600 { border-color: var(--green-legacy-600) !important; }
-.bc-green-legacy-700 { border-color: var(--green-legacy-700) !important; }
-.bc-green-legacy-800 { border-color: var(--green-legacy-800) !important; }
-.bc-green-legacy-900 { border-color: var(--green-legacy-900) !important; }
-
-//  $$  RED
-//  ----------------------------------------------------------------------------
-.bc-red-legacy-025 { border-color: var(--red-legacy-025) !important; }
-.bc-red-legacy-050 { border-color: var(--red-legacy-050) !important; }
-.bc-red-legacy-1,
-.bc-red-legacy-100 { border-color: var(--red-legacy-100) !important; }
-.bc-red-legacy-200 { border-color: var(--red-legacy-200) !important; }
-.bc-red-legacy-300 { border-color: var(--red-legacy-300) !important; }
-.bc-red-legacy-2,
-.bc-error-legacy,
-.bc-red-legacy-400 { border-color: var(--red-legacy-400) !important; }
-.bc-red-legacy-500 { border-color: var(--red-legacy-500) !important; }
-.bc-red-legacy-3,
-.bc-red-legacy-600 { border-color: var(--red-legacy-600) !important; }
-.bc-red-legacy-700 { border-color: var(--red-legacy-700) !important; }
-.bc-red-legacy-800 { border-color: var(--red-legacy-800) !important; }
-.bc-red-legacy-900 { border-color: var(--red-legacy-900) !important; }
-
-//  $$  YELLOW
-//  ----------------------------------------------------------------------------
-.bc-yellow-legacy-050 { border-color: var(--yellow-legacy-050) !important; }
-.bc-yellow-legacy-100 { border-color: var(--yellow-legacy-100) !important; }
-.bc-yellow-legacy-1,
-.bc-yellow-legacy-200 { border-color: var(--yellow-legacy-200) !important; }
-.bc-yellow-legacy-300 { border-color: var(--yellow-legacy-300) !important; }
-.bc-yellow-legacy-2,
-.bc-yellow-legacy-400 { border-color: var(--yellow-legacy-400) !important; }
-.bc-yellow-legacy-500 { border-color: var(--yellow-legacy-500) !important; }
-.bc-yellow-legacy-3,
-.bc-warning-legacy,
-.bc-yellow-legacy-600 { border-color: var(--yellow-legacy-600) !important; }
-.bc-yellow-legacy-700 { border-color: var(--yellow-legacy-700) !important; }
-.bc-yellow-legacy-800 { border-color: var(--yellow-legacy-800) !important; }
-.bc-yellow-legacy-900 { border-color: var(--yellow-legacy-900) !important; }
-
-//  $$  GOLD
-//  ----------------------------------------------------------------------------
-.bc-gold-legacy-lighter { border-color: var(--gold-legacy-lighter) !important; }
-.bc-gold-legacy { border-color: var(--gold-legacy) !important; }
-.bc-gold-legacy-darker { border-color: var(--gold-legacy-darker) !important; }
-
-//  $$  SILVER
-//  ----------------------------------------------------------------------------
-.bc-silver-legacy-lighter { border-color: var(--silver-legacy-lighter) !important; }
-.bc-silver-legacy { border-color: var(--silver-legacy) !important; }
-.bc-silver-legacy-darker { border-color: var(--silver-legacy-darker) !important; }
-
-//  $$  BRONZE
-//  ----------------------------------------------------------------------------
-.bc-bronze-legacy-lighter { border-color: var(--bronze-legacy-lighter) !important; }
-.bc-bronze-legacy { border-color: var(--bronze-legacy) !important; }
-.bc-bronze-legacy-darker { border-color: var(--bronze-legacy-darker) !important; }
-
-//  $$  PRIMARY
-//  ----------------------------------------------------------------------------
-.bc-theme-primary-legacy-025 { border-color: var(--theme-primary-legacy-025) !important; }
-.bc-theme-primary-legacy-050 { border-color: var(--theme-primary-legacy-050) !important; }
-.bc-theme-primary-legacy-075 { border-color: var(--theme-primary-legacy-075) !important; }
-.bc-theme-primary-legacy-100 { border-color: var(--theme-primary-legacy-100) !important; }
-.bc-theme-primary-legacy-150 { border-color: var(--theme-primary-legacy-150) !important; }
-.bc-theme-primary-legacy-200 { border-color: var(--theme-primary-legacy-200) !important; }
-.bc-theme-primary-legacy-300 { border-color: var(--theme-primary-legacy-300) !important; }
-.bc-theme-primary-legacy-350 { border-color: var(--theme-primary-legacy-350) !important; }
-.bc-theme-primary-legacy-400 { border-color: var(--theme-primary-legacy-400) !important; }
-.bc-theme-primary-legacy-500 { border-color: var(--theme-primary-legacy-500) !important; }
-.bc-theme-primary-legacy-600 { border-color: var(--theme-primary-legacy-600) !important; }
-.bc-theme-primary-legacy-700 { border-color: var(--theme-primary-legacy-700) !important; }
-.bc-theme-primary-legacy-800 { border-color: var(--theme-primary-legacy-800) !important; }
-.bc-theme-primary-legacy-900 { border-color: var(--theme-primary-legacy-900) !important; }
-
-//  $$  SECONDARY
-//  ----------------------------------------------------------------------------
-.bc-theme-secondary-legacy-025 { border-color: var(--theme-secondary-legacy-025) !important; }
-.bc-theme-secondary-legacy-050 { border-color: var(--theme-secondary-legacy-050) !important; }
-.bc-theme-secondary-legacy-075 { border-color: var(--theme-secondary-legacy-075) !important; }
-.bc-theme-secondary-legacy-100 { border-color: var(--theme-secondary-legacy-100) !important; }
-.bc-theme-secondary-legacy-150 { border-color: var(--theme-secondary-legacy-150) !important; }
-.bc-theme-secondary-legacy-200 { border-color: var(--theme-secondary-legacy-200) !important; }
-.bc-theme-secondary-legacy-300 { border-color: var(--theme-secondary-legacy-300) !important; }
-.bc-theme-secondary-legacy-350 { border-color: var(--theme-secondary-legacy-350) !important; }
-.bc-theme-secondary-legacy-400 { border-color: var(--theme-secondary-legacy-400) !important; }
-.bc-theme-secondary-legacy-500 { border-color: var(--theme-secondary-legacy-500) !important; }
-.bc-theme-secondary-legacy-600 { border-color: var(--theme-secondary-legacy-600) !important; }
-.bc-theme-secondary-legacy-700 { border-color: var(--theme-secondary-legacy-700) !important; }
-.bc-theme-secondary-legacy-800 { border-color: var(--theme-secondary-legacy-800) !important; }
-.bc-theme-secondary-legacy-900 { border-color: var(--theme-secondary-legacy-900) !important; }

package/lib/atomic/v1/border.less.test.ts

@@ -1,14 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { renderLess } from "../../test/less-test-utils";
-
-describe("atomic: border v1", () => {
-    it("should output all v1 atomic css classes for colors", async () => {
-        const css = await renderLess(`
-            @import (reference) "./lib/exports/v1/constants-colors.less";
-            @import (reference) "./lib/exports/mixins.less";
-            @import "./lib/atomic/v1/border.less";
-        `);
-
-        expect(css).toMatchSnapshot();
-    });
-});

package/lib/atomic/v1/color.less

@@ -1,183 +0,0 @@
-// DEPRECATED
-& {
-    .color(@color-name) {
-        .fc-@{color-name},
-        .h\:fc-@{color-name}:hover,
-        .f\:fc-@{color-name}:focus,
-        .f\:fc-@{color-name}:focus-within {
-            color: var(~"--@{color-name}") !important;
-        }
-        .d\:fc-@{color-name} {
-            .dark-mode({
-                color: var(~"--@{color-name}") !important;
-            });
-        }
-
-        .bg-@{color-name},
-        .h\:bg-@{color-name}:hover,
-        .f\:bg-@{color-name}:focus,
-        .f\:bg-@{color-name}:focus-within {
-            background-color: var(~"--@{color-name}") !important;
-        }
-        .d\:bg-@{color-name} {
-            .dark-mode({
-                background-color: var(~"--@{color-name}") !important;
-            });
-        }
-    }
-
-    .standard-weights(@color) {
-        .color(~"@{color}-900");
-        .color(~"@{color}-800");
-        .color(~"@{color}-700");
-        .color(~"@{color}-600");
-        .color(~"@{color}-500");
-        .color(~"@{color}-400");
-        .color(~"@{color}-300");
-        .color(~"@{color}-200");
-        .color(~"@{color}-100");
-        .color(~"@{color}-050");
-    }
-
-    .standard-weights(black-legacy);
-    .standard-weights(orange-legacy);
-    .standard-weights(blue-legacy);
-    .standard-weights(powder-legacy);
-    .standard-weights(green-legacy);
-    .standard-weights(yellow-legacy);
-    .standard-weights(red-legacy);
-    .standard-weights(theme-primary-legacy);
-    .standard-weights(theme-secondary-legacy);
-
-    // Additional color names
-    .color(white-legacy);
-    .color(black-legacy);
-    .color(black-legacy-750);
-    .color(black-legacy-350);
-    .color(black-legacy-150);
-    .color(black-legacy-075);
-    .color(black-legacy-025);
-    .color(green-legacy-025);
-    .color(red-legacy-025);
-    .color(theme-primary-legacy-350);
-    .color(theme-primary-legacy-150);
-    .color(theme-primary-legacy-075);
-    .color(theme-primary-legacy-025);
-    .color(theme-secondary-legacy-350);
-    .color(theme-secondary-legacy-150);
-    .color(theme-secondary-legacy-075);
-    .color(theme-secondary-legacy-025);
-
-    .fc-success-legacy { &:extend(.fc-green-legacy-600); }
-    .fc-warning-legacy { &:extend(.fc-yellow-legacy-600); }
-    .fc-error-legacy,
-    .fc-danger-legacy { &:extend(.fc-red-legacy-500); }
-    .bg-success-legacy { &:extend(.bg-green-legacy-500); }
-    .bg-warning-legacy { &:extend(.bg-yellow-legacy-600); }
-    .bg-error-legacy,
-    .bg-danger-legacy { &:extend(.bg-red-legacy-500); }
-}
-
-.fc-theme-primary-legacy {
-    color: var(--theme-primary-color-legacy) !important;
-}
-
-.bg-theme-primary-legacy {
-    background-color: var(--theme-primary-color-legacy) !important;
-}
-
-.bc-theme-primary-legacy {
-    border-color: var(--theme-primary-color-legacy) !important;
-}
-
-.fc-theme-secondary-legacy {
-    color: var(--theme-secondary-color-legacy) !important;
-}
-
-.bg-theme-secondary-legacy {
-    background-color: var(--theme-secondary-color-legacy) !important;
-}
-
-.bc-theme-secondary-legacy {
-    border-color: var(--theme-secondary-color-legacy) !important;
-}
-
-.fc-white-legacy__forced {
-    color: @white-legacy !important;
-}
-
-.fc-black-legacy__forced {
-    color: @black-legacy !important;
-}
-
-.fc-gold-legacy {
-    color: var(--gold-legacy) !important;
-}
-
-.fc-gold-legacy-darker {
-    color: var(--gold-legacy-darker) !important;
-}
-
-.fc-gold-legacy-lighter {
-    color: var(--gold-legacy-lighter) !important;
-}
-
-.bg-gold-legacy {
-    background-color: var(--gold-legacy) !important;
-}
-
-.bg-gold-legacy-darker {
-    background-color: var(--gold-legacy-darker) !important;
-}
-
-.bg-gold-legacy-lighter {
-    background-color: var(--gold-legacy-lighter) !important;
-}
-
-.fc-silver-legacy {
-    color: var(--silver-legacy) !important;
-}
-
-.fc-silver-legacy-darker {
-    color: var(--silver-legacy-darker) !important;
-}
-
-.fc-silver-legacy-lighter {
-    color: var(--silver-legacy-lighter) !important;
-}
-
-.bg-silver-legacy {
-    background-color: var(--silver-legacy) !important;
-}
-
-.bg-silver-legacy-darker {
-    background-color: var(--silver-legacy-darker) !important;
-}
-
-.bg-silver-legacy-lighter {
-    background-color: var(--silver-legacy-lighter) !important;
-}
-
-.fc-bronze-legacy {
-    color: var(--bronze-legacy) !important;
-}
-
-.fc-bronze-legacy-darker {
-    color: var(--bronze-legacy-darker) !important;
-}
-
-.fc-bronze-legacy-lighter {
-    color: var(--bronze-legacy-lighter) !important;
-}
-
-.bg-bronze-legacy {
-    background-color: var(--bronze-legacy) !important;
-}
-
-.bg-bronze-legacy-darker {
-    background-color: var(--bronze-legacy-darker) !important;
-}
-
-.bg-bronze-legacy-lighter {
-    background-color: var(--bronze-legacy-lighter) !important;
-}

package/lib/atomic/v1/color.less.test.ts

@@ -1,14 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { renderLess } from "../../test/less-test-utils";
-
-describe("atomic: color v1", () => {
-    it("should output all v1 atomic css classes for colors", async () => {
-        const css = await renderLess(`
-            @import (reference) "./lib/exports/v1/constants-colors.less";
-            @import (reference) "./lib/exports/mixins.less";
-            @import "./lib/atomic/v1/color.less";
-        `);
-
-        expect(css).toMatchSnapshot();
-    });
-});

package/lib/atomic/v1/typography.less

@@ -1,8 +0,0 @@
-// DEPRECATED
-
-//  ============================================================================
-//  $$  TEXT COLORS
-//  ----------------------------------------------------------------------------
-.fc-dark-legacy { color: var(--fc-dark-legacy) !important; }
-.fc-medium-legacy { color: var(--fc-medium-legacy) !important; }
-.fc-light-legacy { color: var(--fc-light-legacy) !important; }

package/lib/atomic/v1/typography.less.test.ts

@@ -1,14 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { renderLess } from "../../test/less-test-utils";
-
-describe("atomic: border v1", () => {
-    it("should output all v1 atomic css classes for colors", async () => {
-        const css = await renderLess(`
-            @import (reference) "./lib/exports/v1/constants-colors.less";
-            @import (reference) "./lib/exports/mixins.less";
-            @import "./lib/atomic/v1/typography.less";
-        `);
-
-        expect(css).toMatchSnapshot();
-    });
-});

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

@@ -1,13 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-describe("activity-indicator", () => {
-    runA11yTests({
-        baseClass: "s-activity-indicator",
-        variants: ["danger", "success", "warning"],
-        children: {
-            default: `<div class="v-visible-sr">New activity</div>`,
-            new: `new<div class="v-visible-sr">New activity</div>`,
-        },
-    });
-});

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

@@ -1,22 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-describe("activity-indicator", () => {
-    runVisualTests({
-        baseClass: "s-activity-indicator",
-        variants: ["danger", "success", "warning"],
-        children: {
-            default: `<div class="v-visible-sr">New activity</div>`,
-            new: `new<div class="v-visible-sr">New activity</div>`,
-        },
-        template: ({ component, testid }) => html`
-            <div
-                class="d-inline-flex ai-center jc-center hs1 ws1 p8"
-                data-testid="${testid}"
-            >
-                ${component}
-            </div>
-        `,
-    });
-});

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

@@ -1,35 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-// TODO check for visited styling
-const link = (text = "", visited = true, classes = "") =>
-    `<a class="${classes}" href="${
-        visited ? "/" : "https://stackoverflow.design/404-unvisited"
-    }">${text}</a>`;
-
-describe("anchors", () => {
-    runA11yTests({
-        baseClass: "s-anchors",
-        modifiers: {
-            primary: [
-                "default",
-                "grayscale",
-                "muted",
-                "danger",
-                "inherit",
-                "underlined",
-            ],
-        },
-        children: {
-            default: `A ${link(
-                "link"
-            )}, a <button class="s-btn s-btn__link">button</button>, an ${link(
-                "unvisited link",
-                false
-            )}.`,
-        },
-        options: {
-            includeNullModifier: false,
-        },
-    });
-});

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

@@ -1,47 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-// TODO check for visited styling
-const link = (text = "", classes = "") =>
-    `<a class="${classes}" href="#">${text}</a>`;
-const links = `A ${link(
-    "link"
-)}, a <button class="s-btn s-btn__link">button</button>, an ${link(
-    "unvisited link"
-)}.<br/>Nested: ${link("danger", "s-link s-link__danger")}, ${link(
-    "grayscale",
-    "s-link s-link__grayscale"
-)}.`;
-
-describe("anchors", () => {
-    runVisualTests({
-        baseClass: "s-anchors",
-        modifiers: {
-            primary: [
-                "default",
-                "grayscale",
-                "muted",
-                "danger",
-                "inherit",
-                "underlined",
-            ],
-        },
-        children: {
-            // children include nested anchors block to test for appropriate nested styling
-            default: `
-                ${links}
-                <div class="s-card s-anchors s-anchors__danger">Danger: ${links}</div>
-                <div class="s-card s-anchors s-anchors__muted mt4">Muted: ${links}</div>
-            `,
-        },
-        options: {
-            includeNullModifier: false,
-        },
-        template: ({ component, testid }) => html`
-            <div data-testid="${testid}" class="s-card ws3 fc-green-500">
-                ${testid}: ${component}
-            </div>
-        `,
-    });
-});

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

@@ -1,35 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-const getChild = (child?: string): string => {
-    const srEl = `<span class="v-visible-sr">Stack Overflow</span>`;
-    switch (child) {
-        case "image":
-            return `<img
-                class="s-avatar--image"
-                src="https://picsum.photos/id/1/48"
-                alt="team logo"
-            />${srEl}`;
-        case "letter":
-            return `<div
-                class="s-avatar--letter"
-                aria-hidden="true">
-                    S
-            </div>${srEl}`;
-        default:
-            return srEl;
-    }
-};
-
-describe("avatar", () => {
-    runA11yTests({
-        baseClass: "s-avatar",
-        variants: ["24", "32", "48", "64", "96", "128"],
-        children: {
-            default: getChild(),
-            image: getChild("image"),
-            letter: getChild("letter"),
-        },
-        tag: "span",
-    });
-});

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

@@ -1,50 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-const base64Image =
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATwAAAE8CAMAAABq2/00AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF/3IA/////44y/8OS/+fU//Xs/6tn/9e2EhvbMQAABH9JREFUeNrs3e1y2ygAhWELJHH/d7zuJpN1XAnxoe408Ly/6xnnHXEOIEwfDwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/gbAGEhrZl2VloY20PIk8tAzZbfkXA7eeuHyysVfdFMsXiY66ptiWF8Re05BdxF7HkBV7PUNW7FVx4E7sVSwrDjBw2+pC7NWwHtkTe3ULM7En9v6O2ONF7Ik9sSf2IPbEntgTexB7t8feTsynniD2Oh6tXex1hFoUe02kaxVi72JMZs+Rib0LLdkXFGLvaECWjkOxdxVmUex1rB6S2Kss2lcytSH2LnVkakPsXQ7E8xwTe5fuMrUh9vKj8CP4xN7lNOXc3mnwib1M2X7Z28VeS93mg0/sFZTG6WCMVSE51fqsYL4s9jpqQ+yV1caxErHXUxtir6c2xF5HbYRF7LXXhtjrqQ2x11MbYu9tLG4VtSH2empD7BUNxpPaSGKvPPh2sdcxX45i78baEHs18+X32hB7NfPl99oQex21MVHsxViaR8W1MU3s/XpMSvWF0tqYJfY+BmMq01dcG+scP6/6enTK9BW+1J0j9l5aYN0rP5BzM0XsbSUnAlpqY4LYezexFeRSbpslH3uDXdF64OG6est258PohXE8BK+7o6g29rJTQsPt1F3qK9qdTwMP2Wz2X1Vv0UvdbeQ53nl2Xesr2Z0Pww7Zs5lsafWW1MY+6JDNxv5/+kLb5/fXfzLirRdhKSGnr6A2tkGvJoxLGZnqva6NkAbdgA+pUN9a+QuWYYPu+98ee/W1/PJgoMG7lek7nW3UHiEdbKpcqu+kO2L9b4aG0rcWjt5jfWf2Z7kCeE891XtSG/O86A5d+tbZj1h0VW+c/ja90FG9uxMCFdWb/+SkZ1Oaq/d1vjzvXfvF+tLp+aiZT5S1Vm90lrFj02B3bW1d9X7T92u+7Aq9qk2D+Fob/v/Myu7YostC76xe9K966evfr5+7ekuXHVy1V6+R275pEMd3kPbGB+Syeod/8D7Sf41NBvPdMf7a4uXpaTGY0zd+4r0vDlKtwdPqHf/BOzzf8zQYqvRtcz54mXfUNUVyUL0T7AhcrBbKY/C36p1geVEy1y00+F3fBA9eKFxnlRXJa/XOcKxnqeF6Pv1VvTPc7RuXai6K5LN6Z9hQSUsb2Rh86pviUultaScTg/sMD15YeqmcT8/bFx1Foi/umk9P3hcMfqTenrabBT5j8DGTwHivwelOCTwNrnfJm/Ol2U0GZ74WdE+dBn9+Z/z2J9UZ7IjB7dZv8gPl9RRJIq89BiN57QZ38trn04G8k62E6xjcHuQ1D+JEXrvBnbz2+XQgr30+/SCveT69ktceg4m8doOBvDG/CXnkkTezvOXPQB555JFHHnnkkUceeeSRRx555JFHHnnkkWcnmTzyyCOPPPLII4888sgjjzzfhDzyyCOPPPL+9Ff+eyCPPPLII4888sgjjzzyyCOPPPLII4888sgDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPy//CPAAPiZOI3BPDFQAAAAAElFTkSuQmCC";
-
-const getChild = (child?: string): string => {
-    const srEl = `<span class="v-visible-sr">Stack Overflow</span>`;
-    switch (child) {
-        case "image":
-            return `<img
-                class="s-avatar--image"
-                src="${base64Image}"
-                alt="team logo"
-            />${srEl}`;
-        case "letter":
-            return `<div
-                class="s-avatar--letter"
-                aria-hidden="true">
-                    S
-            </div>${srEl}`;
-        default:
-            return srEl;
-    }
-};
-
-describe("avatar", () => {
-    runVisualTests({
-        baseClass: "s-avatar",
-        variants: ["24", "32", "48", "64", "96", "128"],
-        children: {
-            default: getChild(),
-            image: getChild("image"),
-            letter: getChild("letter"),
-        },
-        attributes: {
-            href: "#",
-        },
-        tag: "a",
-        template: ({ component, testid }) => html`
-            <div
-                data-testid="${testid}"
-                class="d-inline-flex ai-center jc-center hmn1 wmn1 p8"
-            >
-                ${component}
-            </div>
-        `,
-    });
-});