rift-ds 1.17.0 → 1.18.0

package/bin/templates/blocks/app/dashboard/page.module.css

@@ -1,6 +1,7 @@
 /* The dashboard's grid. Four stats across on a desktop, two from the
-   laptop width down to a phone; the two panels sit side by side until the
-   tablet width, then stack. */
+   laptop width down to a phone, where each stat drops its delta under its
+   label once its tile is narrow (deltaPlacement="auto"); the two panels sit
+   side by side until the tablet width, then stack. */
 
 .stats {
   display: grid;
@@ -81,7 +82,7 @@
 
 @media (max-width: 600px) {
   .stats {
-    gap: var(--gap-400);
+    gap: var(--gap-300);
   }
 
   .panels {

package/bin/templates/blocks/app/dashboard/page.tsx

@@ -85,7 +85,7 @@ export default function DashboardPage() {
               value={stat.value}
               delta={stat.delta}
               trend={stat.trend}
-              deltaPlacement="inline"
+              deltaPlacement="auto"
             />
           </Panel>
         ))}

package/bin/templates/blocks/components/blocks/AppShell.module.css

@@ -29,6 +29,7 @@
 }
 
 .content {
+  position: relative;
   width: 100%;
   max-width: 1440px;
   min-width: 0;
@@ -40,12 +41,61 @@
 
 /* ---------------------------------------------------------- top bar */
 
+/* The bar holds one inset off the top of the page and the content runs
+   under it. Once the page scrolls (data-stuck), the page colour fills the
+   strip above it, fading out across the bar, and the blur behind it
+   dissolves a few rows below. */
 .topBar {
+  position: sticky;
+  top: var(--shell-inset);
+  z-index: var(--layer-sticky);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap-200);
   min-height: var(--control-height-default);
+  /* Room between the bar and the page header under it. */
+  margin-bottom: var(--gap-400);
+}
+
+.topBar::before {
+  content: '';
+  position: absolute;
+  top: calc(-1 * var(--shell-inset));
+  bottom: 0;
+  inset-inline: calc(-1 * var(--padding-400));
+  z-index: -1;
+  background: linear-gradient(to bottom, var(--color-bg-page-primary) var(--shell-inset), transparent);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.topBar[data-stuck]::before {
+  opacity: 1;
+}
+
+.topBarBlur:global(.ds-progressive-blur) {
+  position: absolute;
+  top: calc(-1 * var(--shell-inset));
+  bottom: calc(-1 * var(--gap-1000));
+  inset-inline: calc(-1 * var(--padding-400));
+  height: auto;
+  z-index: -1;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.topBarBlur:global(.ds-progressive-blur--tinted) {
+  opacity: 1;
+}
+
+/* A one-pixel marker at the bar's resting place. Absolute, so the
+   column's gap skips it; it keeps its static place at the column's top. */
+.topBarMarker {
+  position: absolute;
+  width: 1px;
+  height: 1px;
 }
 
 .search {

package/bin/templates/blocks/components/blocks/AppShell.tsx

@@ -7,13 +7,17 @@
  * set. This file is yours: rename the product, change the navigation, and
  * grow it with your app.
  *
+ * The top bar sticks to the top of the page and the content scrolls under
+ * it: bare while the page is at the top, then a fill above it and the
+ * library's ProgressiveBlur behind it fade in once the page scrolls.
+ *
  * Responsive by construction: above 768px the sidebar floats beside the
  * page and the content moves over by its width; below it the sidebar
  * becomes a drawer behind its own menu button, the search field folds to
  * its icon, and the content runs edge to edge at a tighter gutter.
  */
 
-import { useState, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { AiButton } from 'rift-ds/components/AiButton/AiButton';
 import {
   AppSidebar,
@@ -22,6 +26,7 @@ import {
 } from 'rift-ds/components/AppSidebar/AppSidebar';
 import { Breadcrumb, type BreadcrumbItem } from 'rift-ds/components/Breadcrumb/Breadcrumb';
 import { CommandPaletteTrigger } from 'rift-ds/components/CommandPaletteTrigger/CommandPaletteTrigger';
+import { ProgressiveBlur } from 'rift-ds/components/ProgressiveBlur/ProgressiveBlur';
 import { ThemeToggle } from 'rift-ds/components/ThemeToggle/ThemeToggle';
 import styles from './AppShell.module.css';
 
@@ -69,6 +74,18 @@ export interface AppShellProps {
 export function AppShell({ activeKey, breadcrumb, title, actions, children }: AppShellProps) {
   const [expanded, setExpanded] = useState(true);
 
+  // The top bar is stuck once the marker at its resting place scrolls out
+  // of view; the fill and the blur behind the bar follow.
+  const markerRef = useRef<HTMLDivElement>(null);
+  const [stuck, setStuck] = useState(false);
+  useEffect(() => {
+    const marker = markerRef.current;
+    if (!marker) return;
+    const observer = new IntersectionObserver(([entry]) => setStuck(!entry.isIntersecting));
+    observer.observe(marker);
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <div className={styles.shell}>
       <AppSidebar
@@ -83,16 +100,18 @@ export function AppShell({ activeKey, breadcrumb, title, actions, children }: Ap
 
       <div className={`${styles.main} ${expanded ? styles.mainExpanded : ''}`}>
         <div className={styles.content}>
-          <header className={styles.topBar}>
+          <div ref={markerRef} className={styles.topBarMarker} aria-hidden="true" />
+          <header className={styles.topBar} data-stuck={stuck ? '' : undefined}>
+            <ProgressiveBlur className={styles.topBarBlur} tinted={stuck} />
             {/* Wire both to your command palette: CommandPalette from
                 rift-ds, opened from here and from Cmd+K. */}
-            <CommandPaletteTrigger size="compact" className={styles.search} />
+            <CommandPaletteTrigger className={styles.search} />
             <div className={styles.topBarActions}>
-              <CommandPaletteTrigger size="compact" iconOnly className={styles.searchIcon} />
+              <CommandPaletteTrigger iconOnly className={styles.searchIcon} />
               {/* The AI entry. Point it at your chat: `npx rift-ds init chat`
                   scaffolds one, and ChatLauncher opens it. */}
-              <AiButton size="compact" />
-              <ThemeToggle size="compact" showLabels={false} />
+              <AiButton />
+              <ThemeToggle showLabels={false} />
             </div>
           </header>
 

package/chat/ChatThreads.d.ts

@@ -11,6 +11,8 @@ export interface ChatThreadsProps {
     logoText?: string;
     /** The signed-in person, shown on the inline rail. */
     profile?: ThreadPanelProfile;
+    /** Rendered in the rail's footer in both seats (above the profile row on the inline rail; the sheet has none): a theme toggle, a link out. Fades out while the inline rail is collapsed. */
+    footerSlot?: ReactNode;
     /** Whether the inline rail can collapse to its icon strip. */
     collapsible?: boolean;
     /**
@@ -38,4 +40,4 @@ export interface ChatThreadsProps {
  * thread lifecycle (`useThreads`). The widget seats it inline on a wide
  * host and as a slide-over sheet on a narrow one, and tells it which.
  */
-export declare function ChatThreads({ overlay, close, logo, logoText, profile, collapsible, defaultExpanded, historyLabel, threadPanelLabels, actionLabels, }: ChatThreadsProps): import("react").JSX.Element;
+export declare function ChatThreads({ overlay, close, logo, logoText, profile, footerSlot, collapsible, defaultExpanded, historyLabel, threadPanelLabels, actionLabels, }: ChatThreadsProps): import("react").JSX.Element;

package/chat/ChatThreads.js

@@ -9,6 +9,7 @@ function ChatThreads({
   logo,
   logoText,
   profile,
+  footerSlot,
   collapsible = true,
   defaultExpanded = false,
   historyLabel = "Chat history",
@@ -65,7 +66,8 @@ function ChatThreads({
       logoText: overlay ? logoText : void 0,
       expanded: overlay || !collapsible ? true : expanded,
       onExpandedChange: overlay || !collapsible ? void 0 : setExpanded,
-      profile: overlay ? void 0 : profile
+      profile: overlay ? void 0 : profile,
+      footerSlot
     }
   );
 }

package/components/AppSidebar/AppSidebar.css

@@ -621,13 +621,12 @@
   inset-inline-start: calc(var(--ds-sidebar-float-inset, 20px) + 280px + var(--gap-300));
 }
 
-/* Inset: the side panel joins the rail on the shell plane, with no borders
-   between them, so rail and panel read as one column of navigation and the
-   inset content surface starts beyond both (AppLayout reserves the panel's
-   width while it shows). */
+/* Inset: the side panel joins the rail on the shell plane, one hairline
+   divider between the two levels, and the inset content surface starts
+   beyond both (AppLayout reserves the panel's width while it shows). The
+   trailing edge needs no border: the surface's own edge ends the panel. */
 .ds-app-sidebar__panel--inset {
   background-color: var(--color-bg-app-shell);
-  border-inline-start-color: transparent;
   border-inline-end-color: transparent;
 }
 
@@ -638,85 +637,126 @@
    widens to 80px and names every destination:
    a pill indicator behind the icon, the label
    beneath (the navigation-rail pattern).
+
+   Expand/collapse holds one seat, as ThreadPanel
+   does: the logo, every icon and the avatar sit
+   at the same x and y in both states, so only the
+   rail's width, the rows' explicit heights and
+   the labels' opacity move. The caption under the
+   icon fades out as the inline label fades in.
    ============================================ */
 .ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) {
   width: 80px;
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__logo {
-  /* Centres the 24px mark in the 80px rail: (80 - 24) / 2. */
-  padding: 0 calc(var(--padding-500) + var(--padding-200));
+/* The seat: 12px row margin + 16px row padding puts every 24px icon's
+   centre on the 80px rail's centre line (28 + 12 = 40), and the logo,
+   the category labels and the profile row share that leading edge. */
+.ds-app-sidebar--panel-mode .ds-app-sidebar__logo {
+  padding-inline-start: calc(var(--padding-500) + var(--padding-200));
+}
+
+.ds-app-sidebar--panel-mode .ds-app-sidebar__category {
+  padding-inline-start: calc(var(--padding-500) + var(--padding-200));
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__nav {
+.ds-app-sidebar--panel-mode .ds-app-sidebar__nav {
   gap: 0;
+  transition: gap var(--motion-duration-slow) var(--motion-ease-emphasized);
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn {
-  height: auto;
-  margin: 0 var(--padding-100);
-  /* Room between the content and the focus ring; the rows' spacing lives
-     here rather than in the nav gap, so the rhythm is unchanged. */
-  padding: var(--padding-100) 0;
-  justify-content: center;
-  border-radius: var(--radius-300);
+.ds-app-sidebar--panel-mode.ds-app-sidebar--expanded .ds-app-sidebar__nav {
+  gap: var(--gap-100);
+}
+
+/* The icon is pinned to the row's top in both states, so it holds its
+   y while the row's height glides between its two explicit values. */
+.ds-app-sidebar--panel-mode .ds-app-sidebar__btn {
+  position: relative;
+  isolation: isolate;
+  align-items: flex-start;
+  /* Collapsed: the 32px indicator, the caption beneath it, a 4px beat
+     above, between and below. */
+  height: calc(32px + var(--font-caption-line-height) + var(--padding-100) * 3);
+  margin: 0 var(--padding-300);
+  padding: var(--padding-200) var(--padding-200) var(--padding-200) var(--padding-400);
   overflow: visible;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    height var(--motion-duration-slow) var(--motion-ease-emphasized);
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn:hover,
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active {
-  background-color: transparent;
+.ds-app-sidebar--panel-mode.ds-app-sidebar--expanded .ds-app-sidebar__btn {
+  height: 40px;
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-left {
-  flex-direction: column;
-  gap: var(--gap-100);
-  width: 100%;
+.ds-app-sidebar--panel-mode .ds-app-sidebar__btn-left {
+  height: 24px;
 }
 
-/* The trailing chevron and count pill are faded out on any collapsed
-   rail, but faded still takes width: on this centred column it pushed
-   the icon and label off centre. Here they leave the layout outright. */
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-chevron,
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-badge {
-  display: none;
+.ds-app-sidebar--panel-mode .ds-app-sidebar__btn-chevron {
+  flex-shrink: 0;
 }
 
 /* The indicator: a 56 x 32 pill behind the icon carries hover and the
-   selection, so the label stays legible on the page ground. */
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+   selection while collapsed, so the caption stays legible on the page
+   ground; expanded, the row's own pill takes over and the two crossfade. */
+.ds-app-sidebar--panel-mode .ds-app-sidebar__btn::before {
+  content: '';
+  position: absolute;
+  top: var(--padding-100);
+  inset-inline-start: 0;
+  z-index: -1;
   width: 56px;
   height: 32px;
   border-radius: var(--radius-pill);
+  background-color: transparent;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn:hover .ds-app-sidebar__btn-icon,
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active .ds-app-sidebar__btn-icon {
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn:hover,
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active {
+  background-color: transparent;
+}
+
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn:hover::before,
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active::before {
   background-color: var(--color-action-passive-bg-hover);
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-label {
-  opacity: 1;
-  max-width: 100%;
+/* The caption: centred under the indicator, the rail's 72px wide
+   (80 less a 4px inset either side), fading out as the rail opens. */
+.ds-app-sidebar__btn-caption {
+  position: absolute;
+  top: calc(32px + var(--padding-100) * 2);
+  inset-inline-start: calc(var(--padding-200) * -1);
+  width: 72px;
   font-family: var(--font-caption-family);
   font-size: var(--font-caption-size);
   font-weight: var(--font-caption-weight);
   line-height: var(--font-caption-line-height);
   letter-spacing: var(--font-caption-letter-spacing);
+  color: var(--color-text-primary);
   text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
   text-overflow: ellipsis;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__btn-caption {
+  opacity: 0;
+  transition-duration: var(--motion-duration-fast);
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active .ds-app-sidebar__btn-label {
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active .ds-app-sidebar__btn-caption {
   font-weight: var(--font-paragraph-sm-emphasis-weight);
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__profile {
-  /* Centres the 40px avatar in the 80px rail. */
+.ds-app-sidebar--panel-mode .ds-app-sidebar__profile {
+  /* Centres the 40px avatar in the 80px rail, and holds it there open. */
   padding: 0 var(--padding-500);
 }
 

package/components/AppSidebar/AppSidebar.js

@@ -324,6 +324,7 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
                 ),
                 /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-label`, children: item.label })
               ] }),
+              isPanelMode && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-caption`, "aria-hidden": "true", children: item.label }),
               item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-badge`, children: item.badge }),
               hasChildren && /* @__PURE__ */ jsx(
                 "span",

package/components/Stat/Stat.css

@@ -111,6 +111,63 @@
   margin-bottom: var(--gap-100);
 }
 
+/* ============================================
+   AUTO DELTA — inline while the stat has room,
+   stacked under the label once it is narrow.
+   The root fills its parent and is the size
+   container; the body inside it re-templates.
+   ============================================ */
+
+.ds-stat--delta-auto {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  container: ds-stat / inline-size;
+}
+
+.ds-stat__body {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    'value delta'
+    'label label';
+  justify-items: start;
+  column-gap: var(--gap-200);
+  row-gap: var(--gap-050);
+}
+
+.ds-stat__body .ds-stat__value {
+  grid-area: value;
+}
+
+.ds-stat__body .ds-stat__label {
+  grid-area: label;
+}
+
+.ds-stat__body .ds-stat__delta {
+  grid-area: delta;
+  align-self: end;
+  /* The inline placement's optical baseline. */
+  margin-bottom: var(--gap-100);
+}
+
+/* Too narrow for the value and its delta side by side: the delta drops
+   under the label, the stacked placement's order. */
+@container ds-stat (max-width: 180px) {
+  .ds-stat__body {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      'value'
+      'label'
+      'delta';
+  }
+
+  .ds-stat__body .ds-stat__delta {
+    align-self: start;
+    margin-bottom: 0;
+  }
+}
+
 /* Icons take the colour of the text around them. Explicit, not just
    inherited by default: a consumer stylesheet that sets a colour on
    .material-symbols-rounded itself (a common global default) would

package/components/Stat/Stat.d.ts

@@ -9,8 +9,14 @@ type StatOwnProps = {
     delta?: string;
     /** Direction of the delta — colours it and adds an arrow */
     trend?: 'up' | 'down' | 'neutral';
-    /** Where the delta sits: stacked below the label, or inline to the right of the value, bottom-aligned */
-    deltaPlacement?: 'stacked' | 'inline';
+    /**
+     * Where the delta sits: stacked below the label, inline to the right of the
+     * value (bottom-aligned), or `auto`: inline while the stat has room and
+     * stacked once it is narrow, such as a KPI tile in a two-up phone grid.
+     * `auto` fills its parent's width and reads its own, so it restacks
+     * wherever it sits, whatever the viewport.
+     */
+    deltaPlacement?: 'stacked' | 'inline' | 'auto';
     /** Stat size */
     size?: 'default' | 'large';
     /** The BCP 47 locale a number `value` is written in, such as `ar-EG`. Defaults to `en-US`. This component can render from a Server Component, so it takes the prop alone and reads no LocaleProvider. */

package/components/Stat/Stat.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React from "react";
 import "./Stat.css";
 import "../../fonts/material-symbols.css";
@@ -25,9 +25,10 @@ const Stat = React.forwardRef(
       baseClass,
       `${baseClass}--${size}`,
       deltaPlacement === "inline" ? `${baseClass}--delta-inline` : "",
+      deltaPlacement === "auto" ? `${baseClass}--delta-auto` : "",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+    const parts = /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: typeof value === "number" ? formatNumber(value, locale) : value }),
       /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
       delta && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__delta ${baseClass}__delta--${trend}`, children: [
@@ -35,6 +36,7 @@ const Stat = React.forwardRef(
         delta
       ] })
     ] });
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children: deltaPlacement === "auto" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__body`, children: parts }) : parts });
   }
 );
 Stat.displayName = "Stat";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rift-ds",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
   "author": {
     "name": "Robert Ritacca",