@siyahi/ui 0.1.9-next.27 → 0.1.9-next.29

package/DESIGN.md

@@ -28,10 +28,12 @@ a meaning:
   with a left (or any single-side) coloured border; tint the box or add an
   icon. 1px neutral dividers between columns are separators, not accents, and
   are fine.
-- **Edges that matter reach 3:1; the rest stay faint.** A field's edge (input,
+- **Edges that matter reach 3:1; the rest are hairlines.** A field's edge (input,
   textarea, select, input group, the command search) is `--input`, at 3:1 on the
   canvas and the card; dividers, card rings, gridlines and the outlines of
-  buttons, toggles and code blocks are the faint `--border`. Focus is an opaque
+  buttons, toggles and code blocks are the `--border` hairline (the text colour
+  at 18% in light, white at 20% in dark), firm enough to carry the page's
+  structure. Focus is an opaque
   `--ring`, or the opaque destructive red on a destructive control. A selected
   toggle or pill tab fills with the foreground. A chart bar that a selection
   dims keeps its full-colour outline and fades only inside.
@@ -41,3 +43,59 @@ a meaning:
 - Categories (a team, a region, a product line) stay neutral: outline badges,
   never a hue each. Ordered buckets (largest 5, next 5, rest) use steps of one
   colour, not separate hues.
