contain-css-svelte 1.4.2 → 1.5.0

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.

package/dist/layout/Stack.svelte

@@ -103,6 +103,38 @@ const el = $derived(elementProps({ justify, align: resolvedAlign, gap, ...restPr
    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/TabBar.svelte

@@ -2,7 +2,7 @@
 import TabItem from "../controls/TabItem.svelte";
 import { elementProps } from "../util";
 import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
-let { sticky = false, active = $bindable(null), items = [], onchange, children, class: className, ...restProps } = $props();
+let { sticky = false, wrap = false, active = $bindable(null), items = [], onchange, children, actions, class: className, ...restProps } = $props();
 /* The shorthands this component'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. */
@@ -14,7 +14,7 @@ const el = $derived(elementProps(restProps, "tab-bar", TAB_BAR_VARS));
 let lastActive = $state(active);
 </script>
 
-<div class={["tabs", className]} class:sticky {...el}>
+{#snippet strip()}
   <Bar
     padding="0"
     --button-height="var(--tab-bar-height, 3em)"
@@ -23,11 +23,15 @@ let lastActive = $state(active);
     --bar-fg="var(--tab-bar-fg, var(--bar-fg))"
     --bar-bg="var(--tab-bar-bg, var(--bar-bg))"
     --bar-align="var(--tab-bar-align, flex-end)"
-    --bar-overflow="hidden"
+    --bar-overflow="var(--tab-bar-overflow, auto hidden)"
+    --bar-wrap="var(--tab-bar-wrap, nowrap)"
     --bar-border-left="var(--tab-bar-border-left, none)"
     --bar-border-right="var(--tab-bar-border-right, none)"
     --bar-border-top="var(--tab-bar-border-top, none)"
-    --bar-border-bottom="var(--tab-bar-border-bottom, var(--border-width) var(--border-style) var(--border-color))"
+    --bar-border-bottom={actions
+      ? "none"
+      : "var(--tab-bar-border-bottom, var(--border-width) var(--border-style) var(--border-color))"}
+    --bar-margin-block={actions ? "0" : undefined}
   >
     {#each items as item}
       {@const value = typeof item === "string" ? item : item.value}
@@ -44,6 +48,23 @@ let lastActive = $state(active);
     {/each}
     {@render children?.()}
   </Bar>
+{/snippet}
+
+<div
+  class={["tabs", className]}
+  class:sticky
+  class:wrap-tabs={wrap}
+  class:has-actions={!!actions}
+  {...el}
+>
+  {#if actions}
+    <!-- The strip and the actions share the row; the underline moves to
+         the whole row so it runs under both. -->
+    <div class="tab-strip">{@render strip()}</div>
+    <div class="tab-actions">{@render actions()}</div>
+  {:else}
+    {@render strip()}
+  {/if}
 </div>
 
 <style>/* Per-level heading (h1-h6) box/typography properties, resolved to PRIVATE,
@@ -117,6 +138,38 @@ let lastActive = $state(active);
    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.
@@ -125,7 +178,7 @@ let lastActive = $state(active);
   */
 /* Convenience groupings */
 div > :global(.bar),
-div > :global(div > .bar) {
+div > :global(svelte-css-wrapper > .bar) {
   --link-bg: var(--tab-bar-link-bg, var(--bar-link-bg, var(--surface-link-bg, inherit)));
   --link-fg: var(--tab-bar-link-fg, var(--bar-link-fg, var(--surface-link-fg, inherit)));
   --_bg-mix-color: var(--tab-bar-bg-mix-color, var(--bar-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent))));
@@ -224,12 +277,78 @@ div > :global(div > .bar) {
   align-items: var(--tab-bar-align, var(--align, flex-end));
   border-bottom: var(--tab-bar-border-bottom, var(--border-width) var(--border-style) var(--border-color));
   border-left: var(--tab-bar-border-left, none);
-  border-right: var(--tab-bar-border-left, none);
-  border-top: var(--tab-bar-border-left, none);
+  border-right: var(--tab-bar-border-right, none);
+  border-top: var(--tab-bar-border-top, none);
   gap: var(--tab-bar-gap, var(--space-md));
-  overflow: hidden;
+  /* Tabs stay one strip. When they don't all fit -- four tabs on a phone --
+     the strip scrolls sideways rather than dropping the last tab onto a
+     second row, which reads as a broken tab set (the second row floats
+     under the active tab's baseline). `wrap` (or --tab-bar-wrap: wrap)
+     brings wrapping back. */
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+
+/* The scroll also goes in through --bar-overflow on the Bar itself (x
+   scrolls, y clipped), so it holds even where a consumer's own CSS beats
+   the rule above. */
+.wrap-tabs {
+  --tab-bar-wrap: wrap;
+}
+
+.has-actions {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--tab-bar-gap, var(--gap, var(--space-md, 8px)));
+  border-bottom: var(--tab-bar-border-bottom, var(--border-width) var(--border-style) var(--border-color));
+  margin-block: var(--tab-bar-margin-block, 0 1em);
+}
+
+/* The strip takes the room and gives way first: min-width 0 lets it
+   shrink below its tabs' width, at which point it scrolls (above). */
+.tab-strip {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* The row carries the underline; the strip's own (from the rule above)
+   would double it and stop short of the actions. */
+.tab-strip > :global(svelte-css-wrapper > .bar),
+.tab-strip > :global(.bar) {
+  border-bottom: none;
+}
+
+.tab-actions {
+  flex: 0 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--tab-bar-actions-gap, var(--gap, var(--space-md, 8px)));
+  padding-block-end: var(--tab-bar-actions-padding, var(--padding, var(--space-sm, 4px)));
 }
 
+/* Small tier: actions get their own row, above the tabs, so the tabs stay
+   attached to the panel they switch. */
+@media (max-width: 600px) {
+  .has-actions {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+  .tab-actions {
+    justify-content: flex-start;
+  }
+}
+@container (max-width: 600px) {
+  .has-actions {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+  .tab-actions {
+    justify-content: flex-start;
+  }
+}
 .sticky {
   position: sticky;
   top: calc(-1 * var(--surface-padding, var(--block-padding, var(--padding, 8px))));

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

@@ -3,6 +3,14 @@ import type { ContainProps } from "../types";
 import { type StyleProps } from "../styleProps";
 declare const TabBar: import("svelte").Component<ContainProps<HTMLAttributes<HTMLDivElement>, {
     sticky?: boolean;
+    /**
+     * Let tabs that don't fit wrap onto another row. By default the tab
+     * strip stays one row and scrolls sideways when it runs out of room,
+     * which keeps the active tab attached to its panel; wrapping suits a
+     * long set of short, filter-like tabs where seeing them all at once
+     * matters more. Same as setting --tab-bar-wrap: wrap.
+     */
+    wrap?: boolean;
     active?: string | {
         label: string;
         value: string;
@@ -16,6 +24,14 @@ declare const TabBar: import("svelte").Component<ContainProps<HTMLAttributes<HTM
         value: string;
     } | null) => void;
     children?: import("svelte").Snippet;
+    /**
+     * Controls that belong to the tab row but aren't tabs -- a Refresh
+     * button, a "New..." action. They sit at the end of the row when there
+     * is room, and on their own row above the tabs in the small tier (see
+     * the -small variables), so they never squeeze the tabs or stack into
+     * a tall column beside them on a phone.
+     */
+    actions?: import("svelte").Snippet;
 }, StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "active">;
 type TabBar = ReturnType<typeof TabBar>;
 export default TabBar;