@mohasinac/appkit 4.53.2 → 4.54.0

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

@@ -110,7 +110,7 @@ export const DEFAULT_DARK_THEME = {
         "accent-banner": "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary))",
         promotion: "linear-gradient(to bottom right, var(--appkit-color-error), var(--appkit-color-primary), var(--appkit-color-warning))",
         spotlight: "linear-gradient(to bottom right, rgba(6,182,212,0.10), var(--appkit-color-bg), rgba(6,182,212,0.10))",
-        "whatsapp-card": "linear-gradient(to bottom right, var(--appkit-color-success), var(--appkit-color-success))",
+        "whatsapp-card": "linear-gradient(135deg, var(--appkit-color-whatsapp) 0%, var(--appkit-color-whatsapp-light) 48%, var(--appkit-color-whatsapp-dark) 100%)",
         glass: "linear-gradient(to bottom right, color-mix(in srgb, var(--appkit-color-surface) 85%, transparent), color-mix(in srgb, var(--appkit-color-surface) 65%, transparent))",
         "card-indigo": "linear-gradient(to bottom right, rgba(239,68,68,0.10), var(--appkit-color-surface), var(--appkit-color-surface))",
         "card-teal": "linear-gradient(to bottom right, rgba(6,182,212,0.10), var(--appkit-color-surface), var(--appkit-color-surface))",

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

@@ -68,6 +68,7 @@ export const DEFAULT_LIGHT_THEME = {
         "appkit-color-star": "#facc15",
         "appkit-color-whatsapp-light": "#1ebe5d",
         "appkit-color-whatsapp-bg": "#ECE5DD",
+        "appkit-color-whatsapp-dark": "#075E54",
         "appkit-color-focus-ring": "#0d9488",
         "appkit-shadow-glow": "0 0 0 1px rgba(13,148,136,0.10), 0 4px 16px -4px rgba(13,148,136,0.20)",
         "appkit-shadow-glow-pink": "0 0 0 1px rgba(192,38,211,0.12), 0 4px 16px -4px rgba(192,38,211,0.22)",
@@ -116,7 +117,7 @@ export const DEFAULT_LIGHT_THEME = {
         "accent-banner": "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary))",
         promotion: "linear-gradient(to bottom right, var(--appkit-color-error), var(--appkit-color-primary), var(--appkit-color-warning))",
         spotlight: "linear-gradient(to bottom right, var(--appkit-color-info-surface), var(--appkit-color-bg), var(--appkit-color-info-surface))",
-        "whatsapp-card": "linear-gradient(to bottom right, var(--appkit-color-success), var(--appkit-color-success))",
+        "whatsapp-card": "linear-gradient(135deg, var(--appkit-color-whatsapp) 0%, var(--appkit-color-whatsapp-light) 48%, var(--appkit-color-whatsapp-dark) 100%)",
         glass: "linear-gradient(to bottom right, color-mix(in srgb, var(--appkit-color-surface) 85%, transparent), color-mix(in srgb, var(--appkit-color-surface) 65%, transparent))",
         "card-indigo": "linear-gradient(to bottom right, var(--appkit-color-primary-50), var(--appkit-color-surface), var(--appkit-color-surface))",
         "card-teal": "linear-gradient(to bottom right, var(--appkit-color-secondary-50), var(--appkit-color-surface), var(--appkit-color-surface))",

package/dist/tokens/tokens.css

@@ -217,6 +217,10 @@
   --appkit-color-whatsapp:       #25D366;
   --appkit-color-whatsapp-light: #1ebe5d;
   --appkit-color-whatsapp-bg:    #ECE5DD;
+  /* WhatsApp's own deep teal. Needed as a third gradient stop: a green
+     darkened with color-mix() reads olive, not teal, so the brand's dark end
+     cannot be derived from --appkit-color-whatsapp. */
+  --appkit-color-whatsapp-dark:  #075E54;
   --appkit-color-youtube:        #FF0000;
   --appkit-gradient-instagram: linear-gradient(to bottom right, #a855f7, #ec4899, #fb923c);
 }
@@ -346,7 +350,7 @@
   --appkit-gradient-accent-banner:    linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary));
   --appkit-gradient-promotion:        linear-gradient(to bottom right, var(--appkit-color-error), var(--appkit-color-primary), var(--appkit-color-warning));
   --appkit-gradient-spotlight:        linear-gradient(to bottom right, var(--appkit-color-info-surface), var(--appkit-color-bg), var(--appkit-color-info-surface));
-  --appkit-gradient-whatsapp-card:    linear-gradient(to bottom right, var(--appkit-color-success), var(--appkit-color-success));
+  --appkit-gradient-whatsapp-card:    linear-gradient(135deg, var(--appkit-color-whatsapp) 0%, var(--appkit-color-whatsapp-light) 48%, var(--appkit-color-whatsapp-dark) 100%);
   --appkit-gradient-glass:            linear-gradient(to bottom right, color-mix(in srgb, var(--appkit-color-surface) 85%, transparent), color-mix(in srgb, var(--appkit-color-surface) 65%, transparent));
   --appkit-gradient-card-indigo:      linear-gradient(to bottom right, var(--appkit-color-primary-50), var(--appkit-color-surface), var(--appkit-color-surface));
   --appkit-gradient-card-teal:        linear-gradient(to bottom right, var(--appkit-color-secondary-50), var(--appkit-color-surface), var(--appkit-color-surface));
@@ -459,7 +463,7 @@
   --appkit-gradient-accent-banner:   linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary));
   --appkit-gradient-promotion:       linear-gradient(to bottom right, var(--appkit-color-error), var(--appkit-color-primary), var(--appkit-color-warning));
   --appkit-gradient-spotlight:       linear-gradient(to bottom right, rgba(6,182,212,0.10), var(--appkit-color-bg), rgba(6,182,212,0.10));
