@stackoverflow/stacks 2.6.0 → 2.7.0

package/lib/exports/color.less

@@ -1,65 +1,65 @@
-@import (reference) "./color-mixins.less";
-
-body {
-    --_o-disabled: 0.5;
-    --_o-disabled-static: 0.5;
-    --_black-static: .set-black()[default];
-    --_white-static: .set-white()[default];
-
-    &,
-    &.theme-highcontrast,
-    &:not(.theme-highcontrast) {
-        &:not(.theme-dark),
-        &.theme-dark .theme-light__forced,
-        &.theme-system .theme-light__forced,
-        &.theme-dark,
-        &:not(.theme-dark) .theme-dark__forced {
-            .create-colors(.sets-aliased-utility-variables());
-        }
-        &.theme-system {
-            @media (prefers-color-scheme: dark) {
-                .create-colors(.sets-aliased-utility-variables());
-            }
-        }
-    }
-}
-
-// Light, dark mode
-body:not(.theme-highcontrast) {
-    // Light mode
-    &:not(.theme-dark),
-    &.theme-dark .theme-light__forced,
-    &.theme-system .theme-light__forced {
-        .generate-colors(light);
-    }
-    // Dark mode
-    &.theme-dark,
-    &:not(.theme-dark) .theme-dark__forced {
-        .generate-colors(dark);
-    }
-    &.theme-system {
-        @media (prefers-color-scheme: dark) {
-            .generate-colors(dark);
-        }
-    }
-}
-
-// High contrast mode
-body.theme-highcontrast {
-    // Light high contrast mode
-    &:not(.theme-dark),
-    &.theme-dark .theme-light__forced,
-    &.theme-system .theme-light__forced {
-        .generate-colors(light-highcontrast);
-    }
-    // Dark high contrast mode
-    &.theme-dark,
-    &:not(.theme-dark) .theme-dark__forced {
-        .generate-colors(dark-highcontrast);
-    }
-    &.theme-system {
-        @media (prefers-color-scheme: dark) {
-            .generate-colors(dark-highcontrast);
-        }
-    }
-}
+@import (reference) "./color-mixins.less";
+
+body {
+    --_o-disabled: 0.55;
+    --_o-disabled-static: 0.55;
+    --_black-static: .set-black()[default];
+    --_white-static: .set-white()[default];
+
+    &,
+    &.theme-highcontrast,
+    &:not(.theme-highcontrast) {
+        &:not(.theme-dark),
+        &.theme-dark .theme-light__forced,
+        &.theme-system .theme-light__forced,
+        &.theme-dark,
+        &:not(.theme-dark) .theme-dark__forced {
+            .create-colors(.sets-aliased-utility-variables());
+        }
+        &.theme-system {
+            @media (prefers-color-scheme: dark) {
+                .create-colors(.sets-aliased-utility-variables());
+            }
+        }
+    }
+}
+
+// Light, dark mode
+body:not(.theme-highcontrast) {
+    // Light mode
+    &:not(.theme-dark),
+    &.theme-dark .theme-light__forced,
+    &.theme-system .theme-light__forced {
+        .generate-colors(light);
+    }
+    // Dark mode
+    &.theme-dark,
+    &:not(.theme-dark) .theme-dark__forced {
+        .generate-colors(dark);
+    }
+    &.theme-system {
+        @media (prefers-color-scheme: dark) {
+            .generate-colors(dark);
+        }
+    }
+}
+
+// High contrast mode
+body.theme-highcontrast {
+    // Light high contrast mode
+    &:not(.theme-dark),
+    &.theme-dark .theme-light__forced,
+    &.theme-system .theme-light__forced {
+        .generate-colors(light-highcontrast);
+    }
+    // Dark high contrast mode
+    &.theme-dark,
+    &:not(.theme-dark) .theme-dark__forced {
+        .generate-colors(dark-highcontrast);
+    }
+    &.theme-system {
+        @media (prefers-color-scheme: dark) {
+            .generate-colors(dark-highcontrast);
+        }
+    }
+}

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);
+
+        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 {
+            // Internet Explorer
+
+            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 };