atlas-react-kit 1.2.3 → 1.2.5

package/DESIGN_RULES.md

@@ -120,8 +120,8 @@ Primitives have square corners. Reserve `rounded-full` for dots, avatars,
 and other circles. Card and dialog titles already use
 uppercase, tracked `font-heading` styling. Toasts use the same square corners
 and Alert's left padding, with a square close button inside the top-right
-corner. Mount the toaster in its own notification area; it occupies space
-in the page so notifications do not cover content. A plain `toast()` has no icon — status icons
+corner. The toaster floats over the page at its `position`, anchored to the
+viewport; mount one near the app root. A plain `toast()` has no icon — status icons
 belong to `success`, `info`, `warning`, `error`, and `loading`. Tone colors
 the icon, title, and border, not the body.
 

package/dist/badge.js

@@ -21,7 +21,7 @@ const badgeVariants = cva([
             ghost: "text-muted-foreground hover:text-foreground",
             link: "text-foreground underline-offset-4 hover:underline",
             /** Tinted chip; pick its color with `tone`. */
-            soft: "px-2 py-0.5",
+            soft: "px-2 py-0.5 text-xs font-medium tracking-normal normal-case",
         },
         /** Only `soft` reads this. */
         tone: {

package/dist/button.js

@@ -21,7 +21,7 @@ const buttonVariants = cva([
     disabledState,
     "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding",
     controlText,
-    "transition-all select-none active:not-aria-[haspopup]:translate-y-px disabled:opacity-100 disabled:saturate-0",
+    "transition-all select-none active:not-aria-[haspopup]:translate-y-px",
     inlineIcon.default,
 ], {
     variants: {

package/dist/combobox.js

@@ -6,6 +6,7 @@ import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { formControlTriggerClassName } from "./internal/form-control.js";
 import { handleListboxKey } from "./internal/listbox-navigation.js";
+import { clamp } from "./internal/math.js";
 import { Listbox, ListboxEmptyStatus, listboxInputAria, PickerOption, } from "./internal/listbox-option.js";
 import { createSearchIndex, filterSearchIndex, foldSearchText, normalizeSearchQuery, } from "./internal/search.js";
 import { emptyValueText } from "./internal/styles.js";
@@ -53,7 +54,7 @@ function resolveCreateValue(query, existingValues, normalize) {
 export function Combobox({ options, value, onValueChange, placeholder = "Select", searchPlaceholder = "Search", emptyText, disabled, id, className, listClassName, contentClassName, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, creatable = false, normalizeCreateValue = defaultNormalizeCreateValue, createLabel = defaultCreateLabel, ...props }) {
     const [open, setOpen] = React.useState(false);
     const [query, setQuery] = React.useState("");
-    const [highlight, setHighlight] = React.useState(0);
+    const [highlightIndex, setHighlight] = React.useState(0);
     const listId = React.useId();
     const generatedId = React.useId();
     const triggerId = id ?? generatedId;
@@ -84,6 +85,7 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             : null;
     }, [creatable, query, existingValues, normalizeCreateValue, createLabel]);
     const list = createOption ? [...filtered, createOption] : filtered;
+    const highlight = clamp(highlightIndex, 0, Math.max(0, list.length - 1));
     const onOpenChange = (next) => {
         setOpen(next);
         if (!next) {

package/dist/error-boundary.d.ts

@@ -10,9 +10,7 @@ type ErrorFallbackProps = {
     className?: string;
 };
 /**
- * Presentational recovery UI used by `ErrorBoundary`: a large `EmptyPanel`
- * with the message and recovery buttons. Exported so the markup can be
- * tested without throwing during render.
+ * Recovery UI used by `ErrorBoundary`: a large `EmptyPanel` with recovery buttons.
  */
 export declare function ErrorFallback({ message, onRetry, onReload, className, }: ErrorFallbackProps): import("react").JSX.Element;
 type ErrorBoundaryProps = {
@@ -24,15 +22,14 @@ type ErrorBoundaryProps = {
     onError?: (error: Error, info: ErrorInfo) => void;
 };
 type ErrorBoundaryState = {
-    error: Error | null;
+    hasError: boolean;
 };
 /**
  * Generic React error boundary with retry (reset) and full-page reload.
- * Not tied to any data library.
  */
 export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
     state: ErrorBoundaryState;
-    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    static getDerivedStateFromError(): ErrorBoundaryState;
     componentDidCatch(error: Error, info: ErrorInfo): void;
     retry: () => void;
     reload: () => void;

package/dist/error-boundary.js

@@ -5,9 +5,7 @@ import { Button } from "./button.js";
 import { EmptyPanel } from "./empty-panel.js";
 import { cn } from "./utils.js";
 /**
- * Presentational recovery UI used by `ErrorBoundary`: a large `EmptyPanel`
- * with the message and recovery buttons. Exported so the markup can be
- * tested without throwing during render.
+ * Recovery UI used by `ErrorBoundary`: a large `EmptyPanel` with recovery buttons.
  */
 export function ErrorFallback({ message = "Something went wrong.", onRetry, onReload, className, }) {
     return (_jsxs(EmptyPanel, { role: "alert", "data-slot": "error-boundary", size: "lg", 
@@ -16,24 +14,23 @@ export function ErrorFallback({ message = "Something went wrong.", onRetry, onRe
 }
 /**
  * Generic React error boundary with retry (reset) and full-page reload.
- * Not tied to any data library.
  */
 export class ErrorBoundary extends Component {
-    state = { error: null };
-    static getDerivedStateFromError(error) {
-        return { error };
+    state = { hasError: false };
+    static getDerivedStateFromError() {
+        return { hasError: true };
     }
     componentDidCatch(error, info) {
         this.props.onError?.(error, info);
     }
     retry = () => {
-        this.setState({ error: null });
+        this.setState({ hasError: false });
     };
     reload = () => {
         window.location.reload();
     };
     render() {
-        if (!this.state.error)
+        if (!this.state.hasError)
             return this.props.children;
         return (_jsx(ErrorFallback, { message: this.props.message, onRetry: this.retry, onReload: this.reload }));
     }

package/dist/form/feedback-field.js

@@ -5,5 +5,5 @@ import { cn } from "../utils.js";
 export function FormFeedbackField({ message, className, }) {
     if (!message)
         return null;
-    return (_jsx("p", { "data-slot": "form-feedback", className: cn("border-t border-destructive pt-3", errorText, className), role: "alert", children: message }));
+    return (_jsx("p", { "data-slot": "form-feedback", className: cn(errorText, className), role: "alert", children: message }));
 }

package/dist/internal/styles.d.ts

@@ -60,7 +60,7 @@ export declare const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-fo
 export declare const listboxScroll = "max-h-60 overflow-y-auto";
 /** Options in menus and listboxes. */
 export declare const optionState: {
-    /** Highlight as focus moves: the selected wash plus a 2px inset ring bar. */
+    /** Highlight as focus moves: grey fill plus a 2px ring bar, unlike checked. */
     focus: string;
     /** The same highlight for lists that track the active option in state. */
     active: string;

package/dist/internal/styles.js

@@ -60,10 +60,10 @@ export const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-foreground
 export const listboxScroll = "max-h-60 overflow-y-auto";
 /** Options in menus and listboxes. */
 export const optionState = {
-    /** Highlight as focus moves: the selected wash plus a 2px inset ring bar. */
-    focus: "focus:bg-selected focus:text-selected-foreground focus:shadow-[inset_2px_0_0_var(--color-ring)]",
+    /** Highlight as focus moves: grey fill plus a 2px ring bar, unlike checked. */
+    focus: "focus:bg-accent focus:text-accent-foreground focus:shadow-[inset_2px_0_0_var(--color-ring)]",
     /** The same highlight for lists that track the active option in state. */
-    active: "bg-selected text-selected-foreground shadow-[inset_2px_0_0_var(--color-ring)]",
+    active: "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--color-ring)]",
     /** The chosen value (`data-state="checked"`); a check icon marks it too. */
     checked: "data-[state=checked]:bg-selected data-[state=checked]:text-selected-foreground",
     /** The chosen value in lists that track selection in state. */

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

@@ -5,3 +5,5 @@ import * as React from "react";
  * join the tab order only while it overflows (WCAG 2.1.1).
  */
 export declare function useHorizontalOverflow(ref: React.RefObject<HTMLElement | null>): boolean;
+/** Scrolls a keyboard-focused `element` and its ring into `scroller`'s view. */
+export declare function revealInline(scroller: HTMLElement, element: Element): void;

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

@@ -21,3 +21,17 @@ export function useHorizontalOverflow(ref) {
     }, [ref]);
     return overflowing;
 }
+/** Scrolls a keyboard-focused `element` and its ring into `scroller`'s view. */
+export function revealInline(scroller, element) {
+    const rect = element.getBoundingClientRect();
+    const focused = scroller.ownerDocument.activeElement;
+    if (!rect.width || !focused?.matches(":focus-visible"))
+        return;
+    const box = scroller.getBoundingClientRect();
+    const before = rect.left - 8 - box.left;
+    const after = rect.right + 8 - box.right;
+    if (before < 0)
+        scroller.scrollLeft += before;
+    else if (after > 0)
+        scroller.scrollLeft += Math.min(after, before);
+}

package/dist/kanban.js

@@ -7,7 +7,8 @@ import { CheckCircle2, ChevronLeft, ChevronRight, GripVertical, Trash2, } from "
 import { Button } from "./button.js";
 import { KANBAN_COMPLETE_ID, KANBAN_DELETE_ID, buildKanbanGroups, kanbanOverflowEdges, kanbanScrollBy, resolveKanbanDrop, } from "./internal/kanban-layout.js";
 import { configureCardSortablePlugins, configureKanbanPlugins, } from "./internal/kanban-plugins.js";
-import { focusRingWithin } from "./internal/styles.js";
+import { focusRing } from "./internal/styles.js";
+import { revealInline } from "./internal/use-horizontal-overflow.js";
 import { Skeleton } from "./skeleton.js";
 import { cn } from "./utils.js";
 /** Column droppables lose to cards, so a drop lands between cards. */
@@ -77,7 +78,11 @@ function KanbanBoard({ columns, items, getColumnId, onMove, onComplete, onDelete
     }, [cardClassName, itemById, renderCard]);
     // `min-w-0` lets a flex or grid parent shrink the board so the scroller,
     // not the page, overflows.
-    return (_jsx("div", { "data-slot": "kanban-board", className: cn("min-w-0", className), ...props, children: _jsxs(DragDropProvider, { plugins: configureKanbanPlugins, onDragOver: handleDragOver, onDragEnd: handleDragEnd, children: [_jsxs("div", { className: "relative min-w-0 pb-12", children: [_jsx("div", { ref: scrollerRef, "data-slot": "kanban-scroller", "data-loading": dimmed || undefined, "data-overflow-start": overflow.start || undefined, "data-overflow-end": overflow.end || undefined, onScroll: overflow.measure, className: cn("flex min-w-0 gap-4 overflow-x-auto pb-2", 
+    return (_jsx("div", { "data-slot": "kanban-board", className: cn("min-w-0", className), ...props, children: _jsxs(DragDropProvider, { plugins: configureKanbanPlugins, onDragOver: handleDragOver, onDragEnd: handleDragEnd, children: [_jsxs("div", { className: "relative min-w-0", children: [_jsx("div", { ref: scrollerRef, "data-slot": "kanban-scroller", "data-loading": dimmed || undefined, "data-overflow-start": overflow.start || undefined, "data-overflow-end": overflow.end || undefined, onScroll: overflow.measure, onFocus: (event) => {
+                                const card = event.target.closest('[data-slot="kanban-card"]');
+                                if (card)
+                                    revealInline(event.currentTarget, card);
+                            }, className: cn("flex min-w-0 gap-4 overflow-x-auto pb-2", 
                             // AutoScroller scrolls in small steps near the edge; mandatory
                             // snap would pull each one back, so it is off mid-drag.
                             "snap-x snap-mandatory scroll-px-2 has-data-dragging:snap-none", "data-loading:opacity-60", scrollerClassName), children: columns.map((column) => {
@@ -129,6 +134,7 @@ function KanbanColumnView({ column, count, emptyLabel, loading, className, child
 }
 const cardChrome = cn("flex border border-border bg-card text-card-foreground");
 const handleChrome = cn("flex shrink-0 items-center self-stretch border-r border-border", "bg-muted/30 px-1.5 text-muted-foreground");
+const stopFocus = cn(focusRing, "relative focus-visible:z-10");
 function stopClick(event) {
     event.stopPropagation();
 }
@@ -145,9 +151,7 @@ function KanbanCardViewImpl({ item, index, column, onCardClick, className, rende
     });
     return (_jsxs("div", { ref: ref, "data-slot": "kanban-card", "data-dragging": isDragging || undefined, className: cn(cardChrome, "shadow-sm transition-[box-shadow,opacity,border-color]", 
         // The overlay moves; the source keeps its slot.
-        "data-dragging:pointer-events-none data-dragging:invisible", 
-        // One ring on the card for the grip and the body alike.
-        focusRingWithin, onCardClick && "hover:border-foreground/15", className), children: [_jsx("button", { type: "button", ref: handleRef, "data-slot": "kanban-card-handle", "aria-label": "Drag to move", onClick: stopClick, className: cn(handleChrome, "cursor-grab outline-none hover:bg-muted/50 active:cursor-grabbing"), children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }), onCardClick ? (_jsx("button", { type: "button", "data-slot": "kanban-card-body", onClick: () => onCardClick(item), className: "min-w-0 flex-1 cursor-pointer p-3 text-left outline-none hover:bg-muted/20", children: children })) : (_jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1 p-3", children: children }))] }));
+        "data-dragging:pointer-events-none data-dragging:invisible", onCardClick && "hover:border-foreground/15", className), children: [_jsx("button", { type: "button", ref: handleRef, "data-slot": "kanban-card-handle", "aria-label": "Drag to move", onClick: stopClick, className: cn(handleChrome, stopFocus, "cursor-grab hover:bg-muted/50 active:cursor-grabbing"), children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }), onCardClick ? (_jsx("button", { type: "button", "data-slot": "kanban-card-body", onClick: () => onCardClick(item), className: cn("min-w-0 flex-1 cursor-pointer p-3 text-left hover:bg-muted/20", stopFocus), children: children })) : (_jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1 p-3", children: children }))] }));
 }
 /**
  * Memoized so a board update re-renders only the cards whose item, index or
@@ -185,7 +189,7 @@ function ActionZone({ id, label, regionLabel, icon: Icon, tone, visible, }) {
 }
 function ScrollButton({ side, onClick, }) {
     const Icon = side === "start" ? ChevronLeft : ChevronRight;
-    return (_jsx(Button, { type: "button", variant: "outline", size: "icon-sm", "data-slot": "kanban-scroll-button", "aria-label": side === "start" ? "Show previous columns" : "Show next columns", onClick: onClick, className: cn("absolute bottom-1 z-20", side === "start" ? "left-1" : "right-1"), children: _jsx(Icon, {}) }));
+    return (_jsx(Button, { type: "button", variant: "outline", size: "icon-sm", "data-slot": "kanban-scroll-button", "aria-label": side === "start" ? "Show previous columns" : "Show next columns", onClick: onClick, className: cn("absolute top-1/2 z-20 -translate-y-1/2", side === "start" ? "left-1" : "right-1"), children: _jsx(Icon, {}) }));
 }
 function OverflowFade({ side, visible, }) {
     return (_jsx("div", { "aria-hidden": true, "data-slot": "kanban-overflow-fade", "data-side": side, className: cn("pointer-events-none absolute inset-y-0 z-10 w-10 to-transparent transition-opacity", side === "start"

package/dist/markdown.js

@@ -35,7 +35,7 @@ const markdownComponents = {
     h3: ({ children }) => (_jsx("h3", { className: headingClass("text-base"), children: children })),
     p: ({ children }) => _jsx("p", { className: "text-sm leading-relaxed", children: children }),
     ul: ({ children }) => (_jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm", children: children })),
-    ol: ({ children }) => (_jsx("ol", { className: "list-decimal space-y-1 pl-5 text-sm", children: children })),
+    ol: ({ children, start }) => (_jsx("ol", { start: start, className: "list-decimal space-y-1 pl-5 text-sm", children: children })),
     li: ({ children }) => _jsx("li", { className: "leading-relaxed", children: children }),
     blockquote: ({ children }) => (_jsx("blockquote", { className: "border-l-2 border-input pl-3 text-sm text-muted-foreground", children: children })),
     a: ({ href, children }) => href ? (_jsx("a", { href: href, className: "text-selected-foreground underline underline-offset-2", ...(href.startsWith("http")

package/dist/pagination.js

@@ -11,7 +11,7 @@ import { cn } from "./utils.js";
  * `justify-end`, `mx-auto`) to suit the layout.
  */
 function Pagination({ className, ...props }) {
-    return (_jsx("nav", { "aria-label": "Pagination", "data-slot": "pagination", className: cn("@container/pagination flex w-full min-w-0 p-1", className), ...props }));
+    return (_jsx("nav", { "aria-label": "Pagination", "data-slot": "pagination", className: cn("@container/pagination flex w-full min-w-0", className), ...props }));
 }
 function PaginationContent({ className, ...props }) {
     return (_jsx("ul", { "data-slot": "pagination-content", className: cn("flex flex-row flex-wrap items-center gap-1", className), ...props }));

package/dist/search-picker.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
 import { handleListboxKey } from "./internal/listbox-navigation.js";
+import { clamp } from "./internal/math.js";
 import { Listbox, ListboxEmptyStatus, listboxInputAria, PickerOption, } from "./internal/listbox-option.js";
 import { createSearchIndex, filterSearchIndex, foldSearchText, normalizeSearchQuery, } from "./internal/search.js";
 import { cn, onInputChange } from "./utils.js";
@@ -42,10 +43,9 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
         return index >= 0 ? index : 0;
     }, [filtered, getValue, value]);
     const rows = React.useMemo(() => filtered.map((item) => ({ item, value: getValue(item) })), [filtered, getValue]);
-    const [highlight, setHighlight] = React.useState(selectedIndex);
-    // Reset the highlight while rendering, not in an effect, when the query or
-    // the selected row changes: an effect commits every keystroke twice, once
-    // with the stale highlight and again with the reset.
+    const [highlightIndex, setHighlight] = React.useState(selectedIndex);
+    const highlight = clamp(highlightIndex, 0, Math.max(0, filtered.length - 1));
+    // Reset during render so a query or selection change commits only once.
     const [highlightFor, setHighlightFor] = React.useState({
         query,
         selectedIndex,

package/dist/select.js

@@ -32,7 +32,7 @@ function SelectLabel({ className, ...props }) {
     return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn(menuLabel, className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn(optionRow, optionState.focus, optionState.checked, dataDisabledState, inlineIcon.default, "pr-8 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { "data-slot": "select-item-indicator", children: _jsx(CheckIcon, { className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn(optionRow, optionState.focus, optionState.checked, dataDisabledState, inlineIcon.default, "pr-8 not-data-[variant=destructive]:focus:**:text-accent-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { "data-slot": "select-item-indicator", children: _jsx(CheckIcon, { className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
     return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1.5 my-1.5 h-px bg-border", className), ...props }));

package/dist/tabs.js

@@ -7,7 +7,7 @@ import { activeLinkAttributes, activeLinkSelector, } from "./internal/active-lin
 import { focusRing } from "./internal/styles.js";
 import { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants, } from "./internal/tabs-styles.js";
 import { useDragScroll } from "./internal/use-drag-scroll.js";
-import { useHorizontalOverflow } from "./internal/use-horizontal-overflow.js";
+import { revealInline, useHorizontalOverflow, } from "./internal/use-horizontal-overflow.js";
 import { cn } from "./utils.js";
 /**
  * The root's orientation, so the list can pick plain size classes (`h-7`)
@@ -48,7 +48,10 @@ function TabsScroller({ variant = "default", orientation = "horizontal", classNa
             behavior: "auto",
         });
     });
-    return (_jsx("div", { ref: ref, "data-slot": "tabs-scroller", "data-variant": variant, tabIndex: overflowing ? 0 : undefined, className: cn(focusRing, tabsScrollerVariants({ variant, orientation }), className), children: children }));
+    return (_jsx("div", { ref: ref, onFocus: (event) => {
+            if (event.target !== event.currentTarget)
+                revealInline(event.currentTarget, event.target);
+        }, "data-slot": "tabs-scroller", "data-variant": variant, tabIndex: overflowing ? 0 : undefined, className: cn(focusRing, tabsScrollerVariants({ variant, orientation }), className), children: children }));
 }
 /**
  * The tab row inside its scroller. `className` styles the list (its `h-7`
@@ -65,7 +68,7 @@ function TabsTrigger({ className, ...props }) {
     return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn(tabsTriggerVariants(), className), ...props }));
 }
 function TabsContent({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 p-2 text-sm", focusRing, className), ...props }));
+    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 text-sm", focusRing, className), ...props }));
 }
 /**
  * Tab-styled link for `TabsNav`. Pass `active` from the route: the active

package/dist/toast.js

@@ -48,16 +48,15 @@ const toast = Object.assign(show(sonnerToast), {
  * Close button: a 24px square inside the top-right corner. Important kit
  * utilities beat Sonner's unlayered close-button positioning and colors.
  *
- * Stacking: notifications occupy normal flow in their mount area. Hidden
- * and overflow notifications take no space or keyboard stops. Hovering or
- * focusing the stack expands the visible notifications (see `Toaster`).
+ * Stacking: the toaster floats at `position`; collapsed back toasts are
+ * `invisible`. Hovering or focusing expands it (see `Toaster`).
  *
  * Padding is asymmetric: `pl-4` matches Alert; `pr-10` clears the close
  * button. Icon-to-text is `gap-x-2.5`
  * so the status icon and copy read as one unit.
  */
 const classNames = {
-    toast: cn(focusRing, "!relative !transform-none flex w-max max-w-[min(356px,calc(100vw-2rem))] flex-wrap items-center justify-end gap-x-2.5 gap-y-2 overflow-visible rounded-none border border-border bg-popover py-3 pl-4 pr-10 text-sm text-popover-foreground shadow-md focus-visible:!shadow-[var(--tw-ring-offset-shadow),var(--tw-ring-shadow)] data-[visible=false]:hidden data-[expanded=false]:data-[front=false]:hidden"),
+    toast: cn(focusRing, "relative flex w-max max-w-[min(356px,calc(100vw-2rem))] flex-wrap items-center justify-end gap-x-2.5 gap-y-2 overflow-visible rounded-none border border-border bg-popover py-3 pl-4 pr-10 text-sm text-popover-foreground shadow-md focus-visible:!shadow-[var(--tw-ring-offset-shadow),var(--tw-ring-shadow)] data-[visible=false]:invisible data-[expanded=false]:data-[front=false]:*:invisible"),
     // Fills the row beside the icon, so action buttons wrap to their own row
     // (aligned right by the toast's justify-end). Without an icon the basis
     // falls back to the title's width, so a one-word toast stays compact.
@@ -96,6 +95,6 @@ const Toaster = ({ position, closeButton = true, expand, visibleToasts, duration
             setFocusWithin(false);
         }
     };
-    return (_jsx("div", { "data-slot": "toaster", className: "min-w-0", onFocus: () => setFocusWithin(true), onBlur: onBlur, children: _jsx(Sonner, { theme: theme, className: "toaster group !relative !inset-auto !transform-none flex !w-full flex-col gap-3 overflow-visible p-2 data-[x-position=right]:items-end data-[x-position=center]:items-center data-[y-position=bottom]:flex-col-reverse", style: { fontFamily: "var(--font-sans)", height: "auto" }, position: position, closeButton: closeButton, expand: expand || focusWithin, visibleToasts: visibleToasts, duration: duration, icons: icons, toastOptions: { unstyled: true, classNames } }) }));
+    return (_jsx("div", { "data-slot": "toaster", className: "contents", onFocus: () => setFocusWithin(true), onBlur: onBlur, children: _jsx(Sonner, { theme: theme, className: "toaster group overflow-visible", style: { fontFamily: "var(--font-sans)" }, position: position, closeButton: closeButton, expand: expand || focusWithin, visibleToasts: visibleToasts, duration: duration, icons: icons, toastOptions: { unstyled: true, classNames } }) }));
 };
 export { Toaster, toast };

package/package.json

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

package/theme.css

@@ -227,9 +227,302 @@
  * without `!`. Size and flush still set the variable on `[data-slot=card]`.
  */
 @layer components {
-  @container pagination (max-width: 36rem) {
-    [data-slot="pagination-content"]:has([aria-current="page"])
-      > li:not(:first-child):not(:last-child):not(:has([aria-current="page"])) {
+  /*
+   * Pagination that no longer fits its container drops pages in two steps,
+   * sized for 36px page links, 38px icon-only Previous / Next and a 4px gap
+   * (40px per item; `n` items fit in n x 40px). The first and last <li> are
+   * Previous and Next.
+   * 1. A list with an ellipsis keeps Previous, the first and last pages, the
+   *    current page, the ellipses and Next (plus a lone page between the
+   *    first or last page and the current one), so every gap is still marked.
+   * 2. Narrower still, or for a list without an ellipsis, only Previous, the
+   *    current page and Next stay. The list also wraps rather than spill.
+   */
+  @container pagination (width < 10rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(4)):not(:has(> li:nth-child(5)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(4)):not(:has(> li:nth-child(5)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 7.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(4)):not(:has(> li:nth-child(5)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 12.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(5)):not(:has(> li:nth-child(6)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(5)):not(:has(> li:nth-child(6)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 10rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(5)):not(:has(> li:nth-child(6)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 15rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(6)):not(:has(> li:nth-child(7)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(6)):not(:has(> li:nth-child(7)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 12.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(6)):not(:has(> li:nth-child(7)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 17.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(7)):not(:has(> li:nth-child(8)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(7)):not(:has(> li:nth-child(8)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 15rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(7)):not(:has(> li:nth-child(8)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 20rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(8)):not(:has(> li:nth-child(9)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(8)):not(:has(> li:nth-child(9)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 17.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(8)):not(:has(> li:nth-child(9)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 22.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(9)):not(:has(> li:nth-child(10)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(9)):not(:has(> li:nth-child(10)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 17.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(9)):not(:has(> li:nth-child(10)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 25rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(10)):not(:has(> li:nth-child(11)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(10)):not(:has(> li:nth-child(11)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 17.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(10)):not(:has(> li:nth-child(11)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 27.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(11)):not(:has(> li:nth-child(12)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(11)):not(:has(> li:nth-child(12)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 17.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(11)):not(:has(> li:nth-child(12)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 30rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(12))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(12))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 17.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(12))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
       display: none;
     }
   }