@stackoverflow/stacks 2.5.3 → 2.5.5

package/lib/stacks.ts

@@ -1,113 +1,113 @@
-import * as Stimulus from "@hotwired/stimulus";
-
-export class StacksApplication extends Stimulus.Application {
-    static _initializing = true;
-
-    load(...definitions: Stimulus.Definition[]): void;
-    load(definitions: Stimulus.Definition[]): void;
-    load(
-        head: Stimulus.Definition | Stimulus.Definition[],
-        ...rest: Stimulus.Definition[]
-    ) {
-        const definitions = Array.isArray(head) ? head : [head, ...rest];
-
-        for (const definition of definitions) {
-            const hasPrefix = /^s-/.test(definition.identifier);
-            if (StacksApplication._initializing && !hasPrefix) {
-                throw 'Stacks-created Stimulus controller names must start with "s-".';
-            }
-            if (!StacksApplication._initializing && hasPrefix) {
-                throw 'The "s-" prefix on Stimulus controller names is reserved for Stacks-created controllers.';
-            }
-        }
-
-        super.load(definitions);
-    }
-
-    static start(
-        element?: Element,
-        schema?: Stimulus.Schema
-    ): StacksApplication {
-        const application = new StacksApplication(element, schema);
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        application.start();
-        return application;
-    }
-
-    static finalize() {
-        StacksApplication._initializing = false;
-    }
-}
-
-export const application: Stimulus.Application = StacksApplication.start();
-
-export class StacksController extends Stimulus.Controller {
-    protected getElementData(element: Element, key: string) {
-        return element.getAttribute("data-" + this.identifier + "-" + key);
-    }
-    protected setElementData(element: Element, key: string, value: string) {
-        element.setAttribute("data-" + this.identifier + "-" + key, value);
-    }
-    protected removeElementData(element: Element, key: string) {
-        element.removeAttribute("data-" + this.identifier + "-" + key);
-    }
-    protected triggerEvent<T>(
-        eventName: string,
-        detail?: T,
-        optionalElement?: Element
-    ) {
-        const namespacedName = this.identifier + ":" + eventName;
-        let event: CustomEvent<T>;
-        try {
-            event = new CustomEvent(namespacedName, {
-                bubbles: true,
-                cancelable: true,
-                detail: detail,
-            });
-        } catch (ex) {
-            // Internet Explorer
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            event = document.createEvent("CustomEvent");
-            event.initCustomEvent(namespacedName, true, true, detail);
-        }
-        (optionalElement || this.element).dispatchEvent(event);
-        return event;
-    }
-}
-
-// ControllerDefinition/createController/addController is here to make
-// it easier to consume Stimulus from ES5 files (without classes)
-export interface ControllerDefinition {
-    [name: string]: unknown;
-    targets?: string[];
-}
-export function createController(
-    controllerDefinition: ControllerDefinition
-): typeof StacksController {
-    // eslint-disable-next-line no-prototype-builtins
-    const Controller = controllerDefinition.hasOwnProperty("targets")
-        ? class Controller extends StacksController {
-              static targets = controllerDefinition.targets ?? [];
-          }
-        : class Controller extends StacksController {};
-
-    for (const prop in controllerDefinition) {
-        const ownPropDescriptor =
-            // eslint-disable-next-line no-prototype-builtins
-            controllerDefinition.hasOwnProperty(prop) &&
-            Object.getOwnPropertyDescriptor(controllerDefinition, prop);
-        if (prop !== "targets" && ownPropDescriptor) {
-            Object.defineProperty(
-                Controller.prototype,
-                prop,
-                ownPropDescriptor
-            );
-        }
-    }
-
-    return Controller;
-}
-
-export function addController(name: string, controller: ControllerDefinition) {
-    application.register(name, createController(controller));
-}
+import * as Stimulus from "@hotwired/stimulus";
+
+export class StacksApplication extends Stimulus.Application {
+    static _initializing = true;
+
+    load(...definitions: Stimulus.Definition[]): void;
+    load(definitions: Stimulus.Definition[]): void;
+    load(
+        head: Stimulus.Definition | Stimulus.Definition[],
+        ...rest: Stimulus.Definition[]
+    ) {
+        const definitions = Array.isArray(head) ? head : [head, ...rest];
+
+        for (const definition of definitions) {
+            const hasPrefix = /^s-/.test(definition.identifier);
+            if (StacksApplication._initializing && !hasPrefix) {
+                throw 'Stacks-created Stimulus controller names must start with "s-".';
+            }
+            if (!StacksApplication._initializing && hasPrefix) {
+                throw 'The "s-" prefix on Stimulus controller names is reserved for Stacks-created controllers.';
+            }
+        }
+
+        super.load(definitions);
+    }
+
+    static start(
+        element?: Element,
+        schema?: Stimulus.Schema
+    ): StacksApplication {
+        const application = new StacksApplication(element, schema);
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        application.start();
+        return application;
+    }
+
+    static finalize() {
+        StacksApplication._initializing = false;
+    }
+}
+
+export const application: Stimulus.Application = StacksApplication.start();
+
+export class StacksController extends Stimulus.Controller {
+    protected getElementData(element: Element, key: string) {
+        return element.getAttribute("data-" + this.identifier + "-" + key);
+    }
+    protected setElementData(element: Element, key: string, value: string) {
+        element.setAttribute("data-" + this.identifier + "-" + key, value);
+    }
+    protected removeElementData(element: Element, key: string) {
+        element.removeAttribute("data-" + this.identifier + "-" + key);
+    }
+    protected triggerEvent<T>(
+        eventName: string,
+        detail?: T,
+        optionalElement?: Element
+    ) {
+        const namespacedName = this.identifier + ":" + eventName;
+        let event: CustomEvent<T>;
+        try {
+            event = new CustomEvent(namespacedName, {
+                bubbles: true,
+                cancelable: true,
+                detail: detail,
+            });
+        } catch (ex) {
+            // Internet Explorer
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            event = document.createEvent("CustomEvent");
+            event.initCustomEvent(namespacedName, true, true, detail);
+        }
+        (optionalElement || this.element).dispatchEvent(event);
+        return event;
+    }
+}
+
+// ControllerDefinition/createController/addController is here to make
+// it easier to consume Stimulus from ES5 files (without classes)
+export interface ControllerDefinition {
+    [name: string]: unknown;
+    targets?: string[];
+}
+export function createController(
+    controllerDefinition: ControllerDefinition
+): typeof StacksController {
+    // eslint-disable-next-line no-prototype-builtins
+    const Controller = controllerDefinition.hasOwnProperty("targets")
+        ? class Controller extends StacksController {
+              static targets = controllerDefinition.targets ?? [];
+          }
+        : class Controller extends StacksController {};
+
+    for (const prop in controllerDefinition) {
+        const ownPropDescriptor =
+            // eslint-disable-next-line no-prototype-builtins
+            controllerDefinition.hasOwnProperty(prop) &&
+            Object.getOwnPropertyDescriptor(controllerDefinition, prop);
+        if (prop !== "targets" && ownPropDescriptor) {
+            Object.defineProperty(
+                Controller.prototype,
+                prop,
+                ownPropDescriptor
+            );
+        }
+    }
+
+    return Controller;
+}
+
+export function addController(name: string, controller: ControllerDefinition) {
+    application.register(name, createController(controller));
+}

