contain-css-svelte 1.4.3 → 1.6.0

package/dist/layout/Page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { elementProps } from "../util";
 import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
 import { onDestroy, onMount } from "svelte";
-const { right = false, sticky = false, hideSidebar = false, hideHeader = false, hideFooter = false, onStickyChange = () => { }, header, footer, sidebar, children, class: className, ...restProps } = $props();
+const { right = false, sticky = false, hideSidebar = false, hideHeader = false, hideFooter = false, compactSidebar, onStickyChange = () => { }, header, footer, sidebar, children, class: className, ...restProps } = $props();
 /* The shorthands page'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. */
@@ -18,9 +18,17 @@ const el = $derived(elementProps(restProps, "page", [
 const hasSidebar = $derived(Boolean(sidebar) && !hideSidebar);
 const hasHeader = $derived(Boolean(header) && !hideHeader);
 const hasFooter = $derived(Boolean(footer) && !hideFooter);
+const sheetSpace = $derived(compactSidebar === "header" || compactSidebar === undefined
+    ? hasHeader
+        ? "header"
+        : "gutter"
+    : compactSidebar);
 // Start "unfrozen" so i.e. scrolling on reload
 // or hash link works properly
 let freeze = $state(false);
+/* Measured so the compact sheet button can be centred in the header row
+   (see the compact block in the styles). */
+let headerHeight = $state(0);
 let pageElement;
 function handleScroll() {
     if (sticky) {
@@ -70,14 +78,18 @@ onMount(() => {
   class:hasHeader
   class:hasSidebar
   class:hasFooter
+  class:sheet-header={sheetSpace === "header"}
+  class:sheet-gutter={sheetSpace === "gutter"}
+  class:sheet-symmetric={sheetSpace === "symmetric"}
+  class:sheet-overlap={sheetSpace === "overlap"}
   bind:this={pageElement}
   {...el}
 >
-  <header>
+  <header bind:clientHeight={headerHeight}>
     {#if hasHeader}{@render header?.()}{/if}
   </header>
   <div class="side-by-side">
-    <div class="aside">
+    <div class="aside" style:--_page-header-height="{headerHeight}px">
       {#if hasSidebar}{@render sidebar?.()}{/if}
     </div>
     <div class="content">
@@ -160,6 +172,38 @@ onMount(() => {
    we deliberately avoid everywhere else.
 
    One definition, used by both, so they cannot drift again. */
+/* The "small" size tier: a component whose container is this wide or less
+   is on a phone, or in a pane about that narrow, and sizes itself for it.
+
+   The convention, shared by every component that has a size worth changing
+   there (Card started it; Tile, GridLayout, Bar and Container follow):
+
+     --{component}-{property}-small
+
+   applies inside a small container. What wins there, in order:
+     1. the `-small` variable, if you set it;
+     2. otherwise the regular variable, if you set it -- a size you chose on
+        purpose is not overridden behind your back;
+     3. otherwise the component's own small default, which for most
+        properties is simply its regular default.
+
+   Container queries can't read a custom property, so the breakpoint itself
+   is fixed here rather than themeable. 600px matches Card and SplitPane,
+   which already switched there. (The Sidebar's rail-to-sheet switch,
+   above, is a separate, layout-chrome decision and keeps its own value.) */
+/* Styles for the small tier: the nearest container is narrow, OR the
+   viewport is.
+
+   The container query is the real answer -- a Tile in a 400px pane on a
+   desktop is small. But a container query only matches inside an ancestor
+   that *is* a container, and a component dropped straight into a page (no
+   Page, no Container around it) has none, so on a phone it would never
+   find out. The viewport query covers that: a narrow viewport means every
+   container in it is narrow too, so the two never disagree in the
+   direction that matters.
+
+   An element never queries itself, so on a component that is its own
+   container (Tile, Bar) this asks about the space it was given. */
 /* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
@@ -305,6 +349,12 @@ footer {
   justify-content: stretch;
 }
 
+.page {
+  /* Containing block for the compact sidebar, which spans the whole page
+     (header included) once it has a header to sit in. */
+  position: relative;
+}
+
 .page.sticky {
   position: sticky;
   top: 0;
@@ -315,6 +365,22 @@ footer {
 }
 
 .content {
+  /* The compact sidebar's reserved strip: at least the content's own
+     padding, at least a sheet button plus a gap. Declared here, where
+     --_padding (contentPadding) is set, so it resolves against it. */
+  --_page-gutter: max(
+    var(--_padding, var(--padding, 0px)),
+    var(
+      --sidebar-compact-side-padding,
+      calc(
+        max(
+            var(--sidebar-icon-width, 0.65rem),
+            var(--sidebar-icon-height, 1rem),
+            var(--icon-size, 32px)
+          ) + var(--gap, 8px)
+      )
+    )
+  );
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;
@@ -486,25 +552,86 @@ footer {
   .side-by-side {
     gap: 0;
   }
+  .page > div > .content {
+    min-width: 0;
+  }
+  /* The sidebar becomes a floating sheet, summoned by a button. The aside
+     holding it is a transparent strip laid over the content; only the
+     Sidebar's button and open sheet catch clicks, never the strip. What
+     room the content makes for the button is the `compactSidebar` mode,
+     below. */
   .hasSidebar > .side-by-side > .aside {
     position: absolute;
     inset-block: 0;
     inset-inline-start: 0;
     z-index: 3;
     display: flex;
-  }
-  .hasSidebar > .side-by-side > .content {
-    padding-inline-start: max(var(--_padding, var(--padding, 0px)), var(--sidebar-compact-side-padding, calc(max(var(--sidebar-icon-width, 0.65rem), var(--sidebar-icon-height, 1rem), var(--icon-size, 32px)) + var(--gap, 8px))));
+    pointer-events: none;
   }
   .hasSidebar.right > .side-by-side > .aside {
     inset-inline-start: auto;
     inset-inline-end: 0;
   }
-  .hasSidebar.right > .side-by-side > .content {
+  /* "gutter": a button-wide strip down the sidebar's side of the content. */
+  .hasSidebar.sheet-gutter:not(.right) > .side-by-side > .content {
+    padding-inline-start: var(--_page-gutter);
+  }
+  .hasSidebar.sheet-gutter.right > .side-by-side > .content {
     padding-inline-start: var(--_padding, var(--padding, 0px));
-    padding-inline-end: max(var(--_padding, var(--padding, 0px)), var(--sidebar-compact-side-padding, calc(max(var(--sidebar-icon-width, 0.65rem), var(--sidebar-icon-height, 1rem), var(--icon-size, 32px)) + var(--gap, 8px))));
+    padding-inline-end: var(--_page-gutter);
   }
-  .page > div > .content {
-    min-width: 0;
+  /* "symmetric": the same strip on both sides, so the column stays
+     centred. */
+  .hasSidebar.sheet-symmetric > .side-by-side > .content {
+    padding-inline: var(--_page-gutter);
+  }
+  /* "overlap" and "header": the content keeps its ordinary, even padding.
+     Under "overlap" the button simply floats over the content's corner. */
+  .hasSidebar.sheet-overlap > .side-by-side > .content,
+  .hasSidebar.sheet-header > .side-by-side > .content {
+    padding-inline: var(--_padding, var(--padding, 0px));
+  }
+  /* "header": the button sits where a menu button is on every phone.
+     - The aside spans the whole page, header included, instead of just
+       the row beside the content, so the button can sit in the header row
+       and the open sheet covers the page top to bottom, like any drawer.
+     - The button is centred in the header's measured height.
+     - The header's content steps aside by the button's width. */
+  .hasSidebar.sheet-header > .side-by-side {
+    position: static;
+  }
+  .hasSidebar.sheet-header > .side-by-side > .aside {
+    --sidebar-sheet-button-top: calc(
+      (var(--_page-header-height, 0px) - var(--_page-sheet-button-size)) / 2
+    );
   }
+  /* It's the header's own content (a Bar, usually) that makes room, not
+     the header box: padding the header would leave a strip of page colour
+     beside a coloured bar. Children passed CSS variables arrive wrapped in
+     a display:contents <svelte-css-wrapper>, hence the second selector. */
+  .hasSidebar.sheet-header:not(.right) > header > :global(*:not(svelte-css-wrapper)),
+  .hasSidebar.sheet-header:not(.right) > header > :global(svelte-css-wrapper > *) {
+    padding-inline-start: var(--_page-header-inset);
+  }
+  .hasSidebar.sheet-header.right > header > :global(*:not(svelte-css-wrapper)),
+  .hasSidebar.sheet-header.right > header > :global(svelte-css-wrapper > *) {
+    padding-inline-end: var(--_page-header-inset);
+  }
+}
+.page {
+  /* Same size the Sidebar gives its sheet button. */
+  --_page-sheet-button-size: max(
+    var(--sidebar-icon-height, 1rem),
+    var(--icon-size, 32px)
+  );
+  --_page-header-inset: var(
+    --page-header-sidebar-inset,
+    calc(
+      max(
+          var(--sidebar-icon-width, 0.65rem),
+          var(--sidebar-icon-height, 1rem),
+          var(--icon-size, 32px)
+        ) + 2 * var(--gap, 8px)
+    )
+  );
 }</style>

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

@@ -8,6 +8,23 @@ declare const Page: import("svelte").Component<ContainProps<HTMLAttributes<HTMLE
     hideSidebar?: boolean;
     hideHeader?: boolean;
     hideFooter?: boolean;
+    /**
+     * Where the sidebar's menu button goes, and what room is made for it,
+     * once the page is narrow enough that the sidebar becomes a sheet:
+     *
+     * - `"header"` (default when there is a header): the button sits in
+     *   the header row and the header's content steps aside for it. The
+     *   page content keeps its ordinary, even padding.
+     * - `"gutter"` (default without a header): a button-wide strip is
+     *   reserved down the sidebar's side of the content.
+     * - `"symmetric"`: the same strip on both sides, so the column stays
+     *   centred at the cost of width on both.
+     * - `"overlap"`: no room is made; the button floats over the top
+     *   corner of the content. Fine when that corner is empty.
+     *
+     * `"header"` with no header showing falls back to `"gutter"`.
+     */
+    compactSidebar?: "header" | "gutter" | "symmetric" | "overlap";
     onStickyChange?: (stuck: boolean) => void;
     header?: Snippet;
     footer?: Snippet;

package/dist/layout/RowContainer.svelte

@@ -92,6 +92,38 @@ const el = $derived(elementProps(restProps, "row-container", ROW_CONTAINER_VARS)
    we deliberately avoid everywhere else.
 
    One definition, used by both, so they cannot drift again. */
+/* The "small" size tier: a component whose container is this wide or less
+   is on a phone, or in a pane about that narrow, and sizes itself for it.
+
+   The convention, shared by every component that has a size worth changing
+   there (Card started it; Tile, GridLayout, Bar and Container follow):
+
+     --{component}-{property}-small
+
+   applies inside a small container. What wins there, in order:
+     1. the `-small` variable, if you set it;
+     2. otherwise the regular variable, if you set it -- a size you chose on
+        purpose is not overridden behind your back;
+     3. otherwise the component's own small default, which for most
+        properties is simply its regular default.
+
+   Container queries can't read a custom property, so the breakpoint itself
+   is fixed here rather than themeable. 600px matches Card and SplitPane,
+   which already switched there. (The Sidebar's rail-to-sheet switch,
+   above, is a separate, layout-chrome decision and keeps its own value.) */
+/* Styles for the small tier: the nearest container is narrow, OR the
+   viewport is.
+
+   The container query is the real answer -- a Tile in a 400px pane on a
+   desktop is small. But a container query only matches inside an ancestor
+   that *is* a container, and a component dropped straight into a page (no
+   Page, no Container around it) has none, so on a phone it would never
+   find out. The viewport query covers that: a narrow viewport means every
+   container in it is narrow too, so the two never disagree in the
+   direction that matters.
+
+   An element never queries itself, so on a component that is its own
+   container (Tile, Bar) this asks about the space it was given. */
 /* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.

package/dist/layout/Sidebar.svelte

@@ -130,6 +130,38 @@ const expandedHamburger = $derived(open ?? false);
    we deliberately avoid everywhere else.
 
    One definition, used by both, so they cannot drift again. */
+/* The "small" size tier: a component whose container is this wide or less
+   is on a phone, or in a pane about that narrow, and sizes itself for it.
+
+   The convention, shared by every component that has a size worth changing
+   there (Card started it; Tile, GridLayout, Bar and Container follow):
+
+     --{component}-{property}-small
+
+   applies inside a small container. What wins there, in order:
+     1. the `-small` variable, if you set it;
+     2. otherwise the regular variable, if you set it -- a size you chose on
+        purpose is not overridden behind your back;
+     3. otherwise the component's own small default, which for most
+        properties is simply its regular default.
+
+   Container queries can't read a custom property, so the breakpoint itself
+   is fixed here rather than themeable. 600px matches Card and SplitPane,
+   which already switched there. (The Sidebar's rail-to-sheet switch,
+   above, is a separate, layout-chrome decision and keeps its own value.) */
+/* Styles for the small tier: the nearest container is narrow, OR the
+   viewport is.
+
+   The container query is the real answer -- a Tile in a 400px pane on a
+   desktop is small. But a container query only matches inside an ancestor
+   that *is* a container, and a component dropped straight into a page (no
+   Page, no Container around it) has none, so on a phone it would never
+   find out. The viewport query covers that: a narrow viewport means every
+   container in it is narrow too, so the two never disagree in the
+   direction that matters.
+
+   An element never queries itself, so on a component that is its own
+   container (Tile, Bar) this asks about the space it was given. */
 /* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
@@ -439,8 +471,14 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
       var(--sidebar-icon-height, 1rem),
       var(--icon-size, 32px)
     );
+    /* Where the open sheet's close button sits: just past the panel's outer
+       edge, but never off the screen. */
+    --_sidebar-close-offset: min(
+      var(--sidebar-width),
+      calc(100vw - var(--_sidebar-expander-width))
+    );
     /* 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
+       side it attaches to -- the page edge while shut, the panel's outer 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. */
@@ -462,6 +500,12 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     position: relative;
     overflow: visible;
     background: transparent;
+    /* The aside is only a transparent strip holding the button and the
+       sheet, and a host may let content run underneath it (Page does, once
+       it has moved the button into its header). The strip itself must not
+       swallow clicks meant for that content; the button and an open sheet
+       turn pointer events back on for themselves. */
+    pointer-events: none;
     width: calc(var(--gap) + max(var(--sidebar-icon-width, 0.65rem), var(--icon-size, 32px)));
     flex: 0 0 auto;
     /* Every child is out of flow, so the aside has no content to hold it
@@ -493,16 +537,13 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     pointer-events: none;
     transition: transform var(--sidebar-transition) ease-in-out, opacity var(--sidebar-transition) ease-in-out;
     padding: var(--padding);
-    /* The close button floats over the panel's inner edge, so the panel has
-       to keep that strip clear or the first nav item sits underneath it.
-
-       Reserved on the inline axis, not the block one: a nav wants the full
-       height, and a blank band across the top of it to clear one button is
-       a poor trade. The cost is that the whole column is a button's width
-       narrower, even well below the button -- override
-       --sidebar-sheet-content-inset to 0 and set your own padding if you
-       would rather have the width back. */
-    padding-inline-end: var(--sidebar-sheet-content-inset, calc(var(--padding) + var(--_sidebar-expander-width)));
+    /* The close button hangs off the panel's outer edge (below), so the
+       panel keeps its whole width. It used to sit inside that edge, which
+       meant reserving a button-wide strip down the full height of the
+       sheet -- a stripe beside every nav item, there only to clear one
+       button at the top. --sidebar-sheet-content-inset brings a reserve
+       back if you want one. */
+    padding-inline-end: var(--sidebar-sheet-content-inset, var(--padding));
   }
   aside.overlay.left > .content {
     border-right: var(--border-width) var(--border-style) var(--border-color);
@@ -518,7 +559,7 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     transform: translateX(100%);
     border-left: var(--border-width) var(--border-style) var(--border-color);
     padding-inline-end: var(--padding);
-    padding-inline-start: var(--sidebar-sheet-content-inset, calc(var(--padding) + var(--_sidebar-expander-width)));
+    padding-inline-start: var(--sidebar-sheet-content-inset, var(--padding));
   }
   aside.overlay.expandedHamburger > .content {
     transform: translateX(0);
@@ -619,7 +660,9 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     opacity: 1;
     pointer-events: all;
     display: block;
-    top: var(--padding);
+    /* A host can line the button up with something of its own -- Page
+       centres it in its header row. */
+    top: var(--sidebar-sheet-button-top, var(--padding));
     left: 0;
     border-radius: var(--_sidebar-sheet-button-radius);
     border-top-left-radius: var(--_sidebar-sheet-expand-edge-radius);
@@ -744,17 +787,14 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     filter: var(--sidebar-mobile-icon-filter, none);
   }
   aside.overlay > button.close {
-    /* Flush inside the panel's inner edge. Adding --padding here pushed the
-       button a padding's worth further in, which left it straddling the
-       edge -- part of it hanging outside the panel -- while the content
-       inset below still reserved the full button width, so the gap between
-       the button and the first nav item came out wider than intended.
-       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));
+    /* Just outside the open panel, fastened to its outer edge like a tab --
+       the same tab the open button was, now on the panel instead of the
+       page edge. Clamped so a sheet nearly as wide as the screen still
+       leaves its close button on screen. */
+    left: var(--_sidebar-close-offset);
     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);
+    border-top-left-radius: var(--_sidebar-sheet-collapse-edge-radius);
+    border-bottom-left-radius: var(--_sidebar-sheet-collapse-edge-radius);
   }
   aside.overlay {
     /* Everything above anchors the button to the left, which is right for a
@@ -774,10 +814,10 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
   }
   aside.overlay.right > button.close {
     left: auto;
-    right: calc(var(--sidebar-width) - var(--_sidebar-expander-width));
+    right: var(--_sidebar-close-offset);
     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);
+    border-top-right-radius: var(--_sidebar-sheet-collapse-edge-radius);
+    border-bottom-right-radius: var(--_sidebar-sheet-collapse-edge-radius);
   }
   aside.overlay {
     /* `sticky`: the sheet follows the reader down the page instead of
@@ -850,13 +890,13 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     transition: margin-left var(--sidebar-transition);
   }
   aside.overlay.sticky > button.close {
-    margin-left: calc(var(--sidebar-width) - var(--_sidebar-expander-width));
+    margin-left: var(--_sidebar-close-offset);
   }
   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));
+    margin-left: calc(var(--_sidebar-aside-width) - var(--_sidebar-close-offset) - var(--_sidebar-expander-width));
   }
   .edge-bar {
     --link-bg: var(--grab-bar-link-bg, var(--sidebar-link-bg, var(--surface-link-bg, inherit)));
@@ -1018,8 +1058,14 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
       var(--sidebar-icon-height, 1rem),
       var(--icon-size, 32px)
     );
+    /* Where the open sheet's close button sits: just past the panel's outer
+       edge, but never off the screen. */
+    --_sidebar-close-offset: min(
+      var(--sidebar-width),
+      calc(100vw - var(--_sidebar-expander-width))
+    );
     /* 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
+       side it attaches to -- the page edge while shut, the panel's outer 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. */
@@ -1041,6 +1087,12 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     position: relative;
     overflow: visible;
     background: transparent;
+    /* The aside is only a transparent strip holding the button and the
+       sheet, and a host may let content run underneath it (Page does, once
+       it has moved the button into its header). The strip itself must not
+       swallow clicks meant for that content; the button and an open sheet
+       turn pointer events back on for themselves. */
+    pointer-events: none;
     width: calc(var(--gap) + max(var(--sidebar-icon-width, 0.65rem), var(--icon-size, 32px)));
     flex: 0 0 auto;
     /* Every child is out of flow, so the aside has no content to hold it
@@ -1072,16 +1124,13 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     pointer-events: none;
     transition: transform var(--sidebar-transition) ease-in-out, opacity var(--sidebar-transition) ease-in-out;
     padding: var(--padding);
-    /* The close button floats over the panel's inner edge, so the panel has
-       to keep that strip clear or the first nav item sits underneath it.
-
-       Reserved on the inline axis, not the block one: a nav wants the full
-       height, and a blank band across the top of it to clear one button is
-       a poor trade. The cost is that the whole column is a button's width
-       narrower, even well below the button -- override
-       --sidebar-sheet-content-inset to 0 and set your own padding if you
-       would rather have the width back. */
-    padding-inline-end: var(--sidebar-sheet-content-inset, calc(var(--padding) + var(--_sidebar-expander-width)));
+    /* The close button hangs off the panel's outer edge (below), so the
+       panel keeps its whole width. It used to sit inside that edge, which
+       meant reserving a button-wide strip down the full height of the
+       sheet -- a stripe beside every nav item, there only to clear one
+       button at the top. --sidebar-sheet-content-inset brings a reserve
+       back if you want one. */
+    padding-inline-end: var(--sidebar-sheet-content-inset, var(--padding));
   }
   aside.left > .content {
     border-right: var(--border-width) var(--border-style) var(--border-color);
@@ -1097,7 +1146,7 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     transform: translateX(100%);
     border-left: var(--border-width) var(--border-style) var(--border-color);
     padding-inline-end: var(--padding);
-    padding-inline-start: var(--sidebar-sheet-content-inset, calc(var(--padding) + var(--_sidebar-expander-width)));
+    padding-inline-start: var(--sidebar-sheet-content-inset, var(--padding));
   }
   aside.expandedHamburger > .content {
     transform: translateX(0);
@@ -1198,7 +1247,9 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     opacity: 1;
     pointer-events: all;
     display: block;
-    top: var(--padding);
+    /* A host can line the button up with something of its own -- Page
+       centres it in its header row. */
+    top: var(--sidebar-sheet-button-top, var(--padding));
     left: 0;
     border-radius: var(--_sidebar-sheet-button-radius);
     border-top-left-radius: var(--_sidebar-sheet-expand-edge-radius);
@@ -1323,17 +1374,14 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     filter: var(--sidebar-mobile-icon-filter, none);
   }
   aside > button.close {
-    /* Flush inside the panel's inner edge. Adding --padding here pushed the
-       button a padding's worth further in, which left it straddling the
-       edge -- part of it hanging outside the panel -- while the content
-       inset below still reserved the full button width, so the gap between
-       the button and the first nav item came out wider than intended.
-       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));
+    /* Just outside the open panel, fastened to its outer edge like a tab --
+       the same tab the open button was, now on the panel instead of the
+       page edge. Clamped so a sheet nearly as wide as the screen still
+       leaves its close button on screen. */
+    left: var(--_sidebar-close-offset);
     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);
+    border-top-left-radius: var(--_sidebar-sheet-collapse-edge-radius);
+    border-bottom-left-radius: var(--_sidebar-sheet-collapse-edge-radius);
   }
   aside {
     /* Everything above anchors the button to the left, which is right for a
@@ -1353,10 +1401,10 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
   }
   aside.right > button.close {
     left: auto;
-    right: calc(var(--sidebar-width) - var(--_sidebar-expander-width));
+    right: var(--_sidebar-close-offset);
     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);
+    border-top-right-radius: var(--_sidebar-sheet-collapse-edge-radius);
+    border-bottom-right-radius: var(--_sidebar-sheet-collapse-edge-radius);
   }
   aside {
     /* `sticky`: the sheet follows the reader down the page instead of
@@ -1429,13 +1477,13 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     transition: margin-left var(--sidebar-transition);
   }
   aside.sticky > button.close {
-    margin-left: calc(var(--sidebar-width) - var(--_sidebar-expander-width));
+    margin-left: var(--_sidebar-close-offset);
   }
   aside.sticky.right > button.expander {
     margin-left: var(--gap);
   }
   aside.sticky.right > button.close {
-    margin-left: calc(var(--_sidebar-aside-width) - var(--sidebar-width));
+    margin-left: calc(var(--_sidebar-aside-width) - var(--_sidebar-close-offset) - var(--_sidebar-expander-width));
   }
 }
 aside.button-sheet-toggle {

package/dist/layout/SidebarContainer.svelte

@@ -89,6 +89,38 @@ const el = $derived(elementProps(restProps, "sidebar-container", [
    we deliberately avoid everywhere else.
 
    One definition, used by both, so they cannot drift again. */
+/* The "small" size tier: a component whose container is this wide or less
+   is on a phone, or in a pane about that narrow, and sizes itself for it.
+
+   The convention, shared by every component that has a size worth changing
+   there (Card started it; Tile, GridLayout, Bar and Container follow):
+
+     --{component}-{property}-small
+
+   applies inside a small container. What wins there, in order:
+     1. the `-small` variable, if you set it;
+     2. otherwise the regular variable, if you set it -- a size you chose on
+        purpose is not overridden behind your back;
+     3. otherwise the component's own small default, which for most
+        properties is simply its regular default.
+
+   Container queries can't read a custom property, so the breakpoint itself
+   is fixed here rather than themeable. 600px matches Card and SplitPane,
+   which already switched there. (The Sidebar's rail-to-sheet switch,
+   above, is a separate, layout-chrome decision and keeps its own value.) */
+/* Styles for the small tier: the nearest container is narrow, OR the
+   viewport is.
+
+   The container query is the real answer -- a Tile in a 400px pane on a
+   desktop is small. But a container query only matches inside an ancestor
+   that *is* a container, and a component dropped straight into a page (no
+   Page, no Container around it) has none, so on a phone it would never
+   find out. The viewport query covers that: a narrow viewport means every
+   container in it is narrow too, so the two never disagree in the
+   direction that matters.
+
+   An element never queries itself, so on a component that is its own
+   container (Tile, Bar) this asks about the space it was given. */
 /* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.

package/dist/layout/SplitPane.svelte

@@ -187,6 +187,38 @@ onMount(() => {
    we deliberately avoid everywhere else.
 
    One definition, used by both, so they cannot drift again. */
+/* The "small" size tier: a component whose container is this wide or less
+   is on a phone, or in a pane about that narrow, and sizes itself for it.
+
+   The convention, shared by every component that has a size worth changing
+   there (Card started it; Tile, GridLayout, Bar and Container follow):
+
+     --{component}-{property}-small
+
+   applies inside a small container. What wins there, in order:
+     1. the `-small` variable, if you set it;
+     2. otherwise the regular variable, if you set it -- a size you chose on
+        purpose is not overridden behind your back;
+     3. otherwise the component's own small default, which for most
+        properties is simply its regular default.
+
+   Container queries can't read a custom property, so the breakpoint itself
+   is fixed here rather than themeable. 600px matches Card and SplitPane,
+   which already switched there. (The Sidebar's rail-to-sheet switch,
+   above, is a separate, layout-chrome decision and keeps its own value.) */
+/* Styles for the small tier: the nearest container is narrow, OR the
+   viewport is.
+
+   The container query is the real answer -- a Tile in a 400px pane on a
+   desktop is small. But a container query only matches inside an ancestor
+   that *is* a container, and a component dropped straight into a page (no
+   Page, no Container around it) has none, so on a phone it would never
+   find out. The viewport query covers that: a narrow viewport means every
+   container in it is narrow too, so the two never disagree in the
+   direction that matters.
+
+   An element never queries itself, so on a component that is its own
+   container (Tile, Bar) this asks about the space it was given. */
 /* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.