+- **Colour marks exceptions.** The one stat tile or table row that needs a look
+  is marked by the page: `tone: "negative"` or `"warning"` on a `SectionCards`
+  item, `data-tone="negative"` or `"warning"` on a `TableRow`. It takes a faint
+  wash of the colour over the card (7% in light, 12% in dark), and a tile an
+  outline of it. The page decides, never the sign: a falling cost is good news.
+  Mark one or two; a page where every row is washed marks nothing.
+
+## Surfaces
+
+`SiyahiProvider`'s `surface` sets how a data block sits on the page. The page
+and card colours are fixed: never tint the canvas.
+
+- **`ruled`** (the default, with or without a provider): ruled on white. The
+  blocks of a `PanelGrid`, the tiles of a `SectionCards` row and the figures
+  of a `MetricStrip` are filled with the card colour and parted by hairlines,
+  with a rule above and below the group and none on its left and right edges.
+  A card standing alone (a `MetricStrip`, a table's card) takes the same rules
+  above and below itself. A short last row ends in a blank cell, ruled off
+  like the rest. A stat tile keeps its footer's top rule and faint band. Set
+  nothing to get it.
+- **`card`**: tight square cards, for a page of separate blocks, such as an
+  index of links. Each block is filled with the card colour inside a hairline
+  ring, with no shadow, 8px from the next in a `PanelGrid` or a row of
+  `SectionCards`. Ask for it with `surface="card"`.
+- **`open`**: no fill, no lines and no padding, so a block sits level with the
+  page's text, for pages read top to bottom.
+
+Every `PanelGrid` numbers its blocks 01, 02 before their card title, in the
+mono face and the link colour, so the text can point to one.
+
+## Shape
+
+- **Square corners everywhere**: panels, cards, buttons, fields, badges,
+  toggles, menus, and bars and tracks (data bars, progress) alike (`--radius`
+  is 0). Only a dot, an avatar, a slider, a spinner or a scrollbar is round;
+  the stock chart tooltip's colour chips keep shadcn's 2px. Never add a
+  `rounded-*` class to a box.
+- **Joined toggles.** The items of a `ToggleGroup` sit flush and share their
+  borders, one control; the pressed item fills with the foreground.
+- Badges stay boxed (an outline), the primary button and the pressed toggle
+  black (white in dark), titles in the sans face, at normal spacing.
+
+## Page header
+
+An app page opens on its masthead, `PageHero`: a small mark and eyebrow in the
+mono face and link colour, the title, one muted line saying what the page is,
+the actions at the right, and a hairline under it. One per page; no hero card.
+
+## Labels and totals
+
+- **Labels over figures are small monospaced capitals**: a stat tile's label
+  and footer lines, a `MetricStrip` label, a table's column heads. The
+  components and the theme set them; never set a label in this style by hand
+  elsewhere, and never set a figure or a title in it.
+- **A total row reads as a ledger's**: in `TableFooter`, one rule above it and
+  a double rule under it in the text colour, no band.

package/README.md

@@ -100,12 +100,23 @@ and support one keyboard entry with arrow navigation. `WeekdayHeatmap` accepts
 
 `SiyahiProvider` sets how data blocks sit on the page:
 
-- `surface="card"` (default, even outside a provider): each block is a card
-  lifted off a faintly tinted canvas.
-- `surface="ruled"`: unboxed blocks; `PanelGrid` draws hairlines between them.
-- `surface="open"`: no boxes or rules; card padding is removed.
-
-Nest a provider to change one section. Stack `PageSection` blocks with
+- `surface="ruled"` (default, even outside a provider): ruled on white.
+  `PanelGrid`, `SectionCards` and `MetricStrip` fill their blocks with the card
+  colour and part them with hairlines, with a rule above and below each group
+  and none on the sides; a card standing alone takes the rules above and below
+  itself.
+- `surface="card"`: tight square cards, each filled inside a hairline, 8px
+  apart, no shadow, for a page of separate blocks.
+- `surface="open"`: no fill, boxes or rules; card padding is removed.
+
+`DESIGN.md` has the rest of the look: square corners, mono capital labels,
+ledger totals, the masthead and exception tones.
+
+Nest a provider to change one section. A dialog, sheet or popover renders
+outside the page's provider element: `PanelGrid` and `SectionCards` carry
+their surface into it, but a lone `Card` there is ruled unless the popup's
+content sits in its own provider with an explicit surface, such as
+`<SiyahiProvider surface="card">`; a provider without one draws no element. Stack `PageSection` blocks with
 `flex flex-col gap-6`; use `PanelGrid` for blocks side by side. Categories use
 neutral outline badges, leaving colour for meaning and chart series.
 

package/agents/examples/overview-dashboard.tsx

@@ -1,18 +1,180 @@
+import {
+  Badge,
+  Button,
+  Callout,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Delta,
+  Input,
+  PageHero,
+  PanelGrid,
+  StatusBadge,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  ToggleGroup,
+  ToggleGroupItem,
+  useFormat,
+} from "@siyahi/ui";
+import { DownloadIcon, LightbulbIcon, PlusIcon } from "lucide-react";
+import { useState } from "react";
 import ChartArea from "./chart-area";
-import DataTableExample from "./data-table";
-import MetricStrip from "./metric-strip";
+import SectionCardsTrend from "./section-cards-trend";
 
-// What a page built with Siyahi looks like: a metric strip, a chart card and a data table, each the catalogue's own example.
+interface Holding {
+  name: string;
+  kind: string;
+  status: string;
+  tone: "positive" | "warning" | "negative";
+  value: number;
+  change: number;
+}
+
+const holdings: Holding[] = [
+  { name: "Nifty 50 index fund", kind: "Equity", status: "On track", tone: "positive", value: 1840000, change: 0.124 },
+  { name: "Flexi cap fund", kind: "Equity", status: "On track", tone: "positive", value: 962000, change: 0.087 },
+  { name: "Gold bonds, 2031", kind: "Gold", status: "Review", tone: "warning", value: 410500, change: 0.211 },
+  { name: "Short-term debt fund", kind: "Debt", status: "On track", tone: "positive", value: 655000, change: 0.031 },
+  { name: "Small cap fund", kind: "Equity", status: "Below plan", tone: "negative", value: 318200, change: -0.064 },
+];
+
+// The catalogue's own ink drop, painted with currentColor so the masthead tints it.
+function InkDrop() {
+  return (
+    <svg viewBox="0 0 16 16">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M8 .5C8 .5 2.5 6.3 2.5 10a5.5 5.5 0 0 0 11 0C13.5 6.3 8 .5 8 .5ZM4.75 10A3.25 3.25 0 0 0 8 13.25v-1.5A1.75 1.75 0 0 1 6.25 10Z"
+      />
+    </svg>
+  );
+}
+
+function Holdings({ rows }: { rows: Holding[] }) {
+  const { money, pct } = useFormat();
+  const total = rows.reduce((sum, row) => sum + row.value, 0);
+  // The change of the whole: today's total against what the same holdings were worth a year ago.
+  const yearAgo = rows.reduce((sum, row) => sum + row.value / (1 + row.change), 0);
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Holdings</CardTitle>
+        <CardDescription>Value today and change over twelve months</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Holding</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Value</TableHead>
+              <TableHead className="text-right">12 months</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={4}>
+                  <span className="text-muted-foreground">No holding matches the search.</span>
+                </TableCell>
+              </TableRow>
+            )}
+            {rows.map((row) => (
+              // Only the holdings that need a look are marked; a row on track stays plain.
+              <TableRow key={row.name} data-tone={row.tone === "positive" ? undefined : row.tone}>
+                <TableCell>
+                  <span className="flex flex-wrap items-center gap-2">
+                    {row.name}
+                    <Badge variant="outline">{row.kind}</Badge>
+                  </span>
+                </TableCell>
+                <TableCell>
+                  <StatusBadge tone={row.tone}>{row.status}</StatusBadge>
+                </TableCell>
+                <TableCell className="text-right">{money(row.value)}</TableCell>
+                <TableCell className="text-right">
+                  <Delta value={row.change} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={2}>Total</TableCell>
+              <TableCell className="text-right">{money(total)}</TableCell>
+              <TableCell className="text-right">{yearAgo > 0 && pct(total / yearAgo - 1)}</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}
+
+// An app page on the default, ruled surface: masthead, controls, stat tiles, a chart and a table in a PanelGrid, and
+// the takeaway. It sets no surface: ruled on white is what a page gets.
 export default function OverviewDashboard() {
+  const [query, setQuery] = useState("");
+  const shown = holdings.filter((row) => row.name.toLowerCase().includes(query.trim().toLowerCase()));
   return (
-    <div className="flex flex-col gap-4">
-      <MetricStrip />
-      {/* Side by side only where the table's five columns fit beside the chart; at 1440 they would be cut off.
-          Each card keeps its own height: stretched to the taller one, the chart card ends in blank space. */}
-      <div className="grid items-start gap-4 2xl:grid-cols-2">
-        <ChartArea />
-        <DataTableExample />
+    <div className="flex flex-col gap-6">
+      <PageHero
+        mark={<InkDrop />}
+        eyebrow="The Book"
+        title="Holdings"
+        lead="What you own, what it is worth today, and how each part has moved."
+        detail="Prices as of the last market close."
+        actions={
+          <>
+            <Button>
+              <PlusIcon />
+              Add a holding
+            </Button>
+            <Button variant="outline">
+              <DownloadIcon />
+              Export
+            </Button>
+          </>
+        }
+      />
+      <div className="flex flex-wrap items-center gap-3">
+        <ToggleGroup defaultValue={["1y"]} variant="outline" aria-label="Period">
+          <ToggleGroupItem value="1m">1 month</ToggleGroupItem>
+          <ToggleGroupItem value="1y">1 year</ToggleGroupItem>
+          <ToggleGroupItem value="all">All</ToggleGroupItem>
+        </ToggleGroup>
+        <Input
+          className="w-56"
+          type="search"
+          placeholder="Search holdings"
+          aria-label="Search holdings"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+        />
+        <p className="text-sm text-muted-foreground">
+          Five holdings in three kinds.{" "}
+          <a className="text-link underline underline-offset-4" href="#/data">
+            How value is worked out
+          </a>
+        </p>
       </div>
+      <SectionCardsTrend />
+      <PanelGrid>
+        <ChartArea />
+        <Holdings rows={shown} />
+      </PanelGrid>
+      <Callout tone="accent" icon={<LightbulbIcon />} title="The takeaway">
+        Equity is <strong>74%</strong> of the book against a plan of 65%. The small cap fund is the only holding below
+        plan.
+      </Callout>
     </div>
   );
 }

package/agents/examples/section-cards-select.tsx

@@ -1,4 +1,4 @@
-import { Delta, SectionCards, SiyahiProvider, useFormat, type SectionCard } from "@siyahi/ui";
+import { Delta, SectionCards, useFormat, type SectionCard } from "@siyahi/ui";
 import { useState } from "react";
 
 // Each sales channel's profit this quarter and its orders; made-up figures.
@@ -20,12 +20,9 @@ export default function SectionCardsSelectExample() {
     disabled: c.orders === 0,
   }));
   return (
-    // On a ruled surface the tiles part with hairlines, as on a dense operations screen, instead of sitting as cards.
-    <SiyahiProvider surface="ruled">
-      <div className="flex flex-col gap-3">
-        <SectionCards items={items} selected={scope} onSelect={setScope} />
-        <p className="text-sm text-muted-foreground">Showing {scope}</p>
-      </div>
-    </SiyahiProvider>
+    <div className="flex flex-col gap-3">
+      <SectionCards items={items} selected={scope} onSelect={setScope} />
+      <p className="text-sm text-muted-foreground">Showing {scope}</p>
+    </div>
   );
 }

