@viraui/react 2026.3.10 → 2026.3.11

package/dist/catalog.json

@@ -215,7 +215,7 @@
     {
       "id": "surface",
       "name": "Surface",
-      "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; optionally enables a named CSS container query context (`surface`) via `enableContainer`.",
+      "summary": "Presentational container with token background, optional border, radius, and padding; `data-vibrant` frosts the fill even without `color` (page shell via `--global-background`); nested surfaces use radius=\"auto\" for concentric corners; optionally enables a named CSS container query context (`surface`) via `enableContainer`.",
       "guidePath": "./components/surface/surface.guide.json"
     },
     {

package/dist/components/dialog/dialog-sheet.js

@@ -62,7 +62,8 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 							children: [/* @__PURE__ */ jsx(Drawer.Title, {
 								render: /* @__PURE__ */ jsx(Title, {
 									align: headerAlign,
-									size: "4"
+									size: "4",
+									render: /* @__PURE__ */ jsx("h2", {})
 								}),
 								children: title
 							}), description && /* @__PURE__ */ jsx(Drawer.Description, {

package/dist/components/separator/separator.d.ts

@@ -50,11 +50,11 @@ export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'childr
      */
     size?: SeparatorSize;
     /**
-     * Sets the separator line border style through `--vui-separator-border-style`.
+     * Sets the separator line variant through `--vui-separator-border-style`.
      *
      * @default 'solid'
      */
-    borderStyle?: React.CSSProperties['borderStyle'];
+    variant?: React.CSSProperties['borderStyle'];
 };
 export declare const Separator: React.FC<SeparatorProps>;
 export {};

package/dist/components/separator/separator.guide.json

@@ -23,10 +23,6 @@
   "related": ["Stack", "Surface", "Select"],
   "properties": {
     "react": {
-      "borderStyle": {
-        "description": "Sets the separator line border style through `--vui-separator-border-style`.",
-        "refCss": "border-style"
-      },
       "hPadding": {
         "description": "Sets inline padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple."
       },
@@ -42,6 +38,10 @@
       "size": {
         "description": "Sets the line thickness preset."
       },
+      "variant": {
+        "description": "Sets the separator line variant through `--vui-separator-border-style`.",
+        "refCss": "border-style"
+      },
       "vPadding": {
         "description": "Sets block padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple."
       }

package/dist/components/separator/separator.js

@@ -10,10 +10,10 @@ var separatorSizeValues = {
 	medium: 2,
 	large: 3
 };
-var Separator = ({ borderStyle = "solid", className, hPadding, orientation = "horizontal", ref, render, size = "small", style, vPadding, ...otherProps }) => {
+var Separator = ({ className, hPadding, orientation = "horizontal", ref, render, size = "small", style, variant = "solid", vPadding, ...otherProps }) => {
 	const dynamicStyle = {
 		"--vui-separator-size": `${separatorSizeValues[size]}px`,
-		"--vui-separator-border-style": borderStyle,
+		"--vui-separator-border-style": variant,
 		...style
 	};
 	const line = useRender({

package/dist/components/surface/surface.css

@@ -4,4 +4,4 @@
     )}&[data-surface-hover-color=primary]{--vui-surface-background-hover:light-dark(
       oklab(from var(--global-primary) l a b / 20%),
       oklab(from var(--global-primary) l a b / 10%)
-    )}@container root not style(--effect-vibrancy: initial){&[data-vibrant]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast);border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:0}&[data-surface-border~=all]{border-width:1px}&[data-surface-border~=top]{border-top-width:1px}&[data-surface-border~=right]{border-right-width:1px}&[data-surface-border~=bottom]{border-bottom-width:1px}&[data-surface-border~=left]{border-left-width:1px}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}&[data-surface-container=true]{container:surface/inline-size}}}
+    )}@container root not style(--effect-vibrancy: initial){&[data-vibrant]{background:oklab(from var(--global-background) l a b/80%)}&[data-vibrant][data-surface-has-color=true]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast);border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:0}&[data-surface-border~=all]{border-width:1px}&[data-surface-border~=top]{border-top-width:1px}&[data-surface-border~=right]{border-right-width:1px}&[data-surface-border~=bottom]{border-bottom-width:1px}&[data-surface-border~=left]{border-left-width:1px}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}&[data-surface-container=true]{container:surface/inline-size}}}

package/dist/components/surface/surface.guide.json

@@ -1,9 +1,10 @@
 {
   "name": "Surface",
   "structure": "<Surface>…</Surface>",
-  "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; optionally enables a named CSS container query context (`surface`) via `enableContainer`.",
+  "summary": "Presentational container with token background, optional border, radius, and padding; `data-vibrant` frosts the fill even without `color` (page shell via `--global-background`); nested surfaces use radius=\"auto\" for concentric corners; optionally enables a named CSS container query context (`surface`) via `enableContainer`.",
   "whenToUse": [
     "Group content with base-level background and contrast border",
+    "Frosted glass panels with `data-vibrant` — omit `color` for page-level shell or pass `color` for a tinted fill",
     "Popup or card chrome with optional hover background",
     "Compose with Elevator for animated elevation transitions",
     "Set radius to a token on the outermost Surface that needs rounded corners",

package/dist/components/surface/surface.js

@@ -24,6 +24,7 @@ var surfaceDefaultRadiusProps = {
 var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hoverColor, overflow, radius, ref, render, style, vPadding, enableContainer, ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
 	const hasHoverColor = hoverColor !== void 0;
+	const hasColor = color !== void 0;
 	const { contextValue, hasAutoRadius, radiusStyle } = useSurfaceRadius({
 		defaults: surfaceDefaultRadiusProps,
 		hPadding,
@@ -52,6 +53,7 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 			...isSurfaceColorToken(color) && { "data-surface-color": color },
 			...isSurfaceColorToken(hoverColor) && { "data-surface-hover-color": hoverColor },
 			...enableContainer && { "data-surface-container": "true" },
+			"data-surface-has-color": hasColor ? "true" : "false",
 			"data-surface-has-hover-color": hasHoverColor ? "true" : "false",
 			"data-surface-has-padding": hasPadding ? "true" : "false",
 			className: clsx(surface_module_default.Surface, className),

package/dist/preflight-surface.json

@@ -146,7 +146,7 @@
       "module": "vibrancy",
       "values": ["(boolean presence)"],
       "presence": "boolean attribute; value ignored",
-      "effect": "When the active theme sets --effect-vibrancy, applies vibrancy backdrop-filter (brightness/blur/saturate). Surface with data-vibrant may also translucify its background via component CSS.",
+      "effect": "When the active theme sets --effect-vibrancy, applies vibrancy backdrop-filter (brightness/blur/saturate). Surface with data-vibrant translucifies its fill via component CSS: without color, frosted shell from --global-background; with color, 80% tint from --vui-surface-background.",
       "whenToUse": [
         "Glass / frosted panels on Surface or other hosts over busy backgrounds",
         "Match overlay chrome (Dialog/Popover/Menu/Toast) that ships with data-vibrant"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.3.10",
+  "version": "2026.3.11",
   "private": false,
   "files": [
     "dist"
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@base-ui/react": ">=1.7.0",
-    "@viraui/foundation": "2026.3.10",
+    "@viraui/foundation": "2026.3.11",
     "@viraui/icons": "2026.0.3",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0",