contain-css-svelte 1.2.3 → 1.3.0

package/dist/layout/Table.svelte

@@ -1,184 +1,235 @@
 <script lang="ts">/* No attribute pass-through, deliberately: the sticky variant renders the
-   visible tables AND a visually-hidden clone of them used to measure column
-   widths. Spreading a caller's `id` would emit it twice, which is invalid.
-   Set attributes on the <table> markup you pass in as `thead`/`tbody`. */
+   header twice -- once as the visible sticky <table>, once collapsed inside
+   the body table so the browser sizes the columns from it. Spreading a
+   caller's `id` would emit it twice, which is invalid. Set attributes on the
+   <table> markup you pass in as `thead`/`tbody`. */
 let { sticky = false, column_widths = null, thead, tbody, children, } = $props();
 // svelte-ignore state_referenced_locally
 let columns = $state(column_widths || []);
-/* Code for syncing column widths for scrolling table solution */
-let headClone = $state(null);
-let bodyClone = $state(null);
+/* Column-width syncing for the sticky-header layout.
+
+   The sticky header and the scrolling body have to look like one table, but
+   a single <table> cannot do it: `position: sticky` on a <thead> loses its
+   borders under `border-collapse: collapse` (verified in Chromium, Firefox
+   and WebKit), and this library's whole border system is built on collapsed
+   borders. So the header is its own <table>, sized from a measured colgroup.
+
+   The trick that keeps that honest: the body table renders the REAL <thead>
+   too, at `visibility: collapse`. That keeps the header's full contribution
+   to column widths while costing zero vertical space -- so the browser sizes
+   the columns from header and body together, in one ordinary layout pass.
+   There is nothing to blend, nothing measured against the wrong containing
+   block, and no second copy of the body.
+
+   `visibility: collapse` also drops that copy out of the accessibility tree
+   and out of the tab order in all three engines, so its duplicated controls
+   are inert without needing the `inert` attribute. Note the consequence: the
+   body table has no exposed column headers -- the visible sticky header is
+   the accessible one. That matches the previous behavior, but it is a real
+   gap, and only a genuine single-table layout would close it. */
+let bodyTable = $state(null);
+let headTable = $state(null);
+let columnCount = $state(0);
+/* See trimHeadOverhang(): a fixed-layout table's collapsed outer borders
+   make it render a little wider than the width we ask for. */
+let overhang = $state(0);
 let resizeObserver = $state(null);
 let tableWidth = $state(null);
 import { onDestroy } from "svelte";
 onDestroy(() => {
-    if (resizeObserver) {
-        if (headClone)
-            resizeObserver.unobserve(headClone);
-        if (bodyClone)
-            resizeObserver.unobserve(bodyClone);
-        resizeObserver.disconnect();
-        resizeObserver = null;
-    }
+    resizeObserver?.disconnect();
+    resizeObserver = null;
 });
