prime-ui-kit 0.9.1 → 0.9.2

package/dist/index.js

@@ -1,9 +1,11 @@
 import {
   Accordion,
+  AppHeader,
   AppShell,
   Avatar,
   Badge,
   Banner,
+  BottomNav,
   Breadcrumb,
   ButtonGroup,
   Card,
@@ -20,6 +22,7 @@ import {
   Dropdown,
   ExampleFrame,
   FileUpload,
+  Kanban,
   Kbd,
   LinkButton,
   LoginForm,
@@ -28,6 +31,7 @@ import {
   NotificationCard,
   NotificationProvider,
   PageContent,
+  PageToolbar,
   Pagination,
   Popover,
   ProgressBar,
@@ -57,7 +61,7 @@ import {
   suspendTransitions,
   useNotifications,
   useSidebar
-} from "./chunks/chunk-DB2Y3XXA.js";
+} from "./chunks/chunk-LXGRKN34.js";
 import {
   Button,
   COLOR_PRESETS,
@@ -83,13 +87,15 @@ import {
   tones,
   useOptionalControlSize,
   variants
-} from "./chunks/chunk-NHOWNIAR.js";
+} from "./chunks/chunk-ZEFCDEEQ.js";
 export {
   Accordion,
+  AppHeader,
   AppShell,
   Avatar,
   Badge,
   Banner,
+  BottomNav,
   Breadcrumb,
   Button,
   ButtonGroup,
@@ -116,6 +122,7 @@ export {
   Hint,
   Icon,
   Input,
+  Kanban,
   Kbd,
   Label,
   LinkButton,
@@ -125,6 +132,7 @@ export {
   NotificationCard,
   NotificationProvider,
   PageContent,
+  PageToolbar,
   Pagination,
   Popover,
   ProgressBar,

package/dist/internal/overlay/FloatingPanel.d.ts

@@ -15,7 +15,9 @@ export type FloatingPanelProps = Omit<React.HTMLAttributes<HTMLElement>, "onAnim
  * The panel of a floating layer: portaled to `<body>` when it opens (so it stacks above every
  * layer opened before it, on the one overlay z-index), positioned, animated from `data-state` /
  * `data-side` (foundation §8), a size context for the controls inside, and a layer context so
- * layers opened inside stack above it in the layer stack. Renders nothing while closed.
+ * layers opened inside stack above it in the layer stack. Renders nothing while closed. A layer in
+ * sheet mode (`floating.sheet`) renders a scrim and a bottom sheet with a grab handle around the
+ * same panel element; the consumer ref stays on the panel.
  */
 export declare function FloatingPanel({ floating, size, scroll, surface, className, onKeyDown, children, ref, ...rest }: FloatingPanelProps): import("react/jsx-runtime").JSX.Element | null;
 export type FloatingTriggerProps = {

package/dist/internal/overlay/useFloatingLayer.d.ts

@@ -30,6 +30,12 @@ export type UseFloatingLayerOptions = PositionOptions & {
     exitDuration?: MotionDurationToken;
     /** Unmount at once on close, skipping the exit animation (a Tooltip replaced by its neighbour). */
     skipExit?: boolean;
+    /**
+     * Below 640px of viewport the panel is a bottom sheet instead of an anchored panel: a scrim,
+     * a grab handle, swipe down to close, page scroll locked. For panels the user works in (menus,
+     * listboxes, pickers); not for a panel driven by typing in its anchor.
+     */
+    sheet?: boolean;
 };
 export type FloatingLayer = {
     open: boolean;
@@ -38,6 +44,10 @@ export type FloatingLayer = {
     mounted: boolean;
     /** The side after flipping. */
     side: PositionSide;
+    /** Rendered as a bottom sheet (`sheet` on a narrow viewport). */
+    sheet: boolean;
+    /** Swipe-to-close of the sheet; part of the sheet's `onPointerDown`. */
+    onSheetPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
     /** Attach to the panel element (merged with a consumer ref). */
     panelRef: React.RefCallback<HTMLElement>;
     /** The panel element while mounted. */
@@ -57,4 +67,4 @@ export type FloatingLayer = {
  * policy (foundation §8): focus returns to the trigger after Escape, a pick, Tab or a close — not
  * after a press outside, where focus follows the pointer. Render the panel with `FloatingPanel`.
  */
-export declare function useFloatingLayer({ open, onOpenChange, triggerRef, closeOnEscape, closeOnOutsideClick, dismiss, focusOnOpen, trap, tabExit, exitDuration, skipExit, ...positionOptions }: UseFloatingLayerOptions): FloatingLayer;
+export declare function useFloatingLayer({ open, onOpenChange, triggerRef, closeOnEscape, closeOnOutsideClick, dismiss, focusOnOpen, trap, tabExit, exitDuration, skipExit, sheet: sheetOption, ...positionOptions }: UseFloatingLayerOptions): FloatingLayer;

package/dist/internal/touchTarget.d.ts

@@ -0,0 +1,4 @@
+/** A 44px hit area on coarse pointers, both axes, the visual size unchanged (`touchTarget.module.css`). */
+export declare const touchTargetClass: string;
+/** The same hit area grown in height only: a segment beside other content of its host. */
+export declare const touchTargetBlockClass: string;

package/dist/layout/app-header/AppHeader.d.ts

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { type DividerProps } from "@/components/divider/Divider";
+export type AppHeaderLabels = {
+    /** Name of the menu button that opens the off-canvas Sidebar. */
+    menu: string;
+};
+type HeaderProps = React.HTMLAttributes<HTMLElement> & {
+    ref?: React.Ref<HTMLElement>;
+};
+type DivProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+export type AppHeaderRootProps = HeaderProps & {
+    labels?: Partial<AppHeaderLabels>;
+};
+/**
+ * The bar at the very top of the content panel: where you are, global search, a few actions.
+ * One row as high as the Sidebar brand row, so the two read as one line; sticky; lays itself out
+ * from its own width (narrow: the search folds into an icon, the title truncates).
+ */
+declare function AppHeaderRoot({ labels, className, children, ...rest }: AppHeaderRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderRoot {
+    var displayName: string;
+}
+export type AppHeaderStartProps = DivProps;
+/** The leading zone: the menu button, a back button, the title or breadcrumbs. Takes the free width. */
+declare function AppHeaderStart({ className, ...rest }: AppHeaderStartProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderStart {
+    var displayName: string;
+}
+export type AppHeaderTitleProps = DivProps;
+/**
+ * Where you are: an optional `AppHeader.Icon`, the name and an optional `AppHeader.Description`
+ * under it — the same anatomy as the Sidebar brand. The name truncates.
+ */
+declare function AppHeaderTitle({ className, children, ...rest }: AppHeaderTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderTitle {
+    var displayName: string;
+}
+export type AppHeaderIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * Decorative glyph before the title on a tile shaped like the bar's soft buttons (control m).
+ * Not a Thumbnail: its tiers (32 · 40) miss the control height the buttons beside it have.
+ */
+declare function AppHeaderIcon({ className, ...rest }: AppHeaderIconProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderIcon {
+    var displayName: string;
+}
+export type AppHeaderDescriptionProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** Muted second line under the title (a workspace, a period); hidden on a narrow header. */
+declare function AppHeaderDescription({ className, ...rest }: AppHeaderDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderDescription {
+    var displayName: string;
+}
+export type AppHeaderSeparatorProps = Omit<DividerProps, "orientation" | "children">;
+/** A short vertical line between groups in a zone (a back button | the path), with air on both sides. */
+declare function AppHeaderSeparator({ className, ...rest }: AppHeaderSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderSeparator {
+    var displayName: string;
+}
+export type AppHeaderSearchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
+    /** Placeholder text; also the button's name when the header is narrow and the field folds. */
+    children: React.ReactNode;
+    /** Key hint at the end. Default `⌘K`; `null` hides it. */
+    shortcut?: React.ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * Global search entry: looks like a field, works as a button that opens your CommandMenu (wire
+ * `onClick` and the shortcut). On a narrow header it folds into a square search button.
+ */
+declare function AppHeaderSearch({ children, shortcut, className, ...rest }: AppHeaderSearchProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderSearch {
+    var displayName: string;
+}
+export type AppHeaderActionsProps = DivProps;
+/** Buttons at the end: one primary action, notifications, the account. Never wraps. */
+declare function AppHeaderActions({ className, ...rest }: AppHeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderActions {
+    var displayName: string;
+}
+export type AppHeaderMenuButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
+    /**
+     * `narrow` (default): shown below 768px, where an `offCanvas="auto"` Sidebar leaves the layout;
+     * `always`: on every width (`offCanvas="always"`).
+     */
+    show?: "narrow" | "always";
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/** Opens the off-canvas Sidebar: an icon button named by `labels.menu`; wire `onClick` and `aria-expanded`. */
+declare function AppHeaderMenuButton({ show, className, ...rest }: AppHeaderMenuButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderMenuButton {
+    var displayName: string;
+}
+export declare const AppHeader: {
+    Root: typeof AppHeaderRoot;
+    Start: typeof AppHeaderStart;
+    Title: typeof AppHeaderTitle;
+    Icon: typeof AppHeaderIcon;
+    Description: typeof AppHeaderDescription;
+    Separator: typeof AppHeaderSeparator;
+    Search: typeof AppHeaderSearch;
+    Actions: typeof AppHeaderActions;
+    MenuButton: typeof AppHeaderMenuButton;
+};
+export {};

package/dist/layout/app-shell/AppShell.d.ts

@@ -20,12 +20,12 @@ declare function AppShellRoot({ fillViewport, className, children, ...rest }: Ap
 declare namespace AppShellRoot {
     var displayName: string;
 }
-export type AppShellHeaderProps = React.HTMLAttributes<HTMLElement> & {
-    ref?: React.Ref<HTMLElement>;
+export type AppShellFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
 };
-/** Top bar of the content panel (breadcrumbs, page actions, mobile menu button). Sticky. */
-declare function AppShellHeader({ className, ...rest }: AppShellHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppShellHeader {
+/** Bottom bar of the content panel (`BottomNav` on a narrow shell). Sticky. */
+declare function AppShellFooter({ className, ...rest }: AppShellFooterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppShellFooter {
     var displayName: string;
 }
 /** `full` (default): the whole panel with responsive gutters; `contained`: centered, up to `--prime-layout-content-max-width` (long-read pages). */
@@ -44,23 +44,28 @@ export type AppShellTemplateProps = Omit<AppShellRootProps, "children" | "ref">
     ref?: React.Ref<HTMLElement>;
     /** Navigation column content, usually `Sidebar.Root`. */
     nav?: React.ReactNode;
-    /** `AppShell.Header` content; no header row when omitted. */
+    /** The top bar of the content panel, an `AppHeader.Root`; no header when omitted. */
     header?: React.ReactNode;
+    /** `AppShell.Footer` content (`BottomNav`); no footer when omitted. */
+    footer?: React.ReactNode;
     children?: React.ReactNode;
     mainProps?: Omit<AppShellMainProps, "children" | "ref">;
     /** Main scrolls back to the top whenever this value changes (pass the router pathname). */
     scrollResetKey?: unknown;
 };
-/** Root + Nav + Header + Main in one; main scrolls to the top when `scrollResetKey` changes. */
-declare function AppShellTemplate({ ref, nav, header, children, mainProps, scrollResetKey, ...rootProps }: AppShellTemplateProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Root + Nav + the header + Main + Footer in one; main scrolls to the top when `scrollResetKey`
+ * changes.
+ */
+declare function AppShellTemplate({ ref, nav, header, footer, children, mainProps, scrollResetKey, ...rootProps }: AppShellTemplateProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppShellTemplate {
     var displayName: string;
 }
 export declare const AppShell: {
     Root: typeof AppShellRoot;
     Nav: typeof AppShellNav;
-    Header: typeof AppShellHeader;
     Main: typeof AppShellMain;
+    Footer: typeof AppShellFooter;
     Template: typeof AppShellTemplate;
 };
 export {};

package/dist/layout/bottom-nav/BottomNav.d.ts

@@ -0,0 +1,80 @@
+import * as React from "react";
+import type { PaletteColor, Variant } from "@/internal/states";
+export type BottomNavLabels = {
+    /** `aria-label` of the `<nav>` landmark. */
+    nav: string;
+};
+export type BottomNavRootProps = React.HTMLAttributes<HTMLElement> & {
+    /** Icons without visible labels; the labels still name the items for screen readers. */
+    iconOnly?: boolean;
+    /**
+     * A glass capsule floating over the content (backdrop blur, inset from the edges) instead of
+     * a flat bar at the edge. It places itself at the bottom of its positioned container
+     * (`AppShell.Footer`), so the page scrolls under it.
+     */
+    floating?: boolean;
+    labels?: Partial<BottomNavLabels>;
+    /** The `<nav>` bar. */
+    ref?: React.Ref<HTMLElement>;
+};
+/**
+ * Phone navigation: a bar of 3–5 sections at the bottom of the screen. Inside `AppShell.Footer`
+ * it shows only while the content panel is narrower than 640px; wider, Sidebar navigates.
+ */
+declare function BottomNavRoot({ iconOnly, floating, labels, className, ...rest }: BottomNavRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BottomNavRoot {
+    var displayName: string;
+}
+export type BottomNavItemIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** The item glyph above the label. */
+declare function BottomNavItemIcon({ className, ...rest }: BottomNavItemIconProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BottomNavItemIcon {
+    var displayName: string;
+}
+export type BottomNavItemCountProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "color"> & {
+    /** The number (or a short status). */
+    children: React.ReactNode;
+    /** Badge hue. Default `red`: a count on a section asks for attention. */
+    color?: PaletteColor;
+    /** Badge treatment. Default `solid`. */
+    variant?: Exclude<Variant, "ghost">;
+    /** The Badge `<span>`. */
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** A count on the corner of the icon: a small Badge, read after the label. */
+declare function BottomNavItemCount({ color, variant, className, ...rest }: BottomNavItemCountProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BottomNavItemCount {
+    var displayName: string;
+}
+type BottomNavItemOwnProps = {
+    /** Current section: `aria-current="page"`. Links rendered by a router may set it themselves. */
+    current?: boolean;
+    disabled?: boolean;
+    /** Render the single child element (a router link) as the item; its children are the content. */
+    asChild?: boolean;
+    /** `BottomNav.ItemIcon`, an optional `BottomNav.ItemCount` and the label. */
+    children?: React.ReactNode;
+};
+export type BottomNavItemProps = BottomNavItemOwnProps & Omit<React.ComponentPropsWithoutRef<"button">, keyof BottomNavItemOwnProps> & {
+    /** Renders an `<a>` instead of a `<button>`. */
+    href?: string;
+    target?: string;
+    rel?: string;
+    /** The `<a>`, `<button>` or the `asChild` element. */
+    ref?: React.Ref<HTMLElement>;
+};
+/** A section of the bar: the icon above a short label, both in the primary color while current. */
+declare function BottomNavItem({ current, disabled, asChild, href, className, children, onClick, type, ref, ...rest }: BottomNavItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BottomNavItem {
+    var displayName: string;
+}
+export declare const BottomNav: {
+    Root: typeof BottomNavRoot;
+    Item: typeof BottomNavItem;
+    ItemIcon: typeof BottomNavItemIcon;
+    ItemCount: typeof BottomNavItemCount;
+};
+export {};

package/dist/layout/index.d.ts

@@ -1,4 +1,8 @@
-export type { AppShellContentWidth, AppShellHeaderProps, AppShellMainProps, AppShellNavProps, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
+export type { AppHeaderActionsProps, AppHeaderDescriptionProps, AppHeaderIconProps, AppHeaderLabels, AppHeaderMenuButtonProps, AppHeaderRootProps, AppHeaderSearchProps, AppHeaderSeparatorProps, AppHeaderStartProps, AppHeaderTitleProps, } from "./app-header/AppHeader";
+export { AppHeader } from "./app-header/AppHeader";
+export type { AppShellContentWidth, AppShellFooterProps, AppShellMainProps, AppShellNavProps, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
 export { AppShell } from "./app-shell/AppShell";
+export type { BottomNavItemCountProps, BottomNavItemIconProps, BottomNavItemProps, BottomNavLabels, BottomNavRootProps, } from "./bottom-nav/BottomNav";
+export { BottomNav } from "./bottom-nav/BottomNav";
 export type { SidebarAccountProps, SidebarBrandLogoProps, SidebarBrandProps, SidebarContentProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemActionProps, SidebarItemCountProps, SidebarItemIconProps, SidebarItemProps, SidebarItemShortcutProps, SidebarLabels, SidebarMode, SidebarRootProps, SidebarSubContentProps, SidebarSubProps, SidebarSubTriggerProps, SidebarToggleProps, } from "./sidebar/Sidebar";
 export { Sidebar, useSidebar } from "./sidebar/Sidebar";

package/dist/tokens/primitives.d.ts

@@ -134,6 +134,8 @@ export declare const primitiveTokens: {
         };
         /** Modular scale, ~1.2 in the body range, ~1.25 for headings. */
         readonly size: {
+            /** Only for tab-bar labels under an icon (BottomNav, iOS tab bar 10pt); text roles start at 12. */
+            readonly 10: "0.625rem";
             readonly 12: "0.75rem";
             readonly 13: "0.8125rem";
             readonly 14: "0.875rem";
@@ -147,6 +149,8 @@ export declare const primitiveTokens: {
             readonly 60: "3.75rem";
         };
         readonly lineHeight: {
+            /** Only for tab-bar labels (BottomNav). */
+            readonly 12: "0.75rem";
             readonly 16: "1rem";
             readonly 20: "1.25rem";
             readonly 24: "1.5rem";

package/dist/tokens/semantic.d.ts

@@ -22,6 +22,15 @@ export declare const semanticTokens: {
             readonly sunken: "{color.gray.75}";
             readonly inverse: "{color.gray.925}";
             readonly scrim: "rgba(17, 19, 24, 0.44)";
+            /** Soft shade over an edge that hides scrolled content (DataTable columns). */
+            readonly edgeShadow: "rgba(17, 19, 24, 0.14)";
+            /**
+             * Translucent glass over content (floating BottomNav), always with a light backdrop blur:
+             * clear enough that the content reads through it, as Liquid Glass.
+             */
+            readonly glass: "color-mix(in srgb, var(--prime-ref-color-gray-0) 58%, transparent)";
+            /** The specular top edge of a glass surface: the line that makes it read as glass. */
+            readonly glassEdge: "rgba(255, 255, 255, 0.85)";
         };
         readonly fill: {
             /** Transparent wash: ghost hover, row hover. Works on any background. */
@@ -430,6 +439,13 @@ export declare const semanticTokens: {
             readonly choice: "{icon.24}";
             readonly track: "0.5rem";
         };
+        /**
+         * Coarse pointers (`@media (pointer: coarse)`): the hit area of a control below this size grows
+         * to it (WCAG 2.5.5); the visual size stays the tier's.
+         */
+        readonly touchTarget: "2.75rem";
+        /** Touch screens and narrow viewports: the least text size of an editable value (iOS zoom). */
+        readonly touchTextSize: "{font.size.16}";
     };
     /** Badge / Kbd tiers. Inside a control of tier T use the badge tier one step down. */
     readonly badge: {
@@ -569,6 +585,46 @@ export declare const semanticTokens: {
         readonly widthL: "40rem";
         readonly widthXl: "50rem";
     };
+    /** Bottom sheets: Drawer `side="bottom"`, Modal and floating layers on a narrow viewport. */
+    readonly sheet: {
+        readonly radius: "{radius.16}";
+        /** The grab bar at the top edge and the strip that holds it. */
+        readonly handleWidth: "2.25rem";
+        readonly handleHeight: "{space.1}";
+        readonly handleArea: "{space.5}";
+        /** Room kept above a sheet so the page behind stays visible. */
+        readonly topGap: "{space.10}";
+        /** A bottom sheet on a tablet or desktop is never narrower than this (= Modal m). */
+        readonly minWidth: "35rem";
+    };
+    readonly bottomNav: {
+        /** Bar height without the safe-area inset: icon 20 + gap 4 + label 12 and air around them. */
+        readonly height: "3.25rem";
+        /** An icon-only flat bar: no label row, so it is lower. */
+        readonly iconOnlyHeight: "{space.12}";
+        /**
+         * Floating capsule (iOS 26 tab bar): items 44 high — icon-only items are 44 squares, the touch
+         * size — inset 4 inside the capsule, so the selection capsule sits clear of its edge (52 in all).
+         */
+        readonly floatingItemSize: "2.75rem";
+        readonly floatingPadding: "{space.1}";
+        readonly paddingX: "{space.2}";
+        /** Between the icon and the label. */
+        readonly itemGap: "{space.1}";
+        /** The box that holds the icon and anchors the count. */
+        readonly indicatorWidth: "{space.7}";
+        readonly indicatorHeight: "{space.5}";
+        /** A light icon (20) over a small label (10, as the iOS tab bar): the bar stays quiet. */
+        readonly iconSize: "{icon.20}";
+        readonly labelSize: "{font.size.10}";
+        readonly labelLineHeight: "{font.lineHeight.12}";
+        /**
+         * Floating: the capsule's gap from the screen edges and the blur behind it — light, as Liquid
+         * Glass: the content stays recognisable under the glass, only softened.
+         */
+        readonly floatingInset: "{space.3}";
+        readonly blur: "0.5rem";
+    };
     readonly tooltip: {
         readonly radius: "{radius.6}";
         readonly paddingX: "{space.2}";

package/dist/tokens/themes/dark.d.ts

@@ -8,6 +8,10 @@ export declare const darkThemeOverrides: {
             readonly sunken: "{color.gray.950}";
             readonly inverse: "{color.gray.100}";
             readonly scrim: "rgba(0, 0, 0, 0.6)";
+            /** Darker than the scrim's share: a shade on a 900 surface needs more ink to read. */
+            readonly edgeShadow: "rgba(0, 0, 0, 0.5)";
+            readonly glass: "color-mix(in srgb, var(--prime-ref-color-gray-875) 56%, transparent)";
+            readonly glassEdge: "rgba(255, 255, 255, 0.16)";
         };
         readonly fill: {
             readonly subtle: "rgba(233, 235, 240, 0.05)";

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "prime-ui-kit",
-  "version": "0.9.1",
-  "description": "React 19 UI kit for product interfaces: 57 composable components on one design contract — forms, selects, tables, overlays, navigation, app shell. CSS Modules, --prime-* tokens, light and dark themes, TypeScript, a11y. Ships COMPONENT.md docs and copyable examples.",
+  "version": "0.9.2",
+  "packageManager": "bun@1.3.13",
+  "description": "React 19 UI kit for product interfaces: 61 composable components on one design contract — forms, selects, tables, overlays, navigation, app shell. CSS Modules, --prime-* tokens, light and dark themes, TypeScript, a11y. Ships COMPONENT.md docs and copyable examples.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/accordion/COMPONENT.md

@@ -1,6 +1,6 @@
 # Accordion
 
-**Category:** layout
+**Category:** data-display
 **Kind:** navigation
 
 > Collapsible sections: FAQ, settings groups, checkout steps.

package/src/components/badge/COMPONENT.md

@@ -30,7 +30,7 @@ Badge.Root          <span>: fill, tier dimensions
 ├─ [start segment]  Badge.Icon or Badge.Dot at the start edge: full height, mark centred
 ├─ body             text, Badge.Dot, inline Badge.Icon
 │                   (a <button> with onPress; a <span> with a trailing segment; none when read-only)
-├─ Badge.Action     optional end segment revealed on hover / focus
+├─ Badge.Action     optional end segment revealed on hover / focus (always shown on touch screens)
 └─ remove segment   with onRemove: full height, the whole end is the hit area (Icon action.close)
 ```
 
@@ -70,7 +70,7 @@ Badge.Root          <span>: fill, tier dimensions
 | `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `className` and the other span attributes. |
 
 ### Badge.Action
-`ref` → `HTMLButtonElement`. A `<button>` segment at the end, revealed on hover and focus; the badge reserves its room, so the width never changes. One per badge, not together with `onRemove`.
+`ref` → `HTMLButtonElement`. A `<button>` segment at the end, revealed on hover and focus, always shown on touch screens; the badge reserves its room, so the width never changes. One per badge, not together with `onRemove`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|

package/src/components/banner/COMPONENT.md

@@ -1,6 +1,6 @@
 # Banner
 
-**Category:** feedback
+**Category:** status
 **Kind:** primitive
 
 > Full-width in-flow message for a page, section or card: status icon, title, description, actions and dismiss.

package/src/components/checkbox/examples/examples.module.css

@@ -57,8 +57,10 @@
     var(--prime-motion-easing-standard);
 }
 
-.option:hover {
-  background: var(--prime-color-fill-subtle);
+@media (hover: hover) {
+  .option:hover {
+    background: var(--prime-color-fill-subtle);
+  }
 }
 
 .option:focus-visible {

package/src/components/crossfade/COMPONENT.md

@@ -1,6 +1,6 @@
 # Crossfade
 
-**Category:** feedback
+**Category:** status
 **Kind:** layout
 
 > A region that cross-fades between its states (loading → data → empty → error) and glides to the new height, so the page below does not jump.