pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.41

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

@@ -4,6 +4,7 @@ import { pickAccentText, onFilled } from "./accentText.js";
 import { withSidebarTokens } from "./sidebarAccent.js";
 import { buildMutedText } from "./mutedText.js";
 import { buildSemanticText, buildOnSemantic } from "./semanticText.js";
+import { buildFocusRing } from "./focusRing.js";
 /**
  * Derives a brand's dark palette from its light palette.
  *
@@ -238,6 +239,7 @@ export function buildDarkPalette(light) {
     ]));
     const white = light.white;
     const primary = liftBrand(light.primary, white);
+    const background = fromTargets(hueSource, SURFACE_TARGETS, SURFACE_SAT);
     const semantic = {
         success: liftAccent(light.semantic.success, white),
         error: liftAccent(light.semantic.error, white),
@@ -268,7 +270,7 @@ export function buildDarkPalette(light) {
         purple: reverseScale(light.purple),
         pink: reverseScale(light.pink),
         backgroundColor: namedSurfaces,
-        background: fromTargets(hueSource, SURFACE_TARGETS, SURFACE_SAT),
+        background,
         text: fromTargets(hueSource, TEXT_TARGETS, TEXT_SAT),
         header: fromTargets(hueSource, TEXT_TARGETS, TEXT_SAT + 2),
         placeholder: fromTargets(hueSource, PLACEHOLDER_TARGETS, PLACEHOLDER_SAT),
@@ -285,6 +287,9 @@ export function buildDarkPalette(light) {
         semanticText: buildSemanticText(semantic, namedSurfaces.main),
         onPrimary: onFilled(primary[500], light.white, light.black),
         onSemantic: buildOnSemantic(semantic, light.white, light.black),
+        // The dark ring is derived from the LIFTED accent against the dark canvas, not copied from
+        // light: the two modes squeeze it from opposite sides, so a shared value fails one of them.
+        focusRing: buildFocusRing({ primary, background, backgroundColor: namedSurfaces }),
         // Sidebar is already near-black in light mode, so it needs no inversion.
         sidebar: withSidebarTokens(light),
         boxShadow: {

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/filledSurface.js

@@ -0,0 +1,67 @@
+import { contrastRatio } from "./color.js";
+import { AA_NORMAL_TEXT, isDarkCanvas, onFilled } from "./accentText.js";
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+/**
+ * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
+ * white label stays legible.
+ *
+ * Every dark scale runs dark -> light across 50 -> 900 (brand scales are rebuilt that way, utility
+ * hues are reversed), the mirror of light mode. So "darker than [500]" is [600]/[700] in light but
+ * [400]/[300] in dark.
+ */
+const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+/**
+ * Lightest rung on `scale` that still carries `white` at WCAG AA. Prefers [500] when it already
+ * passes; otherwise walks toward darker rungs. Used for solid fills on buttons, tags, badges and
+ * table status pills so consumers never get black ink on a saturated fill when white is achievable.
+ */
+export const solidFillRung = (scale, white) => {
+    if (contrastRatio(scale[500], white) >= AA_NORMAL_TEXT)
+        return 500;
+    const passing = RUNGS.filter((r) => scale[r] && contrastRatio(scale[r], white) >= AA_NORMAL_TEXT);
+    if (!passing.length)
+        return 500;
+    return passing.reduce((a, b) => contrastRatio(scale[a], white) <= contrastRatio(scale[b], white) ? a : b);
+};
+const steppedRung = (base, canvas, step) => {
+    const dir = isDarkCanvas(canvas) ? -100 : 100;
+    return Math.min(900, Math.max(50, base + dir * step));
+};
+/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+export const darkerFillRung = (scale, canvas, white, step) => {
+    const base = solidFillRung(scale, white);
+    if (base === 500) {
+        const mode = isDarkCanvas(canvas) ? "dark" : "light";
+        return FILL_STEP_RUNGS[mode][step];
+    }
+    const stepped = steppedRung(base, canvas, step === 0 ? 1 : 2);
+    return stepped;
+};
+/** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
+export const labelOnFill = (fill, white, black) => onFilled(fill, white, black);
+/**
+ * Consumer-facing helper: given any `ColorScale` (primary, red, semantic.error, …), return the
+ * fill rung and matching ink for solid / hover / active states. Use this whenever you paint a
+ * `bg` from a scale — never pair `scale[500]` with `onFilled` or `colors.white` by hand.
+ */
+export const resolveFilledSurface = (scale, colors) => {
+    const { white, black, backgroundColor } = colors;
+    const canvas = backgroundColor.main;
+    const rung = solidFillRung(scale, white);
+    const fill = scale[rung];
+    const hoverRung = darkerFillRung(scale, canvas, white, 0);
+    const hoverFill = scale[hoverRung];
+    const activeRung = darkerFillRung(scale, canvas, white, 1);
+    const activeFill = scale[activeRung];
+    return {
+        rung,
+        fill,
+        color: labelOnFill(fill, white, black),
+        hoverRung,
+        hoverFill,
+        hoverColor: labelOnFill(hoverFill, white, black),
+        activeRung,
+        activeFill,
+        activeColor: labelOnFill(activeFill, white, black),
+    };
+};

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

