pixelize-design-library 2.4.2-beta.56 → 2.4.2-beta.57

package/dist/Components/QuantityStepper/QuantityStepperProps.d.ts

@@ -0,0 +1,24 @@
+/** sm 32px, md 40px, lg 48px high, matching the button scale; the hit area is padded to 44px. */
+export type QuantityStepperSize = "sm" | "md" | "lg";
+/** soft is a tonal fill; outline is a 1px control border on any surface. */
+export type QuantityStepperVariant = "soft" | "outline";
+/** Compact − qty + control. Display only: the number is never typed, which keeps it fast on mobile. */
+export interface QuantityStepperProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /** Lowest value; defaults to 1. At the floor the minus button is aria-disabled. */
+    min?: number;
+    /** Highest value; omit for no ceiling. At the ceiling the plus button is aria-disabled. */
+    max?: number;
+    step?: number;
+    size?: QuantityStepperSize;
+    variant?: QuantityStepperVariant;
+    /** At `min` the minus becomes a trash button that calls onRemove, for cart lines. */
+    removable?: boolean;
+    onRemove?: () => void;
+    disabled?: boolean;
+    /** Product name, so the group reads "Quantity of Slim-Fit Denim Jacket". */
+    itemLabel?: string;
+    "data-testid"?: string;
+}

package/dist/Components/QuantityStepper/QuantityStepperProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Rating/Rating.d.ts

@@ -0,0 +1,4 @@
+import type { RatingProps } from "./RatingProps";
+/** Star rating with fractional fill; becomes a radio group for "write a review" when `onValueChange` is set. */
+declare const Rating: ({ value, defaultValue, max, size, showValue, count, compactCount, locale, onValueChange, isDisabled, "aria-label": ariaLabel, "data-testid": testId, }: RatingProps) => import("react/jsx-runtime").JSX.Element;
+export default Rating;

package/dist/Components/Rating/Rating.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const price_1 = require("../../Utils/price");
+const STAR_PX = { xs: 12, sm: 14, md: 18, lg: 24 };
+const HIT_PX = { xs: 24, sm: 28, md: 44, lg: 44 };
+const TEXT_SIZE = { xs: "xs", sm: "xs", md: "sm", lg: "md" };
+const GAP_PX = { xs: 1, sm: 1, md: 2, lg: 2 };
+const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+const tenth = (n) => Math.round(n * 10) / 10;
+const StarGlyph = ({ px, fillPercent, filled, empty }) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", "aria-hidden": true, position: "relative", display: "inline-flex", boxSize: `${px}px`, flexShrink: 0, color: empty, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: px, fill: "currentColor", strokeWidth: 1.5 }), fillPercent > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "data-fill": fillPercent, position: "absolute", inset: 0, color: filled, sx: {
+                clipPath: `inset(0 ${100 - fillPercent}% 0 0)`,
+                "[dir=rtl] &": { clipPath: `inset(0 0 0 ${100 - fillPercent}%)` },
+            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: px, fill: "currentColor", strokeWidth: 1.5 }) }))] }));
+const fillOf = (index, value) => clamp(value - index, 0, 1) * 100;
+/** Star rating with fractional fill; becomes a radio group for "write a review" when `onValueChange` is set. */
+const Rating = ({ value, defaultValue = 0, max = 5, size = "sm", showValue = true, count, compactCount = false, locale = price_1.DEFAULT_LOCALE, onValueChange, isDisabled = false, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [inner, setInner] = (0, react_1.useState)(defaultValue);
+    const [hover, setHover] = (0, react_1.useState)(null);
+    const reduced = (0, motion_2.usePrefersReducedMotion)();
+    const refs = (0, react_1.useRef)([]);
+    const interactive = !!onValueChange;
+    const current = tenth(clamp(value !== null && value !== void 0 ? value : (interactive ? inner : 0), 0, max));
+    const px = STAR_PX[size];
+    const nf = new Intl.NumberFormat(locale);
+    const valueText = new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 }).format(current);
+    const countText = count === undefined
+        ? null
+        : compactCount
+            ? new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }).format(count)
+            : nf.format(count);
+    const summary = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showValue && current > 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: TEXT_SIZE[size], fontWeight: 600, color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: valueText })), countText !== null && ((0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontSize: TEXT_SIZE[size], color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: ["(", countText, ")"] }))] }));
+    if (!interactive) {
+        const label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (current === 0 && !count
+            ? "Not rated yet"
+            : `Rated ${valueText} out of ${nf.format(max)}${count ? ` from ${nf.format(count)} ${count === 1 ? "rating" : "ratings"}` : ""}`);
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", role: "img", "aria-label": label, "data-testid": testId, display: "inline-flex", align: "center", gap: 1.5, verticalAlign: "middle", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", "aria-hidden": true, gap: `${GAP_PX[size]}px`, children: Array.from({ length: max }, (_, i) => ((0, jsx_runtime_1.jsx)(StarGlyph, { px: px, fillPercent: fillOf(i, current), filled: colors.star, empty: colors.boxborder[300] }, i))) }), summary] }));
+    }
+    const select = (next) => {
+        if (isDisabled)
+            return;
+        if (value === undefined)
+            setInner(next);
+        onValueChange(next);
+    };
+    const chosen = Math.round(current);
+    const focusStop = chosen > 0 ? chosen : 1;
+    const shown = hover !== null && hover !== void 0 ? hover : chosen;
+    const onKeyDown = (e) => {
+        var _a;
+        const move = {
+            ArrowRight: chosen + 1,
+            ArrowUp: chosen + 1,
+            ArrowLeft: chosen - 1,
+            ArrowDown: chosen - 1,
+            Home: 1,
+            End: max,
+        };
+        if (!(e.key in move))
+            return;
+        e.preventDefault();
+        const next = clamp(move[e.key], 1, max);
+        select(next);
+        (_a = refs.current[next - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", display: "inline-flex", align: "center", gap: 1.5, "data-testid": testId, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", role: "radiogroup", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Rating", "aria-disabled": isDisabled || undefined, gap: `${GAP_PX[size]}px`, onMouseLeave: () => setHover(null), children: Array.from({ length: max }, (_, i) => {
+                    const n = i + 1;
+                    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", role: "radio", ref: (el) => {
+                            refs.current[i] = el;
+                        }, "aria-checked": n === chosen, "aria-label": `${n} ${n === 1 ? "star" : "stars"}`, tabIndex: n === focusStop && !isDisabled ? 0 : -1, disabled: isDisabled, onClick: () => select(n), onKeyDown: onKeyDown, onMouseEnter: () => !isDisabled && setHover(n), display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: `${HIT_PX[size]}px`, mx: `-${(HIT_PX[size] - px) / 2 - 1}px`, borderRadius: "full", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, transition: (0, motion_1.transitionFor)(["transform"]), _active: isDisabled || reduced ? undefined : { transform: "scale(0.88)" }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(StarGlyph, { px: px, fillPercent: fillOf(i, shown), filled: colors.star, empty: colors.boxborder[300] }) }, n));
+                }) }), summary] }));
+};
+exports.default = Rating;

