pixelize-design-library 2.4.2-beta.66 → 2.4.2-beta.68

package/dist/esm/Components/SelectSearch/SelectSearch.js

@@ -14,8 +14,10 @@ import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
-import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
-import { optionRowCursorSx, optionRowDescriptionInk, optionRowInk, optionRowWeight } from "../Select/optionRowInk.js";
+import { selectRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowWeight } from "../Select/optionRowInk.js";
+import { keyboardRingShadow } from "../Select/selectKeyboardRing.js";
+import { selectRowDescriptionInk, selectRowInk } from "../Select/selectRowInk.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { PlusIcon, Check } from "lucide-react";
 import { onActivationKey } from "../Common/activationKey.js";
@@ -23,8 +25,12 @@ import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
 const ROW_TRANSITION = transitionFor(["background-color"]);
 const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, size, isMultipleSelect, }) => {
     const theme = useCustomTheme();
-    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
+    const rowBackgrounds = useMemo(() => selectRowBackgrounds(theme.colors), [theme.colors]);
     const spec = optionRowSpec(size);
+    const keyboardRing = {
+        outline: "2px solid transparent",
+        boxShadow: keyboardRingShadow(rowBackgrounds.keyboardRing),
+    };
     if (isOptionLoading) {
         return (_jsxs(VStack, { py: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Text, { color: theme.colors.accentText, children: loadingText })] }));
     }
