pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

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

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../../Theme/chakra/motion");
+const controlSizes_1 = require("../../../Theme/tokens/primitives/controlSizes");
+const tabStyles_1 = require("../tabStyles");
+const TabsContext_1 = require("../TabsContext");
+const CountBadge_1 = __importDefault(require("./CountBadge"));
+const Tab = ({ value, children, icon, count, isDisabled }) => {
+    var _a, _b, _c, _d;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    const ref = (0, react_1.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 = (0, tabStyles_1.scaleForColorScheme)(colors, ctx.colorScheme);
+    const style = (0, tabStyles_1.resolveTabStyle)(colors, scale, canvas, ctx.variant, isSelected);
+    const spec = controlSizes_1.CONTROL_SIZES[ctx.size];
+    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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: ref, role: "tab", id: (0, TabsContext_1.tabId)(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? (0, TabsContext_1.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: (0, motion_1.transitionFor)(["background-color", "color", "border-color"]), sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, _hover: !isDisabled ? { bg: style.hoverBg, color: style.hoverColor } : undefined, children: [icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, boxSize: `${spec.iconSize}px`, children: icon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", children: children }), count !== undefined ? ((0, jsx_runtime_1.jsx)(CountBadge_1.default, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
+};
+exports.default = Tab;

package/dist/Components/Tabs/components/TabList.d.ts

@@ -0,0 +1,3 @@
+import type { TabListProps } from "../TabsProps";
+declare const TabList: ({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }: TabListProps) => import("react/jsx-runtime").JSX.Element;
+export default TabList;

package/dist/Components/Tabs/components/TabList.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const TabsContext_1 = require("../TabsContext");
+const ENABLED_TAB_SELECTOR = '[role="tab"]:not([aria-disabled="true"])';
+const findByValue = (container, value) => Array.from(container.querySelectorAll("[data-value]")).find((node) => node.dataset.value === value);
+const TabList = ({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    const ref = (0, react_1.useRef)(null);
+    const isVertical = ctx.orientation === "vertical";
+    const isLine = ctx.variant === "line";
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const activeId = (_a = ctx.focusedId) !== null && _a !== void 0 ? _a : ctx.selectedId;
+        if (!activeId || !ref.current)
+            return;
+        const el = findByValue(ref.current, activeId);
+        (_b = el === null || el === void 0 ? void 0 : el.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(el, { block: "nearest", inline: "nearest" });
+    }, [ctx.focusedId, ctx.selectedId]);
+    const focusAndMaybeSelect = (el) => {
+        el.focus();
+        const value = el.dataset.value;
+        if (value && ctx.activationMode === "automatic")
+            ctx.select(value);
+    };
+    const enabledTabs = () => { var _a, _b; return Array.from((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(ENABLED_TAB_SELECTOR)) !== null && _b !== void 0 ? _b : []); };
+    const moveFocus = (from, delta) => {
+        const tabs = enabledTabs();
+        if (!tabs.length)
+            return;
+        const index = tabs.indexOf(from);
+        const nextIndex = index === -1 ? 0 : (index + delta + tabs.length) % tabs.length;
+        focusAndMaybeSelect(tabs[nextIndex]);
+    };
+    const focusEdge = (edge) => {
+        const tabs = enabledTabs();
+        if (!tabs.length)
+            return;
+        focusAndMaybeSelect(tabs[edge === "first" ? 0 : tabs.length - 1]);
+    };
+    const handleKeyDown = (event) => {
+        const target = event.target;
+        if (target.getAttribute("role") !== "tab")
+            return;
+        const forwardKey = isVertical ? "ArrowDown" : "ArrowRight";
+        const backwardKey = isVertical ? "ArrowUp" : "ArrowLeft";
+        if (event.key === forwardKey) {
+            event.preventDefault();
+            moveFocus(target, 1);
+        }
+        else if (event.key === backwardKey) {
+            event.preventDefault();
+            moveFocus(target, -1);
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            focusEdge("first");
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            focusEdge("last");
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { ref: ref, role: "tablist", "aria-orientation": ctx.orientation, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: handleKeyDown, direction: isVertical ? "column" : "row", flexShrink: 0, minW: isVertical ? "10rem" : undefined, overflowX: isVertical ? undefined : "auto", overflowY: isVertical ? "auto" : undefined, flexWrap: "nowrap", gap: isLine ? 1 : 1.5, borderBottom: isLine && !isVertical ? "1px solid" : undefined, borderBottomColor: isLine && !isVertical ? colors.boxborder[200] : undefined, borderRight: isLine && isVertical ? "1px solid" : undefined, borderRightColor: isLine && isVertical ? colors.boxborder[200] : undefined, sx: (0, scrollbar_1.scrollbarStyles)(colors, "hover"), children: children }));
+};
+exports.default = TabList;

package/dist/Components/Tabs/components/TabPanel.d.ts

@@ -0,0 +1,3 @@
+import type { TabPanelProps } from "../TabsProps";
+declare const TabPanel: ({ value, children }: TabPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TabPanel;

package/dist/Components/Tabs/components/TabPanel.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const TabsContext_1 = require("../TabsContext");
+const TabPanel = ({ value, children }) => {
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    const isSelected = ctx.selectedId === value;
+    const hasRenderedRef = (0, react_1.useRef)(isSelected);
+    if (isSelected)
+        hasRenderedRef.current = true;
+    if (ctx.isLazy && !hasRenderedRef.current)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "tabpanel", id: (0, TabsContext_1.panelId)(ctx.baseId, value), "aria-labelledby": (0, TabsContext_1.tabId)(ctx.baseId, value), hidden: !isSelected, tabIndex: 0, children: children }));
+};
+exports.default = TabPanel;

package/dist/Components/Tabs/components/TabPanels.d.ts

@@ -0,0 +1,3 @@
+import type { TabPanelsProps } from "../TabsProps";
+declare const TabPanels: ({ children }: TabPanelsProps) => import("react/jsx-runtime").JSX.Element;
+export default TabPanels;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const TabsContext_1 = require("../TabsContext");
+const TabPanels = ({ children }) => {
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    (0, react_1.useEffect)(() => {
+        ctx.registerPanels();
+    }, [ctx]);
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: children }));
+};
+exports.default = TabPanels;

