@refineui/tokens 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @refineui/tokens
 
+## 1.0.3
+
+### Patch Changes
+
+- Add Collapsible and Context Menu, frosted floating panels with blur tokens, SidebarPeek glass, and control polish (SegmentedControl, Breadcrumb, InputOTP).
+
+## 1.0.2
+
+### Patch Changes
+
+- Skip Segmented Control/Tabs mount animation, align Toast/Tooltip/PopOver with Menu semantic colors, and match Tooltip beak to the PopOver SVG pattern.
+
 ## 1.0.1
 
 ### Patch Changes

package/README.md

@@ -30,8 +30,8 @@ bun run build   # or npm/yarn/pnpm run build — builds utilities → tokens →
 
 ## Layers
 
-1. **Primitive / Foundation** (`src/global`) — palette, spacing, radius, shadows, foundation sizes, opacities, icon sizes, **`typographys`**, **`motion`** (raw duration / easing / scale / distance steps)
-2. **Semantic** (`src/semantic`) — color aliases, **`semanticInteraction`** (motion roles → Foundation steps), elevation pairs, **`SEMANTIC_TEXT`** (bodyMd, labelSm, … → Foundation keys)
+1. **Primitive / Foundation** (`src/global`) — palette, spacing, radius, **blurs**, shadows, foundation sizes, opacities, icon sizes, **`typographys`**, **`motion`** (raw duration / easing / scale / distance steps)
+2. **Semantic** (`src/semantic`) — color aliases, **`semanticInteraction`** (motion roles → Foundation steps), **`semanticBlur`** (overlay/surface blur roles → Foundation steps), elevation pairs, **`SEMANTIC_TEXT`** (bodyMd, labelSm, … → Foundation keys)
 3. **Component** — colors/sizes/typography/state role maps in `@refineui/react` (`componentColorTokens`, `componentTypographyTokens`)
 4. **Recipe** — `packages/react/src/recipes/` (base, variants, compoundVariants; slot recipes for Alert/Dialog/…)
 5. **Interaction** — `refineui.css` + `data-state` contract

package/dist/css-variables.css

@@ -146,6 +146,7 @@
   --refineui-size-foundation-size-20: 2px;
   --refineui-size-foundation-size-30: 3px;
   --refineui-size-foundation-size-40: 4px;
+  --refineui-size-foundation-size-50: 5px;
   --refineui-size-foundation-size-60: 6px;
   --refineui-size-foundation-size-80: 8px;
   --refineui-size-foundation-size-100: 10px;
@@ -195,10 +196,11 @@
   --refineui-size-popover-panel-width: var(--refineui-size-foundation-size-3250);
   --refineui-size-popover-beak-inset-from-start-edge: var(--refineui-size-foundation-size-340);
   --refineui-size-popover-beak-inset-from-end-edge: var(--refineui-size-foundation-size-300);
-  --refineui-size-menu-panel-width: var(--refineui-size-foundation-size-2440);
-  --refineui-size-dropdown-menu-width: var(--refineui-size-foundation-size-2440);
+  --refineui-size-navigation-menu-item-min-width: var(--refineui-size-foundation-size-400);
+  --refineui-size-menu-panel-width: var(--refineui-size-foundation-size-2000);
+  --refineui-size-dropdown-menu-width: var(--refineui-size-foundation-size-2000);
   --refineui-size-sidebar-width: var(--refineui-size-foundation-size-2560);
-  --refineui-size-toast-min-width: var(--refineui-size-foundation-size-3250);
+  --refineui-size-toast-min-width: var(--refineui-size-foundation-size-2000);
   --refineui-size-toast-max-width: var(--refineui-size-foundation-size-3250);
   --refineui-size-dialog-max-width: var(--refineui-size-foundation-size-6000);
   --refineui-size-dialog-width-sm: var(--refineui-size-foundation-size-3000);
@@ -251,6 +253,15 @@
   --refineui-opacity-full: 1;
   --refineui-opacity-disabled: 0.5;
   --refineui-opacity-ghost-hover: 0.08;
+  /* Blur — Foundation steps + Semantic role aliases */
+  --refineui-foundation-blur-none: 0;
+  --refineui-foundation-blur-2: 2px;
+  --refineui-foundation-blur-4: 4px;
+  --refineui-foundation-blur-8: 8px;
+  --refineui-foundation-blur-12: 12px;
+  --refineui-foundation-blur-16: 16px;
+  --refineui-blur-overlay-scrim: var(--refineui-foundation-blur-2);
+  --refineui-blur-surface-frost: var(--refineui-foundation-blur-16);
   /* Motion — Foundation steps + Semantic role aliases */
   --refineui-foundation-motion-duration-0: 0ms;
   --refineui-foundation-motion-duration-150: 150ms;
@@ -476,6 +487,12 @@
   --refineui-elevation-64light: 0 24px 24px 0 rgba(33, 33, 33, 0.05), 0 48px 96px 0 rgba(33, 33, 33, 0.04);
   --refineui-elevation-64dark: 0 24px 24px 0 rgba(0, 0, 0, 0.2), 0 48px 96px 0 rgba(0, 0, 0, 0.15);
   --refineui-elevation-64: var(--refineui-elevation-64light);
+  --refineui-elevation-surface: 0 1px 2px 0 rgba(33, 33, 33, 0.05), 0 2px 4px 0 rgba(33, 33, 33, 0.04);
+  --refineui-elevation-raised: 0 2px 2px 0 rgba(33, 33, 33, 0.05), 0 4px 8px 0 rgba(33, 33, 33, 0.04);
+  --refineui-elevation-floating: 0 4px 4px 0 rgba(33, 33, 33, 0.05), 0 8px 16px 0 rgba(33, 33, 33, 0.04);
+  --refineui-elevation-overlay: 0 8px 8px 0 rgba(33, 33, 33, 0.05), 0 16px 32px 0 rgba(33, 33, 33, 0.04);
+  --refineui-elevation-modal: 0 12px 12px 0 rgba(33, 33, 33, 0.05), 0 24px 48px 0 rgba(33, 33, 33, 0.04);
+  --refineui-elevation-toast: 0 8px 8px 0 rgba(33, 33, 33, 0.05), 0 16px 32px 0 rgba(33, 33, 33, 0.04);
   --refineui-elevation-2lighter: 0 1px 2px 0 rgba(33, 33, 33, 0.02), 0 2px 4px 0 rgba(33, 33, 33, 0.02);
   /* Z-index */
   --refineui-z-background: 0;
@@ -557,6 +574,7 @@
   --refineui-color-alias-surface-sunken: var(--refineui-color-neutral-150);
   --refineui-color-alias-surface-tooltip: var(--refineui-color-neutral-750);
   --refineui-color-alias-surface-overlay: rgba(0, 0, 0, 0.2);
+  --refineui-color-alias-surface-frosted: rgba(255, 255, 255, 0.55);
   /* Focus ring — :focus-visible contract */
   --refineui-focus-ring-color: var(--refineui-color-neutral-750);
   --refineui-focus-ring-width: 2px;
@@ -637,6 +655,7 @@
   --refineui-color-alias-surface-sunken: var(--refineui-color-neutral-800);
   --refineui-color-alias-surface-tooltip: var(--refineui-color-neutral-300);
   --refineui-color-alias-surface-overlay: rgba(0, 0, 0, 0.6);
+  --refineui-color-alias-surface-frosted: rgba(26, 26, 26, 0.55);
   /* Theme-aware elevation */
   --refineui-elevation-2: var(--refineui-elevation-2dark);
   --refineui-elevation-4: var(--refineui-elevation-4dark);