package/lib/test/a11y-test-utils.ts

@@ -1,94 +1,94 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import { screen } from "@testing-library/dom";
-import axe from "axe-core";
-import registerAPCACheck from "apca-check";
-import { generateTestVariations, type TestVariationArgs } from "./test-utils";
-import type { AdditionalAssertion } from "./assertions";
-
-type A11yTestArgs = TestVariationArgs & {
-    /**
-     * Additional assertions to run against the test element
-     */
-    additionalAssertions?: AdditionalAssertion[];
-};
-
-// register Stack APCA conformance threshold function
-// see also https://stackoverflow.design/product/foundation/accessibility/#visual-accessibility
-const customConformanceThresholdFn = (fontSize: string): number | null => {
-    // if the font size is 32px or larger, we use a 45Lc threshold
-    // otherwise, we use a 60Lc threshold
-    return parseFloat(fontSize) >= 32 ? 45 : 60;
-};
-registerAPCACheck("custom", customConformanceThresholdFn);
-
-const scheduleA11yTest = ({
-    element,
-    testid,
-    theme,
-    additionalAssertions = [],
-}: {
-    element: ReturnType<typeof html>;
-    testid: string;
-    theme: string[];
-    additionalAssertions?: AdditionalAssertion[];
-}) => {
-    it(`a11y: ${testid} should be accessible`, async () => {
-        await fixture(element);
-        const el = screen.getByTestId(testid);
-
-        document.body.className = "";
-
-        if (theme?.length) {
-            const prefixedThemes = theme.map((t) => `theme-${t}`);
-            document.body.classList.add(...prefixedThemes);
-        }
-
-        const highcontrast = theme?.includes("highcontrast");
-
-        axe.configure({
-            rules: [
-                // for non-high contrast, we disable WCAG 2.1 AA (4.5:1)
-                // and use a Stacks-specific APCA custom level instead
-                { id: "color-contrast", enabled: false },
-                {
-                    id: "color-contrast-apca-custom",
-                    enabled: !highcontrast,
-                },
-                // for high contrast, we check against WCAG 2.1 AAA (7:1)
-                { id: "color-contrast-enhanced", enabled: highcontrast },
-            ],
-        });
-
-        await expect(el).to.be.accessible();
-        el.remove();
-    });
-
-    additionalAssertions.forEach((assertion) => {
-        it(`a11y: ${testid} ${assertion.description}`, async () => {
-            await fixture(element);
-            const el = screen.getByTestId(testid);
-            await assertion.assertion(el);
-            el.remove();
-        });
-    });
-};
-
-const runA11yTests = (args: A11yTestArgs) => {
-    const testVariations = generateTestVariations(args);
-    testVariations.forEach((variation) => {
-        if (variation.skipped) {
-            it.skip(`a11y: ${variation.testid} (skipped)`, () => {
-                return;
-            });
-            return;
-        }
-
-        scheduleA11yTest({
-            ...variation,
-            additionalAssertions: args.additionalAssertions,
-        });
-    });
-};
-
-export type { AdditionalAssertion };
-export { runA11yTests };
+import { html, fixture, expect } from "@open-wc/testing";
+import { screen } from "@testing-library/dom";
+import axe from "axe-core";
+import registerAPCACheck from "apca-check";
+import { generateTestVariations, type TestVariationArgs } from "./test-utils";
+import type { AdditionalAssertion } from "./assertions";
+
+type A11yTestArgs = TestVariationArgs & {
+    /**
+     * Additional assertions to run against the test element
+     */
+    additionalAssertions?: AdditionalAssertion[];
+};
+
+// register Stack APCA conformance threshold function
+// see also https://stackoverflow.design/product/foundation/accessibility/#visual-accessibility
+const customConformanceThresholdFn = (fontSize: string): number | null => {
+    // if the font size is 32px or larger, we use a 45Lc threshold
+    // otherwise, we use a 60Lc threshold
+    return parseFloat(fontSize) >= 32 ? 45 : 60;
+};
+registerAPCACheck("custom", customConformanceThresholdFn);
+
+const scheduleA11yTest = ({
+    element,
+    testid,
+    theme,
+    additionalAssertions = [],
+}: {
+    element: ReturnType<typeof html>;
+    testid: string;
+    theme: string[];
+    additionalAssertions?: AdditionalAssertion[];
+}) => {
+    it(`a11y: ${testid} should be accessible`, async () => {
+        await fixture(element);
+        const el = screen.getByTestId(testid);
+
+        document.body.className = "";
+
+        if (theme?.length) {
+            const prefixedThemes = theme.map((t) => `theme-${t}`);
+            document.body.classList.add(...prefixedThemes);
+        }
+
+        const highcontrast = theme?.includes("highcontrast");
+
+        axe.configure({
+            rules: [
+                // for non-high contrast, we disable WCAG 2.1 AA (4.5:1)
+                // and use a Stacks-specific APCA custom level instead
+                { id: "color-contrast", enabled: false },
+                {
+                    id: "color-contrast-apca-custom",
+                    enabled: !highcontrast,
+                },
+                // for high contrast, we check against WCAG 2.1 AAA (7:1)
+                { id: "color-contrast-enhanced", enabled: highcontrast },
+            ],
+        });
+
+        await expect(el).to.be.accessible();
+        el.remove();
+    });
+
+    additionalAssertions.forEach((assertion) => {
+        it(`a11y: ${testid} ${assertion.description}`, async () => {
+            await fixture(element);
+            const el = screen.getByTestId(testid);
+            await assertion.assertion(el);
+            el.remove();
+        });
+    });
+};
+
+const runA11yTests = (args: A11yTestArgs) => {
+    const testVariations = generateTestVariations(args);
+    testVariations.forEach((variation) => {
+        if (variation.skipped) {
+            it.skip(`a11y: ${variation.testid} (skipped)`, () => {
+                return;
+            });
+            return;
+        }
+
+        scheduleA11yTest({
+            ...variation,
+            additionalAssertions: args.additionalAssertions,
+        });
+    });
+};
+
+export type { AdditionalAssertion };
+export { runA11yTests };

