@viraui/react 2026.0.22 → 2026.0.24

package/dist/catalog.json

@@ -5,7 +5,7 @@
     {
       "id": "accordion",
       "name": "Accordion",
-      "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and background on open items.",
+      "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and optional Item color for open-block background.",
       "guidePath": "./components/accordion/accordion.guide.json"
     },
     {

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

@@ -24,7 +24,7 @@ export type AccordionItemProps = AccordionItem.Props & {
      */
     children?: React.ReactNode;
     /**
-     * When `true`, wraps the item in `Surface` with open-block background.
+     * When `true`, wraps the item in `Surface` (optional open-block background via `color`).
      * When `false`, renders without `Surface` so consumers can insert `Separator` between items;
      * island styling is skipped for that item.
      *
@@ -58,8 +58,9 @@ export type AccordionItemProps = AccordionItem.Props & {
     border?: SurfaceProps['border'];
     /**
      * Resting background for the item card, forwarded to the wrapping `Surface` when `useSurface` is `true`.
+     * Omit for no background (`Surface` leaves `--vui-surface-background` as `none`).
      *
-     * @default 1
+     * @default No background.
      */
     color?: SurfaceProps['color'];
     /**

package/dist/components/accordion/accordion-item.js

@@ -8,7 +8,7 @@ import { Surface } from "../surface/surface.js";
 import { Accordion } from "@base-ui/react/accordion";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion/accordion-item.tsx
-var AccordionItemComponent = ({ border, children, className, color = 1, iconClosed = /* @__PURE__ */ jsx(ChromePlus, { size: 16 }), iconOpen = /* @__PURE__ */ jsx(ChromeMinus, { size: 16 }), iconPosition = "end", radius, style, trigger, useSurface = true, ...otherProps }) => {
+var AccordionItemComponent = ({ border, children, className, color, iconClosed = /* @__PURE__ */ jsx(ChromePlus, { size: 16 }), iconOpen = /* @__PURE__ */ jsx(ChromeMinus, { size: 16 }), iconPosition = "end", radius, style, trigger, useSurface = true, ...otherProps }) => {
 	const iconAtStart = iconPosition === "start";
 	const dynamicStyle = {
 		...radius != null && { "--vui-accordion-radius": resolveThemeValue(radius, "radius", "var(--radius-medium)") },
@@ -31,7 +31,7 @@ var AccordionItemComponent = ({ border, children, className, color = 1, iconClos
 		style: dynamicStyle,
 		...useSurface && { render: /* @__PURE__ */ jsx(Surface, {
 			border,
-			color
+			...color !== void 0 && { color }
 		}) },
 		...otherProps,
 		children: [/* @__PURE__ */ jsx(Accordion.Header, {

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

@@ -2,7 +2,7 @@
   "name": "Accordion",
   "baseUIApi": "https://base-ui.com/react/components/accordion#api-reference",
   "structure": "<Accordion>\n  <Accordion.Item trigger=\"…\">…</Accordion.Item>\n</Accordion>",
-  "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and background on open items.",
+  "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and optional Item color for open-block background.",
   "whenToUse": [
     "Progressive disclosure for related content sections in one surface",
     "FAQ or settings groups where only one section may be open by default",
@@ -34,7 +34,7 @@
         "description": "Panel content revealed when the item is open."
       },
       "Item.color": {
-        "description": "Resting background for the item card, forwarded to the wrapping `Surface` when `useSurface` is `true`."
+        "description": "Resting background for the item card, forwarded to the wrapping `Surface` when `useSurface` is `true`. Omit for no background."
       },
       "Item.iconClosed": {
         "description": "Decorative icon shown when the item is closed."
@@ -53,7 +53,7 @@
         "description": "Visible trigger label rendered inside the accordion header button."
       },
       "Item.useSurface": {
-        "description": "When `true`, wraps the item in `Surface` with open-block background. When `false`, renders without `Surface` so consumers can insert `Separator` between items; island styling is skipped for that item."
+        "description": "When `true`, wraps the item in `Surface` (optional open-block background via `color`). When `false`, renders without `Surface` so consumers can insert `Separator` between items; island styling is skipped for that item."
       }
     },
     "css": {

package/dist/components/dialog/dialog-sheet.d.ts

@@ -34,11 +34,11 @@ export type DialogSheetProps = {
      */
     maxContentWidth?: StackProps['maxWidth'];
     /**
-     * Aligns the header content.
+     * Aligns the header stack and title/description text (`start` | `center` | `end`).
      *
      * @default `start`
      */
-    headerAlign?: StackProps['hAlign'];
+    headerAlign?: Extract<StackProps['hAlign'], 'start' | 'center' | 'end'>;
     /**
      * Whether to show the close button.
      *

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

@@ -57,10 +57,14 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 						hAlign: headerAlign,
 						hPadding: "medium",
 						children: [/* @__PURE__ */ jsx(Drawer.Title, {
-							render: /* @__PURE__ */ jsx(Title, { size: "4" }),
+							render: /* @__PURE__ */ jsx(Title, {
+								align: headerAlign,
+								size: "4"
+							}),
 							children: title
 						}), description && /* @__PURE__ */ jsx(Drawer.Description, {
 							render: /* @__PURE__ */ jsx(Text, {
+								align: headerAlign,
 								tone: "muted",
 								render: /* @__PURE__ */ jsx("p", {})
 							}),

package/dist/components/dialog/dialog.guide.json

@@ -42,7 +42,7 @@
         "description": "Centers the sheet horizontally within the viewport."
       },
       "Sheet.headerAlign": {
-        "description": "Aligns the header content."
+        "description": "Aligns the header stack and title/description text (`start` | `center` | `end`)."
       },
       "Sheet.maxContentWidth": {
         "description": "Optional maximum width of the content area."

package/dist/components/slider/slider.js

@@ -11,7 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Slider } from "@base-ui/react/slider";
 //#region src/components/slider/slider.tsx
-var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error, invalid, label, name, orientation = "horizontal", renderValue, thumbAriaLabel, touched, validate, validationDebounceTime, validationMode, value, ref, ...sliderRootProps }) => {
+var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error, invalid, label, name, orientation = "horizontal", renderValue, thumbAlignment = "edge", thumbAriaLabel, touched, validate, validationDebounceTime, validationMode, value, ref, ...sliderRootProps }) => {
 	const isRange = isRangeSlider(value, defaultValue);
 	const isVertical = orientation === "vertical";
 	const showRenderedValue = renderValue === true || typeof renderValue === "function";
@@ -38,6 +38,7 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 			name,
 			orientation,
 			value,
+			thumbAlignment,
 			render: /* @__PURE__ */ jsx(Stack, {
 				direction: "column",
 				rowGap: "medium",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.0.22",
+  "version": "2026.0.24",
   "private": false,
   "files": [
     "dist"
@@ -35,7 +35,7 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.1.4",
     "vite-plugin-static-copy": "4.1.1",
-    "@viraui/foundation": "2026.0.22",
+    "@viraui/foundation": "2026.0.24",
     "@viraui/icons": "2026.0.0",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0"