@stackoverflow/stacks 1.8.0 → 1.9.1

package/lib/{css/components/tags.less → components/tag/tag.less}

@@ -1,213 +1,213 @@
-.s-tag {
-    --_ta-bc: var(--theme-tag-border-color);
-    --_ta-bc-hover: var(--theme-tag-hover-border-color);
-    --_ta-bc-selected: transparent;
-    --_ta-bg: var(--theme-tag-background-color);
-    --_ta-bg-hover: var(--theme-tag-hover-background-color);
-    --_ta-bg-selected: var(--theme-secondary-200);
-    --_ta-br: var(--br-sm);
-    --_ta-fc: var(--theme-tag-color);
-    --_ta-fc-hover: var(--theme-tag-hover-color);
-    --_ta-fc-selected: var(--theme-secondary-900);
-    --_ta-fs: var(--fs-caption);
-    --_ta-lh: 1.846153846;
-    --_ta-pl: var(--_ta-px);
-    --_ta-pr: var(--_ta-px);
-    --_ta-px: var(--su4);
-
-    // CONTEXTUAL STYLES
-    .highcontrast-mode({
-        --_ta-bc: currentColor;
-
-        text-decoration: none;
-    });
-
-    // STATES
-    &.is-selected {
-        &,
-        a&,
-        a&:active,
-        a&:hover,
-        a&:focus {
-            .highcontrast-mode({
-                border-color: currentColor;
-            });
-
-            background-color: var(--_ta-bg-selected);
-            border-color: var(--_ta-bc-selected);
-            color: var(--_ta-fc-selected);
-        }
-    }
-
-    // MODIFIERS
-    // Sizes
-    &&__xs {
-        .size-styles(xs; ta; @styles: fs);
-        --_ta-lh: 1.4;
-        --_ta-px: var(--su2);
-    }
-    &&__sm {
-        .size-styles(sm; ta; @styles: fs);
-        --_ta-lh: 1.5;
-    }
-    &&__md {
-        --_ta-px: var(--su6);
-        --_ta-fs: var(--fs-body2);
-        --_ta-lh: 1.733333333;
-    }
-    &&__lg {
-        --_ta-br: calc(var(--br-sm) + var(--su-static1));
-        --_ta-fs: var(--fs-subheading);
-        --_ta-lh: 1.684210526;
-        --_ta-px: var(--su6);
-    }
-
-    // VARIANTS
-    // NOTE: ignored and watched variants are used in core with the .post-tag class (in place of the base tag .s-tag)
-    &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
-    &&__ignored,
-    &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
-    &&__watched {
-        --_ta-pl: calc(var(--su-static24) - var(--su-static2)); // 22px
-        --_ta-before-size: calc(var(--su-static16) - var(--su-static2)); // 14px
-        // --_ta-before-icon defined per variant
-
-        &:before {
-            height: var(--_ta-before-size);
-            width: var(--_ta-before-size);
-            -webkit-mask: var(--_ta-before-icon) no-repeat center;
-            mask: var(--_ta-before-icon) no-repeat center;
-
-            background-color: currentColor;
-            content: "";
-            display: block;
-            left: var(--su-static4);
-            margin-right: var(--su2);
-            position: absolute;
-            top: calc(50% - calc(var(--su-static8) - var(--su-static1)));
-            -webkit-mask-size: contain;
-            mask-size: contain;
-        }
-
-        position: relative;
-    }
-
-    &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
-    &&__ignored {
-        --_ta-before-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
-    }
-
-    // moderator overrides other muted and required, required overrides muted
-    &&__moderator {
-        --_ta-bc: var(--red-200);
-        --_ta-bg: var(--red-050);
-        --_ta-fc: var(--red-800);
-        --_ta-bc-hover: var(--red-300);
-        --_ta-bg-hover: var(--red-100);
-        --_ta-fc-hover: var(--red-900);
-        --_ta-bc-selected: var(--red-400);
-        --_ta-bg-selected: var(--red-200);
-        --_ta-fc-selected: var(--red-800);
-    }
-
-    &&__muted:not(&__moderator):not(&__required) {
-        --_ta-bc: transparent;
-        --_ta-bg: var(--black-075);
-        --_ta-fc: var(--black-700);
-        --_ta-bc-hover: transparent;
-        --_ta-bg-hover: var(--black-100);
-        --_ta-fc-hover: var(--black-800);
-        --_ta-bc-selected: transparent;
-        --_ta-bg-selected: var(--black-200);
-        --_ta-fc-selected: var(--black-900);
-
-        .highcontrast-mode({ --_ta-bc: currentColor; }); // Specificity has bit us, so we need this override
-    }
-
-    &&__required:not(&__moderator) {
-        --_ta-bc: var(--bc-darker);
-        --_ta-bg: var(--black-075);
-        --_ta-fc: var(--black-700);
-        --_ta-bc-hover: var(--black-300);
-        --_ta-bg-hover: var(--black-100);
-        --_ta-fc-hover: var(--black-800);
-        --_ta-bc-selected: var(--black-500);
-        --_ta-bg-selected: var(--black-200);
-        --_ta-fc-selected: var(--black-900);
-    }
-    &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
-    &&__watched {
-        --_ta-before-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
-    }
-
-    // CHILD ELEMENTS
-    & &--dismiss { // Style adjustment to @Svg.ClearSm
-        &:hover {
-            .highcontrast-mode({
-                color: var(--white);
-            });
-
-            background-color: var(--_ta-fc);
-            color: var(--_ta-bg);
-        }
-
-        align-content: center;
-        align-self: center;
-        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);
-    }
-
-    & &--sponsor { // The small sponsor favicon displayed within a tag
-        img,
-        .svg-icon {
-            width: 100%;
-            height: 100%;
-        }
-
-        align-self: center;
-        border-radius: calc(var(--br-sm) - var(--su-static1));
-        display: inline-flex;
-        margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
-        max-width: calc(var(--su-static16) + var(--su-static2));
-    }
-
-    // INTERACTION
-    a&:not(.is-selected) {
-        &:hover,
-        &:focus,
-        &:active {
-            .highcontrast-mode({
-                border-color: currentColor;
-            });
-
-            background-color: var(--_ta-bg-hover);
-            border-color: var(--_ta-bc-hover);
-            color: var(--_ta-fc-hover);
-        }
-    }
-
-    background-color: var(--_ta-bg);
-    border: var(--su-static1) solid var(--_ta-bc);
-    border-radius: var(--_ta-br);
-    color: var(--_ta-fc);
-    font-size: var(--_ta-fs);
-    line-height: var(--_ta-lh);
-    padding-left: var(--_ta-pl);
-    padding-right: var(--_ta-pr);
-
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    min-width: 0;
-    text-decoration: none;
-    vertical-align: middle;
-    white-space: nowrap;
-}
+.s-tag {
+    --_ta-bc: var(--theme-tag-border-color);
+    --_ta-bc-hover: var(--theme-tag-hover-border-color);
+    --_ta-bc-selected: transparent;
+    --_ta-bg: var(--theme-tag-background-color);
+    --_ta-bg-hover: var(--theme-tag-hover-background-color);
+    --_ta-bg-selected: var(--theme-secondary-200);
+    --_ta-br: var(--br-sm);
+    --_ta-fc: var(--theme-tag-color);
+    --_ta-fc-hover: var(--theme-tag-hover-color);
+    --_ta-fc-selected: var(--theme-secondary-900);
+    --_ta-fs: var(--fs-caption);
+    --_ta-lh: 1.846153846;
+    --_ta-pl: var(--_ta-px);
+    --_ta-pr: var(--_ta-px);
+    --_ta-px: var(--su4);
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        --_ta-bc: currentColor;
+
+        text-decoration: none;
+    });
+
+    // STATES
+    &.is-selected {
+        &,
+        a&,
+        a&:active,
+        a&:hover,
+        a&:focus {
+            .highcontrast-mode({
+                border-color: currentColor;
+            });
+
+            background-color: var(--_ta-bg-selected);
+            border-color: var(--_ta-bc-selected);
+            color: var(--_ta-fc-selected);
+        }
+    }
+
+    // MODIFIERS
+    // Sizes
+    &&__xs {
+        .size-styles(xs; ta; @styles: fs);
+        --_ta-lh: 1.4;
+        --_ta-px: var(--su2);
+    }
+    &&__sm {
+        .size-styles(sm; ta; @styles: fs);
+        --_ta-lh: 1.5;
+    }
+    &&__md {
+        --_ta-px: var(--su6);
+        --_ta-fs: var(--fs-body2);
+        --_ta-lh: 1.733333333;
+    }
+    &&__lg {
+        --_ta-br: calc(var(--br-sm) + var(--su-static1));
+        --_ta-fs: var(--fs-subheading);
+        --_ta-lh: 1.684210526;
+        --_ta-px: var(--su6);
+    }
+
+    // VARIANTS
+    // NOTE: ignored and watched variants are used in core with the .post-tag class (in place of the base tag .s-tag)
+    &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
+    &&__ignored,
+    &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
+    &&__watched {
+        --_ta-pl: calc(var(--su-static24) - var(--su-static2)); // 22px
+        --_ta-before-size: calc(var(--su-static16) - var(--su-static2)); // 14px
+        // --_ta-before-icon defined per variant
+
+        &:before {
+            height: var(--_ta-before-size);
+            width: var(--_ta-before-size);
+            -webkit-mask: var(--_ta-before-icon) no-repeat center;
+            mask: var(--_ta-before-icon) no-repeat center;
+
+            background-color: currentColor;
+            content: "";
+            display: block;
+            left: var(--su-static4);
+            margin-right: var(--su2);
+            position: absolute;
+            top: calc(50% - calc(var(--su-static8) - var(--su-static1)));
+            -webkit-mask-size: contain;
+            mask-size: contain;
+        }
+
+        position: relative;
+    }
+
+    &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
+    &&__ignored {
+        --_ta-before-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
+    }
+
+    // moderator overrides other muted and required, required overrides muted
+    &&__moderator {
+        --_ta-bc: var(--red-200);
+        --_ta-bg: var(--red-050);
+        --_ta-fc: var(--red-800);
+        --_ta-bc-hover: var(--red-300);
+        --_ta-bg-hover: var(--red-100);
+        --_ta-fc-hover: var(--red-900);
+        --_ta-bc-selected: var(--red-400);
+        --_ta-bg-selected: var(--red-200);
+        --_ta-fc-selected: var(--red-800);
+    }
+
+    &&__muted:not(&__moderator):not(&__required) {
+        --_ta-bc: transparent;
+        --_ta-bg: var(--black-075);
+        --_ta-fc: var(--black-700);
+        --_ta-bc-hover: transparent;
+        --_ta-bg-hover: var(--black-100);
+        --_ta-fc-hover: var(--black-800);
+        --_ta-bc-selected: transparent;
+        --_ta-bg-selected: var(--black-200);
+        --_ta-fc-selected: var(--black-900);
+
+        .highcontrast-mode({ --_ta-bc: currentColor; }); // Specificity has bit us, so we need this override
+    }
+
+    &&__required:not(&__moderator) {
+        --_ta-bc: var(--bc-darker);
+        --_ta-bg: var(--black-075);
+        --_ta-fc: var(--black-700);
+        --_ta-bc-hover: var(--black-300);
+        --_ta-bg-hover: var(--black-100);
+        --_ta-fc-hover: var(--black-800);
+        --_ta-bc-selected: var(--black-500);
+        --_ta-bg-selected: var(--black-200);
+        --_ta-fc-selected: var(--black-900);
+    }
+    &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
+    &&__watched {
+        --_ta-before-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
+    }
+
+    // CHILD ELEMENTS
+    & &--dismiss { // Style adjustment to @Svg.ClearSm
+        &:hover {
+            .highcontrast-mode({
+                color: var(--white);
+            });
+
+            background-color: var(--_ta-fc);
+            color: var(--_ta-bg);
+        }
+
+        align-content: center;
+        align-self: center;
+        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);
+    }
+
+    & &--sponsor { // The small sponsor favicon displayed within a tag
+        img,
+        .svg-icon {
+            width: 100%;
+            height: 100%;
+        }
+
+        align-self: center;
+        border-radius: calc(var(--br-sm) - var(--su-static1));
+        display: inline-flex;
+        margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
+        max-width: calc(var(--su-static16) + var(--su-static2));
+    }
+
+    // INTERACTION
+    a&:not(.is-selected) {
+        &:hover,
+        &:focus,
+        &:active {
+            .highcontrast-mode({
+                border-color: currentColor;
+            });
+
+            background-color: var(--_ta-bg-hover);
+            border-color: var(--_ta-bc-hover);
+            color: var(--_ta-fc-hover);
+        }
+    }
+
+    background-color: var(--_ta-bg);
+    border: var(--su-static1) solid var(--_ta-bc);
+    border-radius: var(--_ta-br);
+    color: var(--_ta-fc);
+    font-size: var(--_ta-fs);
+    line-height: var(--_ta-lh);
+    padding-left: var(--_ta-pl);
+    padding-right: var(--_ta-pr);
+
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-width: 0;
+    text-decoration: none;
+    vertical-align: middle;
+    white-space: nowrap;
+}