package/lib/test/assertions.ts

@@ -1,36 +1,36 @@
-import { expect } from "@open-wc/testing";
-import Color from "colorjs.io";
-
-type AdditionalAssertion = {
-    description: string;
-    assertion: (node: HTMLElement) => Promise<void> | void;
-};
-
-// TODO: evaluate if we can do this check against all the components
-// automatically instead of having to add the assertion manually
-const WCAGNonTextContrast: AdditionalAssertion = {
-    description:
-        "should pass WCAG22 1.4.11 non-text-contrast success criterion (https://www.w3.org/TR/WCAG22/#non-text-contrast)",
-    assertion: (node) => {
-        const selectedNode = node.querySelector(".is-selected") as HTMLElement;
-        const selectedNodeStyles = window.getComputedStyle(selectedNode);
-        const bodyStyles = window.getComputedStyle(document.body);
-        const bgBodyColor = new Color(
-            bodyStyles.getPropertyValue("background-color")
-        );
-        const bgSelectedNodeColor = new Color(
-            selectedNodeStyles.getPropertyValue("background-color")
-        );
-
-        // we are specifing WCAG21 because of colorjs.io API
-        // WCAG21 and WCAG22 algoirthms are the same
-        const WCAGcontrast = bgSelectedNodeColor.contrast(
-            bgBodyColor,
-            "WCAG21"
-        );
-        expect(WCAGcontrast).to.be.at.least(3);
-    },
-};
-
-export type { AdditionalAssertion };
-export { WCAGNonTextContrast };
+import { expect } from "@open-wc/testing";
+import Color from "colorjs.io";
+
+type AdditionalAssertion = {
+    description: string;
+    assertion: (node: HTMLElement) => Promise<void> | void;
+};
+
+// TODO: evaluate if we can do this check against all the components
+// automatically instead of having to add the assertion manually
+const WCAGNonTextContrast: AdditionalAssertion = {
+    description:
+        "should pass WCAG22 1.4.11 non-text-contrast success criterion (https://www.w3.org/TR/WCAG22/#non-text-contrast)",
+    assertion: (node) => {
+        const selectedNode = node.querySelector(".is-selected") as HTMLElement;
+        const selectedNodeStyles = window.getComputedStyle(selectedNode);
+        const bodyStyles = window.getComputedStyle(document.body);
+        const bgBodyColor = new Color(
+            bodyStyles.getPropertyValue("background-color")
+        );
+        const bgSelectedNodeColor = new Color(
+            selectedNodeStyles.getPropertyValue("background-color")
+        );
+
+        // we are specifing WCAG21 because of colorjs.io API
+        // WCAG21 and WCAG22 algoirthms are the same
+        const WCAGcontrast = bgSelectedNodeColor.contrast(
+            bgBodyColor,
+            "WCAG21"
+        );
+        expect(WCAGcontrast).to.be.at.least(3);
+    },
+};
+
+export type { AdditionalAssertion };
+export { WCAGNonTextContrast };

