contain-css-svelte 1.4.3 → 1.5.0

package/dist/layout/Inline.svelte

@@ -103,6 +103,38 @@ const el = $derived(elementProps({ justify, align, gap, wrap, ...restProps }, "i
    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.
@@ -135,7 +167,11 @@ const el = $derived(elementProps({ justify, align, gap, wrap, ...restProps }, "i
   margin-inline: var(--_margin-inline);
   display: flex;
   flex-direction: row;
-  flex-wrap: var(--inline-wrap, nowrap);
+  /* Wraps by default, like Bar: a row of tags or choices that can't wrap
+     just pushes past its container the moment the container is narrow.
+     Pass wrap="nowrap" (or --inline-wrap) for a row that must stay on one
+     line -- and then give its children room to shrink. */
+  flex-wrap: var(--inline-wrap, wrap);
   gap: var(--inline-gap, var(--gap));
   justify-content: var(--inline-justify, flex-start);
   align-items: var(--inline-align, center);

package/dist/layout/MenuList.svelte

@@ -97,6 +97,38 @@ const el = $derived(elementProps(restProps, "menu", [
    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/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.