@viraui/react 2026.3.4 → 2026.3.6

package/dist/components/accordion/accordion-item.d.ts

@@ -50,8 +50,8 @@ export type AccordionItemProps = AccordionItem.Props & {
      */
     iconOpen?: React.ReactNode;
     /**
-     * Contrast border side or axis forwarded to the wrapping `Surface` when `useSurface` is `true`.
-     * Omit for no border.
+     * Contrast border side(s) forwarded to the wrapping `Surface` when `useSurface` is `true`.
+     * Pass a single side or a list (e.g. `['bottom', 'left']`). Omit for no border.
      *
      * @default No border.
      */

package/dist/components/accordion/accordion.guide.json

@@ -28,7 +28,7 @@
         "description": "When `true`, open/closed blocks render as separated Surface islands with gap between them. When `false`, blocks stay attached with corner radius only on the first and last items. Applies only to items with `useSurface`."
       },
       "Item.border": {
-        "description": "Contrast border side or axis forwarded to the wrapping `Surface` when `useSurface` is `true`. Omit for no border."
+        "description": "Contrast border side(s) forwarded to the wrapping `Surface` when `useSurface` is `true`. Pass a single side or a list (e.g. `[\"bottom\", \"left\"]`). Omit for no border."
       },
       "Item.children": {
         "description": "Panel content revealed when the item is open."

package/dist/components/surface/index.d.ts

@@ -1,2 +1,2 @@
 export { Surface } from './surface';
-export type { SurfaceProps } from './surface';
+export type { SurfaceBorder, SurfaceProps } from './surface';

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)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@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(--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.d.ts

@@ -6,6 +6,8 @@ type SurfaceBaseLevel = 1 | 2 | 3;
 /** Named surface color tokens resolved via `data-surface-color` / `data-surface-hover-color` CSS hooks. */
 type SurfaceColorToken = 'primary';
 type SurfaceColor = string | SurfaceBaseLevel | SurfaceColorToken;
+/** Contrast border sides; pass one side or a list (e.g. `['bottom', 'left']`). */
+export type SurfaceBorder = 'all' | 'top' | 'right' | 'bottom' | 'left';
 /**
  * Public Surface props.
  *
@@ -42,11 +44,12 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      */
     hoverColor?: SurfaceColor;
     /**
-     * Applies the shared contrast border on the chosen side or axis. Omit for no border.
+     * Applies the shared contrast border on one or more sides (`'all'`, `'top'`, `'right'`, `'bottom'`, `'left'`).
+     * Pass a single side or a list (e.g. `['bottom', 'left']`). Omit for no border.
      *
      * @default No border.
      */
-    border?: 'all' | 'top' | 'right' | 'bottom' | 'left' | 'x' | 'y';
+    border?: SurfaceBorder | readonly SurfaceBorder[];
     /**
      * Sets the CSS border style when `border` is set.
      *

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

@@ -34,7 +34,7 @@
   "properties": {
     "react": {
       "border": {
-        "description": "Applies the shared contrast border on the chosen side or axis. Omit for no border."
+        "description": "Applies the shared contrast border on one or more sides (`all`, `top`, `right`, `bottom`, `left`). Pass a single side or a list (e.g. `[\"bottom\", \"left\"]`). Omit for no border."
       },
       "enableContainer": {
         "description": "Opt-in named CSS container query context for this Surface (enables `container: surface / inline-size` on the root). Required for `@container surface (min-width: ...)` rules to react to this Surface inline-size. Warning: inline-size containment can affect nested layout (e.g. cards inside Masonry). Use only when you need container queries against this specific Surface."

package/dist/components/surface/surface.js

@@ -7,6 +7,7 @@ import surface_module_default from "./surface.module.js";
 import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/surface/surface.tsx
+var toSurfaceBorderAttr = (border) => Array.isArray(border) ? border.join(" ") : border;
 var isSurfaceColorToken = (value) => value === "primary";
 var clampSurfaceBaseLevel = (value) => {
 	if (value <= 1) return 1;
@@ -46,7 +47,7 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 		ref,
 		props: {
 			...otherProps,
-			...border && { "data-surface-border": border },
+			...border && { "data-surface-border": toSurfaceBorderAttr(border) },
 			...hasAutoRadius && { "data-surface-radius": "auto" },
 			...isSurfaceColorToken(color) && { "data-surface-color": color },
 			...isSurfaceColorToken(hoverColor) && { "data-surface-hover-color": hoverColor },

package/package.json

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