pixelize-design-library 2.4.2-beta.59 → 2.4.2-beta.60

package/dist/esm/Components/SegmentedControl/SegmentedControl.js

@@ -5,13 +5,13 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
-import { FOCUS_VISIBLE_OVER_STATE } from "../../Theme/chakra/focusRing.styles.js";
+import { FOCUS_VISIBLE_OVER_STATE, focusRingShadow, focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import Tag from "../Tag/Tag.js";
 import { useSlidingPill } from "./useSlidingPill.js";
-import { segmentedFocusShadow, segmentedPlateEdge, segmentedRestInk, segmentedSelectedSurface, segmentedTrackSurface, } from "./segmentedInk.js";
+import { segmentedPlateEdge, segmentedRestInk, segmentedSelectedSurface, segmentedTrackSurface, } from "./segmentedInk.js";
 const TRACK_PADDING = "0.125rem";
 const UNDERLINE_WIDTH = "0.0625rem";
 const SLIDE = transitionFor(["transform", "width"], "base");
@@ -37,18 +37,17 @@ export default function SegmentedControl({ options, value, onChange, size = "sm"
     const segmentH = `calc(${control.height} - ${isUnderlineSlide ? UNDERLINE_WIDTH : `2 * ${TRACK_PADDING}`})`;
     // Concentric: an inset child keeping the parent's radius bulges at the corners.
     const innerRadius = isUnderlineSlide ? "none" : `calc(${radii.lg} - ${TRACK_PADDING})`;
-    const focusShadow = segmentedFocusShadow(colors, trackSurface);
     // Inset, never a border: a border consumes the content box and the absolute pill stops centring.
     const plateEdge = isBrandSlide
         ? `inset 0 0 0 1px ${segmentedPlateEdge(colors, surface)}`
         : undefined;
-    // The transparent outline replaces the UA ring and is what Windows high-contrast repaints.
-    const segmentFocus = {
-        outline: "2px solid transparent",
-        outlineOffset: "2px",
-        // underlineSlide has no track chrome to carry the indicator, so there the segment wears it.
-        ...(isUnderlineSlide ? { boxShadow: focusShadow } : {}),
-    };
+    // underlineSlide has no track chrome to carry the ring, so there the segment wears Button's own.
+    const noRing = { outline: "2px solid transparent", outlineOffset: "2px" };
+    const segmentFocus = isUnderlineSlide
+        ? focusVisibleStyles(colors)
+        : { _focusVisible: noRing, [FOCUS_VISIBLE_OVER_STATE]: noRing };
+    const ring = focusRingShadow(colors);
+    const trackFocusShadow = plateEdge ? `${plateEdge}, ${ring}` : ring;
     const [showFocus, setShowFocus] = useState(false);
     const selectedIndex = options.findIndex((o) => o.value === value);
     const enabled = options.reduce((acc, o, i) => (o.isDisabled ? acc : [...acc, i]), []);
@@ -90,7 +89,7 @@ export default function SegmentedControl({ options, value, onChange, size = "sm"
             selectAt(enabled[enabled.length - 1]);
         }
     };
-    return (_jsxs(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 && (_jsx(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: reducedMotionSx() })), isUnderlineSlide && pill && (_jsx(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: reducedMotionSx() })), options.map((option, index) => {
+    return (_jsxs(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 ? trackFocusShadow : 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 && (_jsx(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: reducedMotionSx() })), isUnderlineSlide && pill && (_jsx(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: reducedMotionSx() })), options.map((option, index) => {
                 const isSelected = option.value === value;
                 const showShortLabel = isCompact && !!option.shortLabel;
                 const displayLabel = showShortLabel ? option.shortLabel : option.label;
@@ -110,10 +109,6 @@ export default function SegmentedControl({ options, value, onChange, size = "sm"
                             : restInk
                         : isSelected
                             ? selectedInk
-                            : restInk, fontSize: control.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: transitionFor(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: hoverInk }, sx: {
-                        _focusVisible: segmentFocus,
-                        [FOCUS_VISIBLE_OVER_STATE]: segmentFocus,
-                        ...reducedMotionSx(),
-                    }, children: [option.icon, displayLabel, option.count != null && (_jsx(Tag, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
+                            : restInk, fontSize: control.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: transitionFor(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: hoverInk }, sx: { ...segmentFocus, ...reducedMotionSx() }, children: [option.icon, displayLabel, option.count != null && (_jsx(Tag, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
             })] }));
 }

package/dist/esm/Components/SegmentedControl/segmentedInk.js

@@ -1,4 +1,3 @@
-import { focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
 import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
 /** The surface a segment's label really sits on. */
@@ -15,8 +14,6 @@ export const segmentedTrackSurface = (variant, colors, surface) => {
 export const segmentedSelectedSurface = (variant, colors, trackSurface) => (variant === "default" ? colors.backgroundColor.light : trackSurface);
 /** Unselected label ink, lifted to AA against the track it is drawn on. */
 export const segmentedRestInk = (colors, trackSurface) => liftToContrast(colors.text[600], trackSurface, AA_NORMAL_TEXT);
-/** A radiogroup is one tab stop, so the group wears the ring: a brand hairline plus the field bloom. */
-export const segmentedFocusShadow = (colors, trackSurface) => `inset 0 0 0 1px ${liftToContrast(colors.primary[500], trackSurface, AA_NON_TEXT)}, ${focusGlowShadow(colors)}`;
 /** The plate can match its backdrop's lightness, so its edge carries the boundary.
  * Drawn inset by the caller: a real border consumes the content box and decentres the sliding pill. */
 export const segmentedPlateEdge = (colors, surface) => liftToContrast(colors.boxborder[500], surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main, AA_NON_TEXT);

package/dist/esm/Components/StatCard/StatCard.js

@@ -2,13 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import Skeletons from "../Skeletons/Skeletons.js";
 const StatCardSkeleton = ({ hasIcon }) => (_jsxs(Flex, { direction: "column", gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [hasIcon && _jsx(Skeletons, { type: "skeleton", height: 8, width: 8 }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "40%" })] }), _jsx(Skeletons, { type: "skeleton", height: 7, width: "55%" }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "45%" })] }));
 /** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
-const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, sparkline, footer, icon: Icon, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
+const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, sparkline, footer, icon: Icon, iconTone, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
     const { colors } = useCustomTheme();
     const isInteractive = !!onClick && !isLoading;
     const deltaColor = trend
@@ -17,6 +18,9 @@ const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, spar
             : colors.semanticText.error
         : colors.textMuted;
     const DeltaIcon = trend === "down" ? ArrowDownRight : ArrowUpRight;
+    const chip = iconTone
+        ? resolveSoftTone(colors, toneScale(colors, iconTone), colors.background[50])
+        : { bg: colors.primary.opacity[8], fg: colors.accentText };
     const surface = {
         display: "block",
         w: "100%",
@@ -28,7 +32,7 @@ const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, spar
         px: 5,
         py: 4,
     };
-    const content = isLoading ? (_jsx(StatCardSkeleton, { hasIcon: !!Icon })) : (_jsxs(Flex, { as: "span", direction: "column", gap: 3, children: [_jsxs(Flex, { as: "span", align: "center", gap: 2, children: [Icon && (_jsx(Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: colors.primary.opacity[8], color: colors.accentText, children: _jsx(Icon, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), _jsxs(Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [_jsx(Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: value }), sparkline && (_jsx(Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && (_jsxs(Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && (_jsxs(Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && _jsx(DeltaIcon, { size: 14, "aria-hidden": true }), trend && _jsx(VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && (_jsx(Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: colors.boxborder[200], "data-testid": "stat-footer", children: footer }))] }));
+    const content = isLoading ? (_jsx(StatCardSkeleton, { hasIcon: !!Icon })) : (_jsxs(Flex, { as: "span", direction: "column", gap: 3, children: [_jsxs(Flex, { as: "span", align: "center", gap: 2, children: [Icon && (_jsx(Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: _jsx(Icon, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), _jsxs(Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [_jsx(Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: value }), sparkline && (_jsx(Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && (_jsxs(Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && (_jsxs(Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && _jsx(DeltaIcon, { size: 14, "aria-hidden": true }), trend && _jsx(VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && (_jsx(Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: colors.boxborder[200], "data-testid": "stat-footer", children: footer }))] }));
     if (!isInteractive) {
         return (_jsx(Box, { ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
     }

package/dist/esm/Components/StatusTag/StatusTag.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tag from "../Tag/Tag.js";
+const NEUTRAL = { tone: "neutral" };
+const warned = new Set();
+const warnUnknown = (status) => {
+    if (process.env.NODE_ENV === "production" || warned.has(status))
+        return;
+    warned.add(status);
+    console.warn(`StatusTag: no appearance mapped for status "${status}"; rendering neutral.`);
+};
+/** Typed status-to-Tag wrapper: map your vocabulary to tones once, render chips or dots everywhere. */
+function StatusTag({ status, label, map, display = "chip", size = "sm", "data-testid": testId, }) {
+    const known = Object.prototype.hasOwnProperty.call(map, status);
+    if (!known)
+        warnUnknown(status);
+    const { tone, variant } = known ? map[status] : NEUTRAL;
+    return _jsx(Tag, { label: label, tone: tone, variant: variant, display: display, size: size, "data-testid": testId });
+}
+export default StatusTag;

package/dist/esm/Components/StatusTag/StatusTagProps.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { Box, TableContainer, Flex, Spinner, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, useBreakpointValue, IconButton, Modal, ModalOverlay, ModalContent, ModalBody, ModalCloseButton, useDisclosure } from "@chakra-ui/react";
 import { Table as ChakraTable, Tbody, Thead, Icon } from "@chakra-ui/react";
 import { motion } from "framer-motion";
@@ -19,6 +19,7 @@ import { DENSITY_ROWS, EMPTY_STATE_HEIGHT, GROUP_HEADER_HEIGHT, MAX_TABLE_HEIGHT
 import { scrollbarStyles, SCROLLBAR_WIDTH } from "../../Theme/tokens/builders/scrollbar.js";
 import { scrollShadowStyles } from "../../Theme/tokens/builders/scrollShadow.js";
 import useTable from "./hooks/useTable.js";
+import { useRowExpansion } from "./hooks/useRowExpansion.js";
 import { toSavedColumns } from "./columnLabel.js";
 import { searchAndSortData, SortMultiColumnData, groupRows, buildTablePalette, pickTableColor } from "../../Utils/table.js";
 import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences.js";
@@ -39,12 +40,15 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
     name: "",
     page: "",
     orgId: "",
-}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe = false, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
+}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe = false, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
     var _a, _b, _c, _d, _e;
     const theme = useCustomTheme();
     const clearFiltersTone = useMemo(() => resolveFilledSurface(theme.colors.semantic.error, theme.colors), [theme.colors]);
     const variantTokens = useMemo(() => TABLE_VARIANTS[variant](theme.colors, isDarkCanvas(theme.colors.backgroundColor.main)), [variant, theme.colors]);
     const [columnsSearch, setColumnsSearch] = useState({});
+    const detailIdPrefix = useId();
+    const { expandedIds, toggle: toggleDetail } = useRowExpansion(expandedRows, onExpandedRowsChange);
+    const rowDetail = useMemo(() => (renderRowDetail ? { render: renderRowDetail, toggle: toggleDetail, idPrefix: detailIdPrefix } : undefined), [renderRowDetail, toggleDetail, detailIdPrefix]);
     const tableContainerRef = useRef(null);
     const { isOpen: isFilterModalOpen, onOpen: onFilterModalOpen, onClose: onFilterModalClose } = useDisclosure();
     // Below `md` the sidebar has no room — default to the modal, unless the consumer picked a mode.
@@ -442,5 +446,5 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, hasDetail: !!rowDetail, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, rowDetail: rowDetail, expandedIds: expandedIds, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

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

@@ -15,6 +15,7 @@ import { DENSITY_ROWS, EMPTY_STATE_HEIGHT, GROUP_HEADER_HEIGHT } from "./rowMetr
 import { columnLabelText, isPrimitiveLabel } from "../columnLabel.js";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
+import { DETAIL_SLOT_PX, RowDetailRow, RowDetailToggle, detailDomIds } from "./rowDetail.js";
 const getRowId = (row) => row.id;
 const getRowContent = (row) => typeof row.content === "function"
     ? row.content
@@ -47,20 +48,26 @@ const StatusCell = ({ value, onSolid, align, }) => (_jsx(Box, { display: "flex",
 // the group header already uses, so an override hex behaves identically in both.
 const StatusPill = ({ value, soft, ink, radius, }) => (_jsx(Box, { display: "inline-flex", alignItems: "center", maxW: "100%", px: "0.5rem", py: "0.125rem", borderRadius: radius, bg: soft, color: ink, fontSize: "0.75rem", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
 const EMPTY_HOVER = {};
-const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, isStriped, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
+const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, isStriped, rowDetail, isDetailOpen = false, detailLeft = 0, detailColSpan = 0, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
     // Measured-height virtualization: report this row's real height (main + any
     // expanded panel) so the windower can place variable/expandable rows exactly.
     const mainRowRef = useRef(null);
     const expandedRowRef = useRef(null);
+    const detailRowRef = useRef(null);
     const hasContent = !!getRowContent(row);
+    const detailNode = rowDetail ? rowDetail.render(row) : null;
+    const hasDetail = detailNode !== null && detailNode !== undefined;
+    const detailOpen = isDetailOpen && hasDetail;
+    const detailIds = rowDetail ? detailDomIds(rowDetail.idPrefix, getRowId(row)) : null;
     useLayoutEffect(() => {
         if (!onMeasure)
             return;
         const measure = () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
             const main = (_b = (_a = mainRowRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
             const exp = isExpanded && hasContent ? (_d = (_c = expandedRowRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0 : 0;
-            const h = main + exp;
+            const det = detailOpen ? (_f = (_e = detailRowRef.current) === null || _e === void 0 ? void 0 : _e.offsetHeight) !== null && _f !== void 0 ? _f : 0 : 0;
+            const h = main + exp + det;
             if (h > 0)
                 onMeasure(getRowId(row), h);
         };
@@ -73,12 +80,14 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
                 ro.observe(mainRowRef.current);
             if (expandedRowRef.current)
                 ro.observe(expandedRowRef.current);
+            if (detailRowRef.current)
+                ro.observe(detailRowRef.current);
         }
         return () => {
             cancelAnimationFrame(raf);
             ro === null || ro === void 0 ? void 0 : ro.disconnect();
         };
-    }, [onMeasure, isExpanded, hasContent, row]);
+    }, [onMeasure, isExpanded, hasContent, detailOpen, row]);
     const handleCellClick = useCallback((header) => {
         if (!header.node && onRowClick) {
             onRowClick(row, {
@@ -108,6 +117,10 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
                 "& .table-slot-index": { opacity: isChecked ? 0 : 1 },
                 "&:hover .table-slot-box, &:focus-within .table-slot-box": { opacity: 1 },
                 "&:hover .table-slot-index, &:focus-within .table-slot-index": { opacity: 0 },
+                "@media (pointer: coarse)": {
+                    "& .table-slot-box": { opacity: 1 },
+                    "& .table-slot-index": { opacity: 0 },
+                },
             }
             : {}),
     };
@@ -119,12 +132,12 @@ 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: 14, 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, { fontSize: 16 })) : (_jsx(ChevronRight, { fontSize: 16 })), _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: 14, 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 }) })] }) })), columns.map((header, headerIndex) => {
+    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: 14, 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, { fontSize: 16 })) : (_jsx(ChevronRight, { fontSize: 16 })), _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: 14, 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;
                         const isFrozen = header.isFreeze;
