@mohasinac/appkit 4.27.0 → 4.28.0

package/dist/tokens/index.d.ts

@@ -268,7 +268,7 @@ export declare const LAYOUT: {
     readonly navbarBg: "bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-b border-[var(--appkit-color-border)]";
     readonly sidebarBg: "bg-[var(--appkit-color-surface)] border-l border-[var(--appkit-color-border-subtle)]";
     readonly bottomNavBg: "bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-t border-[var(--appkit-color-border)]";
-    readonly footerBg: "bg-zinc-50 bg-[var(--appkit-color-surface)] border-t border-[var(--appkit-color-border-subtle)]";
+    readonly footerBg: " bg-[var(--appkit-color-surface)] border-t border-[var(--appkit-color-border-subtle)]";
     readonly fullScreen: "min-h-screen";
     readonly flexCenter: "flex items-center justify-center";
     readonly centerText: "text-center";

package/dist/tokens/index.js

@@ -205,7 +205,7 @@ export const LAYOUT = {
     navbarBg: "bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-b border-[var(--appkit-color-border)]",
     sidebarBg: "bg-[var(--appkit-color-surface)] border-l border-[var(--appkit-color-border-subtle)]",
     bottomNavBg: "bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-t border-[var(--appkit-color-border)]",
-    footerBg: "bg-zinc-50 bg-[var(--appkit-color-surface)] border-t border-[var(--appkit-color-border-subtle)]",
+    footerBg: " bg-[var(--appkit-color-surface)] border-t border-[var(--appkit-color-border-subtle)]",
     fullScreen: "min-h-screen",
     flexCenter: "flex items-center justify-center",
     centerText: "text-center",

package/dist/tokens/themes/default-dark.js

@@ -43,6 +43,12 @@ export const DEFAULT_DARK_THEME = {
         "appkit-color-surface": "#0f172a",
         "appkit-color-surface-elevated": "rgba(15, 23, 42, 0.9)",
         "appkit-color-surface-input": "rgba(30, 41, 59, 0.6)",
+        // Theme-inverting interactive fills. Must stay byte-identical to the
+        // [data-theme="default-dark"] block in tokens.css — audit-theme-drift
+        // compares them.
+        "appkit-color-surface-hover": "rgba(148, 163, 184, 0.12)",
+        "appkit-color-surface-raised": "rgba(30, 41, 59, 0.7)",
+        "appkit-color-primary-surface": "rgba(239, 68, 68, 0.16)",
         "appkit-color-border": "#334155",
         "appkit-color-border-subtle": "rgba(30, 41, 59, 0.6)",
         "appkit-color-text": "#fafafa",

package/dist/tokens/themes/default-light.js

@@ -46,6 +46,11 @@ export const DEFAULT_LIGHT_THEME = {
         "appkit-color-surface": "#ffffff",
         "appkit-color-surface-elevated": "#ffffff",
         "appkit-color-surface-input": "#ffffff",
+        // Theme-inverting interactive fills. Must stay byte-identical to the
+        // matching :root block in tokens.css — audit-theme-drift compares them.
+        "appkit-color-surface-hover": "#f4f4f5",
+        "appkit-color-surface-raised": "#fafafa",
+        "appkit-color-primary-surface": "#f0fdfa",
         "appkit-color-border": "#e4e4e7",
         "appkit-color-border-subtle": "#f4f4f5",
         "appkit-color-text": "#18181b",

package/dist/tokens/tokens.css

@@ -262,6 +262,27 @@
   --appkit-color-surface-elevated: #ffffff;
   --appkit-color-surface-input:    #ffffff;
 
+  /* --- Interactive surfaces ------------------------------------------------
+   * `-hover` is the neutral chrome hover fill; `-raised` is a resting panel one
+   * step off the page surface; `primary-surface` is the brand-tinted hover.
+   *
+   * All three INVERT with the theme, and that is the whole point. A hardcoded
+   * a hardcoded `zinc-50` hover fill is near-white in every theme, and sits under
+   * `dark:hover:text-*` white ink and is unreadable; `--appkit-color-zinc-*`
+   * are declared once under :root and never inverted either. `surface-elevated`
+   * is not a substitute — it EQUALS `surface` in default-light and sunset, so a
+   * hover built on it does nothing at all in a light theme.
+   *
+   * `surface-hover` and `surface-raised` were referenced by 10 call sites for a
+   * long time while being declared nowhere, so they computed to nothing.
+   * NB: never write a closing curly brace in a comment in this file —
+   * audit-theme-drift matches each block non-greedily and a brace truncates it.
+   */
+  --appkit-color-surface-hover:    #f4f4f5;
+  --appkit-color-surface-raised:   #fafafa;
+  --appkit-color-primary-surface:  #f0fdfa;
+
+
   --appkit-color-border:           #e4e4e7;    /* zinc-200 */
   --appkit-color-border-subtle:    #f4f4f5;    /* zinc-100 */
 
@@ -383,6 +404,27 @@
   --appkit-color-surface-elevated: rgba(15, 23, 42, 0.9);
   --appkit-color-surface-input:    rgba(30, 41, 59, 0.6);  /* slate-800/60 */
 
+  /* --- Interactive surfaces ------------------------------------------------
+   * `-hover` is the neutral chrome hover fill; `-raised` is a resting panel one
+   * step off the page surface; `primary-surface` is the brand-tinted hover.
+   *
+   * All three INVERT with the theme, and that is the whole point. A hardcoded
+   * a hardcoded `zinc-50` hover fill is near-white in every theme, and sits under
+   * `dark:hover:text-*` white ink and is unreadable; `--appkit-color-zinc-*`
+   * are declared once under :root and never inverted either. `surface-elevated`
+   * is not a substitute — it EQUALS `surface` in default-light and sunset, so a
+   * hover built on it does nothing at all in a light theme.
+   *
+   * `surface-hover` and `surface-raised` were referenced by 10 call sites for a
+   * long time while being declared nowhere, so they computed to nothing.
+   * NB: never write a closing curly brace in a comment in this file —
+   * audit-theme-drift matches each block non-greedily and a brace truncates it.
+   */
+  --appkit-color-surface-hover:    rgba(148, 163, 184, 0.12);
+  --appkit-color-surface-raised:   rgba(30, 41, 59, 0.7);
+  --appkit-color-primary-surface:  rgba(239, 68, 68, 0.16);
+
+
   --appkit-color-border:           #334155;    /* slate-700 */
   --appkit-color-border-subtle:    rgba(30, 41, 59, 0.6);  /* slate-800/60 */
 
@@ -479,6 +521,27 @@
   --appkit-color-surface-elevated: rgba(21, 54, 180, 0.9);
   --appkit-color-surface-input:    rgba(24, 49, 142, 0.6);
 
+  /* --- Interactive surfaces ------------------------------------------------
+   * `-hover` is the neutral chrome hover fill; `-raised` is a resting panel one
+   * step off the page surface; `primary-surface` is the brand-tinted hover.
+   *
+   * All three INVERT with the theme, and that is the whole point. A hardcoded
+   * a hardcoded `zinc-50` hover fill is near-white in every theme, and sits under
+   * `dark:hover:text-*` white ink and is unreadable; `--appkit-color-zinc-*`
+   * are declared once under :root and never inverted either. `surface-elevated`
+   * is not a substitute — it EQUALS `surface` in default-light and sunset, so a
+   * hover built on it does nothing at all in a light theme.
+   *
+   * `surface-hover` and `surface-raised` were referenced by 10 call sites for a
+   * long time while being declared nowhere, so they computed to nothing.
+   * NB: never write a closing curly brace in a comment in this file —
+   * audit-theme-drift matches each block non-greedily and a brace truncates it.
+   */
+  --appkit-color-surface-hover:    rgba(137, 185, 255, 0.14);
+  --appkit-color-surface-raised:   rgba(24, 49, 142, 0.7);
+  --appkit-color-primary-surface:  rgba(89, 146, 255, 0.18);
+
+
   --appkit-color-border:           #1343de;    /* primary-700 */
   --appkit-color-border-subtle:    rgba(24, 49, 142, 0.6);
 
@@ -518,6 +581,27 @@
   --appkit-color-surface-elevated: #ffffff;
   --appkit-color-surface-input:    #fffbeb;    /* amber-50 */
 
+  /* --- Interactive surfaces ------------------------------------------------
+   * `-hover` is the neutral chrome hover fill; `-raised` is a resting panel one
+   * step off the page surface; `primary-surface` is the brand-tinted hover.
+   *
+   * All three INVERT with the theme, and that is the whole point. A hardcoded
+   * a hardcoded `zinc-50` hover fill is near-white in every theme, and sits under
+   * `dark:hover:text-*` white ink and is unreadable; `--appkit-color-zinc-*`
+   * are declared once under :root and never inverted either. `surface-elevated`
+   * is not a substitute — it EQUALS `surface` in default-light and sunset, so a
+   * hover built on it does nothing at all in a light theme.
+   *
+   * `surface-hover` and `surface-raised` were referenced by 10 call sites for a
+   * long time while being declared nowhere, so they computed to nothing.
+   * NB: never write a closing curly brace in a comment in this file —
+   * audit-theme-drift matches each block non-greedily and a brace truncates it.
+   */
+  --appkit-color-surface-hover:    #ffedd5;
+  --appkit-color-surface-raised:   #fff7ed;
+  --appkit-color-primary-surface:  #fef3c7;
+
+
   --appkit-color-border:           #fed7aa;    /* orange-200 */
   --appkit-color-border-subtle:    #ffedd5;    /* orange-100 */
 

package/dist/ui/DataTable.js

@@ -158,5 +158,5 @@ function SelectableCard({ id, selectable, selected, onToggle, children, listMode
                                     selected
                                         ? "border-2 border-primary bg-primary"
                                         : "border-2 border-zinc-500 dark:border-slate-400 bg-transparent group-hover:border-primary",
-                                ].join(" "), checked: selected, onChange: (e) => onToggle(id, e.target.checked), "aria-label": "Select item" }), selected && (_jsx("svg", { className: "absolute inset-0 m-auto w-2.5 h-2.5 text-white pointer-events-none", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }))] }) }) }), selected && (_jsx(Div, { className: "absolute inset-0 z-[var(--appkit-z-raised)] ring-2 ring-primary ring-offset-0 pointer-events-none", rounded: "xl", "aria-hidden": "true" })), children] }));
+                                ].join(" "), checked: selected, onChange: (e) => onToggle(id, e.target.checked), "aria-label": "Select item" }), selected && (_jsx("svg", { className: "absolute inset-0 m-auto h-3 w-3 text-white pointer-events-none", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }))] }) }) }), selected && (_jsx(Div, { className: "absolute inset-0 z-[var(--appkit-z-raised)] ring-2 ring-primary ring-offset-0 pointer-events-none", rounded: "xl", "aria-hidden": "true" })), children] }));
 }

