@charcuterie/ui 3.28.0 → 3.28.1

package/dist/Main/Main.js

@@ -118,6 +118,6 @@ export const Main = ({ children, className, contentWidth, id, ...mainProps }) =>
     const maxInlineSize = toMaxInlineSize(contentWidth ??
         shell?.contentWidth ??
         DEFAULT_CONTENT_WIDTH);
-    return (_jsx("main", { ...mainProps, className: toClassName("col-start-1 row-start-3 min-w-0 md:col-start-2 md:row-start-2", className), id: id ?? shell?.mainId ?? fallbackId, tabIndex: -1, children: _jsx("div", { className: "@container mx-auto flex w-full min-w-0 flex-col gap-6 wrap-anywhere px-4 py-6 sm:px-6", style: { maxInlineSize }, children: children }) }));
+    return (_jsx("main", { ...mainProps, className: toClassName("charcuterie-scrollbar col-start-1 row-start-3 min-h-0 min-w-0 overflow-y-auto md:col-start-2 md:row-start-2", className), id: id ?? shell?.mainId ?? fallbackId, tabIndex: -1, children: _jsx("div", { className: "@container mx-auto flex w-full min-w-0 flex-col gap-6 wrap-anywhere px-4 py-6 sm:px-6", style: { maxInlineSize }, children: children }) }));
 };
 //# sourceMappingURL=Main.js.map

package/dist/Main/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAGL,UAAU,GACX,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,qBAAqB,EACrB,eAAe,GAChB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAM/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyGG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,EAAE,EACF,GAAG,SAAS,EACF,EAAa,EAAE;IACzB,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAEtC,iEAAiE;IACjE,2DAA2D;IAC3D,MAAM,UAAU,GAAG,WAAW,EAAE,CAAA;IAEhC,MAAM,aAAa,GAAG,eAAe,CACnC,YAAY;QACV,KAAK,EAAE,YAAY;QACnB,qBAAqB,CACxB,CAAA;IAED,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,WAAW,CACpB,+DAA+D,EAC/D,SAAS,CACV,EACD,EAAE,EAAE,EAAE,IAAI,KAAK,EAAE,MAAM,IAAI,UAAU,EACrC,QAAQ,EAAE,CAAC,CAAC,YAaZ,cACE,SAAS,EAAC,uFAAuF,EACjG,KAAK,EAAE,EAAE,aAAa,EAAE,YAEvB,QAAQ,GACL,GACD,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAGL,UAAU,GACX,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,qBAAqB,EACrB,eAAe,GAChB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAM/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyGG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,EAAE,EACF,GAAG,SAAS,EACF,EAAa,EAAE;IACzB,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAEtC,iEAAiE;IACjE,2DAA2D;IAC3D,MAAM,UAAU,GAAG,WAAW,EAAE,CAAA;IAEhC,MAAM,aAAa,GAAG,eAAe,CACnC,YAAY;QACV,KAAK,EAAE,YAAY;QACnB,qBAAqB,CACxB,CAAA;IAED,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,WAAW,CACpB,6GAA6G,EAC7G,SAAS,CACV,EACD,EAAE,EAAE,EAAE,IAAI,KAAK,EAAE,MAAM,IAAI,UAAU,EACrC,QAAQ,EAAE,CAAC,CAAC,YAaZ,cACE,SAAS,EAAC,uFAAuF,EACjG,KAAK,EAAE,EAAE,aAAa,EAAE,YAEvB,QAAQ,GACL,GACD,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/Rail/Rail.js

