@robr0/design-system 0.10.0 → 0.12.0

package/README.md

@@ -18,7 +18,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 | Part | Description |
 |---|---|
 | **Portfolio website** (`/website`) | Next.js app with case studies, work history, writing, and about pages, all built exclusively with the design system components below. **[Live site →](https://robertritacca.com/)** |
-| **Design system** (`/src`) | <!-- component-count -->101<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
+| **Design system** (`/src`) | <!-- component-count -->109<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
 | **AI layer** (`ai` components in `/src`, chat in `/website`, `/evals`) | A site-wide chat that answers questions about the work: built from the library's own `ai` components, grounded in a corpus generated from the site's published content, and scored by a golden-set eval. |
 
 ---
@@ -28,7 +28,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 ### Components
 
 <!-- component-list:start -->
-Accordion · Agent plan · Agent status · AI button · Alert · Alert dialog · Anchor nav · App layout · App sidebar · Area chart · Avatar · Badge · Bar chart · Breadcrumb · Button · Button group · Card · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Input · Instructions · Interrupt card · Kbd · Line chart · Link list · Message actions · Message card · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Reasoning · Scatter chart · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Sparkline · Spinner · Stacked bar chart · Stat · Stepper · Swatch · Table · Tabs · Tag input · Textarea · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip · Tree view · Treemap
+Accordion · Agent plan · Agent status · AI button · Alert · Alert dialog · Anchor nav · App layout · App sidebar · Area chart · Avatar · Badge · Bar chart · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Funnel chart · Globe · Input · Instructions · Interrupt card · Kbd · Legend tile · Line chart · Link list · Map callout · Map legend · Message actions · Message card · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Reasoning · Scatter chart · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Sparkline · Spinner · Stacked bar chart · Stat · Stepper · Swatch · Table · Tabs · Tag input · Textarea · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip · Tree view · Treemap
 <!-- component-list:end -->
 
 ### Ambient background
@@ -50,7 +50,7 @@ Eight parameters describe the look, and a composition is a table of token names
 
 It asks two things of you, both deliberate. It fills a positioned ancestor you provide, because where a background sits is a layout decision rather than a rendering one. And it never decides what to paint instead of itself: it reports `pending`, `active` or `unavailable`, and one fallback covers every way it can fail (no WebGL2, a blocked or lost GPU context, a renderer that stalls before its first frame, or `enabled={false}` as a kill switch). `pending` is the state worth handling. Paint neither layer while the context comes up, or the swap a frame later reads as two backgrounds loading in sequence.
 
-It is also the one place a `prefers-reduced-motion` check lives in JavaScript rather than in the motion tokens, because the CSS guard cannot see a `requestAnimationFrame` loop. Set the preference and it draws a single static frame.
+It checks `prefers-reduced-motion` in JavaScript rather than through the motion tokens, because the CSS guard cannot see a JS-driven loop. Set the preference and it draws a single static frame.
 
 The background behind this site is that component, with eight blurred CSS discs kept painted underneath as its fallback. The **[component page](https://robertritacca.com/components/shader-field)** is a live demo, and the **[setup guide](https://robertritacca.com/docs/get-started)** has the wiring.
 
@@ -97,7 +97,7 @@ import { BarChart, LineChart } from '@robr0/design-system/charts';
   }
   ```
 
-Icons use a bundled Material Symbols Rounded variable font (woff2), with no extra setup. Nunito Sans, the system's default typeface, is intentionally *not* bundled: load it yourself (e.g. Google Fonts or `next/font`) or override `--font-family-primary`.
+Icons use a bundled Material Symbols Rounded variable font (woff2): components import it themselves, so they need no extra setup. If you render raw `.material-symbols-rounded` spans of your own, import `@robr0/design-system/fonts/material-symbols.css` once. Nunito Sans, the system's default typeface, is intentionally *not* bundled: load it yourself (e.g. Google Fonts or `next/font`) or override `--font-family-primary`.
 
 ### Token architecture
 
@@ -151,10 +151,10 @@ Answers are measured, not assumed. `evals/chat` holds a golden set that runs thr
 
 ## Quality & CI
 
-Every push and pull request runs a GitHub Actions pipeline ([`ci.yml`](.github/workflows/ci.yml)) with four jobs: lint + library build, story tests, Storybook build, and website lint + build. The story tests render every Storybook story in headless Chromium via Vitest and run an axe accessibility audit on each, so a violation fails the build exactly like a render error. The same checklist runs locally with one command:
+Every push and pull request runs a GitHub Actions pipeline ([`ci.yml`](.github/workflows/ci.yml)) with four jobs: lint + library build, story tests, Storybook build, and website lint + build followed by the two built-HTML checks (rendered spacing, chat-corpus coverage). The story tests render every Storybook story in headless Chromium via Vitest and run an axe accessibility audit on each, so a violation fails the build exactly like a render error. The same checklist runs locally with one command:
 
 ```bash
-npm run verify   # lint + library type-check + package build + story tests + Storybook build + website lint + build
+npm run verify   # lint + library type-check + package build + story tests + Storybook build + website lint + build + built-HTML checks
 ```
 
 CI also guards against documentation drift: generated surfaces (this README's component count and list, the website's skills pages, the published blueprint copies of the root markdown specs) are rebuilt from their source registries on every build, and CI fails if the committed copies are stale. The numbers on the site are never hand-written.
@@ -164,11 +164,12 @@ CI also guards against documentation drift: generated surfaces (this README's co
 ## Running locally
 
 ```bash
+npm install              # once, at the root: the website is an npm workspace, so this installs both
+
 # Storybook (the library's dev sandbox)
 npm run storybook        # http://localhost:6006
 
-# Portfolio + documentation website (npm workspace: install once at the root)
-npm install
+# Portfolio + documentation website
 npm run dev --workspace website   # http://localhost:3000
 ```
 

package/charts.d.ts

@@ -5,6 +5,7 @@
  */
 export * from './components/Chart/AreaChart';
 export * from './components/Chart/BarChart';
+export * from './components/Chart/ComboChart';
 export * from './components/Chart/LineChart';
 export * from './components/Chart/PieChart';
 export * from './components/Chart/RadarChart';

package/charts.js

@@ -1,5 +1,6 @@
 import { AreaChart } from "./components/Chart/AreaChart.js";
 import { BarChart } from "./components/Chart/BarChart.js";
+import { ComboChart } from "./components/Chart/ComboChart.js";
 import { LineChart } from "./components/Chart/LineChart.js";
 import { PieChart } from "./components/Chart/PieChart.js";
 import { RadarChart } from "./components/Chart/RadarChart.js";
@@ -10,6 +11,7 @@ import { Treemap } from "./components/Chart/Treemap.js";
 export {
   AreaChart,
   BarChart,
+  ComboChart,
   LineChart,
   PieChart,
   RadarChart,

package/components/AgentPlan/AgentPlan.css

@@ -16,7 +16,8 @@
   width: 100%;
   background-color: var(--color-bg-container-primary);
   border: var(--border-xs) solid var(--color-bg-container-border);
-  border-radius: var(--radius-md);
+  /* The chat furniture's shared 24px shell — see ToolCall. */
+  border-radius: var(--radius-xl);
   overflow: hidden;
 }
 
@@ -29,7 +30,8 @@
   align-items: center;
   gap: var(--gap-sm);
   width: 100%;
-  padding: var(--padding-sm) var(--padding-md);
+  /* 20px sides — the card family's shared content inset. */
+  padding: var(--padding-sm) var(--padding-lg);
   background: none;
   border: none;
   text-align: left;
@@ -121,7 +123,7 @@
   display: flex;
   flex-direction: column;
   margin: 0;
-  padding: var(--padding-sm-md) var(--padding-md);
+  padding: var(--padding-sm-md) var(--padding-lg);
   list-style: none;
 }
 
@@ -229,3 +231,12 @@
   white-space: nowrap;
   border: 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
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-agent-plan .material-symbols-rounded {
+  color: inherit;
+}

package/components/AiButton/AiButton.css

@@ -60,7 +60,7 @@
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  padding: var(--border-xs);
+  padding: var(--border-md);
   background: conic-gradient(
     from var(--ds-ai-button-angle),
     var(--color-ai-gradient-start),

package/components/Alert/Alert.css

@@ -250,3 +250,12 @@
 .ds-alert--neutral .ds-alert__dismiss {
   color: var(--color-status-neutral-text);
 }
+
+/* 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
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-alert .material-symbols-rounded {
+  color: inherit;
+}

package/components/AlertDialog/AlertDialog.css

@@ -11,12 +11,14 @@
   align-items: center;
   justify-content: center;
   opacity: 0;
+  visibility: hidden; /* keeps panel controls out of the tab order when closed */
   pointer-events: none;
-  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), visibility var(--motion-duration-base) var(--motion-ease-standard);
 }
 
 .ds-alert-dialog--open {
   opacity: 1;
+  visibility: visible;
   pointer-events: auto;
 }
 

package/components/AlertDialog/AlertDialog.js

@@ -7,6 +7,7 @@ import "./AlertDialog.css";
 import "../../fonts/material-symbols.css";
 const emptySubscribe = () => () => {
 };
+const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const AlertDialog = ({
   open,
   onOpenChange,
@@ -53,9 +54,7 @@ const AlertDialog = ({
         return;
       }
       if (e.key === "Tab" && panel) {
-        const focusable = panel.querySelectorAll(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
+        const focusable = panel.querySelectorAll(FOCUSABLE);
         if (focusable.length === 0) return;
         const first = focusable[0];
         const last = focusable[focusable.length - 1];

package/components/AppLayout/AppLayout.d.ts

@@ -17,6 +17,12 @@ export interface AppLayoutProps {
     logo?: React.ReactNode;
     /** Page content — centred in the main area */
     children: React.ReactNode;
+    /**
+     * Colour scheme: 'dark' pins the layout to the dark theme (the historical
+     * behaviour and the default); 'inherit' drops the pin so the layout
+     * follows the surrounding data-theme like any other component.
+     */
+    theme?: 'dark' | 'inherit';
     /** Additional CSS classes on outer wrapper */
     className?: string;
 }
@@ -24,4 +30,4 @@ export interface AppLayoutProps {
  * AppLayout — full-page template with a collapsible sidebar
  * and a centred content area.
  */
-export declare const AppLayout: ({ sections, profile, activeKey, activeSubKey, defaultExpanded, logoText, logo, children, className, }: AppLayoutProps) => React.JSX.Element;
+export declare const AppLayout: ({ sections, profile, activeKey, activeSubKey, defaultExpanded, logoText, logo, children, theme, className, }: AppLayoutProps) => React.JSX.Element;

package/components/AppLayout/AppLayout.js

@@ -12,6 +12,7 @@ const AppLayout = ({
   logoText,
   logo,
   children,
+  theme = "dark",
   className = ""
 }) => {
   const baseClass = "ds-app-layout";
@@ -24,7 +25,7 @@ const AppLayout = ({
     expanded ? `${baseClass}--expanded` : "",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, "data-theme": "dark", children: [
+  return /* @__PURE__ */ jsxs("div", { className: classes, "data-theme": theme === "dark" ? "dark" : void 0, children: [
     /* @__PURE__ */ jsx(
       AppSidebar,
       {

package/components/AppSidebar/AppSidebar.css

@@ -27,6 +27,24 @@
   width: 280px;
 }
 
+/* ============================================
+   FLOATING VARIANT — the rail as a glass card
+   inset from the viewport edges (the same
+   recipe as the site chat panel)
+   ============================================ */
+.ds-app-sidebar--floating {
+  top: var(--ds-sidebar-float-inset, 20px);
+  left: var(--ds-sidebar-float-inset, 20px);
+  height: calc(100dvh - var(--ds-sidebar-float-inset, 20px) * 2);
+  background-color: var(--color-bg-glass);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-floating);
+  /* The glass token is deliberately translucent; this blur is what keeps
+     content behind the rail readable through it. */
+  backdrop-filter: blur(24px);
+}
+
 /* ============================================
    TOP SECTION — logo + nav
    ============================================ */
@@ -52,15 +70,17 @@
   flex-shrink: 0;
 }
 
+/* Expand/collapse choreography, here and on every row below: the rail's
+   clipping width and the text's opacity fade carry the whole transition.
+   Inner layout stays constant - text keeps its natural width with
+   min-width: 0 so it truncates under the sweeping rail instead of holding
+   rows at full width (width: 0 to auto cannot interpolate, and a gap that
+   snaps mid-glide reads as a bounce). */
 .ds-app-sidebar__logo-inner {
   display: flex;
   align-items: center;
-  gap: 0;
-  min-width: 0;
-}
-
-.ds-app-sidebar--expanded .ds-app-sidebar__logo-inner {
   gap: var(--gap-lg);
+  min-width: 0;
 }
 
 .ds-app-sidebar__logo-icon {
@@ -77,14 +97,14 @@
   letter-spacing: var(--font-paragraph-em-letter-spacing);
   color: var(--color-text-primary);
   white-space: nowrap;
-  width: 0;
+  min-width: 0;
+  flex-shrink: 1;
   overflow: hidden;
   opacity: 0;
   transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
 }
 
 .ds-app-sidebar--expanded .ds-app-sidebar__logo-text {
-  width: auto;
   opacity: 1;
 }
 
@@ -102,7 +122,8 @@
   padding: 0;
   overflow: hidden;
   opacity: 0;
-  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  /* Both widths are explicit (0 and 24px), so the width glides too. */
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), width var(--motion-duration-slow) var(--motion-ease-emphasized);
 }
 
 .ds-app-sidebar--expanded .ds-app-sidebar__toggle {
@@ -123,10 +144,8 @@
   flex-direction: column;
   gap: var(--gap-xs);
   flex-shrink: 0;
-  align-items: center;
-}
-
-.ds-app-sidebar--expanded .ds-app-sidebar__nav {
+  /* Stretch in both states: rows fill the rail and the collapsed icon is
+     centred by the row's own padding, so alignment never snaps. */
   align-items: stretch;
 }
 
@@ -156,8 +175,14 @@
 .ds-app-sidebar__btn {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   height: 40px;
+  min-width: 0;
+  /* The same inset in both states: in the collapsed 64px rail the 12px
+     margins leave a 40px row, so the hover pill is a perfect circle clear
+     of the rail edges, with the icon centred (12 + 8 + 24 + 8 + 12 = 64);
+     expanded, these are the pill's edge inset. Nothing to transition. */
+  margin: 0 var(--padding-sm-md);
   padding: var(--padding-sm);
   border-radius: var(--radius-full);
   background: transparent;
@@ -174,11 +199,6 @@
 /* Inset via margin + reduced padding (12 + 8 = the 20px the label sat at
    before), so the pill floats off the rail edges while the icon and label
    keep their exact x-positions against the category labels above. */
-.ds-app-sidebar--expanded .ds-app-sidebar__btn {
-  margin: 0 var(--padding-sm-md);
-  padding: var(--padding-sm);
-  justify-content: space-between;
-}
 
 .ds-app-sidebar__btn:hover {
   background-color: var(--color-action-passive-bg-hover);
@@ -191,14 +211,10 @@
 .ds-app-sidebar__btn-left {
   display: flex;
   align-items: center;
-  gap: 0;
+  gap: var(--gap-sm);
   min-width: 0;
 }
 
-.ds-app-sidebar--expanded .ds-app-sidebar__btn-left {
-  gap: 8px;
-}
-
 .ds-app-sidebar__btn-icon {
   --icon-size: var(--icon-size-md);
   color: var(--color-icon-primary);
@@ -213,29 +229,48 @@
   letter-spacing: var(--font-paragraph-em-letter-spacing);
   color: var(--color-text-primary);
   white-space: nowrap;
-  width: 0;
+  min-width: 0;
+  flex-shrink: 1;
   overflow: hidden;
   opacity: 0;
   transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
 }
 
 .ds-app-sidebar--expanded .ds-app-sidebar__btn-label {
-  width: auto;
+  opacity: 1;
+}
+
+.ds-app-sidebar__btn-badge {
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-secondary);
+  background-color: var(--color-bg-container-tertiary);
+  border-radius: var(--radius-full);
+  padding: var(--padding-xxxs) var(--padding-sm);
+  min-width: 0;
+  flex-shrink: 1;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__btn-badge {
   opacity: 1;
 }
 
 .ds-app-sidebar__btn-chevron {
   font-size: 24px;
   color: var(--color-icon-secondary);
-  flex-shrink: 0;
-  width: 0;
+  min-width: 0;
+  flex-shrink: 1;
   overflow: hidden;
   transition: transform var(--motion-duration-slow) var(--motion-ease-standard), opacity var(--motion-duration-base) var(--motion-ease-standard);
   opacity: 0;
 }
 
 .ds-app-sidebar--expanded .ds-app-sidebar__btn-chevron {
-  width: auto;
   opacity: 1;
 }
 
@@ -323,31 +358,60 @@
   white-space: nowrap;
 }
 
+/* ============================================
+   CONSUMER SLOTS + BOTTOM WRAPPER
+   Slots keep their height in both states so the
+   rail's layout never snaps; collapsed they fade
+   out and stop taking clicks.
+   ============================================ */
+.ds-app-sidebar__bottom {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.ds-app-sidebar__top-slot,
+.ds-app-sidebar__footer-slot {
+  padding: 0 var(--padding-md);
+  min-width: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__top-slot,
+.ds-app-sidebar--expanded .ds-app-sidebar__footer-slot {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 /* ============================================
    PROFILE
    ============================================ */
 .ds-app-sidebar__profile {
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 0;
+  justify-content: space-between;
+  min-width: 0;
+  /* Centres the 40px avatar in the collapsed 64px rail; glides to the
+     expanded inset below. */
+  padding: 0 var(--padding-sm-md);
   flex-shrink: 0;
+  transition: padding var(--motion-duration-slow) var(--motion-ease-emphasized);
 }
 
 .ds-app-sidebar--expanded .ds-app-sidebar__profile {
-  justify-content: space-between;
   padding: 0 var(--padding-lg);
 }
 
 .ds-app-sidebar__profile-left {
   display: flex;
   align-items: center;
-  gap: 0;
-  min-width: 0;
-}
-
-.ds-app-sidebar--expanded .ds-app-sidebar__profile-left {
   gap: 10px;
+  min-width: 0;
 }
 
 .ds-app-sidebar__avatar {
@@ -369,14 +433,13 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
-  width: 0;
+  flex-shrink: 1;
   overflow: hidden;
   opacity: 0;
   transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
 }
 
 .ds-app-sidebar--expanded .ds-app-sidebar__profile-info {
-  width: auto;
   opacity: 1;
 }
 
@@ -416,11 +479,12 @@
   width: 0;
   overflow: hidden;
   opacity: 0;
-  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  /* Both widths are explicit (0 and 24px), so the width glides too. */
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), width var(--motion-duration-slow) var(--motion-ease-emphasized);
 }
 
 .ds-app-sidebar--expanded .ds-app-sidebar__profile-more {
-  width: auto;
+  width: 24px;
   opacity: 1;
 }
 
@@ -442,3 +506,12 @@
     padding: var(--padding-lg) 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
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-app-sidebar .material-symbols-rounded {
+  color: inherit;
+}

package/components/AppSidebar/AppSidebar.d.ts

@@ -20,6 +20,8 @@ export interface AppSidebarItem {
     onClick?: () => void;
     /** Renders the item as a real link to this URL instead of a button. Ignored when the item has children, whose row is the accordion toggle */
     href?: string;
+    /** Trailing count pill, e.g. unread items; hidden while the rail is collapsed */
+    badge?: string | number;
     /** Sub-items — turns this into an accordion */
     children?: AppSidebarSubItem[];
 }
@@ -54,6 +56,17 @@ export interface AppSidebarProps {
     onExpandedChange?: (expanded: boolean) => void;
     /** Callback when profile more button clicked */
     onProfileMore?: () => void;
+    /**
+     * Floats the rail off the viewport edges as a glass card: inset with
+     * rounded corners, the translucent glass fill over a backdrop blur, and
+     * the floating shadow. The inset defaults to 20px and is overridable via
+     * the --ds-sidebar-float-inset custom property.
+     */
+    floating?: boolean;
+    /** Rendered under the logo row, above the nav; fades out while collapsed */
+    topSlot?: React.ReactNode;
+    /** Rendered above the profile block; fades out while collapsed */
+    footerSlot?: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
     /** Logo element — defaults to built-in robr0 logo */
@@ -68,4 +81,4 @@ export interface AppSidebarProps {
  * **Expanded** (280 px): labels, category headings, accordion
  * sub-items with tree-line connectors, and a profile section.
  */
-export declare const AppSidebar: ({ sections, profile, activeKey, activeSubKey, defaultExpanded, expanded: controlledExpanded, onExpandedChange, onProfileMore, className, logo, logoText, }: AppSidebarProps) => React.JSX.Element;
+export declare const AppSidebar: ({ sections, profile, activeKey, activeSubKey, defaultExpanded, expanded: controlledExpanded, onExpandedChange, onProfileMore, floating, topSlot, footerSlot, className, logo, logoText, }: AppSidebarProps) => React.JSX.Element;

package/components/AppSidebar/AppSidebar.js

@@ -118,6 +118,9 @@ const AppSidebar = ({
   expanded: controlledExpanded,
   onExpandedChange,
   onProfileMore,
+  floating = false,
+  topSlot,
+  footerSlot,
   className = "",
   logo,
   logoText = "robr0"
@@ -145,6 +148,7 @@ const AppSidebar = ({
   const classes = [
     baseClass,
     isExpanded ? `${baseClass}--expanded` : "",
+    floating ? `${baseClass}--floating` : "",
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("nav", { className: classes, "aria-label": "App navigation", children: [
@@ -181,6 +185,7 @@ const AppSidebar = ({
           }
         )
       ] }),
+      topSlot && /* @__PURE__ */ jsx("div", { className: `${baseClass}__top-slot`, children: topSlot }),
       sections.map((section, si) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__nav`, children: [
         section.category && /* @__PURE__ */ jsx("div", { className: `${baseClass}__category`, children: section.category }),
         section.items.map((item) => {
@@ -197,6 +202,7 @@ const AppSidebar = ({
               /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-icon material-symbols-rounded`, children: item.icon }),
               /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-label`, children: item.label })
             ] }),
+            item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-badge`, children: item.badge }),
             hasChildren && /* @__PURE__ */ jsx(
               "span",
               {
@@ -279,23 +285,26 @@ const AppSidebar = ({
         })
       ] }, si))
     ] }),
-    profile && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__profile`, children: [
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__profile-left`, children: [
-        /* @__PURE__ */ jsx("div", { className: `${baseClass}__avatar`, children: profile.avatarUrl && /* @__PURE__ */ jsx("img", { src: profile.avatarUrl, alt: profile.name }) }),
-        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__profile-info`, children: [
-          /* @__PURE__ */ jsx("span", { className: `${baseClass}__profile-name`, children: profile.name }),
-          /* @__PURE__ */ jsx("span", { className: `${baseClass}__profile-email`, children: profile.email })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: `${baseClass}__profile-more`,
-          onClick: onProfileMore,
-          "aria-label": "Profile options",
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: "more_horiz" })
-        }
-      )
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__bottom`, children: [
+      footerSlot && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer-slot`, children: footerSlot }),
+      profile && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__profile`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__profile-left`, children: [
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__avatar`, children: profile.avatarUrl && /* @__PURE__ */ jsx("img", { src: profile.avatarUrl, alt: profile.name }) }),
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__profile-info`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__profile-name`, children: profile.name }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__profile-email`, children: profile.email })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `${baseClass}__profile-more`,
+            onClick: onProfileMore,
+            "aria-label": "Profile options",
+            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: "more_horiz" })
+          }
+        )
+      ] })
     ] })
   ] });
 };