@mohasinac/appkit 4.27.0 → 4.28.0

package/dist/ui/components/RichTextEditor.js

@@ -120,5 +120,5 @@ export function RichTextEditor({ value, onChange, disabled = false, className =
             editor.innerHTML = safeValue;
         }
     }, [value]);
-    return (_jsxs("div", { className: `appkit-rich-text-editor rounded-lg border border-zinc-200 bg-[var(--appkit-color-surface)] border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${className}`, "data-section": "richtexteditor-div-582", children: [_jsx("div", { className: "appkit-rich-text-editor__toolbar flex flex-wrap gap-1 border-b border-zinc-200 p-2 border-[var(--appkit-color-border)]", "data-section": "richtexteditor-div-583", children: toolbarActions.map((action) => (_jsx("button", { type: "button", title: action.title, onClick: action.run, disabled: disabled, className: "appkit-rich-text-editor__btn rounded px-2 py-1 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)]", children: action.label }, action.title))) }), _jsx("div", { ref: editorRef, role: "textbox", "aria-label": "Rich text editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, onInput: emitChange, onBlur: emitChange, className: `prose prose-sm max-w-none p-3 focus:outline-none dark:prose-invert ${minHeightClassName} ${disabled ? "cursor-not-allowed opacity-70" : ""}` })] }));
+    return (_jsxs("div", { className: `appkit-rich-text-editor rounded-lg border border-zinc-200 bg-[var(--appkit-color-surface)] border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${className}`, "data-section": "richtexteditor-div-582", children: [_jsx("div", { className: "appkit-rich-text-editor__toolbar flex flex-wrap gap-1 border-b p-2 border-[var(--appkit-color-border)]", "data-section": "richtexteditor-div-583", children: toolbarActions.map((action) => (_jsx("button", { type: "button", title: action.title, onClick: action.run, disabled: disabled, className: "appkit-rich-text-editor__btn rounded px-2 py-1 text-xs font-medium transition hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-50 text-[var(--appkit-color-text-muted)]", children: action.label }, action.title))) }), _jsx("div", { ref: editorRef, role: "textbox", "aria-label": "Rich text editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, onInput: emitChange, onBlur: emitChange, className: `prose prose-sm max-w-none p-3 focus:outline-none dark:prose-invert ${minHeightClassName} ${disabled ? "cursor-not-allowed opacity-70" : ""}` })] }));
 }

package/dist/ui/components/RowActionMenu.style.css

@@ -57,7 +57,7 @@
 }
 
 .appkit-row-action-menu__item:hover {
-  background: var(--appkit-color-zinc-100);
+  background: var(--appkit-color-surface-hover);
 }
 
 :is(.dark) .appkit-row-action-menu__item {

package/dist/ui/components/SideDrawer.style.css

@@ -125,7 +125,7 @@
   box-shadow: 0 0 0 1px var(--appkit-color-border);
 }
 .appkit-side-drawer__close-btn:hover {
-  background-color: var(--appkit-color-zinc-100);
+  background-color: var(--appkit-color-surface-hover);
   box-shadow: 0 0 0 1px var(--appkit-color-zinc-300);
 }
 :is(.dark) .appkit-side-drawer__close-btn {

package/dist/ui/components/Slider.js

@@ -25,7 +25,7 @@ export function Slider({ value: controlledValue, defaultValue = 0, min = 0, max
         onChangeEnd?.(value);
     };
     return (_jsxs("div", { className: ["w-full", className].filter(Boolean).join(" "), "data-section": "slider-div-607", children: [(label || showValue) && (_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", "data-section": "slider-div-608", children: [label ? _jsx(Label, { htmlFor: inputId, children: label }) : _jsx("span", {}), showValue ? (_jsx(Span, { size: "sm", className: "tabular-nums text-[var(--appkit-color-text-muted)]", children: value })) : null] })), _jsxs("div", { className: "relative", "data-section": "slider-div-609", children: [_jsx("div", { "aria-hidden": "true", className: [
-                            "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-zinc-200 bg-[var(--appkit-color-border)]",
+                            "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-[var(--appkit-color-border)]",
                             SIZE_CLASSES[size],
                         ].join(" "), "data-section": "slider-div-610", children: _jsx("div", { className: [
                                 "h-full rounded-full bg-primary",

package/dist/ui/components/TabBarShell.d.ts

@@ -0,0 +1,78 @@
+import React from "react";
+import { type SelectOption } from "./Select";
+export interface TabBarShellProps {
+    /**
+     * Applied to the inner `role="tablist"` element — unchanged from the
+     * pre-shell `TabsList` behaviour, so existing consumers keep getting it on
+     * the element that actually holds the tabs. Note it is no longer the
+     * OUTERMOST node: a margin or width passed here applies inside the shell's
+     * flex row.
+     */
+    className?: string;
+    /** Accessible name for the tablist. */
+    ariaLabel?: string;
+    /**
+     * Rendered before the tablist, inside the shell but OUTSIDE the
+     * `role="tablist"` element — for controls that are not tabs (StoreNavTabs'
+     * listing-type picker). A `<select>` inside a tablist is invalid ARIA,
+     * since it is not a `role="tab"`.
+     */
+    leading?: React.ReactNode;
+    /**
+     * The currently-selected tab's value. Keys the scroll-into-view effect, so a
+     * selection that starts off-screen in an overflowing strip is scrolled to.
+     * Omit and that repositioning simply does not happen — overflow detection
+     * and the arrows work regardless.
+     */
+    activeKey?: string;
+    children?: React.ReactNode;
+}
+/**
+ * `TabBarShell` — the rail + overflow arrows around a `role="tablist"`.
+ *
+ * The arrows are SIBLINGS of the tablist, never children, so its accessibility
+ * -tree children stay exactly the `role="tab"` elements — no `aria-owns`, no
+ * invalid-child warnings.
+ */
+export declare function TabBarShell({ className, ariaLabel, leading, activeKey, children, }: TabBarShellProps): React.JSX.Element;
+export interface TabBarButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "role" | "aria-selected"> {
+    selected: boolean;
+}
+/**
+ * `TabBarButton` — a bare `role="tab"` button carrying `.appkit-tabs-trigger`.
+ *
+ * Exists because appkit's `<Button variant="ghost">` is NOT transparent: it
+ * has a `--appkit-color-border-subtle` fill, a 44px min-height and a
+ * `rounded-xl` radius, so the hand-rolled bars that used it were rendering
+ * grey pill chips rather than text tabs. It also wraps children in
+ * `.appkit-button__content` (Root Cause #68), which a tab does not want.
+ */
+export declare function TabBarButton({ selected, className, children, ...rest }: TabBarButtonProps): React.JSX.Element;
+export interface TabsNavSelectProps {
+    ariaLabel: string;
+    options: SelectOption[];
+    value: string;
+    placeholder?: string;
+    /**
+     * `false` renders the `--unselected` modifier (transparent rail) — the
+     * control is present but is making no "you are here" claim, which is
+     * StoreNavTabs' state while a non-listing tab is active.
+     */
+    selected?: boolean;
+    onValueChange: (value: string) => void;
+    className?: string;
+    role?: string;
+}
+/**
+ * `TabsNavSelect` — the collapsed tab bar, past `TABS_DROPDOWN_THRESHOLD`.
+ *
+ * A `<select>` that reads as navigation rather than as a form field: the
+ * enclosing rectangle is gone and the only chrome left is the same 2px brand
+ * rail an active row-tab uses. See the block comment in Tabs.style.css for
+ * the full reasoning, and the specificity warning above those rules.
+ *
+ * `variant="default"` and NOT `"ghost"` — ghost's `border-transparent
+ * bg-transparent` are `!important` utilities that would pin the border to
+ * transparent and block the indicator rail.
+ */
+export declare function TabsNavSelect({ ariaLabel, options, value, placeholder, selected, onValueChange, className, role, }: TabsNavSelectProps): React.JSX.Element;

package/dist/ui/components/TabBarShell.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * WHY: Seven tab bars existed across this codebase, four of them hand-rolled
+ *      copies of the same `border-b-2 / -mb-px` underline with a DIFFERENT
+ *      active colour each. This is the one shell they all render through, so
+ *      the look is shared by construction rather than by discipline.
+ *
+ * WHAT: The chrome around a `role="tablist"` — the rail, the overflow scroll
+ *       arrows, and a `leading` slot for controls that are NOT tabs. Plus the
+ *       two trigger flavours a folded bar needs: `TabBarButton` (a bare
+ *       `role="tab"` button) and `TabsNavSelect` (the >5-tab dropdown,
+ *       stripped of Select's input chrome).
+ *
+ * EXPORTS: TabBarShell, TabBarShellProps, TabBarButton, TabBarButtonProps,
+ *          TabsNavSelect, TabsNavSelectProps
+ *
+ * @tag domain:ui
+ * @tag layer:ui
+ * @tag pattern:none
+ * @tag access:client
+ * @tag consumers:Tabs,StoreNavTabs,EventTabBar
+ * @tag sideEffects:none
+ */
+import { useRef } from "react";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+import { Div } from "./Div";
+import { Select } from "./Select";
+import { useTabsOverflow } from "./tabs-overflow";
+const UI_TAB_BAR = {
+    shell: "appkit-tabs-shell",
+    arrow: "appkit-tabs-shell__arrow",
+    list: "appkit-tabs-list",
+    trigger: "appkit-tabs-trigger",
+    dropdown: "appkit-tabs-dropdown",
+    dropdownUnselected: "appkit-tabs-dropdown--unselected",
+    dropdownSelect: "appkit-tabs-dropdown__select",
+    dropdownCaret: "appkit-tabs-dropdown__caret",
+};
+/**
+ * `TabBarShell` — the rail + overflow arrows around a `role="tablist"`.
+ *
+ * The arrows are SIBLINGS of the tablist, never children, so its accessibility
+ * -tree children stay exactly the `role="tab"` elements — no `aria-owns`, no
+ * invalid-child warnings.
+ */
+export function TabBarShell({ className = "", ariaLabel = "Tabs", leading, activeKey = "", children, }) {
+    const listRef = useRef(null);
+    const { hasArrows, atStart, atEnd, scrollByPage } = useTabsOverflow(listRef, activeKey);
+    /*
+     * The arrows are aria-hidden + tabIndex={-1} deliberately. They duplicate
+     * scrolling that keyboard users already get for free: every trigger is a
+     * natural tab stop and browsers scroll a focused element into view, so
+     * WCAG 2.1.1 is satisfied by that path. Making them focusable would add two
+     * extra tab stops to every tab bar in the app, in front of the content the
+     * user is actually navigating to — a net keyboard regression for a
+     * redundant affordance. (HorizontalScroller's arrows ARE focusable, and
+     * correctly so: there they page through card content with no other
+     * keyboard path.)
+     */
+    return (_jsxs(Div, { className: UI_TAB_BAR.shell, "data-arrows": hasArrows ? "true" : "false", children: [leading, hasArrows && (_jsx("button", { type: "button", "aria-hidden": "true", tabIndex: -1, disabled: atStart, onClick: () => scrollByPage(-1), className: UI_TAB_BAR.arrow, children: _jsx(ChevronLeft, { className: "w-4 h-4" }) })), _jsx(Div, { ref: listRef, role: "tablist", "aria-label": ariaLabel, className: [UI_TAB_BAR.list, className].filter(Boolean).join(" "), children: children }), hasArrows && (_jsx("button", { type: "button", "aria-hidden": "true", tabIndex: -1, disabled: atEnd, onClick: () => scrollByPage(1), className: UI_TAB_BAR.arrow, children: _jsx(ChevronRight, { className: "w-4 h-4" }) }))] }));
+}
+/**
+ * `TabBarButton` — a bare `role="tab"` button carrying `.appkit-tabs-trigger`.
+ *
+ * Exists because appkit's `<Button variant="ghost">` is NOT transparent: it
+ * has a `--appkit-color-border-subtle` fill, a 44px min-height and a
+ * `rounded-xl` radius, so the hand-rolled bars that used it were rendering
+ * grey pill chips rather than text tabs. It also wraps children in
+ * `.appkit-button__content` (Root Cause #68), which a tab does not want.
+ */
+export function TabBarButton({ selected, className = "", children, ...rest }) {
+    return (_jsx("button", { ...rest, type: rest.type ?? "button", role: "tab", "aria-selected": selected, className: [UI_TAB_BAR.trigger, className].filter(Boolean).join(" "), children: children }));
+}
+/**
+ * `TabsNavSelect` — the collapsed tab bar, past `TABS_DROPDOWN_THRESHOLD`.
+ *
+ * A `<select>` that reads as navigation rather than as a form field: the
+ * enclosing rectangle is gone and the only chrome left is the same 2px brand
+ * rail an active row-tab uses. See the block comment in Tabs.style.css for
+ * the full reasoning, and the specificity warning above those rules.
+ *
+ * `variant="default"` and NOT `"ghost"` — ghost's `border-transparent
+ * bg-transparent` are `!important` utilities that would pin the border to
+ * transparent and block the indicator rail.
+ */
+export function TabsNavSelect({ ariaLabel, options, value, placeholder, selected = true, onValueChange, className = "", role, }) {
+    return (_jsxs(Div, { className: [
+            UI_TAB_BAR.dropdown,
+            selected ? "" : UI_TAB_BAR.dropdownUnselected,
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [_jsx(Select, { bare: true, variant: "default", "aria-label": ariaLabel, role: role, options: options, value: value, placeholder: placeholder, onValueChange: onValueChange, className: UI_TAB_BAR.dropdownSelect }), _jsx(Div, { className: UI_TAB_BAR.dropdownCaret, "aria-hidden": "true", children: _jsx(ChevronDown, { className: "w-4 h-4" }) })] }));
+}

package/dist/ui/components/Tabs.js

@@ -1,17 +1,21 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, useState } from "react";
-import { Select } from "./Select";
+import { TabBarShell, TabsNavSelect } from "./TabBarShell";
 const UI_TABS = {
-    list: "appkit-tabs-list",
-    listDropdown: "appkit-tabs-list--dropdown",
     trigger: "appkit-tabs-trigger",
     content: "appkit-tabs-content",
     badge: "appkit-tabs-trigger__badge",
 };
-/** Past this many items, TabsList renders a <Select> dropdown instead of a
- * horizontal row — a scrollable row of 6+ tabs is unreadable/unreachable on
- * mobile widths. */
+/** Past this many items, TabsList renders a dropdown instead of a horizontal
+ * row — a scrollable row of 6+ tabs is unreadable/unreachable on mobile
+ * widths.
+ *
+ * The dropdown is styled as NAVIGATION, not as a form field: see
+ * `TabsNavSelect` and the `.appkit-tabs-dropdown` rules in Tabs.style.css. It
+ * used to render a raw `<Select bare>`, which carried the full
+ * `.appkit-select__trigger` input chrome (bordered, rounded, surface-filled,
+ * 40px tall) — which is exactly why a tab bar read as an input. */
 const TABS_DROPDOWN_THRESHOLD = 5;
 const TabsContext = createContext({
     active: "",
@@ -44,9 +48,9 @@ export function TabsList({ className = "", children }) {
                 disabled: item.props.disabled,
             };
         });
-        return (_jsx(Select, { bare: true, "aria-label": "Tabs", role: "tablist", options: options, value: active, onValueChange: setActive, className: [UI_TABS.list, UI_TABS.listDropdown, className].filter(Boolean).join(" ") }));
+        return (_jsx(TabsNavSelect, { ariaLabel: "Tabs", role: "tablist", options: options, value: active, onValueChange: setActive, className: className }));
     }
-    return (_jsx("div", { role: "tablist", className: [UI_TABS.list, className].filter(Boolean).join(" "), "data-section": "tabs-div-615", children: children }));
+    return (_jsx(TabBarShell, { className: className, ariaLabel: "Tabs", activeKey: active, children: children }));
 }
 export function TabsTrigger({ value, disabled, className = "", children, badge, }) {
     const { active, setActive } = useContext(TabsContext);

package/dist/ui/components/Tabs.style.css

@@ -1,84 +1,292 @@
-/* Tabs — tabbed navigation with list, triggers, and content panels */
+/* Tabs — tabbed navigation: shell (scroll arrows) + list + triggers + panels
+ *
+ * WHY THIS FILE LOOKS THE WAY IT DOES (2026-08-26):
+ *   The active trigger used to be `var(--color-primary, #65a30d)` — a variable
+ *   that does not exist in this token system — so EVERY active tab in the app
+ *   rendered hardcoded lime, ignoring the theme entirely. And past
+ *   TABS_DROPDOWN_THRESHOLD triggers the bar collapses to a <Select bare>,
+ *   which carried the full `.appkit-select__trigger` input chrome: a bordered,
+ *   rounded, surface-filled 40px box that read as a form field rather than as
+ *   navigation. Both are fixed below.
+ */
 
-.appkit-tabs-list {
+/* ── Shell ──────────────────────────────────────────────────────────────
+   Owns the rail and the arrow gutters.
+
+   The rail lives HERE and not on .appkit-tabs-list because the list is the
+   scroll container: `overflow-y: hidden` clips anything a trigger pushes
+   past its own padding box, so the old `margin-bottom: -1px` overlap never
+   actually rendered. On the shell the rail also runs unbroken beneath the
+   arrow gutters. */
+.appkit-tabs-shell {
+  --appkit-tabs-indicator: var(--appkit-color-primary);
+  /* Fallback first, for engines without color-mix (Safari < 16.2): plain ink
+     is legible everywhere, just unbranded. */
+  --appkit-tabs-ink-active: var(--appkit-color-text);
+  /* Blend the brand toward the theme's own ink. --appkit-color-text is by
+     definition the max-contrast ink against that theme's background, so this
+     self-corrects per theme: light themes darken the brand, dark themes
+     lighten it. Using --appkit-color-primary raw for TEXT fails WCAG AA in
+     the shipped `sunset` (amber on white, ~2.2:1) and `default-light`
+     (~3.7:1) presets. The 2px indicator below stays pure brand — the mix
+     applies only to text, which is the part with a contrast requirement. */
+  --appkit-tabs-ink-active: color-mix(in srgb, var(--appkit-color-primary) 60%, var(--appkit-color-text));
+  --appkit-tabs-arrow-size: 2rem;
+  --appkit-tabs-veil: color-mix(in srgb, var(--appkit-color-text) 5%, transparent);
+
+  position: relative;
   display: flex;
+  align-items: stretch;
+  min-width: 0; /* survives being a flex/grid item */
   border-bottom: 1px solid var(--appkit-color-border);
-  /* Consumers with many tabs (e.g. AdminSiteSettingsView's 17 groups) would
-     otherwise overflow past the container with no way to reach the later
-     triggers — found via Playwright driving a real browser at 1440px wide,
-     where tabs 16-17 were positioned off-screen and unreachable even after
-     scrollIntoViewIfNeeded(). Horizontal scroll keeps every tab reachable
-     regardless of trigger count or viewport width. */
+}
+
+/* ── List — the role="tablist" element, and the scroll container ──────── */
+.appkit-tabs-list {
+  display: flex;
+  align-items: stretch;
+  gap: var(--appkit-space-1);
+  flex: 1 1 auto;
+  min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
+  scroll-behavior: smooth;
+  /* The thin scrollbar is the no-JS / pre-hydration affordance. Once the
+     client shell mounts and stamps data-arrows="true", the arrows take over
+     and it is hidden. */
   scrollbar-width: thin;
 }
-
-/* Past TABS_DROPDOWN_THRESHOLD triggers, TabsList renders a <Select bare>
-   instead of the flex row above — override the row-specific layout rules
-   that don't apply to a native <select>. */
-.appkit-tabs-list--dropdown {
-  display: block;
-  overflow: visible;
-  border-bottom: none;
-  max-width: 20rem;
+.appkit-tabs-shell[data-arrows="true"] .appkit-tabs-list {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.appkit-tabs-shell[data-arrows="true"] .appkit-tabs-list::-webkit-scrollbar {
+  display: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .appkit-tabs-list {
+    scroll-behavior: auto;
+  }
 }
 
+/* ── Trigger ─────────────────────────────────────────────────────────────
+   Applies to <button> (TabsTrigger, TabBarButton) AND <a> (StoreNavTabs,
+   EventTabBar), so `border: 0; background: transparent; font: inherit`
+   normalise the UA button styles rather than assuming one element. */
 .appkit-tabs-trigger {
-  margin-bottom: -1px;
-  border-bottom: 2px solid transparent;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--appkit-space-2);
+  padding: var(--appkit-space-2-5) var(--appkit-space-3);
+  border: 0;
+  border-radius: var(--appkit-radius-sm) var(--appkit-radius-sm) 0 0;
+  background-color: transparent;
+  font: inherit;
+  font-size: var(--appkit-text-base);
+  /* Weight stays 500 in EVERY state on purpose: a 500 -> 600 swap on select
+     shifts every following tab a few px and re-triggers the overflow
+     measurement in tabs-overflow.ts. */
   font-weight: 500;
-  transition: color 0.15s;
+  line-height: 1.25rem;
+  color: var(--appkit-color-text-muted);
+  text-decoration: none;
   white-space: nowrap;
-  flex-shrink: 0;
+  cursor: pointer;
+  transition:
+    color var(--appkit-duration-fast) ease,
+    box-shadow var(--appkit-duration-fast) ease,
+    background-color var(--appkit-duration-fast) ease;
 }
+
+/* The indicator is an INSET box-shadow, not a border:
+     - it paints inside the padding box, so the list's `overflow-y: hidden`
+       can never clip it (a bottom border + negative margin can, and did);
+     - it costs zero layout, so switching tabs cannot reflow the strip;
+     - it renders identically on <a> and <button>. */
 .appkit-tabs-trigger[aria-selected="true"] {
-  border-color: var(--color-primary, #65a30d);
-  color: var(--color-primary, #65a30d);
-}
-.appkit-tabs-trigger:not([aria-selected="true"]) {
-  color: var(--appkit-color-zinc-600);
+  color: var(--appkit-tabs-ink-active);
+  box-shadow: inset 0 -2px 0 0 var(--appkit-tabs-indicator);
 }
+
 .appkit-tabs-trigger:not([aria-selected="true"]):hover {
   color: var(--appkit-color-text);
+  background-color: var(--appkit-tabs-veil);
+  box-shadow: inset 0 -2px 0 0 var(--appkit-color-border);
 }
-.appkit-tabs-trigger:disabled {
+
+/* outline-offset MUST be negative — a positive or zero offset draws outside
+   the padding box and is clipped by the scroll container. */
+.appkit-tabs-trigger:focus-visible {
+  outline: 2px solid var(--appkit-color-focus-ring);
+  outline-offset: -2px;
+  border-radius: var(--appkit-radius-sm);
+}
+
+.appkit-tabs-trigger:disabled,
+.appkit-tabs-trigger[aria-disabled="true"] {
   cursor: not-allowed;
   opacity: 0.5;
+  box-shadow: none;
+  background-color: transparent;
 }
 
+/* ── Badge ───────────────────────────────────────────────────────────── */
 .appkit-tabs-trigger__badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin-left: 0.5rem;
   padding: 0 0.4rem;
   min-width: 1.25rem;
   height: 1.25rem;
   border-radius: 9999px;
   font-size: 0.6875rem;
   font-weight: 600;
-  background: var(--appkit-color-surface-elevated);
+  /* NOT --appkit-color-surface-elevated: that token is #ffffff in light mode,
+     so the inactive badge was invisible on every white card. */
+  background-color: color-mix(in srgb, var(--appkit-color-text) 8%, transparent);
   color: var(--appkit-color-text-muted);
 }
 .appkit-tabs-trigger[aria-selected="true"] .appkit-tabs-trigger__badge {
-  background: color-mix(in srgb, var(--appkit-color-primary) 15%, transparent);
-  color: var(--appkit-color-primary);
+  background-color: color-mix(in srgb, var(--appkit-color-primary) 15%, transparent);
+  color: var(--appkit-tabs-ink-active);
 }
 
-.appkit-tabs-content {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+/* ── Scroll arrows ───────────────────────────────────────────────────────
+   In-flow flex siblings of the tablist, NOT absolutely-positioned overlays.
+   An overlay would need a background matching whatever surface the bar
+   happens to sit on (bg / surface / surface-elevated all occur in this app)
+   and would cover the leftmost/rightmost tab. In-flow arrows need no
+   background at all. */
+.appkit-tabs-shell__arrow {
+  flex: none;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--appkit-tabs-arrow-size);
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--appkit-color-text-muted);
+  cursor: pointer;
+  transition:
+    color var(--appkit-duration-fast) ease,
+    background-color var(--appkit-duration-fast) ease,
+    opacity var(--appkit-duration-fast) ease;
+}
+.appkit-tabs-shell__arrow:hover:not([disabled]) {
+  color: var(--appkit-color-text);
+  background-color: var(--appkit-tabs-veil);
+}
+.appkit-tabs-shell__arrow[disabled] {
+  opacity: 0.3;
+  cursor: default;
 }
+/* RTL: the chevron must point the way the content actually moves. */
+[dir="rtl"] .appkit-tabs-shell__arrow > svg {
+  transform: scaleX(-1);
+}
+
+/* ── Dropdown (past TABS_DROPDOWN_THRESHOLD triggers) ─────────────────────
+   The wrapper carries the sizing and the indicator rail; the <select> itself
+   is stripped back to a bare label.
 
-.dark .appkit-tabs-list {
-  border-color: var(--appkit-color-border);
+   What makes this read as NAVIGATION rather than as an input:
+     1. the enclosing rectangle is gone (border, radius, surface fill) — a
+        form field is legible as a field almost entirely because of its box;
+     2. the only chrome left is the same 2px brand rail an active row-tab
+        uses, so it speaks the same language as the bars beside it;
+     3. height collapses from --appkit-size-input-md (40px) to a row tab's;
+     4. weight 600 + active-tab ink — input VALUES are 400-weight plain text;
+     5. padding-left: 0 aligns the label flush with the content column below,
+        the way a section heading does (inputs are inset ~12px);
+     6. a caret finally exists — Select's chevron SVG only renders in its
+        non-`bare` branch, while `appearance-none` applies in both, so this
+        control previously had no disclosure affordance whatsoever. */
+.appkit-tabs-dropdown {
+  position: relative;
+  display: block;
+  flex: none; /* when it sits in TabBarShell's `leading` slot */
+  /* Select hardcodes a `w-full` utility, which is !important and unbeatable,
+     so the SELECT can never shrink to its content — the WRAPPER has to. With
+     `fit-content` the child's percentage width is treated as auto for
+     intrinsic sizing, so the box hugs the widest option (native <select>
+     behaviour) and the rail hugs the label rather than running a fixed 20rem
+     under a short one, which would read as an underlined input again. */
+  width: fit-content;
+  max-width: 20rem;
+  min-width: 0;
+  border-bottom: 2px solid var(--appkit-tabs-indicator);
+}
+/* StoreNavTabs' listing-type picker uses this while no listing tab is the
+   active one — same control, but making no "you are here" claim. */
+.appkit-tabs-dropdown--unselected {
+  border-bottom-color: transparent;
 }
-.dark .appkit-tabs-trigger:not([aria-selected="true"]) {
-  color: var(--appkit-color-slate-400);
+
+/* 🛑 The compound selectors below are sized to out-specify Select.style.css.
+   Do NOT "simplify" them to single-class selectors: the input chrome comes
+   straight back and the tie falls to @import order in index.style.css.
+     .appkit-select__trigger                                    (0,1,0)
+     .appkit-select__trigger--default:focus-visible             (0,2,0)
+     .appkit-select__trigger--enabled:hover:not(:focus-visible) (0,3,0)
+     .dark .appkit-select__trigger                              (0,2,0)  */
+.appkit-tabs-dropdown__select.appkit-select__trigger {
+  min-height: 0; /* kills --appkit-size-input-md (40px) */
+  border: 0; /* kills the 1px border               */
+  border-radius: 0; /* kills the .5rem radius             */
+  background-color: transparent; /* kills the surface fill             */
+  box-shadow: none;
+  /* padding-right is deliberately NOT set: Select hardcodes the `pr-10`
+     utility, which is !important and unbeatable. 2.5rem is exactly the caret
+     gutter we want anyway. */
+  padding-top: var(--appkit-space-2-5);
+  padding-bottom: var(--appkit-space-2-5);
+  padding-left: 0;
+  font-size: var(--appkit-text-base);
+  font-weight: 600;
+  color: var(--appkit-tabs-ink-active);
+  cursor: pointer;
 }
-.dark .appkit-tabs-trigger:not([aria-selected="true"]):hover {
+.appkit-tabs-dropdown__select.appkit-select__trigger:hover:not(:focus-visible) {
+  border-color: transparent;
   color: var(--appkit-color-text);
 }
+.appkit-tabs-dropdown__select.appkit-select__trigger:focus-visible {
+  outline: 2px solid var(--appkit-color-focus-ring);
+  outline-offset: 2px;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.appkit-tabs-dropdown__caret {
+  position: absolute;
+  top: 50%;
+  right: var(--appkit-space-2);
+  transform: translateY(-50%);
+  display: inline-flex;
+  pointer-events: none;
+  color: var(--appkit-tabs-ink-active);
+}
+
+/* ── Panels ──────────────────────────────────────────────────────────── */
+.appkit-tabs-content {
+  padding-top: var(--appkit-space-4);
+  padding-bottom: var(--appkit-space-4);
+}
+
+/* ── Dark mode ───────────────────────────────────────────────────────────
+   Exactly ONE override is needed. Every colour above is either a semantic
+   token that flips with the theme, or a color-mix against
+   --appkit-color-text / --appkit-color-primary, which flip with it too. This
+   rule exists solely because Select.style.css hardcodes a dark background at
+   (0,2,0). The old `.dark .appkit-tabs-trigger { color: slate-400 }` pair is
+   gone — it pinned a fixed ramp value that ignored the cobalt-night and
+   sunset themes. */
+.dark .appkit-tabs-dropdown__select.appkit-select__trigger {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--appkit-tabs-ink-active);
+}

package/dist/ui/components/ViewToggle.style.css

@@ -26,7 +26,7 @@
 }
 
 .appkit-view-toggle__button--inactive:hover {
-  background: var(--appkit-color-zinc-100);
+  background: var(--appkit-color-surface-hover);
 }
 
 .appkit-view-toggle__icon {
@@ -44,7 +44,3 @@
   color: var(--appkit-color-slate-400);
   border-color: var(--appkit-color-border);
 }
-
-.dark .appkit-view-toggle__button--inactive:hover {
-  background: var(--appkit-color-slate-800);
-}

package/dist/ui/components/tabs-overflow.d.ts

@@ -0,0 +1,17 @@
+export interface TabsOverflowState {
+    /** True only once the client has mounted AND the strip actually overflows. */
+    hasArrows: boolean;
+    atStart: boolean;
+    atEnd: boolean;
+}
+export interface TabsOverflowApi extends TabsOverflowState {
+    scrollByPage: (direction: 1 | -1) => void;
+}
+/**
+ * Drives the scroll-arrow affordances on a horizontally scrollable tab list.
+ *
+ * `activeKey` identifies the currently-selected tab. It exists solely to key
+ * the scroll-into-view effect, so the strip repositions when the selection
+ * changes and stays put while the user scrolls.
+ */
+export declare function useTabsOverflow(listRef: React.RefObject<HTMLElement | null>, activeKey: string): TabsOverflowApi;