package/dist/Components/Rating/RatingProps.d.ts

@@ -0,0 +1,27 @@
+/** Star sizes: 12, 14, 18 and 24 px glyphs. */
+export type RatingSize = "xs" | "sm" | "md" | "lg";
+/** Star rating: read-only display by default, a keyboard-operable radio group when `onValueChange` is set. */
+export interface RatingProps {
+    /** Rating from 0 to `max`, rounded to one decimal; fractions fill a star partially and 5.0 fills all five. Controls the selection in interactive mode. */
+    value?: number;
+    /** Initial selection for an interactive rating that is not controlled with `value`. */
+    defaultValue?: number;
+    /** Number of stars. */
+    max?: number;
+    size?: RatingSize;
+    /** Shows the numeric value ("4.6") after the stars. */
+    showValue?: boolean;
+    /** Number of ratings, shown in brackets after the value and read out in the accessible name. */
+    count?: number;
+    /** Abbreviates the visible count ("1.3K"); the accessible name always carries the full figure. */
+    compactCount?: boolean;
+    /** Locale for number formatting; defaults to en-IN. */
+    locale?: string;
+    /** Makes the rating interactive (radio group, arrow keys) and fires with the chosen whole-star value. */
+    onValueChange?: (value: number) => void;
+    /** Interactive mode only: stops selection and removes the stars from the tab order. */
+    isDisabled?: boolean;
+    /** Overrides the accessible name; the group name in interactive mode, the "Rated 4.6 out of 5" text otherwise. */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/Rating/RatingProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ReviewList/ReviewList.d.ts

@@ -0,0 +1,4 @@
+import type { ReviewListProps } from "./ReviewListProps";
+/** Customer reviews: stars, clamped body, verified marker, helpful vote and load-more paging, with a slot for sorting. */
+declare const ReviewList: ({ reviews, onHelpful, clampChars, sortSlot, hasMore, onLoadMore, isLoading, isLoadingMore, emptyState, locale, labels, "data-testid": testId, }: ReviewListProps) => import("react/jsx-runtime").JSX.Element;
+export default ReviewList;

package/dist/Components/ReviewList/ReviewList.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const price_1 = require("../../Utils/price");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Rating_1 = __importDefault(require("../Rating/Rating"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const DEFAULT_LABELS = {
+    verified: "Verified purchase",
+    helpful: (count) => `Helpful (${count})`,
+    readMore: "Read more",
+    readLess: "Read less",
+    loadMore: "Load more reviews",
+    loadingMore: "Loading more reviews…",
+    emptyTitle: "No reviews yet",
+    emptyBody: "Reviews from verified buyers will show up here.",
+    purchasedSize: (size) => `Size ${size}`,
+    loadingReviews: "Loading reviews",
+    moreLoaded: (count) => `${count} more ${count === 1 ? "review" : "reviews"} loaded`,
+    photoAlt: (author) => `Photo from ${author}'s review`,
+};
+const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+const tabular = { fontVariantNumeric: "tabular-nums" };
+const SKELETON_ROWS = [0, 1, 2];
+const makeFormatter = (locale) => {
+    const options = { day: "numeric", month: "short", year: "numeric" };
+    try {
+        return new Intl.DateTimeFormat(locale, options);
+    }
+    catch {
+        return new Intl.DateTimeFormat(price_1.DEFAULT_LOCALE, options);
+    }
+};
+const formatDate = (raw, fmt) => {
+    const dateOnly = DATE_ONLY.exec(raw);
+    const parsed = dateOnly ? new Date(Number(dateOnly[1]), Number(dateOnly[2]) - 1, Number(dateOnly[3])) : new Date(raw);
+    if (Number.isNaN(parsed.getTime()))
+        return { text: raw, valid: false };
+    return { text: fmt.format(parsed), valid: true };
+};
+const Dot = () => ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", "aria-hidden": true, children: "\u00B7" }));
+const ReviewRow = ({ review, index, clampChars, fmt, labels, pressed, expanded, onToggleHelpful, onToggleExpanded }) => {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const bodyId = (0, react_1.useId)();
+    const isLong = review.body.length > clampChars;
+    const date = formatDate(review.date, fmt);
+    const count = ((_a = review.helpful) !== null && _a !== void 0 ? _a : 0) + (pressed ? 1 : 0);
+    const showHelpful = review.helpful !== undefined || pressed;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "li", listStyleType: "none", "data-testid": `review-${review.id}`, children: [index > 0 && (0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": true, h: "1px", bg: colors.background[100] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2.5, py: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(Rating_1.default, { value: review.rating, size: "sm", showValue: false }), review.title && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "h3", fontSize: "md", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: review.title }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { id: bodyId, fontSize: "sm", lineHeight: 1.6, color: colors.text[700], noOfLines: isLong && !expanded ? 4 : undefined, children: review.body }), isLong && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", mt: 1, fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-expanded": expanded, "aria-controls": bodyId, onClick: () => onToggleExpanded(review.id), borderRadius: "sm", transition: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: expanded ? labels.readLess : labels.readMore }))] }), review.media && review.media.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 2, wrap: "wrap", children: review.media.map((m) => {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "72px", borderRadius: "12px", overflow: "hidden", bg: colors.background[100], flexShrink: 0, children: (0, jsx_runtime_1.jsx)("img", { src: m.src, alt: (_a = m.alt) !== null && _a !== void 0 ? _a : labels.photoAlt(review.author), loading: "lazy", style: { width: "100%", height: "100%", objectFit: "cover" } }) }, m.id));
+                        }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, wrap: "wrap", fontSize: "xs", color: colors.textMuted, sx: tabular, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: 600, color: colors.header[900], children: review.author }), review.city && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dot, {}), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: review.city })] })), (0, jsx_runtime_1.jsx)(Dot, {}), date.valid ? ((0, jsx_runtime_1.jsx)("time", { dateTime: review.date, children: date.text })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: date.text })), review.purchasedSize && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dot, {}), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: labels.purchasedSize(review.purchasedSize) })] })), review.verified && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dot, {}), (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: 1, fontWeight: 600, color: colors.semanticText.success, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BadgeCheck, { size: 14, "aria-hidden": true, focusable: "false" }), labels.verified] })] }))] }), showHelpful && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", "aria-pressed": pressed, onClick: () => onToggleHelpful(review), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsUp, { size: 14, "aria-hidden": true, fill: pressed ? "currentColor" : "none" }), sx: { color: pressed ? colors.header[900] : colors.textMuted, fontVariantNumeric: "tabular-nums" }, children: labels.helpful(count) }) }))] })] }));
+};
+const SkeletonRow = () => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", listStyleType: "none", "aria-hidden": true, py: 6, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", width: "80px", height: "14px", borderRadius: "sm" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", width: "100%", height: "12px", borderRadius: "sm" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", width: "94%", height: "12px", borderRadius: "sm" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", width: "60%", height: "12px", borderRadius: "sm" })] }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", width: "180px", height: "12px", borderRadius: "sm" })] }) }));
+/** Customer reviews: stars, clamped body, verified marker, helpful vote and load-more paging, with a slot for sorting. */
+const ReviewList = ({ reviews, onHelpful, clampChars = 220, sortSlot, hasMore = false, onLoadMore, isLoading = false, isLoadingMore = false, emptyState, locale = price_1.DEFAULT_LOCALE, labels, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const fmt = (0, react_1.useMemo)(() => makeFormatter(locale), [locale]);
+    const [pressed, setPressed] = (0, react_1.useState)({});
+    const [expanded, setExpanded] = (0, react_1.useState)({});
+    const [announcement, setAnnouncement] = (0, react_1.useState)("");
+    const previousCount = (0, react_1.useRef)(reviews.length);
+    const moreLoaded = copy.moreLoaded;
+    (0, react_1.useEffect)(() => {
+        const added = reviews.length - previousCount.current;
+        const hadReviews = previousCount.current > 0;
+        previousCount.current = reviews.length;
+        setAnnouncement(!isLoading && hadReviews && added > 0 ? moreLoaded(added) : "");
+    }, [reviews.length, isLoading, moreLoaded]);
+    const toggleHelpful = (review) => {
+        const next = !pressed[review.id];
+        setPressed((prev) => ({ ...prev, [review.id]: next }));
+        if (next)
+            onHelpful === null || onHelpful === void 0 ? void 0 : onHelpful(review.id);
+    };
+    const toggleExpanded = (id) => setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
+    const isEmpty = !isLoading && reviews.length === 0;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "section", "data-testid": testId, children: [sortSlot && ((0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "flex-end", mb: 4, children: sortSlot })), isEmpty ? ((emptyState !== null && emptyState !== void 0 ? emptyState : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 1, py: 12, textAlign: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: copy.emptyTitle }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.textMuted, children: copy.emptyBody })] })))) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "ul", m: 0, p: 0, "aria-busy": isLoading || undefined, children: isLoading
+                    ? SKELETON_ROWS.map((n) => (0, jsx_runtime_1.jsx)(SkeletonRow, {}, n))
+                    : reviews.map((review, index) => ((0, jsx_runtime_1.jsx)(ReviewRow, { review: review, index: index, clampChars: clampChars, fmt: fmt, labels: copy, pressed: !!pressed[review.id], expanded: !!expanded[review.id], onToggleHelpful: toggleHelpful, onToggleExpanded: toggleExpanded }, review.id))) })), hasMore && !isLoading && !isEmpty && ((0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", mt: 4, children: (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", size: "md", onClick: onLoadMore, isDisabled: isLoadingMore, "aria-busy": isLoadingMore || undefined, children: isLoadingMore ? copy.loadingMore : copy.loadMore }) })), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", children: isLoading ? copy.loadingReviews : announcement })] }));
+};
+exports.default = ReviewList;

