pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.67

package/dist/Hooks/useScrollableRegion.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollableRegion = useScrollableRegion;
+const react_1 = require("react");
+const sharedResizeObserver_1 = require("./sharedResizeObserver");
+const FOCUSABLE_CONTENT = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, iframe, [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+const USER_SCROLLABLE = /auto|scroll/;
+const SLACK_PX = 1;
+const needsFocusStop = (el) => {
+    const { overflowX, overflowY } = getComputedStyle(el);
+    const scrollsX = USER_SCROLLABLE.test(overflowX) && el.scrollWidth > el.clientWidth + SLACK_PX;
+    const scrollsY = USER_SCROLLABLE.test(overflowY) && el.scrollHeight > el.clientHeight + SLACK_PX;
+    return (scrollsX || scrollsY) && !el.querySelector(FOCUSABLE_CONTENT);
+};
+function useScrollableRegion({ label, labelledBy, keepRole = false, } = {}) {
+    const [element, setElement] = (0, react_1.useState)(null);
+    const [isStop, setIsStop] = (0, react_1.useState)(false);
+    const measure = (0, react_1.useCallback)(() => setIsStop(element !== null && needsFocusStop(element)), [element]);
+    (0, react_1.useEffect)(() => {
+        if (!element)
+            return undefined;
+        return (0, sharedResizeObserver_1.observeResize)(element, measure);
+    }, [element, measure]);
+    // NOTE: also runs after every commit; an equal state bails out, so no loop.
+    (0, react_1.useEffect)(measure);
+    const named = Boolean(label || labelledBy);
+    const props = isStop
+        ? {
+            tabIndex: 0,
+            role: named && !keepRole ? "region" : undefined,
+            "aria-label": label,
+            "aria-labelledby": labelledBy,
+        }
+        : {};
+    return { ref: setElement, props };
+}

package/dist/Hooks/useSidebarPrefs.d.ts

@@ -3,6 +3,7 @@ export type SidebarPrefs = {
     collapsed: boolean;
     mobileOpen: boolean;
 };
+/** Persistence key and first-visit defaults for sidebar preferences. */
 export type UseSidebarPrefsOptions = {
     /** localStorage key. Versioned so a future shape change can bump it. */
     storageKey?: string;

package/dist/Theme/chakra/Menu.styles.d.ts

@@ -14,6 +14,10 @@ export declare const Menu: {
             borderStyle: string;
             borderColor: string;
         };
+        divider: {
+            opacity?: number | undefined;
+            borderColor: string;
+        };
         item: {
             color: string;
             minH: string;

package/dist/Theme/chakra/Menu.styles.js

@@ -8,6 +8,8 @@ const optionRowInk_1 = require("../../Components/Select/optionRowInk");
 const optionRowSizes_1 = require("../tokens/primitives/optionRowSizes");
 const paletteFromTheme_1 = require("./paletteFromTheme");
 const overlay_styles_1 = require("./overlay.styles");
+const accentText_1 = require("../tokens/builders/accentText");
+const surfaceRaised_1 = require("../tokens/builders/surfaceRaised");
 const itemRowSpec = optionRowSizes_1.OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
 const $bg = (0, react_1.cssVar)("menu-bg");
@@ -28,6 +30,10 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderColor: colors.boxborder[200],
             ...overlay_styles_1.POPUP_SURFACE,
         },
+        divider: {
+            borderColor: (0, surfaceRaised_1.raisedRule)(colors),
+            ...((0, accentText_1.isDarkCanvas)(colors.surfaceRaised) && { opacity: 1 }),
+        },
         item: {
             color: (0, optionRowInk_1.optionRowInk)(colors, false),
             minH: itemRowSpec.minH,

package/dist/Theme/chakra/componentStyles.d.ts

@@ -181,6 +181,10 @@ export declare const componentStyles: {
                 borderStyle: string;
                 borderColor: string;
             };
+            divider: {
+                opacity?: number | undefined;
+                borderColor: string;
+            };
             item: {
                 color: string;
                 minH: string;

package/dist/Theme/chakra/componentStyles.js

@@ -77,7 +77,7 @@ const Badge = {
         size: "sm",
     },
 };
-// NOTE: fixes Chakra's FormErrorMessage/Icon hardcoding red.500 — same AA gap as our ErrorComponent.
+// NOTE: fixes Chakra's FormErrorMessage/Icon hardcoding red.500, which misses AA on the canvas.
 const FormError = {
     baseStyle: ({ theme }) => {
         const palette = (0, paletteFromTheme_1.paletteOf)(theme);

package/dist/Theme/chakra/createBrandTheme.d.ts

@@ -1,5 +1,6 @@
 import type { PaletteProps, ResolvedColorMode } from "../tokens/types";
 import { type ReducedMotionScope } from "./motion";
+/** Colour mode and reduced-motion scope for a built brand theme. */
 export interface CreateBrandThemeOptions {
     /** Which palette this theme represents. Defaults to `light`. */
     colorMode?: ResolvedColorMode;

package/dist/Theme/chakra/focusRing.styles.d.ts

@@ -10,7 +10,7 @@ type WithBrandGlow = {
     primary: BrandScale;
 };
 export declare const focusRingShadow: (colors: WithFocusRing) => string;
-/** For controls whose rounded shell clips overflow: the same halo and ring, drawn inside the border box. */
+/** For controls whose shell clips overflow: ring on the edge, halo inside, so an opaque child leaves the ring. */
 export declare const insetFocusRingShadow: (colors: WithFocusRing) => string;
 export declare const FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
 export declare const focusVisibleRing: (colors: WithFocusRing) => {

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

@@ -10,9 +10,9 @@ exports.FOCUS_RING_WIDTH = 4;
 const focusRingShadow = (colors) => `0 0 0 ${exports.FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
     `0 0 0 ${exports.FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
 exports.focusRingShadow = focusRingShadow;
-/** For controls whose rounded shell clips overflow: the same halo and ring, drawn inside the border box. */
-const insetFocusRingShadow = (colors) => `inset 0 0 0 ${exports.FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
-    `inset 0 0 0 ${exports.FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
+/** For controls whose shell clips overflow: ring on the edge, halo inside, so an opaque child leaves the ring. */
+const insetFocusRingShadow = (colors) => `inset 0 0 0 ${exports.FOCUS_RING_WIDTH - exports.FOCUS_HALO_WIDTH}px ${colors.focusRing.ring}, ` +
+    `inset 0 0 0 ${exports.FOCUS_RING_WIDTH}px ${colors.focusRing.halo}`;
 exports.insetFocusRingShadow = insetFocusRingShadow;
 // NOTE: stacked pseudo-classes raise specificity above Chakra's _hover, so a hovered+focused button keeps its ring.
 exports.FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";

package/dist/Theme/chakra/paletteFromTheme.d.ts

@@ -3,4 +3,5 @@ import type { ColorScale, PaletteProps } from "../tokens/types";
 export declare const paletteOf: (theme: {
     colors?: unknown;
 }) => PaletteProps;
-export declare const scaleFor: (palette: PaletteProps, colorScheme: string) => ColorScale;
+export declare const warnUnknownColorScheme: (colorScheme: string) => void;
+export declare const scaleFor: (palette: PaletteProps, colorScheme: string, fallback?: ColorScale) => ColorScale;

package/dist/Theme/chakra/paletteFromTheme.js

@@ -1,11 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.scaleFor = exports.paletteOf = void 0;
+exports.scaleFor = exports.warnUnknownColorScheme = exports.paletteOf = void 0;
 const assertPalette_1 = require("../assertPalette");
+const paletteScale_1 = require("../tokens/builders/paletteScale");
 /** Chakra hands style functions an untyped theme; this is the boundary that makes it typed. */
 const paletteOf = (theme) => (0, assertPalette_1.assertPixelizePalette)(theme);
 exports.paletteOf = paletteOf;
-const asScale = (value) => typeof value === "object" && value !== null ? value : undefined;
-// NOTE: colorScheme is consumer-supplied and can name a built-in we never themed — unknowns resolve to gray.
-const scaleFor = (palette, colorScheme) => { var _a; return (_a = asScale(palette[colorScheme])) !== null && _a !== void 0 ? _a : palette.gray; };
+const warned = new Set();
+const warnUnknownColorScheme = (colorScheme) => {
+    if (process.env.NODE_ENV === "production" || warned.has(colorScheme))
+        return;
+    warned.add(colorScheme);
+    console.warn(`[pixelize-design-library] colorScheme "${colorScheme}" is not a themed colour scale; using the fallback scale.`);
+};
+exports.warnUnknownColorScheme = warnUnknownColorScheme;
+// NOTE: colorScheme is consumer-supplied and can name a built-in we never themed — unknowns use the fallback.
+const scaleFor = (palette, colorScheme, fallback = palette.gray) => {
+    const scale = (0, paletteScale_1.scaleNamed)(palette, colorScheme);
+    if (scale)
+        return scale;
+    (0, exports.warnUnknownColorScheme)(colorScheme);
+    return fallback;
+};
 exports.scaleFor = scaleFor;

package/dist/Theme/provider/PixelizeThemeProvider.d.ts

@@ -9,6 +9,7 @@ export type ThemeModeContextValue = {
     brand: ThemeName;
     setBrand: (brand: ThemeName) => void;
 };
+/** Brand and mode state, persisted to localStorage unless `disablePersistence` is set. */
 export type PixelizeThemeProviderProps = {
     children: React.ReactNode;
     brand?: ThemeName;

package/dist/Theme/provider/ThemeSwitcher.d.ts

@@ -1,3 +1,4 @@
+/** Control for switching light, dark or system mode, and optionally the brand. */
 export type ThemeSwitcherProps = {
     variant?: "icon" | "segmented" | "menu";
     showBrandPicker?: boolean;

package/dist/Theme/provider/ThemeSwitcher.js

@@ -81,7 +81,7 @@ const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
                 const isSelected = mode === value;
                 return ((0, jsx_runtime_1.jsx)(react_2.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: { outline: "2px solid transparent", outlineOffset: "2px" }, children: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, tabIndex: isSelected ? 0 : -1, 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: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
             }), showBrandPicker && (0, jsx_runtime_1.jsx)(BrandMenu, { size: size })] }));
 };
 const MenuVariant = ({ size, label, showBrandPicker, }) => {

package/dist/Theme/testing/testPalette.d.ts

@@ -4,6 +4,7 @@ export type DeepPartial<T> = T extends string ? T : {
     [K in keyof T]?: DeepPartial<T[K]>;
 };
 export type PaletteOverrides = DeepPartial<PaletteProps>;
+/** Brand, mode and group overrides for a test palette. */
 export type TestPaletteOptions = {
     brand?: ThemeName;
     mode?: ResolvedColorMode;

package/dist/Theme/tokens/builders/buildDarkPalette.d.ts

@@ -8,6 +8,7 @@ export declare const accentLightnessDelta: (accent500: string, white: string) =>
 export declare const liftScale: (scale: ColorScale, delta: number) => ColorScale;
 /** `lifted`: the card sits a CARD_LIFT step above the canvas. `flat`: the card is the canvas. */
 export type DarkPlanes = "lifted" | "flat";
+/** Card plane choice; defaults to `lifted`. */
 export interface DarkPaletteOptions {
     planes?: DarkPlanes;
 }

package/dist/Theme/tokens/builders/filledSurface.js

@@ -41,8 +41,9 @@ const solidFillRung = (scale, white, canvas) => {
 };
 exports.solidFillRung = solidFillRung;
 const steppedRung = (base, canvas, step) => {
-    const dir = (0, accentText_1.isDarkCanvas)(canvas) ? -100 : 100;
-    return Math.min(900, Math.max(50, base + dir * step));
+    const dir = (0, accentText_1.isDarkCanvas)(canvas) ? -1 : 1;
+    const index = RUNGS.indexOf(base) + dir * step;
+    return RUNGS[Math.min(RUNGS.length - 1, Math.max(0, index))];
 };
 const steppedTowardBase = (from, base) => RUNGS[RUNGS.indexOf(from) + (from > base ? -1 : 1)];
 /**

package/dist/Theme/tokens/builders/focusRing.js

@@ -4,6 +4,7 @@ exports.withFocusRing = exports.buildFocusRing = exports.focusRingBackdrops = vo
 exports.settleBetween = settleBetween;
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
+const planeStep_1 = require("./planeStep");
 /** Same lightness granularity `buildDarkPalette` walks its accents at. */
 const LIGHTNESS_STEP = 0.5;
 // NOTE: not settleAcross — a ring squeezed between a light canvas and a dark fill needs the closest color that clears both, not a per-surface lift.
@@ -25,10 +26,12 @@ function settleBetween(hex, backdrops, target = outlineRung_1.AA_NON_TEXT) {
     const worst = (candidate) => Math.min(...backdrops.map((backdrop) => (0, color_1.contrastRatio)(candidate, backdrop)));
     return worst(ends[0]) >= worst(ends[1]) ? ends[0] : ends[1];
 }
-// NOTE: only canvas + card surface — including the fill or every named surface leaves no solvable hue.
+// NOTE: canvas, card and the table header band — including the fill or every named surface leaves no solvable hue.
 const focusRingBackdrops = (source) => [
     source.backgroundColor.main,
     source.background[50],
+    source.backgroundColor.tableHeader,
+    (0, planeStep_1.bandOn)(source.backgroundColor.tableHeader, source.background[50]),
 ];
 exports.focusRingBackdrops = focusRingBackdrops;
 // NOTE: replaces Chakra's stock ring (a fixed blue that measured under 2:1 on every brand).

package/dist/Theme/tokens/builders/paletteScale.d.ts

@@ -0,0 +1,2 @@
+import type { ColorScale, PaletteProps } from "../types";
+export declare const scaleNamed: (colors: PaletteProps, name: string) => ColorScale | undefined;

package/dist/Theme/tokens/builders/paletteScale.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scaleNamed = void 0;
+const isColorScale = (value) => typeof value === "object" && value !== null && "500" in value;
+const scaleNamed = (colors, name) => {
+    const entries = colors;
+    const value = entries[name];
+    return isColorScale(value) ? value : undefined;
+};
+exports.scaleNamed = scaleNamed;

package/dist/Theme/tokens/types.d.ts

@@ -74,6 +74,7 @@ export type BoxShadowTokens = {
     error: string;
     default: string;
 };
+/** Full per-brand colour palette, one per brand per colour mode. */
 export type PaletteProps = {
     gradient: {
         from: string;

package/dist/Utils/accountHandoff.d.ts

@@ -1,4 +1,5 @@
 export declare function isAllowedReturnUrl(url: string): boolean;
+/** Fallback origin used when the return URL param is missing or disallowed. */
 export type ResolveReturnUrlOptions = {
     /** App-specific fallback (e.g. its own origin) used when the param is missing/disallowed. */
     defaultReturnUrl?: string;
@@ -17,12 +18,14 @@ export type AccountHandoffConfig = {
     /** Where Account returns the user to. Defaults to this app's own origin. */
     buildReturnUrl?: (orgId?: number | string | null) => string;
 };
+/** Query values carried to Account: source app, return URL, org and token. */
 export type AccountHandoffLinkOptions = {
     sourceApp?: string;
     returnUrl?: string;
     orgId?: number | string | null;
     token?: string | null;
 };
+/** Link options plus the user to open on the Account users page. */
 export type AccountHandoffUsersOptions = AccountHandoffLinkOptions & {
     userId?: number | string | null;
 };

package/dist/Utils/price.d.ts

@@ -1,3 +1,4 @@
+/** Currency and locale override the INR and en-IN defaults. */
 export type PriceFormatOptions = {
     currency?: string;
     locale?: string;

package/dist/Utils/tabular.d.ts

@@ -0,0 +1,30 @@
+/** One spreadsheet cell; `null` and `undefined` write an empty cell. */
+export type TabularCell = string | number | boolean | null | undefined;
+interface TabularColumnBase<Row, K extends keyof Row> {
+    /** Row field the cell reads, the same `key` a table column uses. */
+    readonly key: K;
+    /** Text of the header line. */
+    readonly header: string;
+    /** Turns the field into a cell; required when the field is not a scalar. */
+    readonly format?: (value: Row[K], row: Row) => TabularCell;
+    /** Default true: formula-like text gets a leading `'` so it is shown, not run. */
+    readonly escapeFormulas?: boolean;
+}
+/** One exported column; `format` is required when the field is not a scalar. */
+export type TabularColumn<Row> = {
+    [K in keyof Row & string]: Row[K] extends TabularCell ? TabularColumnBase<Row, K> : TabularColumnBase<Row, K> & {
+        readonly format: (value: Row[K], row: Row) => TabularCell;
+    };
+}[keyof Row & string];
+/** Options for `toCsv`. */
+export interface ToCsvOptions {
+    /** Prepends a UTF-8 byte-order mark so Excel reads non-ASCII. Default false. */
+    readonly bom?: boolean;
+}
+/** RFC 4180 CSV: header line, then one CRLF-separated line per row. */
+export declare function toCsv<Row extends object>(rows: readonly Row[], columns: readonly TabularColumn<Row>[], { bom }?: ToCsvOptions): string;
+/** Replaces path and reserved characters with `-`; caps at 80 characters, keeping the extension. */
+export declare function safeFileName(fileName: string): string;
+/** Saves `blob` as `safeFileName(fileName)`, then revokes its object URL. */
+export declare function downloadBlob(blob: Blob, fileName: string): void;
+export {};

package/dist/Utils/tabular.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCsv = toCsv;
+exports.safeFileName = safeFileName;
+exports.downloadBlob = downloadBlob;
+const NEEDS_QUOTES = /[",\r\n]/;
+const FORMULA_TRIGGER = /^[=+\-@\t\r]/;
+const PLAIN_NUMBER = /^[+-]?(?:\d[\d,]*(?:\.\d*)?|\.\d+)%?$/;
+const BOM = "";
+const RESERVED_FILE_CHARS = /[\\/:*?"<>|\p{Cc}]/gu;
+const MAX_FILE_NAME = 80;
+const REVOKE_DELAY_MS = 1000;
+const quote = (text) => (NEEDS_QUOTES.test(text) ? `"${text.replace(/"/g, '""')}"` : text);
+const looksLikeFormula = (text) => FORMULA_TRIGGER.test(text) && !PLAIN_NUMBER.test(text);
+function cellText(value, escapeFormulas) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "number")
+        return Number.isFinite(value) ? String(value) : "";
+    const text = String(value);
+    if (typeof value !== "string" || !escapeFormulas)
+        return text;
+    return looksLikeFormula(text) ? `'${text}` : text;
+}
+function readCell(row, column) {
+    const field = row[column.key];
+    const format = column.format;
+    return format === undefined ? field : format(field, row);
+}
+/** RFC 4180 CSV: header line, then one CRLF-separated line per row. */
+function toCsv(rows, columns, { bom = false } = {}) {
+    if (columns.length === 0)
+        return "";
+    const lines = [columns.map((column) => quote(column.header)).join(",")];
+    for (const row of rows) {
+        lines.push(columns.map((column) => quote(cellText(readCell(row, column), column.escapeFormulas !== false))).join(","));
+    }
+    return (bom ? BOM : "") + lines.join("\r\n");
+}
+/** Replaces path and reserved characters with `-`; caps at 80 characters, keeping the extension. */
+function safeFileName(fileName) {
+    const cleaned = fileName.replace(RESERVED_FILE_CHARS, "-").trim().replace(/^[.\s]+/, "");
+    if (cleaned === "")
+        return "export";
+    if (cleaned.length <= MAX_FILE_NAME)
+        return cleaned;
+    const dot = cleaned.lastIndexOf(".");
+    const extension = dot > 0 && cleaned.length - dot <= 8 ? cleaned.slice(dot) : "";
+    return cleaned.slice(0, MAX_FILE_NAME - extension.length).replace(/[\uD800-\uDBFF]$/, "") + extension;
+}
+/** Saves `blob` as `safeFileName(fileName)`, then revokes its object URL. */
+function downloadBlob(blob, fileName) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = safeFileName(fileName);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), REVOKE_DELAY_MS);
+}

package/dist/esm/Components/Accordion/Accordion.js

@@ -7,6 +7,7 @@ import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { accordionFocusRing, getAccordionHoverColors } from "./accordionColors.js";
+const HEADER_ACTION_RIGHT = "3.25rem";
 /** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = useCustomTheme();
@@ -19,14 +20,16 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
             return (_jsx(AccordionItem, { border: "1px solid", borderColor: border, borderRadius: "xl", bg: colors.background[50], boxShadow: "none", mb: 3, overflow: "hidden", _last: { mb: 0 }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
-                    var _a, _b, _c;
-                    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: transitionFor(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
-                                        ...reducedMotionSx(),
-                                        ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
-                                        "&:hover": {
-                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
-                                        },
-                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform", "color", "background-color"], "base"), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
+                    var _a, _b, _c, _d, _e;
+                    return (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "h2", position: item.headerAction ? "relative" : undefined, sx: item.headerAction
+                                    ? { "&:hover > button": { background: isExpanded ? expandedBg : softHover, ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.hoverbuttonStyle } }
+                                    : undefined, children: [_jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: transitionFor(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
+                                            ...reducedMotionSx(),
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle,
+                                            "&:hover": {
+                                                ...(_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.hoverbuttonStyle,
+                                            },
+                                        }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform", "color", "background-color"], "base"), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16 }) })] }), item.headerAction && (_jsx(Flex, { position: "absolute", top: "50%", right: HEADER_ACTION_RIGHT, transform: "translateY(-50%)", align: "center", sx: (_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.headerActionStyle, children: item.headerAction }))] }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/esm/Components/Accordion/accordionColors.js

@@ -1,6 +1,6 @@
 import { compositeOver } from "../../Theme/tokens/builders/color.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
-import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../Theme/chakra/focusRing.styles.js";
+import { insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
 // NOTE: light softHover measured 1.04-1.11 (invisible) unresolved — both modes now resolve against the rest surface.
 const MIN_HOVER_STEP = 1.15;
 export const getAccordionHoverColors = (colors, isDark) => {
@@ -21,6 +21,5 @@ export const getAccordionHoverColors = (colors, isDark) => {
 export const accordionFocusRing = (colors) => ({
     outline: "2px solid transparent",
     outlineOffset: "-2px",
-    boxShadow: `inset 0 0 0 ${FOCUS_RING_WIDTH - FOCUS_HALO_WIDTH}px ${colors.focusRing.ring}, ` +
-        `inset 0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.halo}`,
+    boxShadow: insetFocusRingShadow(colors),
 });

package/dist/esm/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useTheme } from "@chakra-ui/react";
 import ToolTip from "../../ToolTip/ToolTip.js";
-import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { chartMode, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseTooltip } from "../chartBase.js";
 import LazyReactApexChart from "../LazyReactApexChart.js";
 import ApexChartFallback from "../ApexChartFallback.js";
@@ -92,6 +92,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
             zoom: { enabled: !isSmall },
             toolbar: { show: showToolbar },
         }),
+        theme: { mode: chartMode(palette) },
         stroke: { curve: "smooth", width: 2, lineCap: "round" },
         colors: resolvedLineColors,
         xaxis: {

package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -5,6 +5,7 @@ import { chartInk, chartMode, getDefaultSeriesColors, labelOnSeries, mergeChartT
 import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
 import LazyReactApexChart from "../LazyReactApexChart.js";
 import ApexChartFallback from "../ApexChartFallback.js";
+import { pieImageTexture } from "./pieImageTexture.js";
 const getValidLegendPosition = (position) => {
     const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
@@ -14,7 +15,7 @@ const getValidLegendPosition = (position) => {
     return "bottom";
 };
 /** Pie/donut chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
-const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", }) => {
+const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", images, }) => {
     var _a;
     const { colors: palette } = useCustomTheme();
     const ink = chartInk(palette);
@@ -31,6 +32,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
             ? "outside"
             : "none"
         : labelPlacement;
+    const sliceCount = data.length;
     const labelsOn = showDataLabels && placement !== "none";
     const outside = placement === "outside";
     const validLegendPosition = getValidLegendPosition(legendPosition);
@@ -87,10 +89,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
                     fill: {
                         type: "image",
                         image: {
-                            src: [
-                                "https://i.imgur.com/UM3mrju.jpg",
-                                "https://i.imgur.com/NpPOqQq.jpg",
-                            ],
+                            src: images !== null && images !== void 0 ? images : Array.from({ length: sliceCount }, (_, i) => pieImageTexture(seriesColors[i % seriesColors.length], gap)),
                         },
                     },
                 };
@@ -180,6 +179,8 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         totalLabel,
         ink.muted,
         ink.text,
+        images,
+        sliceCount,
     ]);
     return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }) }));
 };

package/dist/esm/Components/Apexcharts/ApexPieChart/pieImageTexture.js

@@ -0,0 +1,10 @@
+const SIZE = 400;
+/** A diagonal-stripe SVG data URI: `color` ground with translucent `stripe` bands, no network. */
+export function pieImageTexture(color, stripe) {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">` +
+        `<defs><pattern id="s" width="24" height="24" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">` +
+        `<rect width="10" height="24" fill="${stripe}" fill-opacity="0.28"/></pattern></defs>` +
+        `<rect width="${SIZE}" height="${SIZE}" fill="${color}"/>` +
+        `<rect width="${SIZE}" height="${SIZE}" fill="url(#s)"/></svg>`;
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}

package/dist/esm/Components/AppSwitcher/AppSwitcher.js

@@ -12,6 +12,9 @@ import Kbd from "../Kbd/Kbd.js";
 import AppMark, { assignAppHues } from "./AppMark.js";
 import { filterApps, formatShortcut, } from "./AppSwitcherProps.js";
 import { useAppSwitcherShortcut } from "./useAppSwitcherShortcut.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_BORDER_COLOR_TRANSITION = transitionFor(["background", "border-color"]);
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 const COLUMNS = 2;
 const HEADING = "Your apps";
 const s = { trigger: "36px", mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
@@ -182,7 +185,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
     const currentSub = liftToContrast(theme.colors.textMuted, currentBg, AA_NORMAL_TEXT);
     const width = panelWidth !== null && panelWidth !== void 0 ? panelWidth : "28rem";
     const hint = shortcut && showShortcutHint ? formatShortcut(shortcut) : null;
-    return (_jsxs(Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: "background 0.15s ease, border-color 0.15s ease", _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
+    return (_jsxs(Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: BACKGROUND_BORDER_COLOR_TRANSITION, _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
                         if (!isOpen) {
                             if (e.key === "ArrowDown") {
                                 e.preventDefault();
@@ -191,7 +194,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                             return;
                         }
                         handlePanelKeyDown(e);
-                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && _jsx(Kbd, { size: "xs", children: hint })] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: "float", _focus: { outline: "none", boxShadow: "float" }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && _jsx(Kbd, { size: "xs", children: hint })] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && visible.length > 0) {
                                                 e.preventDefault();
                                                 focusItem(0);
@@ -229,7 +232,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                                                     borderEndStartRadius: "lg",
                                                     bg: currentBar,
                                                 }
-                                                : undefined, transition: "background 0.12s ease", _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [_jsx(AppMark, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Flex, { align: "center", gap: 1.5, children: [_jsx(Text, { fontSize: s.name, fontWeight: 600, color: app.locked
+                                                : undefined, transition: BACKGROUND_TRANSITION, _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [_jsx(AppMark, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Flex, { align: "center", gap: 1.5, children: [_jsx(Text, { fontSize: s.name, fontWeight: 600, color: app.locked
                                                                         ? theme.colors.textMuted
                                                                         : isCurrent
                                                                             ? currentName