@@ -35,7 +41,7 @@ const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOp
                 const isActive = index === activeIndex;
                 return (_jsxs(Box, { as: "button", type: "button", ref: (el) => {
                         optionRefs.current[index] = el;
-                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: "transparent", mx: spec.mx, px: spec.px, py: spec.py, borderRadius: OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: optionRowInk(theme.colors, isSingleSelected), fontWeight: optionRowWeight(isSingleSelected), transition: ROW_TRANSITION, sx: reducedMotionSx(), ...optionRowCursorSx(rowBackgrounds), onClick: () => handleOptionClick(option), onKeyDown: onActivationKey(() => handleOptionClick(option)), display: "flex", alignItems: "center", gap: spec.gap, children: [isProfile && (_jsx(Box, { children: _jsx(Avatar, { size: spec.avatarSize, name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && (_jsx(Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "full" })), _jsxs(Box, { flex: 1, minW: 0, children: [_jsx(Box, { children: option.label }), option.email && (_jsx(Box, { fontSize: spec.descriptionFontSize, color: optionRowDescriptionInk(theme.colors), children: option.email }))] }), isSingleSelected && (_jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, option.id));
+                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: selected ? rowBackgrounds.selected : "transparent", mx: spec.mx, px: spec.px, py: spec.py, borderRadius: OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: selectRowInk(theme.colors, isSingleSelected), fontWeight: optionRowWeight(isSingleSelected), transition: ROW_TRANSITION, sx: reducedMotionSx(), _hover: { bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focus: { bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focusVisible: keyboardRing, onClick: () => handleOptionClick(option), onKeyDown: onActivationKey(() => handleOptionClick(option)), display: "flex", alignItems: "center", gap: spec.gap, children: [isProfile && (_jsx(Box, { children: _jsx(Avatar, { size: spec.avatarSize, name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && (_jsx(Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "full" })), _jsxs(Box, { flex: 1, minW: 0, children: [_jsx(Box, { children: option.label }), option.email && (_jsx(Box, { fontSize: spec.descriptionFontSize, color: selectRowDescriptionInk(theme.colors), children: option.email }))] }), isSingleSelected && (_jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, option.id));
             }) }));
     }
     return (_jsx(Text, { px: 4, py: 2, color: theme.colors.textMuted, children: "No options found" }));

package/dist/esm/Components/SideBar/SecondaryBar.js

@@ -67,6 +67,7 @@ const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
         }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: SIDEBAR_INK_TRANSITION }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
     return item.locked && item.lockedReason ? (_jsx(ToolTip, { label: item.lockedReason, placement: "top", children: row })) : (row);
 };
+/** Secondary flyout panel beside the main rail, listing the active menu's `secondaryItems`; collapses to icons. */
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = SIDEBAR_ROW.fontSize, itemFontSize = SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);

package/dist/esm/Components/SideBar/SideBar.js

@@ -122,6 +122,7 @@ const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggle
     return shell(_jsxs(_Fragment, { children: [_jsx(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? (_jsx(ArrowRightToLine, { size: 14, color: iconColor })) : (_jsx(ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && (_jsx(ControlCell, { onClick: onToggleMobileNav, ariaLabel: toggle ? "Show sidebar in overlay mode" : undefined, label: toggle ? undefined : "Hide", children: _jsx(Maximize2, { size: 14, color: iconColor }) }))] }));
 };
 // --- Main Sidebar component ---
+/** Left navigation rail: collapsible inline from `lg`, a slide-in overlay below it, with menus, pinned shortcuts, submenus, a secondary flyout and a footer. */
 export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, peekOpen = false, onPeekEnd, pinnedItems, pinnedLabel, onUnpin, activePinnedId, pinnedLimit, pinnedLabels, collapseTransition = { speed: "base" }, autoCollapse = true, }) {
     var _a, _b;
     const theme = useCustomTheme();

package/dist/esm/Components/SignInActivityTable/SignInActivityTable.js

@@ -16,6 +16,7 @@ const DEFAULT_LABELS = {
     recentActivity: "Recent Activity",
     noActivity: "No recent sign-in activity",
 };
+/** Card listing recent sign-in devices (browser, device, activity) with loading and empty states. */
 const SignInActivityTable = ({ devices, isLoading = false, labels: labelOverrides, }) => {
     const { colors } = useCustomTheme();
     const titleId = useId();

package/dist/esm/Components/StageProgress/StepperStage.js

@@ -13,6 +13,7 @@ const sizeMap = {
     md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
     lg: { circle: "38px", font: "0.95rem", label: "0.9rem", icon: 16, minW: "124px" },
 };
+/** Renders one numbered circle with connector lines and a wrapped label for variant="stepper". */
 const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, asListItem = false, }) => {
     const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
     const theme = useCustomTheme();

package/dist/esm/Components/StickyBuyBar/StickyBuyBar.js

@@ -29,6 +29,7 @@ const NO_BLUR_SUPPORT = "@supports not ((backdrop-filter: blur(1px)) or (-webkit
 const SAFE_BOTTOM = "calc(0.75rem + env(safe-area-inset-bottom, 0px))";
 const pop = keyframes `0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); }`;
 const STACK_ORDER = ["add", "select-option", "notify", "added", "go-to-bag"];
+/** Bottom bar with price and one primary action whose mode, slide-in visibility and quantity stepper are all controlled. */
 const StickyBuyBar = ({ price, mrp, mode = "add", visible = true, position = "sticky", isLoading = false, quantity, onQuantityChange, maxQuantity, onAddToBag, onSelectOption, onNotify, onGoToBag, onBuyNow, itemLabel, currency, locale, labels, "data-testid": testId, }) => {
     const { colors } = useCustomTheme();
     const reduced = usePrefersReducedMotion();

package/dist/esm/Components/Table/components/TableBody.js

@@ -19,6 +19,8 @@ import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 import { DETAIL_SLOT_PX, RowDetailRow, RowDetailToggle, detailDomIds } from "./rowDetail.js";
 import { useRowMeasurer } from "./rowMeasurer.js";
 import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+import { onActivationKey } from "../../Common/activationKey.js";
+import { rowFocusRingSx } from "./rowFocusRing.js";
 const getRowId = (row) => row.id;
 const getRowContent = (row) => typeof row.content === "function"
     ? row.content
@@ -77,6 +79,12 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
             });
         }
     }, [row, onRowClick]);
+    const keyboardHeader = onRowClick && !isLoading ? columns.find((c) => !c.isHidden && !c.node) : undefined;
+    const handleRowKeyDown = useCallback((event) => {
+        if (event.target !== event.currentTarget || event.repeat || !keyboardHeader)
+            return;
+        onActivationKey(() => handleCellClick(keyboardHeader))(event);
+    }, [keyboardHeader, handleCellClick]);
     const variant = useTableVariant();
     const firstDataColIndex = columns.findIndex((c) => !c.isHidden);
     const accentSx = accentColor ? `inset 3px 0 0 ${accentColor}` : undefined;
@@ -87,6 +95,7 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
         : accentSx;
     const restsOnIndex = variant.slot.rest === "index";
     const rowSx = {
+        ...(keyboardHeader ? rowFocusRingSx(theme.colors) : {}),
         ...(variant.row.hoverScope === "row"
             ? { "&:hover > td[data-hoverable='true']": { backgroundColor: variant.row.hoverBg } }
             : {}),
@@ -113,7 +122,7 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
     const chromeHoverable = rowStyle ? "false" : "true";
     const rowContent = getRowContent(row);
     const restBg = isStriped ? variant.row.stripeBg : theme.colors.background[50];
-    return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: transitionFor(["opacity"], "base"), sx: { ...rowSx, ...reducedMotionSx() }, children: [isContent && (_jsx(Td, { w: "6", p: 0, fontSize: "sm", background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: hasContent && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, {})) : (_jsx(ChevronRight, {})), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(Td, { w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: "sm", fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: _jsxs(Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && (_jsx(Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: transitionFor(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...reducedMotionSx() }, children: rowIndex + 1 })), _jsx(Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: transitionFor(["opacity"]), sx: reducedMotionSx(), children: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), rowDetail && detailIds && (_jsx(Td, { w: `${DETAIL_SLOT_PX}px`, minW: `${DETAIL_SLOT_PX}px`, maxW: `${DETAIL_SLOT_PX}px`, p: 0, textAlign: "center", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent && !isCheckbox ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: `${detailLeft}px`, zIndex: 1, className: "columns sticky-columns", children: hasDetail && (_jsx(RowDetailToggle, { isOpen: detailOpen, detailId: detailIds.detailId, color: theme.colors.textMuted, theme: theme, onToggle: () => rowDetail.toggle(getRowId(row)) })) })), columns.map((header, headerIndex) => {
+    return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, tabIndex: keyboardHeader ? 0 : undefined, onKeyDown: keyboardHeader ? handleRowKeyDown : undefined, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: transitionFor(["opacity"], "base"), sx: { ...rowSx, ...reducedMotionSx() }, children: [isContent && (_jsx(Td, { w: "6", p: 0, fontSize: "sm", background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: hasContent && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, {})) : (_jsx(ChevronRight, {})), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(Td, { w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: "sm", fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: _jsxs(Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && (_jsx(Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: transitionFor(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...reducedMotionSx() }, children: rowIndex + 1 })), _jsx(Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: transitionFor(["opacity"]), sx: reducedMotionSx(), children: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), rowDetail && detailIds && (_jsx(Td, { w: `${DETAIL_SLOT_PX}px`, minW: `${DETAIL_SLOT_PX}px`, maxW: `${DETAIL_SLOT_PX}px`, p: 0, textAlign: "center", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent && !isCheckbox ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: `${detailLeft}px`, zIndex: 1, className: "columns sticky-columns", children: hasDetail && (_jsx(RowDetailToggle, { isOpen: detailOpen, detailId: detailIds.detailId, color: theme.colors.textMuted, theme: theme, onToggle: () => rowDetail.toggle(getRowId(row)) })) })), columns.map((header, headerIndex) => {
                         var _a, _b, _c, _d;
                         if (header.isHidden)
                             return null;

package/dist/esm/Components/Table/components/rowFocusRing.js

@@ -0,0 +1,16 @@
+import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../../Theme/chakra/focusRing.styles.js";
+const TOP = [0, 1];
+const BOTTOM = [0, -1];
+const LEFT = [1, 0];
+const RIGHT = [-1, 0];
+const RING_BAND = FOCUS_RING_WIDTH - FOCUS_HALO_WIDTH;
+const band = ([x, y], width, color) => `inset ${x * width}px ${y * width}px 0 0 ${color}`;
+const edgeShadow = (edges, { ring, halo }) => [...edges.map((edge) => band(edge, RING_BAND, ring)), ...edges.map((edge) => band(edge, FOCUS_RING_WIDTH, halo))].join(", ");
+// NOTE: each cell draws its slice, so sticky cells keep the ring above scrolled content.
+export const rowFocusRingSx = (colors) => ({
+    "&:focus-visible": { outline: "2px solid transparent", outlineOffset: "-2px" },
+    "&:focus-visible > td": { boxShadow: edgeShadow([TOP, BOTTOM], colors.focusRing) },
+    "&:focus-visible > td:first-of-type": { boxShadow: edgeShadow([TOP, BOTTOM, LEFT], colors.focusRing) },
+    "&:focus-visible > td:last-of-type": { boxShadow: edgeShadow([TOP, BOTTOM, RIGHT], colors.focusRing) },
+    "&:focus-visible > td:only-of-type": { boxShadow: edgeShadow([TOP, BOTTOM, LEFT, RIGHT], colors.focusRing) },
+});

package/dist/esm/Components/Tabs/components/TabPanels.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { Box } from "@chakra-ui/react";
 import { useTabsContext } from "../TabsContext.js";
+/** Container for `TabPanel`s in the composed API; registers with the nearest `Tabs` so tabs link to their panels. */
 const TabPanels = ({ children }) => {
     const ctx = useTabsContext();
     useEffect(() => {

package/dist/esm/Components/TagInput/TagInput.js

@@ -13,6 +13,7 @@ import { useFieldIds } from "../Common/useFieldIds.js";
 import { getSearchSelectSizeStyles } from "../SearchSelect/searchSelectSize.js";
 import Tag from "../Tag/Tag.js";
 import { addTags, hasSeparator, resolveTagInputLabels, splitEntries } from "./tagEntries.js";
+/** Free-text tag field that commits entries as removable chips; forwards its ref to the text input. */
 const TagInput = forwardRef(function TagInput({ value, onChange, validate, maxTags, allowDuplicates = false, addOnBlur = false, id, name, label, "aria-label": ariaLabel, placeholder, isRequired = false, isInformation, informationMessage, isDisabled = false, isReadOnly = false, error, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, labels, width = "100%", }, ref) {
     const theme = useCustomTheme();
     const s = getSearchSelectSizeStyles(size);

package/dist/esm/Components/TimePicker/TimePicker.js

@@ -9,6 +9,7 @@ import { useFieldIds } from "../Common/useFieldIds.js";
 import { fieldControlStyles } from "../Common/fieldStyles.js";
 import { HOURS_12, HOURS_24, atTime, displayHour, isTwelveHour, meridiemOf, minuteOptions, pad2, toHour24, } from "./timeParts.js";
 const EMPTY = "";
+/** Three inline selects (hour, minute, AM/PM or 24-hour) that emit a Date; `ref` is the hour select. */
 const TimePicker = forwardRef(function TimePicker({ value, date, onChange, onClear, use24Hour, dateFormat, minuteStep, baseDate, isDisabled, disabled: legacyDisabled, id, name, label, "aria-label": ariaLabel, isRequired = false, isInformation, informationMessage, error, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, width = "100%", }, ref) {
     var _a;
     const theme = useCustomTheme();

package/dist/esm/Components/ToolTip/OverflowToolTip.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ToolTip from "./ToolTip.js";
-// Tooltip that appears only when its child text is actually truncated. Sugar over <ToolTip overflowOnly>.
+/** Tooltip that appears only when its child text is actually truncated; sugar over `<ToolTip overflowOnly>`. */
 export default function OverflowToolTip(props) {
     return _jsx(ToolTip, { ...props, overflowOnly: true });
 }

package/dist/esm/Components/UpgradeButton/UpgradeButton.js

@@ -18,6 +18,7 @@ const sizeMap = {
     md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "full" },
     lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "full" },
 };
+/** Gradient CTA pill with optional shimmer, subtitle and loading state for upgrade prompts. */
 const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColor, variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
     const theme = useCustomTheme();
     const c = theme.colors;

package/dist/esm/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -10,7 +10,7 @@ const PLACEMENT_STYLE = {
     "bottom-end": { top: "100%", right: 0, marginTop: "6px" },
     "bottom-start": { top: "100%", left: 0, marginTop: "6px" },
 };
-// Presentational, app-agnostic hover-preview (intent-safe: open delay, close grace, Escape dismisses).
+/** Hover and focus preview card with open delay, close grace and Escape dismissal. */
 export default function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs = 350, closeDelayMs = 200, placement = "top-end", onOpenChange, width = "340px", testId = "workspace-tray-preview", }) {
     const theme = useCustomTheme();
     const cardId = useId();

package/dist/esm/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -17,7 +17,7 @@ const WindowTitle = ({ testId, color, children }) => {
     }, [setHeaderMounted]);
     return (_jsx(Text, { id: headerId, fontSize: "sm", fontWeight: 600, color: color, noOfLines: 1, "data-testid": `${testId}-title`, children: children }));
 };
-// Presentational floating "workspace window" (Jira-style dialog), headless — the parent owns window state.
+/** Floating Jira-style workspace window; headless, so the parent owns its `state`. */
 export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, labels, finalFocusRef, testId = "workspace-window", }) {
     var _a, _b, _c;
     // Must run before the early return: a minimized render would otherwise skip the hook
@@ -37,6 +37,7 @@ export default function WorkspaceWindow({ title, state, children, onMinimize, on
                 }, "data-testid": `${testId}-backdrop`, children: _jsxs(Box, { bg: theme.colors.surfaceRaised, borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: raisedRule(theme.colors), bg: bandOn(theme.colors.background[100], theme.colors.surfaceRaised), flexShrink: 0, children: [_jsx(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), _jsxs(HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? (_jsx(IconButton, { "aria-label": (_a = labels === null || labels === void 0 ? void 0 : labels.openFullPage) !== null && _a !== void 0 ? _a : "Open full page", size: "xs", variant: "ghost", icon: _jsx(ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? (_jsx(IconButton, { "aria-label": (_b = labels === null || labels === void 0 ? void 0 : labels.minimize) !== null && _b !== void 0 ? _b : "Minimize", size: "xs", variant: "ghost", icon: _jsx(Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? (_jsx(IconButton, { "aria-label": (_c = labels === null || labels === void 0 ? void 0 : labels.close) !== null && _c !== void 0 ? _c : "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: _jsx(X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), _jsx(Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
 }
 const cssLength = (value) => (typeof value === "number" ? `${value}px` : value);
+/** Row of minimized-window pills, portalled above modals. */
 // Portalled above modal overlays; aria-live keeps Chakra's modal aria-hidden off it, data-no-focus-lock keeps the focus trap off it.
 export function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", placement = "bottom-end", offset, closeLabel, dirtyLabel = "Unsaved changes", label = "Minimized windows", renderItem, }) {
     var _a, _b;

package/dist/esm/Theme/tokens/brands/index.js

@@ -61,7 +61,7 @@ export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldD
 // NOTE: withFocusRing is outermost — it must see primary and surfaces together, after every earlier step.
 const resolveRungs = (palette) => withFocusRing(withSurfaceRungs(withSurfaceRaised(withTableHoverRung(withPlaceholderRung(withOutlineRung(palette))))));
 const lightBrand = (source) => lazyPalette(source, () => resolveRungs(finalizeLightPalette(source)));
-/** Light palette per brand, derived on first read. `lavender` is the base the other six extend. */
+/** Light palette per brand, derived on first read. `lavender` is the base the other eight extend. */
 export const lightPalettes = {
     lavender: lightBrand(lavender),
     meadow: lightBrand(meadow),

package/dist/esm/Theme/tokens/builders/rowStates.js

@@ -1,4 +1,6 @@
-import { MIN_PERCEPTIBLE_STEP, resolveHoverTint, STACKED_STATE_STEP, tintStep, } from "./outlineRung.js";
+import { isDarkCanvas } from "./accentText.js";
+import { contrastRatio } from "./color.js";
+import { AA_NON_TEXT, MIN_PERCEPTIBLE_STEP, neutralStep, resolveHoverTint, STACKED_STATE_STEP, tintStep, } from "./outlineRung.js";
 export const listRowBackgrounds = (colors) => {
     // Raw tertiary reaches 1.29:1 and reads as pressed; dark aliases it to the panel at 1.025:1.
     const selected = tintStep(colors.backgroundColor.tertiary, colors.surfaceRaised, MIN_PERCEPTIBLE_STEP);
@@ -8,3 +10,18 @@ export const listRowBackgrounds = (colors) => {
         selectedActive: tintStep(selected, selected, STACKED_STATE_STEP),
     };
 };
+export const SELECTED_ROW_STEP = 1.28;
+export const DISTINCT_ROW_STEP = 1.1;
+// NOTE: light steps deeper in the hover tint's own hue; dark uses neutral greys. Both derive direction from the panel.
+export const selectRowBackgrounds = (colors) => {
+    const panel = colors.surfaceRaised;
+    const { active: hoverTint } = listRowBackgrounds(colors);
+    const isDark = isDarkCanvas(panel);
+    const active = isDark ? neutralStep(panel, MIN_PERCEPTIBLE_STEP) : hoverTint;
+    const selectedStep = Math.max(SELECTED_ROW_STEP, contrastRatio(active, panel) * DISTINCT_ROW_STEP);
+    const selected = isDark ? neutralStep(panel, selectedStep) : tintStep(hoverTint, panel, selectedStep);
+    const selectedActive = isDark
+        ? neutralStep(selected, STACKED_STATE_STEP)
+        : tintStep(selected, selected, STACKED_STATE_STEP);
+    return { active, selected, selectedActive, keyboardRing: neutralStep(selectedActive, AA_NON_TEXT) };
+};

package/dist/esm/Theme/tokens/builders/scrollShadow.js

@@ -1,5 +1,8 @@
+import { isDarkCanvas } from "./accentText.js";
 const EDGE = "24px";
 const TINT = "rgba(0, 0, 0, 0.08)";
+const TINT_ON_DARK = "rgba(0, 0, 0, 0.32)";
+const VERTICAL_SHADOW = "8px";
 // CSS-only overflow hint via background-attachment local vs scroll — no listener, no extra node.
 export function scrollShadowStyles(surface) {
     return {
@@ -11,3 +14,15 @@ export function scrollShadowStyles(surface) {
         backgroundAttachment: "local, local, scroll, scroll",
     };
 }
+// NOTE: dark panels swallow an 8% black edge, so the vertical hint steps up on a dark surface.
+export function scrollShadowStylesVertical(surface) {
+    const tint = isDarkCanvas(surface) ? TINT_ON_DARK : TINT;
+    return {
+        backgroundColor: surface,
+        backgroundImage: `linear-gradient(${surface}, ${surface}), linear-gradient(${surface}, ${surface}), linear-gradient(${tint}, transparent), linear-gradient(transparent, ${tint})`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: `100% ${EDGE}, 100% ${EDGE}, 100% ${VERTICAL_SHADOW}, 100% ${VERTICAL_SHADOW}`,
+        backgroundPosition: "0 0, 0 100%, 0 0, 0 100%",
+        backgroundAttachment: "local, local, scroll, scroll",
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.66",
+  "version": "2.4.2-beta.68",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",