atlas-react-kit 0.8.0 → 0.8.2

package/COMPONENTS.md

@@ -43,7 +43,7 @@ no root component barrel.
 | `switch`                      | `Switch`; settings that apply immediately; square track and thumb                                                                                                                                                                                                                                                                                                                        |
 | `table`                       | Table, header, body, footer, row, head, cell, caption; root scroller is `min-w-0 overflow-x-auto` with a fade cue; cells are `px-2` below `sm`                                                                                                                                                                                                                                           |
 | `table-body-skeleton`         | `TableBodySkeleton`; `columns`, optional `rows` (default 5)                                                                                                                                                                                                                                                                                                                              |
-| `tabs`                        | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `tabsListVariants`, `tabsTriggerVariants`; list `variant` is `default` or `line`; style `TabsNav` links with `tabsTriggerVariants()`                                                                                                                                                                                        |
+| `tabs`                        | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `tabsListVariants`, `tabsTriggerVariants`; list `variant` is `default` or `line`; style `TabsNav` links with `tabsTriggerVariants()`; `TabsNav` / `TabsList` scroll horizontally only (`overflow-y` hidden, `p-1` counted in the scroller height, edge fade, active item into view) — do not wrap them in `overflow-x-auto` |
 | `toast`                       | `Toaster`, `toast`; mount one `Toaster` (`position`, `closeButton` (default on), `expand`, `visibleToasts`, `duration`), then `toast(message, options)`, `.success`, `.info`, `.warning`, `.error`, `.loading`, `.dismiss(id?)`. Options: `id` (replaces that toast), `description`, `duration`, `action` / `cancel` as `{ label, onClick }`. Kit-owned API: no toast library is exposed |
 | `toggle`                      | `Toggle`, `toggleVariants`, `selectedToggleChrome`; `variant`, `size`. Pressed state is the selected wash, text, and border via `data-state=on`, `aria-pressed`, and `aria-checked`                                                                                                                                                                                                      |
 | `toggle-group`                | `ToggleGroup`, `ToggleGroupItem`; `variant`, `size`. Items share `toggleVariants`, so single (radio) and multiple selections match a pressed `Toggle`                                                                                                                                                                                                                                    |

package/DESIGN_RULES.md

@@ -54,8 +54,8 @@ keyboard and screen-reader testing.
 - Focus is a solid `ring-ring` (brand purple), never a translucent ring such
   as `ring-ring/30`, which fades below 3:1. Keyboard-highlighted menu and list
   items show a 2px `ring` bar on their leading edge. Content that scrolls must
-  be reachable by keyboard; `Table` adds itself to the tab order while it
-  overflows.
+  be reachable by keyboard; `Table`, `TabsList`, and `TabsNav` add their
+  scroller to the tab order while they overflow.
 
 ## Writing
 
@@ -103,7 +103,12 @@ triggers as outline buttons in application code.
 
 Use `Tabs` with actual `TabsContent` panels. For URL view switches, use a labelled
 `TabsNav` with links and `aria-current="page"` on the active link. The optional
-Next adapter provides `TabsNavLink` with this behavior.
+Next adapter provides `TabsNavLink` with this behavior. `TabsNav` and `TabsList`
+scroll overflowing labels inside themselves (`overflow-x-auto overflow-y-hidden`,
+with padding for the active border and focus ring counted in the scroller
+height, and an edge fade like `Table`). Do not wrap them in another
+`overflow-x-auto` — that pairing forces `overflow-y: auto` and a stray
+vertical scrollbar.
 
 Use `FormTextField`, `FormSelectField`, `FormDatePickerField`,
 `FormDateTimePickerField`, `FormMarkdownField`, and `FormFeedbackField` for

package/README.md

@@ -7,7 +7,7 @@ keeping locally (`InfoTip`, `ColorLegend`, `SearchPicker`, `Markdown`,
 React 19 and Tailwind 4 are required.
 
 ```sh
-npm install --save-exact atlas-react-kit@0.8.0
+npm install --save-exact atlas-react-kit@0.8.2
 ```
 
 Import components by subpath:
@@ -116,7 +116,7 @@ artifact with the package owner's npm login:
 ```sh
 mkdir -p release-artifacts
 npm pack --pack-destination release-artifacts
-npm publish ./release-artifacts/atlas-react-kit-0.8.0.tgz --access public
+npm publish ./release-artifacts/atlas-react-kit-0.8.2.tgz --access public
 ```
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md) for adding components, the browser