@@ -645,6 +664,12 @@
   --refineui-elevation-24: var(--refineui-elevation-24dark);
   --refineui-elevation-32: var(--refineui-elevation-32dark);
   --refineui-elevation-64: var(--refineui-elevation-64dark);
+  --refineui-elevation-surface: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+  --refineui-elevation-raised: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.15);
+  --refineui-elevation-floating: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 8px 16px 0 rgba(0, 0, 0, 0.15);
+  --refineui-elevation-overlay: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 16px 32px 0 rgba(0, 0, 0, 0.15);
+  --refineui-elevation-modal: 0 12px 12px 0 rgba(0, 0, 0, 0.2), 0 24px 48px 0 rgba(0, 0, 0, 0.15);
+  --refineui-elevation-toast: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 16px 32px 0 rgba(0, 0, 0, 0.15);
   /* Focus ring — dark */
   --refineui-focus-ring-color: var(--refineui-color-neutral-350);
 }

package/dist/index.d.mts

@@ -215,6 +215,13 @@ type SemanticShadowElevationPair = {
 type SemanticShadowElevationName = "shadow2" | "shadow4" | "shadow8" | "shadow16" | "shadow24" | "shadow32" | "shadow64";
 /** Semantic elevation name → per-theme ShadowLevel (`semanticShadows`) */
 type SemanticShadowElevationTokens = Record<SemanticShadowElevationName, SemanticShadowElevationPair>;
+/**
+ * Intent-level elevation roles. Components consume these names rather than
+ * choosing a numbered shadow step, while the mapping remains traceable to the
+ * Foundation elevation scale.
+ */
+type SemanticElevationName = "surface" | "raised" | "floating" | "overlay" | "modal" | "toast";
+type SemanticElevationTokens = Record<SemanticElevationName, SemanticShadowElevationPair>;
 /**
  * Design tokens for stroke width
  */
@@ -239,6 +246,27 @@ type BorderRadiusTokens = {
     roundedXXLarge: string;
     roundedCircle: string;
 };
+/**
+ * Foundation blur primitives (`global/blurs.ts`).
+ * Value-based steps only — no UI role names.
+ */
+type FoundationBlurTokens = {
+    blurNone: string;
+    blur2: string;
+    blur4: string;
+    blur8: string;
+    blur12: string;
+    blur16: string;
+};
+type FoundationBlurName = keyof FoundationBlurTokens;
+/**
+ * Semantic blur roles (`semantic/blur.ts`) — resolved Foundation strings.
+ * Prefer role keys (`overlayScrim`, `surfaceFrost`) in component / CSS code.
+ */
+type SemanticBlurTokens = {
+    overlayScrim: string;
+    surfaceFrost: string;
+};
 /**
  * Design tokens for spacing size
  */
@@ -701,14 +729,22 @@ declare const SEMANTIC_PALETTE_PAIRS: {
     };
 };
 type SemanticPaletteName = keyof typeof SEMANTIC_PALETTE_PAIRS;
-/** Legacy row shape: [aliasTail, lightKey, darkKey | "__RGBA__"] (surfaceOverlay only) */
-declare const SEMANTIC_COLOR_ROWS: readonly [...(readonly ["backgroundBrandActive" | "backgroundBrandDisabled" | "backgroundBrandHover" | "backgroundBrandStrong" | "backgroundBrandSubtle" | "backgroundBrand" | "backgroundDiscoveryHover" | "backgroundDiscoverySubtle" | "backgroundDiscovery" | "backgroundErrorHover" | "backgroundErrorSubtle" | "backgroundError" | "backgroundInfoHover" | "backgroundInfoSubtle" | "backgroundInfo" | "backgroundPrimaryActive" | "backgroundPrimaryHover" | "backgroundPrimary" | "backgroundSuccessHover" | "backgroundSuccessSubtle" | "backgroundSuccess" | "backgroundSurfaceActive" | "backgroundSurfaceDisabled" | "backgroundSurfaceHover" | "backgroundSurfaceSelected" | "backgroundSurface" | "backgroundWarningHover" | "backgroundWarningSubtle" | "backgroundWarning" | "borderDefault" | "borderDisabled" | "borderDiscovery" | "borderError" | "borderFocus" | "borderHover" | "borderInfo" | "borderStrong" | "borderSubtle" | "borderSuccess" | "borderWarning" | "foregroundBrandStrong" | "foregroundBrand" | "foregroundDisabled" | "foregroundDiscovery" | "foregroundError" | "foregroundInfo" | "foregroundInversed" | "foregroundLinkActive" | "foregroundLinkHover" | "foregroundLinkVisited" | "foregroundLink" | "foregroundOnBrand" | "foregroundOnDiscovery" | "foregroundOnError" | "foregroundOnInfo" | "foregroundOnSuccess" | "foregroundOnWarning" | "foregroundPlaceholder" | "foregroundPrimaryHover" | "foregroundPrimary" | "foregroundSecondary" | "foregroundSuccess" | "foregroundTertiary" | "foregroundWarning" | "surfaceElevated" | "surfaceInverse" | "surfacePopover" | "surfaceSunken" | "surfaceTooltip", keyof PaletteColors, keyof PaletteColors])[], readonly ["surfaceOverlay", "__RGBA__", "__RGBA__"]];
-type SemanticColorName = SemanticPaletteName | "surfaceOverlay";
+/** Legacy row shape: [aliasTail, lightKey, darkKey | "__RGBA__"] (RGBA aliases) */
+declare const SEMANTIC_COLOR_ROWS: readonly [...(readonly ["backgroundBrandActive" | "backgroundBrandDisabled" | "backgroundBrandHover" | "backgroundBrandStrong" | "backgroundBrandSubtle" | "backgroundBrand" | "backgroundDiscoveryHover" | "backgroundDiscoverySubtle" | "backgroundDiscovery" | "backgroundErrorHover" | "backgroundErrorSubtle" | "backgroundError" | "backgroundInfoHover" | "backgroundInfoSubtle" | "backgroundInfo" | "backgroundPrimaryActive" | "backgroundPrimaryHover" | "backgroundPrimary" | "backgroundSuccessHover" | "backgroundSuccessSubtle" | "backgroundSuccess" | "backgroundSurfaceActive" | "backgroundSurfaceDisabled" | "backgroundSurfaceHover" | "backgroundSurfaceSelected" | "backgroundSurface" | "backgroundWarningHover" | "backgroundWarningSubtle" | "backgroundWarning" | "borderDefault" | "borderDisabled" | "borderDiscovery" | "borderError" | "borderFocus" | "borderHover" | "borderInfo" | "borderStrong" | "borderSubtle" | "borderSuccess" | "borderWarning" | "foregroundBrandStrong" | "foregroundBrand" | "foregroundDisabled" | "foregroundDiscovery" | "foregroundError" | "foregroundInfo" | "foregroundInversed" | "foregroundLinkActive" | "foregroundLinkHover" | "foregroundLinkVisited" | "foregroundLink" | "foregroundOnBrand" | "foregroundOnDiscovery" | "foregroundOnError" | "foregroundOnInfo" | "foregroundOnSuccess" | "foregroundOnWarning" | "foregroundPlaceholder" | "foregroundPrimaryHover" | "foregroundPrimary" | "foregroundSecondary" | "foregroundSuccess" | "foregroundTertiary" | "foregroundWarning" | "surfaceElevated" | "surfaceInverse" | "surfacePopover" | "surfaceSunken" | "surfaceTooltip", keyof PaletteColors, keyof PaletteColors])[], readonly ["surfaceOverlay", "__RGBA__", "__RGBA__"], readonly ["surfaceFrosted", "__RGBA__", "__RGBA__"]];
+type SemanticColorName = SemanticPaletteName | "surfaceOverlay" | "surfaceFrosted";
 /** Foundation surfaceOverlay (Overlay and Modal) — raw RGBA */
 declare const surfaceOverlayRgba: {
     readonly light: "rgba(0, 0, 0, 0.2)";
     readonly dark: "rgba(0, 0, 0, 0.6)";
 };
