@spaethtech/svelte-ui 0.1.10 → 0.3.0

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

@@ -0,0 +1,109 @@
+/**
+ * Visual / interaction mode at a given viewport tier.
+ *
+ *  - `stepped`  — `position: absolute`, slides in from the left,
+ *                 full-width. Parent items use click-to-step
+ *                 navigation (no hover popouts). Requires a
+ *                 hamburger trigger. Designed for phones.
+ *  - `drawer`   — `position: absolute`, slides in from the left,
+ *                 `--sbm-expanded-w` wide. Parent items show hover
+ *                 popouts to the right. Requires a hamburger.
+ *                 Designed for tablet portrait / phablet.
+ *  - `icon`     — `position: relative` (in flow), `--sbm-collapsed-w`
+ *                 wide, icon-only rows. Parent items show hover
+ *                 popouts. Designed for tablet landscape / narrow
+ *                 desktop.
+ *  - `expanded` — `position: relative`, `--sbm-expanded-w` wide,
+ *                 icon + label rows. Parent items show hover popouts.
+ *                 Designed for wide desktop.
+ */
+export type SideBarMenuMode = "stepped" | "drawer" | "icon" | "expanded";
+export type SideBarMenuBadgeVariant = "error" | "warning" | "info" | "success";
+export type SideBarMenuBadge = {
+    /** Color of the indicator. */
+    variant: SideBarMenuBadgeVariant;
+    /**
+     * Optional numeric count. Present → filled pill with the number.
+     * Absent → bare icon (variant-coloured). Useful for "has-any" signals
+     * where the precise count isn't meaningful to the user.
+     */
+    count?: number;
+};
+/**
+ * Icon component slot. Typed permissively because `unplugin-icons` emits
+ * its own callable shape (`typeof default`) that doesn't satisfy Svelte's
+ * strict `Component<…>` primitive in every consumer tsconfig. The runtime
+ * shape is always a Svelte component the renderer can `<Icon />` — TS just
+ * can't always prove it.
+ */
+export type SideBarMenuItemIcon = any;
+export type SideBarMenuItem = {
+    /**
+     * Icon component constructor — same idiom as `MenuItem.icon`. Pass an
+     * imported MDI icon (e.g. `import IconActivity from '~icons/mdi/pulse'`)
+     * straight into the data array; no snippet wrapper needed.
+     */
+    icon?: SideBarMenuItemIcon;
+    label: string;
+    /** href; absent when the item is a parent that only hosts children. */
+    link?: string;
+    badge?: SideBarMenuBadge;
+    /** v1 renders only the first level; deeper levels emit a DEV warning. */
+    children?: SideBarMenuItem[];
+};
+import type { Size } from "../../types/sizes.js";
+import { type Breakpoint } from "../../types/breakpoints.js";
+type ModesMap = Partial<Record<Breakpoint, SideBarMenuMode>>;
+type $$ComponentProps = {
+    topItems?: SideBarMenuItem[];
+    bottomItems?: SideBarMenuItem[];
+    currentPath: string;
+    size?: Size;
+    /**
+     * Per-tier visual mode. Each key in this map sets the mode at and
+     * above that breakpoint. The active mode at any viewport is the
+     * mode for the highest matching tier.
+     *
+     * When omitted, defaults to
+     * `{ base: 'stepped', '2xs': 'drawer', xs: 'icon', [collapsedAt]: 'expanded' }`
+     * so the prop is opt-in for consumers happy with the standard
+     * phone→tablet→desktop progression.
+     */
+    modes?: ModesMap;
+    /**
+     * Legacy shorthand: which tier the strip expands to icon + label
+     * at when `modes` isn't supplied. Equivalent to overriding only
+     * the `expanded` slot in the default `modes` map. Ignored when
+     * `modes` is set explicitly. Prefer passing `modes` directly.
+     */
+    collapsedAt?: Exclude<Breakpoint, "base" | "4xs" | "3xs" | "2xs" | "xs">;
+    /** Pixel width of the strip in `icon` mode. */
+    collapsedWidth?: number;
+    /** Pixel width of the strip in `expanded` mode and the slide-in drawer when open. */
+    expandedWidth?: number;
+    /**
+     * Drawer open state when the active mode is `drawer` or `stepped`.
+     * Bind from the consumer to drive it from your own header button
+     * (set `hamburger={false}` to suppress the built-in trigger).
+     * Ignored in `icon` and `expanded` modes (strip is always in-layout).
+     */
+    open?: boolean;
+    /**
+     * Step-navigation level inside the `stepped`-mode drawer.
+     * `0` = top-level. `1` = inside a parent item's children list.
+     * Bind from the consumer so a header button can read it (e.g.
+     * to flip X → ← icon) and write it (set to `0` to navigate back).
+     */
+    stepLevel?: number;
+    /**
+     * Render the built-in fixed-position hamburger button when the
+     * active mode is `drawer` or `stepped`. Set to `false` if the
+     * consumer renders its own trigger (typically inside a header)
+     * and binds to `open`.
+     */
+    hamburger?: boolean;
+    class?: string;
+};
+declare const SideBarMenu: import("svelte").Component<$$ComponentProps, {}, "open" | "stepLevel">;
+type SideBarMenu = ReturnType<typeof SideBarMenu>;
+export default SideBarMenu;

