@webority/theme 0.27.1 → 0.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.27.1",
+  "version": "0.27.2",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {

package/scss/_brand-signal.scss

@@ -135,7 +135,8 @@
 .page-title,
 .card-title,
 .wui-modal-title,
-.empty-state-title {
+.empty-state-title,
+.result-title {
     font-family: var(--wui-font-display);
     font-weight: 600;
     font-style: normal;

package/scss/wui/_display.scss

@@ -351,7 +351,10 @@ a.info-row:hover .info-value {
     padding: 0;
 }
 .descs-item {
-    display: contents;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    border-bottom: 1px solid var(--color-border);
     grid-column: span var(--descs-span, 1);
 }
 .descs-label {
@@ -360,16 +363,14 @@ a.info-row:hover .info-value {
     text-transform: uppercase;
     letter-spacing: 0.04em;
     color: var(--color-text-subtle);
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--color-border);
+    padding: 12px 16px 0;
     margin: 0;
 }
 .descs-value {
     font-size: 14px;
     font-weight: 500;
     color: var(--color-text);
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--color-border);
+    padding: 4px 16px 12px;
     margin: 0;
     word-break: break-word;
 }
@@ -379,24 +380,22 @@ a.info-row:hover .info-value {
     color: var(--color-text-subtle);
 }
 // Small size variant.
-.descs-sm .descs-label,
+.descs-sm .descs-label {
+    font-size: 12px;
+    padding: 8px 12px 0;
+}
 .descs-sm .descs-value {
     font-size: 12px;
-    padding: 8px 12px;
+    padding: 4px 12px 8px;
 }
-// Bordered variant removes inner dividers (only outer border on cells).
-.descs-bordered .descs-label,
-.descs-bordered .descs-value {
+// Bordered variant draws dividers between neighbouring items instead of under each row.
+.descs-bordered .descs-item {
     border-bottom: none;
     border-right: 1px solid var(--color-border);
 }
-.descs-bordered .descs-item:last-child .descs-label,
-.descs-bordered .descs-item:last-child .descs-value {
+.descs-bordered .descs-item:last-child {
     border-right: none;
 }
-.descs-bordered .descs-list > :nth-child(2n-1) {
-    border-bottom: 1px solid var(--color-border);
-}
 // Column variants — set the grid-template-columns.
 .descs-col-1 .descs-list {
     --descs-cols: 1;

package/scss/wui/_shell.scss

@@ -263,8 +263,8 @@
     flex-direction: column;
     gap: 2px;
     overflow-y: auto;
-    // The rail is chrome, not content: a scrollbar here reads as clutter and, at
-    // 88px collapsed, would eat a meaningful share of the width.
+    // A native scrollbar always takes layout width, and its width differs by browser and OS, so
+    // it stays hidden; the thumb below is drawn over the links instead.
     scrollbar-width: none;
 }
 .app-sidebar-scroll::-webkit-scrollbar {
@@ -272,6 +272,47 @@
     width: 0;
     height: 0;
 }
+// Scroll thumb for a long menu, shown on hover or keyboard focus and only when the links
+// overflow. It is a sticky pseudo-element over the nav's right edge, moved by the nav's own
+// scroll timeline, so it takes no width. The negative bottom margin cancels its height and the
+// flex gap, so no link moves. Browsers without scroll timelines keep the hidden scrollbar.
+@supports (animation-timeline: scroll()) {
+    .app-sidebar-scroll {
+        container-type: scroll-state;
+    }
+    .app-sidebar-scroll::before {
+        content: "";
+        position: sticky;
+        top: 0;
+        flex: none;
+        align-self: flex-end;
+        width: 6px;
+        height: 48px;
+        margin-bottom: -50px;
+        border-radius: 9999px;
+        background: var(--wui-scrollbar);
+        visibility: hidden;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s var(--wui-ease-ui);
+        animation: wui-sidebar-thumb linear both;
+        animation-timeline: scroll(nearest);
+    }
+    @container scroll-state(scrollable: y) {
+        .app-sidebar-scroll::before {
+            visibility: visible;
+        }
+    }
+    .app-sidebar-scroll:hover::before,
+    .app-sidebar-scroll:focus-within::before {
+        opacity: 1;
+    }
+}
+@keyframes wui-sidebar-thumb {
+    to {
+        top: calc(100% - 48px);
+    }
+}
 // Between the brand row and the nav — a workspace/tenant switcher, an environment
 // badge. It must not shrink when the nav overflows. The full card has no place on
 // the 88px rail, so the collapsed state hides it (the mobile drawer restores it).