@@ -0,0 +1,85 @@
+import { contrastRatio, hexToHsl, withLightness } from "./color.js";
+import { AA_NON_TEXT } from "./outlineRung.js";
+/** Same lightness granularity `buildDarkPalette` walks its accents at. */
+const LIGHTNESS_STEP = 0.5;
+/**
+ * The nearest re-lighting of `hex` that clears `target` against EVERY backdrop at once.
+ *
+ * Not `settleAcross`: that folds one `liftToContrast` per surface, and each lift walks AWAY from
+ * the surface it was handed. That is correct when every backdrop sits on the same side of the ink
+ * (its case — a set of light surfaces, or a set of dark ones), and wrong here, where a focus ring
+ * is squeezed BETWEEN a near-white canvas and a mid-dark button fill: the lift against the fill
+ * walks straight back across the canvas it had just cleared. Seeding `settleAcross` with
+ * `primary[500]` measured 1.08-1.99 on the light canvas for every brand for exactly that reason.
+ *
+ * Walking outward from the seed and testing every backdrop at each step keeps the result the
+ * CLOSEST passing colour to the brand accent, so the ring still reads as brand chrome. Contrast is
+ * a function of relative luminance alone, and lightness sweeps luminance monotonically from 0 to 1,
+ * so if any colour on this hue clears the set, this finds it.
+ */
+export function settleBetween(hex, backdrops, target = AA_NON_TEXT) {
+    const clears = (candidate) => backdrops.every((backdrop) => contrastRatio(candidate, backdrop) >= target);
+    if (clears(hex))
+        return hex;
+    const { l } = hexToHsl(hex);
+    for (let step = LIGHTNESS_STEP; step <= 100; step += LIGHTNESS_STEP) {
+        const darker = withLightness(hex, l - step);
+        if (clears(darker))
+            return darker;
+        const lighter = withLightness(hex, l + step);
+        if (clears(lighter))
+            return lighter;
+    }
+    // Unreachable for every shipped brand (the gate proves it) — a brand whose fill and canvas are
+    // close enough to leave no gap would land here. Take the end that is least bad rather than throw
+    // at import time, and let `focusRing.test.ts` be what reports it.
+    const ends = [withLightness(hex, 0), withLightness(hex, 100)];
+    const worst = (candidate) => Math.min(...backdrops.map((backdrop) => contrastRatio(candidate, backdrop)));
+    return worst(ends[0]) >= worst(ends[1]) ? ends[0] : ends[1];
+}
+/**
+ * The three backdrops a focused button's ring is actually drawn against: the page canvas, a card
+ * surface, and — because a solid button's ring sits directly against its own fill — `primary[500]`.
+ *
+ * Deliberately NOT every named surface. `muted`/`accent`/`quaternary` are mid-tone, and a single
+ * band asked to clear those AND a dark brand fill has no solution at any hue — contrast is
+ * luminance alone, and `skyline`/`storefront` come out with an empty band. That is what the second
+ * tone is for: `halo` owns the fill-side adjacency instead.
+ */
+export const focusRingBackdrops = (source) => [
+    source.backgroundColor.main,
+    source.background[50],
+    source.primary[500],
+];
+/**
+ * The two-tone `:focus-visible` indicator.
+ *
+ * Chakra's stock ring (`shadows.outline`, a fixed `rgba(66,153,225,.6)`) measured 1.83:1 on the
+ * lavender canvas and 1.38:1 on a primary button — a focus indicator you cannot see, on all nine
+ * brands. It is one hardcoded blue, so no palette could have saved it.
+ *
+ * `halo` is the surface tone, drawn as the inner band so the indicator separates from a filled
+ * control whatever `colorScheme` painted it. `ring` is the brand accent, walked to the nearest
+ * lightness that clears 3:1 on all three backdrops at once — including the halo, so the two tones
+ * are always told apart.
+ */
+export const buildFocusRing = (source) => {
+    const halo = settleBetween(source.background[50], [source.primary[500]]);
+    return {
+        halo,
+        ring: settleBetween(source.primary[500], [...focusRingBackdrops(source), halo]),
+    };
+};
+/**
+ * Re-derives the ring from the FINISHED palette, as the last step of the rung chain.
+ *
+ * `finalizeLightPalette` and `buildDarkPalette` seed it, but neither is the final word: a brand
+ * file may replace `primary` or `background` after the generic derivation runs — `zinc`'s dark
+ * palette replaces both, inverting the filled button to near-white — and a ring resolved against
+ * the pre-override values is then silently wrong. Same reason `withSurfaceRungs` re-lifts inks the
+ * finalizers already derived. `focusRing.test.ts` asserts this is a fixed point.
+ */
+export const withFocusRing = (palette) => ({
+    ...palette,
+    focusRing: buildFocusRing(palette),
+});

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

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

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