package/lib/components/toast/toast.less

@@ -0,0 +1,35 @@
+// See also ./lib/components/notice/notice.less
+.s-toast {
+    @media (prefers-reduced-motion) {
+        transform: none !important;
+    }
+
+    &[aria-hidden="false"] {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
+        visibility: visible;
+    }
+
+    .s-notice {
+        box-shadow: var(--bs-sm);
+        max-width: 44rem;
+        padding-bottom: var(--su8);
+        padding-top: var(--su8);
+        pointer-events: all;
+        width: 100%;
+    }
+
+    display: flex;
+    justify-content: center;
+    left: var(--su8);
+    opacity: 0;
+    pointer-events: none;
+    position: fixed;
+    right: var(--su8);
+    top: var(--su16);
+    transform: translate3d(0, -66px, 0);
+    transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
+    visibility: hidden;
+    z-index: calc(var(--zi-modals) + 1); // Toasts should appear above modals
+}

package/lib/{test/s-toast.test.ts → components/toast/toast.test.ts}

@@ -1,63 +1,63 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import { screen } from "@testing-library/dom";
-import userEvent from "@testing-library/user-event";
-import "../ts/index";
-import { showToast, hideToast } from "../ts/index";
-
-const user = userEvent.setup();
-
-const testToast = (hidden = true) => html` <button
-        class="js-open-test-toast"
-        data-toggle="s-toast"
-        data-target="#test-toast"
-    >
-        Show test toast
-    </button>
-    <button type="button" aria-label="Dismiss">Close toast</button>
-    <div
-        role="alertdialog"
-        id="test-toast"
-        class="s-toast"
-        aria-hidden="${hidden}"
-        aria-labelledby="toast-message"
-        data-controller="s-toast"
-        data-s-toast-target="toast"
-        data-s-toast-return-element=".js-open-test-toast[data-target='#test-toast']"
-        data-testid="test-toast"
-    >
-        <aside class="s-notice s-notice__success">
-            <div id="notice-message">Test toast</div>
-        </aside>
-    </div>`;
-
-describe("s-toast", () => {
-    it("trigger should make toast visible", async () => {
-        await fixture(testToast(true));
-
-        const button = screen.getAllByRole("button")[0]; // Trigger button
-        const toast = screen.getByTestId("test-toast");
-
-        expect(toast).to.have.attribute("aria-hidden", "true");
-        button.addEventListener("click", () => showToast(toast));
-
-        await user.click(button);
-        expect(toast).to.have.attribute("aria-hidden", "false");
-    });
-
-    it("trigger should hide toast", async () => {
-        await fixture(testToast(false));
-
-        const button = screen.getAllByRole("button")[1]; // Close button
-        const toast = screen.getByTestId("test-toast");
-
-        expect(toast).to.have.attribute("aria-hidden", "false");
-        button.addEventListener("click", () => hideToast(toast));
-
-        await user.click(button);
-        expect(toast).to.have.attribute("aria-hidden", "true");
-    });
-
-    // TODO: add test for refocus trigger
-
-    // TODO: add test for removing toast from DOM
-});
+import { html, fixture, expect } from "@open-wc/testing";
+import { screen } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
+import "../../index";
+import { showToast, hideToast } from "../../controllers";
+
+const user = userEvent.setup();
+
+const testToast = (hidden = true) => html` <button
+        class="js-open-test-toast"
+        data-toggle="s-toast"
+        data-target="#test-toast"
+    >
+        Show test toast
+    </button>
+    <button type="button" aria-label="Dismiss">Close toast</button>
+    <div
+        role="alertdialog"
+        id="test-toast"
+        class="s-toast"
+        aria-hidden="${hidden}"
+        aria-labelledby="toast-message"
+        data-controller="s-toast"
+        data-s-toast-target="toast"
+        data-s-toast-return-element=".js-open-test-toast[data-target='#test-toast']"
+        data-testid="test-toast"
+    >
+        <aside class="s-notice s-notice__success">
+            <div id="notice-message">Test toast</div>
+        </aside>
+    </div>`;
+
+describe("toast", () => {
+    it("trigger should make toast visible", async () => {
+        await fixture(testToast(true));
+
+        const button = screen.getAllByRole("button")[0]; // Trigger button
+        const toast = screen.getByTestId("test-toast");
+
+        expect(toast).to.have.attribute("aria-hidden", "true");
+        button.addEventListener("click", () => showToast(toast));
+
+        await user.click(button);
+        expect(toast).to.have.attribute("aria-hidden", "false");
+    });
+
+    it("trigger should hide toast", async () => {
+        await fixture(testToast(false));
+
+        const button = screen.getAllByRole("button")[1]; // Close button
+        const toast = screen.getByTestId("test-toast");
+
+        expect(toast).to.have.attribute("aria-hidden", "false");
+        button.addEventListener("click", () => hideToast(toast));
+
+        await user.click(button);
+        expect(toast).to.have.attribute("aria-hidden", "true");
+    });
+
+    // TODO: add test for refocus trigger
+
+    // TODO: add test for removing toast from DOM
+});