package/dist/ui/DataTable.style.css

@@ -63,7 +63,7 @@
 }
 
 .appkit-data-table__th--sortable:hover {
-  background: var(--appkit-color-zinc-100);
+  background: var(--appkit-color-surface-hover);
 }
 
 :is(.dark) .appkit-data-table__th--sortable:hover {
@@ -95,7 +95,7 @@
 }
 
 .appkit-data-table__row--clickable:hover {
-  background: var(--appkit-color-zinc-50);
+  background: var(--appkit-color-surface-hover);
 }
 
 :is(.dark) .appkit-data-table__row--clickable:hover {
@@ -160,7 +160,7 @@
 }
 
 .appkit-data-table__view-btn:hover {
-  background: var(--appkit-color-zinc-100);
+  background: var(--appkit-color-surface-hover);
 }
 
 :is(.dark) .appkit-data-table__view-btn:hover {

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

@@ -76,7 +76,7 @@
   transition: background-color 0.15s ease;
 }
 
-.appkit-bulk-bar__picker-trigger:hover { background: var(--appkit-color-zinc-100); }
+.appkit-bulk-bar__picker-trigger:hover { background: var(--appkit-color-surface-hover); }
 .appkit-bulk-bar__picker-trigger--danger { color: var(--appkit-color-rose-700); }
 
 .appkit-bulk-bar__picker-icon {
@@ -182,8 +182,6 @@
   background: rgba(30, 41, 59, 0.6);
   color: var(--appkit-color-text);
 }
