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

package/dist/components/TabStrip/TabStrip.svelte

@@ -41,10 +41,11 @@
      *  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;
-    /** Leading + trailing bordered spacer cells (before the first tab, after the last), in `rem`, AND
-     *  a `padding-top` of the same size on the strip (default `0`). Cells (not padding) horizontally
-     *  so the base line runs through them; real padding at the top (no line there). */
-    pad?: 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 };
     onselect?: (index: number) => void;
     right?: Snippet;
     /** Optional aria-label for the strip when it renders as a navigation landmark
@@ -97,6 +98,11 @@
   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.
@@ -341,11 +347,11 @@
   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:${pad}rem; ${styleProp ?? ""}`}
+  style={`${accentVar} padding-top:${padTop}rem; ${styleProp ?? ""}`}
   {...restProps}
 >
   <!-- Leading pad cell (before the first left tab). -->
-  {#if pad > 0 && leftTabs.length > 0}{@render spacer(pad)}{/if}
+  {#if padSides > 0 && leftTabs.length > 0}{@render spacer(padSides)}{/if}
 
   {#each leftTabs as { t, i }, idx (i)}
     {@render tabItem({ t, i })}
@@ -354,7 +360,7 @@
   {/each}
 
   <!-- Trailing pad cell when the left cluster is the last thing (no right tabs). -->
-  {#if pad > 0 && leftTabs.length > 0 && rightTabs.length === 0}{@render spacer(pad)}{/if}
+  {#if padSides > 0 && leftTabs.length > 0 && rightTabs.length === 0}{@render spacer(padSides)}{/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
@@ -372,7 +378,7 @@
   {/if}
 
   <!-- Leading pad cell for a right-only strip (no left cluster). -->
-  {#if pad > 0 && rightTabs.length > 0 && leftTabs.length === 0}{@render spacer(pad)}{/if}
+  {#if padSides > 0 && rightTabs.length > 0 && leftTabs.length === 0}{@render spacer(padSides)}{/if}
 
   {#each rightTabs as { t, i }, idx (i)}
     {@render tabItem({ t, i })}
@@ -380,5 +386,5 @@
   {/each}
 
   <!-- Trailing pad cell (after the last right tab). -->
-  {#if pad > 0 && rightTabs.length > 0}{@render spacer(pad)}{/if}
+  {#if padSides > 0 && rightTabs.length > 0}{@render spacer(padSides)}{/if}
 </ul>

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

@@ -34,10 +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;
-    /** Leading + trailing bordered spacer cells (before the first tab, after the last), in `rem`, AND
-     *  a `padding-top` of the same size on the strip (default `0`). Cells (not padding) horizontally
-     *  so the base line runs through them; real padding at the top (no line there). */
-    pad?: 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;
+    };
     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.0",
+  "version": "0.6.1-dev.32.fbb6fa6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"