@robr0/design-system 0.11.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 -->105<!-- /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 · Card stack · 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 · Globe · Input · Instructions · Interrupt card · Kbd · Line chart · Link list · Map callout · Map legend · 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
@@ -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.

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/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;
 }
 

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" })
+          }
+        )
+      ] })
     ] })
   ] });
 };

package/components/Badge/Badge.css

@@ -12,6 +12,10 @@
   line-height: var(--font-paragraph-sm-em-line-height);
   letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
   padding: var(--padding-xxxs) var(--padding-sm); /* Figma: 2px 8px */
+  /* Badges are borderless by decision (2026-08-26): the tinted fill
+     carries the status on its own, and the old per-variant borders sat
+     below 3:1 against their fills. The transparent border keeps the
+     geometry so the box does not shift against bordered neighbours. */
   border: var(--border-xs) solid transparent;
   border-radius: var(--radius-xs); /* Figma: 4px */
   white-space: nowrap;
@@ -23,7 +27,6 @@
 
 .ds-badge--info {
   background-color: var(--color-status-info-bg);
-  border-color: var(--color-status-info-border);
   color: var(--color-status-info-text);
 }
 
@@ -33,7 +36,6 @@
 
 .ds-badge--positive {
   background-color: var(--color-status-positive-bg);
-  border-color: var(--color-status-positive-border);
   color: var(--color-status-positive-text);
 }
 
@@ -43,7 +45,6 @@
 
 .ds-badge--warning {
   background-color: var(--color-status-warning-bg);
-  border-color: var(--color-status-warning-border);
   color: var(--color-status-warning-text);
 }
 
@@ -53,7 +54,6 @@
 
 .ds-badge--error {
   background-color: var(--color-status-error-bg);
-  border-color: var(--color-status-error-border);
   color: var(--color-status-error-text);
 }
 
@@ -63,6 +63,5 @@
 
 .ds-badge--neutral {
   background-color: var(--color-status-neutral-bg);
-  border-color: var(--color-status-neutral-border);
   color: var(--color-status-neutral-text);
 }

package/components/Chart/AreaChart.d.ts

@@ -26,6 +26,10 @@ export interface AreaChartProps {
     summaryItems?: ChartSummaryItem[];
     /** Chart area height in pixels */
     height?: number;
+    /** Show the legend under a multi-series chart */
+    showLegend?: boolean;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Additional CSS classes on the wrapper */
     className?: string;
 }
@@ -33,4 +37,4 @@ export interface AreaChartProps {
  * Area chart built on Recharts with design-system tokens.
  * Supports multiple stacked or overlapping series with gradient fills.
  */
-export declare const AreaChart: ({ data, xKey, series, stacked, title, subtitle, summaryItems, height, className, }: AreaChartProps) => import("react").JSX.Element;
+export declare const AreaChart: ({ data, xKey, series, stacked, title, subtitle, summaryItems, height, showLegend, bare, className, }: AreaChartProps) => import("react").JSX.Element;

package/components/Chart/AreaChart.js

@@ -4,8 +4,7 @@ import { ResponsiveContainer, AreaChart as AreaChart$1, CartesianGrid, XAxis, YA
 import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
-  if (typeof window === "undefined") return fallback;
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  return `var(${name}, ${fallback})`;
 }
 function AreaTooltip({ active, payload, label }) {
   if (!active || !payload?.length) return null;
@@ -27,10 +26,12 @@ const AreaChart = ({
   subtitle,
   summaryItems,
   height = 350,
+  showLegend = true,
+  bare = false,
   className = ""
 }) => {
   const baseClass = "ds-chart";
-  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
   const seriesColors = getChartSeriesColors();
@@ -91,7 +92,7 @@ const AreaChart = ({
         },
         s.dataKey
       )),
-      series.length > 1 && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { color: textSecondary, fontSize: 12 } })
+      showLegend && series.length > 1 && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { color: textSecondary, fontSize: 12 } })
     ] }) }) })
   ] });
 };

package/components/Chart/BarChart.d.ts

@@ -23,6 +23,8 @@ export interface BarChartProps {
     barColor?: string;
     /** Chart area height in pixels */
     height?: number;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Additional CSS classes on the wrapper */
     className?: string;
 }
@@ -31,4 +33,4 @@ export interface BarChartProps {
  * Part of the Chart component family — shares wrapper, header,
  * tooltip, and summary-stat styles with future chart types.
  */
-export declare const BarChart: ({ data, xKey, yKey, dataLabel, title, subtitle, summaryItems, barColor, height, className, }: BarChartProps) => import("react").JSX.Element;
+export declare const BarChart: ({ data, xKey, yKey, dataLabel, title, subtitle, summaryItems, barColor, height, bare, className, }: BarChartProps) => import("react").JSX.Element;

package/components/Chart/BarChart.js

@@ -3,8 +3,7 @@ import { useCallback } from "react";
 import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar } from "recharts";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
-  if (typeof window === "undefined") return fallback;
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  return `var(${name}, ${fallback})`;
 }
 function ChartTooltip({
   active,
@@ -33,10 +32,11 @@ const BarChart = ({
   summaryItems,
   barColor,
   height = 350,
+  bare = false,
   className = ""
 }) => {
   const baseClass = "ds-chart";
-  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#0E6E8F");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");