@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.33

package/dist/components/core/Modal/Modal.theme.js

@@ -6,7 +6,7 @@ const modalTheme = {
     container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden ring-6 !ring-white/10 border border-[var(--color-border)]",
     header: "flex items-start justify-between px-[var(--modal-px)] pt-[var(--modal-py)] pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
-    title: "text-[length:var(--modal-title-size)] leading-6 font-semibold text-[var(--color-text-primary)]",
+    title: "text-[length:var(--modal-title-size)]/[var(--modal-title-line-height)] font-semibold text-[var(--color-text-primary)]",
     subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
     // pb-[...*0.75] is the gap before the footer — proportional to --modal-py
     // (today's ratio, 12/16) so a themed --modal-py increase widens it too.

package/dist/components/core/Modal/ModalHeader.js

@@ -3,7 +3,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './ModalContext.js';
 import { Button } from '../Button/Button.js';
-import 'react';
 import { X } from '@phosphor-icons/react';
 
 const ModalHeader = ({ children, icon, showCloseButton, className, ...props }) => {

package/dist/components/core/ModalStack/ModalStackModal.js

@@ -47,7 +47,9 @@ const ModalStackModal = ({ size = "md", showCloseButton = true, showBackButton =
         titleId,
         subtitleId,
     }), [closeHandler, size, isSizeToken, showCloseButton, theme, isBodyScrollable, setIsBodyScrollable, titleId, subtitleId]);
-    return (jsx(ModalContext.Provider, { value: contextValue, children: jsx("div", { className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.container, modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": subtitleId, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Link, { onClick: backHandler, "aria-label": "Go back", size: "sm", children: [jsx(ArrowLeft, { className: "size-4" }), "Back"] }) })), children] }) }) }));
+    return (jsx(ModalContext.Provider, { value: contextValue, children: jsx("div", { className: cn(
+            // Opaque — same reason as Modal: behind the shared scrim, no blur on the panel.
+            surfaceClasses(surfaceLevel, { translucent: false, shadow: false }), theme.container, modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": subtitleId, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Link, { onClick: backHandler, "aria-label": "Go back", size: "sm", children: [jsx(ArrowLeft, { className: "size-4" }), "Back"] }) })), children] }) }) }));
 };
 ModalStackModal.displayName = "ModalStack.Modal";
 

package/dist/components/core/NavItem/NavItem.js

@@ -15,6 +15,7 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
 import { Badge } from '../Badge/Badge.js';
 import { CaretDown } from '@phosphor-icons/react';
+import { Ripple } from '../shared/Ripple.js';
 import { AnimatePresence, motion } from 'motion/react';
 
 const NavItem = React__default.forwardRef(({ children, startContent, endContent, notification, description, shortcut, href, onClick, active = false, isDisabled = false, hasSubmenu: propHasSubmenu = false, expanded: controlledExpanded, onToggleExpanded, items, defaultExpanded = false, level = 0, showTooltipWhenCollapsed = true, className, theme: customTheme = {}, ...props }, ref) => {
@@ -186,7 +187,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
     const iconClasses = cn(theme.icon, getIconStateClasses(), hasSubmenu && isExpanded && !isActive && "opacity-100", isCollapsedView && ((_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.icon), isHoveredOrDropdownOpen && "opacity-100");
     const textClasses = cn(theme.text);
     // Chevron for submenu
-    const chevron = hasSubmenu && !isCollapsedView ? (jsx(CaretDown, { weight: "bold", className: cn("size-4 transition-transform duration-200 text-[var(--color-text-muted)]", isExpanded && "text-[var(--color-text-primary)]", isExpanded && "rotate-180") })) : null;
+    const chevron = hasSubmenu && !isCollapsedView ? (jsx(CaretDown, { weight: "bold", className: cn("size-4 transition-transform duration-[var(--motion-duration-base)] text-[var(--color-text-muted)]", isExpanded && "text-[var(--color-text-primary)]", isExpanded && "rotate-180") })) : null;
     // Strip drag/animation DOM handlers that collide with motion's prop types.
     // `onSubmit`/`onSubmitCapture` are stripped too: NavItem renders as either
     // `motion.a` or `motion.button`, but `NavItemProps extends HTMLAttributes<HTMLElement>`
@@ -230,7 +231,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
                         ? ` (${notification} unread)`
                         : notification === true
                             ? " (unread)"
-                            : null] }))] }));
+                            : null] })), jsx(Ripple, { disabled: isDisabled })] }));
     // Content component
     const content = href && !hasSubmenu ? (jsx(motion.a, { ref: ref, href: isDisabled ? undefined : href, tabIndex: isDisabled ? -1 : undefined, ...interactionProps, children: innerContent })) : (jsx(motion.button, { ref: ref, type: "button", disabled: isDisabled, ...interactionProps, children: innerContent }));
     // Self-contained submenu