package/dist/Components/ReviewList/ReviewListProps.d.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+/** A photo attached to a review. */
+export interface ReviewMedia {
+    id: string;
+    src: string;
+    alt?: string;
+}
+/** One customer review. */
+export interface ReviewItem {
+    id: string;
+    author: string;
+    city?: string;
+    /** Whole stars, 1 to 5. */
+    rating: number;
+    /** ISO date such as "2026-09-21"; formatted per `locale`, and shown as given when it is not a valid date. */
+    date: string;
+    title?: string;
+    body: string;
+    /** Adds the "Verified purchase" marker. */
+    verified?: boolean;
+    /** Helpful votes so far. */
+    helpful?: number;
+    /** Variant the reviewer bought, e.g. "M". */
+    purchasedSize?: string;
+    media?: ReviewMedia[];
+}
+/** Every string the list renders; override all of them for another language. */
+export interface ReviewListLabels {
+    verified: string;
+    /** Button name, given the vote count. */
+    helpful: (count: number) => string;
+    readMore: string;
+    readLess: string;
+    loadMore: string;
+    loadingMore: string;
+    emptyTitle: string;
+    emptyBody: string;
+    /** Detail line, given the size the reviewer bought. */
+    purchasedSize: (size: string) => string;
+    /** Screen-reader text while skeleton rows show. */
+    loadingReviews?: string;
+    /** Polite announcement when a page is appended, given how many reviews arrived. */
+    moreLoaded?: (count: number) => string;
+    /** Fallback alt text for a photo without one, given the reviewer's name. */
+    photoAlt?: (author: string) => string;
+}
+/** Customer reviews with verified marker, helpful votes, clamped long bodies, a sort slot and load-more paging. */
+export interface ReviewListProps {
+    reviews: ReviewItem[];
+    /** Fires with the review id when "Helpful" is pressed; the button then shows as pressed and the count rises by one. */
+    onHelpful?: (reviewId: string) => void;
+    /** Bodies longer than this many characters are clamped to four lines behind a "Read more" toggle. */
+    clampChars?: number;
+    /** Rendered above the list, typically a `Select` for sorting. */
+    sortSlot?: ReactNode;
+    /** Shows the "Load more" button. */
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    /** Shows skeleton rows in place of the reviews. */
+    isLoading?: boolean;
+    /** Disables "Load more" and shows `labels.loadingMore` while the next page loads. */
+    isLoadingMore?: boolean;
+    /** Replaces the default empty state. */
+    emptyState?: ReactNode;
+    locale?: string;
+    labels?: Partial<ReviewListLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/ReviewList/ReviewListProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ReviewSummary/ReviewSummary.d.ts

@@ -0,0 +1,4 @@
+import type { ReviewSummaryProps } from "./ReviewSummaryProps";
+/** Average rating, count and a five-row distribution; scales down to a thin summary or an invitation when there is little or no evidence. */
+declare const ReviewSummary: ({ rating, count, breakdown, minRatingsForBars, onWriteReview, id, locale, labels, "data-testid": testId, }: ReviewSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export default ReviewSummary;

package/dist/Components/ReviewSummary/ReviewSummary.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const price_1 = require("../../Utils/price");
+const Rating_1 = __importDefault(require("../Rating/Rating"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const STARS = [5, 4, 3, 2, 1];
+const DEFAULT_MIN_RATINGS_FOR_BARS = 10;
+const tabular = { fontVariantNumeric: "tabular-nums" };
+const defaultLabels = (locale) => ({
+    heading: "Ratings & reviews",
+    writeReview: "Write a review",
+    ratings: (count) => `${new Intl.NumberFormat(locale).format(count)} ${count === 1 ? "rating" : "ratings"}`,
+    emptyTitle: "No reviews yet",
+    emptyBody: "Bought this? Be the first to say how it fits.",
+    bar: (stars, percent) => `${stars} ${stars === 1 ? "star" : "stars"}, ${percent}%`,
+});
+const percentages = (breakdown) => {
+    const total = STARS.reduce((sum, stars) => sum + breakdown[stars], 0);
+    return (stars) => (total > 0 ? Math.round((breakdown[stars] / total) * 100) : 0);
+};
+/** Average rating, count and a five-row distribution; scales down to a thin summary or an invitation when there is little or no evidence. */
+const ReviewSummary = ({ rating, count, breakdown, minRatingsForBars = DEFAULT_MIN_RATINGS_FOR_BARS, onWriteReview, id, locale = price_1.DEFAULT_LOCALE, labels, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const copy = { ...defaultLabels(locale), ...labels };
+    const empty = count <= 0 || rating <= 0;
+    const showBars = !empty && !!breakdown && count >= minRatingsForBars;
+    const average = Math.min(5, Math.max(0, rating));
+    const averageText = new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 }).format(average);
+    const nf = new Intl.NumberFormat(locale);
+    const writeButton = onWriteReview ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", onClick: onWriteReview, children: copy.writeReview })) : null;
+    const distribution = (counts) => {
+        const percentOf = percentages(counts);
+        return ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, flex: "1", minW: 0, maxW: "26rem", w: "100%", children: STARS.map((stars) => {
+                const percent = percentOf(stars);
+                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "grid", gridTemplateColumns: "2.25rem minmax(0, 1fr) 3.5rem", alignItems: "center", columnGap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, align: "center", gap: 1, fontSize: "sm", color: colors.text[800], sx: tabular, children: [(0, jsx_runtime_1.jsx)("span", { children: stars }), (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 12, fill: "currentColor", strokeWidth: 1.5 })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { role: "meter", "aria-label": copy.bar(stars, percent), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, h: "0.5rem", borderRadius: "full", bg: colors.background[200], overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_1.Box, { h: "100%", w: `${percent}%`, borderRadius: "full", bg: colors.star }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { "aria-hidden": true, fontSize: "sm", textAlign: "right", color: colors.textMuted, sx: tabular, children: nf.format(counts[stars]) })] }, stars));
+            }) }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "section", "aria-labelledby": id, "data-testid": testId, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "h2", id: id, fontSize: "lg", fontWeight: 700, lineHeight: 1.3, color: colors.header[900], children: copy.heading }), empty ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "flex-start", gap: 1, mt: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: copy.emptyTitle }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: colors.textMuted, children: copy.emptyBody }), writeButton ? (0, jsx_runtime_1.jsx)(react_1.Box, { mt: 3, children: writeButton }) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: { base: "column", sm: "row" }, align: { base: "flex-start", sm: "center" }, gap: { base: 5, sm: 10 }, mt: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "flex-start", gap: 1.5, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "3rem", lineHeight: 1, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: tabular, children: averageText }), (0, jsx_runtime_1.jsx)(Rating_1.default, { value: average, size: "md", showValue: false }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: colors.textMuted, sx: tabular, children: copy.ratings(count) })] }), showBars && breakdown ? distribution(breakdown) : null] }), writeButton ? (0, jsx_runtime_1.jsx)(react_1.Box, { mt: 5, children: writeButton }) : null] }))] }));
+};
+exports.default = ReviewSummary;