-
-.dark .appkit-bulk-bar__picker-trigger:hover { background: rgba(51, 65, 85, 0.6); }
 .dark .appkit-bulk-bar__picker-trigger--danger { color: var(--appkit-color-rose-300); }
 
 .dark .appkit-bulk-bar__dropdown {

package/dist/ui/components/Button.js

@@ -7,7 +7,7 @@ import { Loader2 } from "lucide-react";
 import { surfaceError } from "../../client/api/surface-error";
 import { useToastSafe } from "./Toast";
 import { SHADOW_MAP } from "./surface-tokens";
-import { resolveIcon } from "../icons/icon-registry";
+import { resolveIcon, ICON_SIZE } from "../icons/icon-registry";
 function spawnRipple(host, clientX, clientY) {
     const rect = host.getBoundingClientRect();
     const size = Math.max(rect.width, rect.height);
@@ -117,11 +117,20 @@ const BUTTON_JUSTIFY_MAP = {
  * `aria-hidden` because the label (or `ariaLabel`) already names the action;
  * announcing the glyph as well would read it twice.
  */
-function ActionIcon({ action }) {
-    const Icon = resolveIcon(action?.iconKey);
-    if (!Icon)
+/**
+ * Icon size follows the BUTTON's size. It used to be hardcoded `h-4 w-4` for
+ * every size, so a `lg` button carried the same 16px glyph as an `sm` one.
+ */
+const ACTION_ICON_SIZE = {
+    sm: "sm",
+    md: "md",
+    lg: "lg",
+};
+function ActionIcon({ action, size, }) {
+    const Glyph = resolveIcon(action?.iconKey);
+    if (!Glyph)
         return null;
-    return _jsx(Icon, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" });
+    return (_jsx(Glyph, { className: `${ICON_SIZE[ACTION_ICON_SIZE[size]]} shrink-0`, "aria-hidden": "true" }));
 }
 // Map ActionKind → Button variant (caller can override via explicit variant prop)
 const ACTION_KIND_VARIANT = {
@@ -151,7 +160,7 @@ export function Button({ variant, size = "md", className = "", isLoading = false
      * label. If the caller passed children they have composed their own content,
      * and injecting a glyph into it would be a surprise.
      */
-    const actionIcon = children === undefined && action?.iconKey ? _jsx(ActionIcon, { action: action }) : null;
+    const actionIcon = children === undefined && action?.iconKey ? _jsx(ActionIcon, { action: action, size: size }) : null;
     const resolvedChildren = children ??
         (action ? (actionIcon ? (_jsxs(_Fragment, { children: [actionIcon, action.label] })) : (action.label)) : undefined);
     const resolvedAriaLabel = props["aria-label"] ?? (action ? (action.ariaLabel ?? action.label) : undefined);

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

@@ -66,7 +66,7 @@
   color: var(--appkit-color-zinc-700);
 }
 .appkit-dropdown__composed-item:hover {
-  background: var(--appkit-color-zinc-100);
+  background: var(--appkit-color-surface-hover);
 }
 .appkit-dropdown__composed-item:disabled {
   opacity: 0.5;
@@ -102,9 +102,6 @@
 .dark .appkit-dropdown__composed-item {
   color: var(--appkit-color-text);
 }
-.dark .appkit-dropdown__composed-item:hover {
-  background: var(--appkit-color-slate-800);
-}
 .dark .appkit-dropdown__separator {
   border-color: var(--appkit-color-border);
 }

package/dist/ui/components/FilterChipGroup.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div } from "./Div";
 import { Text } from "./Typography";
 const ACTIVE_CLS = "bg-[var(--appkit-color-primary)] text-white border-[var(--appkit-color-primary)]";
-const INACTIVE_CLS = "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]";
+const INACTIVE_CLS = "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-surface-hover";
 const CHIP_BASE_CLS = "rounded-full px-3 py-1 text-xs font-medium border transition-colors";
 const LABEL_CLS = "text-xs font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)]";
 // `opacity-70` rather than a fixed colour so the count stays legible against

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

@@ -15,7 +15,7 @@
 }
 
 .appkit-filter-drawer__trigger:hover {
-  background: var(--appkit-color-zinc-100);
+  background: var(--appkit-color-surface-hover);
 }
 
 :is(.dark) .appkit-filter-drawer__trigger:hover {

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { ICONS, ICON_SIZE, type IconKey, type IconSizeKey } from "../icons/icon-registry";
+/**
+ * Ink colour. Deliberately a small enum of THEME-INVERTING tokens rather than
+ * open className — a glyph that does not follow the theme is the same defect as
+ * a hardcoded `zinc-50` hover background, one property over.
+ */
+declare const TONES: {
+    readonly current: "";
+    readonly default: "text-[var(--appkit-color-text)]";
+    readonly muted: "text-[var(--appkit-color-text-muted)]";
+    readonly faint: "text-[var(--appkit-color-text-faint)]";
+    readonly primary: "text-primary";
+    readonly success: "text-success";
+    readonly warning: "text-warning";
+    readonly error: "text-error";
+    readonly info: "text-info";
+    /** White ink, for a glyph on a solid brand/status fill or a dark scrim. */
+    readonly "on-solid": "text-white";
+};
+export type IconTone = keyof typeof TONES;
+export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, "ref" | "name"> {
+    /** Registry key — a typo is a compile error, not a silent blank. */
+    name: IconKey;
+    /** Role-based size. See ICON_SIZE for which to pick. */
+    size?: IconSizeKey;
+    tone?: IconTone;
+    /**
+     * Filled rather than outlined — the wishlist heart's "saved" state, a
+     * rating star, etc. Lucide glyphs are stroked outlines by default.
+     */
+    filled?: boolean;
+    /**
+     * Give the glyph an accessible name. OMIT for decorative icons that sit
+     * beside a visible text label — the default is `aria-hidden`, because a
+     * screen reader announcing "heart, Add to wishlist" is worse than silence.
+     */
+    label?: string;
+}
+/**
+ * The single way to render an icon.
+ *
+ * 105 files imported `lucide-react` directly and each picked its own size, so
+ * "an icon" was whatever that file happened to choose. `icon-registry.ts` was
+ * built to be the indirection and had no consumer; this is it.
+ *
+ * Safe in a Server Component: `lucide-react` is plain CJS with no `"use client"`
+ * banner, and this file adds no hooks. Do NOT add state here without also
+ * checking every RSC call site (Root Cause #76).
+ */
+export declare function Icon({ name, size, tone, filled, label, className, ...rest }: IconProps): React.JSX.Element | null;
+export { ICONS, ICON_SIZE };
+export type { IconKey, IconSizeKey };

package/dist/ui/components/Icon.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { twMerge } from "tailwind-merge";
+import { ICONS, ICON_SIZE, resolveIcon, } from "../icons/icon-registry";
+/**
+ * Ink colour. Deliberately a small enum of THEME-INVERTING tokens rather than
+ * open className — a glyph that does not follow the theme is the same defect as
+ * a hardcoded `zinc-50` hover background, one property over.
+ */
+const TONES = {
+    current: "",
+    default: "text-[var(--appkit-color-text)]",
+    muted: "text-[var(--appkit-color-text-muted)]",
+    faint: "text-[var(--appkit-color-text-faint)]",
+    primary: "text-primary",
+    success: "text-success",
+    warning: "text-warning",
+    error: "text-error",
+    info: "text-info",
+    /** White ink, for a glyph on a solid brand/status fill or a dark scrim. */
+    "on-solid": "text-white",
+};
+/**
+ * The single way to render an icon.
+ *
+ * 105 files imported `lucide-react` directly and each picked its own size, so
+ * "an icon" was whatever that file happened to choose. `icon-registry.ts` was
+ * built to be the indirection and had no consumer; this is it.
+ *
+ * Safe in a Server Component: `lucide-react` is plain CJS with no `"use client"`
+ * banner, and this file adds no hooks. Do NOT add state here without also
+ * checking every RSC call site (Root Cause #76).
+ */
+export function Icon({ name, size = "md", tone = "current", filled = false, label, className = "", ...rest }) {
+    const Glyph = resolveIcon(name);
+    // `resolveIcon` returns undefined for an unknown key on purpose — render
+    // nothing and leave the label intact rather than drawing a broken-image box.
+    if (!Glyph)
+        return null;
+    return (_jsx(Glyph, { className: twMerge(ICON_SIZE[size], TONES[tone], "shrink-0", className), fill: filled ? "currentColor" : "none", "aria-hidden": label ? undefined : true, "aria-label": label, role: label ? "img" : undefined, ...rest }));
+}
+export { ICONS, ICON_SIZE };

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

@@ -3,8 +3,21 @@ import { type RoundedKey } from "./surface-tokens";
 declare const SIZES: {
     readonly sm: "appkit-icon-button--sm";
     readonly md: "appkit-icon-button--md";
+    /** 44px — minimum comfortable tap target. See the CSS for when to use it. */
+    readonly touch: "appkit-icon-button--touch";
     readonly lg: "appkit-icon-button--lg";
 };
+/**
+ * The glyph size each box wants. Callers should let the button decide rather
+ * than passing a size to the icon by hand — a mismatched pair (a 14px glyph in
+ * a 44px box) is the whole "the icon is very small" report.
+ */
+export declare const ICON_BUTTON_ICON_SIZE: {
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly touch: "lg";
+    readonly lg: "lg";
+};
 declare const VARIANTS: {
     readonly ghost: "appkit-icon-button--ghost";
     readonly outline: "appkit-icon-button--outline";

package/dist/ui/components/IconButton.js

@@ -5,8 +5,21 @@ const BASE = "appkit-icon-button";
 const SIZES = {
     sm: "appkit-icon-button--sm",
     md: "appkit-icon-button--md",
+    /** 44px — minimum comfortable tap target. See the CSS for when to use it. */
+    touch: "appkit-icon-button--touch",
     lg: "appkit-icon-button--lg",
 };
+/**
+ * The glyph size each box wants. Callers should let the button decide rather
+ * than passing a size to the icon by hand — a mismatched pair (a 14px glyph in
+ * a 44px box) is the whole "the icon is very small" report.
+ */
+export const ICON_BUTTON_ICON_SIZE = {
+    sm: "sm",
+    md: "md",
+    touch: "lg",
+    lg: "lg",
+};
 const VARIANTS = {
     ghost: "appkit-icon-button--ghost",
     outline: "appkit-icon-button--outline",

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

@@ -36,23 +36,35 @@
   border-radius: 0.75rem;
 }
 
+/* 44px — the minimum comfortable tap target. For a control that is the ONLY
+ * affordance in its area and has no text label to widen it: a product card's
+ * wishlist heart, a media overlay control. Sits between --md and --lg because
+ * those are round numbers, not accessibility thresholds.
+ *
+ * Use IconButton, not Button, for these: `.appkit-button--sm` sets
+ * `min-height: 36px`, and under `important: true` a caller's `h-8` (2rem)
+ * loses to it — which is how the card heart rendered as a 32x36 ellipse under
+ * `rounded-full`. These boxes set `width`+`height` with no min, so they are
+ * true squares. */
+.appkit-icon-button--touch {
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.75rem;
+}
+
 .appkit-icon-button--ghost {
   background: transparent;
   color: var(--appkit-color-zinc-600);
 }
 
 .appkit-icon-button--ghost:hover:not(:disabled) {
-  background: var(--appkit-color-zinc-100);
+  background: var(--appkit-color-surface-hover);
 }
 
 .dark .appkit-icon-button--ghost {
   color: var(--appkit-color-text-faint);
 }
 
-.dark .appkit-icon-button--ghost:hover:not(:disabled) {
-  background: var(--appkit-color-zinc-800);
-}
-
 .appkit-icon-button--outline {
   border-color: var(--appkit-color-border);
   background: var(--appkit-color-surface);
@@ -60,7 +72,7 @@
 }
 
 .appkit-icon-button--outline:hover:not(:disabled) {
-  background: var(--appkit-color-zinc-50);
+  background: var(--appkit-color-surface-hover);
 }
 
 .dark .appkit-icon-button--outline {
@@ -69,10 +81,6 @@
   color: var(--appkit-color-zinc-300);
 }
 
-.dark .appkit-icon-button--outline:hover:not(:disabled) {
-  background: var(--appkit-color-slate-800);
-}
-
 .appkit-icon-button--primary {
   background: var(--appkit-color-secondary-600);
   color: var(--appkit-color-text-on-primary);

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

@@ -184,7 +184,7 @@
 
 .appkit-listing-layout__filter-btn:hover {
   border-color: var(--appkit-color-zinc-300);
-  background: var(--appkit-color-zinc-50);
+  background: var(--appkit-color-surface-hover);
 }
 
 .appkit-listing-layout__filter-btn--active {
@@ -197,10 +197,6 @@
   border-color: var(--appkit-color-slate-800);
   color: var(--appkit-color-slate-300);
 }
-.dark .appkit-listing-layout__filter-btn:hover {
-  border-color: var(--appkit-color-slate-700);
-  background: rgba(30, 41, 59, 0.6);
-}
 
 /* -- Filter badge ------------------------------------ */
 
@@ -494,9 +490,5 @@
 }
 
 .appkit-listing-layout__close-btn:hover {
-  background: var(--appkit-color-zinc-100);
-}
-
-.dark .appkit-listing-layout__close-btn:hover {
-  background: var(--appkit-color-slate-800);
+  background: var(--appkit-color-surface-hover);
 }

package/dist/ui/components/ListingToolbar.js

@@ -6,8 +6,8 @@ import { SortDropdown } from "./SortDropdown";
 import { Div } from "./Div";
 import { Span } from "./Typography";
 import { StickyToolbar } from "./StickyToolbar";
-const CLS_CLEAR_LINK = "text-xs text-zinc-400 hover:text-error text-[var(--appkit-color-text-muted)] transition-colors";
-const CLS_CLEAR_ICON_BTN = "flex shrink-0 items-center justify-center rounded-lg border border-[var(--appkit-color-border)] p-1.5 sm:p-2 text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] hover:text-error dark:hover:text-error transition-colors";
+const CLS_CLEAR_LINK = "text-xs hover:text-error text-[var(--appkit-color-text-muted)] transition-colors";
+const CLS_CLEAR_ICON_BTN = "flex shrink-0 items-center justify-center rounded-lg border border-[var(--appkit-color-border)] p-1.5 sm:p-2 text-[var(--appkit-color-text-muted)] hover:bg-surface-hover hover:text-error dark:hover:text-error transition-colors";
 const DEFAULT_LABELS = {
     search: "Search",
     filters: "Filters",
@@ -23,7 +23,7 @@ const DEFAULT_LABELS = {
 };
 const VIEW_BTN_BASE = "p-1.5 sm:p-2 transition-colors";
 const VIEW_BTN_ACTIVE = "bg-[var(--appkit-color-primary)] text-white";
-const VIEW_BTN_INACTIVE = "text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]";
+const VIEW_BTN_INACTIVE = "text-[var(--appkit-color-text-muted)] hover:bg-surface-hover text-[var(--appkit-color-text-muted)]";
 export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue = "", searchPlaceholder = "Search…", onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view = "grid", onViewChange, hideViewToggle = false, showTableView = false, onResetAll, hasActiveState = false, bulkMode = false, bulkSelectedCount = 0, bulkTotalCount = 0, onBulkSelectAll, onBulkClear, toggles, extra, labels, className = "", dismissible = true, toolbarId, collapseLabel = "Toolbar", }) {
     const l = { ...DEFAULT_LABELS, ...labels };
     const pathname = usePathname();
@@ -37,9 +37,9 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
         }
     };
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
-    return (_jsx(StickyToolbar, { dataTestId: "listing-toolbar", offset: "header", tone: "translucent", border: true, padding: "none", z: "above-toolbar", className: `py-3 px-3 sm:py-3.5 sm:px-4 shadow-sm ${className}`, dismissible: dismissible, id: resolvedToolbarId, label: collapseLabel, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2.5 sm:gap-3", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-3 py-1.5 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [allSelected
+    return (_jsx(StickyToolbar, { dataTestId: "listing-toolbar", offset: "header", tone: "translucent", border: true, padding: "none", z: "above-toolbar", className: `py-3 px-3 sm:py-3.5 sm:px-4 shadow-sm ${className}`, dismissible: dismissible, id: resolvedToolbarId, label: collapseLabel, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2.5 sm:gap-3", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-3 py-1.5 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-surface-hover transition-colors", children: [allSelected
                                     ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary)]" })
-                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary)] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2 sm:shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary)] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
+                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary)] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2 sm:shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-surface-hover transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary)] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
                                     ? "border-transparent bg-[var(--appkit-color-primary)] text-white"
-                                    : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: t.label }, t.label))) })), extra] })] }) }));
+                                    : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-surface-hover"}`, children: t.label }, t.label))) })), extra] })] }) }));
 }