-  --appkit-gradient-whatsapp-card:   linear-gradient(to bottom right, var(--appkit-color-success), var(--appkit-color-success));
+  --appkit-gradient-whatsapp-card:   linear-gradient(135deg, var(--appkit-color-whatsapp) 0%, var(--appkit-color-whatsapp-light) 48%, var(--appkit-color-whatsapp-dark) 100%);
   --appkit-gradient-glass:           linear-gradient(to bottom right, color-mix(in srgb, var(--appkit-color-surface) 85%, transparent), color-mix(in srgb, var(--appkit-color-surface) 65%, transparent));
   --appkit-gradient-card-indigo:     linear-gradient(to bottom right, rgba(239,68,68,0.10), var(--appkit-color-surface), var(--appkit-color-surface));
   --appkit-gradient-card-teal:       linear-gradient(to bottom right, rgba(6,182,212,0.10), var(--appkit-color-surface), var(--appkit-color-surface));

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

@@ -16,6 +16,17 @@ declare const UI_BUTTON: {
         readonly ghost: "appkit-button--ghost";
         readonly danger: "appkit-button--danger";
         readonly warning: "appkit-button--warning";
+        /**
+         * A surface-coloured pill for use ON a dark or branded background.
+         *
+         * WHY: all six variants above are tuned for a light page surface and none
+         * is legible on a branded one, which is why call sites were overriding the
+         * variant with `!important` instead — `WhatsAppCommunitySection` carried
+         * four (`!bg-…whatsapp !text-white !border-0`) because a green button on a
+         * green card is invisible. Inverting the pairing (surface fill, themed ink)
+         * is legible on any backdrop and needs no overrides.
+         */
+        readonly inverse: "appkit-button--inverse";
     };
     readonly sizes: {
         readonly sm: "appkit-button--sm";

package/dist/ui/components/Button.js

@@ -41,6 +41,17 @@ const UI_BUTTON = {
         ghost: "appkit-button--ghost",
         danger: "appkit-button--danger",
         warning: "appkit-button--warning",
+        /**
+         * A surface-coloured pill for use ON a dark or branded background.
+         *
+         * WHY: all six variants above are tuned for a light page surface and none
+         * is legible on a branded one, which is why call sites were overriding the
+         * variant with `!important` instead — `WhatsAppCommunitySection` carried
+         * four (`!bg-…whatsapp !text-white !border-0`) because a green button on a
+         * green card is invisible. Inverting the pairing (surface fill, themed ink)
+         * is legible on any backdrop and needs no overrides.
+         */
+        inverse: "appkit-button--inverse",
     },
     sizes: {
         sm: "appkit-button--sm",

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

@@ -198,6 +198,35 @@
   color: inherit;
 }
 
+/*
+ * `inverse` — a surface-coloured pill for a dark or branded backdrop.
+ *
+ * The pairing is deliberately the inverse of `primary`: the FILL comes from
+ * the page surface and the INK from body text, so it contrasts against
+ * whatever colour the card behind it is, in both themes, with no per-call-site
+ * override. Four `!important` declarations in WhatsAppCommunitySection and one
+ * `!bg-primary` on a TextLink in WelcomeSection existed only because this
+ * variant did not.
+ *
+ * No border: a 1px border between a white pill and a saturated card reads as
+ * a seam rather than an edge.
+ */
+.appkit-button.appkit-button--inverse {
+  background: var(--appkit-color-surface);
+  border-color: transparent;
+  color: var(--appkit-color-text);
+}
+
+.appkit-button.appkit-button--inverse:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--appkit-color-surface) 92%, var(--appkit-color-text));
+}
+
+/* Same child-inheritance rule the warning variant needs: a nested element with
+   no appkit class of its own must not fall back to the themed body colour. */
+.appkit-button.appkit-button--inverse :not([class*="appkit-"]) {
+  color: inherit;
+}
+
 .appkit-button__spinner {
   width: 1rem;
   height: 1rem;

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

@@ -0,0 +1,57 @@
+import React from "react";
+/**
+ * CarouselNav — the one carousel position/navigation control.
+ *
+ * Presentational ONLY: it owns no scroll state and no timers. A hero passes its
+ * slide index; a rail passes `Math.round(scrollLeft / clientWidth)`. See
+ * CarouselNav.style.css for why three separate implementations was the defect
+ * this replaces.
+ *
+ * ## 🛑 Not `<Progress>`
+ *
+ * `Progress` is `role="progressbar"` with `aria-valuenow` — a claim that
+ * something is LOADING. An autoplay timer is decorative chrome; announcing it
+ * as progress tells a screen-reader user the page is busy when it is not. The
+ * fill here is `aria-hidden` and the segments carry the real semantics.
+ *
+ * @tag domain:ui
+ * @tag layer:component
+ * @tag pattern:presentational
+ * @tag access:client
+ * @tag sideEffects:none
+ */
+/** Over imagery, or on a themed page surface. See the CSS for the tone maps. */
+export type CarouselNavTone = "on-media" | "on-surface";
+/**
+ * Above this many positions the segment rail becomes unhittable slivers and
+ * overflows a phone, so the component switches to a meter plus a counter.
+ */
+export declare const CAROUSEL_RAIL_MAX = 8;
+export interface CarouselNavProps {
+    /** Total positions. Below 2 the component renders nothing. */
+    count: number;
+    /** Current zero-based position. */
+    index: number;
+    /** Jump to a position. Omit to render the rail as a non-interactive readout. */
+    onSelect?: (index: number) => void;
+    onPrev?: () => void;
+    onNext?: () => void;
+    tone?: CarouselNavTone;
+    /**
+     * Autoplay delay in ms, used ONLY to time the fill inside the active segment.
+     * Omit or pass 0 when there is no autoplay — the active segment then renders
+     * solid instead of animating. This must be the SAME value that drives the
+     * caller's timer; a literal here is the 4s-vs-6000ms desync this replaces.
+     */
+    progressMs?: number;
+    /** Freezes the fill. Pass the same flag that suspends the caller's timer. */
+    paused?: boolean;
+    /** Disables `prev` at the first position / `next` at the last. Ignored when `loop`. */
+    atStart?: boolean;
+    atEnd?: boolean;
+    loop?: boolean;
+    /** Names the control group. Required — "carousel" alone is not a name. */
+    ariaLabel: string;
+    className?: string;
+}
+export declare function CarouselNav({ count, index, onSelect, onPrev, onNext, tone, progressMs, paused, atStart, atEnd, loop, ariaLabel, className, }: CarouselNavProps): React.JSX.Element | null;

package/dist/ui/components/CarouselNav.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ICON_SIZE } from "../icons/icon-registry.js";
+/**
+ * Above this many positions the segment rail becomes unhittable slivers and
+ * overflows a phone, so the component switches to a meter plus a counter.
+ */
+export const CAROUSEL_RAIL_MAX = 8;
+export function CarouselNav({ count, index, onSelect, onPrev, onNext, tone = "on-surface", progressMs = 0, paused = false, atStart = false, atEnd = false, loop = false, ariaLabel, className = "", }) {
+    if (count < 2)
+        return null;
+    const current = Math.min(Math.max(index, 0), count - 1);
+    const hasAutoplay = progressMs > 0;
+    const useRail = count <= CAROUSEL_RAIL_MAX;
+    const prevDisabled = !loop && atStart;
+    const nextDisabled = !loop && atEnd;
+    return (_jsxs("div", { className: `appkit-carousel-nav ${className}`, "data-tone": tone, "data-paused": paused ? "true" : "false", "data-autoplay": hasAutoplay ? "true" : "false", style: { "--appkit-carousel-progress-duration": `${progressMs}ms` }, role: "group", "aria-label": ariaLabel, children: [onPrev && (_jsx("button", { type: "button", className: "appkit-carousel-nav__arrow", onClick: onPrev, disabled: prevDisabled, "aria-label": "Previous", children: _jsx(ChevronLeft, { className: ICON_SIZE.lg, "aria-hidden": "true" }) })), useRail ? (_jsx("div", { className: "appkit-carousel-nav__rail", children: Array.from({ length: count }, (_, i) => {
+                    const isCurrent = i === current;
+                    return (_jsx("button", { type: "button", className: "appkit-carousel-nav__seg", "aria-current": isCurrent ? "true" : undefined, "aria-label": `Go to ${i + 1} of ${count}`, onClick: onSelect ? () => onSelect(i) : undefined, disabled: !onSelect, children: _jsx("span", { className: "appkit-carousel-nav__bar", children: isCurrent && hasAutoplay && (_jsx("span", { className: "appkit-carousel-nav__fill", "aria-hidden": "true" }, `fill-${current}`)) }) }, i));
+                }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-carousel-nav__meter", "aria-hidden": "true", children: _jsx("span", { className: "appkit-carousel-nav__meter-thumb", style: {
+                                left: `${(current / count) * 100}%`,
+                                width: `${(1 / count) * 100}%`,
+                            } }) }), _jsxs("span", { className: "appkit-carousel-nav__count", children: [current + 1, " / ", count] })] })), onNext && (_jsx("button", { type: "button", className: "appkit-carousel-nav__arrow", onClick: onNext, disabled: nextDisabled, "aria-label": "Next", children: _jsx(ChevronRight, { className: ICON_SIZE.lg, "aria-hidden": "true" }) }))] }));
+}

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