package/dist/components/core/NavItem/NavItem.theme.js

@@ -1,5 +1,5 @@
 const navItemTheme = {
-    baseStyle: "group relative flex items-center gap-3 px-2.5 py-2 text-sm font-medium cursor-pointer select-none w-full rounded-[var(--nav-item-radius)] outline-none overflow-hidden transition-[padding,gap,height,background-color,border-color,color,box-shadow] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] text-left",
+    baseStyle: "group relative flex items-center gap-3 px-2.5 py-2 text-sm font-medium cursor-pointer select-none w-full rounded-[var(--nav-item-radius)] outline-none overflow-hidden transition-[padding,gap,height,background-color,border-color,color,box-shadow] duration-[var(--motion-duration-base)] ease-[cubic-bezier(0.4,0,0.2,1)] text-left",
     icon: "size-5",
     text: "flex-1 min-w-0 truncate",
     // State styling resolved in JS to plain utility classes so `className` overrides win

package/dist/components/core/OfflineIndicator/OfflineIndicator.theme.js

@@ -1,5 +1,5 @@
 const offlineIndicatorTheme = {
-    base: "fixed z-50 flex items-center gap-1.5 transition-colors duration-300 select-none",
+    base: "fixed z-50 flex items-center gap-1.5 transition-colors duration-[var(--motion-duration-slow)] select-none",
     positions: {
         top: "top-4 left-1/2 -translate-x-1/2",
         bottom: "bottom-4 left-1/2 -translate-x-1/2",
@@ -34,7 +34,9 @@ const offlineIndicatorTheme = {
     // (near-black in light, near-white in dark) — a fixed Link color can't.
     action: "text-xs font-semibold text-inherit",
     icon: "size-3.5 flex-shrink-0",
-    message: "text-xs font-medium -tracking-[0.025em]",
+    // tracking-tight IS -0.025em — byte-identical to the arbitrary value it
+    // replaces, but routed through --tracking-tight so a theme can retune it.
+    message: "text-xs font-medium tracking-tight",
     queueCount: "text-xs opacity-80 ml-1",
 };
 

package/dist/components/core/PageHeading/PageHeading.theme.js

@@ -1,7 +1,7 @@
 const pageHeadingTheme = {
     baseStyle: "flex flex-col pb-6 mb-6",
     headerStyle: "flex flex-col items-start sm:flex-row sm:items-center gap-4",
-    titleStyle: "text-[length:var(--page-heading-title-size)] leading-[1.4] font-bold text-[var(--color-text-primary)]",
+    titleStyle: "text-[length:var(--page-heading-title-size)]/[var(--page-heading-title-line-height)] font-bold text-[var(--color-text-primary)]",
     subtitleStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
     actionsStyle: "sm:ml-auto flex items-center gap-2 shrink-0",
     iconStyle: "flex items-center justify-center shrink-0 text-[var(--color-text-muted)]",

package/dist/components/core/Pagination/Pagination.theme.js

@@ -7,7 +7,7 @@ const paginationTheme = {
     // Unified item styles for all pagination elements (pages, navigation, etc.)
     // Light mode: white background, muted text, neutral borders
     // Dark mode: neutral-800 background, lighter text, neutral-600 borders
-    itemStyle: "inline-flex items-center justify-center font-medium rounded-[var(--form-radius)] transition-all duration-200 ease-in-out " +
+    itemStyle: "inline-flex items-center justify-center font-medium rounded-[var(--form-radius)] transition-all duration-[var(--motion-duration-base)] ease-in-out " +
         // Focus styles
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 dark:focus-visible:ring-offset-[var(--color-mono-900)] " +
         // Base state - light
@@ -15,7 +15,7 @@ const paginationTheme = {
         // Base state - dark
         "dark:bg-transparent dark:text-[var(--color-text-secondary)] dark:border-transparent " +
         // Hover state - light
-        "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-border)] " +
+        "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface)] hover:border-[var(--color-border)] " +
         // Hover state - dark
         "dark:hover:bg-[var(--color-surface-hover)] dark:hover:text-[var(--color-text-primary)] dark:hover:border-[var(--color-border)]/0 " +
         // Active state - light

package/dist/components/core/Pill/Pill.js

@@ -4,7 +4,9 @@ import React__default, { useState, useEffect, useCallback } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { pillTheme } from './Pill.theme.js';
 import { createPressVariants } from '../shared/interaction.animations.js';
+import { Ripple } from '../shared/Ripple.js';
 import { cn } from '../../../utils/cn.js';
+import { composeEventHandlers } from '../../../utils/composeEventHandlers.js';
 
 // Shared press physics + subtle hover lift (module-level constant)
 const PILL_PRESS_VARIANTS = createPressVariants(0.97, 1.02);
@@ -45,19 +47,21 @@ const PILL_PRESS_VARIANTS = createPressVariants(0.97, 1.02);
  */
 const Pill = React__default.forwardRef((props, ref) => {
     var _a, _b;
-    const { children, size = "md", iconStart, selected = false, onSelect, readOnly = false, className, theme = {}, onClick, ...restProps } = props;
+    const { children, size = "md", iconStart, selected, defaultSelected = false, onSelect, readOnly = false, className, theme = {}, onClick, onKeyDown, ...restProps } = props;
     // Detect whether the consumer *explicitly* passed `selected` (even
-    // `selected={undefined}` counts as not-passed) — checking the raw props
-    // object, BEFORE the `selected = false` default above is applied, so a
-    // plain `<Pill>` with no `selected` prop at all never trips the
-    // dev-warning below just because the destructured default made it look
-    // "set".
-    const hasExplicitSelected = "selected" in props && props.selected !== undefined;
+    // `selected={undefined}` counts as not-passed), so a plain `<Pill>` with no
+    // `selected` prop never trips the dev-warning below.
+    const hasExplicitSelected = selected !== undefined;
+    const hasExplicitDefaultSelected = "defaultSelected" in props && props.defaultSelected !== undefined;
     // ========== State Management ==========
-    const [isSelected, setIsSelected] = useState(selected);
-    useEffect(() => {
-        setIsSelected(selected);
-    }, [selected]);
+    // 🔴 §9: mode is DERIVED per render, never stored. `selected` used to be
+    // mirrored into state and re-synced from a `useEffect(…, [selected])`. A
+    // single-choice group that rejects a deselect leaves the prop identical, so
+    // the effect never fired and the chip reported `aria-pressed="false"` while
+    // still being the option in force — the control lying about its own state.
+    const isControlled = hasExplicitSelected;
+    const [uncontrolledSelected, setUncontrolledSelected] = useState(defaultSelected);
+    const isSelected = isControlled ? selected : uncontrolledSelected;
     const shouldReduceMotion = useReducedMotion();
     // ========== Derived State ==========
     const isSelectable = Boolean(onSelect);
@@ -70,8 +74,12 @@ const Pill = React__default.forwardRef((props, ref) => {
                 // eslint-disable-next-line no-console
                 console.warn('[Pill] Component has "selected" prop but missing "onSelect" handler. The pill will not be interactive.');
             }
+            if (hasExplicitSelected && hasExplicitDefaultSelected) {
+                // eslint-disable-next-line no-console
+                console.warn("[Pill] Received both `selected` and `defaultSelected`. `selected` wins and the pill is controlled; drop `defaultSelected`.");
+            }
         }
-    }, [hasExplicitSelected, onSelect]);
+    }, [hasExplicitSelected, hasExplicitDefaultSelected, onSelect]);
     // ========== Event Handlers ==========
     const handleClick = useCallback((e) => {
         if (readOnly) {
@@ -80,21 +88,29 @@ const Pill = React__default.forwardRef((props, ref) => {
         }
         if (onSelect) {
             const newSelected = !isSelected;
-            setIsSelected(newSelected);
+            // Controlled: the parent owns the value — it may accept, reject or
+            // normalize this. Writing a local copy is what desynced the chip.
+            if (!isControlled)
+                setUncontrolledSelected(newSelected);
             onSelect(newSelected);
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    }, [readOnly, onSelect, isSelected, onClick]);
+    }, [readOnly, onSelect, isSelected, isControlled, onClick]);
     const handleKeyDown = useCallback((e) => {
         if (readOnly || !isSelectable)
             return;
         if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
             const newSelected = !isSelected;
-            setIsSelected(newSelected);
+            if (!isControlled)
+                setUncontrolledSelected(newSelected);
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(newSelected);
         }
-    }, [readOnly, isSelectable, isSelected, onSelect]);
+    }, [readOnly, isSelectable, isSelected, isControlled, onSelect]);
+    // 🔴 §9: `{...restProps}` spreads AFTER this element's own attributes, so a
+    // consumer's onKeyDown used to REPLACE ours and silently kill Enter/Space
+    // selection. Compose instead — ours first, then theirs.
+    const composedKeyDown = composeEventHandlers(handleKeyDown, onKeyDown);
     // ========== Theme Merging ==========
     const mergedTheme = {
         baseStyle: theme.baseStyle || pillTheme.baseStyle,
@@ -118,11 +134,11 @@ const Pill = React__default.forwardRef((props, ref) => {
         isSelected && mergedTheme.selectedStyle, 
         // Cursor styling
         isInteractive ? "cursor-pointer" : "cursor-default", className // User overrides (highest priority)
-        ), onClick: handleClick, onKeyDown: handleKeyDown, "data-size": size, "data-selected": isSelected ? "true" : "false", "data-readonly": !isInteractive ? "true" : "false", "data-selectable": isSelectable ? "true" : "false", 
+        ), onClick: handleClick, onKeyDown: composedKeyDown, "data-size": size, "data-selected": isSelected ? "true" : "false", "data-readonly": !isInteractive ? "true" : "false", "data-selectable": isSelectable ? "true" : "false", 
         // Accessibility
         role: isSelectable && !readOnly ? "button" : undefined, tabIndex: isInteractive ? 0 : undefined, "aria-pressed": isSelectable && !readOnly ? isSelected : undefined, "aria-readonly": readOnly || undefined, 
         // Animation
-        variants: PILL_PRESS_VARIANTS, animate: "rest", whileHover: isInteractive && !shouldReduceMotion ? "hover" : undefined, whileTap: isInteractive && !shouldReduceMotion ? "press" : undefined, ...restProps, children: [renderStartIcon(), children] }));
+        variants: PILL_PRESS_VARIANTS, animate: "rest", whileHover: isInteractive && !shouldReduceMotion ? "hover" : undefined, whileTap: isInteractive && !shouldReduceMotion ? "press" : undefined, ...restProps, children: [renderStartIcon(), children, isInteractive && jsx(Ripple, {})] }));
 });
 Pill.displayName = "Pill";
 

