@spaethtech/svelte-ui 0.6.1-dev.32.fbb6fa6 → 0.6.1-dev.33.c371f46

package/dist/components/TabStrip/TabStrip.svelte

@@ -41,11 +41,14 @@
      *  Not CSS `gap` — a real cell, so the base line stays continuous through it. Excludes the grow
      *  filler and the leading/trailing cells (those are `pad`). */
     gap?: number;
-    /** Strip padding, in `rem` (default `0`). A scalar pads both equally; `{ top, sides }` sets them
-     *  independently. **sides** = leading + trailing bordered spacer cells (before the first tab, after
-     *  the last) — cells, not CSS padding, so the base line runs through them. **top** = a real
-     *  `padding-top` on the strip (no line there; there is no bottom pad — the base line lives there). */
-    pad?: number | { top?: number; sides?: number };
+    /** Leading + trailing bordered spacer cells (before the first tab, after the last), in `rem`
+     *  (default `0`). Cells, not CSS padding, so the base line runs through them. For vertical room,
+     *  set `height` (the tabs bottom-align to the base line). */
+    pad?: number;
+    /** Total strip height, in `rem` (applied as `min-height`, so it never clips a taller tab). The tab
+     *  row bottom-aligns to the base line and the extra space breathes ABOVE it. `size` still sets the
+     *  tab height; `height` sets the whole bar. Unset → the strip hugs the tab row. */
+    height?: number;
     onselect?: (index: number) => void;
     right?: Snippet;
     /** Optional aria-label for the strip when it renders as a navigation landmark
@@ -63,6 +66,7 @@
     borderless = false,
     gap = 0,
     pad = 0,
+    height,
     onselect,
     right,
     "aria-label": ariaLabel,
@@ -98,11 +102,6 @@
   const svgClass = $derived(responsiveClasses(size, svgMap));
   const gapClass = $derived(responsiveClasses(size, gapMap));
 
-  // Normalize `pad` (scalar = both; `{ top, sides }` = independent). `sides` → leading/trailing spacer
-  // cells; `top` → the strip's padding-top. In rem.
-  const padTop = $derived(typeof pad === "number" ? pad : (pad.top ?? 0));
-  const padSides = $derived(typeof pad === "number" ? pad : (pad.sides ?? 0));
-
   // Mode → label visibility. `expanded` shows the label span inline; `collapsed` hides it. Tabs
   // without an icon show the label regardless (falling back gracefully — nothing disappears).
   // Responsive shape supported: `{ base: 'collapsed', sm: 'expanded' }` collapses on mobile only.
@@ -346,12 +345,12 @@
   role={semanticMode === "tablist" ? "tablist" : "navigation"}
   aria-orientation={semanticMode === "tablist" ? "horizontal" : undefined}
   aria-label={semanticMode === "navigation" ? ariaLabel : undefined}
-  class={`ui-accent flex items-stretch overflow-x-auto list-none m-0 p-0 ${cls}`}
-  style={`${accentVar} padding-top:${padTop}rem; ${styleProp ?? ""}`}
+  class={`ui-accent flex items-end overflow-x-auto list-none m-0 p-0 ${cls}`}
+  style={`${accentVar}${height != null ? ` min-height:${height}rem;` : ""} ${styleProp ?? ""}`}
   {...restProps}
 >
   <!-- Leading pad cell (before the first left tab). -->
-  {#if padSides > 0 && leftTabs.length > 0}{@render spacer(padSides)}{/if}
+  {#if pad > 0 && leftTabs.length > 0}{@render spacer(pad)}{/if}
 
   {#each leftTabs as { t, i }, idx (i)}
     {@render tabItem({ t, i })}
@@ -360,7 +359,7 @@
   {/each}
 
   <!-- Trailing pad cell when the left cluster is the last thing (no right tabs). -->
-  {#if padSides > 0 && leftTabs.length > 0 && rightTabs.length === 0}{@render spacer(padSides)}{/if}
+  {#if pad > 0 && leftTabs.length > 0 && rightTabs.length === 0}{@render spacer(pad)}{/if}
 
   <!-- Grow filler (the "+1"): an empty list item that stretches to eat the free space and carry the
 	     base line across it. It sits BETWEEN the left and right clusters, so it lands last (only left
@@ -378,7 +377,7 @@
   {/if}
 
   <!-- Leading pad cell for a right-only strip (no left cluster). -->
-  {#if padSides > 0 && rightTabs.length > 0 && leftTabs.length === 0}{@render spacer(padSides)}{/if}
+  {#if pad > 0 && rightTabs.length > 0 && leftTabs.length === 0}{@render spacer(pad)}{/if}
 
   {#each rightTabs as { t, i }, idx (i)}
     {@render tabItem({ t, i })}
@@ -386,5 +385,5 @@
   {/each}
 
   <!-- Trailing pad cell (after the last right tab). -->
-  {#if padSides > 0 && rightTabs.length > 0}{@render spacer(padSides)}{/if}
+  {#if pad > 0 && rightTabs.length > 0}{@render spacer(pad)}{/if}
 </ul>

package/dist/components/TabStrip/TabStrip.svelte.d.ts

@@ -34,14 +34,14 @@ interface Props extends Omit<HTMLAttributes<HTMLUListElement>, "onselect"> {
      *  Not CSS `gap` — a real cell, so the base line stays continuous through it. Excludes the grow
      *  filler and the leading/trailing cells (those are `pad`). */
     gap?: number;
-    /** Strip padding, in `rem` (default `0`). A scalar pads both equally; `{ top, sides }` sets them
-     *  independently. **sides** = leading + trailing bordered spacer cells (before the first tab, after
-     *  the last) — cells, not CSS padding, so the base line runs through them. **top** = a real
-     *  `padding-top` on the strip (no line there; there is no bottom pad — the base line lives there). */
-    pad?: number | {
-        top?: number;
-        sides?: number;
-    };
+    /** Leading + trailing bordered spacer cells (before the first tab, after the last), in `rem`
+     *  (default `0`). Cells, not CSS padding, so the base line runs through them. For vertical room,
+     *  set `height` (the tabs bottom-align to the base line). */
+    pad?: number;
+    /** Total strip height, in `rem` (applied as `min-height`, so it never clips a taller tab). The tab
+     *  row bottom-aligns to the base line and the extra space breathes ABOVE it. `size` still sets the
+     *  tab height; `height` sets the whole bar. Unset → the strip hugs the tab row. */
+    height?: number;
     onselect?: (index: number) => void;
     right?: Snippet;
     /** Optional aria-label for the strip when it renders as a navigation landmark

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.6.1-dev.32.fbb6fa6",
+  "version": "0.6.1-dev.33.c371f46",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"