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

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.45",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",