@@ -7,6 +7,35 @@ 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.
+ *
+ * That defence was untrue when it was written. Buttons defined no `_focusVisible` at all, so the
+ * focus ring was Chakra's stock `shadows.outline` — a fixed blue measuring 1.38:1 on a primary
+ * button — and nothing in the library was held to `AA_NON_TEXT` at the moment of focus. It is
+ * true now: `focusRing` (`builders/focusRing.ts`) is derived per brand per mode and gated at 3:1
+ * on the canvas, on a card and on the button's own fill by `builders/focusRing.test.ts`. If that
+ * gate is ever relaxed, this constant loses its justification with it.
+ */
+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
@@ -50,9 +79,10 @@ export function softenToContrast(hex, backdrop, target) {
 }
 /**
  * `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.
@@ -65,7 +95,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 } };
@@ -81,3 +113,45 @@ 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;
+}
+/**
+ * A pure-grey surface sitting `target` contrast away from `backdrop`. Binary search, not a walk:
+ * `liftToContrast` cannot move a seed already at lightness 0 or 100, and a pure-white panel seeded
+ * itself straight to black. Neutral on purpose — the light palettes are hand-authored and tinted,
+ * so lifting one of their surface rungs turns a selected row into a saturated brand block, while
+ * the derived dark palettes land on grey and look right.
+ */
+export function neutralStep(backdrop, target) {
+    const grey = (l) => withLightness("#808080", l, 0);
+    let lo = hexToHsl(backdrop).l;
+    let hi = relativeLuminance(backdrop) < 0.5 ? 100 : 0;
+    for (let i = 0; i < 20; i += 1) {
+        const mid = (lo + hi) / 2;
+        if (contrastRatio(grey(mid), backdrop) < target)
+            lo = mid;
+        else
+            hi = mid;
+    }
+    return grey(hi);
+}

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/rowStates.js

