@stackoverflow/stacks 2.5.8 → 2.7.0

package/dist/js/stacks.js

@@ -2661,7 +2661,6 @@ class StacksApplication extends Application {
     }
     static start(element, schema) {
         const application = new StacksApplication(element, schema);
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         application.start();
         return application;
     }
@@ -2691,9 +2690,8 @@ class StacksController extends Controller {
                 detail: detail,
             });
         }
-        catch (ex) {
+        catch (_a) {
             // Internet Explorer
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             event = document.createEvent("CustomEvent");
             event.initCustomEvent(namespacedName, true, true, detail);
         }
@@ -2862,7 +2860,7 @@ function globalChangeListener(e) {
         try {
             customEvent = new Event(RADIO_OFF_EVENT);
         }
-        catch (ex) {
+        catch (_a) {
             // Internet Explorer
             customEvent = document.createEvent("Event");
             customEvent.initEvent(RADIO_OFF_EVENT, true, true);
@@ -6729,7 +6727,6 @@ class UploaderController extends StacksController {
         let thumbElement;
         if (file.type.match("image/*") && file.data) {
             thumbElement = document.createElement("img");
-            // eslint-disable-next-line @typescript-eslint/no-base-to-string
             thumbElement.src = file.data.toString();
             thumbElement.alt = file.name;
         }

package/lib/components/badge/badge.less

@@ -1,258 +1,269 @@
-.s-badge {
-    --_ba-as: unset;
-    --_ba-bc: var(--bc-medium);
-    --_ba-bg: var(--black-150);
-    --_ba-fc: var(--black-500);
-    --_ba-fs: var(--fs-caption);
-    --_ba-fw: normal;
-    --_ba-g: 0.3em;
-    --_ba-lh: 2;
-    --_ba-px: var(--su6);
-    --_ba-py: 0;
-    --_ba-tt: unset;
-    --_ba-wmn: 0;
-
-    // CONTEXTUAL STYLES
-    .highcontrast-mode({
-        // Badge counts
-        &__gold,
-        &__silver,
-        &__bronze,
-        // Number counts
-        &__rep,
-        &__rep-down,
-        &__votes:not(.s-badge__answered),
-        // Users
-        &__admin,
-        &__moderator,
-        &__staff {
-            --_ba-bc: currentColor;
-        }
-
-        &__new {
-            --_ba-fc: var(--purple-600);
-        }
-    });
-
-    // MODIFIERS
-    // Sizes
-    &&__xs,
-    &&__sm {
-        --_ba-as: flex-start;
-        --_ba-fs: var(--fs-fine);
-    }
-
-    &&__xs {
-        --_ba-lh: 1.5;
-        --_ba-px: var(--su2);
-        --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
-    }
-
-    &&__sm {
-        --_ba-lh: 1.8;
-        --_ba-px: var(--su4);
-        --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
-    }
-
-    // Badge counts
-    &&__gold,
-    &&__silver,
-    &&__bronze {
-        --_ba-fc: var(--black-500);
-    }
-
-    &&__gold {
-        --_ba-bc: var(--gold-300);
-        --_ba-bg: var(--gold-100);
-    }
-
-    &&__silver {
-        --_ba-bc: var(--silver-300);
-        --_ba-bg: var(--silver-100);
-    }
-
-    &&__bronze {
-        --_ba-bc: var(--bronze-300);
-        --_ba-bg: var(--bronze-100);
-    }
-
-    // Number counts
-    &&__answered,
-    &&__bounty,
-    &&__important {
-        --_ba-bc: transparent;
-        --_ba-fc: var(--white);
-    }
-
-    &&__rep,
-    &&__rep-down,
-    &&__votes:not(&__answered) {
-        --_ba-bg: var(--white);
-    }
-
-    &&__answered {
-        --_ba-bg: var(--green-400);
-    }
-
-    &&__bounty {
-        --_ba-bg: var(--blue-400);
-    }
-
-    &&__important {
-        --_ba-bg: var(--red-400);
-    }
-
-    &&__rep {
-        --_ba-bc: var(--green-300);
-        --_ba-fc: var(--green-400);
-    }
-
-    &&__rep-down {
-        --_ba-bc: var(--red-300);
-        --_ba-fc: var(--red-400);
-    }
-
-    &&__votes:not(&__answered) {
-        --_ba-bc: var(--black-250);
-        --_ba-fc: var(--black-500);
-    }
-
-    // Users
-    &&__admin {
-        --_ba-bc: var(--theme-primary-200);
-        --_ba-bg: var(--theme-primary-100);
-        --_ba-fc: var(--theme-primary-500);
-    }
-
-    &&__moderator {
-        --_ba-bc: var(--theme-secondary-300);
-        --_ba-bg: var(--theme-secondary-200);
-        --_ba-fc: var(--theme-secondary-600);
-        --_ba-g:  calc(var(--su-static4) - var(--su-static1)); // 3px
-        // :before icon
-        --_ba-before-h: calc(var(--su-static16) - var(--su-static2)); // 14px
-        --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
-        --_ba-before-mt:  calc(var(--su-static1) * -1); // -1px
-        --_ba-before-w: var(--su-static12);
-
-        // Sizes
-        &.s-badge__xs {
-            --_ba-before-h: calc(var(--su-static8) + var(--su-static1)); // 9px
-            --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
-            --_ba-before-mt: 0;
-            --_ba-before-w: calc(var(--su-static8) - var(--su-static1)); // 7px
-        }
-
-        &.s-badge__sm {
-            --_ba-g: var(--su-static2);
-            --_ba-before-h: calc(var(--su-static12) - var(--su-static1)); // 11px
-            --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E");
-            --_ba-before-mt: 0;
-            --_ba-before-w: calc(var(--su-static8) + var(--su-static1)); // 9px
-        }
-
-        &:before {
-            height: var(--_ba-before-h);
-            margin-top: var(--_ba-before-mt);
-            width: var(--_ba-before-w);
-
-            content: "";
-            display: inline-block;
-            background-color: currentColor;
-            -webkit-mask: var(--_ba-before-icon) no-repeat center;
-            mask: var(--_ba-before-icon) no-repeat center;
-            -webkit-mask-size: contain;
-            mask-size: contain;
-        }
-    }
-
-    &&__staff {
-        // Staff badges are always "Stack Overflow Orange"
-        --_ba-bc: var(--orange-300);
-        --_ba-bg: var(--orange-200);
-        --_ba-fc: var(--orange-600);
-    }
-
-    // VARIANTS
-    &&__danger,
-    &&__muted {
-        &.s-badge__filled {
-            --_ba-bc: transparent;
-        }
-    }
-
-    &&__danger {
-        --_ba-bc: var(--red-300);
-        --_ba-bg: var(--red-200);
-        --_ba-fc: var(--red-600);
-
-        &.s-badge__filled {
-            --_ba-bg: var(--red-400);
-            --_ba-fc: var(--white);
-        }
-    }
-    &&__info {
-        --_ba-bc: var(--blue-300);
-        --_ba-bg: var(--blue-200);
-        --_ba-fc: var(--blue-600);
-    }
-
-    &&__warning {
-        --_ba-bc: var(--yellow-300);
-        --_ba-bg: var(--yellow-200);
-        --_ba-fc: var(--yellow-600);
-    }
-
-    &&__muted {
-        --_ba-bc: var(--black-300);
-        --_ba-bg: var(--black-200);
-        --_ba-fc: var(--black-500);
-
-        &.s-badge__filled {
-            --_ba-bg: var(--black-500);
-            --_ba-fc: var(--white);
-        }
-    }
-
-    &&__new {
-        --_ba-bc: var(--_ba-bg);
-        --_ba-bg: var(--purple-100);
-        --_ba-fc: var(--purple-400);
-        --_ba-fw: bold;
-        --_ba-tt: uppercase;
-    }
-
-    // CHILD ELEMENTS
-    &--image, // Included with no base class to account for usage in .s-progress__badge
-    & &--image {
-        align-self: center;
-        display: inline-flex;
-        margin-right: var(--su1);
-        margin-left: calc((var(--su4) + var(--su1)) * -1);
-    }
-
-    // INTERACTION
-    a&:hover {
-        text-decoration: none;
-    }
-
-    align-self: var(--_ba-as);
-    background-color: var(--_ba-bg);
-    border: var(--su-static1) solid var(--_ba-bc);
-    color: var(--_ba-fc);
-    font-size: var(--_ba-fs);
-    gap: var(--_ba-g);
-    font-weight: var(--_ba-fw);
-    line-height: var(--_ba-lh);
-    min-width: var(--_ba-wmn);
-    padding: var(--_ba-py) var(--_ba-px);
-    text-transform: var(--_ba-tt);
-
-    align-items: center;
-    border-radius: var(--br-sm);
-    display: inline-flex;
-    justify-content: center;
-    text-decoration: none;
-    vertical-align: middle;
-    white-space: nowrap;
-}
+.s-badge {
+    --_ba-as: unset;
+    --_ba-bc: var(--bc-medium);
+    --_ba-bg: var(--black-150);
+    --_ba-fc: var(--black-500);
+    --_ba-fs: var(--fs-caption);
+    --_ba-fw: normal;
+    --_ba-g: 0.3em;
+    --_ba-lh: 2;
+    --_ba-px: var(--su6);
+    --_ba-py: 0;
+    --_ba-tt: unset;
+    --_ba-wmn: 0;
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        // Badge counts
+        &__gold,
+        &__silver,
+        &__bronze,
+        // Number counts
+        &__rep,
+        &__rep-down,
+        &__votes:not(.s-badge__answered),
+        // Users
+        &__admin,
+        &__moderator,
+        &__staff {
+            --_ba-bc: currentColor;
+        }
+
+        &__new {
+            --_ba-fc: var(--purple-600);
+        }
+    });
+
+    // MODIFIERS
+    // Sizes
+    &&__xs,
+    &&__sm {
+        --_ba-as: flex-start;
+        --_ba-fs: var(--fs-fine);
+    }
+
+    &&__xs {
+        --_ba-lh: 1.5;
+        --_ba-px: var(--su2);
+        --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
+    }
+
+    &&__sm {
+        --_ba-lh: 1.8;
+        --_ba-px: var(--su4);
+        --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
+    }
+
+    // Badge counts
+    &&__gold,
+    &&__silver,
+    &&__bronze {
+        --_ba-fc: var(--black-500);
+    }
+
+    &&__gold {
+        --_ba-bc: var(--gold-300);
+        --_ba-bg: var(--gold-100);
+    }
+
+    &&__silver {
+        --_ba-bc: var(--silver-300);
+        --_ba-bg: var(--silver-100);
+    }
+
+    &&__bronze {
+        --_ba-bc: var(--bronze-300);
+        --_ba-bg: var(--bronze-100);
+    }
+
+    // Number counts
+    &&__answered,
+    &&__bounty,
+    &&__important {
+        --_ba-bc: transparent;
+        --_ba-fc: var(--white);
+    }
+
+    &&__rep,
+    &&__rep-down,
+    &&__votes:not(&__answered) {
+        --_ba-bg: var(--white);
+    }
+
+    &&__answered {
+        --_ba-bg: var(--green-400);
+    }
+
+    &&__bounty {
+        --_ba-bg: var(--blue-400);
+    }
+
+    &&__important {
+        --_ba-bg: var(--red-400);
+    }
+
+    &&__rep {
+        --_ba-bc: var(--green-300);
+        --_ba-fc: var(--green-400);
+    }
+
+    &&__rep-down {
+        --_ba-bc: var(--red-300);
+        --_ba-fc: var(--red-400);
+    }
+
+    &&__votes:not(&__answered) {
+        --_ba-bc: var(--black-250);
+        --_ba-fc: var(--black-500);
+    }
+
+    // Users
+    &&__admin {
+        --_ba-bc: var(--theme-primary-200);
+        --_ba-bg: var(--theme-primary-100);
+        --_ba-fc: var(--theme-primary-500);
+    }
+
+    &&__moderator {
+        --_ba-bc: var(--theme-secondary-300);
+        --_ba-bg: var(--theme-secondary-200);
+        --_ba-fc: var(--theme-secondary-600);
+        --_ba-g:  calc(var(--su-static4) - var(--su-static1)); // 3px
+        // :before icon
+        --_ba-before-h: calc(var(--su-static16) - var(--su-static2)); // 14px
+        --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
+        --_ba-before-mt:  calc(var(--su-static1) * -1); // -1px
+        --_ba-before-w: var(--su-static12);
+
+        // Sizes
+        &.s-badge__xs {
+            --_ba-before-h: calc(var(--su-static8) + var(--su-static1)); // 9px
+            --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
+            --_ba-before-mt: 0;
+            --_ba-before-w: calc(var(--su-static8) - var(--su-static1)); // 7px
+        }
+
+        &.s-badge__sm {
+            --_ba-g: var(--su-static2);
+            --_ba-before-h: calc(var(--su-static12) - var(--su-static1)); // 11px
+            --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E");
+            --_ba-before-mt: 0;
+            --_ba-before-w: calc(var(--su-static8) + var(--su-static1)); // 9px
+        }
+
+        &:before {
+            height: var(--_ba-before-h);
+            margin-top: var(--_ba-before-mt);
+            width: var(--_ba-before-w);
+
+            content: "";
+            display: inline-block;
+            background-color: currentColor;
+            -webkit-mask: var(--_ba-before-icon) no-repeat center;
+            mask: var(--_ba-before-icon) no-repeat center;
+            -webkit-mask-size: contain;
+            mask-size: contain;
+        }
+    }
+
+    &&__staff {
+        // Staff badges are always "Stack Overflow Orange"
+        --_ba-bc: var(--orange-300);
+        --_ba-bg: var(--orange-200);
+        --_ba-fc: var(--orange-600);
+    }
+
+    // VARIANTS
+    &&__ai {
+        --_ba-bc: var(--_ba-fc);
+        --_ba-bg: var(--black-050);
+        --_ba-fc: var(--orange-500);
+        --_ba-tt: uppercase;
+    }
+
+    &&__bot {
+        --_ba-bc: var(--black-300);
+    }
+
+    &&__danger,
+    &&__muted {
+        &.s-badge__filled {
+            --_ba-bc: transparent;
+        }
+    }
+
+    &&__danger {
+        --_ba-bc: var(--red-300);
+        --_ba-bg: var(--red-200);
+        --_ba-fc: var(--red-600);
+
+        &.s-badge__filled {
+            --_ba-bg: var(--red-400);
+            --_ba-fc: var(--white);
+        }
+    }
+    &&__info {
+        --_ba-bc: var(--blue-300);
+        --_ba-bg: var(--blue-200);
+        --_ba-fc: var(--blue-600);
+    }
+
+    &&__warning {
+        --_ba-bc: var(--yellow-300);
+        --_ba-bg: var(--yellow-200);
+        --_ba-fc: var(--yellow-600);
+    }
+
+    &&__muted {
+        --_ba-bc: var(--black-300);
+        --_ba-bg: var(--black-200);
+        --_ba-fc: var(--black-500);
+
+        &.s-badge__filled {
+            --_ba-bg: var(--black-500);
+            --_ba-fc: var(--white);
+        }
+    }
+
+    &&__new {
+        --_ba-bc: var(--_ba-bg);
+        --_ba-bg: var(--purple-100);
+        --_ba-fc: var(--purple-400);
+        --_ba-fw: bold;
+        --_ba-tt: uppercase;
+    }
+
+    // CHILD ELEMENTS
+    &--image, // Included with no base class to account for usage in .s-progress__badge
+    & &--image {
+        align-self: center;
+        display: inline-flex;
+        margin-right: var(--su1);
+        margin-left: calc((var(--su4) + var(--su1)) * -1);
+    }
+
+    // INTERACTION
+    a&:hover {
+        text-decoration: none;
+    }
+
+    align-self: var(--_ba-as);
+    background-color: var(--_ba-bg);
+    border: var(--su-static1) solid var(--_ba-bc);
+    color: var(--_ba-fc);
+    font-size: var(--_ba-fs);
+    gap: var(--_ba-g);
+    font-weight: var(--_ba-fw);
+    line-height: var(--_ba-lh);
+    min-width: var(--_ba-wmn);
+    padding: var(--_ba-py) var(--_ba-px);
+    text-transform: var(--_ba-tt);
+
+    align-items: center;
+    border-radius: var(--br-sm);
+    display: inline-flex;
+    justify-content: center;
+    text-decoration: none;
+    vertical-align: middle;
+    white-space: nowrap;
+}

package/lib/components/button/button.less

@@ -59,7 +59,6 @@
     .highcontrast-mode({
         --_bu-bc: currentColor;
         --_bu-outlined-bc: var(--_bu-bc);
-        --_bu-bc-selected: var(--_bu-bc);
         --_bu-fc-selected: var(--white);
         --_bu-outlined-fc-selected: var(--white);
         --_bu-badge-o: 0.8;
@@ -236,6 +235,7 @@
 
     // VARIANTS
     &&__danger,
+    &&__featured,
     &&__muted {
         .highcontrast-mode({
             --_bu-filled-bc: transparent;
@@ -268,6 +268,32 @@
         --_bu-number-fc-filled: var(--black);
     }
 
+    &&__featured {
+        --_bu-bg-active: var(--purple-300);
+        --_bu-bg-hover: var(--purple-200);
+        --_bu-bg-selected: var(--purple-300);
+        --_bu-fc: var(--purple-500);
+        --_bu-fc-active: var(--_bu-fc);
+        --_bu-fc-hover: var(--purple-500);
+        --_bu-fc-selected: var(--purple-600);
+        --_bu-filled-bc: transparent;
+        --_bu-filled-bc-selected: var(--_bu-filled-bc);
+        --_bu-filled-bg: var(--purple-400);
+        --_bu-filled-bg-active: var(--purple-500);
+        --_bu-filled-bg-hover: var(--purple-500);
+        --_bu-filled-bg-selected: var(--purple-600);
+        --_bu-filled-fc: var(--white);
+        --_bu-filled-fc-active: var(--_bu-filled-fc);
+        --_bu-filled-fc-hover: var(--_bu-filled-fc);
+        --_bu-filled-fc-selected: var(--_bu-filled-fc);
+        --_bu-outlined-bc: var(--purple-400);
+        --_bu-outlined-bc-selected: var(--purple-500);
+        --_bu-outlined-bg-selected: var(--_bu-bg-selected);
+        --_bu-outlined-fc-selected: var(--_bu-fc-selected);
+        --_bu-number-fc: var(--white);
+        --_bu-number-fc-filled: var(--black);
+    }
+
     &&__muted {
         --_bu-bc-hover: var(--black-300);
         --_bu-bg-active: var(--black-150);
@@ -300,6 +326,7 @@
         --_bu-number-fc-focus: var(--black-500);
 
         .highcontrast-mode({
+            --_bu-bc-hover: currentColor;
             --_bu-bg-hover: var(--black-225);
             // // The filled modifier on the muted button is deprecated and is to be
             // // removed in Stacks Classic v2
@@ -309,6 +336,7 @@
             --_bu-filled-bg-selected: var(--black-500);
             --_bu-filled-fc: var(--white);
             --_bu-filled-fc-selected: var(--_bu-filled-fc);
+            --_bu-bc-selected: currentColor;
             --_bu-fc-selected: var(--black);
             --_bu-number-fc: var(--white);
             --_bu-number-fc-filled: var(--black);
@@ -408,7 +436,7 @@
                 color: var(--_bu-filled-fc-hover);
             }
 
-            &:not(.s-btn__outlined) {
+            &:not(.s-btn__outlined):not(.s-btn__filled) {
                 border-color: var(--_bu-bc-hover);
             }
 
@@ -419,9 +447,11 @@
                     color: var(--_bu-filled-fc);
                 }
 
-                background-color: var(--_bu-bg);
-                border-color: var(--_bu-bc);
-                color: var(--_bu-fc);
+                &:not(.s-btn__outlined) {
+                    background-color: var(--_bu-bg);
+                    border-color: var(--_bu-bc);
+                    color: var(--_bu-fc);
+                }
             }
 
             background-color: var(--_bu-bg-hover);