@stackoverflow/stacks 1.9.0 → 1.9.1

package/lib/base/reset.less

@@ -1,20 +1,20 @@
-// the default CSS reset is normalize.css; other possibilities are the Eric Meyer reset, and no reset at all.
-
-#stacks-internals() {
-    #include-css-reset(meyer) {
-        @import "reset-meyer.less";
-    }
-    #include-css-reset(normalize) {
-        @import "reset-normalize.less";
-    }
-    /* stylelint-disable block-no-empty */
-    #include-css-reset(none) {
-    }
-    /* stylelint-enable */
-}
-
-& {
-    #stacks-internals #load-static-config();
-    #stacks-internals #include-css-reset(@css-reset);
-}
-
+// the default CSS reset is normalize.css; other possibilities are the Eric Meyer reset, and no reset at all.
+
+#stacks-internals() {
+    #include-css-reset(meyer) {
+        @import "reset-meyer.less";
+    }
+    #include-css-reset(normalize) {
+        @import "reset-normalize.less";
+    }
+    /* stylelint-disable block-no-empty */
+    #include-css-reset(none) {
+    }
+    /* stylelint-enable */
+}
+
+& {
+    #stacks-internals #load-static-config();
+    #stacks-internals #include-css-reset(@css-reset);
+}
+

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

@@ -1,21 +1,21 @@
-import { runComponentTests } from "../../test/test-utils";
-import "../../index";
-
-describe("activity-indicator", () => {
-    runComponentTests({
-        type: "a11y",
-        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>`,
-        },
-        skippedTestids: [
-            "s-activity-indicator-dark-new", // TODO fix contrast issue
-            "s-activity-indicator-dark-success-new", // TODO fix contrast issue
-            "s-activity-indicator-dark-warning-new", // TODO fix contrast issue
-            "s-activity-indicator-light-success-new", // TODO fix contrast issue
-            "s-activity-indicator-light-warning-new", // TODO fix contrast issue
-        ],
-    });
-});
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("activity-indicator", () => {
+    runComponentTests({
+        type: "a11y",
+        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>`,
+        },
+        skippedTestids: [
+            "s-activity-indicator-dark-new", // TODO fix contrast issue
+            "s-activity-indicator-dark-success-new", // TODO fix contrast issue
+            "s-activity-indicator-dark-warning-new", // TODO fix contrast issue
+            "s-activity-indicator-light-success-new", // TODO fix contrast issue
+            "s-activity-indicator-light-warning-new", // TODO fix contrast issue
+        ],
+    });
+});

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

@@ -1,40 +1,40 @@
-.s-activity-indicator {
-    --_ai-focus-ring: var(--focus-ring);
-    --_ai-bg: var(--theme-secondary-400);
-    --_ai-fc: @white;
-
-    // CONTEXTUAL STYLES
-    .highcontrast-mode({
-        --_ai-fc: var(--white);
-    });
-
-    // VARIANTS
-    &&__danger {
-        --_ai-bg: var(--red-500);
-        --_ai-focus-ring: var(--focus-ring-error);
-    }
-
-    &&__success {
-        --_ai-bg: var(--green-500);
-        --_ai-focus-ring: var(--focus-ring-success);
-    }
-
-    &&__warning {
-        --_ai-bg: var(--yellow-600);
-        --_ai-focus-ring: var(--focus-ring-warning);
-    }
-
-    background-color: var(--_ai-bg);
-    box-shadow: 0 0 0 var(--su-static4) var(--_ai-focus-ring);
-    color: var(--_ai-fc);
-
-    border-radius: 1000px;
-    display: inline-block;
-    font-size: var(--fs-fine);
-    font-weight: 600;
-    line-height: 1.1; // Custom line-height to satisfy 1x screens
-    min-width: var(--su-static12);
-    min-height: var(--su-static12);
-    padding: var(--su2) var(--su4);
-    text-transform: uppercase;
-}
+.s-activity-indicator {
+    --_ai-focus-ring: var(--focus-ring);
+    --_ai-bg: var(--theme-secondary-400);
+    --_ai-fc: @white;
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        --_ai-fc: var(--white);
+    });
+
+    // VARIANTS
+    &&__danger {
+        --_ai-bg: var(--red-500);
+        --_ai-focus-ring: var(--focus-ring-error);
+    }
+
+    &&__success {
+        --_ai-bg: var(--green-500);
+        --_ai-focus-ring: var(--focus-ring-success);
+    }
+
+    &&__warning {
+        --_ai-bg: var(--yellow-600);
+        --_ai-focus-ring: var(--focus-ring-warning);
+    }
+
+    background-color: var(--_ai-bg);
+    box-shadow: 0 0 0 var(--su-static4) var(--_ai-focus-ring);
+    color: var(--_ai-fc);
+
+    border-radius: 1000px;
+    display: inline-block;
+    font-size: var(--fs-fine);
+    font-weight: 600;
+    line-height: 1.1; // Custom line-height to satisfy 1x screens
+    min-width: var(--su-static12);
+    min-height: var(--su-static12);
+    padding: var(--su2) var(--su4);
+    text-transform: uppercase;
+}

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