package/lib/test/less-test-utils.ts

@@ -1,28 +1,28 @@
-import beautify from "cssbeautify";
-import * as less from "less";
-import * as path from "path";
-import * as fs from "fs";
-
-// cssbeautify is an old package that doesn't support ES modules
-const cssbeautify = beautify as (css: string) => string;
-
-const getSubdirectories = (dirPath: string): string[] => {
-    const subdirs = fs
-        .readdirSync(dirPath)
-        .map((file) => path.join(dirPath, file))
-        .filter((path) => fs.statSync(path).isDirectory());
-    return subdirs.reduce(
-        (acc, subdir) => [...acc, subdir, ...getSubdirectories(subdir)],
-        subdirs
-    );
-};
-
-const renderLess = async (lessCode: string) => {
-    const { css } = await less.render(lessCode, {
-        paths: getSubdirectories(path.join(__dirname, "../")),
-    });
-
-    return cssbeautify(css);
-};
-
-export { renderLess };
+import beautify from "cssbeautify";
+import * as less from "less";
+import * as path from "path";
+import * as fs from "fs";
+
+// cssbeautify is an old package that doesn't support ES modules
+const cssbeautify = beautify as (css: string) => string;
+
+const getSubdirectories = (dirPath: string): string[] => {
+    const subdirs = fs
+        .readdirSync(dirPath)
+        .map((file) => path.join(dirPath, file))
+        .filter((path) => fs.statSync(path).isDirectory());
+    return subdirs.reduce(
+        (acc, subdir) => [...acc, subdir, ...getSubdirectories(subdir)],
+        subdirs
+    );
+};
+
+const renderLess = async (lessCode: string) => {
+    const { css } = await less.render(lessCode, {
+        paths: getSubdirectories(path.join(__dirname, "../")),
+    });
+
+    return cssbeautify(css);
+};
+
+export { renderLess };