@@ -0,0 +1,15 @@
+import { resolveHoverTint } from "./outlineRung.js";
+/**
+ * The three backgrounds a selectable list row can rest on. Every rung is NEUTRAL and pale, so a
+ * row's ink stays the canvas ink `withSurfaceRungs` already settled. Seeding a row state from
+ * `primary[500]` instead — the filled-button rung — is what painted SelectV2's hovered rows a
+ * solid brand fill under unreadable text.
+ */
+export const listRowBackgrounds = (colors) => {
+    const selected = colors.backgroundColor.tertiary;
+    return {
+        active: resolveHoverTint(colors.gray[50], colors.backgroundColor.light),
+        selected,
+        selectedActive: resolveHoverTint(selected, selected),
+    };
+};

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

@@ -0,0 +1,13 @@
+const EDGE = "24px";
+const TINT = "rgba(0, 0, 0, 0.08)";
+// CSS-only overflow hint via background-attachment local vs scroll — no listener, no extra node.
+export function scrollShadowStyles(surface) {
+    return {
+        backgroundColor: surface,
+        backgroundImage: `linear-gradient(to right, ${surface}, ${surface}), linear-gradient(to left, ${surface}, ${surface}), linear-gradient(to right, ${TINT}, transparent), linear-gradient(to left, ${TINT}, transparent)`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: `${EDGE} 100%, ${EDGE} 100%, 8px 100%, 8px 100%`,
+        backgroundPosition: "0 0, 100% 0, 0 0, 100% 0",
+        backgroundAttachment: "local, local, scroll, scroll",
+    };
+}

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

@@ -1,9 +1,12 @@
 import { contrastRatio } from "./color.js";