package/dist/Components/Tabs/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Tabs } from "./Tabs";
+export { default as TabList } from "./components/TabList";
+export { default as Tab } from "./components/Tab";
+export { default as TabPanels } from "./components/TabPanels";
+export { default as TabPanel } from "./components/TabPanel";
+export type { TabsProps, TabItem, TabsVariant, TabsOrientation, TabActivationMode, TabsColorScheme, TabListProps, TabProps, TabPanelsProps, TabPanelProps, } from "./TabsProps";

package/dist/Components/Tabs/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = void 0;
+var Tabs_1 = require("./Tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return __importDefault(Tabs_1).default; } });
+var TabList_1 = require("./components/TabList");
+Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return __importDefault(TabList_1).default; } });
+var Tab_1 = require("./components/Tab");
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return __importDefault(Tab_1).default; } });
+var TabPanels_1 = require("./components/TabPanels");
+Object.defineProperty(exports, "TabPanels", { enumerable: true, get: function () { return __importDefault(TabPanels_1).default; } });
+var TabPanel_1 = require("./components/TabPanel");
+Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return __importDefault(TabPanel_1).default; } });

package/dist/Components/Tabs/tabStyles.d.ts

@@ -0,0 +1,15 @@
+import type { ColorScale, PaletteProps } from "../../Theme/tokens/types";
+import type { TabsColorScheme, TabsVariant } from "./TabsProps";
+export declare const scaleForColorScheme: (colors: PaletteProps, scheme: TabsColorScheme) => ColorScale;
+export interface TabVisualStyle {
+    bg: string;
+    color: string;
+    hoverBg: string;
+    hoverColor: string;
+    /** Only set for the "outline" variant. */
+    border?: string;
+    /** Only set for the "line" variant, selected state — the underline/side-rail color. */
+    indicator?: string;
+}
+/** Rest/selected/hover ink+fill for one tab, mirroring Button.styles.ts's per-variant resolution. */
+export declare const resolveTabStyle: (colors: PaletteProps, scale: ColorScale, canvas: string, variant: TabsVariant, isSelected: boolean) => TabVisualStyle;