+/**
+ * Frosted panel fill (Menu / Dropdown / Select) — translucent so `surfaceFrost` blur shows.
+ * Keep alpha low enough that page content reads through; pair with `--refineui-blur-surface-frost`.
+ */
+declare const surfaceFrostedRgba: {
+    readonly light: string;
+    readonly dark: string;
+};
 /** Semantic colors — values are CSS var(--refineui-color-*) or rgba(...) */
 declare const semanticColors: Record<SemanticColorName, SemanticColorModePair>;
 
@@ -745,6 +781,11 @@ declare const semanticFocus: {
 
 /** `semanticShadows.shadow2.light` / `.dark` — pick global `shadows` per theme */
 declare const semanticShadows: SemanticShadowElevationTokens;
+/**
+ * Component-facing elevation roles. Keep the numeric `semanticShadows` scale
+ * for Foundation traceability; use these roles in component recipes and CSS.
+ */
+declare const semanticElevations: SemanticElevationTokens;
 
 /**
  * Semantic text roles — M3/Polaris-style meaning layer over Foundation `typographys`.
@@ -818,6 +859,7 @@ declare const foundationSizes: {
     readonly foundationSize20: "2px";
     readonly foundationSize30: "3px";
     readonly foundationSize40: "4px";
+    readonly foundationSize50: "5px";
     readonly foundationSize60: "6px";
     readonly foundationSize80: "8px";
     readonly foundationSize100: "10px";
@@ -875,10 +917,11 @@ declare const componentSizeFoundationKeys: {
     readonly popoverPanelWidth: "foundationSize3250";
     readonly popoverBeakInsetFromStartEdge: "foundationSize340";
     readonly popoverBeakInsetFromEndEdge: "foundationSize300";
-    readonly menuPanelWidth: "foundationSize2440";
-    readonly dropdownMenuWidth: "foundationSize2440";
+    readonly navigationMenuItemMinWidth: "foundationSize400";
+    readonly menuPanelWidth: "foundationSize2000";
+    readonly dropdownMenuWidth: "foundationSize2000";
     readonly sidebarWidth: "foundationSize2560";
-    readonly toastMinWidth: "foundationSize3250";
+    readonly toastMinWidth: "foundationSize2000";
     readonly toastMaxWidth: "foundationSize3250";
     readonly dialogMaxWidth: "foundationSize6000";
     readonly dialogWidthSm: "foundationSize3000";
@@ -942,11 +985,12 @@ declare const componentSizes: {
     readonly popoverPanelWidth: "325px";
     readonly popoverBeakInsetFromStartEdge: "34px";
     readonly popoverBeakInsetFromEndEdge: "30px";
-    readonly menuPanelWidth: "244px";
+    readonly navigationMenuItemMinWidth: "40px";
+    readonly menuPanelWidth: "200px";
     /** @deprecated Same as `menuPanelWidth` */
-    readonly dropdownMenuWidth: "244px";
+    readonly dropdownMenuWidth: "200px";
     readonly sidebarWidth: "256px";
-    readonly toastMinWidth: "325px";
+    readonly toastMinWidth: "200px";
     readonly toastMaxWidth: "325px";
     readonly dialogMaxWidth: "600px";
     /** Viewport-relative — not a Foundation px step */
@@ -1011,6 +1055,33 @@ declare const overlays: {
     readonly ghostButtonHoverDark: "rgba(255, 255, 255, 0.08)";
 };
 
+/**
+ * Foundation blur primitives — raw `backdrop-filter` / filter blur steps.
+ * Semantic roles live in `semantic/blur.ts` and must reference these values
+ * (do not invent px at the semantic or component layer).
+ *
+ * Naming: value-based keys (`blur2`, `blur8`), same idea as `foundationSize160`.
+ */
+
+declare const blurs: FoundationBlurTokens;
+
+/**
+ * Maps each semantic blur role → Foundation blur key for CSS
+ * `--refineui-blur-*` → `var(--refineui-foundation-blur-*)`.
+ */
+declare const semanticBlurFoundationKeys: {
+    /** Dialog / Drawer scrim — light frosted dim behind modal chrome */
+    readonly overlayScrim: "blur2";
+    /** Frosted glass surfaces (menus, toast plate, …) */
+    readonly surfaceFrost: "blur16";
+};
+type SemanticBlurName = keyof typeof semanticBlurFoundationKeys;
+/** Resolved blur strings for JS layout math. Source of truth is Foundation. */
+declare const semanticBlur: {
+    readonly overlayScrim: string;
+    readonly surfaceFrost: string;
+};
+
 /**
  * Foundation motion primitives — raw duration / easing / scale / distance steps.
  * Semantic roles live in `semantic/interaction.ts` and must reference these values
@@ -1046,4 +1117,4 @@ declare const zIndex: ZIndexTokens;
 
 declare const textAlignments: TextAlignments;
 
-export { type BorderRadiusTokens, type ComponentSizeName, type FontFamilyTokens, type FontSizeTokens, type FontWeightTokens, type FoundationMotionTokens, type FoundationSizeName, type FoundationTypographyName, type LineHeightTokens, type MotionTokens, type PaletteColors, SEMANTIC_COLOR_ROWS, SEMANTIC_FOCUS_PAIRS, SEMANTIC_PALETTE_PAIRS, SEMANTIC_TEXT, type SemanticColorModePair, type SemanticColorName, type SemanticFocusName, type SemanticInteractionTokens, type SemanticPaletteName, type SemanticPalettePair, type SemanticPalettePairFor, type SemanticPalettePairsOf, type SemanticShadowElevationName, type SemanticShadowElevationPair, type SemanticShadowElevationTokens, type SemanticTextName, type SemanticThemeMap, type ShadowColorTokens, type ShadowLevel, type ShadowTokens, type SpacingTokens, type StrokeWidthTokens, type TextAlignment, type TextAlignments, type Theme, type ThemeContextKey, type TokenMeta, type TokenStatus, type TypographyStyle, type TypographyStyles, type ZIndexTokens, borderRadii, colors, componentSizeFoundationKeys, componentSizes, fontFamilies, fontSizes, fontWeights, foundationSizes, iconSizes, lineHeights, motion, opacities, overlays, semanticColors, semanticFocus, semanticInteraction, semanticShadows, shadow2Lighter, shadowColors, shadows, spacings, strokeWidths, surfaceOverlayRgba, textAlignments, toBoxShadow, typographys, zIndex };
+export { type BorderRadiusTokens, type ComponentSizeName, type FontFamilyTokens, type FontSizeTokens, type FontWeightTokens, type FoundationBlurName, type FoundationBlurTokens, type FoundationMotionTokens, type FoundationSizeName, type FoundationTypographyName, type LineHeightTokens, type MotionTokens, type PaletteColors, SEMANTIC_COLOR_ROWS, SEMANTIC_FOCUS_PAIRS, SEMANTIC_PALETTE_PAIRS, SEMANTIC_TEXT, type SemanticBlurName, type SemanticBlurTokens, type SemanticColorModePair, type SemanticColorName, type SemanticElevationName, type SemanticElevationTokens, type SemanticFocusName, type SemanticInteractionTokens, type SemanticPaletteName, type SemanticPalettePair, type SemanticPalettePairFor, type SemanticPalettePairsOf, type SemanticShadowElevationName, type SemanticShadowElevationPair, type SemanticShadowElevationTokens, type SemanticTextName, type SemanticThemeMap, type ShadowColorTokens, type ShadowLevel, type ShadowTokens, type SpacingTokens, type StrokeWidthTokens, type TextAlignment, type TextAlignments, type Theme, type ThemeContextKey, type TokenMeta, type TokenStatus, type TypographyStyle, type TypographyStyles, type ZIndexTokens, blurs, borderRadii, colors, componentSizeFoundationKeys, componentSizes, fontFamilies, fontSizes, fontWeights, foundationSizes, iconSizes, lineHeights, motion, opacities, overlays, semanticBlur, semanticBlurFoundationKeys, semanticColors, semanticElevations, semanticFocus, semanticInteraction, semanticShadows, shadow2Lighter, shadowColors, shadows, spacings, strokeWidths, surfaceFrostedRgba, surfaceOverlayRgba, textAlignments, toBoxShadow, typographys, zIndex };

package/dist/index.d.ts

@@ -215,6 +215,13 @@ type SemanticShadowElevationPair = {
 type SemanticShadowElevationName = "shadow2" | "shadow4" | "shadow8" | "shadow16" | "shadow24" | "shadow32" | "shadow64";
 /** Semantic elevation name → per-theme ShadowLevel (`semanticShadows`) */
 type SemanticShadowElevationTokens = Record<SemanticShadowElevationName, SemanticShadowElevationPair>;
+/**
+ * Intent-level elevation roles. Components consume these names rather than
+ * choosing a numbered shadow step, while the mapping remains traceable to the
+ * Foundation elevation scale.
+ */
+type SemanticElevationName = "surface" | "raised" | "floating" | "overlay" | "modal" | "toast";
+type SemanticElevationTokens = Record<SemanticElevationName, SemanticShadowElevationPair>;
 /**
  * Design tokens for stroke width
  */
@@ -239,6 +246,27 @@ type BorderRadiusTokens = {
     roundedXXLarge: string;
     roundedCircle: string;
 };
+/**
+ * Foundation blur primitives (`global/blurs.ts`).
+ * Value-based steps only — no UI role names.
+ */
+type FoundationBlurTokens = {
+    blurNone: string;
+    blur2: string;
+    blur4: string;
+    blur8: string;
+    blur12: string;
+    blur16: string;
+};
+type FoundationBlurName = keyof FoundationBlurTokens;
+/**
+ * Semantic blur roles (`semantic/blur.ts`) — resolved Foundation strings.
+ * Prefer role keys (`overlayScrim`, `surfaceFrost`) in component / CSS code.
+ */
+type SemanticBlurTokens = {
+    overlayScrim: string;
+    surfaceFrost: string;
+};
 /**
  * Design tokens for spacing size
  */
@@ -701,14 +729,22 @@ declare const SEMANTIC_PALETTE_PAIRS: {
     };
 };
 type SemanticPaletteName = keyof typeof SEMANTIC_PALETTE_PAIRS;