-import { liftToContrast, softenToContrast, 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";
-/** Clear of the 4.5 gate, but well under body text so a hint never reads as a value. */
-export const PLACEHOLDER_TEXT = 5;
+/**
+ * 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],
@@ -15,7 +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 soften = (ink, target) => softenToContrast(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;
@@ -27,12 +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 must stay legible without reading as a filled value: the ramp delivered
-        // 6.85:1, level with `textMuted`, so it is settled back down to just clear of AA.
-        placeholder: {
-            ...palette.placeholder,
-            500: soften(lift(palette.placeholder[500], AA_NORMAL_TEXT), PLACEHOLDER_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/Utils/table.js

@@ -1,6 +1,9 @@
 import React, { useCallback, useEffect, useRef } from "react";
-import { DEFAULT_BLACK, DEFAULT_WHITE, isDarkCanvas, onFilled, } from "../Theme/tokens/builders/accentText.js";
-import { resolveStatusTone } from "../Theme/tokens/builders/statusTone.js";
+import { AA_NORMAL_TEXT, DEFAULT_BLACK, DEFAULT_WHITE, isDarkCanvas, onFilled, } from "../Theme/tokens/builders/accentText.js";
+import { compositeOver } from "../Theme/tokens/builders/color.js";
+import { liftToContrast } from "../Theme/tokens/builders/outlineRung.js";
+import { labelOnFill, solidFillRung } from "../Theme/tokens/builders/filledSurface.js";
+import { resolveAvatarFill, resolveStatusTone } from "../Theme/tokens/builders/statusTone.js";
 // Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
 // collator is orders of magnitude dearer than using one.
 const COLLATOR = new Intl.Collator(undefined, {
@@ -53,7 +56,45 @@ export function SortMultiColumnData(data, sortConfig) {
         return 0;
     });
 }
+/** Theme-aware status palette per value — soft fill + semantic ink from `resolveStatusTone`. */
+export function buildSemanticStatusPalette(toneByValue, theme) {
+    const c = theme.colors;
+    const mode = isDarkCanvas(c.backgroundColor.main) ? "dark" : "light";
+    const scales = {
+        info: c.semantic.info,
+        warning: c.semantic.warning,
+        success: c.semantic.success,
+        error: c.semantic.error,
+        neutral: c.gray,
+    };
+    return Object.fromEntries(Object.entries(toneByValue).map(([value, key]) => {
+        const scale = scales[key];
+        const tone = resolveStatusTone(scale, mode);
+        const solidRung = solidFillRung(scale, c.white);
+        const solid = scale[solidRung];
+        return [
+            value,
+            {
+                solid,
+                soft: tone.bg,
+                text: tone.fg,
+                onSolid: labelOnFill(solid, c.white, c.black),
+            },
+        ];
+    }));
+}
 const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
+/** Consumer `statusColors` values are fill seeds — derive bleed + pill ink from them. */
+const resolveStatusOverride = (fill, white, black, surface) => {
+    const soft = withAlpha(fill, "22");
+    const solid = resolveAvatarFill(fill);
+    return {
+        solid,
+        soft,
+        text: liftToContrast(fill, compositeOver(soft, surface), AA_NORMAL_TEXT),
+        onSolid: onFilled(solid, white, black),
+    };
+};
 /** Deterministic, theme-aware color palette for groups + status pills. */
 export function buildTablePalette(theme) {
     const c = theme.colors;
@@ -72,11 +113,13 @@ export function buildTablePalette(theme) {
     ];
     return scales.map((scale) => {
         const tone = resolveStatusTone(scale, mode);
+        const solidRung = solidFillRung(scale, c.white);
+        const solid = scale[solidRung];
         return {
-            solid: scale[500],
+            solid,
             soft: tone.bg,
             text: tone.fg,
-            onSolid: onFilled(scale[500], c.white, c.black),
+            onSolid: labelOnFill(solid, c.white, c.black),
         };
     });
 }
@@ -89,10 +132,12 @@ const hashKey = (value) => {
 };
 /** Pick a deterministic palette color for a value, with optional consumer override hex. */
 export function pickTableColor(value, palette, override, theme) {
+    var _a;
     const white = theme ? theme.colors.white : DEFAULT_WHITE;
     const black = theme ? theme.colors.black : DEFAULT_BLACK;
     if (override) {
-        return { solid: override, soft: withAlpha(override, "22"), text: override, onSolid: onFilled(override, white, black) };
+        const surface = (_a = theme === null || theme === void 0 ? void 0 : theme.colors.background[50]) !== null && _a !== void 0 ? _a : DEFAULT_WHITE;
+        return resolveStatusOverride(override, white, black, surface);
     }
     if (!palette.length) {
         throw new Error("pickTableColor: empty palette — build it with buildTablePalette(theme).");

package/dist/esm/index.js

@@ -23,6 +23,7 @@ import Header from "./Components/Header/Header.js";
 import HeaderActions from "./Components/Header/HeaderActions.js";
 import InputTextArea from "./Components/InputTextArea/InputTextArea.js";
 import KanbanBoard from "./Components/KanbanBoard/KanbanBoard.js";
+import KanbanActions from "./Components/KanbanBoard/KanbanActions/KanbanActions.js";
 import Loading from "./Components/Loading/Loading.js";
 import Modal, { ModalHeader, ModalBody, ModalFooter, } from "./Components/Modal/Modal.js";
 import MultiSelect from "./Components/MultiSelect/MultiSelect.js";
@@ -45,6 +46,8 @@ 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 ToggleSwitch from "./Components/ToggleSwitch/ToggleSwitch.js";
+import SegmentedControl from "./Components/SegmentedControl/SegmentedControl.js";
 import Table from "./Components/Table/Table.js";
 import Tag from "./Components/Tag/Tag.js";
 import TextInput from "./Components/Input/TextInput.js";
@@ -84,6 +87,7 @@ import FilePreview, { FilePreviewTrigger, } from "./Components/FilePreview/FileP
 import StageProgress from "./Components/StageProgress/StageProgress.js";
 import StageItem from "./Components/StageProgress/StageItem.js";
 import OrgSwitcher from "./Components/OrgSwitcher/OrgSwitcher.js";
+import AppSwitcher from "./Components/AppSwitcher/AppSwitcher.js";
 import UpgradeButton from "./Components/UpgradeButton/UpgradeButton.js";
 import PlanPill from "./Components/PlanPill/PlanPill.js";
 import PlanBadge from "./Components/PlanBadge/PlanBadge.js";
@@ -97,7 +101,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, ScrollbarBox, 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, AppSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, KanbanActions, 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, ToggleSwitch, SegmentedControl, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, 
 // hooks
 useSidebarPrefs, useIsTruncated, 
 // themes
@@ -124,6 +128,15 @@ export { buildDarkPalette } from "./Theme/tokens/builders/buildDarkPalette.js";
 // status chips and generated avatars. Consumers pass a scale/seed and get tokens that already
 // clear the bar, instead of pinning hexes that go stale when a palette moves.
 export { AA_NON_TEXT, liftToContrast, withOutlineRung, } from "./Theme/tokens/builders/outlineRung.js";
+// The three backgrounds a selectable row rests on, for a consumer's own list. Neutral by
+// construction, so the canvas ink stays readable on every one of them.
+export { listRowBackgrounds } from "./Theme/tokens/builders/rowStates.js";
+// The two-tone `:focus-visible` indicator, derived per brand per mode. `buildFocusRing` resolves
+// the pair from a palette; `focusVisibleStyles` is the ready-made Chakra pseudo-selector block a
+// consumer's own control can spread to get the same ring Button draws. Both exist because Chakra's
+// `shadows.outline` is one hardcoded blue that fails WCAG 1.4.11 on every Pixelize palette.
+export { buildFocusRing, settleBetween, withFocusRing } from "./Theme/tokens/builders/focusRing.js";
+export { focusRingShadow, focusVisibleRing, focusVisibleStyles, FOCUS_VISIBLE_OVER_STATE, FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH, } from "./Theme/chakra/focusRing.styles.js";
 export { AVATAR_SEEDS, avatarFillFor, meetsBodyText, resolveAvatarFill, resolveStatusTone, } from "./Theme/tokens/builders/statusTone.js";
 // WCAG contrast + accent-picking helpers this library uses internally to keep text readable
 // against any canvas/fill a palette produces. Pure and dependency-free — consumers building
@@ -131,9 +144,21 @@ export { AVATAR_SEEDS, avatarFillFor, meetsBodyText, resolveAvatarFill, resolveS
 // of re-deriving contrast math themselves.
 export { statusGradient, inkSafeGradient, chipFill, chipBorder, ACCENT_GRADIENT, STATUS_INK, } from "./Components/PlanPill/planPillGradient.js";
 export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText.js";
+// Filled-surface helpers — use whenever you paint a `bg` from a ColorScale (buttons, badges,
+// chips, alerts). Never pair `scale[500]` with `onFilled` or `colors.white` by hand.
+export { solidFillRung, darkerFillRung, labelOnFill, resolveFilledSurface, } from "./Theme/tokens/builders/filledSurface.js";
 // Pure color math backing the helpers above (and `buildDarkPalette`) — no Chakra/React/DOM
 // dependency, safe for the mobile port. `relativeLuminance`/`contrastRatio` are the WCAG 2.1
 // 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";
+// Calendar day marking (`DatePicker` + `isRange`). Exported so a consumer can build a legend,
+// or a summary line, from the SAME keys, tokens and phrasing the calendar itself paints and
+// announces — a hand-copied legend is how a legend goes stale.
+export { DAY_STATE_KEYS, DAY_CLASS as CALENDAR_DAY_CLASS, isDayStateKey, resolveDayStateVisual, describeDayStates, } from "./Components/DatePicker/dayStates.js";
+export { appInitials, filterApps, matchesShortcut, formatShortcut, buildSuiteApps, } from "./Components/AppSwitcher/AppSwitcherProps.js";
+export { useAppSwitcherShortcut } from "./Components/AppSwitcher/useAppSwitcherShortcut.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";