package/dist/ui/components/Modal.js

@@ -76,7 +76,7 @@ export function Modal({ isOpen, open, onClose, title, children, size = "md", sho
 }
 export function ModalFooter({ children, className = "", }) {
     return (_jsx("div", { className: [
-            "flex items-center justify-end gap-3 border-t border-zinc-100 px-6 py-4 border-[var(--appkit-color-border-subtle)]",
+            "flex items-center justify-end gap-3 border-t px-6 py-4 border-[var(--appkit-color-border-subtle)]",
             className,
         ]
             .filter(Boolean)

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

@@ -48,7 +48,7 @@
 
 .appkit-ps__chip-remove:hover {
   color: var(--appkit-color-text);
-  background-color: var(--appkit-color-zinc-100);
+  background-color: var(--appkit-color-surface-hover);
 }
 
 :is(.dark) .appkit-ps__chip-remove:hover {
@@ -167,7 +167,7 @@
 }
 
 .appkit-ps__option:hover {
-  background-color: var(--appkit-color-zinc-100);
+  background-color: var(--appkit-color-surface-hover);
 }
 
 :is(.dark) .appkit-ps__option:hover {
@@ -254,7 +254,7 @@
 }
 
 .appkit-ps__create-btn:hover {
-  background-color: var(--appkit-color-zinc-50);
+  background-color: var(--appkit-color-surface-hover);
 }
 
 :is(.dark) .appkit-ps__create-btn:hover {

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

@@ -22,7 +22,7 @@
 }
 
 .appkit-pagination__button--default:hover {
-  background: var(--appkit-color-zinc-50);
+  background: var(--appkit-color-surface-hover);
   border-color: var(--appkit-color-zinc-300);
 }
 
@@ -55,11 +55,6 @@
   color: var(--appkit-color-slate-300);
 }
 
-.dark .appkit-pagination__button--default:hover {
-  background: var(--appkit-color-slate-800);
-  border-color: var(--appkit-color-slate-600);
-}
-
 .dark .appkit-pagination__button--active {
   background: var(--appkit-color-primary);
   border-color: var(--appkit-color-primary);