-/** Legacy row shape: [aliasTail, lightKey, darkKey | "__RGBA__"] (surfaceOverlay only) */
-declare const SEMANTIC_COLOR_ROWS: readonly [...(readonly ["backgroundBrandActive" | "backgroundBrandDisabled" | "backgroundBrandHover" | "backgroundBrandStrong" | "backgroundBrandSubtle" | "backgroundBrand" | "backgroundDiscoveryHover" | "backgroundDiscoverySubtle" | "backgroundDiscovery" | "backgroundErrorHover" | "backgroundErrorSubtle" | "backgroundError" | "backgroundInfoHover" | "backgroundInfoSubtle" | "backgroundInfo" | "backgroundPrimaryActive" | "backgroundPrimaryHover" | "backgroundPrimary" | "backgroundSuccessHover" | "backgroundSuccessSubtle" | "backgroundSuccess" | "backgroundSurfaceActive" | "backgroundSurfaceDisabled" | "backgroundSurfaceHover" | "backgroundSurfaceSelected" | "backgroundSurface" | "backgroundWarningHover" | "backgroundWarningSubtle" | "backgroundWarning" | "borderDefault" | "borderDisabled" | "borderDiscovery" | "borderError" | "borderFocus" | "borderHover" | "borderInfo" | "borderStrong" | "borderSubtle" | "borderSuccess" | "borderWarning" | "foregroundBrandStrong" | "foregroundBrand" | "foregroundDisabled" | "foregroundDiscovery" | "foregroundError" | "foregroundInfo" | "foregroundInversed" | "foregroundLinkActive" | "foregroundLinkHover" | "foregroundLinkVisited" | "foregroundLink" | "foregroundOnBrand" | "foregroundOnDiscovery" | "foregroundOnError" | "foregroundOnInfo" | "foregroundOnSuccess" | "foregroundOnWarning" | "foregroundPlaceholder" | "foregroundPrimaryHover" | "foregroundPrimary" | "foregroundSecondary" | "foregroundSuccess" | "foregroundTertiary" | "foregroundWarning" | "surfaceElevated" | "surfaceInverse" | "surfacePopover" | "surfaceSunken" | "surfaceTooltip", keyof PaletteColors, keyof PaletteColors])[], readonly ["surfaceOverlay", "__RGBA__", "__RGBA__"]];
-type SemanticColorName = SemanticPaletteName | "surfaceOverlay";
+/** Legacy row shape: [aliasTail, lightKey, darkKey | "__RGBA__"] (RGBA aliases) */
+declare const SEMANTIC_COLOR_ROWS: readonly [...(readonly ["backgroundBrandActive" | "backgroundBrandDisabled" | "backgroundBrandHover" | "backgroundBrandStrong" | "backgroundBrandSubtle" | "backgroundBrand" | "backgroundDiscoveryHover" | "backgroundDiscoverySubtle" | "backgroundDiscovery" | "backgroundErrorHover" | "backgroundErrorSubtle" | "backgroundError" | "backgroundInfoHover" | "backgroundInfoSubtle" | "backgroundInfo" | "backgroundPrimaryActive" | "backgroundPrimaryHover" | "backgroundPrimary" | "backgroundSuccessHover" | "backgroundSuccessSubtle" | "backgroundSuccess" | "backgroundSurfaceActive" | "backgroundSurfaceDisabled" | "backgroundSurfaceHover" | "backgroundSurfaceSelected" | "backgroundSurface" | "backgroundWarningHover" | "backgroundWarningSubtle" | "backgroundWarning" | "borderDefault" | "borderDisabled" | "borderDiscovery" | "borderError" | "borderFocus" | "borderHover" | "borderInfo" | "borderStrong" | "borderSubtle" | "borderSuccess" | "borderWarning" | "foregroundBrandStrong" | "foregroundBrand" | "foregroundDisabled" | "foregroundDiscovery" | "foregroundError" | "foregroundInfo" | "foregroundInversed" | "foregroundLinkActive" | "foregroundLinkHover" | "foregroundLinkVisited" | "foregroundLink" | "foregroundOnBrand" | "foregroundOnDiscovery" | "foregroundOnError" | "foregroundOnInfo" | "foregroundOnSuccess" | "foregroundOnWarning" | "foregroundPlaceholder" | "foregroundPrimaryHover" | "foregroundPrimary" | "foregroundSecondary" | "foregroundSuccess" | "foregroundTertiary" | "foregroundWarning" | "surfaceElevated" | "surfaceInverse" | "surfacePopover" | "surfaceSunken" | "surfaceTooltip", keyof PaletteColors, keyof PaletteColors])[], readonly ["surfaceOverlay", "__RGBA__", "__RGBA__"], readonly ["surfaceFrosted", "__RGBA__", "__RGBA__"]];
+type SemanticColorName = SemanticPaletteName | "surfaceOverlay" | "surfaceFrosted";
 /** Foundation surfaceOverlay (Overlay and Modal) — raw RGBA */
 declare const surfaceOverlayRgba: {
     readonly light: "rgba(0, 0, 0, 0.2)";
     readonly dark: "rgba(0, 0, 0, 0.6)";
 };