package/dist/internal/tabs-styles.d.ts

@@ -1,5 +1,17 @@
 declare const tabsListVariants: (props?: ({
     variant?: "default" | "line" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Horizontal scroller around a tab row. `p-1` leaves room for the active
+ * border and focus ring; the height is the `h-11` list plus that padding
+ * (`h-13` = 44px + 8px) so the list fits the content box. Putting padding
+ * on an overflow box without this height makes `scrollHeight` 4px taller
+ * than `clientHeight` (48 vs 44) and a vertical scrollbar appears if
+ * `overflow-y` is not hidden. Line variant adds `pb-2` for the underline
+ * (`h-14` = 44px + 4px + 8px).
+ */
+declare const tabsScrollerVariants: (props?: ({
+    variant?: "default" | "line" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const tabsTriggerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export { tabsListVariants, tabsTriggerVariants };
+export { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants };

package/dist/internal/tabs-styles.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { disabledState, focusRing, selectedState } from "./styles.js";
-const tabsListVariants = cva('group/tabs-list inline-flex w-fit items-stretch justify-center p-0 text-muted-foreground group-data-[orientation="horizontal"]/tabs:h-11 group-data-[orientation="vertical"]/tabs:h-fit group-data-[orientation="vertical"]/tabs:flex-col', {
+const tabsListVariants = cva('group/tabs-list inline-flex w-max min-w-full items-stretch justify-start p-0 text-muted-foreground group-data-[orientation="horizontal"]/tabs:h-11 group-data-[orientation="vertical"]/tabs:h-fit group-data-[orientation="vertical"]/tabs:flex-col', {
     variants: {
         variant: {
             default: "bg-muted",
@@ -11,12 +11,35 @@ const tabsListVariants = cva('group/tabs-list inline-flex w-fit items-stretch ju
         variant: "default",
     },
 });
+/**
+ * Horizontal scroller around a tab row. `p-1` leaves room for the active
+ * border and focus ring; the height is the `h-11` list plus that padding
+ * (`h-13` = 44px + 8px) so the list fits the content box. Putting padding
+ * on an overflow box without this height makes `scrollHeight` 4px taller
+ * than `clientHeight` (48 vs 44) and a vertical scrollbar appears if
+ * `overflow-y` is not hidden. Line variant adds `pb-2` for the underline
+ * (`h-14` = 44px + 4px + 8px).
+ */
+const tabsScrollerVariants = cva("relative box-border w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden overscroll-x-contain p-1 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", {
+    variants: {
+        variant: {
+            default: 'group-data-[orientation="horizontal"]/tabs:h-13',
+            line: 'group-data-[orientation="horizontal"]/tabs:h-14 pb-2',
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
 const tabsTriggerVariants = cva([
     focusRing,
     disabledState,
-    'relative inline-flex h-full min-w-0 flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-[orientation="vertical"]/tabs:w-full group-data-[orientation="vertical"]/tabs:justify-start group-data-[orientation="vertical"]/tabs:px-4 group-data-[orientation="vertical"]/tabs:py-2 hover:text-foreground has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3.5',
+    // flex-none + px-4: every trigger and TabsNav link keeps the same
+    // horizontal padding. flex-1 used to grow short labels and make the
+    // longest (e.g. Apple Reminders) look tighter. No last-child padding.
+    'relative inline-flex h-full min-w-max flex-none items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-[orientation="vertical"]/tabs:w-full group-data-[orientation="vertical"]/tabs:justify-start group-data-[orientation="vertical"]/tabs:px-4 group-data-[orientation="vertical"]/tabs:py-2 hover:text-foreground has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3.5',
     'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:border-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent',
     selectedState.active,
     'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation="horizontal"]/tabs:after:inset-x-0 group-data-[orientation="horizontal"]/tabs:after:bottom-[-5px] group-data-[orientation="horizontal"]/tabs:after:h-0.5 group-data-[orientation="vertical"]/tabs:after:inset-y-0 group-data-[orientation="vertical"]/tabs:after:-right-1 group-data-[orientation="vertical"]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state="active"]:after:opacity-100',
 ]);
-export { tabsListVariants, tabsTriggerVariants };
+export { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants };

package/dist/internal/use-horizontal-overflow.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+/**
+ * True while the element's content is wider than its box. Re-checked when
+ * the container or its content resizes. Used so a horizontal scroller can
+ * join the tab order only while it overflows (WCAG 2.1.1).
+ */
+export declare function useHorizontalOverflow(ref: React.RefObject<HTMLElement | null>): boolean;

package/dist/internal/use-horizontal-overflow.js

@@ -0,0 +1,23 @@
+"use client";
+import * as React from "react";
+/**
+ * True while the element's content is wider than its box. Re-checked when
+ * the container or its content resizes. Used so a horizontal scroller can
+ * join the tab order only while it overflows (WCAG 2.1.1).
+ */
+export function useHorizontalOverflow(ref) {
+    const [overflowing, setOverflowing] = React.useState(false);
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element || typeof ResizeObserver === "undefined")
+            return;
+        const check = () => setOverflowing(element.scrollWidth > element.clientWidth + 1);
+        check();
+        const observer = new ResizeObserver(check);
+        observer.observe(element);
+        if (element.firstElementChild)
+            observer.observe(element.firstElementChild);
+        return () => observer.disconnect();
+    }, [ref]);
+    return overflowing;
+}

package/dist/table.js

@@ -2,27 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { focusRing } from "./internal/styles.js";
+import { useHorizontalOverflow } from "./internal/use-horizontal-overflow.js";
 import { cn } from "./utils.js";
-/**
- * True while the element's content is wider than its box. Re-checked when
- * the container or its content resizes.
- */
-function useHorizontalOverflow(ref) {
-    const [overflowing, setOverflowing] = React.useState(false);
-    React.useEffect(() => {
-        const element = ref.current;
-        if (!element || typeof ResizeObserver === "undefined")
-            return;
-        const check = () => setOverflowing(element.scrollWidth > element.clientWidth + 1);
-        check();
-        const observer = new ResizeObserver(check);
-        observer.observe(element);
-        if (element.firstElementChild)
-            observer.observe(element.firstElementChild);
-        return () => observer.disconnect();
-    }, [ref]);
-    return overflowing;
-}
 /**
  * Data table. The root is a `min-w-0 overflow-x-auto` scroller so nowrap
  * columns scroll inside the table instead of widening a card or panel.

package/dist/tabs.d.ts

@@ -13,6 +13,12 @@ declare function TabsContent({ className, ...props }: React.ComponentProps<typeo
  * with `tabsTriggerVariants()` and mark the active one with
  * `data-state="active"` and `aria-current="page"` (the Next adapter
  * `TabsNavLink` does this for you).
+ *
+ * Overflow is handled here: the row scrolls horizontally only, with padding
+ * for active borders and focus rings counted in the scroller height (so the
+ * list cannot overflow on y), an edge fade while it overflows, and the
+ * active link scrolled into view on mount. Do not wrap it in
+ * `overflow-x-auto`.
  */
 declare function TabsNav({ className, children, ...props }: React.ComponentProps<"nav"> & {
     "aria-label": string;

package/dist/tabs.js

@@ -3,13 +3,41 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import {} from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
+import { focusRing } from "./internal/styles.js";
+import { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants, } from "./internal/tabs-styles.js";
+import { useHorizontalOverflow } from "./internal/use-horizontal-overflow.js";
 import { cn } from "./utils.js";
-import { tabsListVariants, tabsTriggerVariants, } from "./internal/tabs-styles.js";
 function Tabs({ className, orientation = "horizontal", ...props }) {
     return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, orientation: orientation, className: cn('group/tabs flex gap-2 data-[orientation="horizontal"]:flex-col', className), ...props }));
 }
+/**
+ * Horizontal scroller around a tab row. `overflow-x: auto` alone would
+ * compute `overflow-y` to `auto` as well (CSS overflow pairing), so the
+ * active tab's border and focus ring grow a vertical scrollbar. Pad for
+ * those strokes *inside* the box (`h-13` = `h-11` list + `p-1`), clip the
+ * y axis as a backstop, and fade the edges while the row overflows —
+ * same cue as `Table`.
+ */
+function TabsScroller({ variant = "default", children, }) {
+    const ref = React.useRef(null);
+    const overflowing = useHorizontalOverflow(ref);
+    React.useLayoutEffect(() => {
+        const scroller = ref.current;
+        if (!scroller)
+            return;
+        const active = scroller.querySelector('[aria-current="page"], [data-state="active"]');
+        active?.scrollIntoView({
+            block: "nearest",
+            inline: "nearest",
+            behavior: "auto",
+        });
+    }, []);
+    return (_jsx("div", { ref: ref, "data-slot": "tabs-scroller", "data-variant": variant, tabIndex: overflowing ? 0 : undefined, className: cn(focusRing, tabsScrollerVariants({ variant })), children: children }));
+}
 function TabsList({ className, variant = "default", ...props }) {
-    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
+    return (_jsx(TabsScroller, { variant: variant ?? "default", children: _jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), 
+            // The scroller owns the muted fill so edge fades show through.
+            variant === "default" && "bg-transparent", className), ...props }) }));
 }
 function TabsTrigger({ className, ...props }) {
     return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn(tabsTriggerVariants(), className), ...props }));
@@ -24,8 +52,14 @@ function TabsContent({ className, ...props }) {
  * with `tabsTriggerVariants()` and mark the active one with
  * `data-state="active"` and `aria-current="page"` (the Next adapter
  * `TabsNavLink` does this for you).
+ *
+ * Overflow is handled here: the row scrolls horizontally only, with padding
+ * for active borders and focus rings counted in the scroller height (so the
+ * list cannot overflow on y), an edge fade while it overflows, and the
+ * active link scrolled into view on mount. Do not wrap it in
+ * `overflow-x-auto`.
  */
 function TabsNav({ className, children, ...props }) {
-    return (_jsx("nav", { "data-slot": "tabs-nav", "data-orientation": "horizontal", className: cn("group/tabs", className), ...props, children: _jsx("div", { "data-slot": "tabs-list", "data-variant": "default", className: tabsListVariants(), children: children }) }));
+    return (_jsx("nav", { "data-slot": "tabs-nav", "data-orientation": "horizontal", className: cn("group/tabs min-w-0 w-full max-w-full", className), ...props, children: _jsx(TabsScroller, { children: _jsx("div", { "data-slot": "tabs-list", "data-variant": "default", className: cn(tabsListVariants(), "bg-transparent"), children: children }) }) }));
 }
 export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants, tabsTriggerVariants, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",

package/skills/atlas-react-kit/SKILL.md

@@ -127,7 +127,7 @@ list; the ones that come up most:
   Overriding their height, padding, or border makes one field look different
   from its neighbors.
 - **Layout overrides**: `CardContent className="px-0"` makes one section flush
-  without `!important`. Tables already scroll horizontally inside cards, so do
+  without `!important`. Tables and tab rows already scroll horizontally, so do
   not wrap them in another overflow container.
 - **Headings**: `CardTitle` and `DialogTitle` already apply the uppercase,
   tracked heading style; use `font-heading` for other headings.

package/theme.css

@@ -255,4 +255,53 @@
   [data-slot="card"] [data-slot="table-container"] {
     --table-scroll-fade: var(--card);
   }
+
+  /*
+   * Tab row overflow: same pinned-shadow / local-cover trick as tables.
+   * Covers match the muted list so a clipped label reads as overflow.
+   * The fifth layer is the list fill — the list itself stays transparent
+   * so the fades show through. Scrollbars stay hidden; the fade is the cue.
+   */
+  [data-slot="tabs-scroller"] {
+    --tabs-scroll-fade: var(--muted);
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    scroll-padding-inline: 1rem;
+    background:
+      linear-gradient(to right, var(--tabs-scroll-fade) 40%, transparent),
+      linear-gradient(to left, var(--tabs-scroll-fade) 40%, transparent),
+      linear-gradient(
+        to right,
+        color-mix(in oklch, var(--foreground) 16%, transparent),
+        transparent 80%
+      ),
+      linear-gradient(
+        to left,
+        color-mix(in oklch, var(--foreground) 16%, transparent),
+        transparent 80%
+      ),
+      var(--tabs-scroll-fade);
+    background-repeat: no-repeat;
+    background-size:
+      1.5rem 100%,
+      1.5rem 100%,
+      0.75rem 100%,
+      0.75rem 100%,
+      100% 100%;
+    background-position:
+      left center,
+      right center,
+      left center,
+      right center,
+      center;
+    background-attachment: local, local, scroll, scroll, scroll;
+  }
+
+  [data-slot="tabs-scroller"]::-webkit-scrollbar {
+    display: none;
+  }
+
+  [data-slot="tabs-scroller"][data-variant="line"] {
+    --tabs-scroll-fade: var(--background);
+  }
 }