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

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

@@ -2,7 +2,9 @@ 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 { focusVisibleStyles } from "../../../Theme/chakra/focusRing.styles.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 { CONTROL_SIZES } from "../../../Theme/tokens/primitives/controlSizes.js";
@@ -22,6 +24,14 @@ const Tab = ({ value, children, icon, count, isDisabled }) => {
     const scale = scaleForColorScheme(colors, ctx.colorScheme);
     const style = resolveTabStyle(colors, scale, canvas, ctx.variant, isSelected);
     const spec = CONTROL_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
@@ -29,6 +39,6 @@ const Tab = ({ value, children, icon, count, isDisabled }) => {
                 ? { 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: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: !isDisabled ? { bg: style.hoverBg, color: style.hoverColor } : undefined, children: [icon ? (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, boxSize: `${spec.iconSize}px`, 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] }));
+    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, display: "inline-flex", flexShrink: 0, boxSize: `${spec.iconSize}px`, 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;

package/dist/esm/Theme/chakra/focusRing.styles.js

@@ -14,6 +14,19 @@ export const focusVisibleRing = (colors) => ({
     outlineOffset: "2px",
     boxShadow: focusRingShadow(colors),
 });
+/** Blurred, never a flat band: a band has a hard outer edge at every opacity and reads as a second border. */
+export const FOCUS_GLOW_BLUR = 6;
+/** Negative spread keeps the bloom tight to the border instead of haloing the whole control. */
+export const FOCUS_GLOW_SPREAD = -1;
+/** Step on `primary.opacity`. Safe to raise because a blur has no edge to sharpen. */
+export const FOCUS_GLOW_ALPHA = 32;
+export const focusGlowShadow = (colors) => `0 0 ${FOCUS_GLOW_BLUR}px ${FOCUS_GLOW_SPREAD}px ${colors.primary.opacity[FOCUS_GLOW_ALPHA]}`;
+/** Field focus: the brand border is the indicator, this only makes it findable. */
+export const fieldFocusVisible = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: focusGlowShadow(colors),
+});
 /** Both selectors a control needs to keep the ring on top of its own hover/active styling. */
 export const focusVisibleStyles = (colors) => {
     const ring = focusVisibleRing(colors);

package/dist/esm/Theme/provider/ThemeSwitcher.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { Box, Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItemOption, MenuList, MenuOptionGroup, Text, Tooltip, } from "@chakra-ui/react";
 import { Monitor, Moon, Sun } from "lucide-react";
 import { brandThemes } from "../index.js";
 import { useCustomTheme } from "../useCustomTheme.js";
 import { useThemeMode } from "./useThemeMode.js";
+import { focusGlowShadow, focusVisibleRing } from "../chakra/focusRing.styles.js";
+import { AA_NON_TEXT, liftToContrast } from "../tokens/builders/outlineRung.js";
 const MODE_OPTIONS = [
     { value: "light", label: "Light", Icon: Sun },
     { value: "system", label: "System", Icon: Monitor },
@@ -34,25 +36,30 @@ const useSwitcherColors = () => {
         borderColor: colors.boxborder[200],
         // NOTE: menuBg lives in Menu.styles.ts — re-pushing it via `sx` flickers on every render.
         menuColor: colors.text[900],
+        focusRing: focusVisibleRing(colors),
     };
 };
 const BrandMenu = ({ size }) => {
     const { brand, setBrand } = useThemeMode();
-    const { mutedColor, menuColor } = useSwitcherColors();
+    const { mutedColor, menuColor, focusRing } = useSwitcherColors();
     const brands = Object.keys(brandThemes);
-    return (_jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: { boxShadow: "outline" }, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: brand }), _jsx(Text, { as: "span", children: toBrandLabel(brand) })] }) }), _jsx(MenuList, { minW: "9rem", color: menuColor, children: _jsx(MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => (_jsx(MenuItemOption, { value: option, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: option }), _jsx(Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) }) })] }));
+    return (_jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: focusRing, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: brand }), _jsx(Text, { as: "span", children: toBrandLabel(brand) })] }) }), _jsx(MenuList, { minW: "9rem", color: menuColor, children: _jsx(MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => (_jsx(MenuItemOption, { value: option, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: option }), _jsx(Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) }) })] }));
 };
 const IconVariant = ({ size, label, }) => {
     const { resolvedMode, toggle } = useThemeMode();
-    const { mutedColor, hoverBg } = useSwitcherColors();
+    const { mutedColor, hoverBg, focusRing } = useSwitcherColors();
     const isDark = resolvedMode === "dark";
     const Icon = isDark ? Moon : Sun;
     const accessibleLabel = label !== null && label !== void 0 ? label : `Switch to ${isDark ? "light" : "dark"} mode`;
-    return (_jsx(Tooltip, { label: accessibleLabel, openDelay: 400, children: _jsx(IconButton, { "aria-label": accessibleLabel, "aria-pressed": isDark, icon: _jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }), onClick: toggle, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }) }));
+    return (_jsx(Tooltip, { label: accessibleLabel, openDelay: 400, children: _jsx(IconButton, { "aria-label": accessibleLabel, "aria-pressed": isDark, icon: _jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }), onClick: toggle, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: focusRing }) }));
 };
 const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
     const { mode, setMode } = useThemeMode();
     const { trackBg, activeBg, activeColor, mutedColor, borderColor } = useSwitcherColors();
