@stackoverflow/stacks 3.0.0-beta.20 → 3.0.0-beta.22

package/lib/components/banner/banner.less

@@ -5,6 +5,13 @@
     --_no-ty-offset: 0;
     --_no-ty: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
     .construct-notice-component(s-banner);
+    
+    &--icon {
+        //Remove the icon backgound color
+        --_no-icon-bg: transparent;
+        margin-right: var(--su8);
+        align-self: flex-start;
+    }
 
     &[aria-hidden="true"] { // If you want to hide and reveal the banner
         --_no-ty-offset: -1;
@@ -27,18 +34,12 @@
         padding-top: 93px;
     }
 
-    & &--container { // When we want to keep hero content capped
-        margin: 0 auto;
-        max-width: var(--su1024);
-        position: relative;
-        width: 100%;
-    }
-
-    border-width: 0 0 var(--su-static1);
+    display: flex;
+    align-items: center;
+    padding: var(--su16);
     inset: 0 0 auto 0;
-    padding: var(--su12);
     position: fixed;
     transform: translate3d(0, calc(var(--_no-ty) * var(--_no-ty-offset)), 0);
     width: 100%;
     z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
-}
+}

package/lib/components/button/button.less

@@ -6,20 +6,24 @@
     --_bu-g: var(--su8);
     --_bu-px: var(--su16);
     --_bu-py: calc(var(--su8) + var(--su2)); // 10px
+    --_bu-badge-fs: var(--fs-caption);
+    --_bu-badge-px: var(--su6);
+    --_bu-badge-py: var(--su2);
     --_bu-dropdown-bw: var(--su-static4);
 
     // VARIANTS
     // Base
     &:not(&__danger):not(&__featured):not(&__tonal):not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google) { // Exclude default styles from impacting these variants
         --_bu-bg: var(--theme-button-color, var(--theme-secondary));
-        --_bu-bg-disabled: var(--theme-secondary-300);
+        --_bu-bg-disabled: var(--black-350);
         --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-500));
         --_bu-fc: var(--white);
+        --_bu-fc-disabled: var(--black-050);
         --_bu-fc-hover: var(--theme-button-hover-color, var(--white));
