StackExchange · mukunku · Jan 28, 2026 · Jan 28, 2026 · Jan 28, 2026 · Jan 28, 2026
diff --git a/.changeset/fair-chicken-joke.md b/.changeset/fair-chicken-joke.md
@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks": patch
+---
+
+feat(sidebar-widget): initial SHINE design changes
diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md
@@ -139,6 +139,13 @@ The menu component has been updated to use new class names and structure. The fo
 #### Select
 - `md` and `xl` sizes removed
 
+#### Sidebar Widget
+- `s-sidebarwidget__items` renamed to `s-sidebarwidget--items` and must be nested inside `s-sidebarwidget--content` now
+- `s-sidebarwidget--item` is only supported for navigation items now
+- `s-sidebarwidget__small-bold-text` class removed
+- Table layout support removed
+- Expandable sidebar support removed
+
 #### Tags
 - `.s-tag__xs` removed
 - `.s-tag__md` removed

diff --git a/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less b/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less
@@ -1,42 +1,13 @@
-.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);
-            }
-        }
-    }
+@headings: h1, h2, h3, h4, h5, h6;
 
+.s-sidebarwidget {
     // VARIANTS
     .alternate-color(blue);
     .alternate-color(yellow);
     .alternate-color(green);
 
     // 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 {
@@ -50,98 +21,80 @@
             outline: none;
         }
 
+        .s-sidebarwidget--action {
+            font-size: var(--fs-fine);
+            margin-left: var(--su16);
+        }
 
-        margin: 0;
-        padding: var(--su16);
+        display: flex;
+        padding: calc(var(--su16) + var(--su2)); //18px
+        font-size: var(--fs-body2);
     }
 
     & &--header {
-        &:first-child {
-            border-top: none;
+        > @{headings} {
+            margin: 0;
+            font-size: var(--fs-body1);
+            font-weight: 600;
         }
 
-        + .s-expandable:not(.is-expanded) {
-            margin-bottom: var(--su16);
+        .s-sidebarwidget--action {
+            margin-left: auto;
+            font-size: var(--fs-fine);
+            font-weight: 600;
         }
 
-        &.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;
-            }
-        }
+        align-items: center;
+        display: flex;
+        padding: var(--su16) var(--su16) 0;
+    }
 
-        &:active {
-            outline: none;
+    & &--footer {
+        .s-sidebarwidget--action {
+            flex: 1;
         }
-
-        align-items: center;
-        border-top: var(--su-static1) solid var(--bc-light);
-        color: var(--black-600);
+
         display: flex;
+        padding: 0 var(--su16);
         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;
     }
 
-    & &--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;
-                }
+    & &--items {
+        .s-sidebarwidget--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;
+                    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;
+                    color: var(--black);
+                    font-weight: bold;
+                    position: relative;
+                }
             }
+
+            margin: var(--su12) 0;
         }
 
-        margin: var(--su12) 0;
+        margin: 0;
+        list-style: none;
     }
 
     & &--subnav {
@@ -173,46 +126,16 @@
         padding-left: 0;
     }
 
-    & 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);
     }
 }