package/dist/Components/Tabs/tabStyles.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveTabStyle = exports.scaleForColorScheme = void 0;
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const scaleForColorScheme = (colors, scheme) => colors[scheme];
+exports.scaleForColorScheme = scaleForColorScheme;
+const restStyle = (colors, hoverBg) => ({
+    bg: "transparent",
+    color: colors.textMuted,
+    hoverBg,
+    hoverColor: colors.text[700],
+});
+/** Rest/selected/hover ink+fill for one tab, mirroring Button.styles.ts's per-variant resolution. */
+const resolveTabStyle = (colors, scale, canvas, variant, isSelected) => {
+    const accent = (0, accentText_1.accentTextOnCanvas)(scale, canvas);
+    const hoverTint = (0, outlineRung_1.resolveHoverTint)(colors.gray[50], canvas);
+    if (!isSelected)
+        return restStyle(colors, hoverTint);
+    if (variant === "solid") {
+        const fill = (0, filledSurface_1.resolveFilledSurface)(scale, colors);
+        return { bg: fill.fill, color: fill.color, hoverBg: fill.hoverFill, hoverColor: fill.hoverColor };
+    }
+    if (variant === "subtle") {
+        const tone = (0, tone_1.resolveSoftTone)(colors, scale, canvas);
+        return { bg: tone.bg, color: tone.fg, hoverBg: tone.hoverBg, hoverColor: tone.fg };
+    }
+    if (variant === "outline") {
+        return { bg: "transparent", color: accent, hoverBg: "transparent", hoverColor: accent, border: accent };
+    }
+    if (variant === "ghost") {
+        return { bg: hoverTint, color: accent, hoverBg: hoverTint, hoverColor: accent };
+    }
+    return { bg: "transparent", color: accent, hoverBg: "transparent", hoverColor: accent, indicator: accent };
+};
+exports.resolveTabStyle = resolveTabStyle;

package/dist/Components/Tag/Tag.js

