pixelize-design-library 2.4.2-beta.2 → 2.4.2-beta.21

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

@@ -159,42 +159,40 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
      * `data-mode` for consumers that want to hook their own dark CSS.
      */
     useLayoutEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g;
         const root = document.documentElement;
         root.dataset.mode = resolvedMode;
-        const colors = resolvedTheme.colors;
-        const sem = (_a = colors.semantic) !== null && _a !== void 0 ? _a : {};
-        const gray = colors.gray;
+        const { colors } = resolvedTheme;
+        const { gray, semantic } = colors;
         const HUE_SCALES = [
             "primary", "gray", "red", "orange", "yellow",
             "green", "teal", "blue", "cyan", "purple", "pink",
         ];
-        const SEMANTIC_SCALES = ["success", "error", "warning", "info"]; // nested under colors.semantic
+        const SEMANTIC_SCALES = ["success", "error", "warning", "info"];
         const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
-        // Single-value semantic vars → palette scale+rung. The dark gray ramp runs dark(50) → light(900),
-        // so low rungs read as surfaces and high rungs as text — correct in dark, cleared in light.
+        // The dark gray ramp runs dark(50) → light(900), so low rungs read as surfaces
+        // and high rungs as text — correct in dark, cleared in light.
         const SEMANTIC_VARS = {
-            "text-heading": gray === null || gray === void 0 ? void 0 : gray[900], "text-body": gray === null || gray === void 0 ? void 0 : gray[700],
-            "text-subtle": gray === null || gray === void 0 ? void 0 : gray[500], "text-input": gray === null || gray === void 0 ? void 0 : gray[500],
-            "bg-main": gray === null || gray === void 0 ? void 0 : gray[50], "bg-secondary": gray === null || gray === void 0 ? void 0 : gray[100], "bg-tertiary": gray === null || gray === void 0 ? void 0 : gray[100],
-            "bg-quaternary": gray === null || gray === void 0 ? void 0 : gray[200], "bg-light": gray === null || gray === void 0 ? void 0 : gray[50], "bg-medium": gray === null || gray === void 0 ? void 0 : gray[100],
-            "bg-accent": gray === null || gray === void 0 ? void 0 : gray[200], "bg-subtle": gray === null || gray === void 0 ? void 0 : gray[100], "bg-muted": gray === null || gray === void 0 ? void 0 : gray[200],
-            "bg-neutral": gray === null || gray === void 0 ? void 0 : gray[100], "bg-base": gray === null || gray === void 0 ? void 0 : gray[50], "bg-table-header": gray === null || gray === void 0 ? void 0 : gray[100],
-            "border-default": gray === null || gray === void 0 ? void 0 : gray[200], "border-light": gray === null || gray === void 0 ? void 0 : gray[100],
-            "border-dark": gray === null || gray === void 0 ? void 0 : gray[300], "border-input": gray === null || gray === void 0 ? void 0 : gray[300],
-            "border-error": (_b = sem.error) === null || _b === void 0 ? void 0 : _b[500], "border-success": (_c = sem.success) === null || _c === void 0 ? void 0 : _c[500],
-            "border-warning": (_d = sem.warning) === null || _d === void 0 ? void 0 : _d[500], "border-info": (_e = sem.info) === null || _e === void 0 ? void 0 : _e[500],
+            "text-heading": gray[900], "text-body": gray[700],
+            "text-subtle": gray[500], "text-input": gray[500],
+            "bg-main": gray[50], "bg-secondary": gray[100], "bg-tertiary": gray[100],
+            "bg-quaternary": gray[200], "bg-light": gray[50], "bg-medium": gray[100],
+            "bg-accent": gray[200], "bg-subtle": gray[100], "bg-muted": gray[200],
+            "bg-neutral": gray[100], "bg-base": gray[50], "bg-table-header": gray[100],
+            "border-default": gray[200], "border-light": gray[100],
+            "border-dark": gray[300], "border-input": gray[300],
+            "border-error": semantic.error[500], "border-success": semantic.success[500],
+            "border-warning": semantic.warning[500], "border-info": semantic.info[500],
         };