@@ -0,0 +1,265 @@
+/*
+ * CarouselNav — the ONE carousel position/navigation control.
+ *
+ * ## 🛑 What it replaces, and why three implementations was the bug
+ *
+ * There were three unrelated indicator systems on the homepage alone:
+ *
+ *   1. `features/homepage/constants/hero-carousel-styles.ts` — bespoke Tailwind
+ *      pill dots plus a separate progress bar, and BOTH arrows stacked in one
+ *      bottom corner beside the dots.
+ *   2. `HorizontalScroller.style.css` — 36px translucent circles at mid-height,
+ *      `display:none` below 640px, with a 6px scrollbar as the only position
+ *      cue. Used by SectionCarousel, ShopByCategorySection, BrandsSection and
+ *      CustomCardsSection, i.e. nearly every rail on the site.
+ *   3. `TestimonialsCarousel` — `overflow-x-auto scrollbar-none`, nothing at
+ *      all, so there was no indication that content continued off-screen.
+ *
+ * The thing that had to be shared is the APPEARANCE; the call sites differ only
+ * in their STATE SOURCE (a hero knows its slide index, a rail derives one from
+ * `scrollLeft / clientWidth`). That split is what a presentational primitive is
+ * for, and it is why this is a new component rather than two restyles.
+ *
+ * ## 🛑 Segments, not dots — the active segment IS the progress track
+ *
+ * The hero previously rendered a progress bar as a child of the active dot and
+ * drove it with `animate-[progress-fill_4s_linear_forwards]` — a hardcoded 4s
+ * against a seeded `autoplayDelayMs` of 6000, so the bar finished two seconds
+ * before the slide moved. A literal cannot track a runtime value. Here the fill
+ * is the active segment itself and its duration comes from
+ * `--appkit-carousel-progress-duration`, set by the component from the real
+ * delay, so the two cannot disagree.
+ *
+ * ## 🛑 Arrows sit IN the row, not over the track
+ *
+ * Absolutely-positioning a 44px circle over a single-column card is what forced
+ * `display:none` below 640px in the first place, and it also cost every rail
+ * 2 × 44px of wrapper gutter to reserve space for controls a phone never saw.
+ * In flow, there is no breakpoint at which an affordance disappears and no
+ * gutter to reserve — and the arrows stop overlaying product art at a contrast
+ * nobody can predict.
+ */
+
+.appkit-carousel-nav {
+  --appkit-carousel-seg-w: 1.5rem;
+  --appkit-carousel-seg-w-active: 2.5rem;
+  --appkit-carousel-seg-h: 0.1875rem; /* 3px */
+  --appkit-carousel-arrow-size: 2.75rem; /* 44px — WCAG 2.5.8 target size */
+  /* Overridden inline by the component from the REAL autoplay delay. 0ms means
+     "no autoplay", which the [data-autoplay="false"] rule below renders as a
+     solid active segment rather than an animation of zero length. */
+  --appkit-carousel-progress-duration: 0ms;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--appkit-space-3, 0.75rem);
+  min-height: var(--appkit-carousel-arrow-size);
+}
+
+/* --- Tone: the ONLY colour decision in this file ------------------------- */
+
+/* Over imagery — white ink on a blurred dark scrim, theme-invariant because a
+   product photo is neither light nor dark in a way CSS can know. */
+.appkit-carousel-nav[data-tone="on-media"] {
+  --appkit-carousel-track: color-mix(in srgb, #fff 32%, transparent);
+  --appkit-carousel-fill: #fff;
+  --appkit-carousel-arrow-bg: color-mix(in srgb, #000 38%, transparent);
+  --appkit-carousel-arrow-ink: #fff;
+  --appkit-carousel-arrow-edge: color-mix(in srgb, #fff 45%, transparent);
+}
+
+/* On a themed page surface — follows the active theme in both directions. */
+.appkit-carousel-nav[data-tone="on-surface"] {
+  --appkit-carousel-track: var(--appkit-color-border, #e4e4e7);
+  --appkit-carousel-fill: var(--appkit-color-primary, #0d9488);
+  --appkit-carousel-arrow-bg: var(--appkit-color-surface, #ffffff);
+  --appkit-carousel-arrow-ink: var(--appkit-color-text, #18181b);
+  --appkit-carousel-arrow-edge: var(--appkit-color-border, #e4e4e7);
+}
+
+/* --- Segment rail -------------------------------------------------------- */
+
+.appkit-carousel-nav__rail {
+  display: flex;
+  align-items: center;
+  /* `safe center` rather than `center`: a centred overflowing flex row pushes
+     its LEADING items past the start edge, where they are unreachable by any
+     scroll gesture. See scripts/audit-centred-scroller.mjs. */
+  justify-content: safe center;
+  gap: var(--appkit-space-1-5, 0.375rem);
+  min-width: 0;
+}
+
+/*
+ * A 3px bar inside a 44px transparent hit box — the TARGET is the button, the
+ * VISUAL is the bar. The dots this replaces were `w-2 h-2` with `!min-h-0`,
+ * i.e. they actively defeated Button's own minimum target height to reach an
+ * 8px tap target.
+ */
+.appkit-carousel-nav__seg {
+  display: flex;
+  align-items: center;
+  padding-block: calc((var(--appkit-carousel-arrow-size) - var(--appkit-carousel-seg-h)) / 2);
+  padding-inline: 0;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.appkit-carousel-nav__bar {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: var(--appkit-carousel-seg-w);
+  height: var(--appkit-carousel-seg-h);
+  border-radius: 9999px;
+  background: var(--appkit-carousel-track);
+  transition:
+    width 420ms cubic-bezier(0.22, 1, 0.36, 1),
+    background 180ms linear;
+}
+
+.appkit-carousel-nav__seg:hover .appkit-carousel-nav__bar,
+.appkit-carousel-nav__seg:focus-visible .appkit-carousel-nav__bar {
+  background: color-mix(in srgb, var(--appkit-carousel-fill) 55%, transparent);
+}
+
+.appkit-carousel-nav__seg[aria-current="true"] .appkit-carousel-nav__bar {
+  width: var(--appkit-carousel-seg-w-active);
+  background: color-mix(in srgb, var(--appkit-carousel-fill) 28%, transparent);
+}
+
+/*
+ * `scaleX`, not `width`: it is compositor-only, and it leaves the bar's own
+ * `width` transition free to animate the 1.5rem → 2.5rem expansion at the same
+ * time without the two fighting over one property.
+ */
+.appkit-carousel-nav__fill {
+  position: absolute;
+  inset: 0;
+  transform-origin: left center;
+  background: var(--appkit-carousel-fill);
+  animation: appkit-carousel-fill var(--appkit-carousel-progress-duration, 0ms) linear forwards;
+}
+
+/* Hover-pause previously stopped the setInterval and left the bar filling, so
+   the indicator claimed the slide was about to advance while it was held. */
+.appkit-carousel-nav[data-paused="true"] .appkit-carousel-nav__fill {
+  animation-play-state: paused;
+}
+
+.appkit-carousel-nav[data-autoplay="false"] .appkit-carousel-nav__fill {
+  animation: none;
+  transform: scaleX(1);
+}
+
+@keyframes appkit-carousel-fill {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+/* --- Arrows -------------------------------------------------------------- */
+
+.appkit-carousel-nav__arrow {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--appkit-carousel-arrow-size);
+  height: var(--appkit-carousel-arrow-size);
+  border-radius: 9999px;
+  border: 0;
+  background: var(--appkit-carousel-arrow-bg);
+  color: var(--appkit-carousel-arrow-ink);
+  box-shadow:
+    inset 0 0 0 1px var(--appkit-carousel-arrow-edge),
+    0 1px 2px color-mix(in srgb, #000 8%, transparent);
+  backdrop-filter: blur(10px) saturate(140%);
+  cursor: pointer;
+  transition:
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    background 180ms linear;
+}
+
+.appkit-carousel-nav__arrow:hover:not(:disabled) {
+  transform: scale(1.06);
+}
+
+.appkit-carousel-nav__arrow:active:not(:disabled) {
+  transform: scale(0.94);
+}
+
+.appkit-carousel-nav__arrow:disabled,
+.appkit-carousel-nav__arrow[aria-disabled="true"] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* --- Counter mode ------------------------------------------------------- */
+
+/*
+ * Above CAROUSEL_RAIL_MAX positions the segments become unhittable slivers and
+ * the row overflows a phone, so a long rail shows one continuous meter plus a
+ * tabular "4 / 17" instead. Dropping to a counter is a real affordance; a row
+ * of forty 2px dots is not.
+ */
+.appkit-carousel-nav__meter {
+  position: relative;
+  overflow: hidden;
+  width: clamp(4rem, 18vw, 9rem);
+  height: var(--appkit-carousel-seg-h);
+  border-radius: 9999px;
+  background: var(--appkit-carousel-track);
+}
+
+.appkit-carousel-nav__meter-thumb {
+  position: absolute;
+  inset-block: 0;
+  border-radius: 9999px;
+  background: var(--appkit-carousel-fill);
+  transition: left 320ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.appkit-carousel-nav__count {
+  font-variant-numeric: tabular-nums;
+  font-size: var(--appkit-text-xs, 0.75rem);
+  color: var(--appkit-carousel-arrow-ink);
+  white-space: nowrap;
+}
+
+/* --- Compact (phones) --------------------------------------------------- */
+
+@media (max-width: 639px) {
+  .appkit-carousel-nav {
+    --appkit-carousel-seg-w: 1rem;
+    --appkit-carousel-seg-w-active: 1.75rem;
+    gap: var(--appkit-space-2, 0.5rem);
+  }
+}
+
+/* --- Inside a HorizontalScroller ---------------------------------------- */
+
+/* Breathing room between the rail and its indicator. A margin here rather than
+   a gap on `.appkit-hscroller`, because that wrapper is also the positioning
+   context for the absolute arrows and a gap would move them. */
+.appkit-hscroller__nav {
+  margin-top: var(--appkit-space-3, 0.75rem);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .appkit-carousel-nav__fill {
+    animation: none;
+    transform: scaleX(1);
+  }
+  .appkit-carousel-nav__bar,
+  .appkit-carousel-nav__meter-thumb,
+  .appkit-carousel-nav__arrow {
+    transition: none;
+  }
+}

package/dist/ui/components/GatedPrice.js

@@ -1,8 +1,11 @@
 "use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { Span } from "./Typography.js";
 import { Row } from "./Layout.js";
-import { ROUTES } from "../../next/routing/route-map.js";
+import { Icon } from "./Icon.js";
+import { IconButton, ICON_BUTTON_ICON_SIZE } from "./IconButton.js";
+import { LoginRequiredModal } from "./LoginRequiredModal.js";
 import { getDefaultCurrency } from "../../core/baseline-resolver.js";
 import { formatCurrency, formatPercentage } from "../../utils/number.formatter.js";
 import { useCanSeePrices } from "../../react/hooks/useCanSeePrices.js";
@@ -24,6 +27,30 @@ import { useCanSeePrices } from "../../react/hooks/useCanSeePrices.js";
 // audit-dead-css-ok: selector target for the paywall JSON-LD, never styled
 export const GATED_PRICE_CLASS = "appkit-gated-price";
 const DEFAULT_LABEL = "Sign in to see price";
+/**
+ * The signed-out state: a closed eye you can press, not a line of refusal copy.
+ *
+ * 🛑 WHY AN ICON AND NOT THE SENTENCE. The prompt used to be a full
+ * "🔒 Sign in to see price" link in `--appkit-color-primary`, repeated once per
+ * card. On a 24-card grid that is 24 lines of brand-coloured refusal, each
+ * wider than the price it stands in for — so the grid's loudest element became
+ * the thing the visitor cannot have, and the rows it sat in changed width with
+ * the copy. An eye occupies roughly a price's worth of space, reads as "there
+ * is something here", and says it once per card without shouting.
+ *
+ * 🛑 THE ASK IS ON THE CLICK, NOT ON THE PAGE. Pressing it opens the shared
+ * sign-in modal rather than navigating away: a visitor who taps a price on a
+ * listing page wants the price, not to lose their place in the catalogue. The
+ * modal is rendered only while open, so a grid of 24 gated prices mounts 24
+ * buttons and zero modals.
+ *
+ * The accessible name is still the full sentence — the icon is the visual
+ * economy, not an information loss.
+ */
+function GatedPriceReveal({ label }) {
+    const [asking, setAsking] = React.useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "sm", variant: "outline", rounded: "lg", "aria-label": label, title: label, onClick: () => setAsking(true), icon: _jsx(Icon, { name: "hide", size: ICON_BUTTON_ICON_SIZE.sm }) }), asking && (_jsx(LoginRequiredModal, { isOpen: true, onClose: () => setAsking(false), message: `${label}. Sign in or create an account to see prices across the site.` }))] }));
+}
 /**
  * Renders its children only when the viewer may see prices; renders NOTHING
  * otherwise — no prompt, no placeholder.
@@ -65,7 +92,7 @@ export function GatedPrice({ amount, currency = getDefaultCurrency(), originalAm
         return (_jsx(Span, { className: `${rootClass} appkit-gated-price__pending`, "aria-hidden": "true" }));
     }
     if (!canSeePrices) {
-        return (_jsx("a", { href: String(ROUTES.AUTH.LOGIN), className: `${rootClass} appkit-gated-price__prompt`, children: label }));
+        return (_jsx(Span, { className: `${rootClass} appkit-gated-price__prompt`, children: _jsx(GatedPriceReveal, { label: label }) }));
     }
     if (children !== undefined) {
         return _jsx(Span, { className: rootClass, children: children });

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

@@ -1,40 +1,43 @@
-/**
- * Sign-in gate for money amounts on public listing surfaces.
- *
- * The pending state must occupy the SAME vertical space as a rendered price, or
- * every card in a grid reflows once the session resolves. It is deliberately a
- * silent placeholder rather than a shimmer: the wait is short, and an animated
- * skeleton on 24 cards reads as a page that failed to load.
- */
-.appkit-gated-price__pending {
-  display: inline-block;
-  min-width: 5rem;
-  height: 1.25rem;
-  border-radius: 0.25rem;
-  background: var(--appkit-color-surface-muted);
-}
-
-.appkit-gated-price__prompt {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  line-height: 1.25rem;
-  color: var(--appkit-color-primary);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.appkit-gated-price__prompt:hover {
-  text-decoration: underline;
-}
-
-/* A lock glyph via ::before rather than an icon component: this renders inside
-   card grids, where 24 extra SVG trees per page is real weight for decoration
-   that carries no meaning the label doesn't already state. */
-.appkit-gated-price__prompt::before {
-  content: "\1F512";
-  font-size: 0.75rem;
-  line-height: 1;
-}
+/**
+ * Sign-in gate for money amounts on public listing surfaces.
+ *
+ * The pending state must occupy the SAME vertical space as a rendered price, or
+ * every card in a grid reflows once the session resolves. It is deliberately a
+ * silent placeholder rather than a shimmer: the wait is short, and an animated
+ * skeleton on 24 cards reads as a page that failed to load.
+ */
+.appkit-gated-price__pending {
+  display: inline-block;
+  min-width: 5rem;
+  height: 1.25rem;
+  border-radius: 0.25rem;
+  /* 🛑 `--appkit-color-surface-muted` is NOT a token — 15 uses, 0 definitions,
+     and `audit-undefined-css-vars` ratchets it down. An undefined custom
+     property with no fallback makes the whole declaration invalid, so this
+     placeholder had no background at all and the grid still reflowed on
+     resolve, which is the one job it has. */
+  background: var(--appkit-color-surface-input);
+}
+
+.appkit-gated-price__prompt {
+  display: inline-flex;
+  align-items: center;
+  /*
+   * The eye is a 2rem IconButton while `__pending` above is a 1.25rem price
+   * line, so a GUEST's row grows by 0.75rem once the session resolves. That is
+   * deliberate and is the lesser of the two: the alternative is making
+   * `__pending` 2rem, which shifts the row for SIGNED-IN users — the ones who
+   * end up looking at real content. The guest shift happens once per load and
+   * applies to every card identically, so the grid moves as one rather than
+   * going ragged.
+   */
+  line-height: 1.25rem;
+}
+
+/*
+ * 🛑 The eye itself has NO rules here, on purpose. It is an `<IconButton
+ * size="sm" variant="outline">`, so its box, ink, hover and focus ring all
+ * come from the design system — a second, private set of button styles for
+ * one control is exactly how a UI ends up with two kinds of icon button that
+ * drift apart. This wrapper only has to keep the row's height stable.
+ */

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

@@ -36,5 +36,16 @@ export interface HorizontalScrollerProps<T = unknown> {
     itemClassName?: string;
     /** When the scroller reaches the last item, snap instantly back to the first instead of stopping. */
     loop?: boolean;
+    /**
+     * Render a `CarouselNav` position indicator below the rail.
+     *
+     * Opt-in rather than default: this is a visible layout change and the rail is
+     * used on roughly every listing surface in the app. Pair it with
+     * `showArrows={false}` — the in-flow nav carries its own arrows, so leaving
+     * both on gives a surface two sets of controls that do the same thing.
+     */
+    showNav?: boolean;
+    /** Names the nav group. Defaults to a generic label; pass the rail's subject. */
+    navAriaLabel?: string;
 }
-export declare function HorizontalScroller<T = unknown>({ children, className, gap, snapToItems, showArrows, arrowSize, arrowStyle, showScrollbar, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows, autoScroll, autoScrollInterval, minItemWidth, pauseOnHover, itemClassName, loop, }: HorizontalScrollerProps<T>): import("react").JSX.Element;
+export declare function HorizontalScroller<T = unknown>({ children, className, gap, snapToItems, showArrows, arrowSize, arrowStyle, showScrollbar, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows, autoScroll, autoScrollInterval, minItemWidth, pauseOnHover, itemClassName, loop, showNav, navAriaLabel, }: HorizontalScrollerProps<T>): import("react").JSX.Element;