@@ -2,7 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-// Icon size scales with the tag size so the right icon stays proportional.
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+// NOTE: the label's pill radius would slice descenders, so clipping lives on a square child.
+const LabelText = ({ children, title }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", title: title, display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", borderRadius: 0, px: "0.05em", mx: "-0.05em", children: children }));
 const ICON_SIZE = {
     xs: "0.75rem",
     sm: "0.875rem",
@@ -10,12 +16,14 @@ const ICON_SIZE = {
     lg: "1.1em",
 };
 /** Renders a pill-shaped status/filter chip (Chakra Tag) — not interchangeable with the raw Badge primitive's static marker. */
-const Tag = ({ label, colorScheme = "primary", variant = "solid", size = "md", icon, onTagClick, onIconClick, }) => {
+const Tag = ({ label, colorScheme = "primary", tone, variant = "subtle", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, isDisabled, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isInteractive = !!onTagClick;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", children: [isInteractive ? ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { as: "button", type: "button", cursor: "pointer", onClick: () => onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(), children: label })) : ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { children: label })), icon &&
-                (onIconClick ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": `Remove ${label}`, onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tag, { size: size, variant: variant, colorScheme: tone ? tone_1.toneToColorScheme[tone] : colorScheme, borderRadius: "full", maxW: maxW, "data-testid": testId, "data-interactive": isInteractive || undefined, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [leadingIcon && (0, jsx_runtime_1.jsx)(react_1.TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { as: "button", type: "button", noOfLines: undefined, disabled: isDisabled || undefined, cursor: "pointer", onClick: isDisabled ? undefined : onTagClick, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { noOfLines: undefined, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
+                (onIconClick ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": `Remove ${label}`, "data-testid": testId ? `${testId}-remove` : undefined, disabled: isDisabled || undefined, onClick: (e) => {
                         e.stopPropagation();
-                        onIconClick();
-                    }, display: "inline-flex", alignItems: "center", ml: "0.25rem", transition: "all 0.2s ease", _hover: { opacity: 0.8, transform: "scale(1.05)" }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : ((0, jsx_runtime_1.jsx)(react_1.TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
+                        if (!isDisabled)
+                            onIconClick();
+                    }, display: "inline-flex", alignItems: "center", flexShrink: 0, ml: "0.25rem", borderRadius: "full", transition: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : ((0, jsx_runtime_1.jsx)(react_1.TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
 };
 exports.default = Tag;

package/dist/Components/Tag/Tag.styles.d.ts

@@ -1,2 +1,4 @@
 import { ComponentMultiStyleConfig } from "@chakra-ui/react";
+export declare const INTERACTIVE_HOVER = "&[data-interactive]:hover";
+export declare const INTERACTIVE_ACTIVE = "&[data-interactive]:active";
 export declare const Tag: ComponentMultiStyleConfig;

package/dist/Components/Tag/Tag.styles.js

@@ -1,11 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = void 0;
+exports.Tag = exports.INTERACTIVE_ACTIVE = exports.INTERACTIVE_HOVER = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
-// Resolve a colorScheme key to a numeric swatch from the theme. All supported
-// colorScheme values (brand + global scales) expose a 50-900 scale; fall back to
-// gray so an unknown/missing key can never throw at render time.
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+exports.INTERACTIVE_HOVER = "&[data-interactive]:hover";
+exports.INTERACTIVE_ACTIVE = "&[data-interactive]:active";
+const softTint = (scale, step) => "opacity" in scale ? scale.opacity[step] : scale[50];
+// NOTE: falls back to gray so an unknown/missing colorScheme key can never throw at render time.
 const SCALE_KEYS = [
     "primary", "secondary", "tertiary", "gray", "red", "orange", "yellow",
     "green", "teal", "blue", "cyan", "purple", "pink",
@@ -16,64 +21,66 @@ const swatch = (theme, colorScheme = "primary") => isScaleKey(colorScheme) ? the
 // is keyed under those parts, so it needs a multi-style config with `parts`.
 exports.Tag = {
     parts: ["container", "label", "closeButton"],
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         container: {
             borderRadius: "full",
-            fontWeight: 600,
+            fontWeight: 500,
             lineHeight: 1.2,
             display: "inline-flex",
             alignItems: "center",
-            transition: "background 0.15s ease, color 0.15s ease, border-color 0.15s ease",
+            minW: 0,
+            boxSizing: "border-box",
+            transition: (0, motion_1.transitionFor)(["background-color", "color", "border-color", "box-shadow"]),
+            ...(0, motion_2.reducedMotionSx)(),
+            "&[data-interactive]": { cursor: "pointer" },
+            "&[data-disabled]": { opacity: 0.5, cursor: "not-allowed", pointerEvents: "none" },
         },
-    },
+        label: {
+            lineHeight: 1.45,
+            minW: 0,
+            borderRadius: "full",
+            overflow: "visible",
+            _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors),
+        },
+    }),
     sizes: {
         xs: {
-            container: { fontSize: "0.6875rem", px: 2, py: 0.5, minH: "1.25rem" },
+            container: { fontSize: "0.6875rem", px: 2, h: "1.25rem" },
         },
         sm: {
-            container: { fontSize: "0.75rem", px: 2.5, py: 1, minH: "1.5rem" },
+            container: { fontSize: "0.75rem", px: 2.5, h: "1.5rem" },
         },
         md: {
-            container: { fontSize: "0.8125rem", px: 3, py: 1, minH: "1.75rem" },
+            container: { fontSize: "0.8125rem", px: 3, h: "1.75rem" },
         },
         lg: {
-            container: { fontSize: "0.9375rem", px: 3.5, py: 1.5, minH: "2rem" },
+            container: { fontSize: "0.9375rem", px: 3.5, h: "2rem" },
         },
     },
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
             const palette = theme.colors;
             const c = swatch(theme, colorScheme);
-            const { white, black, backgroundColor } = palette;
-            const canvas = backgroundColor.main;
-            const fillRung = (0, filledSurface_1.solidFillRung)(c, white);
-            const hoverRung = (0, filledSurface_1.darkerFillRung)(c, canvas, white, 0);
-            const activeRung = (0, filledSurface_1.darkerFillRung)(c, canvas, white, 1);
-            const fill = c[fillRung];
-            const hoverFill = c[hoverRung];
-            const activeFill = c[activeRung];
+            const { fill, color, hoverFill, hoverColor, activeFill, activeColor } = (0, filledSurface_1.resolveFilledSurface)(c, palette);
             return {
                 container: {
                     bg: fill,
-                    color: (0, filledSurface_1.labelOnFill)(fill, white, black),
-                    _hover: { bg: hoverFill, color: (0, filledSurface_1.labelOnFill)(hoverFill, white, black) },
-                    _active: { bg: activeFill, color: (0, filledSurface_1.labelOnFill)(activeFill, white, black) },
+                    color,
+                    [exports.INTERACTIVE_HOVER]: { bg: hoverFill, color: hoverColor },
+                    [exports.INTERACTIVE_ACTIVE]: { bg: activeFill, color: activeColor },
                 },
             };
         },
         subtle: ({ theme, colorScheme = "primary" }) => {
             const c = swatch(theme, colorScheme);
-            const bg = c[50];
+            const { bg, fg, border, hoverBg, hoverBorder, activeBg, activeBorder } = (0, tone_1.resolveSoftTone)(theme.colors, c);
             return {
                 container: {
                     bg,
-                    // A fixed [700] fails AA against [50] for some hues (orange 3.89, borderline green
-                    // 4.39) — walk the scale's own rungs against this specific tint instead.
-                    color: (0, accentText_1.accentTextOnCanvas)(c, bg),
-                    border: "0.063rem solid",
-                    borderColor: c[100],
-                    _hover: { bg: c[100] },
-                    _active: { bg: c[200] },
+                    color: fg,
+                    boxShadow: `inset 0 0 0 0.0625rem ${border}`,
+                    [exports.INTERACTIVE_HOVER]: { bg: hoverBg, boxShadow: `inset 0 0 0 0.0625rem ${hoverBorder}` },
+                    [exports.INTERACTIVE_ACTIVE]: { bg: activeBg, boxShadow: `inset 0 0 0 0.0625rem ${activeBorder}` },
                 },
             };
         },
@@ -83,19 +90,19 @@ exports.Tag = {
             const ink = (0, accentText_1.accentTextOnCanvas)(c, canvas);
             return {
                 container: {
-                    border: "0.094rem solid",
-                    borderColor: ink,
+                    border: "none",
+                    boxShadow: `inset 0 0 0 0.0625rem ${ink}`,
                     color: ink,
                     bg: "transparent",
-                    _hover: { bg: c[50] },
-                    _active: { bg: c[100] },
+                    [exports.INTERACTIVE_HOVER]: { bg: softTint(c, 16) },
+                    [exports.INTERACTIVE_ACTIVE]: { bg: softTint(c, 24) },
                 },
             };
         },
     },
     defaultProps: {
-        size: "md",
-        variant: "solid",
+        size: "sm",
+        variant: "subtle",
         colorScheme: "primary",
     },
 };

package/dist/Components/Tag/TagProps.d.ts

@@ -1,20 +1,33 @@
 import { ElementType } from "react";
-/** Tag color; primary/secondary/tertiary are brand tokens, the rest are semantic/neutral colors. */
+import type { BoxProps } from "@chakra-ui/react";
+import type { Tone } from "../../Theme/tokens/builders/tone";
+/** Category colour, not status — for a status chip use `tone`, which wins when both are set. */
 export type TagColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
-/** Tag size; also scales the optional icon via ICON_SIZE. Defaults to "md". */
+/** Tag size; also scales any icon via ICON_SIZE. Defaults to "sm". */
 export type TagSize = "xs" | "sm" | "md" | "lg";
-/** Passed through to Chakra's Tag variant; defaults to "solid". */
+/** "solid" for emphasis, "outline" on dense/colored surfaces, "subtle" (default) for everyday chips. */
 export type TagVariant = "solid" | "outline" | "subtle";
 /** Props for the pill-shaped status/filter Tag chip — see Tag.tsx for interactive/icon behavior. */
 export interface TagProps {
     label: string;
     /** No effect without icon — turns it into a remove button and stops the click from bubbling to onTagClick. */
     onIconClick?: () => void;
-    /** Makes only the label a button, not the tag body — the icon (if present) is a separate click target. */
+    /** Makes the label a real button and turns on hover/cursor/focus styles; keyboard (Enter/Space) works natively. */
     onTagClick?: () => void;
     /** Decorative (aria-hidden) unless onIconClick is also passed — icon alone adds no interactivity. */
     icon?: ElementType;
+    /** A decorative icon before the label; always aria-hidden and never clickable. */
+    leadingIcon?: ElementType;
+    /** Category colour, defaults to "primary"; ignored when `tone` is set. */
     colorScheme?: TagColorScheme;
+    /** Status tone (neutral/info/success/warning/error); overrides colorScheme for state, not category. */
+    tone?: Tone;
+    /** Caps the width; the label truncates with an ellipsis and shows the full text as a title. */
+    maxW?: BoxProps["maxW"];
     size?: TagSize;
     variant?: TagVariant;
+    /** Dims the tag and disables its button(s) (native disabled); no effect on a purely static tag. */
+    isDisabled?: boolean;
+    /** Test hook on the root; the remove button gets `${"$"}{testId}-remove`. */
+    "data-testid"?: string;
 }

package/dist/Components/Timeline/Timeline.d.ts

@@ -1,4 +1,4 @@
 import { TimelineProps } from "./TimelineProps";
 /** Renders a grouped, alternating two-column desktop / single-rail mobile event feed with inline notes — not a generic list. */
-declare const Timeline: ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote, addNoteLoading, editNoteLoading, deletingNoteId, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+declare const Timeline: ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote, addNoteLoading, editNoteLoading, deletingNoteId, emptyText, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
 export default Timeline;