-        const set = (name, val) => val && root.style.setProperty(`--color-${name}`, val);
+        const set = (name, val) => root.style.setProperty(`--color-${name}`, val);
         const clear = (name) => root.style.removeProperty(`--color-${name}`);
         const allRampNames = [...HUE_SCALES, ...SEMANTIC_SCALES].flatMap((s) => RUNGS.map((r) => `${s}-${r}`));
         if (resolvedMode === "dark") {
             for (const s of HUE_SCALES)
                 for (const r of RUNGS)
-                    set(`${s}-${r}`, (_f = colors[s]) === null || _f === void 0 ? void 0 : _f[r]);
+                    set(`${s}-${r}`, colors[s][r]);
             for (const s of SEMANTIC_SCALES)
                 for (const r of RUNGS)
-                    set(`${s}-${r}`, (_g = sem[s]) === null || _g === void 0 ? void 0 : _g[r]);
+                    set(`${s}-${r}`, semantic[s][r]);
             for (const [name, val] of Object.entries(SEMANTIC_VARS))
                 set(name, val);
         }

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

@@ -22,33 +22,26 @@ const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
  * the dot always matches what selecting that brand actually looks like,
  * regardless of which brand/mode is currently active.
  */
-const brandSwatchColor = (brand) => {
-    var _a, _b, _c, _d, _e;
-    return (_e = (_d = (_c = (_b = (_a = brandThemes[brand]) === null || _a === void 0 ? void 0 : _a.light) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.400";
+const brandSwatchColor = (brand) => brandThemes[brand].light.colors.primary[500];
+const BrandSwatch = ({ brand }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0 }));
 };
-const BrandSwatch = ({ brand }) => (_jsx(Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: "whiteAlpha.300", flexShrink: 0 }));
 /**
  * Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
  * are read straight from the active theme — no `useColorModeValue` pairing needed here.
- * Fallbacks are Chakra token names, never literal colors, for themes without a brand palette.
  */
 const useSwitcherColors = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