+/* How many columns the table has. Pure colspan arithmetic over every row --
+   no widths involved, so this is exact even when every row carries a colspan.
+   The widest row wins, which also covers rows shortened by a rowspan above. */
+function countColumns(table) {
+    let max = 0;
+    for (const row of Array.from(table.rows)) {
+        let n = 0;
+        for (const cell of Array.from(row.cells))
+            n += cell.colSpan || 1;
+        if (n > max)
+            max = n;
+    }
+    return max;
+}
+/* Read the column widths off the ruler row: one empty, borderless, zero-
+   height cell per column, sitting in the real table. Because it is built to
+   have exactly one cell per column, there is no "find a row without a
+   colspan" guesswork and no dividing a spanned cell evenly and hoping. */
+function measureRuler(table) {
+    const row = table.querySelector(".column-ruler > tr");
+    if (!row)
+        return [];
+    return Array.from(row.children).map((cell) => cell.getBoundingClientRect().width);
+}
+/* The table's own width is the truth; the per-cell widths only give the
+   proportions. They don't add up to it, because `border-collapse: collapse`
+   makes adjacent cells share a border that each of them reports in full, so
+   the sum overshoots by about one border per interior boundary. Left alone,
+   that makes the header table wider than the body it sits on. The overcount
+   is a constant per boundary rather than a percentage, so spread it evenly. */
+function fitToTableWidth(widths, width) {
+    if (!widths.length || !width)
+        return widths;
+    const total = widths.reduce((sum, w) => sum + w, 0);
+    const delta = total - width;
+    if (Math.abs(delta) < 0.5)
+        return widths;
+    const perColumn = delta / widths.length;
+    return widths.map((w) => Math.max(0, w - perColumn));
+}
 function syncColumnWidths() {
-    if (!headClone || !bodyClone)
+    if (!bodyTable)
+        return;
+    /* First pass sizes the ruler. Rendering it makes this effect run again,
+       and the second pass does the measuring. */
+    const count = countColumns(bodyTable);
+    if (count !== columnCount) {
+        columnCount = count;
+        corrections = 0;
         return;
-    const getFlattenedCellWidths = (row) => {
-        if (!row)
-            return [];
-        const cells = Array.from(row.children);
-        const colWidths = [];
-        let colIndex = 0;
-        for (const cell of cells) {
-            const colspan = parseInt(cell.getAttribute("colspan") || "1", 10);
-            const width = cell.offsetWidth / colspan;
-            for (let j = 0; j < colspan; j++) {
-                colWidths[colIndex++] = width;
-            }
-        }
-        return colWidths;
-    };
-    const getTotalCols = (row) => {
-        if (!row)
-            return 0;
-        return Array.from(row.children).reduce((acc, cell) => acc + parseInt(cell.getAttribute("colspan") || "1", 10), 0);
-    };
-    const hasNoColspan = (row) => !Array.from(row.children).some((cell) => cell.hasAttribute("colspan"));
-    const findBestRow = (table) => {
-        // Fast path: first row covers the vast majority of real tables
-        const firstRow = table.querySelector("tbody tr, tr");
-        if (firstRow && hasNoColspan(firstRow))
-            return firstRow;
-        // Slow path: single pass — return on first no-colspan row found,
-        // while simultaneously tracking the least-colspan row as a fallback.
-        let best = null;
-        let bestSpanCount = Infinity;
-        for (const row of table.querySelectorAll("tr")) {
-            if (hasNoColspan(row))
-                return row;
-            const spanCount = getTotalCols(row);
-            if (spanCount < bestSpanCount) {
-                bestSpanCount = spanCount;
-                best = row;
-            }
-        }
-        return best;
-    };
-    // Step 1: pick best candidate rows
-    let headRow = findBestRow(headClone);
-    let bodyRow = findBestRow(bodyClone);
-    // Step 2: if their total col counts don't match, try to find a pair that does
-    if (headRow && bodyRow && getTotalCols(headRow) !== getTotalCols(bodyRow)) {
-        const headRows = Array.from(headClone.querySelectorAll("tr"));
-        const bodyRows = Array.from(bodyClone.querySelectorAll("tr"));
-        outer: for (const hr of headRows) {
-            const hCols = getTotalCols(hr);
-            for (const br of bodyRows) {
-                if (hCols === getTotalCols(br)) {
-                    headRow = hr;
-                    bodyRow = br;
-                    break outer;
-                }
-            }
-        }
-    }
-    // Step 3: flatten widths and compute max
-    const headWidths = getFlattenedCellWidths(headRow);
-    const bodyWidths = getFlattenedCellWidths(bodyRow);
-    const numCols = Math.max(headWidths.length, bodyWidths.length);
-    const maxColWidths = [];
-    for (let i = 0; i < numCols; i++) {
-        maxColWidths[i] = Math.max(headWidths[i] || 0, bodyWidths[i] || 0);
     }
-    columns = maxColWidths;
-    fitTableToColGroup(columns);
+    const widths = measureRuler(bodyTable);
+    if (!widths.length)
+        return;
+    const width = bodyTable.getBoundingClientRect().width;
+    columns = fitToTableWidth(widths, width - overhang);
+    tableWidth = width - overhang;
 }
-function fitTableToColGroup(columns) {
-    let totalWidth = 0;
-    for (let c of columns) {
-        totalWidth += c;
-    }
-    tableWidth = totalWidth;
+/* The header table is `table-layout: fixed` with `box-sizing: border-box`,
+   and under `border-collapse: collapse` its outer borders are added on top
+   of the column widths -- so it renders a pixel or two wider than the width
+   we set, and its right edge overhangs the body. The amount isn't derivable
+   from the computed border widths (it differs per table), so measure it once
+   and fold it back in. One correction converges; the guard stops it from
+   hunting if a layout ever refuses to settle. */
+let corrections = 0;
+function trimHeadOverhang() {
+    if (!headTable || !bodyTable || !columns.length)
+        return;
+    const delta = headTable.getBoundingClientRect().width -
+        bodyTable.getBoundingClientRect().width;
+    if (Math.abs(delta) < 0.5 || corrections > 3)
+        return;
+    corrections += 1;
+    overhang += delta;
+    syncColumnWidths();
 }
-let hasInitialized = $state(false);
 $effect(() => {
-    if (thead && sticky && !hasInitialized) {
-        setupWidths();
-    }
+    if (column_widths || !sticky || !thead || !bodyTable)
+        return;
+    // Read columnCount so this re-runs once the ruler row has rendered.
+    columnCount;
+    syncColumnWidths();
+    observeColumns();
 });
-function setupWidths() {
-    if (column_widths)
+$effect(() => {
+    columns;
+    trimHeadOverhang();
+});
+/* Keep columns in sync as the table changes underneath us.
+
+   Watching the table itself is not enough, and this is the subtle one:
+   reordering columns leaves the table exactly the same width, so a
+   ResizeObserver on the table never fires -- yet every column width has
+   moved and the header's colgroup is now stale. (Consumers have had to
+   paper over this by remounting the component on a column-set key.)
+
+   So observe the ruler cells: one per column, they ARE the quantity being
+   copied into the colgroup. Reorder them and they swap widths, which fires;
+   resize the container and they all change, which fires. Swap two columns of
+   identical width and nothing fires -- correctly, because the colgroup would
+   be unchanged. ResizeObserver reports them despite `visibility: collapse`,
+   verified in Chromium, Firefox and WebKit.
+
+   Debounced via rAF so a burst of Svelte updates costs one sync per frame. */
+let observedCount = -1;
+let observedRuler = null;
+function observeColumns() {
+    if (!bodyTable)
         return;
-    // If no column widths provided, reset columns to empty
-    columns = [];
-    if (thead && sticky && headClone && bodyClone) {
-        syncColumnWidths();
-        // Set up ResizeObserver to keep columns in sync when content or size changes.
-        // Debounce via rAF so rapid Svelte updates only trigger one sync per frame.
-        if (!resizeObserver &&
-            typeof window !== "undefined" &&
-            window.ResizeObserver) {
-            let rafPending = false;
-            resizeObserver = new ResizeObserver(() => {
-                if (!rafPending) {
-                    rafPending = true;
-                    requestAnimationFrame(() => {
-                        rafPending = false;
-                        syncColumnWidths();
-                    });
-                }
+    if (typeof window === "undefined" || !window.ResizeObserver)
+        return;
+    const cells = Array.from(bodyTable.querySelectorAll(".column-ruler > tr > td"));
+    // The ruler is rendered a tick after the column count is known, so the
+    // first call through here finds nothing. Bail without recording anything,
+    // and the effect that set the count will bring us straight back.
+    if (!cells.length)
+        return;
+    // Re-attach only when the ruler actually changed, or the observation
+    // callback that firing `observe()` produces would re-enter and loop.
+    if (observedRuler === cells[0] && observedCount === cells.length)
+        return;
+    observedRuler = cells[0];
+    observedCount = cells.length;
+    if (!resizeObserver) {
+        let rafPending = false;
+        resizeObserver = new ResizeObserver(() => {
+            if (rafPending)
+                return;
+            rafPending = true;
+            requestAnimationFrame(() => {
+                rafPending = false;
+                /* A fresh layout, so the overhang may be re-measured. Correcting
+                   only ever touches the header table, never the observed ruler, so
+                   this cannot re-enter. */
+                corrections = 0;
+                syncColumnWidths();
             });
-            if (headClone)
-                resizeObserver.observe(headClone);
-            if (bodyClone)
-                resizeObserver.observe(bodyClone);
-        }
-        hasInitialized = true;
+        });
     }
+    resizeObserver.disconnect();
+    resizeObserver.observe(bodyTable);
+    for (const cell of cells)
+        resizeObserver.observe(cell);
 }
 </script>
 
 {#if sticky}
   {#if thead}
     <div class="scrolling-table">
+      <!-- The visible, interactive header. Sticky as a whole <table>, because
+           a sticky <thead> loses its borders under border-collapse: collapse.
+           Its colgroup is copied from the real table's measured columns. -->
       <table
         class="fixed-table-head"
-        style:width="{tableWidth}px"
-        style:max-width="{tableWidth}px"
+        bind:this={headTable}
+        style:width={tableWidth ? `${tableWidth}px` : null}
+        style:max-width={tableWidth ? `${tableWidth}px` : null}
       >
-        <colgroup>
-          {#each columns as width}
-            <col style="width: {width}px" />
-          {/each}
-        </colgroup>
+        {#if columns.length}
+          <colgroup>
+            {#each columns as width}
+              <col style="width: {width}px" />
+            {/each}
+          </colgroup>
+        {/if}
         {@render thead?.()}
       </table>
-      <table
-        class="scrolling-table-body"
-        style:width="{tableWidth}px"
-        style:max-width="{tableWidth}px"
-      >
-        <colgroup>
-          {#each columns as width}
-            <col style="width: {width}px" />
-          {/each}
-        </colgroup>
-        {@render tbody?.()}
-        <!-- Table body content -->
-        {@render children?.()}
-        <!-- default slot for additional content -->
-      </table>
-    </div>
-    <div class="visually-hidden">
-      <table class="fixed-table-head" bind:this={headClone}>
+
+      <!-- The real table. It carries the header as well as the body, so the
+           browser sizes the columns from both at once; the header copy is
+           collapsed in CSS, keeping its width contribution at zero height. -->
+      <table class="scrolling-table-body" bind:this={bodyTable}>
         {@render thead?.()}
-      </table>
-      <table class="scrolling-table-body" bind:this={bodyClone}>
         {@render tbody?.()}
         <!-- Table body content -->
         {@render children?.()}
         <!-- default slot for additional content -->
+        {#if columnCount}
+          <!-- The ruler: one cell per column, so column widths can be read
+               directly instead of guessed at from whichever row looks safe.
+               Collapsed, so it costs no height and contributes no width. -->
+          <tbody class="column-ruler" aria-hidden="true">
+            <tr>
+              {#each { length: columnCount } as _}
+                <td></td>
+              {/each}
+            </tr>
+          </tbody>
+        {/if}
       </table>
     </div>
   {:else}
@@ -209,6 +260,18 @@ function setupWidths() {
    day this mixin got added to a new component. Callers opt in with an actual
    value. (Container does not use this mixin: it wants --gap/auto as its
    defaults, which do not fit the "0 unless asked" contract here.) */
+/* The width at or below which a Sidebar swaps its grab-bar rail for the sheet
+   affordance -- a floating button that opens a panel over the content.
+
+   Page has to agree with Sidebar about this, because Page is what floats the
+   aside out of flow and reserves the strip of padding the sheet button sits
+   in. They used to disagree: Sidebar switched at 512px and Page at 600px,
+   which left a band between 513 and 600 where Page had already lifted the
+   aside out of the layout while the Sidebar inside it was still showing a
+   rail -- a grab bar floating on top of the content, which is the affordance
+   we deliberately avoid everywhere else.
+
+   One definition, used by both, so they cannot drift again. */
 /* 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.
@@ -1108,11 +1171,30 @@ table :global(tr > th:first-child:has(~ td)) {
   border-top: none;
 }
 
-.visually-hidden {
-  visibility: hidden;
-  /* opacity: 0.5; */
-  pointer-events: none;
-  position: fixed;
+/* The body table's own copy of the header. `visibility: collapse` is the
+   one primitive that keeps a row group's contribution to column widths while
+   reclaiming all of its vertical space -- so the browser solves the columns
+   from header and body in a single pass, and the visible sticky header just
+   copies the answer. Verified in Chromium, Firefox and WebKit, under
+   `border-collapse: collapse` as well as `separate`.
+
+   `visibility: hidden` will NOT do: it keeps the header's full height and
+   you get a blank gap. `display: none` is worse -- no layout, nothing to
+   measure, and the columns size from the body alone. */
+.scrolling-table-body > :global(thead) {
+  visibility: collapse;
+}
+
+/* One cell per column, so widths can be read off directly. Collapsed for
+   zero height, and stripped of padding and borders so it can never be the
+   thing that decides a column's minimum width. */
+.column-ruler {
+  visibility: collapse;
+}
+
+.column-ruler > tr > td {
+  padding: 0;
+  border: 0;
 }
 
 /* Interactive affordances: target rows/cells with tabindex for keyboard accessibility */

package/dist/layout/Tile.svelte

@@ -79,6 +79,18 @@ const className = $derived(props.class);
    day this mixin got added to a new component. Callers opt in with an actual
    value. (Container does not use this mixin: it wants --gap/auto as its
    defaults, which do not fit the "0 unless asked" contract here.) */
+/* The width at or below which a Sidebar swaps its grab-bar rail for the sheet
+   affordance -- a floating button that opens a panel over the content.
+
+   Page has to agree with Sidebar about this, because Page is what floats the
+   aside out of flow and reserves the strip of padding the sheet button sits
+   in. They used to disagree: Sidebar switched at 512px and Page at 600px,
+   which left a band between 513 and 600 where Page had already lifted the
+   aside out of the layout while the Sidebar inside it was still showing a
+   rail -- a grab bar floating on top of the content, which is the affordance
+   we deliberately avoid everywhere else.
+
+   One definition, used by both, so they cannot drift again. */
 /* 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/misc/CodeInner.svelte

@@ -24,6 +24,18 @@ let highlightedCode = $derived.by(() => {
    day this mixin got added to a new component. Callers opt in with an actual
    value. (Container does not use this mixin: it wants --gap/auto as its
    defaults, which do not fit the "0 unless asked" contract here.) */
+/* The width at or below which a Sidebar swaps its grab-bar rail for the sheet
+   affordance -- a floating button that opens a panel over the content.
+
+   Page has to agree with Sidebar about this, because Page is what floats the
+   aside out of flow and reserves the strip of padding the sheet button sits
+   in. They used to disagree: Sidebar switched at 512px and Page at 600px,
+   which left a band between 513 and 600 where Page had already lifted the
+   aside out of the layout while the Sidebar inside it was still showing a
+   rail -- a grab bar floating on top of the content, which is the affordance
+   we deliberately avoid everywhere else.
+
+   One definition, used by both, so they cannot drift again. */
 /* 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/misc/Progress.svelte

@@ -71,6 +71,18 @@ let halfFull = $derived(fillFraction > 0.5);
    day this mixin got added to a new component. Callers opt in with an actual
    value. (Container does not use this mixin: it wants --gap/auto as its
    defaults, which do not fit the "0 unless asked" contract here.) */
+/* The width at or below which a Sidebar swaps its grab-bar rail for the sheet
+   affordance -- a floating button that opens a panel over the content.
+
+   Page has to agree with Sidebar about this, because Page is what floats the
+   aside out of flow and reserves the strip of padding the sheet button sits
+   in. They used to disagree: Sidebar switched at 512px and Page at 600px,
+   which left a band between 513 and 600 where Page had already lifted the
+   aside out of the layout while the Sidebar inside it was still showing a
+   rail -- a grab bar floating on top of the content, which is the affordance
+   we deliberately avoid everywhere else.
+
+   One definition, used by both, so they cannot drift again. */
 /* 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/misc/Tag.svelte

@@ -38,6 +38,18 @@ const el = $derived(elementProps(restProps, "tag", TAG_VARS));
    day this mixin got added to a new component. Callers opt in with an actual
    value. (Container does not use this mixin: it wants --gap/auto as its
    defaults, which do not fit the "0 unless asked" contract here.) */
+/* The width at or below which a Sidebar swaps its grab-bar rail for the sheet
+   affordance -- a floating button that opens a panel over the content.
+
+   Page has to agree with Sidebar about this, because Page is what floats the
+   aside out of flow and reserves the strip of padding the sheet button sits
+   in. They used to disagree: Sidebar switched at 512px and Page at 600px,
+   which left a band between 513 and 600 where Page had already lifted the
+   aside out of the layout while the Sidebar inside it was still showing a
+   rail -- a grab bar floating on top of the content, which is the affordance
+   we deliberately avoid everywhere else.
+
+   One definition, used by both, so they cannot drift again. */
 /* 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/overlays/Dialog.svelte

@@ -85,6 +85,18 @@ let ref;
    day this mixin got added to a new component. Callers opt in with an actual
    value. (Container does not use this mixin: it wants --gap/auto as its
    defaults, which do not fit the "0 unless asked" contract here.) */
+/* The width at or below which a Sidebar swaps its grab-bar rail for the sheet
+   affordance -- a floating button that opens a panel over the content.
+
+   Page has to agree with Sidebar about this, because Page is what floats the
+   aside out of flow and reserves the strip of padding the sheet button sits
+   in. They used to disagree: Sidebar switched at 512px and Page at 600px,
+   which left a band between 513 and 600 where Page had already lifted the
+   aside out of the layout while the Sidebar inside it was still showing a
+   rail -- a grab bar floating on top of the content, which is the affordance
+   we deliberately avoid everywhere else.
+
+   One definition, used by both, so they cannot drift again. */
 /* 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/overlays/Tooltip.svelte

@@ -307,6 +307,18 @@ async function showPopover() {
    day this mixin got added to a new component. Callers opt in with an actual
    value. (Container does not use this mixin: it wants --gap/auto as its
    defaults, which do not fit the "0 unless asked" contract here.) */
+/* The width at or below which a Sidebar swaps its grab-bar rail for the sheet
+   affordance -- a floating button that opens a panel over the content.
+
+   Page has to agree with Sidebar about this, because Page is what floats the
+   aside out of flow and reserves the strip of padding the sheet button sits
+   in. They used to disagree: Sidebar switched at 512px and Page at 600px,
+   which left a band between 513 and 600 where Page had already lifted the
+   aside out of the layout while the Sidebar inside it was still showing a
+   rail -- a grab bar floating on top of the content, which is the affordance
+   we deliberately avoid everywhere else.
+
+   One definition, used by both, so they cannot drift again. */
 /* 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/sass/_responsive.scss

@@ -1,3 +1,18 @@
+/* The width at or below which a Sidebar swaps its grab-bar rail for the sheet
+   affordance -- a floating button that opens a panel over the content.
+
+   Page has to agree with Sidebar about this, because Page is what floats the
+   aside out of flow and reserves the strip of padding the sheet button sits
+   in. They used to disagree: Sidebar switched at 512px and Page at 600px,
+   which left a band between 513 and 600 where Page had already lifted the
+   aside out of the layout while the Sidebar inside it was still showing a
+   rail -- a grab bar floating on top of the content, which is the affordance
+   we deliberately avoid everywhere else.
+
+   One definition, used by both, so they cannot drift again. */
+$sidebar-compact-max: 512px;
+$sidebar-wide-min: 513px;
+
 
 /* Warning: because we define a fallback
   media query, the media query can override the container

package/dist/typography/TextLayout.svelte

@@ -15,6 +15,18 @@ const el = $derived(elementProps(restProps, "text-layout", ["marginBlock", "marg
    day this mixin got added to a new component. Callers opt in with an actual
    value. (Container does not use this mixin: it wants --gap/auto as its
    defaults, which do not fit the "0 unless asked" contract here.) */
+/* The width at or below which a Sidebar swaps its grab-bar rail for the sheet
+   affordance -- a floating button that opens a panel over the content.
+
+   Page has to agree with Sidebar about this, because Page is what floats the
+   aside out of flow and reserves the strip of padding the sheet button sits
+   in. They used to disagree: Sidebar switched at 512px and Page at 600px,
+   which left a band between 513 and 600 where Page had already lifted the
+   aside out of the layout while the Sidebar inside it was still showing a
+   rail -- a grab bar floating on top of the content, which is the affordance
+   we deliberately avoid everywhere else.
+
+   One definition, used by both, so they cannot drift again. */
 /* 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contain-css-svelte",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "license": "MIT",
   "scripts": {
     "capture:review": "node scripts/capture-review.mjs",