@@ -57,7 +57,7 @@ const LANDMARK_ELEMENT = {
  */
 export const Rail = ({ children, className, label, landmark = "complementary", side = "start", ...railProps }) => {
     const Element = LANDMARK_ELEMENT[landmark];
-    return (_jsx(Element, { ...railProps, "aria-label": label, className: toClassName("flex min-w-0 gap-2 overflow-x-auto border-border-subtle p-4 md:row-start-2 md:w-64 md:flex-col md:overflow-x-visible", side === "start"
+    return (_jsx(Element, { ...railProps, "aria-label": label, className: toClassName("flex min-w-0 gap-2 overflow-x-auto border-border-subtle p-4 md:row-start-2 md:min-h-0 md:w-64 md:flex-col md:overflow-x-visible", side === "start"
             ? "row-start-2 border-b md:col-start-1 md:border-b-0 md:border-e"
             : "row-start-4 border-t md:col-start-3 md:border-t-0 md:border-s", className), children: children }));
 };

package/dist/Rail/Rail.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rail.js","sourceRoot":"","sources":["../../src/Rail/Rail.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAY/C,MAAM,gBAAgB,GAGlB;IACF,aAAa,EAAE,OAAO;IACtB,UAAU,EAAE,KAAK;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,GAAG,eAAe,EAC1B,IAAI,GAAG,OAAO,EACd,GAAG,SAAS,EACF,EAAa,EAAE;IACzB,MAAM,OAAO,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAA;IAE1C,OAAO,CACL,KAAC,OAAO,OACF,SAAS,gBACD,KAAK,EACjB,SAAS,EAAE,WAAW,CACpB,sHAAsH,EACtH,IAAI,KAAK,OAAO;YACd,CAAC,CAAC,+DAA+D;YACjE,CAAC,CAAC,+DAA+D,EACnE,SAAS,CACV,YAEA,QAAQ,GACD,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Rail.js","sourceRoot":"","sources":["../../src/Rail/Rail.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAY/C,MAAM,gBAAgB,GAGlB;IACF,aAAa,EAAE,OAAO;IACtB,UAAU,EAAE,KAAK;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,GAAG,eAAe,EAC1B,IAAI,GAAG,OAAO,EACd,GAAG,SAAS,EACF,EAAa,EAAE;IACzB,MAAM,OAAO,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAA;IAE1C,OAAO,CACL,KAAC,OAAO,OACF,SAAS,gBACD,KAAK,EACjB,SAAS,EAAE,WAAW,CACpB,iIAAiI,EACjI,IAAI,KAAK,OAAO;YACd,CAAC,CAAC,+DAA+D;YACjE,CAAC,CAAC,+DAA+D,EACnE,SAAS,CACV,YAEA,QAAQ,GACD,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/Shell/Shell.js

@@ -111,6 +111,6 @@ import { ShellContext } from "./shellContext.js";
 export const Shell = ({ children, className, contentWidth = DEFAULT_CONTENT_WIDTH, skipLinkLabel = "Skip to main content", ...divProps }) => {
     const mainId = useUniqueId();
     const shellContext = useMemo(() => ({ contentWidth, mainId }), [contentWidth, mainId]);
-    return (_jsx(ShellContext.Provider, { value: shellContext, children: _jsxs("div", { ...divProps, className: toClassName("relative grid min-h-dvh grid-cols-1 grid-rows-[auto_auto_1fr_auto] overflow-x-clip bg-surface-base text-content-primary md:grid-cols-[auto_minmax(0,1fr)_auto] md:grid-rows-[auto_1fr]", className), children: [_jsx("a", { className: "fixed top-0 start-0 z-[var(--layer-toast)] m-3 -translate-y-24 rounded-md border border-border-subtle bg-surface-raised px-3 py-2 font-medium text-content-primary text-sm shadow-medium focus-visible:translate-y-0", href: `#${mainId}`, children: skipLinkLabel }), children] }) }));
+    return (_jsx(ShellContext.Provider, { value: shellContext, children: _jsxs("div", { ...divProps, className: toClassName("relative grid h-dvh grid-cols-1 grid-rows-[auto_auto_minmax(0,1fr)_auto] overflow-x-clip bg-surface-base text-content-primary md:grid-cols-[auto_minmax(0,1fr)_auto] md:grid-rows-[auto_minmax(0,1fr)]", className), children: [_jsx("a", { className: "fixed top-0 start-0 z-[var(--layer-toast)] m-3 -translate-y-24 rounded-md border border-border-subtle bg-surface-raised px-3 py-2 font-medium text-content-primary text-sm shadow-medium focus-visible:translate-y-0", href: `#${mainId}`, children: skipLinkLabel }), children] }) }));
 };
 //# sourceMappingURL=Shell.js.map

package/dist/Shell/Shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shell.js","sourceRoot":"","sources":["../../src/Shell/Shell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAGL,OAAO,GACR,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAOhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,YAAY,GAAG,qBAAqB,EACpC,aAAa,GAAG,sBAAsB,EACtC,GAAG,QAAQ,EACA,EAAa,EAAE;IAC1B,MAAM,MAAM,GAAG,WAAW,EAAE,CAAA;IAE5B,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,EAChC,CAAC,YAAY,EAAE,MAAM,CAAC,CACvB,CAAA;IAED,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACxC,kBACM,QAAQ,EACZ,SAAS,EAAE,WAAW,CACpB,wLAAwL,EACxL,SAAS,CACV,aAcD,YACE,SAAS,EAAC,sNAAsN,EAChO,IAAI,EAAE,IAAI,MAAM,EAAE,YAEjB,aAAa,GACZ,EAEH,QAAQ,IACL,GACgB,CACzB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Shell.js","sourceRoot":"","sources":["../../src/Shell/Shell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAGL,OAAO,GACR,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAOhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,YAAY,GAAG,qBAAqB,EACpC,aAAa,GAAG,sBAAsB,EACtC,GAAG,QAAQ,EACA,EAAa,EAAE;IAC1B,MAAM,MAAM,GAAG,WAAW,EAAE,CAAA;IAE5B,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,EAChC,CAAC,YAAY,EAAE,MAAM,CAAC,CACvB,CAAA;IAED,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACxC,kBACM,QAAQ,EACZ,SAAS,EAAE,WAAW,CACpB,wMAAwM,EACxM,SAAS,CACV,aAcD,YACE,SAAS,EAAC,sNAAsN,EAChO,IAAI,EAAE,IAAI,MAAM,EAAE,YAEjB,aAAa,GACZ,EAEH,QAAQ,IACL,GACgB,CACzB,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "3.28.0",
+  "version": "3.28.1",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",

package/src/Main/Main.tsx

@@ -146,7 +146,7 @@ export const Main = ({
     <main
       {...mainProps}
       className={toClassName(
-        "col-start-1 row-start-3 min-w-0 md:col-start-2 md:row-start-2",
+        "charcuterie-scrollbar col-start-1 row-start-3 min-h-0 min-w-0 overflow-y-auto md:col-start-2 md:row-start-2",
         className,
       )}
       id={id ?? shell?.mainId ?? fallbackId}

package/src/Rail/Rail.tsx

@@ -89,7 +89,7 @@ export const Rail = ({
       {...railProps}
       aria-label={label}
       className={toClassName(
-        "flex min-w-0 gap-2 overflow-x-auto border-border-subtle p-4 md:row-start-2 md:w-64 md:flex-col md:overflow-x-visible",
+        "flex min-w-0 gap-2 overflow-x-auto border-border-subtle p-4 md:row-start-2 md:min-h-0 md:w-64 md:flex-col md:overflow-x-visible",
         side === "start"
           ? "row-start-2 border-b md:col-start-1 md:border-b-0 md:border-e"
           : "row-start-4 border-t md:col-start-3 md:border-t-0 md:border-s",

package/src/Shell/Shell.mdx

@@ -127,6 +127,14 @@ rail that only changes *position* uses a media query and nothing else.
 
 <Canvas of={ShellStories.Responsive} />
 
+## The page content scrolls; the frame stays available
+
+The shell fills the viewport. `Main` is the only vertical scroll region, so a long page does
+not scroll the header or either rail away. This keeps navigation actions available, including
+an app's rail-collapse control. The rail is not a second vertical scroll area.
+
+<Canvas of={ShellStories.Scrollable} />
+
 ## It does not scroll sideways, and that is a test
 
 Plex Channels' narrow view scrolls left and right as wide as its content area. The usual

package/src/Shell/Shell.stories.tsx

@@ -10,6 +10,7 @@ import {
   PageContent,
   RailDetail,
   RailNavigation,
+  ScrollFiller,
 } from "../shell.storyHelpers.tsx"
 import { Shell } from "./Shell.tsx"
 
@@ -183,3 +184,26 @@ export const Interactive: Story = {
     </Shell>
   ),
 }
+
+/** A long page leaves the header and rail in place. */
+export const Scrollable: Story = {
+  render: (shellProps) => (
+    <Shell {...shellProps}>
+      <Header
+        actions={<HeaderSchemeToggle />}
+        heading="Rip Deck"
+      />
+
+      <Rail label="Sections" landmark="navigation">
+        <RailNavigation />
+      </Rail>
+
+      <Main>
+        <PageContent />
+        <div style={{ minBlockSize: "150vh" }}>
+          <ScrollFiller />
+        </div>
+      </Main>
+    </Shell>
+  ),
+}

package/src/Shell/Shell.test.tsx

@@ -16,6 +16,7 @@ const {
   Default,
   Interactive,
   Responsive,
+  Scrollable,
   WithBothRails,
   WithStartRail,
 } = composeStories(stories)
@@ -152,6 +153,34 @@ test("the shell fills the viewport at desktop width without overflowing it", asy
   await expectNoHorizontalScroll()
 })
 
+test("only main scrolls vertically, keeping the rail available", async () => {
+  await setViewport(DESKTOP)
+
+  const { canvas, canvasElement } =
+    await mountStory(Scrollable)
+
+  const shell =
+    canvasElement.firstElementChild as HTMLElement
+  const main = canvas.getByRole("main")
+  const rail = canvas.getByRole("navigation", {
+    name: "Sections",
+  })
+
+  await expect(shell.clientHeight).toBe(DESKTOP.height)
+  await expect(main.scrollHeight).toBeGreaterThan(
+    main.clientHeight,
+  )
+  await expect(
+    globalThis.getComputedStyle(main).overflowY,
+  ).toBe("auto")
+
+  main.scrollTo({ top: main.scrollHeight })
+
+  await expect(main.scrollTop).toBeGreaterThan(0)
+  await expect(rail.scrollTop).toBe(0)
+  await expectNoAxeViolations(canvasElement)
+})
+
 test("the shell is one banner, one main, and two uniquely-named rails", async () => {
   const { canvas, canvasElement } =
     await mountStory(WithBothRails)

package/src/Shell/Shell.tsx

@@ -140,7 +140,7 @@ export const Shell = ({
       <div
         {...divProps}
         className={toClassName(
-          "relative grid min-h-dvh grid-cols-1 grid-rows-[auto_auto_1fr_auto] overflow-x-clip bg-surface-base text-content-primary md:grid-cols-[auto_minmax(0,1fr)_auto] md:grid-rows-[auto_1fr]",
+          "relative grid h-dvh grid-cols-1 grid-rows-[auto_auto_minmax(0,1fr)_auto] overflow-x-clip bg-surface-base text-content-primary md:grid-cols-[auto_minmax(0,1fr)_auto] md:grid-rows-[auto_minmax(0,1fr)]",
           className,
         )}
       >