package/agents/examples/section-cards-trend.tsx

@@ -17,6 +17,8 @@ export default function SectionCardsTrendExample() {
       // A run of losses: the meaning colour, not a chart slot.
       trend: <Sparkline data={[0, -8200, -14100, -30400, -52800, -61200]} color="var(--negative)" />,
       detail: "Running total since April",
+      // The one figure on the page that needs a look, marked by the page: a falling cost would not be.
+      tone: "negative",
     },
     {
       label: "Gift cards this year",

package/agents/examples/surfaces.tsx

@@ -89,7 +89,7 @@ function Dashboard() {
 }
 
 export default function SurfacesExample() {
-  const [surface, setSurface] = useState<Surface>("card");
+  const [surface, setSurface] = useState<Surface>("ruled");
   return (
     <div className="flex flex-col gap-4">
       <ToggleGroup
@@ -103,8 +103,8 @@ export default function SurfacesExample() {
         aria-label="Surface"
       >
         {/* The default first. */}
-        <ToggleGroupItem value="card">Card</ToggleGroupItem>
         <ToggleGroupItem value="ruled">Ruled</ToggleGroupItem>
+        <ToggleGroupItem value="card">Card</ToggleGroupItem>
         <ToggleGroupItem value="open">Open</ToggleGroupItem>
       </ToggleGroup>
       {/* A nested provider sets the surface for its part of the page. */}

package/agents/examples/table.tsx

@@ -6,6 +6,7 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableFooter,
   TableHead,
   TableHeader,
   TableRow,
@@ -20,6 +21,7 @@ const rows = [
 
 export default function TableExample() {
   const { money } = useFormat();
+  const total = (key: "in" | "out") => rows.reduce((sum, row) => sum + row[key], 0);
   return (
     <Card>
       <CardHeader>
@@ -36,13 +38,21 @@ export default function TableExample() {
           </TableHeader>
           <TableBody>
             {rows.map((row) => (
-              <TableRow key={row.month}>
+              // August's spending needs a look: the page marks the row, and the theme washes it amber.
+              <TableRow key={row.month} data-tone={row.out > 50000 ? "warning" : undefined}>
                 <TableCell>{row.month}</TableCell>
                 <TableCell className="text-right">{money(row.in)}</TableCell>
                 <TableCell className="text-right">{money(row.out)}</TableCell>
               </TableRow>
             ))}
           </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell>Total</TableCell>
+              <TableCell className="text-right">{money(total("in"))}</TableCell>
+              <TableCell className="text-right">{money(total("out"))}</TableCell>
+            </TableRow>
+          </TableFooter>
         </Table>
       </CardContent>
     </Card>

package/agents/manifest.json

@@ -289,7 +289,7 @@
       ]
     },
     {
-      "need": "Boxes back, or no lines at all, for a page or a part of one",
+      "need": "Separate square cards instead of the default ruled panels, or no lines at all, for a page or a part of one",
       "guidance": "`SiyahiProvider` with `surface=\"card\"` or `surface=\"open\"`",
       "components": [
         "SiyahiProvider"
@@ -936,7 +936,31 @@
     },
     {
       "file": "agents/examples/overview-dashboard.tsx",
-      "components": []
+      "components": [
+        "Badge",
+        "Button",
+        "Callout",
+        "Card",
+        "CardContent",
+        "CardDescription",
+        "CardHeader",
+        "CardTitle",
+        "Delta",
+        "Input",
+        "PageHero",
+        "PanelGrid",
+        "StatusBadge",
+        "Table",
+        "TableBody",
+        "TableCell",
+        "TableFooter",
+        "TableHead",
+        "TableHeader",
+        "TableRow",
+        "ToggleGroup",
+        "ToggleGroupItem",
+        "useFormat"
+      ]
     },
     {
       "file": "agents/examples/page-hero.tsx",
@@ -1066,7 +1090,6 @@
       "components": [
         "Delta",
         "SectionCards",
-        "SiyahiProvider",
         "useFormat"
       ]
     },
@@ -1183,6 +1206,7 @@
         "Table",
         "TableBody",
         "TableCell",
+        "TableFooter",
         "TableHead",
         "TableHeader",
         "TableRow",

package/dist/components/registry/dashboard-01/section-cards.d.ts

@@ -14,6 +14,8 @@ export interface SectionCard {
   detail?: React$1.ReactNode;
   /** In a picker, a tile that cannot be picked, such as one with nothing in it: faded, and its button disabled. */
   disabled?: boolean;
+  /** Marks the tile as the exception on the page: a faint wash of the colour and an outline of it. */
+  tone?: "negative" | "warning";
 }
 export interface SectionCardsProps {
   items: SectionCard[];

package/dist/components/registry/dashboard-01/section-cards.js

@@ -14,15 +14,18 @@ const COLUMNS = {
 	6: "@3xl/main:grid-cols-3"
 };
 function SectionCards({ items, selected, onSelect }) {
-	const ruled = useSurface() === "ruled";
+	const surface = useSurface();
+	const ruled = surface === "ruled";
 	return /* @__PURE__ */ jsx("div", {
+		"data-surface": surface,
 		className: cn("@container/main", ruled && "overflow-hidden border-y"),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("grid grid-cols-1", ruled ? "-mt-px -ml-px" : "gap-4", COLUMNS[items.length] ?? COLUMNS[4]),
+			className: cn("grid grid-cols-1", ruled ? "-me-px -mb-px bg-card" : surface === "open" ? "gap-4" : "gap-2", COLUMNS[items.length] ?? COLUMNS[4]),
 			children: items.map((item) => /* @__PURE__ */ jsx("div", {
 				"data-slot": "section-card",
-				className: cn("min-w-0", ruled && "border-t border-l"),
+				className: cn("min-w-0", ruled && "border-e border-b"),
 				children: /* @__PURE__ */ jsxs(Card, {
+					"data-tone": item.tone,
 					className: cn("@container/card h-full [--card-spacing:--spacing(3)]", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", item.label === selected && ruled && "ring-inset", onSelect && item.disabled && "opacity-60"),
 					children: [
 						onSelect && /* @__PURE__ */ jsx("button", {
@@ -34,7 +37,10 @@ function SectionCards({ items, selected, onSelect }) {
 							className: "absolute inset-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring focus-visible:ring-inset"
 						}),
 						/* @__PURE__ */ jsxs(CardHeader, { children: [
-							/* @__PURE__ */ jsx(CardDescription, { children: item.label }),
+							/* @__PURE__ */ jsx(CardDescription, {
+								className: "font-mono text-2xs tracking-wider uppercase",
+								children: item.label
+							}),
 							/* @__PURE__ */ jsx(CardTitle, {
 								className: "text-2xl font-semibold tabular-nums",
 								children: item.value
@@ -46,7 +52,7 @@ function SectionCards({ items, selected, onSelect }) {
 						] }),
 						item.trend && /* @__PURE__ */ jsx(CardContent, { children: item.trend }),
 						(item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
-							className: "flex-col items-start gap-1 text-sm",
+							className: "flex-col items-start gap-1 font-mono text-2xs tracking-wider uppercase",
 							children: [item.headline && /* @__PURE__ */ jsx("div", {
 								className: "flex flex-wrap gap-2 font-medium",
 								children: item.headline

package/dist/components/registry/dashboardcn/distribution-bar.js

@@ -62,7 +62,7 @@ function DistributionBar({ segments, valueFormatter, showLegend = true, showValu
 				/* @__PURE__ */ jsx("div", {
 					role: "img",
 					"aria-label": ariaLabel ?? resolved.map((segment) => `${segment.name} ${figure(segment)}`).join(", "),
-					className: "bg-muted relative h-2.5 w-full overflow-hidden rounded-full",
+					className: "bg-muted relative h-2.5 w-full overflow-hidden",
 					onMouseLeave: onHover ? () => onHover(null) : void 0,
 					children: resolved.map((segment) => segment.width > 0 ? /* @__PURE__ */ jsx("div", {
 						"data-slot": "distribution-segment",

package/dist/components/registry/dashboardcn/kpi-row-card.js

@@ -36,12 +36,12 @@ function MetricStrip({ title, description, action, items, footer, className, ...
 				"data-slot": "metric-strip",
 				className: "@container/strip -mx-4 -my-3 overflow-hidden",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "-mt-px -ml-px flex flex-wrap",
+					className: "-me-px -mb-px flex flex-wrap",
 					children: items.map((item) => /* @__PURE__ */ jsxs("div", {
 						"data-slot": "metric-strip-item",
-						className: cn("flex min-w-0 flex-col gap-1.5 border-t border-l px-4 py-4", columns),
+						className: cn("flex min-w-0 flex-col gap-1.5 border-e border-b px-4 py-4", columns),
 						children: [/* @__PURE__ */ jsx("div", {
-							className: "truncate text-xs text-muted-foreground",
+							className: "truncate font-mono text-2xs tracking-wider text-muted-foreground uppercase",
 							children: item.label
 						}), /* @__PURE__ */ jsxs("div", {
 							className: "flex flex-wrap items-end justify-between gap-x-3 gap-y-1",

package/dist/components/siyahi/change-bar.js

@@ -19,10 +19,10 @@ function ChangeBar({ value, max, diverging = false, format, className }) {
 			className: "font-medium"
 		}), /* @__PURE__ */ jsxs("div", {
 			"aria-hidden": "true",
-			className: "relative h-0.75 w-full rounded-full bg-muted",
+			className: "relative h-0.75 w-full bg-muted",
 			children: [/* @__PURE__ */ jsx("div", {
 				"data-slot": "change-bar-fill",
-				className: "absolute inset-y-0 rounded-full bg-foreground",
+				className: "absolute inset-y-0 bg-foreground",
 				style: {
 					[side]: diverging ? "50%" : 0,
 					width: `${share * half}%`

package/dist/components/siyahi/data-bar.js

@@ -14,9 +14,9 @@ function DataBar({ value, max, tone = "chart", children, className }) {
 		className: cn("flex items-center gap-2", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
-			className: "h-1.5 w-16 shrink-0 overflow-hidden rounded-full bg-muted",
+			className: "h-1.5 w-16 shrink-0 overflow-hidden bg-muted",
 			children: /* @__PURE__ */ jsx("div", {
-				className: cn("h-full rounded-full", fill),
+				className: cn("h-full", fill),
 				style: { width: `${share * 100}%` }
 			})
 		}), /* @__PURE__ */ jsx("span", {

package/dist/components/siyahi/page-hero.d.ts

@@ -1,25 +1,23 @@
 import { ReactNode } from "react";
 //#region src/components/siyahi/page-hero.d.ts
 export interface PageHeroProps {
-  /** A short line above the title in the link colour, such as a package or a section name. */
+  /** A short line above the title in the mono face and the link colour, such as the app or a section name. */
   eyebrow?: ReactNode;
-  /** The page's h1, set large. */
+  /** The page's h1. */
   title: ReactNode;
-  /** What the page is, in a sentence or two, in the body colour. */
+  /** What the page is, in a sentence, in the muted colour. */
   lead?: ReactNode;
-  /** Muted detail under the lead: scope, sources, what is left out. */
+  /** Scope, sources or what is left out, run on after the lead in the same muted line. */
   detail?: ReactNode;
-  /** The one or two places a reader goes next, usually a primary Button and an outline one. */
+  /** The one or two places a reader goes next, usually a primary Button and an outline one, at the right. */
   actions?: ReactNode;
-  /**
-   * A large decorative mark drawn faintly in the accent behind the top right, such as the product's logo as an
-   * SVG that paints with currentColor. It is hidden from assistive technology.
-   */
+  /** A small mark before the eyebrow, such as the product's logo as an SVG that paints with currentColor. */
   mark?: ReactNode;
 }
 /**
- * The introduction at the top of a front page or a long explainer: a large title, what the page is, and where to
- * go next, on a card with an optional watermark. One per page, above everything else; a section uses PageSection.
+ * The masthead at the top of a page: a small mark and eyebrow, the title, one muted line saying what the page is,
+ * the actions at the right, and a hairline under it all. One per page, above everything else; a section uses
+ * PageSection.
  */
 export declare function PageHero({ eyebrow, title, lead, detail, actions, mark }: PageHeroProps): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/page-hero.js

@@ -1,40 +1,42 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/siyahi/page-hero.tsx
 /**
-* The introduction at the top of a front page or a long explainer: a large title, what the page is, and where to
-* go next, on a card with an optional watermark. One per page, above everything else; a section uses PageSection.
+* The masthead at the top of a page: a small mark and eyebrow, the title, one muted line saying what the page is,
+* the actions at the right, and a hairline under it all. One per page, above everything else; a section uses
+* PageSection.
 */
 function PageHero({ eyebrow, title, lead, detail, actions, mark }) {
 	return /* @__PURE__ */ jsxs("header", {
 		"data-slot": "page-hero",
-		className: "relative isolate flex flex-col gap-4 overflow-hidden rounded-2xl border bg-card px-6 py-8 sm:px-10 sm:py-10",
-		children: [
-			mark && /* @__PURE__ */ jsx("div", {
-				"aria-hidden": true,
-				className: "pointer-events-none absolute -top-8 -right-10 -z-10 size-80 text-chart-1 opacity-10 sm:-top-12 sm:right-4 [&>svg]:size-full",
-				children: mark
-			}),
-			eyebrow && /* @__PURE__ */ jsx("p", {
-				className: "font-mono text-xs text-link",
-				children: eyebrow
-			}),
-			/* @__PURE__ */ jsx("h1", {
-				className: "text-5xl font-semibold tracking-tighter text-balance sm:text-6xl",
-				children: title
-			}),
-			lead && /* @__PURE__ */ jsx("div", {
-				className: "max-w-xl text-lg text-pretty",
-				children: lead
-			}),
-			detail && /* @__PURE__ */ jsx("div", {
-				className: "max-w-xl text-pretty text-muted-foreground",
-				children: detail
-			}),
-			actions && /* @__PURE__ */ jsx("div", {
-				className: "mt-2 flex flex-wrap gap-2",
-				children: actions
-			})
-		]
+		className: "flex flex-wrap items-end justify-between gap-x-6 gap-y-3 border-b pb-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1",
+			children: [
+				(mark || eyebrow) && /* @__PURE__ */ jsxs("p", {
+					className: "flex items-center gap-1.5 font-mono text-xs text-link",
+					children: [mark && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "size-3.5 shrink-0 [&>svg]:size-full",
+						children: mark
+					}), eyebrow]
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					className: "text-3xl font-semibold tracking-tight text-balance",
+					children: title
+				}),
+				(lead || detail) && /* @__PURE__ */ jsxs("div", {
+					className: "text-sm text-pretty text-muted-foreground",
+					children: [
+						lead,
+						lead && detail && " ",
+						detail
+					]
+				})
+			]
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-2",
+			children: actions
+		})]
 	});
 }
 //#endregion

package/dist/components/siyahi/panel-grid.d.ts

@@ -13,9 +13,11 @@ export interface PanelGridProps {
   className?: string;
 }
 /**
- * Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface a hairline parts them across and
- * down, with a rule above and below the grid; open leaves whitespace between them, and card a gap between boxes.
- * Each block's left and top edges carry its rules, and the grid clips the ones on its own edges.
+ * Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface, the default, the grid is filled
+ * with the card colour and a hairline parts the blocks across and down, with a rule above and below the grid and none
+ * on its sides; open leaves whitespace between them, and card an 8px gap between boxes. Each block's bottom and end
+ * edges carry its rules and the grid clips the ones on its own edges, so an empty cell at the end of a short last row
+ * is a blank stretch of the sheet, ruled off like the rest. The theme numbers each block's card title 01, 02.
  */
 export declare function PanelGrid({ columns, children, className }: PanelGridProps): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/panel-grid.js

@@ -10,21 +10,24 @@ const COLUMNS = {
 	4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4"
 };
 /**
-* Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface a hairline parts them across and
-* down, with a rule above and below the grid; open leaves whitespace between them, and card a gap between boxes.
-* Each block's left and top edges carry its rules, and the grid clips the ones on its own edges.
+* Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface, the default, the grid is filled
+* with the card colour and a hairline parts the blocks across and down, with a rule above and below the grid and none
+* on its sides; open leaves whitespace between them, and card an 8px gap between boxes. Each block's bottom and end
+* edges carry its rules and the grid clips the ones on its own edges, so an empty cell at the end of a short last row
+* is a blank stretch of the sheet, ruled off like the rest. The theme numbers each block's card title 01, 02.
 */
 function PanelGrid({ columns = 2, children, className }) {
 	const surface = useSurface();
 	const ruled = surface === "ruled";
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "panel-grid",
+		"data-surface": surface,
 		className: cn("@container/panels", ruled && "overflow-clip border-y", className),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("grid grid-cols-1", COLUMNS[columns], ruled ? "-mt-px -ml-px" : surface === "open" ? "gap-x-8 gap-y-6" : "gap-4"),
+			className: cn("grid grid-cols-1", COLUMNS[columns], ruled ? "-me-px -mb-px bg-card" : surface === "open" ? "gap-x-8 gap-y-6" : "gap-2"),
 			children: Children.map(children, (child) => /* @__PURE__ */ jsx("div", {
 				"data-slot": "panel",
-				className: cn("min-w-0", ruled && "border-t border-l"),
+				className: cn("min-w-0", ruled && "border-e border-b"),
 				children: child
 			}))
 		})

package/dist/components/siyahi/range-position.js

@@ -19,10 +19,10 @@ function RangePosition({ low, high, value, lowLabel = "Low", highLabel = "High",
 		"aria-valuemax": high,
 		"aria-valuenow": value,
 		"aria-valuetext": `${write(value)}, ${f.pct(share, 0)} of the way from ${write(low)} to ${write(high)}`,
-		className: "relative h-1.5 min-w-12 flex-1 rounded-full bg-muted",
+		className: "relative h-1.5 min-w-12 flex-1 bg-muted",
 		children: [/* @__PURE__ */ jsx("div", {
 			"data-slot": "range-fill",
-			className: "absolute inset-y-0 left-0 rounded-full bg-foreground",
+			className: "absolute inset-y-0 left-0 bg-foreground",
 			style: { width: at }
 		}), /* @__PURE__ */ jsx("div", {
 			"data-slot": "range-thumb",

package/dist/components/siyahi/siyahi-provider.d.ts

@@ -2,16 +2,18 @@ import { SiyahiLocale } from "../../lib/locale.js";
 import { ReactNode } from "react";
 //#region src/components/siyahi/siyahi-provider.d.ts
 /**
- * How a data block sits on the page. "ruled": no box, hairlines between blocks in a PanelGrid. "open": no box and no
- * lines, the block's content level with the page's text. "card": shadcn's own card, a filled box with a 1px ring.
+ * How a data block sits on the page. "ruled", the default: blocks filled with the card colour and parted by hairlines,
+ * with a rule above and below each group and none on its sides. "card": a filled square card in a hairline ring, 8px
+ * from the next, for a page of separate blocks. "open": no fill and no lines, the block's content level with the
+ * page's text.
  */
-export type Surface = "ruled" | "open" | "card";
+export type Surface = "ruled" | "card" | "open";
 export interface SiyahiProviderProps {
   /** Any setting left out keeps its default: en-IN, INR, Asia/Kolkata. */
   locale?: Partial<SiyahiLocale>;
   /**
    * Set it on a nested provider for one part of a page. Left out, a provider keeps the surface around it, so a
-   * provider that only changes the locale changes nothing else; the outermost default is "card".
+   * provider that only changes the locale changes nothing else; the outermost default is "ruled".
    */
   surface?: Surface;
   children: ReactNode;

package/dist/components/siyahi/siyahi-provider.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, use, useMemo } from "react";
 //#region src/components/siyahi/siyahi-provider.tsx
 const LocaleContext = createContext(defaultLocale);
-const SurfaceContext = createContext("card");
+const SurfaceContext = createContext("ruled");
 /** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
 function SiyahiProvider({ locale, surface, children }) {
 	const { numberLocale, currency, timeZone } = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.27",
+  "version": "0.1.9-next.29",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",
@@ -66,6 +66,7 @@
     "@types/node": "24.19.2",
     "@types/react": "~19.3.0",
     "@types/react-dom": "~19.3.0",
+    "happy-dom": "^21.0.3",
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "shadcn": "4.22.1",

package/report.css

@@ -5,7 +5,7 @@
  */
 :root {
   color-scheme: light dark;
-  --radius: 0.45rem;
+  --radius: 0rem;
   --background: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -21,7 +21,7 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.49 0.19 27.325);
-  --border: oklch(0.922 0 0);
+  --border: oklch(0.145 0 0 / 18%);
   --input: oklch(0.64 0 0);
   --ring: oklch(0.62 0.16 275);
   --positive: oklch(0.527 0.145 150.069);
@@ -35,6 +35,8 @@
   --heat-3: 36%;
   --heat-4: 48%;
   --heat-5: 60%;
+  --wash: 7%;
+  --wash-edge: 45%;
   --link: oklch(0.51 0.2 275);
   --chart-1: oklch(0.4 0.17 275);
   --chart-2: oklch(0.66 0.13 70);
@@ -47,7 +49,7 @@
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.97 0 0);
   --sidebar-accent-foreground: oklch(0.45 0.2 275);
-  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-border: oklch(0.145 0 0 / 18%);
   --sidebar-ring: oklch(0.62 0.16 275);
 }
 
@@ -68,7 +70,7 @@
     --accent: oklch(0.269 0 0);
     --accent-foreground: oklch(0.922 0 0);
     --destructive: oklch(0.8 0.1 22.216);
-    --border: oklch(1 0 0 / 10%);
+    --border: oklch(1 0 0 / 20%);
     --input: oklch(0.62 0 0);
     --ring: oklch(0.6 0.14 275);
     --positive: oklch(0.69 0.16 151.711);
@@ -81,6 +83,8 @@
     --heat-2: 33.75%;
     --heat-3: 42.5%;
     --heat-4: 51.25%;
+    --wash: 12%;
+    --wash-edge: 55%;
     --link: oklch(0.75 0.128 275);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);
@@ -93,7 +97,7 @@
     --sidebar-primary-foreground: oklch(0.205 0 0);
     --sidebar-accent: oklch(0.269 0 0);
     --sidebar-accent-foreground: oklch(0.8 0.1 275);
-    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-border: oklch(1 0 0 / 20%);
     --sidebar-ring: oklch(0.6 0.14 275);
   }
 }

package/styles/siyahi.css

@@ -34,6 +34,12 @@
    * fallback draws and every prose block rewraps when Geist arrives.
    */
   --max-width-prose: 43.1em;
+  /*
+   * 11px, for labels over figures: a stat tile's label and footer lines and a
+   * table's column heads, set as `font-mono text-2xs tracking-wider uppercase`.
+   */
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -72,6 +78,7 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --radius-xs: calc(var(--radius) * 0.3);
   --radius-sm: calc(var(--radius) * 0.6);
   --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
@@ -83,8 +90,8 @@
 
 :root {
   color-scheme: light dark;
-  /* shadcn's "small": crisper than its 0.625rem default, still not square. Cards 10px, buttons 7px. */
-  --radius: 0.45rem;
+  /* Square: panels, buttons, fields, badges and toggles alike. Only a dot, an avatar or a slider thumb stays round. */
+  --radius: 0rem;
   --background: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -102,7 +109,8 @@
   --accent-foreground: oklch(0.205 0 0);
   /* Deeper than the loss red, so a destructive button's label reads on its own red tint, hovered too. */
   --destructive: oklch(0.49 0.19 27.325);
-  --border: oklch(0.922 0 0);
+  /* A step firmer than shadcn's 0.922 grey: with square, filled panels the hairlines carry the page's structure. */
+  --border: oklch(0.145 0 0 / 18%);
   /* The edge of a field (input, textarea, select, input group) at 3:1: --border stays faint for dividers. */
   --input: oklch(0.64 0 0);
   --ring: oklch(0.62 0.16 275);
@@ -123,6 +131,12 @@
   --heat-3: 36%;
   --heat-4: 48%;
   --heat-5: 60%;
+  /*
+   * An exception (a stat tile or a table row the page marks with a tone) takes this share of --negative or
+   * --warning over the card, and a tile an outline of the tone at --wash-edge.
+   */
+  --wash: 7%;
+  --wash-edge: 45%;
   --link: oklch(0.51 0.2 275);
   /*
    * Indigo, amber, plum, sky, teal: no green or red, so no series reads as a
@@ -145,7 +159,7 @@
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.97 0 0);
   --sidebar-accent-foreground: oklch(0.45 0.2 275);
-  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-border: oklch(0.145 0 0 / 18%);
   --sidebar-ring: oklch(0.62 0.16 275);
 
   @variant dark {
@@ -175,7 +189,7 @@
     --accent-foreground: oklch(0.922 0 0);
     /* Paler and calmer than the loss red, so a destructive label reads on its red tint over the card, hovered too. */
     --destructive: oklch(0.8 0.1 22.216);
-    --border: oklch(1 0 0 / 10%);
+    --border: oklch(1 0 0 / 20%);
     --input: oklch(0.62 0 0);
     --ring: oklch(0.6 0.14 275);
     /*
@@ -195,6 +209,13 @@
     --heat-3: 42.5%;
     --heat-4: 51.25%;
     --heat-5: 60%;
+    /*
+     * As with heat, a faint share of a dark card reads as the card itself; above
+     * 12% the amber wash takes --chart-1, a tile's Sparkline or a row's DataBar,
+     * under 3:1.
+     */
+    --wash: 12%;
+    --wash-edge: 55%;
     --link: oklch(0.75 0.128 275);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);
@@ -207,7 +228,7 @@
     --sidebar-primary-foreground: oklch(0.205 0 0);
     --sidebar-accent: oklch(0.269 0 0);
     --sidebar-accent-foreground: oklch(0.8 0.1 275);
-    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-border: oklch(1 0 0 / 20%);
     --sidebar-ring: oklch(0.6 0.14 275);
   }
 }
@@ -249,6 +270,31 @@
   border-color: var(--foreground);
 }
 
+/*
+ * A toggle group's items sit flush and share their borders, one control with
+ * its parts side by side; stock spaces them 8px apart. A group set to
+ * spacing={0} already joins its items by dropping their inner borders. The
+ * pressed item rises over its neighbours, so its own edge shows on both sides.
+ */
+[data-slot="toggle-group"]:not([data-spacing="0"]) {
+  gap: 0;
+  > [data-slot="toggle-group-item"] {
+    &[aria-pressed="true"],
+    &[data-pressed] {
+      z-index: 1;
+    }
+    &[data-variant="outline"] + [data-slot="toggle-group-item"] {
+      margin-inline-start: -1px;
+    }
+  }
+  &[data-orientation="vertical"]
+    > [data-slot="toggle-group-item"][data-variant="outline"]
+    + [data-slot="toggle-group-item"] {
+    margin-inline-start: 0;
+    margin-block-start: -1px;
+  }
+}
+
 /*
  * --input is the edge of a field, where the reader types or picks. A button,
  * a toggle and a code block are framed by their label or their content, so
@@ -304,6 +350,11 @@
   border-color: var(--destructive);
 }
 
+/* Progress is a bar, square as every bar is; stock draws it as a pill. */
+[data-slot="progress-track"] {
+  border-radius: 0;
+}
+
 /*
  * A slider's unfilled track is outlined in the field edge, so its extent reads
  * at 3:1; the muted track alone is 1.05:1 on the canvas.
@@ -326,14 +377,84 @@
 }
 
 /*
- * A card on the card surface lifts off the tinted canvas with a faint shadow
- * under its 1px ring (Tailwind composes --tw-shadow with the ring), and a data
- * table inside it drops its own border, so there is one frame, not two.
+ * Column heads are labels, in small monospaced capitals; a sort header's
+ * button and a data table's column title take the head's type rather than
+ * their own. A total row reads as a
+ * ledger's: one rule above it and a double rule under it in the text colour,
+ * with no band.
  */
-@scope (:root, [data-surface="card"]) to ([data-surface="ruled"], [data-surface="open"]) {
-  [data-slot="card"] {
-    --tw-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.06), 0 1px 3px 0 oklch(0 0 0 / 0.04);
+[data-slot="table-head"] {
+  @apply font-mono text-2xs tracking-wider uppercase;
+  :is([class~="group/button"], [data-slot="column-title"]) {
+    font: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+  }
+}
+[data-slot="table-footer"] {
+  background: none;
+  border-top: 1px solid var(--foreground);
+  border-bottom: 3px double var(--foreground);
+  font-weight: 600;
+}
+
+/*
+ * An exception the page marks, a stat tile (SectionCard's tone) or a table
+ * row (<TableRow data-tone="negative">), takes a faint wash of its colour over
+ * the card, and a tile an outline of it, so the one figure needing attention
+ * stands out of a run of neutral ones. Unlayered, to outrank a row's hover band.
+ */
+:is([data-slot="card"], [data-slot="table-row"]) {
+  &[data-tone="negative"] {
+    --exception: var(--negative);
   }
+  &[data-tone="warning"] {
+    --exception: var(--warning);
+  }
+}
+[data-slot="card"]:is([data-tone="negative"], [data-tone="warning"]) {
+  background-color: color-mix(in oklab, var(--exception) var(--wash), var(--card));
+  --tw-ring-color: color-mix(in oklab, var(--exception) var(--wash-edge), transparent);
+}
+[data-slot="table-row"]:is([data-tone="negative"], [data-tone="warning"]) {
+  background-color: color-mix(in oklab, var(--exception) var(--wash), transparent);
+}
+
+/*
+ * Panels in a PanelGrid are numbered 01, 02 before their title, in the mono
+ * face and the link colour, so the text can point to one. A panel without a
+ * card title, such as a MetricStrip with none, takes no number; a block
+ * wrapped in its own SiyahiProvider (which draws no box) still counts. The panel
+ * counts, not the title: a card header is a size container, whose style
+ * containment would keep each title's count to itself.
+ */
+[data-slot="panel-grid"] {
+  counter-reset: panel;
+}
+[data-slot="panel"]:has(
+  > [data-slot="card"] > [data-slot="card-header"] > [data-slot="card-title"],
+  > [data-slot="siyahi-provider"] > [data-slot="card"] > [data-slot="card-header"] > [data-slot="card-title"]
+) {
+  counter-increment: panel;
+}
+:is([data-slot="panel"], [data-slot="panel"] > [data-slot="siyahi-provider"])
+  > [data-slot="card"]
+  > [data-slot="card-header"]
+  > [data-slot="card-title"]::before {
+  content: counter(panel, decimal-leading-zero);
+  @apply font-mono text-2xs font-medium text-link;
+  letter-spacing: 0.04em;
+  margin-inline-end: 0.7em;
+  position: relative;
+  top: -0.12em;
+}
+
+/*
+ * A data table inside a card drops its own border: the card's ring or the
+ * ruled page's hairlines already frame it. On an open page, with no frame,
+ * it keeps its border.
+ */
+@scope (:root, [data-surface="ruled"], [data-surface="card"]) to ([data-surface="open"]) {
   [data-slot="card"] [data-slot="table-container"] {
     border-color: transparent;
   }
@@ -407,34 +528,52 @@
 }
 
 /*
- * Surfaces, from SiyahiProvider's surface prop. Card, the default, is
- * shadcn's own card on the tinted canvas. Ruled and open take the box off
- * every core Card: no fill, no corner, no ring, and no tinted footer band;
- * PanelGrid draws the hairlines between ruled blocks. Open also drops the
- * card's padding, so a block's content sits level with the page's text. Each
- * scope stops at a provider that says otherwise. Unlayered, like the rule above, to
- * outrank the core components' utility classes; a picked SectionCards tile
- * keeps its ring, which is important.
+ * Surfaces, from SiyahiProvider's surface prop. Ruled, the default, keeps
+ * every card's fill and drops its ring: PanelGrid and SectionCards fill their
+ * grid with the card colour and draw hairlines between the blocks, with a rule
+ * above and below the group and none on its left and right edges, and a card
+ * that stands alone, such as a MetricStrip or a table's card, takes those
+ * rules above and below itself. Card is a filled square card with a hairline
+ * ring and no shadow, 8px from the next, for a page of separate blocks. Open
+ * takes the box off every core Card: no fill, no ring, no tinted footer band,
+ * and no padding, so a block's content sits level with the page's text. Each
+ * scope stops at a provider that says otherwise. Unlayered, like the rules
+ * above, to outrank the core components' utility classes; a picked
+ * SectionCards tile keeps its ring, which is important, and an exception
+ * keeps its outline, which is more specific.
  */
-@scope ([data-surface="ruled"], [data-surface="open"]) to ([data-surface="card"]) {
+[data-slot="card"] {
+  --tw-ring-color: var(--border);
+}
+
+@scope (:root, [data-surface="ruled"]) to ([data-surface="card"], [data-surface="open"]) {
   [data-slot="card"] {
-    background: none;
-    border-radius: 0;
     --tw-ring-color: transparent;
   }
-  [data-slot="card-footer"] {
-    background: none;
-    border-top-width: 0;
-    /* The band's own top padding stacked on the card's gap, and with no band it read as a hole under the figure. */
-    padding-top: 0;
+  /*
+   * A card inside a panel or a tile's cell, or nested in another card, is ruled by what holds it; only a holder
+   * inside this scope counts, so a ruled provider inside a card starts its own lone cards afresh.
+   */
+  [data-slot="card"]:not(
+    :scope :is([data-slot="panel"], [data-slot="section-card"], [data-slot="card"]) [data-slot="card"]
+  ) {
+    border-block: 1px solid var(--border);
   }
 }
 
 @scope ([data-surface="open"]) to ([data-surface="ruled"], [data-surface="card"]) {
   [data-slot="card"] {
+    background: none;
+    --tw-ring-color: transparent;
     --card-spacing: 0px;
     gap: calc(var(--spacing) * 4);
   }
+  [data-slot="card-footer"] {
+    background: none;
+    border-top-width: 0;
+    /* The band's own top padding stacked on the card's gap, and with no band it read as a hole under the figure. */
+    padding-top: 0;
+  }
 }
 
 /*