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

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,10 +85,10 @@
         --_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 {
@@ -94,10 +98,10 @@
         --_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);
@@ -229,15 +233,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 +268,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 +286,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/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/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/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 };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@stackoverflow/stacks",
     "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
-    "version": "3.0.0-beta.20",
+    "version": "3.0.0-beta.21",
     "files": [
         "dist",
         "lib",