@logicplanes/kaeso-ui 0.4.3 → 0.4.5

package/dist/types/components/menu/styles.d.ts

@@ -1,7 +1,7 @@
 export declare const MENU_POPUP = "z-50 flex min-w-220 max-w-360 flex-col overflow-y-auto overscroll-contain rounded-menu bg-raised p-6 text-body text-fg shadow-raised outline-none popup-motion scrollbar-quiet max-h-(--available-height)";
 export declare const MENU_ITEM = "group/item relative flex min-h-34 w-full cursor-default items-center gap-10 rounded-item px-10 text-left text-body font-medium text-fg outline-none select-none coarse:min-h-44 highlighted:bg-item-hover active:bg-item-pressed disabled:pointer-events-none disabled:text-fg-disabled";
-export declare const MENU_ICON = "text-fg-secondary group-data-highlighted/item:text-fg group-data-disabled/item:text-fg-disabled";
-export declare const MENU_DANGER = "text-danger-text highlighted:bg-danger-tint";
+export declare const MENU_ICON = "text-fg-secondary group-data-highlighted/item:text-fg group-data-disabled/item:text-fg-disabled forced-colors:text-current";
+export declare const MENU_DANGER = "text-danger-text highlighted:bg-danger-tint active:bg-danger-tint";
 export declare const MENU_LABEL = "flex h-28 items-center px-10 text-caption font-medium text-fg-secondary";
 export declare const MENU_SEPARATOR = "mx-10 my-4 h-1 shrink-0 bg-line-subtle";
-export declare const MENU_HINT = "ml-auto flex shrink-0 items-center gap-4 pl-16 text-caption font-medium text-fg-tertiary tabular group-data-highlighted/item:text-fg-secondary";
+export declare const MENU_HINT = "ml-auto flex shrink-0 items-center gap-4 pl-16 text-caption font-medium text-fg-tertiary tabular group-data-highlighted/item:text-fg-secondary forced-colors:text-current";

package/dist/types/components/meter/meter.d.ts