package/dist/components/core/Pill/Pill.theme.js

@@ -8,8 +8,10 @@ const pillTheme = {
     /**
      * Base pill style - structure and default colors (no hover)
      */
-    baseStyle: "inline-flex items-center justify-center font-medium rounded-full select-none whitespace-nowrap " +
-        "ring-1 bg-[var(--color-surface)] transition-[color,background-color,box-shadow] duration-150 ease-out " +
+    baseStyle: 
+    // `relative` positions the press <Ripple /> layer (selectable pills only).
+    "relative inline-flex items-center justify-center font-medium rounded-full select-none whitespace-nowrap " +
+        "ring-1 bg-[var(--color-surface)] transition-[color,background-color,box-shadow] duration-[var(--motion-duration-fast)] ease-out " +
         "text-[var(--color-text-primary)] ring-[var(--color-border)] " +
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     /**

package/dist/components/core/Pill/Pill.types.d.ts

@@ -30,8 +30,21 @@ export interface PillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
      * Note: Replaced by CheckIcon when pill is selected
      */
     iconStart?: React.ReactNode;
-    /** Whether the pill is selected (controlled state) */
+    /**
+     * Whether the pill is selected — CONTROLLED. Passing it makes the prop
+     * authoritative: the pill renders from it on every render and keeps no copy,
+     * so a parent that rejects or normalizes a change (a single-choice group
+     * refusing to deselect the active option) stays truthfully reflected.
+     *
+     * Mutually exclusive with `defaultSelected` (dev-warns if both are passed).
+     */
     selected?: boolean;
+    /**
+     * Initial selection for an UNCONTROLLED pill, which then owns its own state.
+     * Ignored when `selected` is provided.
+     * @default false
+     */
+    defaultSelected?: boolean;
     /**
      * Callback when selection state changes
      * @param selected - The new selected state

package/dist/components/core/Popover/PopoverBody.js

@@ -45,11 +45,22 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
             ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
             return;
         }
-        // Ignore clicks that land inside any FlikkUI overlay portal (a nested
-        // Select/Tooltip/Dropdown/Popover renders to document.body, outside our
-        // content ref — without this it would count as an outside click and
-        // dismiss the popover). See the `data-flikkui-portal` convention.
-        if ((_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, "[data-flikkui-portal]")) {
+        // Ignore clicks that land inside a DESCENDANT FlikkUI overlay portal (a
+        // nested Select/Tooltip/Dropdown/Popover renders to document.body,
+        // outside our content ref — without this it would count as an outside
+        // click and dismiss the popover). See the `data-flikkui-portal`
+        // convention.
+        //
+        // The bail only protects against a DESCENDANT portal, not an ANCESTOR
+        // one: when this popover's own trigger lives inside another overlay
+        // (e.g. a Popover opened from inside a Modal), a click on that host
+        // overlay's body content also matches `closest("[data-flikkui-portal]")`
+        // — it finds the Modal's portal wrapper, which contains our trigger.
+        // That's a real outside click and must still close the popover. Only
+        // bail when the matched portal does NOT contain our trigger — i.e.
+        // it's a portal we opened ourselves, not the one hosting us.
+        const portalEl = (_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, "[data-flikkui-portal]");
+        if (portalEl && !portalEl.contains(triggerRef.current)) {
             return;
         }
         if (closeOnClickOutside && !preventClose) {

package/dist/components/core/Progress/Progress.d.ts

@@ -1,29 +1,4 @@
 import React from "react";
 import { ProgressProps } from "./Progress.types";
-/**
- * Progress component - Linear progress bar for tracking completion
- *
- * Features:
- * - Determinate mode: Shows specific progress value (0-100)
- * - Indeterminate mode: Animated loading state when value is undefined
- * - Multiple sizes with default primary color
- * - className controls the fill bar color (the primary styling target)
- * - wrapperClassName controls the outer container
- * - Flexible label positioning (right, top, bottom, inside)
- * - Respects reduced motion preferences
- *
- * @example
- * // Default (primary color)
- * <Progress value={60} />
- *
- * // Custom fill color via className
- * <Progress value={70} className="bg-[var(--color-success)]" />
- *
- * // With label
- * <Progress value={75} showLabel labelPosition="right" />
- *
- * // Indeterminate (loading)
- * <Progress />
- */
 declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 export { Progress };

package/dist/components/core/Progress/Progress.js

@@ -15,8 +15,9 @@ const PROGRESS_SPRING_TRANSITION = {
  * Progress component - Linear progress bar for tracking completion
  *
  * Features:
- * - Determinate mode: Shows specific progress value (0-100)
+ * - Determinate mode: Shows specific progress value (0 to max)
  * - Indeterminate mode: Animated loading state when value is undefined
+ * - Continuous bar, or a discrete LED-style meter via `segments`
  * - Multiple sizes with default primary color
  * - className controls the fill bar color (the primary styling target)
  * - wrapperClassName controls the outer container
@@ -33,10 +34,25 @@ const PROGRESS_SPRING_TRANSITION = {
  * // With label
  * <Progress value={75} showLabel labelPosition="right" />
  *
+ * // Segmented meter over an arbitrary range
+ * <Progress value={214} max={300} segments={24} />
+ *
  * // Indeterminate (loading)
  * <Progress />
  */
-const Progress = React__default.forwardRef(({ value, size = "md", showLabel = false, labelPosition = "right", formatLabel, animated = true, wrapperClassName, className, theme: customTheme, 'aria-label': consumerAriaLabel, ...props }, ref) => {
+/** Cells within this distance of the leading edge fade out when segmentFade is on */
+const SEGMENT_FADE_DISTANCE = 3;
+/** Opacity of the outermost faded cell */
+const SEGMENT_FADE_MIN_OPACITY = 0.4;
+/** Per-cell entrance stagger, seconds */
+const SEGMENT_STAGGER = 0.03;
+/** Per-cell offset of the indeterminate chase, seconds */
+const SEGMENT_CHASE_STAGGER = 0.06;
+const SEGMENT_ENTRANCE_TRANSITION = {
+    duration: 0.25,
+    ease: "easeOut",
+};
+const Progress = React__default.forwardRef(({ value, max = 100, segments, segmentFade = false, size = "md", showLabel = false, labelPosition = "right", formatLabel, animated = true, wrapperClassName, className, theme: customTheme, 'aria-label': consumerAriaLabel, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     // Merge custom theme with default theme
     const theme = useMemo(() => {
@@ -46,16 +62,38 @@ const Progress = React__default.forwardRef(({ value, size = "md", showLabel = fa
             ...progressTheme,
             ...customTheme,
             sizes: { ...progressTheme.sizes, ...customTheme.sizes },
+            segmentSizes: { ...progressTheme.segmentSizes, ...customTheme.segmentSizes },
         };
     }, [customTheme]);
-    // Calculate percentage (clamped to 0-100)
-    const percentage = useMemo(() => {
-        if (value === undefined || value === null)
-            return 0;
-        return Math.min(Math.max(Math.round(value), 0), 100);
-    }, [value]);
+    // Dev-time warnings for common issues
+    if (process.env.NODE_ENV !== 'production') {
+        if (segments !== undefined && (!Number.isInteger(segments) || segments < 1)) {
+            // eslint-disable-next-line no-console
+            console.warn(`Progress: 'segments' must be a positive integer, received ${segments}. Falling back to the continuous bar.`);
+        }
+        if (max <= 0) {
+            // eslint-disable-next-line no-console
+            console.warn(`Progress: 'max' must be greater than 0, received ${max}.`);
+        }
+    }
+    // Segmented rendering is opted into by passing a usable cell count.
+    const segmentCount = segments !== undefined && Number.isInteger(segments) && segments >= 1
+        ? segments
+        : undefined;
+    const isSegmented = segmentCount !== undefined;
     // Determine if this is indeterminate mode
     const isIndeterminate = value === undefined || value === null;
+    // The value clamped into [0, max]. Rounded, matching the historical behaviour
+    // of the 0-100 form.
+    const clampedValue = useMemo(() => {
+        if (value === undefined || value === null)
+            return 0;
+        return Math.min(Math.max(Math.round(value), 0), Math.max(max, 0));
+    }, [value, max]);
+    // Position within the range, 0-1
+    const ratio = max > 0 ? clampedValue / max : 0;
+    // Calculate percentage (0-100) for labels and the continuous fill
+    const percentage = useMemo(() => Math.round(ratio * 100), [ratio]);
     // Format the label
     const label = useMemo(() => {
         if (formatLabel)
@@ -86,6 +124,10 @@ const Progress = React__default.forwardRef(({ value, size = "md", showLabel = fa
         if (!showLabel || isIndeterminate)
             return null;
         if (labelPosition === "inside") {
+            // No continuous track to sit inside, and a label straddling the cells
+            // would be unreadable
+            if (isSegmented)
+                return null;
             // Only show inside label for lg size (enough height)
             if (size !== "lg")
                 return null;
@@ -100,10 +142,36 @@ const Progress = React__default.forwardRef(({ value, size = "md", showLabel = fa
             // Indeterminate animation
             jsx("div", { className: cn(theme.fillStyle, "absolute", theme.indeterminateStyle, className) })) : shouldAnimate ? (
             // Animated determinate progress with spring animation (scaleX avoids layout recalculation)
-            jsx(motion.div, { className: cn(theme.fillStyle, className), style: { width: '100%', transformOrigin: 'left' }, initial: { scaleX: 0 }, animate: { scaleX: percentage / 100 }, transition: PROGRESS_SPRING_TRANSITION })) : (
+            jsx(motion.div, { className: cn(theme.fillStyle, className), style: { width: '100%', transformOrigin: 'left' }, initial: { scaleX: 0 }, animate: { scaleX: ratio }, transition: PROGRESS_SPRING_TRANSITION })) : (
             // Static determinate progress
-            jsx("div", { className: cn(theme.fillStyle, className), style: { width: `${percentage}%` } })), showLabel && labelPosition === "inside" && size === "lg" && !isIndeterminate && (jsx("span", { className: theme.insideLabelStyle, children: label }))] }));
-    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": consumerAriaLabel !== null && consumerAriaLabel !== void 0 ? consumerAriaLabel : (isIndeterminate ? "Loading" : `${percentage}% complete`), ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: renderTrack() }), renderLabel()] })) : (renderTrack()), labelPosition === "bottom" && renderLabel()] }));
+            jsx("div", { className: cn(theme.fillStyle, className), style: { width: `${ratio * 100}%` } })), showLabel && labelPosition === "inside" && size === "lg" && !isIndeterminate && (jsx("span", { className: theme.insideLabelStyle, children: label }))] }));
+    // Discrete cell row — the LED-style meter. Each cell paints the empty fill,
+    // and lit cells stack a coloured overlay on top so the base stays visible
+    // underneath while the overlay fades in.
+    const renderSegmentedTrack = () => {
+        const { height, gap } = theme.segmentSizes[size];
+        const litCount = Math.round(ratio * segmentCount);
+        return (jsx("div", { className: cn(theme.segmentTrackStyle, gap, wrapperClassName), children: Array.from({ length: segmentCount }, (_, i) => {
+                const isLit = !isIndeterminate && i < litCount;
+                // Cells nearest the leading edge dim toward it
+                const distanceFromEdge = litCount - i;
+                const fillOpacity = segmentFade && distanceFromEdge <= SEGMENT_FADE_DISTANCE
+                    ? SEGMENT_FADE_MIN_OPACITY +
+                        (distanceFromEdge / SEGMENT_FADE_DISTANCE) *
+                            (1 - SEGMENT_FADE_MIN_OPACITY)
+                    : 1;
+                // While indeterminate every cell carries the overlay so the chase
+                // reads in the fill colour rather than in the muted empty fill.
+                const isChasing = isIndeterminate && shouldAnimate;
+                const fillClassName = cn(theme.segmentFillStyle, className, isChasing && theme.segmentChaseStyle);
+                return (jsx("div", { "data-progress-segment": "", "data-state": isLit ? "filled" : "empty", className: cn(theme.segmentStyle, height, theme.segmentEmptyStyle), children: isChasing ? (jsx("div", { className: fillClassName, style: { animationDelay: `${i * SEGMENT_CHASE_STAGGER}s` } })) : isLit && shouldAnimate ? (jsx(motion.div, { className: fillClassName, initial: { opacity: 0 }, animate: { opacity: fillOpacity }, transition: {
+                            ...SEGMENT_ENTRANCE_TRANSITION,
+                            delay: i * SEGMENT_STAGGER,
+                        } })) : isLit ? (jsx("div", { className: fillClassName, style: { opacity: fillOpacity } })) : null }, i));
+            }) }));
+    };
+    const trackNode = isSegmented ? renderSegmentedTrack() : renderTrack();
+    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": isIndeterminate ? undefined : clampedValue, "aria-label": consumerAriaLabel !== null && consumerAriaLabel !== void 0 ? consumerAriaLabel : (isIndeterminate ? "Loading" : `${percentage}% complete`), ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: trackNode }), renderLabel()] })) : (trackNode), labelPosition === "bottom" && renderLabel()] }));
 });
 Progress.displayName = "Progress";
 

package/dist/components/core/Progress/Progress.theme.js

@@ -20,6 +20,23 @@ const progressTheme = {
     },
     // Indeterminate animation styles
     indeterminateStyle: "animate-[progress-indeterminate_1.8s_linear_infinite]",
+    // Row holding the segment cells — no track fill, rounding or clipping here;
+    // each cell paints its own background.
+    segmentTrackStyle: "flex items-end w-full",
+    // A single segment cell. flex-1 so the row always fills its container
+    // regardless of how many cells were asked for.
+    segmentStyle: "relative rounded-sm flex-1",
+    // Lit overlay — `className` lands here, so it carries the fill colour.
+    segmentFillStyle: "absolute inset-0 rounded-sm bg-[var(--color-primary)]",
+    segmentEmptyStyle: "bg-[var(--color-surface-sunken)]",
+    // Deliberately NOT the continuous `sizes` ramp (h-1.5/h-2.5/h-4) — at that
+    // height a cell reads as noise rather than a lit segment.
+    segmentSizes: {
+        sm: { height: "h-4", gap: "gap-[2px]" },
+        md: { height: "h-6", gap: "gap-[3px]" },
+        lg: { height: "h-8", gap: "gap-1" },
+    },
+    segmentChaseStyle: "animate-[progress-segment-chase_1.2s_ease-in-out_infinite]",
 };
 
 export { progressTheme };

package/dist/components/core/Progress/Progress.types.d.ts

@@ -1,6 +1,18 @@
 import React from "react";
 export type ProgressSize = "sm" | "md" | "lg";
 export type ProgressLabelPosition = "right" | "top" | "bottom" | "inside";
+/**
+ * Per-size geometry for the segmented form.
+ *
+ * Two keys rather than a single class string because the two values land on
+ * different elements: `height` on each cell, `gap` on the row that holds them.
+ */
+export interface ProgressSegmentSize {
+    /** Height of a single segment cell */
+    height: string;
+    /** Gap between segment cells (applied to the row) */
+    gap: string;
+}
 /**
  * Theme configuration for Progress component
  */
@@ -19,6 +31,18 @@ export interface ProgressTheme {
     sizes: Record<ProgressSize, string>;
     /** Indeterminate animation styles */
     indeterminateStyle: string;
+    /** Row that holds the segment cells (segmented form only) */
+    segmentTrackStyle: string;
+    /** Base styles for a single segment cell */
+    segmentStyle: string;
+    /** The lit overlay painted inside a segment cell */
+    segmentFillStyle: string;
+    /** Fill for an unlit segment cell */
+    segmentEmptyStyle: string;
+    /** Per-size segment geometry */
+    segmentSizes: Record<ProgressSize, ProgressSegmentSize>;
+    /** Indeterminate chase animation applied to each segment cell */
+    segmentChaseStyle: string;
 }
 /**
  * Theme overrides for Progress component
@@ -31,13 +55,35 @@ export interface ProgressThemeOverrides {
     insideLabelStyle?: string;
     sizes?: Partial<Record<ProgressSize, string>>;
     indeterminateStyle?: string;
+    segmentTrackStyle?: string;
+    segmentStyle?: string;
+    segmentFillStyle?: string;
+    segmentEmptyStyle?: string;
+    segmentSizes?: Partial<Record<ProgressSize, ProgressSegmentSize>>;
+    segmentChaseStyle?: string;
 }
 export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
-     * Progress value from 0 to 100.
+     * Progress value, from 0 to `max`.
      * If undefined, the progress bar will be in indeterminate mode.
      */
     value?: number;
+    /**
+     * Upper bound of the range `value` is measured against.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Number of cells to render the bar as an LED-style segmented meter.
+     *
+     * Omitted renders the continuous fill.
+     */
+    segments?: number;
+    /**
+     * Fade the meter out across its last few lit cells (segmented form only).
+     * @default false
+     */
+    segmentFade?: boolean;
     /**
      * The size of the progress bar
      * @default 'md'

package/dist/components/core/Rating/Rating.theme.js

@@ -6,7 +6,7 @@ const ratingTheme = {
     // Base container styles
     baseStyle: "inline-flex items-center",
     // Individual star button styles
-    starStyle: "relative inline-flex items-center justify-center shrink-0 transition-transform duration-150 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-1 rounded-sm",
+    starStyle: "relative inline-flex items-center justify-center shrink-0 transition-transform duration-[var(--motion-duration-fast)] cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-1 rounded-sm",
     // Star icon sizes per rating size
     starSizes: {
         sm: "size-4",

package/dist/components/core/Rating/Rating.types.d.ts

@@ -97,11 +97,12 @@ export interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      */
     onChange?: (value: number) => void;
     /**
-     * Custom filled star icon (defaults to Heroicons StarIcon solid)
+     * Custom filled star icon. Defaults to Phosphor `Star` — the built-in filled
+     * and empty stars are the same glyph, distinguished by color, not by shape.
      */
     iconFilled?: ReactNode;
     /**
-     * Custom empty star icon (defaults to Heroicons StarIcon outline)
+     * Custom empty star icon. Defaults to Phosphor `Star` — see `iconFilled`.
      */
     iconEmpty?: ReactNode;
     /**

package/dist/components/core/ScrollArea/ScrollArea.js

@@ -393,7 +393,7 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', size =
                     '[&::-webkit-scrollbar-thumb]:bg-transparent',
                     '[&[data-scrolling]::-webkit-scrollbar-thumb]:bg-[var(--color-border)]',
                     '[&::-webkit-scrollbar-thumb]:transition-colors',
-                    '[&::-webkit-scrollbar-thumb]:duration-300',
+                    '[&::-webkit-scrollbar-thumb]:duration-[var(--motion-duration-slow)]',
                 ].join(' ');
             case 'hover':
                 return [

package/dist/components/core/ScrollArea/ScrollArea.theme.js

@@ -4,7 +4,7 @@
  */
 const scrollAreaTheme = {
     baseStyle: 'relative h-full w-full',
-    scrollbarStyle: 'flex touch-none select-none transition-colors duration-150',
+    scrollbarStyle: 'flex touch-none select-none transition-colors duration-[var(--motion-duration-fast)]',
     thumbStyle: 'relative flex-1 rounded-full bg-[var(--color-border)]/60',
 };