pixelize-design-library 2.4.2-beta.26 → 2.4.2-beta.28

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/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,6 +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

@@ -12,8 +12,14 @@ export const AA_NON_TEXT = 3;
  * 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`.
+ * 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

package/dist/esm/index.js

@@ -126,6 +126,12 @@ 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 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
@@ -138,6 +144,10 @@ 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";
+// 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 { 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";

package/dist/index.d.ts

@@ -112,9 +112,12 @@ export { brandThemes } from "./Theme";
 export { lightPalettes, darkPalettes, palettes, themeNames, } from "./Theme/tokens/brands";
 export { buildDarkPalette } from "./Theme/tokens/builders/buildDarkPalette";
 export { AA_NON_TEXT, liftToContrast, withOutlineRung, } from "./Theme/tokens/builders/outlineRung";
+export { buildFocusRing, settleBetween, withFocusRing } from "./Theme/tokens/builders/focusRing";
+export type { FocusRingSource } from "./Theme/tokens/builders/focusRing";
+export { focusRingShadow, focusVisibleRing, focusVisibleStyles, FOCUS_VISIBLE_OVER_STATE, FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH, } from "./Theme/chakra/focusRing.styles";
 export { AVATAR_SEEDS, avatarFillFor, meetsBodyText, resolveAvatarFill, resolveStatusTone, } from "./Theme/tokens/builders/statusTone";
 export type { StatusTone } from "./Theme/tokens/builders/statusTone";
-export type { ColorMode, ResolvedColorMode, ThemeName, PaletteProps, ColorScale, BrandScale, SemanticColors, NamedSurfaces, } from "./Theme/tokens/types";
+export type { ColorMode, ResolvedColorMode, ThemeName, PaletteProps, ColorScale, BrandScale, SemanticColors, NamedSurfaces, FocusRingTokens, } from "./Theme/tokens/types";
 export { statusGradient, inkSafeGradient, chipFill, chipBorder, ACCENT_GRADIENT, STATUS_INK, } from "./Components/PlanPill/planPillGradient";
 export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText";
 export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexToHsl, hslToHex, withLightness, mix, relativeLuminance, contrastRatio, } from "./Theme/tokens/builders/color";
@@ -137,6 +140,8 @@ export type { chakraSelectProps as SelectProps, OptionProp as SelectOption, } fr
 export type { SearchSelectProps, Options as SearchSelectOption } from "./Components/SearchSelect/SearchSelectProps";
 export type { MultiSelectProps, MultiSelctOPtions as MultiSelectOption } from "./Components/MultiSelect/MultiSelectProps";
 export type { SearchProps } from "./Components/Search/SearchProps";
+export { DAY_STATE_KEYS, DAY_CLASS as CALENDAR_DAY_CLASS, isDayStateKey, resolveDayStateVisual, describeDayStates, } from "./Components/DatePicker/dayStates";
+export type { DayStateKey, DayStates, DayStateVisual, RenderDayContent, } from "./Components/DatePicker/dayStates";
 export type { DatePickerProps, TimePickerProps, SingleDatePickerProps, RangeDatePickerProps, RangeDate, PickerType, } from "./Components/DatePicker/DatePickerProps";
 export type { TextInputProps } from "./Components/Input/TextInputProps";
 export type { InputTextAreaProps } from "./Components/InputTextArea/InputTextAreaProps";

package/dist/index.js

@@ -42,8 +42,8 @@ var __importDefault = (this && this.__importDefault) || function (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.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.SegmentedControl = exports.ToggleSwitch = 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.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 = exports.ToolTip = exports.Toaster = 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 = exports.compositeOver = exports.hexToRgba = void 0;
+exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = exports.FOCUS_VISIBLE_OVER_STATE = exports.focusVisibleStyles = exports.focusVisibleRing = exports.focusRingShadow = exports.withFocusRing = exports.settleBetween = exports.buildFocusRing = 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 = exports.ToolTip = exports.Toaster = void 0;
+exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.describeDayStates = exports.resolveDayStateVisual = exports.isDayStateKey = exports.CALENDAR_DAY_CLASS = exports.DAY_STATE_KEYS = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = 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 = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -291,6 +291,21 @@ var outlineRung_1 = require("./Theme/tokens/builders/outlineRung");
 Object.defineProperty(exports, "AA_NON_TEXT", { enumerable: true, get: function () { return outlineRung_1.AA_NON_TEXT; } });
 Object.defineProperty(exports, "liftToContrast", { enumerable: true, get: function () { return outlineRung_1.liftToContrast; } });
 Object.defineProperty(exports, "withOutlineRung", { enumerable: true, get: function () { return outlineRung_1.withOutlineRung; } });
+// 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.
+var focusRing_1 = require("./Theme/tokens/builders/focusRing");
+Object.defineProperty(exports, "buildFocusRing", { enumerable: true, get: function () { return focusRing_1.buildFocusRing; } });
+Object.defineProperty(exports, "settleBetween", { enumerable: true, get: function () { return focusRing_1.settleBetween; } });
+Object.defineProperty(exports, "withFocusRing", { enumerable: true, get: function () { return focusRing_1.withFocusRing; } });
+var focusRing_styles_1 = require("./Theme/chakra/focusRing.styles");
+Object.defineProperty(exports, "focusRingShadow", { enumerable: true, get: function () { return focusRing_styles_1.focusRingShadow; } });
+Object.defineProperty(exports, "focusVisibleRing", { enumerable: true, get: function () { return focusRing_styles_1.focusVisibleRing; } });
+Object.defineProperty(exports, "focusVisibleStyles", { enumerable: true, get: function () { return focusRing_styles_1.focusVisibleStyles; } });
+Object.defineProperty(exports, "FOCUS_VISIBLE_OVER_STATE", { enumerable: true, get: function () { return focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE; } });
+Object.defineProperty(exports, "FOCUS_HALO_WIDTH", { enumerable: true, get: function () { return focusRing_styles_1.FOCUS_HALO_WIDTH; } });
+Object.defineProperty(exports, "FOCUS_RING_WIDTH", { enumerable: true, get: function () { return focusRing_styles_1.FOCUS_RING_WIDTH; } });
 var statusTone_1 = require("./Theme/tokens/builders/statusTone");
 Object.defineProperty(exports, "AVATAR_SEEDS", { enumerable: true, get: function () { return statusTone_1.AVATAR_SEEDS; } });
 Object.defineProperty(exports, "avatarFillFor", { enumerable: true, get: function () { return statusTone_1.avatarFillFor; } });
@@ -333,6 +348,15 @@ 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; } });
+// 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.
+var dayStates_1 = require("./Components/DatePicker/dayStates");
+Object.defineProperty(exports, "DAY_STATE_KEYS", { enumerable: true, get: function () { return dayStates_1.DAY_STATE_KEYS; } });
+Object.defineProperty(exports, "CALENDAR_DAY_CLASS", { enumerable: true, get: function () { return dayStates_1.DAY_CLASS; } });
+Object.defineProperty(exports, "isDayStateKey", { enumerable: true, get: function () { return dayStates_1.isDayStateKey; } });
+Object.defineProperty(exports, "resolveDayStateVisual", { enumerable: true, get: function () { return dayStates_1.resolveDayStateVisual; } });
+Object.defineProperty(exports, "describeDayStates", { enumerable: true, get: function () { return dayStates_1.describeDayStates; } });
 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; } });

package/package.json

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