-                        const isFirstDataCell = !isContent && !isCheckbox && headerIndex === firstDataColIndex;
+                        const isFirstDataCell = !isContent && !isCheckbox && !rowDetail && headerIndex === firstDataColIndex;
                         const isStatus = header.type === "status" && !header.node;
                         const rawStatus = String((_a = row[header.id]) !== null && _a !== void 0 ? _a : "");
                         const statusColor = isStatus
@@ -134,7 +147,7 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
                         const bleedBg = statusColor === null || statusColor === void 0 ? void 0 : statusColor.soft;
                         const bleedInk = statusColor === null || statusColor === void 0 ? void 0 : statusColor.text;
                         const canHover = !isBleed && !((cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle);
-                        return (_jsx(Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffsets[headerIndex]}px` : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : restBg, textAlign: isBleed ? undefined : header.align, textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
+                        return (_jsx(Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, id: hasDetail && headerIndex === firstDataColIndex ? detailIds === null || detailIds === void 0 ? void 0 : detailIds.cellId : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffsets[headerIndex]}px` : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : restBg, textAlign: isBleed ? undefined : header.align, textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
                                 ? "none"
                                 : `0.063rem solid ${isFrozen || isChecked
                                     ? variant.row.frozenRuleColor
@@ -144,7 +157,7 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
                     }), isLink && (_jsx(Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : restBg, color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? (_jsx(TableActions, { row: row })) : null }))] }), rowContent && isExpanded && (_jsx(Tr, { ref: expandedRowRef, children: _jsx(Td, { colSpan: columns.length +
                         (isCheckbox ? 1 : 0) +
                         (isContent ? 1 : 0) +
-                        (isLink ? 1 : 0), p: 2, children: _jsx(Box, { p: 2, bg: theme.colors.background[50], borderRadius: "lg", children: rowContent(row) }) }) }))] }));
+                        (isLink ? 1 : 0), p: 2, children: _jsx(Box, { p: 2, bg: theme.colors.background[50], borderRadius: "lg", children: rowContent(row) }) }) })), detailOpen && detailIds && (_jsx(RowDetailRow, { ref: detailRowRef, id: detailIds.detailId, labelledBy: detailIds.cellId, colSpan: detailColSpan, bg: theme.colors.backgroundColor.secondary, borderColor: variant.row.ruleColor, noBorders: noBorders, children: detailNode }))] }));
 });
 const isStructuredEmpty = (value) => !!value && typeof value === "object" && !React.isValidElement(value);
 const TableEmpty = ({ emptyState }) => {
@@ -155,7 +168,7 @@ const TableEmpty = ({ emptyState }) => {
         return _jsx(_Fragment, { children: emptyState });
     return (_jsx(EmptyState, { size: "sm", minH: `${EMPTY_STATE_HEIGHT}px`, title: structured === null || structured === void 0 ? void 0 : structured.title, description: structured === null || structured === void 0 ? void 0 : structured.description, icon: icon }));
 };
-const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWidths, slotWidth, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe = false, accentColors, groups, onAddItem, emptyState, }) => {
+const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWidths, slotWidth, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe = false, accentColors, groups, onAddItem, emptyState, rowDetail, expandedIds, }) => {
     var _a;
     const theme = useCustomTheme();
     const variant = useTableVariant();
@@ -182,6 +195,8 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
     const OVERSCAN = 6;
     const VIRTUALIZE_THRESHOLD = 30;
     const ESTIMATED_EXPAND = 120; // assumed extra height for an expanded-but-not-yet-measured row
+    const detailWidth = rowDetail ? DETAIL_SLOT_PX : 0;
+    const detailLeft = isCheckbox ? slotWidth : 0;
     const shouldVirtualize = data.length > VIRTUALIZE_THRESHOLD;
     // Grouped mode has no pager, so it virtualizes too (when no expandable rows):
     // group headers + rows form one flat sequence that we window over.
@@ -253,11 +268,12 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
             const measured = measuredHeights.get(id);
             const h = measured != null
                 ? measured
-                : ROW_HEIGHT + (expandedRows.has(startRow + i) ? ESTIMATED_EXPAND : 0);
+                : ROW_HEIGHT +
+                    (expandedRows.has(startRow + i) || (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(id)) ? ESTIMATED_EXPAND : 0);
             acc[i + 1] = acc[i] + h;
         }
         return acc;
-    }, [shouldVirtualize, groups, total, data, measuredHeights, expandedRows, startRow, ROW_HEIGHT, ESTIMATED_EXPAND]);
+    }, [shouldVirtualize, groups, total, data, measuredHeights, expandedRows, expandedIds, startRow, ROW_HEIGHT, ESTIMATED_EXPAND]);
     let firstIndex = 0;
     let lastIndex = total;
     let topPad = 0;
@@ -300,11 +316,12 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
     const totalVisibleColumns = useMemo(() => columns.filter((o) => !o.isHidden).length +
         (isCheckbox ? 1 : 0) +
         (isContent ? 1 : 0) +
-        (isLink ? 1 : 0), [columns, isCheckbox, isContent, isLink]);
+        (rowDetail ? 1 : 0) +
+        (isLink ? 1 : 0), [columns, isCheckbox, isContent, isLink, rowDetail]);
     const leftOffsets = useMemo(() => {
-        const checkboxOffset = isCheckbox ? slotWidth : 0;
+        const checkboxOffset = (isCheckbox ? slotWidth : 0) + detailWidth;
         return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
-    }, [columnWidths, isCheckbox, slotWidth]);
+    }, [columnWidths, isCheckbox, slotWidth, detailWidth]);
     const borderStyle = useMemo(() => noBorders ? "none" : `0.063rem solid ${variant.row.ruleColor}`, [noBorders, variant.row.ruleColor]);
     // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
     // cells keep their solid color + white text instead of white-on-tint.
@@ -332,7 +349,15 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
     const groupMetrics = useMemo(() => {
         if (!groupItems || !groupVirtualize)
             return null;
-        const heights = groupItems.map((it) => (it.kind === "header" ? GROUP_HEADER_HEIGHT : rowHeight));
+        const heights = groupItems.map((it) => {
+            var _a;
+            if (it.kind === "header")
+                return GROUP_HEADER_HEIGHT;
+            if (!rowDetail)
+                return rowHeight;
+            const id = getRowId(it.row);
+            return (_a = measuredHeights.get(id)) !== null && _a !== void 0 ? _a : rowHeight + ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(id)) ? ESTIMATED_EXPAND : 0);
+        });
         const offsets = [];
         let acc = 0;
         for (const h of heights) {
@@ -340,7 +365,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
             acc += h;
         }
         return { heights, offsets, totalH: acc };
-    }, [groupItems, groupVirtualize, rowHeight]);
+    }, [groupItems, groupVirtualize, rowHeight, rowDetail, measuredHeights, expandedIds, ESTIMATED_EXPAND]);
     // Clamp scrollTop back when a shorter data set leaves it past the new content height.
     useEffect(() => {
         const totalH = shouldVirtualize && offsets ? offsets[total] : groupVirtualize && groupMetrics ? groupMetrics.totalH : null;
@@ -407,7 +432,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
         const windowItems = groupVirtualize ? items.slice(firstI, lastI) : items;
         return (_jsxs(_Fragment, { children: [gTopPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gTopPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gTopPad } }) })), windowItems.map((it, k) => {
                     var _a;
-                    return it.kind === "header" ? (_jsx(TableGroupRow, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : (_jsx(TableRow, { row: it.row, rowIndex: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, isStriped: stripe && it.pos % 2 === 1, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
+                    return it.kind === "header" ? (_jsx(TableGroupRow, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : (_jsx(TableRow, { row: it.row, rowIndex: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, isStriped: stripe && it.pos % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(it.row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: groupVirtualize && rowDetail ? reportHeight : undefined }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
                 }), gBottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gBottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gBottomPad } }) }))] }));
     }
     return (_jsxs(_Fragment, { children: [isLoading && data.length > 0 && (_jsx(Tr, { children: _jsx(Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0, children: _jsx(Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10, children: _jsx(Spinner, { size: "sm", color: theme.colors.accentText }) }) }) })), shouldVirtualize && topPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: topPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }) })), visibleRows.map((row, i) => {
@@ -416,7 +441,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
                 const rowIndex = startRow + index;
                 const isExpanded = expandedRows.has(rowIndex);
                 const isChecked = selectionsSet.has(getRowId(row));
-                return (_jsx(TableRow, { row: row, rowIndex: rowIndex, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], isStriped: stripe && index % 2 === 1, ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
+                return (_jsx(TableRow, { row: row, rowIndex: rowIndex, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], isStriped: stripe && index % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
             }), shouldVirtualize && bottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: bottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } }) }))] }));
 };
 export default TableBody;

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

@@ -12,13 +12,15 @@ import { useTableVariant } from "../variants/TableVariantContext.js";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 import { focusVisibleRing } from "../../../Theme/chakra/focusRing.styles.js";
+import { DETAIL_SLOT_PX, RowDetailHeaderCell } from "./rowDetail.js";
 const LABEL_JUSTIFY = { start: "space-between", center: "center", end: "flex-start" };
-const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
+const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, hasDetail = false, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
     const [openFilterId, setOpenFilterId] = useState(null);
-    return (_jsxs(Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && _jsx(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && (_jsx(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
+    const variant = useTableVariant();
+    return (_jsxs(Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && _jsx(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && (_jsx(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), hasDetail && (_jsx(RowDetailHeaderCell, { left: isCheckbox ? slotWidth : 0, bg: variant.header.bg, ruleColor: variant.header.ruleColor, noBorders: noBorders })), columns.map((header, index) => {
                 if (header === null || header === void 0 ? void 0 : header.isHidden)
                     return null;
-                return (_jsx(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, columnLabelText(header)));
+                return (_jsx(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, detailWidth: hasDetail ? DETAIL_SLOT_PX : 0, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, columnLabelText(header)));
             }), isLink && _jsx(ViewSpacerCell, { noBorders: noBorders, isActionFreeze: isActionFreeze })] }));
 };
 export default memo(TableHeader);
@@ -43,7 +45,7 @@ const SortingIcon = memo(({ label, sortState, isVisible, handleSortClick, }) =>
             color: accentTextOnCanvas(theme.colors.secondary, variant.header.bg),
         }, children: [sortState === "none" && _jsx(ChevronsUpDown, { size: 14 }), sortState === "asc" && _jsx(ChevronUp, { size: 14 }), sortState === "desc" && _jsx(ChevronDown, { size: 14 })] }));
 });
-const ColumnHeader = memo(({ header, index, columnWidths, slotWidth, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
+const ColumnHeader = memo(({ header, index, columnWidths, slotWidth, detailWidth = 0, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
     var _a, _b;
     const [isHovered, setIsHovered] = useState(false);
     const theme = useCustomTheme();
@@ -51,7 +53,7 @@ const ColumnHeader = memo(({ header, index, columnWidths, slotWidth, isCheckbox,
     const isFrozen = header.isFreeze;
     const align = (_a = header.align) !== null && _a !== void 0 ? _a : "start";
     const leftOffset = isFrozen
-        ? calculateLeftOffset(columnWidths, index) + (isCheckbox ? slotWidth : 0)
+        ? calculateLeftOffset(columnWidths, index) + (isCheckbox ? slotWidth : 0) + detailWidth
         : undefined;
     const isSorting = header.isSort
         ? columnsSort.find((o) => o.column === header.id)

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box, IconButton, Td, Th, Tr, VisuallyHidden } from "@chakra-ui/react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { focusVisibleRing } from "../../../Theme/chakra/focusRing.styles.js";
+export const DETAIL_SLOT_PX = 40;
+export const detailDomIds = (prefix, rowId) => {
+    const safe = `${prefix}-${rowId}`.replace(/\s+/g, "_");
+    return { cellId: `${safe}-cell`, detailId: `${safe}-detail` };
+};
+export const RowDetailHeaderCell = ({ left, bg, ruleColor, noBorders, }) => (_jsx(Th, { scope: "col", w: `${DETAIL_SLOT_PX}px`, minW: `${DETAIL_SLOT_PX}px`, maxW: `${DETAIL_SLOT_PX}px`, p: 0, boxSizing: "border-box", backgroundColor: bg, position: "sticky", left: `${left}px`, zIndex: 9, className: "columns sticky-columns", borderBottom: noBorders ? "none" : `0.063rem solid ${ruleColor}`, children: _jsx(VisuallyHidden, { children: "Row details" }) }));
+export const RowDetailToggle = ({ isOpen, detailId, color, theme, onToggle }) => (_jsx(IconButton, { "aria-label": isOpen ? "Collapse row details" : "Expand row details", "aria-expanded": isOpen, "aria-controls": detailId, icon: isOpen ? _jsx(ChevronDown, { size: 16 }) : _jsx(ChevronRight, { size: 16 }), color: color, size: "sm", variant: "ghost", onClick: onToggle, _focusVisible: focusVisibleRing(theme.colors) }));
+export const RowDetailRow = forwardRef(({ id, labelledBy, colSpan, bg, borderColor, noBorders, children }, ref) => (_jsx(Tr, { ref: ref, id: id, "aria-labelledby": labelledBy, children: _jsx(Td, { colSpan: colSpan, p: 0, bg: bg, borderBottom: noBorders ? "none" : `0.063rem solid ${borderColor}`, children: _jsx(Box, { px: 4, py: 3, children: children }) }) })));
+RowDetailRow.displayName = "RowDetailRow";

package/dist/esm/Components/Table/hooks/useRowExpansion.js

@@ -0,0 +1,23 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+/** Expanded-row ids, controlled when `controlled` is given and uncontrolled otherwise. */
+export const useRowExpansion = (controlled, onChange) => {
+    const [internal, setInternal] = useState([]);
+    const isControlled = controlled !== undefined;
+    const current = isControlled ? controlled : internal;
+    const currentRef = useRef(current);
+    currentRef.current = current;
+    const isControlledRef = useRef(isControlled);
+    isControlledRef.current = isControlled;
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const toggle = useCallback((id) => {
+        var _a;
+        const prev = currentRef.current;
+        const next = prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id];
+        if (!isControlledRef.current)
+            setInternal(next);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, next);
+    }, []);
+    const expandedIds = useMemo(() => new Set(current), [current]);
+    return { expandedIds, toggle };
+};

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

@@ -6,11 +6,21 @@ import TabList from "./components/TabList.js";
 import Tab from "./components/Tab.js";
 import TabPanels from "./components/TabPanels.js";
 import TabPanel from "./components/TabPanel.js";
-const Tabs = ({ items, children, value, defaultValue, onChange, variant = "line", size = "sm", colorScheme = "primary", orientation = "horizontal", activationMode = "automatic", isLazy = false, isFitted = false, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }) => {
+import TabLinkList from "./components/TabLinkList.js";
+const Tabs = ({ items, children, value, defaultValue, onChange, variant = "line", size = "sm", colorScheme = "primary", orientation = "horizontal", activationMode = "automatic", isLazy = false, isFitted = false, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, linkAs = "a", }) => {
+    var _a;
     const generatedId = useId();
     const baseId = id !== null && id !== void 0 ? id : generatedId;
     const isControlled = value !== undefined;
-    const [internalValue, setInternalValue] = useState(() => { var _a; return defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_a = items === null || items === void 0 ? void 0 : items.find((item) => !item.isDisabled)) === null || _a === void 0 ? void 0 : _a.id; });
+    const linkCount = (_a = items === null || items === void 0 ? void 0 : items.filter((item) => item.href !== undefined).length) !== null && _a !== void 0 ? _a : 0;
+    const isLinkMode = !children && !!(items === null || items === void 0 ? void 0 : items.length) && linkCount === items.length;
+    const isMixed = !children && linkCount > 0 && !isLinkMode;
+    useEffect(() => {
+        if (isMixed && process.env.NODE_ENV !== "production") {
+            console.warn("Tabs: some items have `href` and some do not. Link mode needs `href` on every item; rendering a tablist and ignoring `href`.");
+        }
+    }, [isMixed]);
+    const [internalValue, setInternalValue] = useState(() => { var _a; return defaultValue !== null && defaultValue !== void 0 ? defaultValue : (isLinkMode ? undefined : (_a = items === null || items === void 0 ? void 0 : items.find((item) => !item.isDisabled)) === null || _a === void 0 ? void 0 : _a.id); });
     const selectedId = isControlled ? value : internalValue;
     const [focusedId, setFocusedId] = useState(selectedId);
     const [hasPanels, setHasPanels] = useState(() => !!(items === null || items === void 0 ? void 0 : items.some((item) => item.content !== undefined)));
@@ -59,6 +69,9 @@ const Tabs = ({ items, children, value, defaultValue, onChange, variant = "line"
     if (children) {
         return _jsx(TabsContext.Provider, { value: contextValue, children: children });
     }
+    if (isLinkMode) {
+        return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsx(TabLinkList, { items: items, linkAs: linkAs, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) }));
+    }
     const hasContent = !!(items === null || items === void 0 ? void 0 : items.some((item) => item.content !== undefined));
     return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsxs(Box, { display: "flex", flexDirection: orientation === "vertical" ? "row" : "column", alignItems: orientation === "vertical" ? "flex-start" : undefined, gap: orientation === "vertical" ? 4 : 2, children: [_jsx(TabList, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: items === null || items === void 0 ? void 0 : items.map((item) => (_jsx(Tab, { value: item.id, icon: item.icon, count: item.count, isDisabled: item.isDisabled, children: item.label }, item.id))) }), hasContent ? (_jsx(TabPanels, { children: items === null || items === void 0 ? void 0 : items.filter((item) => item.content !== undefined).map((item) => (_jsx(TabPanel, { value: item.id, children: item.content }, item.id))) })) : null] }) }));
 };

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

@@ -1,45 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { Box } from "@chakra-ui/react";
-import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-import { FOCUS_VISIBLE_OVER_STATE } from "../../../Theme/chakra/focusRing.styles.js";
-import { AA_NON_TEXT, liftToContrast } from "../../../Theme/tokens/builders/outlineRung.js";
-import { compositeOver } from "../../../Theme/tokens/builders/color.js";
-import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
-import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
-import { BUTTON_SIZES } from "../../../Theme/tokens/primitives/controlSizes.js";
-import { iconBoxSx } from "../../Common/iconBox.js";
-import { resolveTabStyle, scaleForColorScheme } from "../tabStyles.js";
 import { panelId, tabId, useTabsContext } from "../TabsContext.js";
+import { useTabAppearance } from "../useTabAppearance.js";
 import CountBadge from "./CountBadge.js";
 const Tab = ({ value, children, icon, count, isDisabled }) => {
-    var _a, _b, _c, _d;
-    const { colors } = useCustomTheme();
+    var _a;
     const ctx = useTabsContext();
     const ref = useRef(null);
     const isSelected = ctx.selectedId === value;
     const isFocusTarget = ((_a = ctx.focusedId) !== null && _a !== void 0 ? _a : ctx.selectedId) === value;
-    const isVertical = ctx.orientation === "vertical";
-    const isLine = ctx.variant === "line";
-    const canvas = colors.backgroundColor.main;
-    const scale = scaleForColorScheme(colors, ctx.colorScheme);
-    const style = resolveTabStyle(colors, scale, canvas, ctx.variant, isSelected);
-    const spec = BUTTON_SIZES[ctx.size];
-    // The list scrolls on both axes, so an outer ring is clipped into arcs; a negative offset draws it
-    // inside the tab, clear of its own border rather than thickening it.
-    const focusRing = {
-        outline: `1px solid ${liftToContrast(colors.primary[500], 
-        // subtle/ghost fills are translucent tints; contrast has no meaning until they are flattened.
-        style.bg === "transparent" ? canvas : compositeOver(style.bg, canvas), AA_NON_TEXT)}`,
-        outlineOffset: "-2px",
-    };
-    const borderProps = ctx.variant === "outline"
-        ? { border: "1px solid", borderColor: (_b = style.border) !== null && _b !== void 0 ? _b : "transparent" }
-        : isLine
-            ? isVertical
-                ? { borderLeft: "0.125rem solid", borderLeftColor: (_c = style.indicator) !== null && _c !== void 0 ? _c : "transparent" }
-                : { borderBottom: "0.125rem solid", borderBottomColor: (_d = style.indicator) !== null && _d !== void 0 ? _d : "transparent" }
-            : {};
-    return (_jsxs(Box, { as: "button", type: "button", ref: ref, role: "tab", id: tabId(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? panelId(ctx.baseId, value) : undefined, "data-value": value, tabIndex: isDisabled ? -1 : isFocusTarget ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && ctx.select(value), onFocus: () => ctx.focusTab(value), display: "flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flexShrink: 0, flex: ctx.isFitted ? 1 : undefined, w: isVertical ? "100%" : undefined, h: isVertical ? "auto" : spec.height, minH: spec.height, py: isVertical ? "0.5rem" : undefined, px: spec.paddingX, fontSize: spec.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, borderRadius: isLine ? "none" : "lg", bg: style.bg, color: style.color, ...borderProps, transition: transitionFor(["background-color", "color", "border-color"]), sx: { _focusVisible: focusRing, [FOCUS_VISIBLE_OVER_STATE]: focusRing, ...reducedMotionSx() }, _hover: !isDisabled ? { bg: style.hoverBg, color: style.hoverColor } : undefined, children: [icon ? (_jsx(Box, { as: "span", "aria-hidden": true, boxSize: `${spec.iconSize}px`, sx: iconBoxSx(spec.iconSize), children: icon })) : null, _jsx(Box, { as: "span", children: children }), count !== undefined ? (_jsx(CountBadge, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
+    const { colors, canvas, scale, style, iconSize, iconSx, boxProps } = useTabAppearance(isSelected, isDisabled);
+    return (_jsxs(Box, { as: "button", type: "button", ref: ref, role: "tab", id: tabId(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? panelId(ctx.baseId, value) : undefined, "data-value": value, tabIndex: isDisabled ? -1 : isFocusTarget ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && ctx.select(value), onFocus: () => ctx.focusTab(value), ...boxProps, children: [icon ? (_jsx(Box, { as: "span", "aria-hidden": true, boxSize: `${iconSize}px`, sx: iconSx, children: icon })) : null, _jsx(Box, { as: "span", children: children }), count !== undefined ? (_jsx(CountBadge, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
 };
 export default Tab;