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

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

@@ -49,6 +49,12 @@
      *  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
@@ -67,6 +73,7 @@
     gap = 0,
     pad = 0,
     height,
+    activeSurface = "transparent",
     onselect,
     right,
     "aria-label": ariaLabel,
@@ -230,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
@@ -276,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}
@@ -305,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>
@@ -328,6 +342,7 @@
           focusedIndex = i;
         }}
         class={`${tabBase} ${stateClass}`}
+        style={tabStyle}
         disabled={t.disabled}
       >
         {#if t.icon}{@render t.icon()}{/if}

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

@@ -42,6 +42,12 @@ interface Props extends Omit<HTMLAttributes<HTMLUListElement>, "onselect"> {
      *  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.33.c371f46",
+  "version": "0.7.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"