package/dist/components/SideBarMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./SideBarMenu.svelte";
+export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, } from "./SideBarMenu.svelte";

package/dist/components/SideBarMenu/index.js

@@ -0,0 +1 @@
+export { default } from "./SideBarMenu.svelte";

package/dist/components/TabStrip/TabStrip.svelte

@@ -0,0 +1,384 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { Size } from "../../types/sizes.js";
+  import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
+  import { responsiveClasses, resolveScalar, type Responsive } from "../../types/responsive.js";
+  import { tooltip } from "../../positioning/tooltip.js";
+  import Badge from "../Badge/Badge.svelte";
+
+  /** Display mode. `expanded` (default) shows icon + label. `collapsed` hides the label so each tab
+   *  reads as icon-only, with a tooltip below carrying the label — useful on narrow viewports or
+   *  for long tab lists. Accepts a scalar or `Responsive` map so the same strip can collapse only
+   *  below a breakpoint (`{ base: 'collapsed', sm: 'expanded' }`). Tabs without an icon fall back
+   *  to their label so nothing disappears — the mode is a hint, not a hard hide. */
+  type TabMode = "expanded" | "collapsed";
+
+  export interface TabDefinition {
+    label: string;
+    /** Present → tab renders as `<a href>`; browser handles nav. Absent → `<button type="button">`. */
+    href?: string;
+    icon?: Snippet;
+    badge?: string | number;
+    disabled?: boolean;
+    position?: "left" | "right";
+  }
+
+  interface Props extends Omit<HTMLAttributes<HTMLUListElement>, "onselect"> {
+    tabs: TabDefinition[];
+    activeTabIndex?: number;
+    size?: Responsive<Size>;
+    variant?: Responsive<Variant>;
+    /** See TabMode. Default `'expanded'`. */
+    mode?: Responsive<TabMode>;
+    /** false (default): the base line is drawn — each tab plus the filler/spacer cells contribute a
+     *  bottom border in the shared border colour, and the selected tab drops its bottom border so the
+     *  line breaks under it (attached to the content below). true: no base line — tabs float (they
+     *  keep their top/left/right borders). */
+    borderless?: boolean;
+    /** Spacer inserted as a bordered cell BETWEEN adjacent tabs, in `rem` (default `0` = tabs flush).
+     *  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;
+    onselect?: (index: number) => void;
+    right?: Snippet;
+    /** Optional aria-label for the strip when it renders as a navigation landmark
+     *  (i.e. any tab has `href`). Ignored in tablist mode. */
+    "aria-label"?: string;
+    class?: string;
+  }
+
+  let {
+    tabs,
+    activeTabIndex = $bindable(0),
+    size = "md",
+    variant = "neutral",
+    mode = "expanded",
+    borderless = false,
+    gap = 0,
+    pad = 0,
+    onselect,
+    right,
+    "aria-label": ariaLabel,
+    class: cls = "",
+    style: styleProp = "",
+    ...restProps
+  }: Props = $props();
+
+  // Navigation mode: manual keyboard activation is required by APG when tabs are anchors, so arrow
+  // keys never fire spurious navigations. Button-only strips get automatic (arrow moves selection).
+  const anyHref = $derived(tabs.some((t) => t.href != null));
+  const semanticMode = $derived<"tablist" | "navigation">(anyHref ? "navigation" : "tablist");
+
+  // Per-Size class maps → responsiveClasses handles scalar OR { base, xs, … }.
+  // Heights track --ui-height-*; horizontal padding + text + inline-icon svg scale with them.
+  const heightMap: Record<Size, string> = {
+    sm: "h-[var(--ui-height-sm)]",
+    md: "h-[var(--ui-height)]",
+    lg: "h-[var(--ui-height-lg)]",
+  };
+  const padMap: Record<Size, string> = { sm: "px-3", md: "px-4", lg: "px-5" };
+  const textMap: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  const svgMap: Record<Size, string> = {
+    sm: "[&_svg]:w-3.5 [&_svg]:h-3.5",
+    md: "[&_svg]:w-4 [&_svg]:h-4",
+    lg: "[&_svg]:w-5 [&_svg]:h-5",
+  };
+  const gapMap: Record<Size, string> = { sm: "gap-1", md: "gap-1.5", lg: "gap-2" };
+
+  const heightClass = $derived(responsiveClasses(size, heightMap));
+  const padClass = $derived(responsiveClasses(size, padMap));
+  const textClass = $derived(responsiveClasses(size, textMap));
+  const svgClass = $derived(responsiveClasses(size, svgMap));
+  const gapClass = $derived(responsiveClasses(size, gapMap));
+
+  // 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.
+  const modeMap: Record<TabMode, string> = { expanded: "inline-block", collapsed: "hidden" };
+  const labelClass = $derived(responsiveClasses(mode, modeMap));
+
+  // Variant tinting uses ONLY the shared `--ui-accent` mechanism — the exact idiom every other themed
+  // component uses (DataTable/List/Menu/CardBody), no per-component custom properties. We point
+  // `--ui-accent` at the variant's colour token via inline `style` (only for a real accent — neutral/ghost
+  // leave it at the default `--ui-color-text`), and the `.ui-accent` class on the <ul> re-mixes the shared
+  // interactive tints (`--ui-color-surface`/`--ui-color-active`) from it. Every colour further down is a
+  // STATIC Tailwind class reading `var(--ui-accent)` (or another shared token) — never runtime-interpolated
+  // (Tailwind only emits classes found literally in source). `variant` may be a Responsive map; tinting
+  // uses its base/scalar value (one inline custom prop can't be per-breakpoint) — same scalar as the badge.
+  const stripVariant = $derived(resolveScalar(variant, "neutral"));
+  const accentVar = $derived(
+    variantToken[stripVariant] === "--ui-color-text"
+      ? ""
+      : `--ui-accent: var(${variantToken[stripVariant]});`,
+  );
+
+  // Split into left / right clusters, preserving array order within each.
+  const leftTabs = $derived(
+    tabs.map((t, i) => ({ t, i })).filter(({ t }) => t.position !== "right"),
+  );
+  const rightTabs = $derived(
+    tabs.map((t, i) => ({ t, i })).filter(({ t }) => t.position === "right"),
+  );
+
+  // Roving focus for the tablist keyboard pattern — one tab in the natural tab order at a time.
+  // `focusedIndex` shadows activeTabIndex for the automatic mode (where they change together) but
+  // diverges for the manual mode (where arrows only move focus).
+  let focusedIndex = $state<number | null>(null);
+  const rovingIndex = $derived(
+    focusedIndex ?? (activeTabIndex >= 0 && activeTabIndex < tabs.length ? activeTabIndex : 0),
+  );
+
+  function activate(i: number) {
+    if (tabs[i]?.disabled) return;
+    activeTabIndex = i;
+    onselect?.(i);
+  }
+
+  // Walk to the next / previous non-disabled tab, wrapping.
+  function nextEnabled(from: number, step: 1 | -1): number {
+    const n = tabs.length;
+    if (n === 0) return from;
+    let i = from;
+    for (let guard = 0; guard < n; guard++) {
+      i = (i + step + n) % n;
+      if (!tabs[i]?.disabled) return i;
+    }
+    return from;
+  }
+  function firstEnabled(): number {
+    const i = tabs.findIndex((t) => !t.disabled);
+    return i === -1 ? 0 : i;
+  }
+  function lastEnabled(): number {
+    for (let i = tabs.length - 1; i >= 0; i--) if (!tabs[i]?.disabled) return i;
+    return 0;
+  }
+
+  function handleKeydown(e: KeyboardEvent, i: number) {
+    let target: number | null = null;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") target = nextEnabled(i, 1);
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") target = nextEnabled(i, -1);
+    else if (e.key === "Home") target = firstEnabled();
+    else if (e.key === "End") target = lastEnabled();
+    else if ((e.key === "Enter" || e.key === " ") && semanticMode === "tablist") {
+      e.preventDefault();
+      activate(i);
+      return;
+    } else return;
+    e.preventDefault();
+    focusedIndex = target;
+    // Automatic activation: tablist mode moves selection with focus. Navigation mode moves focus only.
+    if (semanticMode === "tablist") activate(target);
+    // Move DOM focus to the newly-focused tab.
+    queueMicrotask(() => {
+      stripEl?.querySelectorAll<HTMLElement>("[data-tab-el]")?.[target!]?.focus();
+    });
+  }
+
+  let stripEl: HTMLUListElement | undefined = $state();
+
+  // The strip has NO border of its own. The base line is composed from the BOTTOM border of every child
+  // (each tab, the grow filler, the right cluster) — they sit on a shared baseline (items-stretch), so
+  // their bottom borders join into one continuous 1px line, in the shared border colour (accent at
+  // --ui-tint-border). `borderless` makes that bottom border transparent → no line. The selected tab
+  // always keeps its bottom transparent, breaking the line so it opens into the content below.
+  // NB: these border classes are written out in full — Tailwind only emits arbitrary-property CSS for
+  // class strings it finds *literally* in source, so we can't factor the repeated color-mix into a
+  // variable and interpolate it (that's the same trap the old per-component var hid). List does the same.
+  const lineBottom = $derived(
+    borderless
+      ? "border-b [border-bottom-color:transparent]"
+      : "border-b [border-bottom-color:color-mix(in_srgb,var(--ui-accent)_var(--ui-tint-border),transparent)]",
+  );
+
+  // Tab side borders (top/left/right). `borderless` makes these transparent too, so the whole tab has
+  // no visible edge — floating tabs, not open-bottom boxes. The 1px border box is kept (transparent)
+  // either way so heights never shift (same principle as Button/Card `borderless`). The BOTTOM border
+  // is handled separately by `lineBottom` (unselected/disabled) or the selected state. Written out in
+  // full for the same Tailwind-literal reason as `lineBottom` above.
+  const sideBorders = $derived(
+    borderless
+      ? "border [border-top-color:transparent] [border-left-color:transparent] [border-right-color:transparent]"
+      : "border [border-top-color:color-mix(in_srgb,var(--ui-accent)_var(--ui-tint-border),transparent)] [border-left-color:color-mix(in_srgb,var(--ui-accent)_var(--ui-tint-border),transparent)] [border-right-color:color-mix(in_srgb,var(--ui-accent)_var(--ui-tint-border),transparent)]",
+  );
+
+  // Tab element base: shared by anchors and buttons. Draws top/left/right borders (the shared border
+  // colour) with rounded top corners; the BOTTOM border colour is state-driven (below) — it joins the
+  // base line (unselected/disabled) or breaks it (selected). All colours read `var(--ui-accent)`.
+  const tabBase = $derived(
+    [
+      "inline-flex items-center justify-center whitespace-nowrap select-none no-underline cursor-pointer",
+      "rounded-t-[var(--ui-border-radius)]",
+      `${sideBorders} transition-colors`,
+      "focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-text)_70%,transparent)] focus-visible:[outline-offset:-2px]",
+      heightClass,
+      padClass,
+      textClass,
+      svgClass,
+      gapClass,
+    ].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]";
+
+  // `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
+  // hover. Every other variant keeps the recessed `--ui-color-surface` section band. (Both greys share
+  // `--ui-accent = --ui-color-text`, so the resting fill is the ONLY thing that distinguishes them.)
+  const restingFill = $derived(
+    stripVariant === "ghost"
+      ? "[background-color:transparent]"
+      : "[background-color:var(--ui-color-surface)]",
+  );
+
+  // Unselected: the resting fill (recessed band, or transparent for ghost); text/icon are the muted
+  // accent (`var(--ui-accent)` at 60%). Hover deepens the fill to --ui-color-active (12%, same for both
+  // greys) and lifts text/icon to the full accent. Bottom border joins the base line (via `lineBottom`).
+  const unselectedStyleClass = $derived(
+    `${restingFill} [color:color-mix(in_srgb,var(--ui-accent)_60%,transparent)]` +
+      " hover:[background-color:var(--ui-color-active)] hover:[color:var(--ui-accent)]",
+  );
+
+  // Disabled: the resting fill, faded + inert; bottom border joins the base line (via `lineBottom`).
+  const disabledStyleClass = $derived(
+    `opacity-50 cursor-not-allowed pointer-events-none ${restingFill}`,
+  );
+</script>
+
+{#snippet spacer(rem: number)}
+  <!-- A bordered spacer cell (gap between tabs, or pad at the ends). Carries the base line via
+	     `lineBottom`; fixed width so it never collapses under overflow. Nothing to interact with. -->
+  <li aria-hidden="true" class={`shrink-0 ${lineBottom}`} style={`width:${rem}rem`}></li>
+{/snippet}
+
+{#snippet tabItem({ t, i }: { t: TabDefinition; i: number })}
+  {@const isActive = i === activeTabIndex}
+  {@const isRoving = i === rovingIndex}
+  {@const stateClass = t.disabled
+    ? `${disabledStyleClass} ${lineBottom}`
+    : isActive
+      ? selectedStyleClass
+      : `${unselectedStyleClass} ${lineBottom}`}
+  {@const tabTabIndex = t.disabled ? -1 : semanticMode === "tablist" ? (isRoving ? 0 : -1) : 0}
+  {@const tabAriaCurrent =
+    semanticMode === "navigation" && isActive ? ("page" as const) : undefined}
+  {@const badgeVariant = stripVariant}
+  <!-- Each tab is a list item. In tablist mode the <li> is presentational so the tablist/tab roles
+	     on the <ul>/<button> aren't disturbed; the real <button>/<a> carries the styling + the base-line
+	     bottom border. Using `contents` so the button/anchor stays the flex item (layout unchanged). -->
+  <li role={semanticMode === "tablist" ? "presentation" : undefined} class="contents">
+    {#if t.href}
+      <a
+        href={t.href}
+        data-tab-el
+        title={t.label}
+        use:tooltip={{ side: "bottom" }}
+        aria-disabled={t.disabled ? true : undefined}
+        aria-current={tabAriaCurrent}
+        tabindex={tabTabIndex}
+        onclick={(e) => {
+          if (t.disabled) {
+            e.preventDefault();
+            return;
+          }
+          activate(i);
+        }}
+        onkeydown={(e) => handleKeydown(e, i)}
+        onfocus={() => {
+          focusedIndex = i;
+        }}
+        class={`${tabBase} ${stateClass}`}
+      >
+        {#if t.icon}{@render t.icon()}{/if}
+        <span class={`truncate ${t.icon ? labelClass : "inline-block"}`}>{t.label}</span>
+        {#if t.badge != null}
+          <Badge variant={badgeVariant} {size} borderless>{t.badge}</Badge>
+        {/if}
+      </a>
+    {:else}
+      <button
+        type="button"
+        data-tab-el
+        title={t.label}
+        use:tooltip={{ side: "bottom" }}
+        role={semanticMode === "tablist" ? "tab" : undefined}
+        aria-selected={semanticMode === "tablist" ? isActive : undefined}
+        aria-disabled={t.disabled ? true : undefined}
+        tabindex={tabTabIndex}
+        onclick={() => activate(i)}
+        onkeydown={(e) => handleKeydown(e, i)}
+        onfocus={() => {
+          focusedIndex = i;
+        }}
+        class={`${tabBase} ${stateClass}`}
+        disabled={t.disabled}
+      >
+        {#if t.icon}{@render t.icon()}{/if}
+        <span class={`truncate ${t.icon ? labelClass : "inline-block"}`}>{t.label}</span>
+        {#if t.badge != null}
+          <Badge variant={badgeVariant} {size} borderless>{t.badge}</Badge>
+        {/if}
+      </button>
+    {/if}
+  </li>
+{/snippet}
+
+<ul
+  bind:this={stripEl}
+  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:${pad}rem; ${styleProp ?? ""}`}
+  {...restProps}
+>
+  <!-- Leading pad cell (before the first left tab). -->
+  {#if pad > 0 && leftTabs.length > 0}{@render spacer(pad)}{/if}
+
+  {#each leftTabs as { t, i }, idx (i)}
+    {@render tabItem({ t, i })}
+    <!-- gap cell BETWEEN adjacent left tabs (never after the last). -->
+    {#if gap > 0 && idx < leftTabs.length - 1}{@render spacer(gap)}{/if}
+  {/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}
+
+  <!-- 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
+	     tabs), in the middle (both clusters), or first (only right tabs) — pushing the right cluster to
+	     the edge in every case. Nothing to interact with, so it's aria-hidden. -->
+  <li aria-hidden="true" class={`flex-1 ${lineBottom}`}></li>
+
+  {#if right}
+    <li
+      role="presentation"
+      class={`inline-flex items-center ${padClass} ${textClass} ${lineBottom} [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]`}
+    >
+      {@render right()}
+    </li>
+  {/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}
+
+  {#each rightTabs as { t, i }, idx (i)}
+    {@render tabItem({ t, i })}
+    {#if gap > 0 && idx < rightTabs.length - 1}{@render spacer(gap)}{/if}
+  {/each}
+
+  <!-- Trailing pad cell (after the last right tab). -->
+  {#if pad > 0 && rightTabs.length > 0}{@render spacer(pad)}{/if}
+</ul>

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

@@ -0,0 +1,50 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { Size } from "../../types/sizes.js";
+import type { Variant } from "../../types/variants.js";
+import { type Responsive } from "../../types/responsive.js";
+/** Display mode. `expanded` (default) shows icon + label. `collapsed` hides the label so each tab
+ *  reads as icon-only, with a tooltip below carrying the label — useful on narrow viewports or
+ *  for long tab lists. Accepts a scalar or `Responsive` map so the same strip can collapse only
+ *  below a breakpoint (`{ base: 'collapsed', sm: 'expanded' }`). Tabs without an icon fall back
+ *  to their label so nothing disappears — the mode is a hint, not a hard hide. */
+type TabMode = "expanded" | "collapsed";
+export interface TabDefinition {
+    label: string;
+    /** Present → tab renders as `<a href>`; browser handles nav. Absent → `<button type="button">`. */
+    href?: string;
+    icon?: Snippet;
+    badge?: string | number;
+    disabled?: boolean;
+    position?: "left" | "right";
+}
+interface Props extends Omit<HTMLAttributes<HTMLUListElement>, "onselect"> {
+    tabs: TabDefinition[];
+    activeTabIndex?: number;
+    size?: Responsive<Size>;
+    variant?: Responsive<Variant>;
+    /** See TabMode. Default `'expanded'`. */
+    mode?: Responsive<TabMode>;
+    /** false (default): the base line is drawn — each tab plus the filler/spacer cells contribute a
+     *  bottom border in the shared border colour, and the selected tab drops its bottom border so the
+     *  line breaks under it (attached to the content below). true: no base line — tabs float (they
+     *  keep their top/left/right borders). */
+    borderless?: boolean;
+    /** Spacer inserted as a bordered cell BETWEEN adjacent tabs, in `rem` (default `0` = tabs flush).
+     *  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;
+    onselect?: (index: number) => void;
+    right?: Snippet;
+    /** Optional aria-label for the strip when it renders as a navigation landmark
+     *  (i.e. any tab has `href`). Ignored in tablist mode. */
+    "aria-label"?: string;
+    class?: string;
+}
+declare const TabStrip: import("svelte").Component<Props, {}, "activeTabIndex">;
+type TabStrip = ReturnType<typeof TabStrip>;
+export default TabStrip;

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

@@ -0,0 +1,3 @@
+export { default } from "./TabStrip.svelte";
+export { default as TabStrip } from "./TabStrip.svelte";
+export type { TabDefinition } from "./TabStrip.svelte";

package/dist/components/TabStrip/index.js

@@ -0,0 +1,2 @@
+export { default } from "./TabStrip.svelte";
+export { default as TabStrip } from "./TabStrip.svelte";