-        --_bu-badge-bg: var(--theme-secondary-200);
-        --_bu-badge-fc: var(--theme-secondary-600);
-        --_bu-badge-bg-disabled: var(--theme-secondary-200);
-        --_bu-badge-fc-disabled: var(--theme-secondary-300);
+        --_bu-badge-bg: var(--theme-secondary-500);
+        --_bu-badge-fc: var(--white);
+        --_bu-badge-bg-disabled: var(--black-250);
+        --_bu-badge-fc-disabled: var(--black-050);
 
         &.s-btn__clear {
             --_bu-bg: transparent;
@@ -29,10 +33,10 @@
             --_bu-fc: var(--theme-secondary-600);
             --_bu-fc-disabled: var(--theme-secondary-300);
             --_bu-fc-hover: var(--_bu-fc);
-            --_bu-badge-bg: var(--theme-secondary-500);
-            --_bu-badge-fc: var(--white);
-            --_bu-badge-bg-disabled: var(--theme-secondary-300);
-            --_bu-badge-fc-disabled: var(--white);
+            --_bu-badge-bg: var(--theme-secondary-100);
+            --_bu-badge-fc: var(--theme-secondary-500);
+            --_bu-badge-bg-disabled: var(--black-100);
+            --_bu-badge-fc-disabled: var(--black-350);
 
             .highcontrast-mode({
                 --_bu-bc: var(--theme-secondary-600);
@@ -44,13 +48,14 @@
         --_bu-bg: var(--red-400);
         --_bu-fc: var(--white);
         --_bu-bg-disabled: var(--red-200);
+        --_bu-fc-disabled: var(--black-050);
         --_bu-bg-hover: var(--red-500);
         --_bu-bg-selected: var(--red-500);
         --_bu-fc-selected: var(--_bu-fc);
-        --_bu-badge-bg: var(--red-100);
-        --_bu-badge-fc: var(--red-400);
-        --_bu-badge-bg-disabled: var(--white);
-        --_bu-badge-fc-disabled: var(--red-200);
+        --_bu-badge-bg: var(--red-500);
+        --_bu-badge-fc: var(--black-050);
+        --_bu-badge-bg-disabled: var(--red-300);
+        --_bu-badge-fc-disabled: var(--black-100);
 
         &.s-btn__clear {
             --_bu-bg: transparent;
@@ -61,11 +66,10 @@
             --_bu-fc-disabled: var(--red-200);
             --_bu-fc-hover: var(--red-500);
             --_bu-fc-selected: var(--red-500);
-            --_bu-badge-bg: var(--red-400);
-            --_bu-badge-bg-selected: var(--red-400);
-            --_bu-badge-fc: var(--red-100);
-            --_bu-badge-bg-disabled: var(--red-200);
-            --_bu-badge-fc-disabled: var(--white);
+            --_bu-badge-bg: var(--red-100);
+            --_bu-badge-fc: var(--red-500);
+            --_bu-badge-bg-disabled: var(--red-100);
+            --_bu-badge-fc-disabled: var(--red-300);
 
             .highcontrast-mode({
                 --_bu-bc: var(--red-600);
@@ -81,23 +85,24 @@
         --_bu-bg-selected: var(--purple-500);
         --_bu-fc: var(--white);
         --_bu-fc-selected: var(--_bu-fc);
-        --_bu-badge-bg: var(--purple-100);
-        --_bu-badge-fc: var(--purple-400);
-        --_bu-badge-bg-disabled: var(--white);
-        --_bu-badge-fc-disabled: var(--purple-200);
+        --_bu-badge-bg: var(--purple-500);
+        --_bu-badge-fc: var(--black-050);
+        --_bu-badge-bg-disabled: var(--purple-300);
+        --_bu-badge-fc-disabled: var(--black-100);
     }
 
     &&__tonal {
         --_bu-bg: var(--black-150);
         --_bu-bg-disabled: var(--black-100);
         --_bu-bg-hover: var(--black-200);
+        --_bu-bg-selected: var(--black-200);
         --_bu-fc: var(--black);
         --_bu-fc-disabled: var(--black-300);
         --_bu-fc-selected: var(--_bu-fc);
-        --_bu-badge-bg: var(--black-500);
-        --_bu-badge-fc: var(--white);
-        --_bu-badge-bg-disabled: var(--black-300);
-        --_bu-badge-fc-disabled: var(--white);
+        --_bu-badge-bg: var(--black-200);
+        --_bu-badge-fc: var(--black-600);
+        --_bu-badge-bg-disabled: var(--black-100);
+        --_bu-badge-fc-disabled: var(--black-350);
 
         .highcontrast-mode({
             --_bu-bc: var(--black-300);
@@ -200,8 +205,9 @@
             var(--_bu-bg-selected, var(--_bu-bg)),
             var(--white) var(--_bu-bg-selected-overlay-o)
         );
-        --_bu-bg-gradient-top: var(--_bu-bg-selected, var(--_bu-bg));
-        --_bu-bg-gradient-bottom: var(--_bu-bg-selected-overlay, var(--_bu-bg));
+        --_bu-bg-gradient-top: var(--_bu-bg-selected-overlay, var(--_bu-bg));
+        --_bu-bg-gradient-bottom:  var(--_bu-bg-selected, var(--_bu-bg));
+
 
         .dark-mode({
             --_bu-bg-selected-overlay-o: 13%;
@@ -229,15 +235,15 @@
     }
 
     // CHILD ELEMENTS
-    // TODO SHINE fine-tune badge styles
     & &--badge {
         background-color: var(--_bu-badge-bg);
         border-radius: var(--br-pill);
         display: inline-block;
-        font-size: var(--fs-caption);
+        font-size: var(--_bu-badge-fs);
         line-height: inherit;
         opacity: var(--_bu-badge-o);
-        padding: var(--su1) var(--su4) 0;
+        padding: var(--_bu-badge-py) var(--_bu-badge-px);
+        margin-block: calc(var(--_bu-badge-py) * -1);
     }
 
     & &--number {
@@ -264,6 +270,9 @@
     &&__sm {
         --_bu-lh: var(--lh-sm);
         --_bu-px: var(--su12);
+        --_bu-badge-fs: var(--fs-fine);
+        --_bu-badge-py: var(--su1);
+        --_bu-badge-px: calc(var(--su2) + var(--su1)); // 3px
     }
     &&__xs {
         --_bu-g: var(--su4);
@@ -279,6 +288,7 @@
         --_bu-fs: var(--fs-body2);
         --_bu-px: var(--su24);
         --_bu-py: calc(var(--su12) + var(--su1)); // 13px
+        --_bu-badge-py: calc(var(--su2) + var(--su1)); // 3px
     }
 
     // INTERACTION

package/lib/components/loader/loader.less

@@ -0,0 +1,88 @@
+.s-loader {
+    --_ld-color: var(--black-600);
+    --_ld-gap: calc(var(--_ld-size) / 2);
+    --_ld-size: calc(var(--su4) + var(--su1)); // 5px
+    --_ld-offset: calc(calc(var(--_ld-size) / 8) * -5); // -5/8ths of the size
+
+    // MODIFIERS
+    &__sm {
+        --_ld-size: calc(calc(var(--su8) - var(--su1)) / 2); // 3.5px
+        margin-left: var(--su1);
+        margin-right: var(--su1);
+    }
+
+    &__lg {
+        --_ld-size: var(--su8);
+    }
+
+    // CHILD ELEMENTS – three blocks via pseudo-elements (::before, --sr-text::before, ::after)
+    &:before,
+    & &--sr-text:before,
+    &:after {
+        background-color: currentColor;
+        content: "";
+        display: block;
+        height: var(--_ld-size);
+        width: var(--_ld-size);
+
+        animation: loader-animation .8s cubic-bezier(1, 1, 0, 1) infinite;
+    }
+
+    & &--sr-text {
+        // Visible flex item so its ::before (middle block) shows; overflow visible so translateY isn't clipped
+        display: block;
+        flex-shrink: 0;
+        height: var(--_ld-size);
+        width: var(--_ld-size);
+        font-size: 0;
+        overflow: visible;
+    }
+
+    & &--sr-text:before {
+        animation-delay: .25s;
+    }
+
+    &:after {
+        animation-delay: .5s;
+    }
+
+    display: flex;
+    gap: var(--_ld-gap);
+    margin-top: var(--_ld-gap);
+}
+
+@media (prefers-reduced-motion:reduce){
+    .s-loader {
+        &:before,
+        & &--sr-text:before,
+        &:after {
+            animation: loader-animation-reduced-motion 2s ease-in-out infinite;
+        }
+    }
+}
+
+@keyframes loader-animation {
+    0%,1%,99%,to{
+        opacity: 0.2;
+        transform: translateY(0);
+    }
+    49%,50%{
+        opacity: 1;
+        transform: translateY(var(--_ld-offset));
+    }
+    51%{
+        opacity: 0.2;
+        transform: translateY(var(--_ld-offset));
+    }
+}
+
+@keyframes loader-animation-reduced-motion {
+    0%,to{
+        opacity: 0.3;
+        transform: none;
+    }
+    50%{
+        opacity: 1;
+        transform: none;
+    }
+}

package/lib/components/notice/notice.less

@@ -27,8 +27,9 @@
 /**
  * Generate styles for a notice-based component
  *
- * Usage example:
+ * Usage examples:
  * .construct-notice-component(s-banner);
+ * .construct-notice-component(s-notice);
  *
  * @baseClass - The base class name for the notice component
  */
@@ -110,7 +111,6 @@
     &__warning {
         &:not(.@{baseClass}__important) {
             .generate-variant-variables(yellow);
-            
         }
 
         &.@{baseClass}__important {
@@ -164,16 +164,26 @@
             background-color: var(--_no-fc);
             color: var(--_no-bg);
         }
+        color: var(--_no-fc);
     }
 
-    :has(>button&--dismiss) {
+    &--actions {
+        display: flex;
+        margin-left: auto;
+        align-self: flex-start;
         padding-left: var(--su24);
-        //Add spacing between multiple notice actions
+        color: var(--_no-fc);
         gap: calc(var(--su24) - var(--su2)); //22px
+        
         //Fix css issue caused by svelte-sonner-toast in the NoticeAction svelte component
         overflow-wrap: initial !important;
     }
 
+    //Fix notice action color for __important variant
+    &--actions > .s-link:not(&--dismiss) {
+        color: var(--_no-fc);
+    }
+
     // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
     background: var(--_no-bg);
     color: var(--_no-fc);
@@ -195,10 +205,6 @@
         margin-right: var(--su12);
         align-self: stretch;
 
-        //Position the svg icon
-        display: flex;
-        align-items: top;
-
         //Negative margin to make up for s-notice's padding
         margin-top: calc(var(--_no-pd) * -1);
         margin-bottom: calc(var(--_no-pd) * -1);

package/lib/components/sidebar-widget/sidebar-widget.less

@@ -1,218 +1,48 @@
-.s-sidebarwidget {
-    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_sw-bc: var(--bc-medium);
-
-    // MODIFIERS
-    &:not(.s-anchors) {
-        a:not(.button):not(.s-tag):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link) {
-            &,
-            &:visited {
-                color: var(--black-600);
-            }
-        }
-    }
-
-    // VARIANTS
-    .alternate-color(blue);
-    .alternate-color(yellow);
-    .alternate-color(green);
+@headings: h1, h2, h3, h4, h5, h6;
 
+.s-sidebarwidget {
     // CHILD ELEMENTS
-    & &--action {
-        color: var(--blue-400);
-        font-size: var(--fs-body1);
-        font-weight: normal;
-        margin-left: auto;
-    }
-
-    & &--content {
-        &:not(table) {
-            &:not(.s-sidebarwidget__items),
-            &:not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
-                display: flex;
-            }
-        }
-
-        + .s-sidebarwidget--content {
-            border-top: var(--su-static1) solid var(--bc-light);
-        }
-
-        &.s-sidebarwidget__items {
-            &,
-            &.s-sidebarwidget__block-items .s-sidebarwidget--item {
-                display: block;
-            }
-
-            padding: var(--su6) var(--su16); // the items themselves provide part of the spacing, so the content padding needs to account for that
+    & &--content {        
+        .s-sidebarwidget--action {
+            font-size: var(--fs-fine);
+            margin-left: var(--su16);
+            align-self: flex-start;
         }
 
-        &:active {
-            outline: none;
-        }
-        
-
-        margin: 0;
-        padding: var(--su16);
+        display: flex;
+        padding: var(--su12) 0 var(--su16) 0;
+        font-size: var(--fs-body2);
     }
 
     & &--header {
-        &:first-child {
-            border-top: none;
-        }
-
-        + .s-expandable:not(.is-expanded) {
-            margin-bottom: var(--su16);
-        }
-
-        &.s-sidebarwidget {
-            &__expanding-control {
-                &:before {
-                    border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
-                    border-left-color: var(--black-400);
-                    border-right-width: 0;
-                    content: '';
-                    float: left;
-                    margin-right: var(--su12);
-                    margin-top: calc(calc(var(--lh-base) * 1em) / 2 - 5px); // 1.3 is our standard line height
-                    transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
-                }
-
-                &[aria-expanded='true']:before {
-                    transform: rotate(90deg);
-                }
-
-                cursor: pointer;
-            }
-
-            &__small-bold-text {
-                .s-sidebarwidget--action {
-                    font-weight: normal;
-                    line-height: calc(var(--lh-base) * var(--fs-caption)); // line-height should be the same as in the outside element, so the header and action baselines line up
-                }
-
-                font-size: var(--fs-caption);
-                font-weight: bold;
-            }
+        > @{headings} {
+            margin: 0;
+            padding-right: var(--su6);
+            font-size: var(--fs-body1);
+            font-weight: 500;
         }
 
-        &:active {
-            outline: none;
+        .s-sidebarwidget--action {
+            margin-left: auto;
         }
 
         align-items: center;
-        border-top: var(--su-static1) solid var(--bc-light);
-        color: var(--black-600);
         display: flex;
-        font-size: var(--fs-body2);
-        font-weight: bold;
-        justify-content: flex-start;
-        line-height: var(--lh-xs);
-        margin: 0;
-        padding: var(--su16) var(--su16) 0;
+        padding: var(--su4) 0;
     }
 
-    & &--item {
-        &,
-        & > :first-child {
-            &[aria-current="true"],
-            &[aria-current="page"] {
-                &:before {
-                    border-left-color: var(--theme-primary);
-                    border-left-style: solid;
-                    border-left-width: calc(var(--su-static1) * 3); // 3px
-                    content: '';
-                    height: calc(100% + var(--su16));
-                    left: 0;
-                    margin-left: var(--sun16); // the orange selection indicator overlaps with the widget border
-                    margin-top: var(--sun8);
-                    position: absolute;
-                }
-
-                a { // TODO: this isn't the best way to go about this. There should be a "is current" highlight without font modification for more complex cases
-                    &,
-                    &:visited {
-                        color: inherit;
-                    }
-                }
-
-                color: var(--black);
-                font-weight: bold;
-                position: relative;
-            }
+    & &--footer {
+        .s-sidebarwidget--action {
+            flex: 1;
         }
-
-        margin: var(--su12) 0;
-    }
-
-    & &--subnav {
-        li {
-            &[aria-current="page"],
-            &[aria-current="true"] {
-                a {
-                    &,
-                    &:visited {
-                        color: inherit;
-                    }
-                }
-
-                #stacks-internals #bullet-arrow(var(--theme-primary));
-                color: var(--black);
-                font-weight: bold;
-            }
-
-            #stacks-internals #bullet-arrow(var(--black-225));
-            background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2); // 0 ((1.2em - 10) / 2)
-            background-repeat: no-repeat;
-            background-size: auto calc(var(--su-static8) + var(--su-static2)); // auto 10px
-            margin-top: var(--su-static12);
-            padding-left: var(--su-static16);
-        }
-
-        list-style-type: none;
-        margin-left: var(--su8);
-        padding-left: 0;
+        
+        display: flex;
+        font-size: var(--fs-body2);
     }
 
-    & table&--content&__items {
-        tr.s-sidebarwidget--item {
-            td {
-                padding: 0;
-            }
-
-            display: table-row;
-        }
-
-        border-collapse: separate;
-        border-spacing: var(--su16) var(--su12);
-        padding: var(--su6) 0 0;
+    & &--action:is(a, button) {
+        white-space: nowrap;
     }
 
-    background-color: var(--white);
-    border: var(--su-static1) solid var(--_sw-bc);
-    border-radius: var(--br-md);
     font-size: var(--fs-body1);
-}
-
-// COLOR ALTERNATIVES
-.alternate-color(@name) {
-    &.s-sidebarwidget__@{name} {
-        --_sw-bc: var(~"--@{name}-300");
-
-        .highcontrast-mode({
-            --_sw-bc: var(~"--@{name}-500");
-        });
-
-        &:after,
-        .s-sidebarwidget--content + .s-sidebarwidget--content,
-        .s-sidebarwidget--header {
-            border-color: var(--_sw-bc);
-        }
-
-        .s-sidebarwidget--header {
-            color: var(--fc-medium);
-        }
-
-        background-color: var(~"--@{name}-100");
-        border-color: var(--_sw-bc);
-    }
 }

package/lib/components/toast/toast.less

@@ -17,6 +17,9 @@
         padding-bottom: var(--su8);
         padding-top: var(--su8);
         pointer-events: all;
+        display: flex;
+        align-items: center;
+        min-width: var(--su448);
     }
 
     display: flex;

package/lib/stacks-static.less

@@ -42,7 +42,7 @@
 @import "components/prose/prose.less";
 @import "components/select/select.less";
 @import "components/sidebar-widget/sidebar-widget.less";
-@import "components/spinner/spinner.less";
+@import "components/loader/loader.less";
 @import "components/table/table.less";
 @import "components/table-container/table-container.less";
 @import "components/tag/tag.less";

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

@@ -23,6 +23,7 @@ const scheduleVisualTest = ({
         }
 
         let retryAttempts = 3;
+        let lastError: Error | null = null;
 
         do {
             await fixture(element);
@@ -37,21 +38,22 @@ const scheduleVisualTest = ({
                 return;
             } catch (error) {
                 const e = error as Error;
-                // if the error is not a visual diff failure, retry
-                // this is to prevent flaky tests due to snapshot capturing
-                if (
-                    retryAttempts > 0 &&
-                    !e.message.includes("Visual diff failed.")
-                ) {
-                    retryAttempts--;
-                    continue;
-                } else {
+                lastError = e;
+                // if the error is a visual diff failure, fail immediately
+                if (e.message.includes("Visual diff failed.")) {
                     throw e;
                 }
+                // otherwise retry (to prevent flaky tests due to snapshot capturing)
+                retryAttempts--;
             } finally {
                 el.remove();
             }
         } while (retryAttempts > 0);
+
+        // If we exhausted all retries without success, throw the last error
+        if (lastError) {
+            throw lastError;
+        }
     });
 };
 
@@ -60,4 +62,34 @@ const runVisualTests = (args: VisualTestArgs) => {
     testVariations.forEach(scheduleVisualTest);
 };
 
-export { runVisualTests };
+const replaceHtml = (
+    componentTemplateResult: unknown,
+    textToReplace: string,
+    replacementHtml: string
+) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const component = componentTemplateResult as any;
+    if (!Array.isArray(component.strings) || !Array.isArray(component.values)) {
+        throw new Error("Expected Lit TemplateResult type");
+    }
+
+    // Replace placeholder with actual icon in the Lit template
+    const originalStrings = component.strings;
+    const updatedStrings = originalStrings.map((str: string) =>
+        str.replace(textToReplace, replacementHtml)
+    );
+    // Create a proper TemplateStringsArray with raw property
+    Object.defineProperty(updatedStrings, "raw", {
+        value: updatedStrings.map((str: string) => str),
+        enumerable: false,
+    });
+    // Reconstruct the template with updated strings and original values
+    const updatedComponent = {
+        ...component,
+        strings: updatedStrings,
+        values: component.values,
+    };
+    return updatedComponent;
+};
+
+export { runVisualTests, replaceHtml };