@@ -1,23 +1,23 @@
-import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
-import "../../index";
-
-describe("activity-indicator", () => {
-    runComponentTests({
-        type: "visual",
-        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>
-        `,
-    });
-});
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("activity-indicator", () => {
+    runComponentTests({
+        type: "visual",
+        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.less

@@ -1,61 +1,61 @@
-.s-anchors {
-    // CUSTOM PROPERTIED DEFINED WITHIN VARIANTS
-    // --_an-a-fc
-    // --_an-a-fc-hover
-
-    // MODIFIERS
-    &&__underlined {
-        a:not(.s-link),
-        .s-btn.s-btn__link {
-            text-decoration: underline;
-        }
-    }
-
-    // VARIANTS
-    &&__danger {
-        --_an-a-fc: var(--red-500);
-        --_an-a-fc-hover: var(--red-400);
-    }
-
-    &&__default {
-        --_an-a-fc: var(--theme-link-color);
-        --_an-a-fc-hover: var(--theme-link-color-hover);
-    }
-
-    &&__grayscale {
-        --_an-a-fc: var(--black-700);
-        --_an-a-fc-hover: var(--black-600);
-    }
-
-    &&__inherit {
-        --_an-a-fc: inherit;
-        --_an-a-fc-hover: inherit;
-    }
-
-    &&__muted {
-        --_an-a-fc: var(--black-500);
-        --_an-a-fc-hover: var(--black-400);
-    }
-
-    &&__danger,
-    &&__default,
-    &&__grayscale,
-    &&__inherit,
-    &&__muted {
-        a:not(.s-link),
-        .s-btn.s-btn__link {
-            &:hover,
-            &:active {
-                &,
-                &:visited {
-                    color: var(--_an-a-fc-hover);
-                }
-            }
-
-            &,
-            &:visited {
-                color: var(--_an-a-fc, inherit);
-            }
-        }
-    }
-}
+.s-anchors {
+    // CUSTOM PROPERTIED DEFINED WITHIN VARIANTS
+    // --_an-a-fc
+    // --_an-a-fc-hover
+
+    // MODIFIERS
+    &&__underlined {
+        a:not(.s-link),
+        .s-btn.s-btn__link {
+            text-decoration: underline;
+        }
+    }
+
+    // VARIANTS
+    &&__danger {
+        --_an-a-fc: var(--red-500);
+        --_an-a-fc-hover: var(--red-400);
+    }
+
+    &&__default {
+        --_an-a-fc: var(--theme-link-color);
+        --_an-a-fc-hover: var(--theme-link-color-hover);
+    }
+
+    &&__grayscale {
+        --_an-a-fc: var(--black-700);
+        --_an-a-fc-hover: var(--black-600);
+    }
+
+    &&__inherit {
+        --_an-a-fc: inherit;
+        --_an-a-fc-hover: inherit;
+    }
+
+    &&__muted {
+        --_an-a-fc: var(--black-500);
+        --_an-a-fc-hover: var(--black-400);
+    }
+
+    &&__danger,
+    &&__default,
+    &&__grayscale,
+    &&__inherit,
+    &&__muted {
+        a:not(.s-link),
+        .s-btn.s-btn__link {
+            &:hover,
+            &:active {
+                &,
+                &:visited {
+                    color: var(--_an-a-fc-hover);
+                }
+            }
+
+            &,
+            &:visited {
+                color: var(--_an-a-fc, inherit);
+            }
+        }
+    }
+}

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

@@ -1,36 +1,36 @@
-import { runComponentTests } from "../../test/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", () => {
-    runComponentTests({
-        type: "a11y",
-        baseClass: "s-avatar",
-        variants: ["24", "32", "48", "64", "96", "128"],
-        children: {
-            default: getChild(),
-            image: getChild("image"),
-            letter: getChild("letter"),
-        },
-        tag: "span",
-    });
-});
+import { runComponentTests } from "../../test/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", () => {
+    runComponentTests({
+        type: "a11y",
+        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.less

@@ -1,108 +1,108 @@
-.s-avatar {
-    --_av-size: var(--su-static16);
-    --_av-bg: @white; // Force a white background color for when we have transparent avatars
-    --_av-br: var(--br-sm);
-    --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
-    --_av-scale-badge: 1;
-
-    // CONTEXTUAL STYLES
-    .highcontrast-mode({
-        .s-avatar--letter {
-            color: var(--white);
-        }
-
-        background-color: var(--black);
-        box-shadow: 0 0 0 1px var(--black);
-        color: var(--white);
-    });
-
-    // MODIFIERS
-    // Sizes
-    &&__32,
-    &&__48 {
-        --_av-br: var(--br-md);
-    }
-
-    &&__96,
-    &&__128 {
-        --_av-br: calc(var(--br-lg) + var(--br-sm));
-        --_av-scale-badge: 3;
-    }
-
-    &&__24 {
-        --_av-size: var(--su-static24);
-        --_av-fs-letter: var(--su-static16);
-        --_av-scale-badge: 1.1;
-    }
-
-    &&__32 {
-        --_av-size: var(--su-static32);
-        --_av-fs-letter: calc(var(--su-static24) - var(--su-static2));
-        --_av-scale-badge: 1.3;
-    }
-
-    &&__48 {
-        --_av-size: var(--su-static48);
-        --_av-fs-letter: calc(var(--su-static32) + var(--su-static2));
-        --_av-scale-badge: 1.6;
-    }
-
-    &&__64 {
-        --_av-size: var(--su-static64);
-        --_av-br: var(--br-lg);
-        --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
-        --_av-scale-badge: 2.4;
-    }
-
-    &&__96 {
-        --_av-size: var(--su-static96);
-        --_av-fs-letter: calc(var(--su-static64) + var(--su-static2));
-    }
-
-    &&__128 {
-        --_av-size: var(--su-static128);
-        --_av-fs-letter: calc(var(--su-static96) - var(--su-static8));
-    }
-
-    // CHILD ELEMENTS
-    & &--badge {
-        bottom: calc(var(--su-static4) * -1); // -4px
-        position: absolute;
-        right: calc(var(--su-static4) * -1); // -4px
-        -webkit-transform: scale(var(--_av-scale-badge));
-        transform: scale(var(--_av-scale-badge));
-    }
-
-    & &--image {
-        border-radius: var(--_av-br);
-        display: block;
-        height: var(--_av-size);
-        width: var(--_av-size);
-    }
-
-    & &--letter {
-        color: @white; // Force a light appearance of text rendering
-        display: block; // Make sure we're treating the letter as a block-level element
-        font-size: var(--_av-fs-letter); // Force a font size so the avatar text doesn't get smaller as the window resizes
-        font-weight: bold;
-        line-height: 1.4; // Guards against some line-height trolling from the parent
-        text-align: center;
-        text-transform: uppercase; // Force uppercase in avatars when team name is lowercase
-        // We don't need text selection on our letter
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
-    background-color: var(--_av-bg); 
-    border-radius: var(--_av-br);
-    height: var(--_av-size);
-    width: var(--_av-size);
-
-    background-repeat: no-repeat;
-    background-size: 100%;
-    display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
-    position: relative;
-    vertical-align: bottom; // Make our avatars play more nicely with text next to it.
-}
+.s-avatar {
+    --_av-size: var(--su-static16);
+    --_av-bg: @white; // Force a white background color for when we have transparent avatars
+    --_av-br: var(--br-sm);
+    --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
+    --_av-scale-badge: 1;
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        .s-avatar--letter {
+            color: var(--white);
+        }
+
+        background-color: var(--black);
+        box-shadow: 0 0 0 1px var(--black);
+        color: var(--white);
+    });
+
+    // MODIFIERS
+    // Sizes
+    &&__32,
+    &&__48 {
+        --_av-br: var(--br-md);
+    }
+
+    &&__96,
+    &&__128 {
+        --_av-br: calc(var(--br-lg) + var(--br-sm));
+        --_av-scale-badge: 3;
+    }
+
+    &&__24 {
+        --_av-size: var(--su-static24);
+        --_av-fs-letter: var(--su-static16);
+        --_av-scale-badge: 1.1;
+    }
+
+    &&__32 {
+        --_av-size: var(--su-static32);
+        --_av-fs-letter: calc(var(--su-static24) - var(--su-static2));
+        --_av-scale-badge: 1.3;
+    }
+
+    &&__48 {
+        --_av-size: var(--su-static48);
+        --_av-fs-letter: calc(var(--su-static32) + var(--su-static2));
+        --_av-scale-badge: 1.6;
+    }
+
+    &&__64 {
+        --_av-size: var(--su-static64);
+        --_av-br: var(--br-lg);
+        --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
+        --_av-scale-badge: 2.4;
+    }
+
+    &&__96 {
+        --_av-size: var(--su-static96);
+        --_av-fs-letter: calc(var(--su-static64) + var(--su-static2));
+    }
+
+    &&__128 {
+        --_av-size: var(--su-static128);
+        --_av-fs-letter: calc(var(--su-static96) - var(--su-static8));
+    }
+
+    // CHILD ELEMENTS
+    & &--badge {
+        bottom: calc(var(--su-static4) * -1); // -4px
+        position: absolute;
+        right: calc(var(--su-static4) * -1); // -4px
+        -webkit-transform: scale(var(--_av-scale-badge));
+        transform: scale(var(--_av-scale-badge));
+    }
+
+    & &--image {
+        border-radius: var(--_av-br);
+        display: block;
+        height: var(--_av-size);
+        width: var(--_av-size);
+    }
+
+    & &--letter {
+        color: @white; // Force a light appearance of text rendering
+        display: block; // Make sure we're treating the letter as a block-level element
+        font-size: var(--_av-fs-letter); // Force a font size so the avatar text doesn't get smaller as the window resizes
+        font-weight: bold;
+        line-height: 1.4; // Guards against some line-height trolling from the parent
+        text-align: center;
+        text-transform: uppercase; // Force uppercase in avatars when team name is lowercase
+        // We don't need text selection on our letter
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    background-color: var(--_av-bg); 
+    border-radius: var(--_av-br);
+    height: var(--_av-size);
+    width: var(--_av-size);
+
+    background-repeat: no-repeat;
+    background-size: 100%;
+    display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
+    position: relative;
+    vertical-align: bottom; // Make our avatars play more nicely with text next to it.
+}