+    const { colors } = useCustomTheme();
+    // One tab stop, so the group wears the indicator: brand border plus the field bloom.
+    const focusBorder = liftToContrast(colors.primary[500], trackBg, AA_NON_TEXT);
+    const [showFocus, setShowFocus] = useState(false);
     const optionRefs = useRef([]);
     // APG radiogroup behavior: arrows move focus and selection together.
     const handleKeyDown = (event, index) => {
@@ -66,20 +73,20 @@ const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
         setMode(MODE_OPTIONS[next].value);
         (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    return (_jsxs(HStack, { role: "radiogroup", "aria-label": label !== null && label !== void 0 ? label : "Color mode", display: "inline-flex", spacing: 1, p: "0.25rem", bg: trackBg, border: "0.063rem solid", borderColor: borderColor, borderRadius: "full", children: [MODE_OPTIONS.map(({ value, label: optionLabel, Icon }, index) => {
+    return (_jsxs(HStack, { role: "radiogroup", "aria-label": label !== null && label !== void 0 ? label : "Color mode", display: "inline-flex", spacing: 1, p: "0.25rem", bg: trackBg, border: "0.063rem solid", borderColor: showFocus ? focusBorder : borderColor, boxShadow: showFocus ? focusGlowShadow(colors) : undefined, borderRadius: "full", onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), children: [MODE_OPTIONS.map(({ value, label: optionLabel, Icon }, index) => {
                 const isSelected = mode === value;
                 return (_jsx(Button, { ref: (node) => {
                         optionRefs.current[index] = node;
-                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { boxShadow: "outline" }, children: _jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { outline: "2px solid transparent", outlineOffset: "2px" }, children: _jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
             }), showBrandPicker && _jsx(BrandMenu, { size: size })] }));
 };
 const MenuVariant = ({ size, label, showBrandPicker, }) => {
     var _a;
     const { mode, brand, setMode, setBrand } = useThemeMode();
-    const { mutedColor, hoverBg, menuColor } = useSwitcherColors();
+    const { mutedColor, hoverBg, menuColor, focusRing } = useSwitcherColors();
     const active = (_a = MODE_OPTIONS.find((option) => option.value === mode)) !== null && _a !== void 0 ? _a : MODE_OPTIONS[0];
     const brands = Object.keys(brandThemes);
-    return (_jsxs(Menu, { children: [_jsx(MenuButton, { as: IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: _jsx(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }), _jsxs(MenuList, { minW: "10rem", color: menuColor, children: [_jsx(MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => (_jsx(MenuItemOption, { value: value, children: _jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }), _jsx(Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && (_jsxs(_Fragment, { children: [_jsx(MenuDivider, {}), _jsx(MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => (_jsx(MenuItemOption, { value: option, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: option }), _jsx(Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) })] }))] })] }));
+    return (_jsxs(Menu, { children: [_jsx(MenuButton, { as: IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: _jsx(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: focusRing }), _jsxs(MenuList, { minW: "10rem", color: menuColor, children: [_jsx(MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => (_jsx(MenuItemOption, { value: value, children: _jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }), _jsx(Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && (_jsxs(_Fragment, { children: [_jsx(MenuDivider, {}), _jsx(MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => (_jsx(MenuItemOption, { value: option, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: option }), _jsx(Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) })] }))] })] }));
 };
 export const ThemeSwitcher = ({ variant = "icon", showBrandPicker = false, size = "md", "aria-label": ariaLabel, }) => {
     if (variant === "segmented") {

package/package.json

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