@viraui/react 2026.4.0 → 2026.5.0

package/dist/components/linear-progress/linear-progress.js

@@ -15,20 +15,20 @@ var LinearProgress = ({ className, description, label, renderValue, value, ref,
 		className: clsx(linear_progress_module_default.LinearProgress, className),
 		value,
 		render: /* @__PURE__ */ jsx(Stack, {
-			rowGap: "medium",
-			columnGap: "x-small"
+			rowGap: "m",
+			columnGap: "xs"
 		}),
 		children: [
 			(label || showRenderedValue) && /* @__PURE__ */ jsxs(Stack, {
 				direction: "row",
-				columnGap: "small",
+				columnGap: "s",
 				vAlign: "center",
 				hAlign: "space-between",
 				children: [label && /* @__PURE__ */ jsx(Progress.Label, {
 					render: /* @__PURE__ */ jsx(FieldLabel, {}),
 					children: label
 				}), showRenderedValue && /* @__PURE__ */ jsx(Text, {
-					size: "small",
+					size: "s",
 					tone: "muted",
 					family: "mono",
 					whiteSpace: "nowrap",
@@ -46,7 +46,7 @@ var LinearProgress = ({ className, description, label, renderValue, value, ref,
 				children: /* @__PURE__ */ jsx(Progress.Indicator, { className: linear_progress_module_default.Indicator })
 			}),
 			description && /* @__PURE__ */ jsx(Text, {
-				size: "small",
+				size: "s",
 				tone: "muted",
 				children: description
 			})

package/dist/components/masonry/masonry.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-masonry-gap{syntax:"<length>";inherits:false;initial-value:0}.viraui__masonry-module__Masonry_l7c8U{--vui-masonry-gap:var(--space-large);container:masonry/inline-size;display:flex;gap:var(--vui-masonry-gap);&>*{flex:1 1 0;min-inline-size:0}}.viraui__masonry-module__Item_ywXwo{display:block;margin:0;min-inline-size:0}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-masonry-gap{syntax:"<length>";inherits:false;initial-value:0}.viraui__masonry-module__Masonry_l7c8U{--vui-masonry-gap:var(--space-l);container:masonry/inline-size;display:flex;gap:var(--vui-masonry-gap);&>*{flex:1 1 0;min-inline-size:0}}.viraui__masonry-module__Item_ywXwo{display:block;margin:0;min-inline-size:0}}

package/dist/components/masonry/masonry.d.ts

@@ -31,7 +31,7 @@ export type MasonryProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Sets the gap between columns (`--vui-masonry-gap`) and the `rowGap` on each column `Stack`.
      *
-     * @default 'large'
+     * @default 'l'
      */
     gap?: StackProps['columnGap'];
     /**

package/dist/components/masonry/masonry.js

@@ -24,12 +24,12 @@ var resolveColumnCount = (widthPx, breakpointCols) => Object.entries(breakpointC
 		nextColumnCount
 	}] : [];
 }).sort((left, right) => left.minWidthPx - right.minWidthPx).reduce((columnCount, { minWidthPx, nextColumnCount }) => widthPx >= minWidthPx ? nextColumnCount : columnCount, breakpointCols.default);
-var MasonryRoot = ({ children, className, breakpointCols = DEFAULT_BREAKPOINT_COLS, gap = "large", ref, render, style, ...otherProps }) => {
+var MasonryRoot = ({ children, className, breakpointCols = DEFAULT_BREAKPOINT_COLS, gap = "l", ref, render, style, ...otherProps }) => {
 	const rootRef = useRef(null);
 	const consumerRef = ref;
 	const [columnCount, setColumnCount] = useState(breakpointCols.default);
 	const dynamicStyle = {
-		"--vui-masonry-gap": resolveThemeValue(gap, "space", "var(--space-large)"),
+		"--vui-masonry-gap": resolveThemeValue(gap, "space", "var(--space-l)"),
 		...style
 	};
 	const columnSlots = Math.max(1, Math.floor(columnCount));

package/dist/components/menu/menu-checkbox-item.d.ts

@@ -14,7 +14,7 @@ export type MenuCheckboxItemProps = MenuCheckboxItemPrimitive.Props & {
     addon?: React.ReactNode;
     /**
      * End-aligned secondary text (e.g. keyboard shortcut) before the check indicator.
-     * Rendered muted `x-small`.
+     * Rendered muted `xs`.
      *
      * @default No note is rendered.
      */

package/dist/components/menu/menu-group.js

@@ -7,19 +7,19 @@ var MenuGroup = ({ children, className, label, ...otherProps }) => /* @__PURE__
 	...otherProps,
 	className,
 	render: /* @__PURE__ */ jsx(Stack, {
-		rowGap: "2x-small",
-		vPadding: "2x-small"
+		rowGap: "2xs",
+		vPadding: "2xs"
 	}),
 	children: [/* @__PURE__ */ jsx(Menu.GroupLabel, {
 		render: /* @__PURE__ */ jsx(Stack, {
-			columnGap: "small",
+			columnGap: "s",
 			direction: "row",
-			hPadding: "small",
+			hPadding: "s",
 			vAlign: "center",
-			vPadding: ["small", "x-small"]
+			vPadding: ["s", "xs"]
 		}),
 		children: /* @__PURE__ */ jsx(Text, {
-			size: "x-small",
+			size: "xs",
 			tone: "muted",
 			weight: "semibold",
 			children: label

package/dist/components/menu/menu-item-row.js

@@ -8,11 +8,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Not a public export.
 */
 var MenuItemRow = ({ addon, children, note, trailing }) => /* @__PURE__ */ jsxs(Stack, {
-	columnGap: "small",
+	columnGap: "s",
 	"data-grow": "true",
 	direction: "row",
-	hPadding: "small",
-	vPadding: "small",
+	hPadding: "s",
+	vPadding: "s",
 	vAlign: "center",
 	className: menu_module_default.ItemRow,
 	children: [
@@ -26,15 +26,15 @@ var MenuItemRow = ({ addon, children, note, trailing }) => /* @__PURE__ */ jsxs(
 		/* @__PURE__ */ jsx(Text, {
 			"data-grow": "true",
 			"data-shrink": "true",
-			lineHeight: "small",
-			size: "small",
+			lineHeight: "s",
+			size: "s",
 			children
 		}),
 		note && /* @__PURE__ */ jsx(Text, {
 			whiteSpace: "nowrap",
 			"data-shrink": "false",
-			lineHeight: "small",
-			size: "x-small",
+			lineHeight: "s",
+			size: "xs",
 			tone: "muted",
 			children: note
 		}),

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

@@ -13,7 +13,7 @@ export type MenuItemProps = MenuItemPrimitive.Props & {
      */
     addon?: React.ReactNode;
     /**
-     * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`.
+     * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `xs`.
      *
      * @default No note is rendered.
      */

package/dist/components/menu/menu-link-item.d.ts

@@ -13,7 +13,7 @@ export type MenuLinkItemProps = MenuLinkItemPrimitive.Props & {
      */
     addon?: React.ReactNode;
     /**
-     * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`.
+     * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `xs`.
      *
      * @default No note is rendered.
      */

package/dist/components/menu/menu-popup.js

@@ -17,10 +17,10 @@ var MenuPopup = ({ children, sideOffset = 2, container, ...positionerProps }) =>
 					border: "all",
 					color: 1,
 					"data-vibrant": true,
-					hPadding: "x-small",
+					hPadding: "xs",
 					overflow: "auto",
-					radius: "medium",
-					vPadding: "x-small"
+					radius: "m",
+					vPadding: "xs"
 				}),
 				children
 			})

package/dist/components/menu/menu-radio-group.js

@@ -7,19 +7,19 @@ var MenuRadioGroup = ({ children, className, label, ...otherProps }) => /* @__PU
 	...otherProps,
 	className,
 	render: /* @__PURE__ */ jsx(Stack, {
-		rowGap: "2x-small",
-		vPadding: "2x-small"
+		rowGap: "2xs",
+		vPadding: "2xs"
 	}),
 	children: [label && /* @__PURE__ */ jsx(Menu.GroupLabel, {
 		render: /* @__PURE__ */ jsx(Stack, {
-			columnGap: "small",
+			columnGap: "s",
 			direction: "row",
-			hPadding: "small",
+			hPadding: "s",
 			vAlign: "center",
-			vPadding: ["small", "x-small"]
+			vPadding: ["s", "xs"]
 		}),
 		children: /* @__PURE__ */ jsx(Text, {
-			size: "x-small",
+			size: "xs",
 			tone: "muted",
 			weight: "semibold",
 			children: label

package/dist/components/menu/menu-radio-item.d.ts

@@ -14,7 +14,7 @@ export type MenuRadioItemProps = MenuRadioItemPrimitive.Props & {
     addon?: React.ReactNode;
     /**
      * End-aligned secondary text (e.g. keyboard shortcut) before the check indicator.
-     * Rendered muted `x-small`.
+     * Rendered muted `xs`.
      *
      * @default No note is rendered.
      */

package/dist/components/menu/menu-separator.js

@@ -4,8 +4,8 @@ import { Menu } from "@base-ui/react/menu";
 //#region src/components/menu/menu-separator.tsx
 var MenuSeparator = ({ className, orientation = "horizontal", ...otherProps }) => /* @__PURE__ */ jsx(Menu.Separator, {
 	render: /* @__PURE__ */ jsx(Separator, {
-		vPadding: "x-small",
-		hPadding: "x-small"
+		vPadding: "xs",
+		hPadding: "xs"
 	}),
 	...otherProps,
 	className,

package/dist/components/menu/menu.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__menu-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__menu-module__MenuPopup_GkrGa{min-inline-size:var(--anchor-width);max-block-size:var(--available-height);scroll-padding-block:var(--space-x-small);color:var(--global-foreground);outline:none;position:relative;overscroll-behavior:contain;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__menu-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__menu-list-appear-offset)}&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__menu-list-appear-offset) 0}&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style]{translate:var(--__menu-list-appear-offset) 0;&:dir(rtl){translate:calc(var(--__menu-list-appear-offset) * -1) 0}}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0;&:dir(rtl){translate:var(--__menu-list-appear-offset) 0}}&[data-instant=click],&[data-instant=dismiss]{transition:none;scale:1;translate:0;opacity:1}&:focus,&:focus-visible{outline:none}}.viraui__menu-module__ItemRow_Be40k{min-block-size:var(--space-x-large)}.viraui__menu-module__Indicator_btL99{min-inline-size:var(--space-small);min-block-size:var(--space-small);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;&[data-checked]{opacity:1}&[data-kind=chevron]{opacity:1;color:var(--global-foreground);&:dir(rtl){scale:-1 1}}}}@layer viraui.overrides{.viraui__menu-module__Item_9zmEO{cursor:pointer;&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-checked]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}&[data-sentiment=destructive]{color:var(--highlight-red);outline-color:var(--highlight-red);&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:oklab(from var(--highlight-red) l a b/12%)}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__menu-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__menu-module__MenuPopup_GkrGa{min-inline-size:var(--anchor-width);max-block-size:var(--available-height);scroll-padding-block:var(--space-xs);color:var(--global-foreground);outline:none;position:relative;overscroll-behavior:contain;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__menu-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__menu-list-appear-offset)}&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__menu-list-appear-offset) 0}&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style]{translate:var(--__menu-list-appear-offset) 0;&:dir(rtl){translate:calc(var(--__menu-list-appear-offset) * -1) 0}}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0;&:dir(rtl){translate:var(--__menu-list-appear-offset) 0}}&[data-instant=click],&[data-instant=dismiss]{transition:none;scale:1;translate:0;opacity:1}&:focus,&:focus-visible{outline:none}}.viraui__menu-module__ItemRow_Be40k{min-block-size:var(--space-xl)}.viraui__menu-module__Indicator_btL99{min-inline-size:var(--space-s);min-block-size:var(--space-s);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;&[data-checked]{opacity:1}&[data-kind=chevron]{opacity:1;color:var(--global-foreground);&:dir(rtl){scale:-1 1}}}}@layer viraui.overrides{.viraui__menu-module__Item_9zmEO{cursor:pointer;&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-checked]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}&[data-sentiment=destructive]{color:var(--highlight-red);outline-color:var(--highlight-red);&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:oklab(from var(--highlight-red) l a b/12%)}}}}

package/dist/components/meter/meter.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-meter-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-meter-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-meter-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__meter-module__Meter_YRI7d{--vui-meter-track-size:var(--space-x-small);--vui-meter-track-background:var(--global-contrast);--vui-meter-indicator-color:var(--global-primary);& .viraui__meter-module__Track_uF9wy{--__corner-shape:round;position:relative;overflow:hidden;block-size:round(to-zero,var(--vui-meter-track-size),2px);background:var(--vui-meter-track-background);border-radius:var(--radius-infinite)}& .viraui__meter-module__Indicator_dNjqU{block-size:100%;background:var(--vui-meter-indicator-color);border-radius:inherit}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-meter-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-meter-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-meter-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__meter-module__Meter_YRI7d{--vui-meter-track-size:var(--space-xs);--vui-meter-track-background:var(--global-contrast);--vui-meter-indicator-color:var(--global-primary);& .viraui__meter-module__Track_uF9wy{--__corner-shape:round;position:relative;overflow:hidden;block-size:round(to-zero,var(--vui-meter-track-size),2px);background:var(--vui-meter-track-background);border-radius:var(--radius-full)}& .viraui__meter-module__Indicator_dNjqU{block-size:100%;background:var(--vui-meter-indicator-color);border-radius:inherit}}}

package/dist/components/meter/meter.js

@@ -14,20 +14,20 @@ var Meter$1 = ({ className, description, label, renderValue, value, ...otherProp
 		className: clsx(meter_module_default.Meter, className),
 		value,
 		render: /* @__PURE__ */ jsx(Stack, {
-			rowGap: "medium",
-			columnGap: "x-small"
+			rowGap: "m",
+			columnGap: "xs"
 		}),
 		children: [
 			(label || showRenderedValue) && /* @__PURE__ */ jsxs(Stack, {
 				direction: "row",
-				columnGap: "small",
+				columnGap: "s",
 				vAlign: "center",
 				hAlign: "space-between",
 				children: [label && /* @__PURE__ */ jsx(Meter.Label, {
 					render: /* @__PURE__ */ jsx(FieldLabel, {}),
 					children: label
 				}), showRenderedValue && /* @__PURE__ */ jsx(Text, {
-					size: "small",
+					size: "s",
 					tone: "muted",
 					family: "mono",
 					whiteSpace: "nowrap",
@@ -45,7 +45,7 @@ var Meter$1 = ({ className, description, label, renderValue, value, ...otherProp
 				children: /* @__PURE__ */ jsx(Meter.Indicator, { className: meter_module_default.Indicator })
 			}),
 			description && /* @__PURE__ */ jsx(Text, {
-				size: "small",
+				size: "s",
 				tone: "muted",
 				children: description
 			})

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

@@ -26,30 +26,30 @@ var PopoverSheet = ({ unstyled, title, description, children, showCloseButton =
 			render: /* @__PURE__ */ jsx(Surface, {
 				color: 1,
 				border: "all",
-				radius: "large",
+				radius: "l",
 				"data-vibrant": true,
-				render: /* @__PURE__ */ jsx(Stack, { rowGap: "medium" })
+				render: /* @__PURE__ */ jsx(Stack, { rowGap: "m" })
 			}),
 			children: /* @__PURE__ */ jsxs(Popover.Viewport, {
 				className: popover_module_default.Viewport,
 				render: /* @__PURE__ */ jsx(Stack, {
-					rowGap: "medium",
-					vPadding: "medium",
-					hPadding: "medium"
+					rowGap: "m",
+					vPadding: "m",
+					hPadding: "m"
 				}),
 				children: [
 					/* @__PURE__ */ jsxs(Stack, {
 						expandChildren: true,
 						hAlign: headerAlign,
-						rowGap: "small",
+						rowGap: "s",
 						vAlign: "start",
 						className: popover_module_default.SheetHeader,
-						vPadding: [0, children ? "medium" : 0],
+						vPadding: [0, children ? "m" : 0],
 						children: [/* @__PURE__ */ jsx(Popover.Title, {
 							render: /* @__PURE__ */ jsx(Title, {
 								align: headerAlign,
 								size: "6",
-								lineHeight: "x-small"
+								lineHeight: "xs"
 							}),
 							children: title
 						}), description && /* @__PURE__ */ jsx(Popover.Description, {
@@ -66,7 +66,7 @@ var PopoverSheet = ({ unstyled, title, description, children, showCloseButton =
 						render: /* @__PURE__ */ jsx(IconButton, {
 							"aria-label": "Close popover",
 							icon: /* @__PURE__ */ jsx(ChromeXmark, {}),
-							size: "small",
+							size: "s",
 							variant: "flat"
 						})
 					}),

package/dist/components/popover/popover.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-popover-content-fade-duration{syntax:"<time>";inherits:true;initial-value:0s}.viraui__popover-module__Sheet_4x-7H{width:var(--positioner-width);height:var(--positioner-height);max-width:var(--available-width);transition:top var(--duration-fast) var(--easing-standard),right var(--duration-fast) var(--easing-standard),bottom var(--duration-fast) var(--easing-standard),left var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-instant=click],&[data-instant=dismiss]{transition:none}}.viraui__popover-module__SheetHeader_TCGKn{-webkit-user-select:none;user-select:none}.viraui__popover-module__Popup_pJyIh{position:relative;box-sizing:border-box;width:var(--popup-width,auto);height:var(--popup-height,auto);transform-origin:var(--transform-origin);transition:width var(--duration-fast) var(--easing-standard),height var(--duration-fast) var(--easing-standard),opacity var(--duration-fast) var(--easing-entrance),transform var(--duration-fast) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(.96)}&[data-instant=click],&[data-instant=dismiss]{transition:none}@media (prefers-reduced-motion:reduce){&[data-ending-style],&[data-starting-style]{opacity:1;transform:none}}}}@layer viraui.overrides{.viraui__popover-module__Viewport_KrjBC{--vui-popover-content-fade-duration:var(--duration-fast);position:relative;display:grid;grid-template-columns:minmax(0,1fr);overflow:clip;width:100%;height:100%;&>[data-current],&>[data-previous]{grid-area:1/1;inline-size:calc(var(--popup-width) - 2px - var(--space-medium) - var(--space-medium))}&[data-unstyled]>:is([data-current],[data-previous]){inline-size:var(--popup-width,100%)}&[data-unstyled]>[data-previous]{block-size:var(--popup-height,100%)}&>[data-previous]{position:absolute;block-size:calc(var(--popup-height) - 2px - var(--space-medium) - var(--space-medium));overflow:clip;pointer-events:none;opacity:1;transition:opacity var(--vui-popover-content-fade-duration) var(--easing-standard)}&>[data-previous][data-ending-style]{opacity:0}&>[data-current]{opacity:1;transition:opacity var(--vui-popover-content-fade-duration) var(--easing-entrance)}&>[data-current][data-starting-style]{opacity:0}&[data-instant=click]>[data-current],&[data-instant=click]>[data-previous],&[data-instant=dismiss]>[data-current],&[data-instant=dismiss]>[data-previous]{transition:none}@media (prefers-reduced-motion:reduce){&>[data-current][data-starting-style],&>[data-previous][data-ending-style]{opacity:1}}}.viraui__popover-module__CloseButton_YOe2L.viraui__popover-module__CloseButton_YOe2L{position:absolute;inset-block-start:var(--space-small);inset-inline-end:var(--space-small)}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-popover-content-fade-duration{syntax:"<time>";inherits:true;initial-value:0s}.viraui__popover-module__Sheet_4x-7H{width:var(--positioner-width);height:var(--positioner-height);max-width:var(--available-width);transition:top var(--duration-fast) var(--easing-standard),right var(--duration-fast) var(--easing-standard),bottom var(--duration-fast) var(--easing-standard),left var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-instant=click],&[data-instant=dismiss]{transition:none}}.viraui__popover-module__SheetHeader_TCGKn{-webkit-user-select:none;user-select:none}.viraui__popover-module__Popup_pJyIh{position:relative;box-sizing:border-box;width:var(--popup-width,auto);height:var(--popup-height,auto);transform-origin:var(--transform-origin);transition:width var(--duration-fast) var(--easing-standard),height var(--duration-fast) var(--easing-standard),opacity var(--duration-fast) var(--easing-entrance),transform var(--duration-fast) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(.96)}&[data-instant=click],&[data-instant=dismiss]{transition:none}@media (prefers-reduced-motion:reduce){&[data-ending-style],&[data-starting-style]{opacity:1;transform:none}}}}@layer viraui.overrides{.viraui__popover-module__Viewport_KrjBC{--vui-popover-content-fade-duration:var(--duration-fast);position:relative;display:grid;grid-template-columns:minmax(0,1fr);overflow:clip;width:100%;height:100%;&>[data-current],&>[data-previous]{grid-area:1/1;inline-size:calc(var(--popup-width) - 2px - var(--space-m) - var(--space-m))}&[data-unstyled]>:is([data-current],[data-previous]){inline-size:var(--popup-width,100%)}&[data-unstyled]>[data-previous]{block-size:var(--popup-height,100%)}&>[data-previous]{position:absolute;block-size:calc(var(--popup-height) - 2px - var(--space-m) - var(--space-m));overflow:clip;pointer-events:none;opacity:1;transition:opacity var(--vui-popover-content-fade-duration) var(--easing-standard)}&>[data-previous][data-ending-style]{opacity:0}&>[data-current]{opacity:1;transition:opacity var(--vui-popover-content-fade-duration) var(--easing-entrance)}&>[data-current][data-starting-style]{opacity:0}&[data-instant=click]>[data-current],&[data-instant=click]>[data-previous],&[data-instant=dismiss]>[data-current],&[data-instant=dismiss]>[data-previous]{transition:none}@media (prefers-reduced-motion:reduce){&>[data-current][data-starting-style],&>[data-previous][data-ending-style]{opacity:1}}}.viraui__popover-module__CloseButton_YOe2L.viraui__popover-module__CloseButton_YOe2L{position:absolute;inset-block-start:var(--space-s);inset-inline-end:var(--space-s)}}

package/dist/components/radio/radio-group.js

@@ -7,7 +7,7 @@ var RadioGroup$1 = ({ children, className, ...otherProps }) => /* @__PURE__ */ j
 	className,
 	render: /* @__PURE__ */ jsx(Stack, {
 		"data-radiogroup": true,
-		rowGap: "small"
+		rowGap: "s"
 	}),
 	children
 });

package/dist/components/radio/radio.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-radio-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --__radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --__radio-disk-size{syntax:"<length>";inherits:true;initial-value:0}.viraui__radio-module__Radio_54m33{max-block-size:min-content}.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-indicator-color:contrast-color(var(--global-primary));--__radio-size:round(nearest, var(--vui-radio-size), 2px);--__radio-disk-size:round(down, calc(var(--__radio-size) / 2), 2px);--__corner-shape:round;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-radio-border-color);inline-size:var(--__radio-size);block-size:var(--__radio-size);background:var(--vui-radio-background);border-radius:100000px;&[data-size=medium]{--vui-radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-radio-background:var(--global-primary);--vui-radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-radio-border-color:var(--highlight-red);--vui-radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-radio-background:var(--global-disabled-background);--vui-radio-border-color:#0000;--vui-radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{--__corner-shape:round;inline-size:var(--__radio-disk-size);block-size:var(--__radio-disk-size);border-radius:100000px;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-radio-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --__radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --__radio-disk-size{syntax:"<length>";inherits:true;initial-value:0}.viraui__radio-module__Radio_54m33{max-block-size:min-content}.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-m);--vui-radio-background:var(--global-contrast);--vui-radio-indicator-color:contrast-color(var(--global-primary));--__radio-size:round(nearest, var(--vui-radio-size), 2px);--__radio-disk-size:round(down, calc(var(--__radio-size) / 2), 2px);--__corner-shape:round;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-radio-border-color);inline-size:var(--__radio-size);block-size:var(--__radio-size);background:var(--vui-radio-background);border-radius:100000px;&[data-size=m]{--vui-radio-size:var(--space-l)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-radio-background:var(--global-primary);--vui-radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-radio-border-color:var(--highlight-red);--vui-radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-radio-background:var(--global-disabled-background);--vui-radio-border-color:#0000;--vui-radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{--__corner-shape:round;inline-size:var(--__radio-disk-size);block-size:var(--__radio-disk-size);border-radius:100000px;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}}

package/dist/components/radio/radio.d.ts

@@ -25,9 +25,9 @@ export type RadioProps = RadioRoot.Props & {
     /**
      * Controls the visual radio size.
      *
-     * @default 'small'
+     * @default 's'
      */
-    size?: 'medium' | 'small';
+    size?: 'm' | 's';
     /**
      * Sets block padding using one token for both sides or a `[start, end]` tuple.
      *

package/dist/components/radio/radio.js

@@ -8,13 +8,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Radio } from "@base-ui/react/radio";
 //#region src/components/radio/radio.tsx
-var Radio$1 = ({ className, description, disabled, id, label, ref, size = "small", vPadding, hPadding, value, ...radioRootProps }) => {
+var Radio$1 = ({ className, description, disabled, id, label, ref, size = "s", vPadding, hPadding, value, ...radioRootProps }) => {
 	const hasTextDescription = Boolean(description);
 	return /* @__PURE__ */ jsx(Field.Item, {
 		className: radio_module_default.Radio,
 		children: /* @__PURE__ */ jsx(Field.Label, { children: /* @__PURE__ */ jsxs(Stack, {
 			direction: "row",
-			columnGap: size === "small" ? "small" : "medium",
+			columnGap: size === "s" ? "s" : "m",
 			vAlign: hasTextDescription ? "start" : "center",
 			hPadding,
 			vPadding,
@@ -31,9 +31,9 @@ var Radio$1 = ({ className, description, disabled, id, label, ref, size = "small
 					children: /* @__PURE__ */ jsx("span", { className: radio_module_default.Disk })
 				})
 			}), label || description ? /* @__PURE__ */ jsxs(Stack, {
-				rowGap: "small",
+				rowGap: "s",
 				children: [label && /* @__PURE__ */ jsx(FieldLabel, {
-					size: size === "small" ? "small" : "medium",
+					size: size === "s" ? "s" : "m",
 					children: label
 				}), /* @__PURE__ */ jsx(FieldHelperCopy, { description })]
 			}) : null]

package/dist/components/select/select-group.js

@@ -9,19 +9,19 @@ function SelectGroup({ children, className, label, ...groupProps }) {
 		...groupProps,
 		className,
 		render: /* @__PURE__ */ jsx(Stack, {
-			rowGap: "2x-small",
-			vPadding: "2x-small"
+			rowGap: "2xs",
+			vPadding: "2xs"
 		}),
 		children: [/* @__PURE__ */ jsxs(Select.GroupLabel, {
 			render: /* @__PURE__ */ jsx(Stack, {
-				columnGap: "small",
+				columnGap: "s",
 				direction: "row",
-				hPadding: "small",
-				vPadding: ["small", "x-small"],
+				hPadding: "s",
+				vPadding: ["s", "xs"],
 				vAlign: "center"
 			}),
 			children: [/* @__PURE__ */ jsx(Text, {
-				size: "x-small",
+				size: "xs",
 				tone: "muted",
 				weight: "semibold",
 				children: label

package/dist/components/select/select-option.js

@@ -17,14 +17,14 @@ function SelectOption({ addon, addonAlign = "center", children, className, indic
 		render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
 		children: /* @__PURE__ */ jsxs(Stack, {
 			expandChildren: true,
-			columnGap: "medium",
+			columnGap: "m",
 			direction: "row",
-			hPadding: "small",
-			vPadding: "small",
+			hPadding: "s",
+			vPadding: "s",
 			vAlign: "center",
 			children: [/* @__PURE__ */ jsxs(Stack, {
 				direction: "row",
-				columnGap: "small",
+				columnGap: "s",
 				vAlign: addonAlign,
 				children: [addon && /* @__PURE__ */ jsx(Stack, {
 					expandChildren: true,
@@ -33,9 +33,9 @@ function SelectOption({ addon, addonAlign = "center", children, className, indic
 					"data-shrink": "false",
 					children: addon
 				}), /* @__PURE__ */ jsx(Text, {
-					lineHeight: "small",
+					lineHeight: "s",
 					render: /* @__PURE__ */ jsx(Select.ItemText, {}),
-					size: "small",
+					size: "s",
 					children
 				})]
 			}), /* @__PURE__ */ jsx(SelectIndicatorSlot, {

package/dist/components/select/select-separator.js

@@ -8,8 +8,8 @@ function SelectSeparator({ className, orientation = "horizontal", ...separatorPr
 		className,
 		orientation,
 		render: /* @__PURE__ */ jsx(Separator, {
-			vPadding: "x-small",
-			hPadding: "x-small"
+			vPadding: "xs",
+			hPadding: "xs"
 		})
 	});
 }

package/dist/components/select/select.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-2x-large);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-medium);--vui-select-trigger-padding-inline-start:calc(var(--space-small) + var(--space-x-small));--vui-select-trigger-padding-inline-end:var(--space-x-small);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);max-block-size:min-content;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" ＊";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"＊ ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;block-size:round(to-zero,var(--vui-select-input-height),2px);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;transition:background var(--duration-instant) var(--easing-standard);&:not([data-disabled],:disabled):hover{--vui-select-control-group-background:var(--base-2)}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-medium);--vui-select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__Indicator_YNUuz{min-inline-size:var(--space-medium);min-block-size:var(--space-medium);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}}@layer viraui.overrides{.viraui__select-module__Value_uWHPX{overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Option_KgYqz{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/8%)}}&:not([data-disabled],:hover)[data-selected]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-2xl);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-m);--vui-select-trigger-padding-inline-start:calc(var(--space-s) + var(--space-xs));--vui-select-trigger-padding-inline-end:var(--space-xs);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);max-block-size:min-content;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" ＊";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"＊ ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;block-size:round(to-zero,var(--vui-select-input-height),2px);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;transition:background var(--duration-instant) var(--easing-standard);&:not([data-disabled],:disabled):hover{--vui-select-control-group-background:var(--base-2)}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-s);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-m);--vui-select-list-padding:var(--space-xs);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-l);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__Indicator_YNUuz{min-inline-size:var(--space-m);min-block-size:var(--space-m);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}}@layer viraui.overrides{.viraui__select-module__Value_uWHPX{overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Option_KgYqz{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/8%)}}&:not([data-disabled],:hover)[data-selected]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}

package/dist/components/select/select.js

@@ -37,7 +37,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
 			expandChildren: true,
-			rowGap: "small"
+			rowGap: "s"
 		}),
 		children: [
 			label && /* @__PURE__ */ jsx(Field.Label, {
@@ -59,21 +59,21 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 						expandChildren: true,
 						className: select_module_default.Trigger,
 						direction: "row",
-						columnGap: "x-small",
+						columnGap: "xs",
 						vAlign: "center",
 						children: [/* @__PURE__ */ jsx(Text, {
 							className: select_module_default.Value,
 							render: /* @__PURE__ */ jsx(Select.Value, { placeholder }),
-							size: "small",
+							size: "s",
 							trim: false,
-							lineHeight: "x-small",
+							lineHeight: "xs",
 							whiteSpace: "nowrap"
 						}), /* @__PURE__ */ jsx(Select.Icon, {
 							className: select_module_default.Icon,
 							"data-grow": "false",
 							render: /* @__PURE__ */ jsx(Stack, {
 								hAlign: "center",
-								hPadding: "x-small",
+								hPadding: "xs",
 								inline: true,
 								"data-shrink": "false",
 								vAlign: "center"
@@ -100,7 +100,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 										"aria-label": "Scroll list up",
 										className: select_module_default.ScrollButton,
 										icon: /* @__PURE__ */ jsx(ChromeChevronUp, {}),
-										size: "small",
+										size: "s",
 										tabIndex: -1,
 										variant: "flat"
 									})
@@ -113,10 +113,10 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 										render: /* @__PURE__ */ jsx(Surface, {
 											border: "all",
 											color: 1,
-											hPadding: "x-small",
+											hPadding: "xs",
 											overflow: "auto",
-											radius: "medium",
-											vPadding: "x-small",
+											radius: "m",
+											vPadding: "xs",
 											"data-vibrant": true
 										}),
 										children
@@ -133,7 +133,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 										"aria-label": "Scroll list down",
 										className: select_module_default.ScrollButton,
 										icon: /* @__PURE__ */ jsx(ChromeChevronDown, {}),
-										size: "small",
+										size: "s",
 										tabIndex: -1,
 										variant: "flat"
 									})

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

@@ -2,7 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 type SeparatorAxisPadding = ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
-type SeparatorSize = 'small' | 'medium' | 'large';
+type SeparatorSize = 's' | 'm' | 'l';
 /**
  * Public Separator props.
  *
@@ -46,7 +46,7 @@ export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'childr
     /**
      * Sets the line thickness preset.
      *
-     * @default 'small'
+     * @default 's'
      */
     size?: SeparatorSize;
     /**

package/dist/components/separator/separator.js

@@ -6,11 +6,11 @@ import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/separator/separator.tsx
 var separatorSizeValues = {
-	small: 1,
-	medium: 2,
-	large: 3
+	s: 1,
+	m: 2,
+	l: 3
 };
-var Separator = ({ className, hPadding, orientation = "horizontal", ref, render, size = "small", style, variant = "solid", vPadding, ...otherProps }) => {
+var Separator = ({ className, hPadding, orientation = "horizontal", ref, render, size = "s", style, variant = "solid", vPadding, ...otherProps }) => {
 	const dynamicStyle = {
 		"--vui-separator-size": `${separatorSizeValues[size]}px`,
 		"--vui-separator-border-style": variant,