package/lib/test/open-wc-testing-patch.d.ts

@@ -1,26 +1,26 @@
-// patch for @open-wc/testing types
-// TODO: remove when this PR gets merged:
-// https://github.com/open-wc/open-wc/pull/2652
-
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="../../node_modules/@open-wc/testing/register-chai-plugins.d.ts" />
-
-export { html } from "@open-wc/testing-helpers";
-export { unsafeStatic } from "@open-wc/testing-helpers";
-export { triggerBlurFor } from "@open-wc/testing-helpers";
-export { triggerFocusFor } from "@open-wc/testing-helpers";
-export { oneEvent } from "@open-wc/testing-helpers";
-export { isIE } from "@open-wc/testing-helpers";
-export { defineCE } from "@open-wc/testing-helpers";
-export { aTimeout } from "@open-wc/testing-helpers";
-export { nextFrame } from "@open-wc/testing-helpers";
-export { litFixture } from "@open-wc/testing-helpers";
-export { litFixtureSync } from "@open-wc/testing-helpers";
-export { fixture } from "@open-wc/testing-helpers";
-export { fixtureSync } from "@open-wc/testing-helpers";
-export { fixtureCleanup } from "@open-wc/testing-helpers";
-export { elementUpdated } from "@open-wc/testing-helpers";
-export { waitUntil } from "@open-wc/testing-helpers";
-
-export * as chai from "chai";
-export { expect, assert, should } from "chai";
+// patch for @open-wc/testing types
+// TODO: remove when this PR gets merged:
+// https://github.com/open-wc/open-wc/pull/2652
+
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../node_modules/@open-wc/testing/register-chai-plugins.d.ts" />
+
+export { html } from "@open-wc/testing-helpers";
+export { unsafeStatic } from "@open-wc/testing-helpers";
+export { triggerBlurFor } from "@open-wc/testing-helpers";
+export { triggerFocusFor } from "@open-wc/testing-helpers";
+export { oneEvent } from "@open-wc/testing-helpers";
+export { isIE } from "@open-wc/testing-helpers";
+export { defineCE } from "@open-wc/testing-helpers";
+export { aTimeout } from "@open-wc/testing-helpers";
+export { nextFrame } from "@open-wc/testing-helpers";
+export { litFixture } from "@open-wc/testing-helpers";
+export { litFixtureSync } from "@open-wc/testing-helpers";
+export { fixture } from "@open-wc/testing-helpers";
+export { fixtureSync } from "@open-wc/testing-helpers";
+export { fixtureCleanup } from "@open-wc/testing-helpers";
+export { elementUpdated } from "@open-wc/testing-helpers";
+export { waitUntil } from "@open-wc/testing-helpers";
+
+export * as chai from "chai";
+export { expect, assert, should } from "chai";