+/**
+ * Frosted panel fill (Menu / Dropdown / Select) — translucent so `surfaceFrost` blur shows.
+ * Keep alpha low enough that page content reads through; pair with `--refineui-blur-surface-frost`.
+ */
+declare const surfaceFrostedRgba: {
+    readonly light: string;
+    readonly dark: string;
+};
 /** Semantic colors — values are CSS var(--refineui-color-*) or rgba(...) */
 declare const semanticColors: Record<SemanticColorName, SemanticColorModePair>;
 
@@ -745,6 +781,11 @@ declare const semanticFocus: {
 
 /** `semanticShadows.shadow2.light` / `.dark` — pick global `shadows` per theme */
 declare const semanticShadows: SemanticShadowElevationTokens;
+/**
+ * Component-facing elevation roles. Keep the numeric `semanticShadows` scale
+ * for Foundation traceability; use these roles in component recipes and CSS.
+ */
+declare const semanticElevations: SemanticElevationTokens;
 
 /**
  * Semantic text roles — M3/Polaris-style meaning layer over Foundation `typographys`.
@@ -818,6 +859,7 @@ declare const foundationSizes: {
     readonly foundationSize20: "2px";
     readonly foundationSize30: "3px";
     readonly foundationSize40: "4px";
+    readonly foundationSize50: "5px";
     readonly foundationSize60: "6px";
     readonly foundationSize80: "8px";
     readonly foundationSize100: "10px";
@@ -875,10 +917,11 @@ declare const componentSizeFoundationKeys: {
     readonly popoverPanelWidth: "foundationSize3250";
     readonly popoverBeakInsetFromStartEdge: "foundationSize340";
     readonly popoverBeakInsetFromEndEdge: "foundationSize300";
-    readonly menuPanelWidth: "foundationSize2440";
-    readonly dropdownMenuWidth: "foundationSize2440";
+    readonly navigationMenuItemMinWidth: "foundationSize400";
+    readonly menuPanelWidth: "foundationSize2000";
+    readonly dropdownMenuWidth: "foundationSize2000";
     readonly sidebarWidth: "foundationSize2560";
-    readonly toastMinWidth: "foundationSize3250";
+    readonly toastMinWidth: "foundationSize2000";
     readonly toastMaxWidth: "foundationSize3250";
     readonly dialogMaxWidth: "foundationSize6000";
     readonly dialogWidthSm: "foundationSize3000";
@@ -942,11 +985,12 @@ declare const componentSizes: {
     readonly popoverPanelWidth: "325px";
     readonly popoverBeakInsetFromStartEdge: "34px";
     readonly popoverBeakInsetFromEndEdge: "30px";
-    readonly menuPanelWidth: "244px";
+    readonly navigationMenuItemMinWidth: "40px";
+    readonly menuPanelWidth: "200px";
     /** @deprecated Same as `menuPanelWidth` */
-    readonly dropdownMenuWidth: "244px";
+    readonly dropdownMenuWidth: "200px";
     readonly sidebarWidth: "256px";
-    readonly toastMinWidth: "325px";
+    readonly toastMinWidth: "200px";
     readonly toastMaxWidth: "325px";
     readonly dialogMaxWidth: "600px";
     /** Viewport-relative — not a Foundation px step */
@@ -1011,6 +1055,33 @@ declare const overlays: {
     readonly ghostButtonHoverDark: "rgba(255, 255, 255, 0.08)";
 };
 
+/**
+ * Foundation blur primitives — raw `backdrop-filter` / filter blur steps.
+ * Semantic roles live in `semantic/blur.ts` and must reference these values
+ * (do not invent px at the semantic or component layer).
+ *
+ * Naming: value-based keys (`blur2`, `blur8`), same idea as `foundationSize160`.
+ */
+
+declare const blurs: FoundationBlurTokens;
+
+/**
+ * Maps each semantic blur role → Foundation blur key for CSS
+ * `--refineui-blur-*` → `var(--refineui-foundation-blur-*)`.
+ */
+declare const semanticBlurFoundationKeys: {
+    /** Dialog / Drawer scrim — light frosted dim behind modal chrome */
+    readonly overlayScrim: "blur2";
+    /** Frosted glass surfaces (menus, toast plate, …) */
+    readonly surfaceFrost: "blur16";
+};
+type SemanticBlurName = keyof typeof semanticBlurFoundationKeys;
+/** Resolved blur strings for JS layout math. Source of truth is Foundation. */
+declare const semanticBlur: {
+    readonly overlayScrim: string;
+    readonly surfaceFrost: string;
+};
+
 /**
  * Foundation motion primitives — raw duration / easing / scale / distance steps.
  * Semantic roles live in `semantic/interaction.ts` and must reference these values
@@ -1046,4 +1117,4 @@ declare const zIndex: ZIndexTokens;
 
 declare const textAlignments: TextAlignments;
 
-export { type BorderRadiusTokens, type ComponentSizeName, type FontFamilyTokens, type FontSizeTokens, type FontWeightTokens, type FoundationMotionTokens, type FoundationSizeName, type FoundationTypographyName, type LineHeightTokens, type MotionTokens, type PaletteColors, SEMANTIC_COLOR_ROWS, SEMANTIC_FOCUS_PAIRS, SEMANTIC_PALETTE_PAIRS, SEMANTIC_TEXT, type SemanticColorModePair, type SemanticColorName, type SemanticFocusName, type SemanticInteractionTokens, type SemanticPaletteName, type SemanticPalettePair, type SemanticPalettePairFor, type SemanticPalettePairsOf, type SemanticShadowElevationName, type SemanticShadowElevationPair, type SemanticShadowElevationTokens, type SemanticTextName, type SemanticThemeMap, type ShadowColorTokens, type ShadowLevel, type ShadowTokens, type SpacingTokens, type StrokeWidthTokens, type TextAlignment, type TextAlignments, type Theme, type ThemeContextKey, type TokenMeta, type TokenStatus, type TypographyStyle, type TypographyStyles, type ZIndexTokens, borderRadii, colors, componentSizeFoundationKeys, componentSizes, fontFamilies, fontSizes, fontWeights, foundationSizes, iconSizes, lineHeights, motion, opacities, overlays, semanticColors, semanticFocus, semanticInteraction, semanticShadows, shadow2Lighter, shadowColors, shadows, spacings, strokeWidths, surfaceOverlayRgba, textAlignments, toBoxShadow, typographys, zIndex };
+export { type BorderRadiusTokens, type ComponentSizeName, type FontFamilyTokens, type FontSizeTokens, type FontWeightTokens, type FoundationBlurName, type FoundationBlurTokens, type FoundationMotionTokens, type FoundationSizeName, type FoundationTypographyName, type LineHeightTokens, type MotionTokens, type PaletteColors, SEMANTIC_COLOR_ROWS, SEMANTIC_FOCUS_PAIRS, SEMANTIC_PALETTE_PAIRS, SEMANTIC_TEXT, type SemanticBlurName, type SemanticBlurTokens, type SemanticColorModePair, type SemanticColorName, type SemanticElevationName, type SemanticElevationTokens, type SemanticFocusName, type SemanticInteractionTokens, type SemanticPaletteName, type SemanticPalettePair, type SemanticPalettePairFor, type SemanticPalettePairsOf, type SemanticShadowElevationName, type SemanticShadowElevationPair, type SemanticShadowElevationTokens, type SemanticTextName, type SemanticThemeMap, type ShadowColorTokens, type ShadowLevel, type ShadowTokens, type SpacingTokens, type StrokeWidthTokens, type TextAlignment, type TextAlignments, type Theme, type ThemeContextKey, type TokenMeta, type TokenStatus, type TypographyStyle, type TypographyStyles, type ZIndexTokens, blurs, borderRadii, colors, componentSizeFoundationKeys, componentSizes, fontFamilies, fontSizes, fontWeights, foundationSizes, iconSizes, lineHeights, motion, opacities, overlays, semanticBlur, semanticBlurFoundationKeys, semanticColors, semanticElevations, semanticFocus, semanticInteraction, semanticShadows, shadow2Lighter, shadowColors, shadows, spacings, strokeWidths, surfaceFrostedRgba, surfaceOverlayRgba, textAlignments, toBoxShadow, typographys, zIndex };

package/dist/index.js

@@ -24,6 +24,7 @@ __export(index_exports, {
   SEMANTIC_FOCUS_PAIRS: () => SEMANTIC_FOCUS_PAIRS,
   SEMANTIC_PALETTE_PAIRS: () => SEMANTIC_PALETTE_PAIRS,
   SEMANTIC_TEXT: () => SEMANTIC_TEXT,
+  blurs: () => blurs,
   borderRadii: () => borderRadii,
   colors: () => colors,
   componentSizeFoundationKeys: () => componentSizeFoundationKeys,
@@ -37,7 +38,10 @@ __export(index_exports, {
   motion: () => motion,
   opacities: () => opacities,
   overlays: () => overlays,
+  semanticBlur: () => semanticBlur,
+  semanticBlurFoundationKeys: () => semanticBlurFoundationKeys,
   semanticColors: () => semanticColors,
+  semanticElevations: () => semanticElevations,
   semanticFocus: () => semanticFocus,
   semanticInteraction: () => semanticInteraction,
   semanticShadows: () => semanticShadows,
@@ -46,6 +50,7 @@ __export(index_exports, {
   shadows: () => shadows,
   spacings: () => spacings,
   strokeWidths: () => strokeWidths,
+  surfaceFrostedRgba: () => surfaceFrostedRgba,
   surfaceOverlayRgba: () => surfaceOverlayRgba,
   textAlignments: () => textAlignments,
   toBoxShadow: () => toBoxShadow,
@@ -261,12 +266,17 @@ var SEMANTIC_PALETTE_PAIRS = {
 };
 var SEMANTIC_COLOR_ROWS = [
   ...Object.entries(SEMANTIC_PALETTE_PAIRS).map(([name, { light, dark }]) => [name, light, dark]),
-  ["surfaceOverlay", "__RGBA__", "__RGBA__"]
+  ["surfaceOverlay", "__RGBA__", "__RGBA__"],
+  ["surfaceFrosted", "__RGBA__", "__RGBA__"]
 ];
 var surfaceOverlayRgba = {
   light: "rgba(0, 0, 0, 0.2)",
   dark: "rgba(0, 0, 0, 0.6)"
 };
+var surfaceFrostedRgba = {
+  light: hexToRgba(colors.neutralWhite, 0.55),
+  dark: hexToRgba(colors.neutral900, 0.55)
+};
 function buildSemanticColors() {
   const out = {};
   for (const name of Object.keys(SEMANTIC_PALETTE_PAIRS)) {
@@ -277,6 +287,7 @@ function buildSemanticColors() {
     };
   }
   out.surfaceOverlay = { light: surfaceOverlayRgba.light, dark: surfaceOverlayRgba.dark };
+  out.surfaceFrosted = { light: surfaceFrostedRgba.light, dark: surfaceFrostedRgba.dark };
   return out;
 }
 var semanticColors = buildSemanticColors();
@@ -540,6 +551,14 @@ var semanticShadows = {
   shadow32: { light: shadows.shadow32Light, dark: shadows.shadow32Dark },
   shadow64: { light: shadows.shadow64Light, dark: shadows.shadow64Dark }
 };
+var semanticElevations = {
+  surface: semanticShadows.shadow2,
+  raised: semanticShadows.shadow4,
+  floating: semanticShadows.shadow8,
+  overlay: semanticShadows.shadow16,
+  modal: semanticShadows.shadow24,
+  toast: semanticShadows.shadow16
+};
 
 // src/semantic/text.ts
 var SEMANTIC_TEXT = {
@@ -626,6 +645,7 @@ var foundationSizes = {
   foundationSize20: "2px",
   foundationSize30: "3px",
   foundationSize40: "4px",
+  foundationSize50: "5px",
   foundationSize60: "6px",
   foundationSize80: "8px",
   foundationSize100: "10px",
@@ -680,10 +700,11 @@ var componentSizeFoundationKeys = {
   popoverPanelWidth: "foundationSize3250",
   popoverBeakInsetFromStartEdge: "foundationSize340",
   popoverBeakInsetFromEndEdge: "foundationSize300",
-  menuPanelWidth: "foundationSize2440",
-  dropdownMenuWidth: "foundationSize2440",
+  navigationMenuItemMinWidth: "foundationSize400",
+  menuPanelWidth: "foundationSize2000",
+  dropdownMenuWidth: "foundationSize2000",
   sidebarWidth: "foundationSize2560",
-  toastMinWidth: "foundationSize3250",
+  toastMinWidth: "foundationSize2000",
   toastMaxWidth: "foundationSize3250",
   dialogMaxWidth: "foundationSize6000",
   dialogWidthSm: "foundationSize3000",
@@ -745,6 +766,7 @@ var componentSizes = {
   popoverPanelWidth: fromFoundation("popoverPanelWidth"),
   popoverBeakInsetFromStartEdge: fromFoundation("popoverBeakInsetFromStartEdge"),
   popoverBeakInsetFromEndEdge: fromFoundation("popoverBeakInsetFromEndEdge"),
+  navigationMenuItemMinWidth: fromFoundation("navigationMenuItemMinWidth"),
   menuPanelWidth: fromFoundation("menuPanelWidth"),
   /** @deprecated Same as `menuPanelWidth` */
   dropdownMenuWidth: fromFoundation("dropdownMenuWidth"),
@@ -809,6 +831,31 @@ var overlays = {
   ghostButtonHoverDark: `rgba(255, 255, 255, ${opacities.opacityGhostHover})`
 };
 
+// src/global/blurs.ts
+var blurs = {
+  blurNone: "0",
+  blur2: "2px",
+  blur4: "4px",
+  blur8: "8px",
+  blur12: "12px",
+  blur16: "16px"
+};
+
+// src/semantic/blur.ts
+var semanticBlurFoundationKeys = {
+  /** Dialog / Drawer scrim — light frosted dim behind modal chrome */
+  overlayScrim: "blur2",
+  /** Frosted glass surfaces (menus, toast plate, …) */
+  surfaceFrost: "blur16"
+};
+function fromFoundation2(key) {
+  return blurs[semanticBlurFoundationKeys[key]];
+}
+var semanticBlur = {
+  overlayScrim: fromFoundation2("overlayScrim"),
+  surfaceFrost: fromFoundation2("surfaceFrost")
+};
+
 // src/global/borderRadii.ts
 var borderRadii = {
   roundedNone: "0",
@@ -948,6 +995,7 @@ var textAlignments = {
   SEMANTIC_FOCUS_PAIRS,
   SEMANTIC_PALETTE_PAIRS,
   SEMANTIC_TEXT,
+  blurs,
   borderRadii,
   colors,
   componentSizeFoundationKeys,
@@ -961,7 +1009,10 @@ var textAlignments = {
   motion,
   opacities,
   overlays,
+  semanticBlur,
+  semanticBlurFoundationKeys,
   semanticColors,
+  semanticElevations,
   semanticFocus,
   semanticInteraction,
   semanticShadows,
@@ -970,6 +1021,7 @@ var textAlignments = {
   shadows,
   spacings,
   strokeWidths,
+  surfaceFrostedRgba,
   surfaceOverlayRgba,
   textAlignments,
   toBoxShadow,

package/dist/index.mjs

@@ -205,12 +205,17 @@ var SEMANTIC_PALETTE_PAIRS = {
 };
 var SEMANTIC_COLOR_ROWS = [
   ...Object.entries(SEMANTIC_PALETTE_PAIRS).map(([name, { light, dark }]) => [name, light, dark]),
-  ["surfaceOverlay", "__RGBA__", "__RGBA__"]
+  ["surfaceOverlay", "__RGBA__", "__RGBA__"],
+  ["surfaceFrosted", "__RGBA__", "__RGBA__"]
 ];
 var surfaceOverlayRgba = {
   light: "rgba(0, 0, 0, 0.2)",
   dark: "rgba(0, 0, 0, 0.6)"
 };
+var surfaceFrostedRgba = {
+  light: hexToRgba(colors.neutralWhite, 0.55),
+  dark: hexToRgba(colors.neutral900, 0.55)
+};
 function buildSemanticColors() {
   const out = {};
   for (const name of Object.keys(SEMANTIC_PALETTE_PAIRS)) {
@@ -221,6 +226,7 @@ function buildSemanticColors() {
     };
   }
   out.surfaceOverlay = { light: surfaceOverlayRgba.light, dark: surfaceOverlayRgba.dark };
+  out.surfaceFrosted = { light: surfaceFrostedRgba.light, dark: surfaceFrostedRgba.dark };
   return out;
 }
 var semanticColors = buildSemanticColors();
@@ -484,6 +490,14 @@ var semanticShadows = {
   shadow32: { light: shadows.shadow32Light, dark: shadows.shadow32Dark },
   shadow64: { light: shadows.shadow64Light, dark: shadows.shadow64Dark }
 };
+var semanticElevations = {
+  surface: semanticShadows.shadow2,
+  raised: semanticShadows.shadow4,
+  floating: semanticShadows.shadow8,
+  overlay: semanticShadows.shadow16,
+  modal: semanticShadows.shadow24,
+  toast: semanticShadows.shadow16
+};
 
 // src/semantic/text.ts
 var SEMANTIC_TEXT = {
@@ -570,6 +584,7 @@ var foundationSizes = {
   foundationSize20: "2px",
   foundationSize30: "3px",
   foundationSize40: "4px",
+  foundationSize50: "5px",
   foundationSize60: "6px",
   foundationSize80: "8px",
   foundationSize100: "10px",
@@ -624,10 +639,11 @@ var componentSizeFoundationKeys = {
   popoverPanelWidth: "foundationSize3250",
   popoverBeakInsetFromStartEdge: "foundationSize340",
   popoverBeakInsetFromEndEdge: "foundationSize300",
-  menuPanelWidth: "foundationSize2440",
-  dropdownMenuWidth: "foundationSize2440",
+  navigationMenuItemMinWidth: "foundationSize400",
+  menuPanelWidth: "foundationSize2000",
+  dropdownMenuWidth: "foundationSize2000",
   sidebarWidth: "foundationSize2560",
-  toastMinWidth: "foundationSize3250",
+  toastMinWidth: "foundationSize2000",
   toastMaxWidth: "foundationSize3250",
   dialogMaxWidth: "foundationSize6000",
   dialogWidthSm: "foundationSize3000",
@@ -689,6 +705,7 @@ var componentSizes = {
   popoverPanelWidth: fromFoundation("popoverPanelWidth"),
   popoverBeakInsetFromStartEdge: fromFoundation("popoverBeakInsetFromStartEdge"),
   popoverBeakInsetFromEndEdge: fromFoundation("popoverBeakInsetFromEndEdge"),
+  navigationMenuItemMinWidth: fromFoundation("navigationMenuItemMinWidth"),
   menuPanelWidth: fromFoundation("menuPanelWidth"),
   /** @deprecated Same as `menuPanelWidth` */
   dropdownMenuWidth: fromFoundation("dropdownMenuWidth"),
@@ -753,6 +770,31 @@ var overlays = {
   ghostButtonHoverDark: `rgba(255, 255, 255, ${opacities.opacityGhostHover})`
 };
 
+// src/global/blurs.ts
+var blurs = {
+  blurNone: "0",
+  blur2: "2px",
+  blur4: "4px",
+  blur8: "8px",
+  blur12: "12px",
+  blur16: "16px"
+};
+
+// src/semantic/blur.ts
+var semanticBlurFoundationKeys = {
+  /** Dialog / Drawer scrim — light frosted dim behind modal chrome */
+  overlayScrim: "blur2",
+  /** Frosted glass surfaces (menus, toast plate, …) */
+  surfaceFrost: "blur16"
+};
+function fromFoundation2(key) {
+  return blurs[semanticBlurFoundationKeys[key]];
+}
+var semanticBlur = {
+  overlayScrim: fromFoundation2("overlayScrim"),
+  surfaceFrost: fromFoundation2("surfaceFrost")
+};
+
 // src/global/borderRadii.ts
 var borderRadii = {
   roundedNone: "0",
@@ -891,6 +933,7 @@ export {
   SEMANTIC_FOCUS_PAIRS,
   SEMANTIC_PALETTE_PAIRS,
   SEMANTIC_TEXT,
+  blurs,
   borderRadii,
   colors,
   componentSizeFoundationKeys,
@@ -904,7 +947,10 @@ export {
   motion,
   opacities,
   overlays,
+  semanticBlur,
+  semanticBlurFoundationKeys,
   semanticColors,
+  semanticElevations,
   semanticFocus,
   semanticInteraction,
   semanticShadows,
@@ -913,6 +959,7 @@ export {
   shadows,
   spacings,
   strokeWidths,
+  surfaceFrostedRgba,
   surfaceOverlayRgba,
   textAlignments,
   toBoxShadow,

package/dist/spec/blur.json

@@ -0,0 +1,29 @@
+{
+  "schemaVersion": 1,
+  "foundation": {
+    "blurNone": "0",
+    "blur2": "2px",
+    "blur4": "4px",
+    "blur8": "8px",
+    "blur12": "12px",
+    "blur16": "16px"
+  },
+  "semantic": {
+    "overlayScrim": {
+      "foundation": "blur2",
+      "resolved": "2px",
+      "cssVar": "--refineui-blur-overlay-scrim"
+    },
+    "surfaceFrost": {
+      "foundation": "blur16",
+      "resolved": "16px",
+      "cssVar": "--refineui-blur-surface-frost"
+    }
+  },
+  "accessibility": {
+    "reducedTransparency": {
+      "mediaQuery": "(prefers-reduced-transparency: reduce)",
+      "contract": "Backdrop-filter blur collapses to none on Dialog/Drawer scrims (refineui.css)."
+    }
+  }
+}

package/dist/spec/component-sizes.json

@@ -137,11 +137,19 @@
       ],
       "status": "stable"
     },
+    {
+      "name": "navigationMenuItemMinWidth",
+      "cssVar": "--refineui-size-navigation-menu-item-min-width",
+      "references": [
+        "foundation.foundationSize400"
+      ],
+      "status": "stable"
+    },
     {
       "name": "menuPanelWidth",
       "cssVar": "--refineui-size-menu-panel-width",
       "references": [
-        "foundation.foundationSize2440"
+        "foundation.foundationSize2000"
       ],
       "status": "stable"
     },
@@ -149,7 +157,7 @@
       "name": "dropdownMenuWidth",
       "cssVar": "--refineui-size-dropdown-menu-width",
       "references": [
-        "foundation.foundationSize2440"
+        "foundation.foundationSize2000"
       ],
       "status": "stable"
     },
@@ -165,7 +173,7 @@
       "name": "toastMinWidth",
       "cssVar": "--refineui-size-toast-min-width",
       "references": [
-        "foundation.foundationSize3250"
+        "foundation.foundationSize2000"
       ],
       "status": "stable"
     },

package/dist/spec/foundation.json

@@ -4,7 +4,8 @@
     "colors",
     "spacings",
     "foundationSizes",
-    "motion"
+    "motion",
+    "blurs"
   ],
   "spacings": {
     "sizeNone": "0",
@@ -23,6 +24,7 @@
     "foundationSize20": "2px",
     "foundationSize30": "3px",
     "foundationSize40": "4px",
+    "foundationSize50": "5px",
     "foundationSize60": "6px",
     "foundationSize80": "8px",
     "foundationSize100": "10px",
@@ -86,5 +88,13 @@
     "distance": {
       "distance4": "4px"
     }
+  },
+  "blurs": {
+    "blurNone": "0",
+    "blur2": "2px",
+    "blur4": "4px",
+    "blur8": "8px",
+    "blur12": "12px",
+    "blur16": "16px"
   }
 }

package/dist/spec/index.json

@@ -1,11 +1,12 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-09-08T17:24:28.239Z",
+  "generatedAt": "2026-09-23T05:49:28.780Z",
   "files": {
     "foundation": "./foundation.json",
     "semanticColors": "./semantic-colors.json",
     "semanticText": "./semantic-text.json",
     "motion": "./motion.json",
+    "blur": "./blur.json",
     "componentSizes": "./component-sizes.json",
     "focus": "./focus.json",
     "traceV2": "./trace-v2.json",

package/dist/spec/trace-v2.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "contractLayer": "semantic-token-trace",
-  "generatedAt": "2026-09-08T17:24:28.244Z",
+  "generatedAt": "2026-09-23T05:49:28.785Z",
   "tokens": {
     "backgroundBrandActive": {
       "type": "semantic",

package/dist/tailwind-theme.css

@@ -1,4 +1,6 @@
 @theme {
+  --blur-refineui-overlay-scrim: var(--refineui-blur-overlay-scrim);
+  --blur-refineui-surface-frost: var(--refineui-blur-surface-frost);
   --border-width-refineui-hairline: var(--refineui-stroke-width-hairline);
   --border-width-refineui-none: var(--refineui-stroke-width-none);
   --border-width-refineui-thick: var(--refineui-stroke-width-thick);
@@ -70,6 +72,7 @@
   --color-refineui-alias-foreground-tertiary: var(--refineui-color-alias-foreground-tertiary);
   --color-refineui-alias-foreground-warning: var(--refineui-color-alias-foreground-warning);
   --color-refineui-alias-surface-elevated: var(--refineui-color-alias-surface-elevated);
+  --color-refineui-alias-surface-frosted: var(--refineui-color-alias-surface-frosted);
   --color-refineui-alias-surface-inverse: var(--refineui-color-alias-surface-inverse);
   --color-refineui-alias-surface-overlay: var(--refineui-color-alias-surface-overlay);
   --color-refineui-alias-surface-popover: var(--refineui-color-alias-surface-popover);
@@ -224,6 +227,12 @@
   --shadow-refineui-8: var(--refineui-elevation-8);
   --shadow-refineui-8dark: var(--refineui-elevation-8dark);
   --shadow-refineui-8light: var(--refineui-elevation-8light);
+  --shadow-refineui-floating: var(--refineui-elevation-floating);
+  --shadow-refineui-modal: var(--refineui-elevation-modal);
+  --shadow-refineui-overlay: var(--refineui-elevation-overlay);
+  --shadow-refineui-raised: var(--refineui-elevation-raised);
+  --shadow-refineui-surface: var(--refineui-elevation-surface);
+  --shadow-refineui-toast: var(--refineui-elevation-toast);
   --spacing-refineui-accessible-clip: var(--refineui-size-accessible-clip);
   --spacing-refineui-avatar-status-xxxlarge: var(--refineui-size-avatar-status-xxxlarge);
   --spacing-refineui-button-min-height-lg: var(--refineui-size-button-min-height-lg);
@@ -278,6 +287,7 @@
   --spacing-refineui-foundation-size-440: var(--refineui-size-foundation-size-440);
   --spacing-refineui-foundation-size-4500: var(--refineui-size-foundation-size-4500);
   --spacing-refineui-foundation-size-480: var(--refineui-size-foundation-size-480);
+  --spacing-refineui-foundation-size-50: var(--refineui-size-foundation-size-50);
   --spacing-refineui-foundation-size-520: var(--refineui-size-foundation-size-520);
   --spacing-refineui-foundation-size-540: var(--refineui-size-foundation-size-540);
   --spacing-refineui-foundation-size-5750: var(--refineui-size-foundation-size-5750);
@@ -295,6 +305,7 @@
   --spacing-refineui-icon-xxlarge: var(--refineui-icon-size-xxlarge);
   --spacing-refineui-icon-xxsmall: var(--refineui-icon-size-xxsmall);
   --spacing-refineui-menu-panel-width: var(--refineui-size-menu-panel-width);
+  --spacing-refineui-navigation-menu-item-min-width: var(--refineui-size-navigation-menu-item-min-width);
   --spacing-refineui-pagination-button-min-width: var(--refineui-size-pagination-button-min-width);
   --spacing-refineui-popover-beak-inset-from-end-edge: var(--refineui-size-popover-beak-inset-from-end-edge);
   --spacing-refineui-popover-beak-inset-from-start-edge: var(--refineui-size-popover-beak-inset-from-start-edge);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refineui/tokens",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "RefineUI Theme Tokens",
   "main": "dist/index.js",
   "module": "dist/index.mjs",