contain-css-svelte 1.3.0 → 1.4.0

package/dist/layout/Inline.svelte

@@ -32,7 +32,33 @@ const el = $derived(elementProps({ justify, align, gap, wrap, ...restProps }, "i
   {@render children?.()}
 </div>
 
-<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+<style>/* Per-level heading (h1-h6) box/typography properties, resolved to PRIVATE,
+   inheriting custom properties (--_h1-color, --_h2-font-size, etc) rather than
+   assigned directly to a matched h1-h6 selector. Nothing in this file matches
+   an actual heading element anymore -- see typography-context.css (vars/), which
+   is the single, global, :where()-scoped rule that actually reads these vars
+   and applies them to real elements. That split is what lets a component
+   nested arbitrarily deep (through <article>, <Tile>, whatever) still get the
+   nearest ancestor's heading styling: these are ordinary inherited custom
+   properties, so DOM proximity decides which component's values apply, not
+   selector specificity or stylesheet order. See AGENTS-INTERNAL.md. */
+/* All six heading levels' context vars in one call -- what every
+   "typography container" component (Container, Card, Tile, TextLayout, ...)
+   includes on itself once, alongside the shared --_heading-* vars below. */
+/* Shared prose-measure group: p, blockquote, dl, ul, ol. li/dt/dd don't get
+   their own vars -- they're never wider than their ul/ol/dl parent's own
+   max-width box, so they're already bounded for free by ordinary block
+   layout, not by anything selector-based reaching them individually. */
+/* p specifically also gets the fuller typography-props-bare treatment
+   (paragraph-prefixed), which -- same as in the original selector-based
+   version -- is declared/consumed AFTER the shared prose vars above, so it
+   wins for whichever properties both groups set. */
+/* The first paragraph in a typography context (p:first-of-type, or a p right
+   after a heading) gets its own, slightly different treatment -- larger lede
+   text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
+   has to happen where the real element is, in the global consumer rule; only
+   the VALUES move to context vars here. */
+/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
    one value (both sides equal) or two (start end), so there is no separate
    "which side" prop to remember and no 4-value shorthand order to get wrong.
    Defaults to 0 on purpose -- unlike padding-props above, a margin that
@@ -72,6 +98,12 @@ const el = $derived(elementProps({ justify, align, gap, wrap, ...restProps }, "i
   border-bottom: var(--inline-border-bottom, var(--border-bottom, var(--inline-border, var(--border, none))));
   border-left: var(--inline-border-left, var(--border-left, var(--inline-border, var(--border, none))));
   border-radius: var(--inline-border-radius, var(--border-radius, none));
+  /* A layout helper, not a surface: padding comes only from
+     --inline-padding (or the `padding` prop), never from the theme's
+     --padding. box-props falls back to --padding, which is inherited, so
+     without this every Inline picked up the page's padding -- or
+     whatever padding an enclosing Card set. */
+  --_padding: var(--inline-padding, 0);
   --_margin-block: var(--inline-margin-block, var(--margin-block, 0));
   --_margin-inline: var(--inline-margin-inline, var(--margin-inline, 0));
   margin-block: var(--_margin-block);

package/dist/layout/MenuList.svelte

@@ -26,7 +26,33 @@ const el = $derived(elementProps(restProps, "menu", [
   {@render children?.()}
 </ul>
 
-<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+<style>/* Per-level heading (h1-h6) box/typography properties, resolved to PRIVATE,
+   inheriting custom properties (--_h1-color, --_h2-font-size, etc) rather than
+   assigned directly to a matched h1-h6 selector. Nothing in this file matches
+   an actual heading element anymore -- see typography-context.css (vars/), which
+   is the single, global, :where()-scoped rule that actually reads these vars
+   and applies them to real elements. That split is what lets a component
+   nested arbitrarily deep (through <article>, <Tile>, whatever) still get the
+   nearest ancestor's heading styling: these are ordinary inherited custom
+   properties, so DOM proximity decides which component's values apply, not
+   selector specificity or stylesheet order. See AGENTS-INTERNAL.md. */
+/* All six heading levels' context vars in one call -- what every
+   "typography container" component (Container, Card, Tile, TextLayout, ...)
+   includes on itself once, alongside the shared --_heading-* vars below. */
+/* Shared prose-measure group: p, blockquote, dl, ul, ol. li/dt/dd don't get
+   their own vars -- they're never wider than their ul/ol/dl parent's own
+   max-width box, so they're already bounded for free by ordinary block
+   layout, not by anything selector-based reaching them individually. */
+/* p specifically also gets the fuller typography-props-bare treatment
+   (paragraph-prefixed), which -- same as in the original selector-based
+   version -- is declared/consumed AFTER the shared prose vars above, so it
+   wins for whichever properties both groups set. */
+/* The first paragraph in a typography context (p:first-of-type, or a p right
+   after a heading) gets its own, slightly different treatment -- larger lede
+   text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
+   has to happen where the real element is, in the global consumer rule; only
+   the VALUES move to context vars here. */
+/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
    one value (both sides equal) or two (start end), so there is no separate
    "which side" prop to remember and no 4-value shorthand order to get wrong.
    Defaults to 0 on purpose -- unlike padding-props above, a margin that

package/dist/layout/Page.svelte

@@ -89,7 +89,33 @@ onMount(() => {
   </footer>
 </section>
 
-<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+<style>/* Per-level heading (h1-h6) box/typography properties, resolved to PRIVATE,
+   inheriting custom properties (--_h1-color, --_h2-font-size, etc) rather than
+   assigned directly to a matched h1-h6 selector. Nothing in this file matches
+   an actual heading element anymore -- see typography-context.css (vars/), which
+   is the single, global, :where()-scoped rule that actually reads these vars
+   and applies them to real elements. That split is what lets a component
+   nested arbitrarily deep (through <article>, <Tile>, whatever) still get the
+   nearest ancestor's heading styling: these are ordinary inherited custom
+   properties, so DOM proximity decides which component's values apply, not
+   selector specificity or stylesheet order. See AGENTS-INTERNAL.md. */
+/* All six heading levels' context vars in one call -- what every
+   "typography container" component (Container, Card, Tile, TextLayout, ...)
+   includes on itself once, alongside the shared --_heading-* vars below. */
+/* Shared prose-measure group: p, blockquote, dl, ul, ol. li/dt/dd don't get
+   their own vars -- they're never wider than their ul/ol/dl parent's own
+   max-width box, so they're already bounded for free by ordinary block
+   layout, not by anything selector-based reaching them individually. */
+/* p specifically also gets the fuller typography-props-bare treatment
+   (paragraph-prefixed), which -- same as in the original selector-based
+   version -- is declared/consumed AFTER the shared prose vars above, so it
+   wins for whichever properties both groups set. */
+/* The first paragraph in a typography context (p:first-of-type, or a p right
+   after a heading) gets its own, slightly different treatment -- larger lede
+   text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
+   has to happen where the real element is, in the global consumer rule; only
+   the VALUES move to context vars here. */
+/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
    one value (both sides equal) or two (start end), so there is no separate
    "which side" prop to remember and no 4-value shorthand order to get wrong.
    Defaults to 0 on purpose -- unlike padding-props above, a margin that

package/dist/layout/RowContainer.svelte

@@ -21,7 +21,33 @@ const el = $derived(elementProps(restProps, "row-container", ROW_CONTAINER_VARS)
   {@render children?.()}
 </section>
 
-<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+<style>/* Per-level heading (h1-h6) box/typography properties, resolved to PRIVATE,
+   inheriting custom properties (--_h1-color, --_h2-font-size, etc) rather than
+   assigned directly to a matched h1-h6 selector. Nothing in this file matches
+   an actual heading element anymore -- see typography-context.css (vars/), which
+   is the single, global, :where()-scoped rule that actually reads these vars
+   and applies them to real elements. That split is what lets a component
+   nested arbitrarily deep (through <article>, <Tile>, whatever) still get the
+   nearest ancestor's heading styling: these are ordinary inherited custom
+   properties, so DOM proximity decides which component's values apply, not
+   selector specificity or stylesheet order. See AGENTS-INTERNAL.md. */
+/* All six heading levels' context vars in one call -- what every
+   "typography container" component (Container, Card, Tile, TextLayout, ...)
+   includes on itself once, alongside the shared --_heading-* vars below. */
+/* Shared prose-measure group: p, blockquote, dl, ul, ol. li/dt/dd don't get
+   their own vars -- they're never wider than their ul/ol/dl parent's own
+   max-width box, so they're already bounded for free by ordinary block
+   layout, not by anything selector-based reaching them individually. */
+/* p specifically also gets the fuller typography-props-bare treatment
+   (paragraph-prefixed), which -- same as in the original selector-based
+   version -- is declared/consumed AFTER the shared prose vars above, so it
+   wins for whichever properties both groups set. */
+/* The first paragraph in a typography context (p:first-of-type, or a p right
+   after a heading) gets its own, slightly different treatment -- larger lede
+   text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
+   has to happen where the real element is, in the global consumer rule; only
+   the VALUES move to context vars here. */
+/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
    one value (both sides equal) or two (start end), so there is no separate
    "which side" prop to remember and no 4-value shorthand order to get wrong.
    Defaults to 0 on purpose -- unlike padding-props above, a margin that

package/dist/layout/Sidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { elementProps } from "../util";
 import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
-let { left, right, children, overlay = false, open = $bindable(undefined), expandLabel = "Expand sidebar", collapseLabel = "Collapse sidebar", class: className, ...restProps } = $props();
+let { left, right, children, overlay = false, sticky = false, sheetButton = "tab", open = $bindable(undefined), expandLabel = "Expand sidebar", collapseLabel = "Collapse sidebar", class: className, ...restProps } = $props();
 /* The shorthands sidebar's own CSS backs, one group per mixin it
    includes. The Props type is derived from this same array, so what the
    component accepts and what it emits cannot drift apart. */
@@ -28,6 +28,8 @@ const expandedHamburger = $derived(open ?? false);
   class:right
   class:left
   class:overlay
+  class:sticky
+  class:button-sheet-toggle={sheetButton === "button"}
   class:expandedHamburger
   class:expandedBar
   {...el}
@@ -57,6 +59,32 @@ const expandedHamburger = $derived(open ?? false);
 </aside>
 
 <style>@charset "UTF-8";
+/* Per-level heading (h1-h6) box/typography properties, resolved to PRIVATE,
+   inheriting custom properties (--_h1-color, --_h2-font-size, etc) rather than
+   assigned directly to a matched h1-h6 selector. Nothing in this file matches
+   an actual heading element anymore -- see typography-context.css (vars/), which
+   is the single, global, :where()-scoped rule that actually reads these vars
+   and applies them to real elements. That split is what lets a component
+   nested arbitrarily deep (through <article>, <Tile>, whatever) still get the
+   nearest ancestor's heading styling: these are ordinary inherited custom
+   properties, so DOM proximity decides which component's values apply, not
+   selector specificity or stylesheet order. See AGENTS-INTERNAL.md. */
+/* All six heading levels' context vars in one call -- what every
+   "typography container" component (Container, Card, Tile, TextLayout, ...)
+   includes on itself once, alongside the shared --_heading-* vars below. */
+/* Shared prose-measure group: p, blockquote, dl, ul, ol. li/dt/dd don't get
+   their own vars -- they're never wider than their ul/ol/dl parent's own
+   max-width box, so they're already bounded for free by ordinary block
+   layout, not by anything selector-based reaching them individually. */
+/* p specifically also gets the fuller typography-props-bare treatment
+   (paragraph-prefixed), which -- same as in the original selector-based
+   version -- is declared/consumed AFTER the shared prose vars above, so it
+   wins for whichever properties both groups set. */
+/* The first paragraph in a typography context (p:first-of-type, or a p right
+   after a heading) gets its own, slightly different treatment -- larger lede
+   text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
+   has to happen where the real element is, in the global consumer rule; only
+   the VALUES move to context vars here. */
 /* Logical, not top/bottom/left/right: margin-block/margin-inline already take
    one value (both sides equal) or two (start end), so there is no separate
    "which side" prop to remember and no 4-value shorthand order to get wrong.
@@ -85,6 +113,9 @@ const expandedHamburger = $derived(open ?? false);
   */
 /* Convenience groupings */
 aside {
+  /* Set only by `sheetButton="button"` (below); cleared here so it never
+     leaks in from an enclosing sidebar. */
+  --_sidebar-sheet-edge-override: initial;
   --link-bg: var(--sidebar-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--sidebar-link-fg, var(--surface-link-fg, inherit));
   --_bg-mix-color: var(--sidebar-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
@@ -383,6 +414,26 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
       var(--sidebar-icon-height, 1rem),
       var(--icon-size, 32px)
     );
+    /* The sheet button's corners. Its "edge" corners are the pair on the
+       side it attaches to -- the page edge while shut, the panel's inner edge
+       while open -- and default to 0, which is what makes it read as a tab
+       fastened to that edge. `sheetButton="button"` rounds them like the
+       other two, for a sheet that does not sit against an edge. */
+    --_sidebar-sheet-button-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
+    --_sidebar-sheet-expand-edge-radius: var(
+      --sidebar-sheet-expand-edge-radius,
+      var(
+        --_sidebar-sheet-edge-override,
+        var(--sidebar-sheet-edge-radius, 0)
+      )
+    );
+    --_sidebar-sheet-collapse-edge-radius: var(
+      --sidebar-sheet-collapse-edge-radius,
+      var(
+        --_sidebar-sheet-edge-override,
+        var(--sidebar-sheet-edge-radius, 0)
+      )
+    );
     position: relative;
     overflow: visible;
     background: transparent;
@@ -408,7 +459,9 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     top: 0;
     left: 0;
     width: var(--sidebar-width);
-    z-index: 2;
+    /* Above a sticky Table head (z-index 2), which a sheet beside a long table
+       otherwise slides under. */
+    z-index: var(--sidebar-overlay-z-index, 3);
     transform: translateX(-100%);
     opacity: 0;
     background: transparent;
@@ -536,16 +589,16 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
   aside.overlay > button {
     transition: left var(--sidebar-transition);
     transform: translateX(0);
-    z-index: 3;
+    z-index: calc(var(--sidebar-overlay-z-index, 3) + 1);
     position: absolute;
     opacity: 1;
     pointer-events: all;
     display: block;
     top: var(--padding);
     left: 0;
-    border-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    border-radius: var(--_sidebar-sheet-button-radius);
+    border-top-left-radius: var(--_sidebar-sheet-expand-edge-radius);
+    border-bottom-left-radius: var(--_sidebar-sheet-expand-edge-radius);
     border: var(--circle-button-border, var(--mini-button-border));
     width: var(--_sidebar-expander-width);
     height: var(--_sidebar-expander-height);
@@ -674,9 +727,9 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
        Either the button pops out of the panel or it sits inside it; this
        sits inside it, and the inset is then exactly button + one gutter. */
     left: calc(var(--sidebar-width) - var(--_sidebar-expander-width));
-    border-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-radius: var(--_sidebar-sheet-button-radius);
+    border-top-right-radius: var(--_sidebar-sheet-collapse-edge-radius);
+    border-bottom-right-radius: var(--_sidebar-sheet-collapse-edge-radius);
   }
   aside.overlay {
     /* Everything above anchors the button to the left, which is right for a
@@ -690,18 +743,95 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
   aside.overlay.right > button {
     left: auto;
     right: 0;
-    border-top-left-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
-    border-bottom-left-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-radius: var(--_sidebar-sheet-button-radius);
+    border-top-right-radius: var(--_sidebar-sheet-expand-edge-radius);
+    border-bottom-right-radius: var(--_sidebar-sheet-expand-edge-radius);
   }
   aside.overlay.right > button.close {
     left: auto;
     right: calc(var(--sidebar-width) - var(--_sidebar-expander-width));
-    border-top-right-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
-    border-bottom-right-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    border-radius: var(--_sidebar-sheet-button-radius);
+    border-top-left-radius: var(--_sidebar-sheet-collapse-edge-radius);
+    border-bottom-left-radius: var(--_sidebar-sheet-collapse-edge-radius);
+  }
+  aside.overlay {
+    /* `sticky`: the sheet follows the reader down the page instead of
+       stretching to the row.
+
+       Sticky needs the sheet back *in flow* -- an absolutely positioned box
+       cannot stick -- but the aside is only a button's width wide and the
+       row's full height, and that height is exactly the range the sheet
+       should be free to travel. So the aside becomes a one-cell grid as tall
+       as its row, and the sheet and its button share that cell, each sticky
+       within it.
+
+       Horizontal placement moves from `left`/`right` onto margins, because on
+       a sticky box `left` and `right` stop being offsets and become sticky
+       insets -- they would pin the button against a sideways-scrolling
+       ancestor rather than place it. The margins reproduce the absolute
+       geometry exactly: the aside is `--gap` plus one button wide, and a
+       sheet or button wider than that spills out of its cell on the side
+       that faces the content. */
+  }
+  aside.overlay.sticky {
+    --_sidebar-sheet-top: var(--sidebar-sheet-top, var(--padding));
+    --_sidebar-aside-width: calc(var(--gap) + var(--_sidebar-expander-width));
+    display: grid;
+    grid-template-columns: 100%;
+    align-content: stretch;
+    /* A shut sheet is still in flow now, and would otherwise hold the row
+       open to its own height. The aside's width is set explicitly, so
+       size containment only ever zeroes out the height it would have
+       contributed; the row still stretches it to full height. */
+    contain: size;
+  }
+  aside.overlay.sticky > .content, aside.overlay.sticky > button.expander, aside.overlay.sticky > button.close {
+    grid-area: 1/1;
+    position: sticky;
+    align-self: start;
+    justify-self: start;
+    left: auto;
+    right: auto;
+  }
+  aside.overlay.sticky > .content {
+    top: var(--_sidebar-sheet-top);
+    margin-left: 0;
+    height: auto;
+    /* The reserve is a budget for everything that is not the sheet, rather
+       than just the sticky offset: before the sheet sticks -- page scrolled
+       to the top -- its top edge is its row's, which may sit well below the
+       viewport top, and a sheet sized only from the offset would overflow
+       the viewport by exactly that much. Twice the top gives it an even
+       margin at both ends once it has stuck. */
+    max-height: var(--sidebar-sheet-max-height, calc(100dvh - var(--sidebar-sheet-reserve, calc(2 * var(--_sidebar-sheet-top)))));
+    overflow-y: auto;
+    /* A column, so a child with `min-height: 0` and its own overflow can
+       keep a header or footer in view and scroll only its middle. Children
+       that do not opt in keep their size, and the sheet scrolls as a
+       whole. */
+    display: flex;
+    flex-direction: column;
+  }
+  aside.overlay.sticky.expandedHamburger > .content {
+    height: auto;
+  }
+  aside.overlay.sticky.right > .content {
+    margin-left: calc(var(--_sidebar-aside-width) - var(--sidebar-width));
+  }
+  aside.overlay.sticky > button.expander, aside.overlay.sticky > button.close {
+    top: calc(var(--_sidebar-sheet-top) + var(--padding));
+    margin-top: var(--padding);
+    margin-left: 0;
+    transition: margin-left var(--sidebar-transition);
+  }
+  aside.overlay.sticky > button.close {
+    margin-left: calc(var(--sidebar-width) - var(--_sidebar-expander-width));
+  }
+  aside.overlay.sticky.right > button.expander {
+    margin-left: var(--gap);
+  }
+  aside.overlay.sticky.right > button.close {
+    margin-left: calc(var(--_sidebar-aside-width) - var(--sidebar-width));
   }
   .edge-bar {
     --link-bg: var(--grab-bar-link-bg, var(--sidebar-link-bg, var(--surface-link-bg, inherit)));
@@ -863,6 +993,26 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
       var(--sidebar-icon-height, 1rem),
       var(--icon-size, 32px)
     );
+    /* The sheet button's corners. Its "edge" corners are the pair on the
+       side it attaches to -- the page edge while shut, the panel's inner edge
+       while open -- and default to 0, which is what makes it read as a tab
+       fastened to that edge. `sheetButton="button"` rounds them like the
+       other two, for a sheet that does not sit against an edge. */
+    --_sidebar-sheet-button-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
+    --_sidebar-sheet-expand-edge-radius: var(
+      --sidebar-sheet-expand-edge-radius,
+      var(
+        --_sidebar-sheet-edge-override,
+        var(--sidebar-sheet-edge-radius, 0)
+      )
+    );
+    --_sidebar-sheet-collapse-edge-radius: var(
+      --sidebar-sheet-collapse-edge-radius,
+      var(
+        --_sidebar-sheet-edge-override,
+        var(--sidebar-sheet-edge-radius, 0)
+      )
+    );
     position: relative;
     overflow: visible;
     background: transparent;
@@ -888,7 +1038,9 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     top: 0;
     left: 0;
     width: var(--sidebar-width);
-    z-index: 2;
+    /* Above a sticky Table head (z-index 2), which a sheet beside a long table
+       otherwise slides under. */
+    z-index: var(--sidebar-overlay-z-index, 3);
     transform: translateX(-100%);
     opacity: 0;
     background: transparent;
@@ -1016,16 +1168,16 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
   aside > button {
     transition: left var(--sidebar-transition);
     transform: translateX(0);
-    z-index: 3;
+    z-index: calc(var(--sidebar-overlay-z-index, 3) + 1);
     position: absolute;
     opacity: 1;
     pointer-events: all;
     display: block;
     top: var(--padding);
     left: 0;
-    border-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    border-radius: var(--_sidebar-sheet-button-radius);
+    border-top-left-radius: var(--_sidebar-sheet-expand-edge-radius);
+    border-bottom-left-radius: var(--_sidebar-sheet-expand-edge-radius);
     border: var(--circle-button-border, var(--mini-button-border));
     width: var(--_sidebar-expander-width);
     height: var(--_sidebar-expander-height);
@@ -1154,9 +1306,9 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
        Either the button pops out of the panel or it sits inside it; this
        sits inside it, and the inset is then exactly button + one gutter. */
     left: calc(var(--sidebar-width) - var(--_sidebar-expander-width));
-    border-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-radius: var(--_sidebar-sheet-button-radius);
+    border-top-right-radius: var(--_sidebar-sheet-collapse-edge-radius);
+    border-bottom-right-radius: var(--_sidebar-sheet-collapse-edge-radius);
   }
   aside {
     /* Everything above anchors the button to the left, which is right for a
@@ -1170,20 +1322,101 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
   aside.right > button {
     left: auto;
     right: 0;
-    border-top-left-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
-    border-bottom-left-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-radius: var(--_sidebar-sheet-button-radius);
+    border-top-right-radius: var(--_sidebar-sheet-expand-edge-radius);
+    border-bottom-right-radius: var(--_sidebar-sheet-expand-edge-radius);
   }
   aside.right > button.close {
     left: auto;
     right: calc(var(--sidebar-width) - var(--_sidebar-expander-width));
-    border-top-right-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
-    border-bottom-right-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    border-radius: var(--_sidebar-sheet-button-radius);
+    border-top-left-radius: var(--_sidebar-sheet-collapse-edge-radius);
+    border-bottom-left-radius: var(--_sidebar-sheet-collapse-edge-radius);
+  }
+  aside {
+    /* `sticky`: the sheet follows the reader down the page instead of
+       stretching to the row.
+
+       Sticky needs the sheet back *in flow* -- an absolutely positioned box
+       cannot stick -- but the aside is only a button's width wide and the
+       row's full height, and that height is exactly the range the sheet
+       should be free to travel. So the aside becomes a one-cell grid as tall
+       as its row, and the sheet and its button share that cell, each sticky
+       within it.
+
+       Horizontal placement moves from `left`/`right` onto margins, because on
+       a sticky box `left` and `right` stop being offsets and become sticky
+       insets -- they would pin the button against a sideways-scrolling
+       ancestor rather than place it. The margins reproduce the absolute
+       geometry exactly: the aside is `--gap` plus one button wide, and a
+       sheet or button wider than that spills out of its cell on the side
+       that faces the content. */
+  }
+  aside.sticky {
+    --_sidebar-sheet-top: var(--sidebar-sheet-top, var(--padding));
+    --_sidebar-aside-width: calc(var(--gap) + var(--_sidebar-expander-width));
+    display: grid;
+    grid-template-columns: 100%;
+    align-content: stretch;
+    /* A shut sheet is still in flow now, and would otherwise hold the row
+       open to its own height. The aside's width is set explicitly, so
+       size containment only ever zeroes out the height it would have
+       contributed; the row still stretches it to full height. */
+    contain: size;
+  }
+  aside.sticky > .content, aside.sticky > button.expander, aside.sticky > button.close {
+    grid-area: 1/1;
+    position: sticky;
+    align-self: start;
+    justify-self: start;
+    left: auto;
+    right: auto;
+  }
+  aside.sticky > .content {
+    top: var(--_sidebar-sheet-top);
+    margin-left: 0;
+    height: auto;
+    /* The reserve is a budget for everything that is not the sheet, rather
+       than just the sticky offset: before the sheet sticks -- page scrolled
+       to the top -- its top edge is its row's, which may sit well below the
+       viewport top, and a sheet sized only from the offset would overflow
+       the viewport by exactly that much. Twice the top gives it an even
+       margin at both ends once it has stuck. */
+    max-height: var(--sidebar-sheet-max-height, calc(100dvh - var(--sidebar-sheet-reserve, calc(2 * var(--_sidebar-sheet-top)))));
+    overflow-y: auto;
+    /* A column, so a child with `min-height: 0` and its own overflow can
+       keep a header or footer in view and scroll only its middle. Children
+       that do not opt in keep their size, and the sheet scrolls as a
+       whole. */
+    display: flex;
+    flex-direction: column;
+  }
+  aside.sticky.expandedHamburger > .content {
+    height: auto;
+  }
+  aside.sticky.right > .content {
+    margin-left: calc(var(--_sidebar-aside-width) - var(--sidebar-width));
   }
+  aside.sticky > button.expander, aside.sticky > button.close {
+    top: calc(var(--_sidebar-sheet-top) + var(--padding));
+    margin-top: var(--padding);
+    margin-left: 0;
+    transition: margin-left var(--sidebar-transition);
+  }
+  aside.sticky > button.close {
+    margin-left: calc(var(--sidebar-width) - var(--_sidebar-expander-width));
+  }
+  aside.sticky.right > button.expander {
+    margin-left: var(--gap);
+  }
+  aside.sticky.right > button.close {
+    margin-left: calc(var(--_sidebar-aside-width) - var(--sidebar-width));
+  }
+}
+aside.button-sheet-toggle {
+  --_sidebar-sheet-edge-override: var(--_sidebar-sheet-button-radius);
 }
+
 button::after {
   color: var(--sidebar-icon-fg, var(--fg, currentColor));
   background-position: center;

package/dist/layout/Sidebar.svelte.d.ts

@@ -18,6 +18,40 @@ declare const Sidebar: import("svelte").Component<ContainProps<HTMLAttributes<HT
      * top of the content is worse.
      */
     overlay?: boolean;
+    /**
+     * Pin the sheet to the viewport while the page scrolls past it, instead
+     * of stretching it to the height of whatever it sits beside.
+     *
+     * Without it, an open sheet is as tall as its row -- right beside a
+     * short card, wrong beside a fifty-row table, where the top of the
+     * panel scrolls away and anything at its foot ends up off the bottom of
+     * the page. With it, the sheet (and its button) stick at
+     * `--sidebar-sheet-top` and stop growing at `--sidebar-sheet-max-height`,
+     * scrolling their own content past that.
+     *
+     * Applies wherever the sheet does: any `overlay` sidebar, and any
+     * sidebar in the compact layout. The wide rail is unaffected. Like any
+     * `position: sticky`, it needs every ancestor up to the scrolling one to
+     * leave `overflow` alone.
+     */
+    sticky?: boolean;
+    /**
+     * The shape of the sheet's toggle button (the sheet is what any
+     * `overlay` sidebar, and any sidebar in the compact layout, uses).
+     *
+     * - `"tab"` (default): the corners on the side it attaches to are
+     *   square, so it reads as fastened to that edge -- the page edge while
+     *   shut, the panel's edge while open. Right against a page edge.
+     * - `"button"`: rounded all round like any other button, for a sheet
+     *   that does not sit against an edge -- beside a table, inside page
+     *   padding -- where a half-flat tab looks broken.
+     *
+     * Per-state control, if you need it, is by variable:
+     * `--sidebar-sheet-expand-edge-radius` (the shut button) and
+     * `--sidebar-sheet-collapse-edge-radius` (the open one), both falling
+     * back to `--sidebar-sheet-edge-radius`.
+     */
+    sheetButton?: "tab" | "button";
     /**
      * Whether the sidebar is showing its panel. Bindable, so a caller can
      * drive the sidebar from a button of their own:

package/dist/layout/SidebarContainer.svelte

@@ -18,7 +18,33 @@ const el = $derived(elementProps(restProps, "sidebar-container", [
   {@render children?.()}
 </div>
 
-<style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+<style>/* Per-level heading (h1-h6) box/typography properties, resolved to PRIVATE,
+   inheriting custom properties (--_h1-color, --_h2-font-size, etc) rather than
+   assigned directly to a matched h1-h6 selector. Nothing in this file matches
+   an actual heading element anymore -- see typography-context.css (vars/), which
+   is the single, global, :where()-scoped rule that actually reads these vars
+   and applies them to real elements. That split is what lets a component
+   nested arbitrarily deep (through <article>, <Tile>, whatever) still get the
+   nearest ancestor's heading styling: these are ordinary inherited custom
+   properties, so DOM proximity decides which component's values apply, not
+   selector specificity or stylesheet order. See AGENTS-INTERNAL.md. */
+/* All six heading levels' context vars in one call -- what every
+   "typography container" component (Container, Card, Tile, TextLayout, ...)
+   includes on itself once, alongside the shared --_heading-* vars below. */
+/* Shared prose-measure group: p, blockquote, dl, ul, ol. li/dt/dd don't get
+   their own vars -- they're never wider than their ul/ol/dl parent's own
+   max-width box, so they're already bounded for free by ordinary block
+   layout, not by anything selector-based reaching them individually. */
+/* p specifically also gets the fuller typography-props-bare treatment
+   (paragraph-prefixed), which -- same as in the original selector-based
+   version -- is declared/consumed AFTER the shared prose vars above, so it
+   wins for whichever properties both groups set. */
+/* The first paragraph in a typography context (p:first-of-type, or a p right
+   after a heading) gets its own, slightly different treatment -- larger lede
+   text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
+   has to happen where the real element is, in the global consumer rule; only
+   the VALUES move to context vars here. */
+/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
    one value (both sides equal) or two (start end), so there is no separate
    "which side" prop to remember and no 4-value shorthand order to get wrong.
    Defaults to 0 on purpose -- unlike padding-props above, a margin that