-    const colors = useCustomTheme().colors;
+    const { colors } = useCustomTheme();
     return {
-        trackBg: (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.secondary) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : "gray.100",
-        activeBg: (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : colors === null || colors === void 0 ? void 0 : colors.white) !== null && _g !== void 0 ? _g : "white",
-        activeColor: (_l = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500]) !== null && _j !== void 0 ? _j : (_k = colors === null || colors === void 0 ? void 0 : colors.text) === null || _k === void 0 ? void 0 : _k[900]) !== null && _l !== void 0 ? _l : "inherit",
-        mutedColor: (_q = (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[600]) !== null && _o !== void 0 ? _o : (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[600]) !== null && _q !== void 0 ? _q : "gray.600",
-        hoverBg: (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[100]) !== null && _s !== void 0 ? _s : "gray.100",
-        borderColor: (_w = (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.border) === null || _t === void 0 ? void 0 : _t[200]) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _v === void 0 ? void 0 : _v[200]) !== null && _w !== void 0 ? _w : "gray.200",
-        // `--menu-bg` (and its hover/focus/active states) is now fixed centrally in the theme's
-        // Menu component style (Theme/chakra/Menu.styles.ts) — every MenuList gets it from there.
-        // Re-deriving it here too and pushing it back via `sx` on every render caused a redundant
-        // Emotion style recompute per render, which showed up as flicker while hovering/scrolling
-        // this list. Keep menuColor (Menu.styles.ts doesn't set list `color` per this component's
-        // needs) but stop duplicating menuBg.
-        menuColor: (_0 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[900]) !== null && _0 !== void 0 ? _0 : "gray.900",
+        trackBg: colors.backgroundColor.secondary,
+        activeBg: colors.backgroundColor.main,
+        activeColor: colors.primary[500],
+        mutedColor: colors.text[600],
+        hoverBg: colors.gray[100],
+        borderColor: colors.boxborder[200],
+        // NOTE: menuBg lives in Menu.styles.ts — re-pushing it via `sx` flickers on every render.
+        menuColor: colors.text[900],
     };
 };
 const BrandMenu = ({ size }) => {

package/dist/esm/Theme/tokens/brands/lavender/palette.light.js

@@ -186,12 +186,8 @@ const disabled = {
     800: "#625d75",
     900: "#4b4759",
 };
-// Two-tone brand gradient (violet → pink). Each theme overrides with its own pair.
-// `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
-// original let white drop to 3.53 there (`from` already passed at 5.76, unchanged).
-// Nudged one step further (4.511 -> 4.609): the first pass cleared AA by <0.02, too thin a
-// margin to trust against rounding/rendering variance.
-const gradient = { from: "#8B3FC8", to: "#df187a" };
+// Single-hue gradient: white clears AA by margin, not by hundredths. See gradientTone.test.ts.
+const gradient = { from: "#8b3fc8", to: "#762d9d" };
 const palette = {
     gradient,
     primary,

package/dist/esm/Theme/tokens/brands/slate/palette.light.js

@@ -18,11 +18,7 @@ const primary = {
 const palette = {
     ...neutralTokens,
     ...buildBrandInk(PRIMARY_500),
-    // `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
-    // original let white drop to 2.98 there (`from` already passed at 4.83, unchanged).
-    // Nudged one step further (4.520 -> 4.608): the first pass cleared AA by <0.02, too thin a
-    // margin to trust against rounding/rendering variance.
-    gradient: { from: "#6b7280", to: "#5664f6" }, // slate gray → indigo
+    gradient: { from: "#666d7a", to: "#4a4e59" },
     primary,
     tertiary: { ...primary },
     gray: {

package/dist/esm/Theme/tokens/builders/chartColorsFromTheme.js

@@ -25,7 +25,7 @@ export function chartInk(colors) {
         surface,
         text: colors.text[900],
         muted: colors.text[500],
-        grid: colors.border[500],
+        grid: colors.boxborder[200],
         axis: colors.text[500],
         tooltipBg: colors.backgroundColor.secondary,
     };

package/dist/esm/Theme/tokens/builders/gradientInk.js

@@ -0,0 +1,22 @@
+import { onGradient } from "./accentText.js";
+import { resolveAvatarFill } from "./statusTone.js";
+/**
+ * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient
+ * otherwise flips `onGradient` to black ink, so the same element reads white-on-colour in one
+ * brand and black-on-pastel in the next.
+ */
+export const inkSafeGradient = (gradient) => ({
+    from: resolveAvatarFill(gradient.from),
+    to: resolveAvatarFill(gradient.to),
+});
+/**
+ * The only correct way to paint text on a gradient: returns the stops to draw AND the ink for
+ * them. Calling `onGradient` on raw stops is the black-text bug — it picks ink for a backdrop
+ * that is then painted differently.
+ */
+export const resolveGradient = (gradient, white, black) => {
+    const { from, to } = inkSafeGradient(gradient);
+    return { from, to, ink: onGradient(from, to, white, black) };
+};
+/** `linear-gradient(...)` for a resolved pair — one spelling of the CSS everywhere. */
+export const gradientCss = (g, angle = "135deg") => `linear-gradient(${angle}, ${g.from} 0%, ${g.to} 100%)`;

package/dist/esm/Theme/tokens/builders/index.js

@@ -3,3 +3,6 @@ export * from "./buildBrandTokens.js";
 export * from "./buildDarkPalette.js";
 export * from "./chartColorsFromTheme.js";
 export * from "./color.js";
+export * from "./scrollbar.js";
+export * from "./gradientInk.js";
+export * from "./placeholderInk.js";

package/dist/esm/Theme/tokens/builders/outlineRung.js

@@ -7,6 +7,29 @@ import { contrastRatio, hexToHsl, relativeLuminance, withLightness } from "./col
 export const MIN_PERCEPTIBLE_STEP = 1.15;
 /** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
 export const AA_NON_TEXT = 3;
+/**
+ * Resting chrome — card, popover and field outlines — settles here, not at `AA_NON_TEXT`.
+ * At 3:1 a container border is text-weight and the UI reads as a wireframe; every mainstream
+ * system draws this line far lighter (Tailwind gray-200 1.24, Chakra gray.200 1.30, Material
+ * outline-variant 1.61). 1.4.11 asks that a control be identifiable, not that its resting
+ * border carry the whole job: the fill, the label and the focus ring do that, and the focus
+ * ring is still held to `AA_NON_TEXT`.
+ */
+export const CHROME_BORDER = 1.5;
+// The resting rule between two surfaces — a card edge, a divider, a menu outline. Lighter than
+// CHROME_BORDER, which outlines a control the user acts on.
+export const CHROME_RULE = 1.31;
+/**
+ * A rule is decorative, so it has a ceiling and no floor: soften it until the surface it reads
+ * hardest against sits at `target`, and leave a already-fainter rung alone. Never `settleAcross`
+ * here — that clears a floor on EVERY surface, so one tinted surface drags the rule darker.
+ */
+export function ruleInk(hex, surfaces, target) {
+    const loudest = surfaces.reduce((worst, s) => contrastRatio(hex, s) > contrastRatio(hex, worst) ? s : worst);
+    return contrastRatio(hex, loudest) > target
+        ? softenToContrast(hex, loudest, target)
+        : hex;
+}
 /**
  * Walks a hex toward `target` contrast against `backdrop`, keeping hue and saturation.
  * Direction is DERIVED from the backdrop, never passed: a mode argument here was redundant
@@ -30,11 +53,30 @@ export function liftToContrast(hex, backdrop, target = AA_NON_TEXT) {
     const ends = [withLightness(hex, 100, s), withLightness(hex, 0, s)];
     return contrastRatio(ends[0], backdrop) >= contrastRatio(ends[1], backdrop) ? ends[0] : ends[1];
 }
+/**
+ * Mirror of `liftToContrast`: walks ink TOWARD the backdrop, stopping at the last step that
+ * still clears `target`. For ink that must stay legible without reading as body copy.
+ */
+export function softenToContrast(hex, backdrop, target) {
+    if (contrastRatio(hex, backdrop) <= target)
+        return hex;
+    const { s, l: start } = hexToHsl(hex);
+    const toward = relativeLuminance(backdrop) < 0.5 ? -1 : 1;
+    let softest = hex;
+    for (let l = start; l > 0 && l < 100; l += toward) {
+        const next = withLightness(hex, l, s);
+        if (contrastRatio(next, backdrop) < target)
+            break;
+        softest = next;
+    }
+    return softest;
+}
 /**
  * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
- * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1
- * across brands, so those controls rendered effectively borderless in BOTH modes. Resolved here
- * rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
+ * pickers, the editor's inputs). Settled onto `CHROME_BORDER` — lifted when a brand authored it
+ * invisibly pale, softened when it overshoots. It was previously lifted to `AA_NON_TEXT`, which
+ * shipped 3.85-4.95:1 outlines: a text-weight box around every card and popover.
+ * Resolved here rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
  *
  * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
  * and outside 1.4.11.
@@ -47,7 +89,9 @@ export function withOutlineRung(palette) {
         contrastRatio(current, palette.background[50])
         ? palette.backgroundColor.main
         : palette.background[50];
-    const resolved = liftToContrast(current, backdrop);
+    const resolved = contrastRatio(current, backdrop) > CHROME_BORDER
+        ? softenToContrast(current, backdrop, CHROME_BORDER)
+        : liftToContrast(current, backdrop, CHROME_BORDER);
     if (resolved === current)
         return palette;
     return { ...palette, boxborder: { ...palette.boxborder, 500: resolved } };
@@ -63,3 +107,25 @@ export function withOutlineRung(palette) {
 export function resolveHoverTint(seed, restSurface) {
     return liftToContrast(seed, restSurface, MIN_PERCEPTIBLE_STEP);
 }
+/**
+ * Settles ink into `target` against EVERY surface at once. Softening one step can change which
+ * surface is hardest, so resolving against a single pre-computed "hardest" one lands under the
+ * floor on another — that is how radiant and rosewood ended up with an invisible outline on
+ * their muted surface.
+ */
+export function settleAcross(hex, surfaces, target) {
+    const clearsAll = (c) => surfaces.every((s) => contrastRatio(c, s) >= target);
+    if (!clearsAll(hex)) {
+        return surfaces.reduce((ink, s) => liftToContrast(ink, s, target), hex);
+    }
+    const { s: sat, l: start } = hexToHsl(hex);
+    const toward = relativeLuminance(surfaces[0]) < 0.5 ? -1 : 1;
+    let settled = hex;
+    for (let l = start; l > 0 && l < 100; l += toward) {
+        const next = withLightness(hex, l, sat);
+        if (!clearsAll(next))
+            break;
+        settled = next;
+    }
+    return settled;
+}

package/dist/esm/Theme/tokens/builders/placeholderInk.js

@@ -0,0 +1,29 @@
+import { contrastRatio } from "./color.js";
+import { liftToContrast, softenToContrast } from "./outlineRung.js";
+import { PLACEHOLDER_TEXT } from "./surfaceRungs.js";
+/**
+ * The hint ink for a field: the brand's authored rung settled onto `PLACEHOLDER_TEXT` against the
+ * hardest surface a field can land on — lifted when it falls short, softened when it overshoots.
+ *
+ * Settled rather than floored because the authored rungs measured 3.96-7.73:1 across the brands,
+ * and anything much past the floor reads as a field already typed into. The floor is the look:
+ * one hint weight for every brand in both modes, instead of a per-brand accident.
+ */
+export const placeholderInkOn = (palette, surfaces) => {
+    const rung = palette.placeholder[500];
+    const hardest = surfaces.reduce((worst, s) => contrastRatio(rung, s) < contrastRatio(rung, worst) ? s : worst);
+    return contrastRatio(rung, hardest) > PLACEHOLDER_TEXT
+        ? softenToContrast(rung, hardest, PLACEHOLDER_TEXT)
+        : liftToContrast(rung, hardest, PLACEHOLDER_TEXT);
+};
+/**
+ * Every surface an ENABLED field renders on. Disabled fields are deliberately absent — 1.4.3
+ * exempts them, and folding their dimmer fill in here would darken the hint on every other field.
+ */
+export const fieldSurfaces = (palette) => [
+    palette.gray[50],
+    palette.background[50],
+    palette.backgroundColor.main,
+];
+/** The hint ink every field in this library reads. Takes no backdrop: see `fieldSurfaces`. */
+export const placeholderInk = (palette) => placeholderInkOn(palette, fieldSurfaces(palette));

package/dist/esm/Theme/tokens/builders/resolvedRungs.js

@@ -1,8 +1,13 @@
 import { liftToContrast, AA_NON_TEXT } from "./outlineRung.js";
 import { AA_NORMAL_TEXT } from "./accentText.js";
-/** Placeholder text measured 4.32:1 on a card for 8 of 9 brands — text, so held to 4.5:1. */
+import { PLACEHOLDER_TEXT } from "./surfaceRungs.js";
+/**
+ * A hint is floored at 3:1, not 4.5:1. Held to body-text contrast it stopped reading as a hint —
+ * an empty field looked like one already typed into — and the published library ships this rung
+ * as the brand authored it. See CHROME-CONSISTENCY.md.
+ */
 export function withPlaceholderRung(palette) {
-    const resolved = liftToContrast(palette.placeholder[500], palette.background[50], AA_NORMAL_TEXT);
+    const resolved = liftToContrast(palette.placeholder[500], palette.background[50], PLACEHOLDER_TEXT);
     if (resolved === palette.placeholder[500])
         return palette;
     return { ...palette, placeholder: { ...palette.placeholder, 500: resolved } };

package/dist/esm/Theme/tokens/builders/scrollbar.js

@@ -0,0 +1,52 @@
+/** One width everywhere. The 3px, 4px, 5px and 10px bars in use were all accidents. */
+export const SCROLLBAR_WIDTH = "6px";
+const RADIUS = "6px";
+/**
+ * The single source of scrollbar chrome. `overlay` drops the track for bars that float over a
+ * card; `hover` keeps the thumb invisible until the region is hovered.
+ */
+export function scrollbarStyles(palette, variant = "default") {
+    const { gray } = palette;
+    const track = variant === "default" ? gray[100] : "transparent";
+    const thumb = variant === "hover" ? "transparent" : gray[400];
+    return {
+        scrollbarWidth: "thin",
+        scrollbarColor: `${thumb} ${track}`,
+        "&::-webkit-scrollbar": {
+            width: SCROLLBAR_WIDTH,
+            height: SCROLLBAR_WIDTH,
+        },
+        "&::-webkit-scrollbar-track": {
+            background: track,
+            borderRadius: RADIUS,
+        },
+        "&::-webkit-scrollbar-thumb": {
+            background: thumb,
+            borderRadius: RADIUS,
+            transition: "background 0.2s ease",
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+            background: gray[500],
+        },
+        "&::-webkit-scrollbar-corner": {
+            background: track,
+        },
+        ...(variant === "hover"
+            ? {
+                "&:hover": { scrollbarColor: `${gray[400]} ${track}` },
+                "&:hover::-webkit-scrollbar-thumb": { background: gray[400] },
+            }
+            : {}),
+    };
+}
+/** The same chrome for the document itself, where `&` selectors do not apply. */
+export function globalScrollbarStyles(palette) {
+    const { gray } = palette;
+    return {
+        "::-webkit-scrollbar": { width: SCROLLBAR_WIDTH, height: SCROLLBAR_WIDTH },
+        "::-webkit-scrollbar-track": { background: gray[100] },
+        "::-webkit-scrollbar-thumb": { background: gray[400], borderRadius: RADIUS },
+        "::-webkit-scrollbar-thumb:hover": { background: gray[500] },
+        "::-webkit-scrollbar-corner": { background: gray[100] },
+    };
+}

package/dist/esm/Theme/tokens/builders/surfaceRungs.js

@@ -1,7 +1,12 @@
 import { contrastRatio } from "./color.js";
-import { liftToContrast, AA_NON_TEXT } from "./outlineRung.js";
+import { liftToContrast, settleAcross, ruleInk, AA_NON_TEXT, CHROME_BORDER, CHROME_RULE } from "./outlineRung.js";
 import { AA_NORMAL_TEXT, pickAccentText } from "./accentText.js";
 import { SEMANTIC_TONES } from "./semanticText.js";
+/**
+ * A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
+ * reads as one already typed into. See CHROME-CONSISTENCY.md.
+ */
+export const PLACEHOLDER_TEXT = AA_NON_TEXT;
 export const namedSurfaces = (palette) => [
     ...Object.values(palette.backgroundColor),
     palette.background[50],
@@ -13,6 +18,8 @@ export const hardestSurface = (ink, surfaces) => surfaces.reduce((worst, s) => c
 export function withSurfaceRungs(palette) {
     const surfaces = namedSurfaces(palette);
     const lift = (ink, target) => liftToContrast(ink, hardestSurface(ink, surfaces), target);
+    const settle = (ink, target) => settleAcross(ink, surfaces, target);
+    const rule = (ink) => ruleInk(ink, [palette.backgroundColor.main, palette.background[50]], CHROME_RULE);
     const semanticText = SEMANTIC_TONES.reduce((acc, tone) => {
         acc[tone] = lift(palette.semanticText[tone], AA_NORMAL_TEXT);
         return acc;
@@ -24,10 +31,18 @@ export function withSurfaceRungs(palette) {
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], AA_NORMAL_TEXT) },
-        placeholder: {
-            ...palette.placeholder,
-            500: lift(palette.placeholder[500], AA_NORMAL_TEXT),
+        // `placeholder` is deliberately absent: the brand authors that rung and the published
+        // library ships it untouched. Its floor is enforced in `placeholderInk`, against the
+        // surfaces a FIELD renders on — not `table.hover`, which no field sits on.
+        // Settled, not lifted: this rung already passed through `withOutlineRung`, and lifting it
+        // again here to AA_NON_TEXT is what shipped 3.85-4.95:1 outlines. See CHROME_BORDER.
+        boxborder: {
+            ...palette.boxborder,
+            200: rule(palette.boxborder[200]),
+            500: settle(palette.boxborder[500], CHROME_BORDER),
         },
-        boxborder: { ...palette.boxborder, 500: lift(palette.boxborder[500], AA_NON_TEXT) },
+        // The 200 rung of both ramps is the same job under two names; settle them together or an
+        // app picking `border` gets a heavier rule than one picking `boxborder`.
+        border: { ...palette.border, 200: rule(palette.border[200]) },
     };
 }

package/dist/esm/index.js

@@ -42,6 +42,7 @@ import SearchSelect from "./Components/SearchSelect/SearchSelect.js";
 import SelectSearch from "./Components/SelectSearch/SelectSearch.js";
 import SideBar from "./Components/SideBar/SideBar.js";
 import Slider from "./Components/Slider/Slider.js";
+import ScrollbarBox from "./Components/ScrollbarBox/ScrollbarBox.js";
 import Skeletons from "./Components/Skeletons/Skeletons.js";
 import Switch from "./Components/Switch/Switch.js";
 import Table from "./Components/Table/Table.js";
@@ -96,7 +97,7 @@ import SignInActivityTable from "./Components/SignInActivityTable/SignInActivity
 import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails.js";
 export { 
 // components
-Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, 
+Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, ScrollbarBox, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, 
 // hooks
 useSidebarPrefs, useIsTruncated, 
 // themes
@@ -135,3 +136,7 @@ export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText,
 // primitives; `compositeOver` flattens a translucent color onto a backdrop first (an alpha
 // color has no defined luminance on its own, so measure the composited result, not the tint).
 export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexToHsl, hslToHex, withLightness, mix, relativeLuminance, contrastRatio, } from "./Theme/tokens/builders/color.js";
+export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Theme/tokens/builders/scrollbar.js";
+export { placeholderInk, placeholderInkOn, fieldSurfaces } from "./Theme/tokens/builders/placeholderInk.js";
+export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk.js";
+export * from "./Components/Primitives/Primitives.js";

package/dist/index.d.ts

@@ -40,6 +40,7 @@ import SearchSelect from "./Components/SearchSelect/SearchSelect";
 import SelectSearch from "./Components/SelectSearch/SelectSearch";
 import SideBar from "./Components/SideBar/SideBar";
 import Slider from "./Components/Slider/Slider";
+import ScrollbarBox from "./Components/ScrollbarBox/ScrollbarBox";
 import Skeletons from "./Components/Skeletons/Skeletons";
 import Switch from "./Components/Switch/Switch";
 import Table from "./Components/Table/Table";
@@ -91,7 +92,7 @@ import RolesPermission from "./Components/RolesPermission/RolesPermission";
 import CustomModulesTable from "./Components/CustomModulesTable/CustomModulesTable";
 import SignInActivityTable from "./Components/SignInActivityTable/SignInActivityTable";
 import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, useSidebarPrefs, useIsTruncated, useCustomTheme, ThemesList, debounce, isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, ScrollbarBox, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, useSidebarPrefs, useIsTruncated, useCustomTheme, ThemesList, debounce, isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, };
 export default withTheme;
 export type { UserDetailsProps, UserDetailsLabels, UserListItem, SelectedUserDetail, UserDetailRow, RoleOption, AddUserFormValues, ChangeRoleSubmitPayload, } from "./Components/UserDetails/UserDetailsProps";
 export type { WorkspaceWindowProps, WorkspaceWindowState, WorkspaceTrayProps, WorkspaceTrayItem, WorkspaceTrayPreviewProps, } from "./Components/WorkspaceWindow/WorkspaceWindowProps";
@@ -123,7 +124,7 @@ export type { PlanBadgeInput, PlanBadgeResult } from "./Utils/planBadge";
 export type { PlanExpiryInput } from "./Utils/planExpiry";
 export type { LimitReachedModalProps, LimitKind, } from "./Components/LimitReachedModal/LimitReachedModalProps";
 export type { AccountHandoffConfig, AccountHandoff, AccountHandoffLinkOptions, AccountHandoffUsersOptions, ResolveReturnUrlOptions, } from "./Utils/accountHandoff";
-export type { TableProps, TableHeaderProps, TableColumnType, TableDensity, TableEmptyState, TableRenderGroup, HeaderActionsProps, ColumnSortingProps, ExportOption, DataObject, FilterValues, } from "./Components/Table/TableProps";
+export type { TableProps, TableHeaderProps, TableColumnType, TableDensity, TableVariant, TableEmptyState, TableRenderGroup, HeaderActionsProps, ColumnSortingProps, ExportOption, DataObject, FilterValues, } from "./Components/Table/TableProps";
 export type { ButtonProps } from "./Components/Button/ButtonProps";
 export type { CardProps } from "./Components/Card/CardProps";
 export type { ProfileCardProps, ProfileCardVariant, ProfileCardVariantLegacy, } from "./Components/ProfileCard/ProfileCardProps";
@@ -156,3 +157,11 @@ export type { FileUploaderProps, MimeExtension } from "./Components/FileUpload/F
 export type { SidebarProps, SidebarUser, SecondaryBarProps, OtherAppsProps, MenuProps as SidebarMenuProps, } from "./Components/SideBar/SideBarProps";
 export type { NavbarProps, MenuProps as NavbarMenuProps } from "./Components/NavigationBar/NavigationBarProps";
 export type { HeaderProps } from "./Components/Header/HeaderProps";
+export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Theme/tokens/builders/scrollbar";
+export type { ScrollbarVariant, ScrollbarStyle, } from "./Theme/tokens/builders/scrollbar";
+export type { ScrollbarBoxProps } from "./Components/ScrollbarBox/ScrollbarBox";
+export { placeholderInk, placeholderInkOn, fieldSurfaces } from "./Theme/tokens/builders/placeholderInk";
+export type { FieldSurfaces } from "./Theme/tokens/builders/placeholderInk";
+export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk";
+export type { Gradient, ResolvedGradient, } from "./Theme/tokens/builders/gradientInk";
+export * from "./Components/Primitives/Primitives";

package/dist/index.js

@@ -33,14 +33,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserDetails = exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemaining = exports.formatPlanExpiry = exports.formatPlanElapsed = exports.PlanBadge = exports.PlanPill = exports.UpgradeButton = exports.LimitReachedModal = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.WorkspaceTrayPreview = exports.WorkspaceTray = exports.WorkspaceWindow = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexRadialChart = exports.ApexAreaChart = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.OverflowToolTip = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.SelectV2 = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = void 0;
-exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.AppearanceSettings = exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = exports.VerifyEmailOtp = exports.useToaster = void 0;
-exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = void 0;
+exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.ScrollbarBox = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.SelectV2 = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = void 0;
+exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.AppearanceSettings = exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = exports.VerifyEmailOtp = exports.useToaster = exports.OverflowToolTip = void 0;
+exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -136,6 +139,8 @@ const SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
 exports.SideBar = SideBar_1.default;
 const Slider_1 = __importDefault(require("./Components/Slider/Slider"));
 exports.Slider = Slider_1.default;
+const ScrollbarBox_1 = __importDefault(require("./Components/ScrollbarBox/ScrollbarBox"));
+exports.ScrollbarBox = ScrollbarBox_1.default;
 const Skeletons_1 = __importDefault(require("./Components/Skeletons/Skeletons"));
 exports.Skeletons = Skeletons_1.default;
 const Switch_1 = __importDefault(require("./Components/Switch/Switch"));
@@ -324,3 +329,16 @@ Object.defineProperty(exports, "withLightness", { enumerable: true, get: functio
 Object.defineProperty(exports, "mix", { enumerable: true, get: function () { return color_1.mix; } });
 Object.defineProperty(exports, "relativeLuminance", { enumerable: true, get: function () { return color_1.relativeLuminance; } });
 Object.defineProperty(exports, "contrastRatio", { enumerable: true, get: function () { return color_1.contrastRatio; } });
+var scrollbar_1 = require("./Theme/tokens/builders/scrollbar");
+Object.defineProperty(exports, "scrollbarStyles", { enumerable: true, get: function () { return scrollbar_1.scrollbarStyles; } });
+Object.defineProperty(exports, "globalScrollbarStyles", { enumerable: true, get: function () { return scrollbar_1.globalScrollbarStyles; } });
+Object.defineProperty(exports, "SCROLLBAR_WIDTH", { enumerable: true, get: function () { return scrollbar_1.SCROLLBAR_WIDTH; } });
+var placeholderInk_1 = require("./Theme/tokens/builders/placeholderInk");
+Object.defineProperty(exports, "placeholderInk", { enumerable: true, get: function () { return placeholderInk_1.placeholderInk; } });
+Object.defineProperty(exports, "placeholderInkOn", { enumerable: true, get: function () { return placeholderInk_1.placeholderInkOn; } });
+Object.defineProperty(exports, "fieldSurfaces", { enumerable: true, get: function () { return placeholderInk_1.fieldSurfaces; } });
+var gradientInk_1 = require("./Theme/tokens/builders/gradientInk");
+Object.defineProperty(exports, "resolveGradient", { enumerable: true, get: function () { return gradientInk_1.resolveGradient; } });
+Object.defineProperty(exports, "gradientCss", { enumerable: true, get: function () { return gradientInk_1.gradientCss; } });
+Object.defineProperty(exports, "inkSafeGradientToken", { enumerable: true, get: function () { return gradientInk_1.inkSafeGradient; } });
+__exportStar(require("./Components/Primitives/Primitives"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.2",
+  "version": "2.4.2-beta.21",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",
@@ -91,7 +91,9 @@
       "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
     },
     "testPathIgnorePatterns": [
-      "<rootDir>/dist/"
+      "/node_modules/",
+      "<rootDir>/dist/",
+      "<rootDir>/.claude/"
     ],
     "testMatch": [
       "**/__tests__/**/*.[jt]s?(x)",