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

package/.claude/skills/svelte-ui/SKILL.md

@@ -162,7 +162,9 @@ examples):
   `onShow(ctx)`/`onHide(ctx)` control focus — set `ctx.autoFocus` to a selector/element/`false`,
   `ctx.restoreFocus` likewise) · `ConfirmDialog` (title + message + Confirm/Cancel, built on Dialog)
   · `Popup` `Menu` · `tooltip` (a Svelte `use:` action) · `anchored` (positioning engine)
-- **Navigation:** `TabStrip` `SideBarMenu`
+- **Navigation:** `TabStrip` (tabs; `size`/`variant`, `gap`/`pad` bordered spacer cells, `height` for a
+  fixed-height bar with bottom-aligned tabs, `activeSurface` to flow the active tab into the content
+  below) · `SideBarMenu`
 - **Feedback:** `Alert` `Banner` `Badge` `Toaster` + `toast`
 - **Layout:** `Card` `CardHeader` `CardBody` `CardFooter` · **`Grid`** (auto-placed equal-cell grid;
   `columns` + `gap`)

package/dist/components/TabStrip/TabStrip.svelte

@@ -41,11 +41,20 @@
      *  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;
+    /** CSS colour for the ACTIVE tab's fill AND its bottom border — so the base line disappears under
+     *  it and the tab reads as one surface with the content below. Default `"transparent"` (reveals
+     *  whatever surface the strip sits on — today's behaviour). Set a token/colour to force a specific
+     *  surface, e.g. `activeSurface="var(--ui-color-background)"` when the strip sits in a container
+     *  whose background differs from the content below. Any CSS colour value. */
+    activeSurface?: string;
     onselect?: (index: number) => void;
     right?: Snippet;
     /** Optional aria-label for the strip when it renders as a navigation landmark
@@ -63,6 +72,8 @@
     borderless = false,
     gap = 0,
     pad = 0,
+    height,
+    activeSurface = "transparent",
     onselect,
     right,
     "aria-label": ariaLabel,
@@ -98,11 +109,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.
@@ -231,13 +237,18 @@
     ].join(" "),
   );
 
-  // Selected: transparent fill, so the tab shows whatever surface the strip sits on (page background,
-  // a Card/panel, an inverse surface) and reads as one continuous surface with the content below it —
-  // the folder-tab effect on ANY background, not just the page. Label + icon take `var(--ui-accent)`
-  // (the variant colour, or plain text for neutral/ghost — icons inherit via currentColor), the
-  // clearest signal of the strip's variant. Bottom border transparent — the base line breaks under it.
-  const selectedStyleClass =
-    "[background-color:transparent] [color:var(--ui-accent)] [border-bottom-color:transparent]";
+  // Selected: label + icon take `var(--ui-accent)` (the variant colour, or plain text for
+  // neutral/ghost — icons inherit via currentColor), the clearest signal of the strip's variant. The
+  // FILL + bottom-border colour are driven by `activeSurface` via inline `style` (below) — a dynamic
+  // colour can't be a Tailwind class (the scanner never sees a runtime-built arbitrary value). Default
+  // `transparent`: the tab shows whatever surface the strip sits on and the base line breaks under it
+  // (the folder-tab effect on ANY background) — identical to before.
+  const selectedStyleClass = "[color:var(--ui-accent)]";
+  // Applied only to the active tab. `background-color` = the fill; `border-bottom-color` = the same, so
+  // the base-line segment under the active tab vanishes into that surface.
+  const selectedStyle = $derived(
+    `background-color:${activeSurface}; border-bottom-color:${activeSurface}`,
+  );
 
   // `ghost` is the "transparent, hover-tint only" grey variant (per `types/variants.ts`): unlike
   // `neutral`, its inactive tabs have NO resting fill — they sit on the bare surface and only tint on
@@ -277,6 +288,7 @@
     : isActive
       ? selectedStyleClass
       : `${unselectedStyleClass} ${lineBottom}`}
+  {@const tabStyle = isActive && !t.disabled ? selectedStyle : undefined}
   {@const tabTabIndex = t.disabled ? -1 : semanticMode === "tablist" ? (isRoving ? 0 : -1) : 0}
   {@const tabAriaCurrent =
     semanticMode === "navigation" && isActive ? ("page" as const) : undefined}
@@ -306,6 +318,7 @@
           focusedIndex = i;
         }}
         class={`${tabBase} ${stateClass}`}
+        style={tabStyle}
       >
         {#if t.icon}{@render t.icon()}{/if}
         <span class={`truncate ${t.icon ? labelClass : "inline-block"}`}>{t.label}</span>
@@ -329,6 +342,7 @@
           focusedIndex = i;
         }}
         class={`${tabBase} ${stateClass}`}
+        style={tabStyle}
         disabled={t.disabled}
       >
         {#if t.icon}{@render t.icon()}{/if}
@@ -346,12 +360,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 +374,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 +392,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 +400,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,20 @@ 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;
+    /** CSS colour for the ACTIVE tab's fill AND its bottom border — so the base line disappears under
+     *  it and the tab reads as one surface with the content below. Default `"transparent"` (reveals
+     *  whatever surface the strip sits on — today's behaviour). Set a token/colour to force a specific
+     *  surface, e.g. `activeSurface="var(--ui-color-background)"` when the strip sits in a container
+     *  whose background differs from the content below. Any CSS colour value. */
+    activeSurface?: string;
     onselect?: (index: number) => void;
     right?: Snippet;
     /** Optional aria-label for the strip when it renders as a navigation landmark

package/docs/components.md

@@ -197,6 +197,22 @@ Thin wrappers over `Input`, each preconfigured with an MDI icon (rendered into I
 - **Location**: `src/lib/components/NumberInput.svelte`
 - **Features**: number formatting and validation
 
+## Navigation
+
+### TabStrip
+
+A horizontal tab bar (renders as a `tablist` of buttons, or a `navigation` of links when any tab has
+`href`). Tabs split into left / right clusters; a continuous base line runs under the strip and breaks
+under the active tab. Fully demoed at `/tabstrip`.
+
+- **Location**: `src/lib/components/TabStrip/TabStrip.svelte`
+- **Axes**: `size`, `variant` (both `Responsive`)
+- **Props**: `tabs` (`TabDefinition[]`), `activeTabIndex` (bindable), `mode` (`'expanded'` |
+  `'collapsed'`, responsive), `borderless`, `gap` (rem — bordered cells between tabs), `pad` (rem —
+  leading/trailing side cells), **`height`** (rem — total bar height; tabs bottom-align, space above),
+  **`activeSurface`** (CSS colour for the active tab's fill + bottom border; default `"transparent"`),
+  `right` (Snippet), `aria-label`.
+
 ## Data Components
 
 These pair with the headless **`@spaethtech/svelte-ui/data`** layer (query-language parser/AST, `createGrid`,

package/package.json

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