@@ -3,7 +3,7 @@ export declare const KAESO_METER_VARIANTS: {
     readonly tone: {
         readonly auto: {
             readonly classes: "";
-            readonly description: "Series 1 until the first alert threshold, warning after, danger at 100% (default)";
+            readonly description: "Series 1 until the first alert threshold, amber (series 2) after, danger at 100%; the value and the caption take the warning or danger color too (default)";
         };
         readonly neutral: {
             readonly classes: "bg-fg-secondary";
@@ -26,12 +26,12 @@ export interface MeterProps {
     "aria-label"?: string | undefined;
     className?: string | undefined;
 }
-export declare function meterColor(value: number, thresholds?: number[]): "bg-viz-1" | "bg-warning" | "bg-danger";
+export declare function meterColor(value: number, thresholds?: number[]): "bg-viz-1" | "bg-viz-2" | "bg-danger";
 export declare const Meter: import("react").ForwardRefExoticComponent<MeterProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const KAESO_PROGRESS_VARIANTS: {
     readonly kind: {
         readonly determinate: {
-            readonly classes: "h-6 rounded-pill bg-fill-3";
+            readonly classes: "h-6 rounded-pill bg-fill-2 forced-colors:outline forced-colors:-outline-offset-1";
             readonly description: "A pill bar with a known amount";
         };
         readonly indeterminate: {

package/dist/types/components/page-header/page-header.d.ts

@@ -4,7 +4,7 @@ export declare const KAESO_PAGE_HEADER_VARIANTS: {
     readonly size: {
         readonly md: {
             readonly classes: "min-h-52 flex-wrap gap-x-12 gap-y-8 px-24 py-10 sm:h-52 sm:flex-nowrap sm:py-0";
-            readonly description: "52px, no bottom line (default); on a phone the tabs take a second row";
+            readonly description: "52px, no bottom line (default); on a phone the title and actions keep the first row and the tabs take a second";
         };
     };
 };

package/dist/types/components/pagination/pagination.d.ts

@@ -2,7 +2,7 @@ export declare const KAESO_PAGINATION_VARIANTS: {
     readonly variant: {
         readonly "load-more": {
             readonly classes: "";
-            readonly description: "A “Load more” pill while more rows exist, nothing once all are shown (cursor APIs, default)";
+            readonly description: "A “Load more” pill while more rows exist; once all are shown, nothing, or “All rows shown” where the button had focus (cursor APIs, default)";
         };
         readonly cursor: {
             readonly classes: "";
@@ -10,7 +10,7 @@ export declare const KAESO_PAGINATION_VARIANTS: {
         };
         readonly pages: {
             readonly classes: "";
-            readonly description: "Page numbers, for lists with a known number of pages";
+            readonly description: "Page numbers in seven fixed slots, so Next stays under the pointer, for lists with a known number of pages";
         };
     };
 };

package/dist/types/components/playground/prompt-suggestions.d.ts

@@ -19,5 +19,6 @@ export interface PromptSuggestionsProps {
     "aria-label"?: string | undefined;
     align?: keyof typeof KAESO_PROMPT_SUGGESTIONS_VARIANTS.align | undefined;
     className?: string | undefined;
+    "data-force"?: string | undefined;
 }
 export declare const PromptSuggestions: import("react").ForwardRefExoticComponent<PromptSuggestionsProps & import("react").RefAttributes<HTMLUListElement>>;

package/dist/types/components/playground/reasoning-frame.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+export interface ReasoningFrameProps {
+    heading: ReactNode;
+    preview?: ReactNode | undefined;
+    previewHidden?: boolean | undefined;
+    live?: boolean | undefined;
+    open?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    children: ReactNode;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const ReasoningFrame: import("react").ForwardRefExoticComponent<ReasoningFrameProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/playground/reasoning.d.ts

@@ -25,5 +25,6 @@ export interface ReasoningProps {
     onOpenChange?: ((open: boolean) => void) | undefined;
     children?: ReactNode | undefined;
     className?: string | undefined;
+    "data-force"?: string | undefined;
 }
 export declare const Reasoning: import("react").ForwardRefExoticComponent<ReasoningProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/popover/popover.d.ts

@@ -22,7 +22,7 @@ export declare const KAESO_POPOVER_DEFAULT_VARIANTS: {
 };
 type Side = "top" | "bottom" | "left" | "right";
 type Align = "start" | "center" | "end";
-export declare const POPOVER_POPUP = "z-50 rounded-popover bg-raised text-body text-fg shadow-raised outline-none popup-motion max-h-(--available-height) overflow-auto scrollbar-quiet";
+export declare const POPOVER_POPUP = "z-50 rounded-popover bg-raised text-body text-fg shadow-raised outline-none popup-motion max-h-(--available-height) max-w-(--available-width) overflow-auto overscroll-contain scrollbar-quiet";
 export interface PopoverContentProps {
     children: ReactNode;
     side?: Side | undefined;

package/dist/types/components/scroll-area/scroll-area.d.ts

@@ -10,8 +10,8 @@ export declare const KAESO_SCROLL_AREA_VARIANTS: {
             readonly description: "Scrolls sideways";
         };
         readonly both: {
-            readonly classes: "scroll-axis-both";
-            readonly description: "Both directions";
+            readonly classes: "scroll-axis-both scroll-fade-both";
+            readonly description: "Both directions; the content fades at every edge with more to scroll to";
         };
     };
 };

package/dist/types/components/section/section-header.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export declare const SectionHeader: import("react").ForwardRefExoticComponent<{
+    title: ReactNode;
+    description: ReactNode;
+    actions: ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/types/components/segmented/segmented.d.ts

@@ -21,6 +21,7 @@ export interface SegmentedOption {
     icon?: IconData | undefined;
     "aria-label"?: string | undefined;
     disabled?: boolean | undefined;
+    "data-force"?: string | undefined;
 }
 export interface SegmentedProps {
     options: SegmentedOption[];

package/dist/types/components/select/select.d.ts

@@ -8,7 +8,7 @@ export declare const KAESO_SELECT_VARIANTS: {
             readonly description: "A pill with the same ring, hover and focus as a text input (default)";
         };
         readonly ghost: {
-            readonly classes: "material-ghost focus-ring text-fg-secondary hover:text-fg open:text-fg";
+            readonly classes: "material-ghost focus-ring text-fg-secondary hover:text-fg focus-visible:text-fg open:text-fg";
             readonly description: "Inline in settings rows: “GPT-5 mini (default) ⌄”";
         };
         readonly header: {

package/dist/types/components/sheet/sheet.d.ts

@@ -16,15 +16,15 @@ export declare const KAESO_SHEET_VARIANTS: {
     };
     readonly side: {
         readonly right: {
-            readonly classes: "top-8 right-8 bottom-8 sheet-limits-x max-sm:inset-0 max-sm:w-auto max-sm:max-w-none max-sm:rounded-none";
+            readonly classes: "top-8 right-8 bottom-8 sheet-limits-x max-sm:inset-0 max-sm:w-auto max-sm:max-w-none max-sm:rounded-none max-sm:safe-area-inset";
             readonly description: "From the right (default); fills a phone's screen";
         };
         readonly left: {
-            readonly classes: "top-8 bottom-8 left-8 sheet-limits-x max-sm:inset-0 max-sm:w-auto max-sm:max-w-none max-sm:rounded-none";
+            readonly classes: "top-8 bottom-8 left-8 sheet-limits-x max-sm:inset-0 max-sm:w-auto max-sm:max-w-none max-sm:rounded-none max-sm:safe-area-inset";
             readonly description: "From the left: the mobile sidebar; fills a phone's screen";
         };
         readonly bottom: {
-            readonly classes: "right-8 bottom-8 left-8 sheet-limits-y";
+            readonly classes: "right-8 bottom-safe-8 left-8 sheet-limits-y";
             readonly description: "From the bottom: mobile menus";
         };
     };

package/dist/types/components/sidebar/sidebar.d.ts

@@ -49,6 +49,7 @@ interface SidebarCtx {
     setWidth: (v: number) => void;
     previewWidth: (v: number | null) => void;
     storageKey: string | undefined;
+    shortcut: boolean;
 }
 export declare const useSidebar: () => SidebarCtx;
 export declare const SidebarFloatingContext: React.Context<boolean>;

package/dist/types/components/slider/slider.d.ts

@@ -1,8 +1,8 @@
 export declare const KAESO_SLIDER_VARIANTS: {
     readonly size: {
         readonly md: {
-            readonly classes: "h-20";
-            readonly description: "A 4px track in a 20px hit area (default)";
+            readonly classes: "h-32";
+            readonly description: "A 4px track in a 32px hit area (default)";
         };
     };
 };

package/dist/types/components/stat/stat.d.ts

@@ -43,7 +43,7 @@ export interface StatTileProps {
     className?: string | undefined;
 }
 export declare const STAT_VALUE_STEPS: readonly [{
-    readonly classes: "text-title-lg";
+    readonly classes: "text-metric";
     readonly px: 28;
 }, {
     readonly classes: "text-title";

package/dist/types/components/tabs/tabs.d.ts

@@ -4,11 +4,11 @@ export declare const KAESO_TABS_VARIANTS: {
     readonly variant: {
         readonly underline: {
             readonly classes: "";
-            readonly description: "Underline tabs for detail pages: 40px, a 2px ink indicator that slides";
+            readonly description: "Underline tabs for detail pages: 40px, labels 12px in like every box, a 2px ink indicator under the label that slides";
         };
         readonly pill: {
             readonly classes: "";
-            readonly description: "Header tabs: separate 32px pills, the active one filled";
+            readonly description: "Header tabs: separate 32px pills, the active one filled; the first pill's edge on the gutter";
         };
     };
 };
@@ -19,11 +19,11 @@ export declare const KAESO_PILL_TABS_VARIANTS: {
     readonly variant: {
         readonly underline: {
             readonly classes: "";
-            readonly description: "Underline tabs for detail pages: 40px, a 2px ink indicator that slides";
+            readonly description: "Underline tabs for detail pages: 40px, labels 12px in like every box, a 2px ink indicator under the label that slides";
         };
         readonly pill: {
             readonly classes: "";
-            readonly description: "Header tabs: separate 32px pills, the active one filled";
+            readonly description: "Header tabs: separate 32px pills, the active one filled; the first pill's edge on the gutter";
         };
     };
 };
@@ -61,6 +61,7 @@ export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps &
         className?: string | undefined;
         children: ReactNode;
         keepMounted?: boolean | undefined;
+        "data-force"?: string | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
 };
 export declare const PillTabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>> & {
@@ -71,6 +72,7 @@ export declare const PillTabs: import("react").ForwardRefExoticComponent<TabsPro
         className?: string | undefined;
         children: ReactNode;
         keepMounted?: boolean | undefined;
+        "data-force"?: string | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
 };
 export {};

package/dist/types/components/text/truncated.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface TruncatedTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    children: ReactNode;
+    className?: string | undefined;
+    wrap?: boolean | undefined;
+}
+export declare const TruncatedText: import("react").ForwardRefExoticComponent<TruncatedTextProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/types/components/timeline/timeline.d.ts

@@ -2,23 +2,23 @@ import { type ReactNode } from "react";
 export declare const KAESO_TIMELINE_VARIANTS: {
     readonly tone: {
         readonly neutral: {
-            readonly classes: "bg-line-strong";
+            readonly classes: "bg-line-strong forced-line";
             readonly description: "Ordinary events (default)";
         };
         readonly success: {
-            readonly classes: "bg-success";
+            readonly classes: "bg-success data-mark";
             readonly description: "Something completed";
         };
         readonly warning: {
-            readonly classes: "bg-warning";
+            readonly classes: "bg-warning data-mark";
             readonly description: "Something changed that needs attention";
         };
         readonly danger: {
-            readonly classes: "bg-danger";
+            readonly classes: "bg-danger data-mark";
             readonly description: "Something failed or was removed";
         };
         readonly info: {
-            readonly classes: "bg-info";
+            readonly classes: "bg-info data-mark";
             readonly description: "Informational";
         };
     };

package/dist/types/components/toc/toc.d.ts

@@ -6,7 +6,7 @@ export declare const KAESO_TABLE_OF_CONTENTS_VARIANTS: {
         };
         readonly active: {
             readonly classes: "text-fg";
-            readonly description: "The heading in view, with a 2px ink bar";
+            readonly description: "The heading in view, with a 2px ink bar on the rail (a solid line in forced colours)";
         };
     };
 };

package/dist/types/components/toolbar/toolbar.d.ts

@@ -3,7 +3,7 @@ export declare const KAESO_TOOLBAR_VARIANTS: {
     readonly size: {
         readonly md: {
             readonly classes: "min-h-48 gap-8 px-24 py-6";
-            readonly description: "48px, 24px side padding, under the page header (default)";
+            readonly description: "48px, 24px side padding, under the page header (default); one tab stop, arrows move between controls";
         };
         readonly inset: {
             readonly classes: "min-h-48 gap-8 px-0 py-6";

package/dist/types/components/tooltip/tooltip.d.ts

@@ -20,11 +20,11 @@ export declare const KAESO_TOOLTIP_VARIANTS: {
     };
     readonly shape: {
         readonly pill: {
-            readonly classes: "rounded-pill h-32 px-12 whitespace-nowrap";
+            readonly classes: "rounded-pill h-28 px-12 whitespace-nowrap";
             readonly description: "Single line: a pill (default)";
         };
         readonly multiline: {
-            readonly classes: "rounded-tooltip px-12 py-8 max-w-280 text-pretty";
+            readonly classes: "rounded-tooltip px-12 py-8 max-w-280 text-pretty wrap-anywhere";
             readonly description: "Several lines: radius 12, max 280px";
         };
     };

package/dist/types/components/tooltip/trigger-props.d.ts

@@ -7,6 +7,7 @@ export interface TriggerPropsStore {
     set: (props: TriggerProps | null) => void;
     subscribe: (listener: () => void) => () => void;
     ref: RefCallback<Element>;
+    element: () => Element | null;
 }
 export declare function triggerPropsStore(): TriggerPropsStore;
 export declare function HandedTrigger({ store, merge, extra, children, }: {

package/dist/types/hooks/use-coarse-pointer.d.ts

@@ -0,0 +1 @@
+export declare function useCoarsePointer(): boolean;

package/dist/types/hooks/use-hydrating.d.ts

@@ -0,0 +1 @@
+export declare const useHydrating: () => boolean;

package/dist/types/icons/groups.d.ts

@@ -1,7 +1,7 @@
 export declare const ICON_GROUPS: {
     readonly "Kaeso objects": readonly ["key", "providerKey", "project", "organization", "model", "playground", "alias", "limit", "budget", "requestLog", "usage", "member", "members", "serviceAccount", "agent", "settings", "audit", "instance", "provider", "route", "gateway", "database", "update", "security", "session", "overview", "chart", "home"];
     readonly Capabilities: readonly ["tools", "reasoning", "vision", "pdf", "structuredOutput"];
-    readonly Actions: readonly ["signOut", "copy", "externalLink", "openExternal", "add", "close", "edit", "delete", "download", "upload", "refresh", "retry", "search", "filter", "displayOptions", "more", "menu", "sort", "switcher", "expand", "collapse", "show", "hide", "reveal", "sidebar", "sidePanel", "list", "board", "stack"];
+    readonly Actions: readonly ["signOut", "copy", "externalLink", "openExternal", "add", "close", "edit", "delete", "download", "upload", "refresh", "retry", "search", "filter", "displayOptions", "more", "menu", "sort", "switcher", "unfold", "expand", "collapse", "show", "hide", "reveal", "sidebar", "sidePanel", "list", "board", "stack"];
     readonly Status: readonly ["check", "success", "warning", "error", "info", "minus", "notification"];
     readonly Navigation: readonly ["chevronDown", "chevronUp", "chevronLeft", "chevronRight", "arrowRight"];
     readonly Misc: readonly ["calendar", "time", "code", "mail", "keyboard", "help", "github", "themeLight", "themeDark", "themeSystem", "language", "legal"];

package/dist/types/icons/vocabulary.d.ts

@@ -259,6 +259,11 @@ export declare const icons: {
     }][] | readonly (readonly [string, {
         readonly [key: string]: string | number;
     }])[];
+    readonly unfold: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
     readonly expand: [string, {
         [key: string]: string | number;
     }][] | readonly (readonly [string, {

package/dist/types/utils/arrow-focus.d.ts

@@ -1,2 +1,5 @@
 import type { KeyboardEvent } from "react";
-export declare function arrowFocus(e: KeyboardEvent<HTMLElement>): void;
+export declare function focusables(container: HTMLElement): HTMLElement[];
+export declare function arrowFocus(e: KeyboardEvent<HTMLElement>, { byItem }?: {
+    byItem?: boolean | undefined;
+}): void;

package/dist/types/utils/cn.d.ts

@@ -59,6 +59,9 @@ export declare function kaesoMergeConfig(): {
         start: {
             start: (string | ((value: string) => boolean))[];
         }[];
+        end: {
+            end: (string | ((value: string) => boolean))[];
+        }[];
         visibility: string[];
         z: {
             z: (string | ((value: string) => boolean))[];
@@ -155,6 +158,12 @@ export declare function kaesoMergeConfig(): {
         pl: {
             pl: ((value: string) => boolean)[];
         }[];
+        ps: {
+            ps: ((value: string) => boolean)[];
+        }[];
+        pe: {
+            pe: ((value: string) => boolean)[];
+        }[];
         m: {
             m: (string | ((value: string) => boolean))[];
         }[];
@@ -167,6 +176,9 @@ export declare function kaesoMergeConfig(): {
         ms: {
             ms: (string | ((value: string) => boolean))[];
         }[];
+        me: {
+            me: (string | ((value: string) => boolean))[];
+        }[];
         mt: {
             mt: (string | ((value: string) => boolean))[];
         }[];
@@ -231,6 +243,9 @@ export declare function kaesoMergeConfig(): {
         "text-decoration-thickness": {
             decoration: (string | ((value: string) => boolean))[];
         }[];
+        "text-decoration-style": {
+            decoration: string[];
+        }[];
         "text-decoration-color": {
             decoration: (() => boolean)[];
         }[];
@@ -265,6 +280,21 @@ export declare function kaesoMergeConfig(): {
         "rounded-l": {
             "rounded-l": (string | ((value: string) => boolean))[];
         }[];
+        "rounded-s": {
+            "rounded-s": (string | ((value: string) => boolean))[];
+        }[];
+        "rounded-e": {
+            "rounded-e": (string | ((value: string) => boolean))[];
+        }[];
+        "rounded-t": {
+            "rounded-t": (string | ((value: string) => boolean))[];
+        }[];
+        "rounded-b": {
+            "rounded-b": (string | ((value: string) => boolean))[];
+        }[];
+        float: {
+            float: string[];
+        }[];
         "outline-style": {
             outline: string[];
         }[];
@@ -334,6 +364,9 @@ export declare function kaesoMergeConfig(): {
         "scroll-mt": {
             "scroll-mt": ((value: string) => boolean)[];
         }[];
+        "scroll-px": {
+            "scroll-px": ((value: string) => boolean)[];
+        }[];
         "snap-align": {
             snap: string[];
         }[];

package/dist/types/utils/portal-context.d.ts

@@ -7,4 +7,10 @@ export declare namespace PortalContainer {
     var displayName: string;
 }
 export declare function usePortalContainer(): HTMLElement | undefined;
-export declare function pageBoundary(): Element | "clipping-ancestors";
+export interface BoundaryRect {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+export declare function pageBoundary(): BoundaryRect | "clipping-ancestors";

package/dist/utils.js

@@ -1,9 +1,9 @@
 "use client";
-import { t as e } from "./chunks/cn-Dj6sRgkF.js";
+import { t as e } from "./chunks/cn-BjnOAUrA.js";
 import { t } from "./chunks/utils-CdH72WEp.js";
 import { i as n, n as r, r as i, t as a } from "./chunks/dev-CR1p7gCm.js";
 import { n as o, r as s, t as c } from "./chunks/link-provider-cvl8lSTT.js";
 import { t as l } from "./chunks/use-controllable-B5Fd12Bx.js";
-import { n as u, r as d, t as f } from "./chunks/portal-context-BBbzDKmY.js";
+import { n as u, r as d, t as f } from "./chunks/portal-context-CTatR2Z8.js";
 import { a as p, i as m, n as h, t as g } from "./chunks/inset-BUzyXLK4.js";
 export { g as GutterContent, h as InsetContent, c as LinkProvider, f as PortalContainer, e as cn, a as devWarn, o as isExternalHref, u as pageBoundary, t as resolveVariant, l as useControllable, m as useGutterPadded, p as useInset, s as useLinkComponent, d as usePortalContainer, r as warnControlled, i as warnMissingName, n as warnStylingClassName };

package/foundations/accessibility.md

@@ -5,7 +5,7 @@ Every component works with a keyboard, a screen reader, a coarse pointer and the
 ## Foundations
 
 - Behavior comes from Base UI: roles, states, focus management and keyboard interaction follow the WAI-ARIA practices.
-- **Targets**: nothing interactive is smaller than 32px; with a coarse pointer, rows and menu items grow to 44px.
+- **Targets**: nothing interactive is smaller than 32px; a control drawn smaller (a 24px chip action) still takes a 32px hit area (`tap-target`). With a coarse pointer, hit areas grow to 44px and rows and menu items grow to 44px tall.
 - **Text**: 14px base, 12px minimum. Every text and background pair is measured against WCAG 2.2 (4.5:1 for text, 3:1 for large text and essential graphics).
 - **Zoom stays with the person**: with a coarse pointer, every field's text is at least 16px, so a phone never zooms the page when a field takes focus, and a quick second tap on a control is a tap, not a zoom. Pinch zoom always works; never set `maximum-scale` or `user-scalable=no`.
 - **Color is never alone**: every status carries a word or an icon.
@@ -29,13 +29,14 @@ Each component's keys are in the registry and on its page. Across the library:
 
 ## Screen readers
 
-Icon-only buttons require an accessible name; their tooltip repeats it. A control without a visible label takes `aria-label`. Toasts are status messages, errors are alerts. Loading regions are marked busy. Charts have a text summary and a table view.
+Icon-only buttons require an accessible name; their tooltip repeats it. A control without a visible label takes `aria-label`. Toasts are status messages, errors are alerts; an error, or a toast with an action such as Undo, stays until it is dismissed. A tooltip that says more than its control's name is also the control's description. Loading regions are marked busy. Charts have a text summary and a table view.
 
 ## Preferences
 
 - `prefers-reduced-motion`: transforms are removed; only opacity changes.
 - `prefers-contrast: more`: rings use the strong line and secondary text becomes primary.
 - `prefers-color-scheme`: the system theme is the default.
+- `forced-colors: active`: rings drawn as shadows disappear, so every control and raised surface gets a 1px system-colour outline instead, keyboard focus a 2px `Highlight` outline, selected and current items a 2px `Highlight` outline, and highlighted rows a `Highlight` fill. Data colours that carry meaning keep their colour (`data-mark`); lines drawn as fills use `forced-line`.
 
 ## Testing
 

package/foundations/color.md

@@ -11,6 +11,8 @@ Two tint-free ramps. Components use the role names, never a step, so both themes
 | `bg-panel`       | The brightest surface: pure white, pure black. Content lives here. |
 | `bg-chrome`      | The window behind the panel. The sidebar sits on it.               |
 | `bg-raised`      | Controls, menus, popovers: a surface above the panel.              |
+| `raised-hover`   | A raised control under the pointer: secondary buttons, list items. |
+| `raised-pressed` | A raised control while it is pressed.                              |
 | `fill-1`         | Quiet fills: inputs at rest, code wells, group headers.            |
 | `fill-2`         | Hover on ghost controls and rows.                                  |
 | `fill-3`         | Pressed and current: the active sidebar pill.                      |
@@ -23,6 +25,8 @@ Two tint-free ramps. Components use the role names, never a step, so both themes
 | `text-tertiary`  | Placeholders, counts, axis labels.                                 |
 | `text-disabled`  | Disabled labels.                                                   |
 | `ink`            | The primary button and selected marks.                             |
+| `ink-hover`      | The primary button under the pointer.                              |
+| `ink-pressed`    | The primary button while pressed, or while its menu is open.       |
 | `focus`          | Keyboard focus rings.                                              |
 
 ## Status
@@ -31,7 +35,7 @@ Success, warning, danger and info are marks, never surfaces: a colored word, an
 
 ## Data
 
-Eight series in a fixed order, balanced in lightness so none shouts. Token kinds always take the same series: input blue, output emerald, cache read teal, cache write amber, reasoning violet. Marks thinner than 2px use a darker shade in light mode to keep 3:1.
+Eight series in a fixed order, balanced in lightness so none shouts. Token kinds always take the same series: input blue, output emerald, cache read a soft blue edged in input's blue, cache write amber, reasoning violet. A soft tint is too faint to stand on the panel alone, so it always carries a 1px edge in its series colour. Partial periods draw faint with a dashed edge, on bars and lines alike. Marks thinner than 2px use a darker shade in light mode to keep 3:1.
 
 ## Rules
 

package/foundations/elevation.md

@@ -21,3 +21,4 @@ Few levels, each with one job. Lines are rings drawn with shadows; depth comes f
 - A hairline is the same on all four sides. Controls and small marks draw it inside their own edge, so a scroller or a truncating table cell never cuts a side off; cards, tables and overlays, whose content reaches their edge, draw it outside, opaque and above their shadow. No top light: a highlight along one edge reads as that side drawn thicker.
 - In light mode, shadows carry the lift. In dark mode they disappear into black, so a lighter ring does it instead.
 - One overlay level at a time. A menu inside a dialog uses the raised level, not a deeper one.
+- A modal sheet dims the page half as much as a dialog does, so the list it inspects stays readable behind it.

package/foundations/motion.md

@@ -32,7 +32,7 @@ Loading keeps one beat of 800ms on the pulse easing. The spinner is three routes
 
 ## Rules
 
-- Overlays scale from 0.96 and fade from their trigger; dialogs from 0.98 in the center; sheets slide from their edge.
+- Overlays scale from 0.97 and fade from their trigger; dialogs from 0.98 in the center; sheets slide from their edge.
 - A dialog whose content changes stays centered and grows or shrinks to its new size from the size it has, in `--k-duration-dialog` on the `standard` curve; a sheet from the bottom grows upwards. Keep one dialog open through a task, and change its content, rather than closing one dialog and opening another.
 - No page-enter animation and no loops but loading's.
 - Never `transition: all`; only the properties that change.

package/foundations/shape.md

@@ -15,7 +15,7 @@ Pills for everything on one line, concentric corners for everything that holds s
 | `rounded-sheet`                           | Sheets, on the side that faces the content                                     |
 | `rounded-group`                           | Settings groups                                                                |
 | `rounded-well`                            | Code wells, preview frames and image thumbnails                                |
-| `rounded-tooltip`                         | Single-line tooltips                                                           |
+| `rounded-tooltip`                         | Tooltips that wrap; a single-line tooltip is a pill                            |
 | `rounded-palette`, `rounded-palette-item` | The command palette and its rows                                               |
 | `rounded-checkbox`                        | Checkboxes                                                                     |
 | `rounded-org`                             | Organization avatars                                                           |
@@ -26,7 +26,7 @@ Pills for everything on one line, concentric corners for everything that holds s
 | `rounded-field`                           | Token fields that wrap                                                         |
 | `rounded-textarea`                        | Textareas                                                                      |
 | `rounded-cell-lg`                         | One-time code cells                                                            |
-| `rounded-tooltip-lg`                      | Tooltips that wrap                                                             |
+| `rounded-tooltip-lg`                      | Not used by tooltips any more; use `rounded-tooltip`                           |
 | `rounded-frame`                           | An app frame embedded in a page                                                |
 | `rounded-toast`                           | A toast that wraps                                                             |
 

package/foundations/typography.md

@@ -6,18 +6,18 @@ Inter for the interface, Geist Mono for ids, keys and code. Fourteen pixels is t
 
 Ten steps, each with its own line height and tracking. Larger sizes tighten; small sizes open up slightly.
 
-| Utility         | Use                                       |
-| --------------- | ----------------------------------------- |
-| `text-micro`    | Key caps, tiny counts                     |
-| `text-caption`  | Group labels, column headers, field hints |
-| `text-small`    | Descriptions, secondary cells, metadata   |
-| `text-body`     | The base: labels, rows, controls          |
-| `text-body-lg`  | Lead sentences, settings titles           |
-| `text-title-sm` | Section titles                            |
-| `text-title`    | Dialog and sheet titles                   |
-| `text-title-lg` | Page titles                               |
-| `text-display`  | The home page only                        |
-| `text-metric`   | Big numbers, tabular                      |
+| Utility         | Use                                                          |
+| --------------- | ------------------------------------------------------------ |
+| `text-micro`    | Chart ticks, avatar initials                                 |
+| `text-caption`  | Group labels, column headers, field hints, key caps          |
+| `text-small`    | Descriptions, secondary cells, metadata                      |
+| `text-body`     | The base: labels, rows, controls; popover titles in semibold |
+| `text-body-lg`  | Lead sentences, settings titles                              |
+| `text-title-sm` | Section, dialog and sheet titles                             |
+| `text-title`    | Empty states, compact page titles                            |
+| `text-title-lg` | Page titles                                                  |
+| `text-display`  | The home page only                                           |
+| `text-metric`   | Big numbers, tabular                                         |
 
 ## Families
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicplanes/kaeso-ui",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Kaeso's UI library: React components on Base UI, Tailwind CSS v4 and the Kaeso tokens.",
   "license": "MIT",
   "author": "Devin Oldenburg",
@@ -102,7 +102,7 @@
     "shiki": "4.5.0",
     "tailwind-merge": "3.7.0",
     "uqr": "0.1.3",
-    "@logicplanes/kaeso-tokens": "0.4.3"
+    "@logicplanes/kaeso-tokens": "0.4.5"
   },
   "devDependencies": {
     "@hugeicons/core-free-icons": "4.3.5",