package/dist/Components/ReviewSummary/ReviewSummaryProps.d.ts

@@ -0,0 +1,31 @@
+/** Ratings per star count, 1 to 5. */
+export type RatingBreakdown = Record<1 | 2 | 3 | 4 | 5, number>;
+/** Every string the summary renders; override all of them for another language. */
+export interface ReviewSummaryLabels {
+    heading: string;
+    writeReview: string;
+    /** Count line, given the total number of ratings. */
+    ratings: (count: number) => string;
+    emptyTitle: string;
+    emptyBody: string;
+    /** Accessible name of one bar, given the star level and the share as a whole percentage. */
+    bar: (stars: number, percent: number) => string;
+}
+/** Average rating, count and a five-row distribution; scales down to an invitation when there are no ratings. */
+export interface ReviewSummaryProps {
+    /** Average rating from 0 to 5. */
+    rating: number;
+    /** Total number of ratings. */
+    count: number;
+    /** Counts per star; the bars show each row's share of their sum. */
+    breakdown?: RatingBreakdown;
+    /** The distribution only appears at or above this many ratings, because bars on a handful of ratings mislead. */
+    minRatingsForBars?: number;
+    /** Shows a "Write a review" button when provided. */
+    onWriteReview?: () => void;
+    /** Heading element id, so a "4.6 (412)" link elsewhere can scroll here and a region can be labelled by it. */
+    id?: string;
+    locale?: string;
+    labels?: Partial<ReviewSummaryLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/ReviewSummary/ReviewSummaryProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/SegmentedControl/SegmentedControl.d.ts

@@ -1,3 +1,3 @@
 import { SegmentedControlProps } from "./SegmentedControlProps";
 /** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
-export default function SegmentedControl<T extends string = string>({ options, value, onChange, size, isFullWidth, variant, surface, "aria-label": ariaLabel, }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function SegmentedControl<T extends string = string>({ options, value, onChange, size, isFullWidth, variant, orientation, surface, "aria-label": ariaLabel, }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/Components/SegmentedControl/SegmentedControl.js

@@ -25,16 +25,20 @@ const MAX_COUNT = 99;
 const COUNT_TAG_SIZE = { sm: "xs", md: "sm", lg: "md" };
 const formatCount = (count) => (count > MAX_COUNT ? `${MAX_COUNT}+` : `${count}`);
 /** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
-function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", surface, "aria-label": ariaLabel, }) {
+function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", orientation = "horizontal", surface, "aria-label": ariaLabel, }) {
+    var _a;
     const { colors, radii } = (0, useCustomTheme_1.useCustomTheme)();
     const control = controlSizes_1.BUTTON_SIZES[size];
     const isBrandSlide = variant === "brandSlide";
     const isUnderlineSlide = variant === "underlineSlide";
     const hasIndicator = isBrandSlide || isUnderlineSlide;
+    const isVertical = orientation === "vertical";
+    // Below "md" a shortLabel (when the option has one) replaces the full label; the full label stays the accessible name.
+    const isCompact = (_a = (0, react_2.useBreakpointValue)({ base: true, md: false }, { ssr: false })) !== null && _a !== void 0 ? _a : false;
     const brandFill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
     const trackSurface = (0, segmentedInk_1.segmentedTrackSurface)(variant, colors, surface);
     const restInk = (0, segmentedInk_1.segmentedRestInk)(colors, trackSurface);
-    const selectedInk = (0, outlineRung_1.liftToContrast)(colors.accentText, trackSurface, accentText_1.AA_NORMAL_TEXT);
+    const selectedInk = (0, outlineRung_1.liftToContrast)(colors.accentText, (0, segmentedInk_1.segmentedSelectedSurface)(variant, colors, trackSurface), accentText_1.AA_NORMAL_TEXT);
     const hoverInk = (0, outlineRung_1.liftToContrast)(colors.text[900], trackSurface, accentText_1.AA_NORMAL_TEXT);
     const segmentH = `calc(${control.height} - ${isUnderlineSlide ? UNDERLINE_WIDTH : `2 * ${TRACK_PADDING}`})`;
     // Concentric: an inset child keeping the parent's radius bulges at the corners.
@@ -60,6 +64,8 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
         options,
         isFullWidth,
         size,
+        orientation,
+        isCompact,
     ]);
     const selectAt = (index) => {
         var _a;
@@ -90,11 +96,17 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
             selectAt(enabled[enabled.length - 1]);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: TRACK_PADDING, left: 0, h: segmentH, w: `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), options.map((option, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, "aria-orientation": isVertical ? "vertical" : undefined, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", flexDirection: isVertical ? "column" : "row", align: isVertical ? "stretch" : "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: isVertical ? "fit-content" : control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide && !isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, borderLeft: isUnderlineSlide && isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: isVertical ? 0 : TRACK_PADDING, left: isVertical ? TRACK_PADDING : 0, right: isVertical ? TRACK_PADDING : undefined, h: segmentH, w: isVertical ? undefined : `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: isVertical ? undefined : "-0.0625rem", left: isVertical ? "-0.0625rem" : 0, top: isVertical ? 0 : undefined, h: isVertical ? segmentH : "0.125rem", w: isVertical ? "0.125rem" : `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), options.map((option, index) => {
                 const isSelected = option.value === value;
+                const showShortLabel = isCompact && !!option.shortLabel;
+                const displayLabel = showShortLabel ? option.shortLabel : option.label;
+                // Swapping to shortLabel must not shrink the accessible name — restate the full label (+ count) explicitly.
+                const compactAriaLabel = showShortLabel
+                    ? `${option.label}${option.count != null ? ` ${formatCount(option.count)}` : ""}`
+                    : undefined;
                 return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (node) => {
                         refs.current[index] = node;
-                    }, role: "radio", "aria-checked": isSelected, disabled: option.isDisabled, tabIndex: index === tabIndex ? 0 : -1, onClick: () => onChange(option.value), position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flex: isFullWidth ? "1" : undefined, h: segmentH, px: control.paddingX, borderRadius: innerRadius, borderWidth: "1px", borderStyle: "solid", borderColor: hasIndicator
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": compactAriaLabel, disabled: option.isDisabled, tabIndex: index === tabIndex ? 0 : -1, onClick: () => onChange(option.value), position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: isVertical ? "flex-start" : "center", gap: "0.375rem", flex: isFullWidth ? "1" : undefined, h: segmentH, px: control.paddingX, borderRadius: innerRadius, borderWidth: "1px", borderStyle: "solid", borderColor: hasIndicator
                         ? "transparent"
                         : isSelected
                             ? colors.primary.opacity[32]
@@ -108,6 +120,6 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
                         _focusVisible: segmentFocus,
                         [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: segmentFocus,
                         ...(0, motion_2.reducedMotionSx)(),
-                    }, children: [option.icon, option.label, option.count != null && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
+                    }, children: [option.icon, displayLabel, option.count != null && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
             })] }));
 }

package/dist/Components/SegmentedControl/SegmentedControlProps.d.ts

@@ -3,10 +3,14 @@ import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
 export type SegmentedControlSize = Exclude<ControlSize, "xs">;
 /** brandSlide = primary view switcher; underlineSlide = dense toolbar; default = plain buttons. */
 export type SegmentedControlVariant = "default" | "brandSlide" | "underlineSlide";
+/** Stacking axis of the track; vertical keeps each segment's own height and lets the track's width follow its widest option. Defaults to "horizontal". */
+export type SegmentedControlOrientation = "horizontal" | "vertical";
 /** One selectable segment; disabled options are skipped by keyboard nav (arrows/Home/End). */
 export type SegmentedControlOption<T extends string = string> = {
     value: T;
     label: string;
+    /** Shown instead of label below the "md" breakpoint, when set; the full label stays the segment's accessible name. */
+    shortLabel?: string;
     /** Rendered before the label. */
     icon?: JSX.Element;
     isDisabled?: boolean;
@@ -27,6 +31,8 @@ export type SegmentedControlProps<T extends string = string> = {
     isFullWidth?: boolean;
     /** brandSlide = primary view switcher; underlineSlide = dense toolbars/headers. */
     variant?: SegmentedControlVariant;
+    /** Stacks segments top-to-bottom instead of side-by-side. Defaults to "horizontal"; fully opt-in. */
+    orientation?: SegmentedControlOrientation;
     /** Background this sits on. Optional: the track is opaque on any backdrop; pass it only to aim the plate's hairline edge at the real backdrop. */
     surface?: string;
     "aria-label": string;

package/dist/Components/SegmentedControl/segmentedInk.d.ts

@@ -2,6 +2,8 @@ import type { PaletteProps } from "../../Theme/tokens/types";
 import type { SegmentedControlVariant } from "./SegmentedControlProps";
 /** The surface a segment's label really sits on. */
 export declare const segmentedTrackSurface: (variant: SegmentedControlVariant, colors: PaletteProps, surface?: string) => string;
+/** The surface the selected label sits on: the default variant lifts it onto its own plate. */
+export declare const segmentedSelectedSurface: (variant: SegmentedControlVariant, colors: PaletteProps, trackSurface: string) => string;
 /** Unselected label ink, lifted to AA against the track it is drawn on. */
 export declare const segmentedRestInk: (colors: PaletteProps, trackSurface: string) => string;
 /** A radiogroup is one tab stop, so the group wears the ring: a brand hairline plus the field bloom. */

package/dist/Components/SegmentedControl/segmentedInk.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.segmentedPlateEdge = exports.segmentedFocusShadow = exports.segmentedRestInk = exports.segmentedTrackSurface = void 0;
+exports.segmentedPlateEdge = exports.segmentedFocusShadow = exports.segmentedRestInk = exports.segmentedSelectedSurface = exports.segmentedTrackSurface = void 0;
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
@@ -15,6 +15,9 @@ const segmentedTrackSurface = (variant, colors, surface) => {
     return colors.background[600];
 };
 exports.segmentedTrackSurface = segmentedTrackSurface;
+/** The surface the selected label sits on: the default variant lifts it onto its own plate. */
+const segmentedSelectedSurface = (variant, colors, trackSurface) => (variant === "default" ? colors.backgroundColor.light : trackSurface);
+exports.segmentedSelectedSurface = segmentedSelectedSurface;
 /** Unselected label ink, lifted to AA against the track it is drawn on. */
 const segmentedRestInk = (colors, trackSurface) => (0, outlineRung_1.liftToContrast)(colors.text[600], trackSurface, accentText_1.AA_NORMAL_TEXT);
 exports.segmentedRestInk = segmentedRestInk;

package/dist/Components/SegmentedControl/useSlidingPill.d.ts

@@ -1,7 +1,9 @@
 import { type DependencyList } from "react";
 export type SlidingPillRect = {
     left: number;
+    top: number;
     width: number;
+    height: number;
 } | null;
 /** Measures the selected item's DOM rect for a sliding pill/underline; shared by SegmentedControl and TableToggle. */
 export declare function useSlidingPill(enabled: boolean, selectedIndex: number, extraDeps: DependencyList): {

package/dist/Components/SegmentedControl/useSlidingPill.js

@@ -18,7 +18,12 @@ function useSlidingPill(enabled, selectedIndex, extraDeps) {
         }
         const trackRect = track.getBoundingClientRect();
         const nodeRect = node.getBoundingClientRect();
-        setPill({ left: nodeRect.left - trackRect.left, width: nodeRect.width });
+        setPill({
+            left: nodeRect.left - trackRect.left,
+            top: nodeRect.top - trackRect.top,
+            width: nodeRect.width,
+            height: nodeRect.height,
+        });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [enabled, selectedIndex, ...extraDeps]);
     return { trackRef, itemRefs, pill };