@viraui/react 0.0.25 → 0.0.27

package/dist/components/skeleton/skeleton.module.js

@@ -1,6 +1,8 @@
+//#region src/components/skeleton/skeleton.module.css
+var Skeleton = "viraui__skeleton-module__Skeleton_pn7Xk";
 var skeleton_module_default = {
-	Skeleton: "viraui__skeleton-module__Skeleton_pn7Xk",
+	Skeleton,
 	"skeleton-fade": "viraui__skeleton-module__skeleton-fade_XHkG4"
 };
 //#endregion
-export { skeleton_module_default as default };
+export { Skeleton, skeleton_module_default as default };

package/dist/components/slider/slider.css

@@ -1 +1 @@
-.viraui__slider-module__Slider_vDNlm{--slider-track-size:var(--space-x-small);--slider-thumb-size:var(--space-medium);--slider-track-background:var(--global-contrast);--slider-progress-background:var(--global-primary);--slider-thumb-background:contrast-color(var(--global-primary));inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0;&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--slider-track-background:var(--global-disabled-background);--slider-progress-background:var(--global-disabled-foreground);--slider-thumb-background:var(--global-disabled-foreground);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;-webkit-user-select:none;user-select:none;touch-action:none;inline-size:100%;block-size:var(--slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:visible;inline-size:100%;block-size:var(--slider-track-size);background:var(--slider-track-background);border-radius:var(--radius-infinite)}.viraui__slider-module__Indicator_y3JyJ{background:var(--slider-progress-background);border-radius:inherit}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--slider-thumb-size);block-size:calc(var(--slider-thumb-size) - 2px);background:var(--slider-thumb-background);border:2px solid var(--slider-progress-background);border-radius:var(--radius-x-small);appearance:none;transition:scale var(--easing-elastic) var(--duration-slow);&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing;scale:1.2}&:has(>input:focus-visible){outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}
+.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-x-small);--vui-slider-thumb-size:var(--space-medium);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-primary);--vui-slider-thumb-background:var(--base-2);inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0;&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--vui-slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--vui-slider-track-background:var(--global-disabled-background);--vui-slider-progress-background:var(--global-disabled-foreground);--vui-slider-thumb-background:var(--global-disabled-foreground);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;-webkit-user-select:none;user-select:none;touch-action:none;inline-size:100%;block-size:var(--vui-slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--vui-slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--vui-slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:visible;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-infinite)}.viraui__slider-module__Indicator_y3JyJ{background:var(--vui-slider-progress-background);border-radius:inherit}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--vui-slider-thumb-size);block-size:calc(var(--vui-slider-thumb-size) - 2px);background:var(--vui-slider-thumb-background);border:2px solid var(--vui-slider-progress-background);border-radius:var(--radius-x-small);appearance:none;transition:scale var(--duration-instant) var(--easing-standard);&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing;scale:1.2}&:has(>input:focus-visible){outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}

package/dist/components/slider/slider.guide.json

@@ -19,5 +19,24 @@
     "Wrapping Slider.Control and Slider.Value in extra layout inside Slider.Root",
     "Overriding Slider.Indicator position in CSS"
   ],
-  "related": ["Textfield", "Stack", "Text"]
+  "related": ["Textfield", "Stack", "Text"],
+  "properties": {
+    "css": {
+      "track-size": {
+        "description": "Slider track thickness."
+      },
+      "thumb-size": {
+        "description": "Slider thumb size."
+      },
+      "track-background": {
+        "description": "Slider track background color."
+      },
+      "progress-background": {
+        "description": "Slider filled progress color."
+      },
+      "thumb-background": {
+        "description": "Slider thumb fill color."
+      }
+    }
+  }
 }

package/dist/components/slider/slider.js

@@ -1,10 +1,10 @@
 import './slider.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
-import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
 import slider_module_default from "./slider.module.js";
 import { SliderControl } from "./slider-control.js";
 import { isRangeSlider } from "./slider-utils.js";

package/dist/components/slider/slider.module.js

@@ -1,13 +1,23 @@
+//#region src/components/slider/slider.module.css
+var Slider = "viraui__slider-module__Slider_vDNlm";
+var Label = "viraui__slider-module__Label_eQQHf";
+var SliderRoot = "viraui__slider-module__SliderRoot_4JScw";
+var SliderHeader = "viraui__slider-module__SliderHeader_gOy9k";
+var Value = "viraui__slider-module__Value_FaY9i";
+var SliderControl = "viraui__slider-module__SliderControl_FQd5-";
+var Track = "viraui__slider-module__Track_wvLEH";
+var Indicator = "viraui__slider-module__Indicator_y3JyJ";
+var Thumb = "viraui__slider-module__Thumb_S-uLF";
 var slider_module_default = {
-	Slider: "viraui__slider-module__Slider_vDNlm",
-	Label: "viraui__slider-module__Label_eQQHf",
-	SliderRoot: "viraui__slider-module__SliderRoot_4JScw",
-	SliderHeader: "viraui__slider-module__SliderHeader_gOy9k",
-	Value: "viraui__slider-module__Value_FaY9i",
-	SliderControl: "viraui__slider-module__SliderControl_FQd5-",
-	Track: "viraui__slider-module__Track_wvLEH",
-	Indicator: "viraui__slider-module__Indicator_y3JyJ",
-	Thumb: "viraui__slider-module__Thumb_S-uLF"
+	Slider,
+	Label,
+	SliderRoot,
+	SliderHeader,
+	Value,
+	SliderControl,
+	Track,
+	Indicator,
+	Thumb
 };
 //#endregion
-export { slider_module_default as default };
+export { Indicator, Label, Slider, SliderControl, SliderHeader, SliderRoot, Thumb, Track, Value, slider_module_default as default };

package/dist/components/spinner/spinner.css

@@ -1 +1 @@
-.viraui__spinner-module__Spinner_qCQzj{--spinner-size:var(--space-x-large);display:inline-block;inline-size:var(--spinner-size);block-size:var(--spinner-size);flex:none;vertical-align:middle;color:currentColor;&[data-dimension=small]{--spinner-size:var(--space-medium)}&[data-dimension=regular]{--spinner-size:var(--space-large)}}.viraui__spinner-module__Glyph_OV-cy>path{transform-origin:8px 8px;animation:viraui__spinner-module__spinner-bars_jDmaB var(--duration-slowest) infinite}.viraui__spinner-module__Glyph_OV-cy>path:first-child,.viraui__spinner-module__Glyph_OV-cy>path:nth-child(3){opacity:.3;transform:scaleY(.5);animation-delay:calc(var(--duration-slowest) / -2)}@keyframes viraui__spinner-module__spinner-bars_jDmaB{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.5)}}
+.viraui__spinner-module__Spinner_qCQzj{--vui-spinner-size:var(--space-x-large);display:inline-block;inline-size:var(--vui-spinner-size);block-size:var(--vui-spinner-size);flex:none;vertical-align:middle;color:currentColor;&[data-dimension=small]{--vui-spinner-size:var(--space-medium)}&[data-dimension=regular]{--vui-spinner-size:var(--space-large)}}.viraui__spinner-module__Glyph_OV-cy>path{transform-origin:8px 8px;animation:viraui__spinner-module__spinner-bars_jDmaB var(--duration-slowest) infinite}.viraui__spinner-module__Glyph_OV-cy>path:first-child,.viraui__spinner-module__Glyph_OV-cy>path:nth-child(3){opacity:.3;transform:scaleY(.5);animation-delay:calc(var(--duration-slowest) / -2)}@keyframes viraui__spinner-module__spinner-bars_jDmaB{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.5)}}

package/dist/components/spinner/spinner.guide.json

@@ -19,5 +19,19 @@
     "Using Spinner alone as the only loading announcement for a page",
     "Embedding animation rules outside the component stylesheet"
   ],
-  "related": ["Button", "IconButton"]
+  "related": ["Button", "IconButton"],
+  "properties": {
+    "react": {
+      "size": {
+        "description": "Sets the rendered spinner size.",
+        "refCss": "size"
+      }
+    },
+    "css": {
+      "size": {
+        "description": "Spinner glyph size on the root.",
+        "refReact": "size"
+      }
+    }
+  }
 }

package/dist/components/spinner/spinner.module.js

@@ -1,7 +1,10 @@
+//#region src/components/spinner/spinner.module.css
+var Spinner = "viraui__spinner-module__Spinner_qCQzj";
+var Glyph = "viraui__spinner-module__Glyph_OV-cy";
 var spinner_module_default = {
-	Spinner: "viraui__spinner-module__Spinner_qCQzj",
-	Glyph: "viraui__spinner-module__Glyph_OV-cy",
+	Spinner,
+	Glyph,
 	"spinner-bars": "viraui__spinner-module__spinner-bars_jDmaB"
 };
 //#endregion
-export { spinner_module_default as default };
+export { Glyph, Spinner, spinner_module_default as default };

package/dist/components/stack/stack.css

@@ -1 +1 @@
-.viraui__stack-module__Stack_NR-Ey{--stack-row-gap:0;--stack-column-gap:0;--stack-h-align:initial;--stack-v-align:initial;--stack-padding-inline-start:0;--stack-padding-inline-end:0;--stack-padding-block-start:0;--stack-padding-block-end:0;container:stack/inline-size block-size;display:flex;gap:var(--stack-row-gap) var(--stack-column-gap);flex-direction:column;align-items:var(--stack-h-align);justify-content:var(--stack-v-align);max-inline-size:var(--stack-max-width,none);min-inline-size:var(--stack-min-width,none);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--stack-v-align);justify-content:var(--stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--stack-padding-block-start) var(--stack-padding-inline-end) var(--stack-padding-block-end) var(--stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}
+.viraui__stack-module__Stack_NR-Ey{--vui-stack-row-gap:0;--vui-stack-column-gap:0;--vui-stack-h-align:initial;--vui-stack-v-align:initial;--vui-stack-padding-inline-start:0;--vui-stack-padding-inline-end:0;--vui-stack-padding-block-start:0;--vui-stack-padding-block-end:0;container:stack/inline-size block-size;display:flex;gap:var(--vui-stack-row-gap) var(--vui-stack-column-gap);flex-direction:column;align-items:var(--vui-stack-h-align);justify-content:var(--vui-stack-v-align);max-inline-size:var(--vui-stack-max-width,none);min-inline-size:var(--vui-stack-min-width,none);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--vui-stack-v-align);justify-content:var(--vui-stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--vui-stack-padding-block-start) var(--vui-stack-padding-inline-end) var(--vui-stack-padding-block-end) var(--vui-stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}

package/dist/components/stack/stack.guide.json

@@ -20,5 +20,81 @@
     "Re-declaring primitive flex container rules in app CSS when Stack can own the layout",
     "Using viewport media queries when @container stack queries against the rendered Stack size would match the design intent"
   ],
-  "related": ["Surface", "Text", "Button"]
+  "related": ["Surface", "Text", "Button"],
+  "properties": {
+    "react": {
+      "rowGap": {
+        "description": "Sets row gap using a Vira space token.",
+        "refCss": "row-gap"
+      },
+      "columnGap": {
+        "description": "Sets column gap using a Vira space token.",
+        "refCss": "column-gap"
+      },
+      "hAlign": {
+        "description": "Sets main-axis alignment for column layouts and cross-axis for row layouts.",
+        "refCss": "h-align"
+      },
+      "vAlign": {
+        "description": "Sets cross-axis alignment for column layouts and main-axis for row layouts.",
+        "refCss": "v-align"
+      },
+      "hPadding": {
+        "description": "Sets inline padding using one token or a [start, end] tuple."
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token or a [start, end] tuple."
+      },
+      "maxWidth": {
+        "description": "Constrains max inline size of the stack root.",
+        "refCss": "max-width"
+      },
+      "minWidth": {
+        "description": "Constrains min inline size of the stack root.",
+        "refCss": "min-width"
+      }
+    },
+    "css": {
+      "row-gap": {
+        "description": "Flex row gap on the root.",
+        "refReact": "rowGap"
+      },
+      "column-gap": {
+        "description": "Flex column gap on the root.",
+        "refReact": "columnGap"
+      },
+      "h-align": {
+        "description": "Logical horizontal flex alignment hook.",
+        "refReact": "hAlign"
+      },
+      "v-align": {
+        "description": "Logical vertical flex alignment hook.",
+        "refReact": "vAlign"
+      },
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-block-start": {
+        "description": "Block-start padding when padding is enabled.",
+        "refReact": "vPadding"
+      },
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled.",
+        "refReact": "vPadding"
+      },
+      "max-width": {
+        "description": "Max inline size of the stack root.",
+        "refReact": "maxWidth"
+      },
+      "min-width": {
+        "description": "Min inline size of the stack root.",
+        "refReact": "minWidth"
+      }
+    }
+  }
 }

package/dist/components/stack/stack.js

@@ -10,14 +10,14 @@ var Stack = ({ className, direction = "column", fillChildren = true, hAlign = "i
 	const hasPadding = Boolean(hPadding || vPadding);
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
-		"--stack-row-gap": resolveThemeValue(rowGap, "space", 0),
-		"--stack-column-gap": resolveThemeValue(columnGap, "space", 0),
-		"--stack-h-align": hAlign,
-		"--stack-v-align": vAlign,
-		...maxWidth && { "--stack-max-width": maxWidth },
-		...minWidth && { "--stack-min-width": minWidth },
-		...resolveAxisPadding(hPadding, "--stack-padding-inline-start", "--stack-padding-inline-end"),
-		...resolveAxisPadding(vPadding, "--stack-padding-block-start", "--stack-padding-block-end"),
+		"--vui-stack-row-gap": resolveThemeValue(rowGap, "space", 0),
+		"--vui-stack-column-gap": resolveThemeValue(columnGap, "space", 0),
+		"--vui-stack-h-align": hAlign,
+		"--vui-stack-v-align": vAlign,
+		...maxWidth && { "--vui-stack-max-width": maxWidth },
+		...minWidth && { "--vui-stack-min-width": minWidth },
+		...resolveAxisPadding(hPadding, "--vui-stack-padding-inline-start", "--vui-stack-padding-inline-end"),
+		...resolveAxisPadding(vPadding, "--vui-stack-padding-block-start", "--vui-stack-padding-block-end"),
 		...style
 	};
 	return useRender({

package/dist/components/stack/stack.module.js

@@ -1,3 +1,5 @@
-var stack_module_default = { Stack: "viraui__stack-module__Stack_NR-Ey" };
+//#region src/components/stack/stack.module.css
+var Stack = "viraui__stack-module__Stack_NR-Ey";
+var stack_module_default = { Stack };
 //#endregion
-export { stack_module_default as default };
+export { Stack, stack_module_default as default };

package/dist/components/static-noise/static-noise.module.js

@@ -1,6 +1,9 @@
+//#region src/components/static-noise/static-noise.module.css
+var StaticNoise = "viraui__static-noise-module__StaticNoise_ZhNxO";
+var FilterSvg = "viraui__static-noise-module__FilterSvg_0CP2y";
 var static_noise_module_default = {
-	StaticNoise: "viraui__static-noise-module__StaticNoise_ZhNxO",
-	FilterSvg: "viraui__static-noise-module__FilterSvg_0CP2y"
+	StaticNoise,
+	FilterSvg
 };
 //#endregion
-export { static_noise_module_default as default };
+export { FilterSvg, StaticNoise, static_noise_module_default as default };

package/dist/components/surface/surface-radius-context.js

@@ -31,12 +31,12 @@ var resolvePerCornerRadiusInput = (corners) => ({
 	bottomRight: resolveRadiusToken(corners[2]),
 	bottomLeft: resolveRadiusToken(corners[3])
 });
-var getSurfaceStyleRadius = (style) => style?.["--surface-border-radius"];
+var getSurfaceStyleRadius = (style) => style?.["--vui-surface-border-radius"];
 var getSurfaceRadiusStyle = (radius) => ({
-	"--surface-border-radius-top-left": radius.topLeft,
-	"--surface-border-radius-top-right": radius.topRight,
-	"--surface-border-radius-bottom-right": radius.bottomRight,
-	"--surface-border-radius-bottom-left": radius.bottomLeft
+	"--vui-surface-border-radius-top-left": radius.topLeft,
+	"--vui-surface-border-radius-top-right": radius.topRight,
+	"--vui-surface-border-radius-bottom-right": radius.bottomRight,
+	"--vui-surface-border-radius-bottom-left": radius.bottomLeft
 });
 var resolveDefaultContext = ({ hPadding, radius, style, vPadding }) => {
 	const [paddingInlineStart, paddingInlineEnd] = resolveAxisPaddingValues(hPadding);
@@ -74,8 +74,8 @@ var useSurfaceRadius = ({ defaults, hPadding, radius, style, vPadding }) => {
 			}
 		},
 		hasAutoRadius,
-		radiusStyle: hasAutoRadius || hasPerCornerRadius ? getSurfaceRadiusStyle(ownRadius) : { "--surface-border-radius": tokenRadius }
+		radiusStyle: hasAutoRadius || hasPerCornerRadius ? getSurfaceRadiusStyle(ownRadius) : { "--vui-surface-border-radius": tokenRadius }
 	};
 };
 //#endregion
-export { SurfaceRadiusContext, useSurfaceRadius };
+export { SurfaceRadiusContext, useSurfaceRadius, useSurfaceRadiusContext };

package/dist/components/surface/surface.css

@@ -1 +1 @@
-.viraui__surface-module__Surface_slEYq{--surface-border-radius:0;--surface-border-radius-top-left:var(--surface-border-radius);--surface-border-radius-top-right:var(--surface-border-radius);--surface-border-radius-bottom-right:var(--surface-border-radius);--surface-border-radius-bottom-left:var(--surface-border-radius);--surface-padding-inline-start:0;--surface-padding-inline-end:0;--surface-padding-block-start:0;--surface-padding-block-end:0;--surface-background-hover:var(--surface-background);--surface-overflow:visible;container:surface/inline-size block-size;position:relative;overflow:var(--surface-overflow);box-sizing:border-box;background:var(--surface-background,#0000);border-radius:var(--surface-border-radius-top-left) var(--surface-border-radius-top-right) var(--surface-border-radius-bottom-right) var(--surface-border-radius-bottom-left);border:0;@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:oklab(from var(--surface-background) l a b/80%)}}&[data-surface-radius=auto]{--surface-border-radius-top-left:0;--surface-border-radius-top-right:0;--surface-border-radius-bottom-right:0;--surface-border-radius-bottom-left:0}&[data-surface-has-padding=true]{padding:var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end) var(--surface-padding-inline-start)}&[data-surface-border]{border-style:var(--surface-border-style,solid);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(--surface-background-hover)}}}
+.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius:0;--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-padding-inline-start:0;--vui-surface-padding-inline-end:0;--vui-surface-padding-block-start:0;--vui-surface-padding-block-end:0;--vui-surface-background-hover:var(--vui-surface-background);container:surface/inline-size block-size;position:relative;overflow:var(--vui-surface-overflow,visible);box-sizing:border-box;background:var(--vui-surface-background,#0000);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-radius=auto]{--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0;--vui-surface-border-radius-bottom-right:0;--vui-surface-border-radius-bottom-left:0}&[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,solid);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)}}}

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

@@ -69,7 +69,7 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      */
     vPadding?: SurfacePadding;
     /**
-     * Sets root overflow through the `--surface-overflow` custom property.
+     * Sets root overflow through the `--vui-surface-overflow` custom property.
      *
      * @default visible
      */

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

@@ -29,5 +29,89 @@
     "Expecting radius=\"auto\" to inherit a token when the nearest ancestor Surface has no radius set",
     "Using viewport media queries when @container surface queries against the rendered Surface size would match the design intent"
   ],
-  "related": ["Elevator", "Stack"]
+  "related": ["Elevator", "Stack"],
+  "properties": {
+    "react": {
+      "color": {
+        "description": "Sets the resting background using a base ramp layer or literal CSS color.",
+        "refCss": "background"
+      },
+      "hoverColor": {
+        "description": "Sets the hover background on hover-capable pointers.",
+        "refCss": "background-hover"
+      },
+      "borderStyle": {
+        "description": "Sets the CSS border style when border is set.",
+        "refCss": "border-style"
+      },
+      "overflow": {
+        "description": "Sets root overflow through the surface overflow custom property.",
+        "refCss": "overflow"
+      },
+      "radius": {
+        "description": "Sets corner radius from tokens, a per-corner tuple, or auto for concentric radii.",
+        "refCss": "border-radius"
+      },
+      "hPadding": {
+        "description": "Sets inline padding using one token or a [start, end] tuple."
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token or a [start, end] tuple."
+      }
+    },
+    "css": {
+      "background": {
+        "description": "Resting surface background on the root.",
+        "refReact": "color"
+      },
+      "background-hover": {
+        "description": "Hover surface background on the root.",
+        "refReact": "hoverColor"
+      },
+      "border-style": {
+        "description": "Border style when border is enabled.",
+        "refReact": "borderStyle"
+      },
+      "overflow": {
+        "description": "Root overflow behavior.",
+        "refReact": "overflow"
+      },
+      "border-radius": {
+        "description": "Uniform corner radius when radius is a single token.",
+        "refReact": "radius"
+      },
+      "border-radius-top-left": {
+        "description": "Top-left corner radius; radius tuple or auto resolves per corner.",
+        "refReact": "radius"
+      },
+      "border-radius-top-right": {
+        "description": "Top-right corner radius; radius tuple or auto resolves per corner.",
+        "refReact": "radius"
+      },
+      "border-radius-bottom-right": {
+        "description": "Bottom-right corner radius; radius tuple or auto resolves per corner.",
+        "refReact": "radius"
+      },
+      "border-radius-bottom-left": {
+        "description": "Bottom-left corner radius; radius tuple or auto resolves per corner.",
+        "refReact": "radius"
+      },
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-block-start": {
+        "description": "Block-start padding when padding is enabled.",
+        "refReact": "vPadding"
+      },
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled.",
+        "refReact": "vPadding"
+      }
+    }
+  }
 }

package/dist/components/surface/surface.js

@@ -32,13 +32,13 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 		vPadding
 	});
 	const dynamicStyle = {
-		"--surface-background": toSurfaceColor(color ?? "none"),
-		...hasHoverColor && { "--surface-background-hover": toSurfaceColor(hoverColor) },
-		...border && { "--surface-border-style": borderStyle },
-		"--surface-overflow": overflow,
+		"--vui-surface-background": toSurfaceColor(color ?? "none"),
+		...hasHoverColor && { "--vui-surface-background-hover": toSurfaceColor(hoverColor) },
+		...border && { "--vui-surface-border-style": borderStyle },
+		...overflow && { "--vui-surface-overflow": overflow },
 		...radiusStyle,
-		...resolveAxisPadding(hPadding, "--surface-padding-inline-start", "--surface-padding-inline-end"),
-		...resolveAxisPadding(vPadding, "--surface-padding-block-start", "--surface-padding-block-end"),
+		...resolveAxisPadding(hPadding, "--vui-surface-padding-inline-start", "--vui-surface-padding-inline-end"),
+		...resolveAxisPadding(vPadding, "--vui-surface-padding-block-start", "--vui-surface-padding-block-end"),
 		...style
 	};
 	const surface = useRender({

package/dist/components/surface/surface.module.js

@@ -1,3 +1,5 @@
-var surface_module_default = { Surface: "viraui__surface-module__Surface_slEYq" };
+//#region src/components/surface/surface.module.css
+var Surface = "viraui__surface-module__Surface_slEYq";
+var surface_module_default = { Surface };
 //#endregion
-export { surface_module_default as default };
+export { Surface, surface_module_default as default };

package/dist/components/switch/switch.css

@@ -1 +1 @@
-.viraui__switch-module__Switch_L86y7{--switch-track-block-size:var(--space-large);--switch-track-radius:var(--radius-small);--switch-track-background:var(--global-contrast);--switch-thumb-background:var(--base-7);--switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--switch-thumb-inset:var(--space-2x-small);&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--switch-thumb-size) * 2) + var(--switch-thumb-inset) * 2);block-size:var(--switch-track-block-size);background:var(--switch-track-background);border-radius:var(--switch-track-radius);&[data-size=small]{--switch-track-radius:var(--radius-x-small);--switch-track-block-size:var(--space-medium);--switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]):not([data-invalid]){--switch-track-background:var(--global-primary);--switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]),.viraui__switch-module__Switch_L86y7[data-invalid]>&:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.viraui__switch-module__Switch_L86y7[data-disabled]>&{--switch-track-background:var(--global-disabled-background);--switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--switch-thumb-radius:calc(var(--switch-track-radius) - var(--switch-thumb-inset));position:absolute;inset-block:var(--switch-thumb-inset);inset-inline-start:var(--switch-thumb-inset);background:var(--switch-thumb-background);inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);border-radius:var(--switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}
+.viraui__switch-module__Switch_L86y7{--vui-switch-track-block-size:var(--space-large);--vui-switch-track-radius:var(--radius-small);--vui-switch-track-background:var(--global-contrast);--vui-switch-thumb-background:var(--base-1);--vui-switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--vui-switch-thumb-inset:var(--space-2x-small);&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--vui-switch-thumb-size) * 2) + var(--vui-switch-thumb-inset) * 2);block-size:var(--vui-switch-track-block-size);background:var(--vui-switch-track-background);border-radius:var(--vui-switch-track-radius);&[data-size=small]{--vui-switch-track-radius:var(--radius-x-small);--vui-switch-track-block-size:var(--space-medium);--vui-switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]){--vui-switch-track-background:var(--global-primary);--vui-switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]),.viraui__switch-module__Switch_L86y7[data-invalid]>&:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.viraui__switch-module__Switch_L86y7[data-disabled]>&{--vui-switch-track-background:var(--global-disabled-background);--vui-switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--switch-thumb-radius:calc(var(--vui-switch-track-radius) - var(--vui-switch-thumb-inset));position:absolute;inset-block:var(--vui-switch-thumb-inset);inset-inline-start:var(--vui-switch-thumb-inset);background:var(--vui-switch-thumb-background);inline-size:var(--vui-switch-thumb-size);block-size:var(--vui-switch-thumb-size);border-radius:var(--switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);box-shadow:0 0 1px 1px var(--global-contrast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0;box-shadow:none}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}

package/dist/components/switch/switch.guide.json

@@ -19,5 +19,36 @@
     "Rendering a switch without label and without aria-label",
     "Expecting description to stay visible when invalid without an error message"
   ],
-  "related": ["Textfield", "Stack", "Text"]
+  "related": ["Textfield", "Stack", "Text"],
+  "properties": {
+    "react": {
+      "size": {
+        "description": "Controls the visual switch size.",
+        "refCss": "track-block-size"
+      }
+    },
+    "css": {
+      "track-block-size": {
+        "description": "Switch track block size; size presets adjust track and thumb.",
+        "refReact": "size"
+      },
+      "track-radius": {
+        "description": "Switch track corner radius.",
+        "refReact": "size"
+      },
+      "thumb-size": {
+        "description": "Switch thumb size derived from track block size.",
+        "refReact": "size"
+      },
+      "track-background": {
+        "description": "Switch track background color."
+      },
+      "thumb-background": {
+        "description": "Switch thumb background color."
+      },
+      "thumb-inset": {
+        "description": "Inset between thumb and track edges."
+      }
+    }
+  }
 }

package/dist/components/switch/switch.js

@@ -1,9 +1,9 @@
 import './switch.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
-import { Stack } from "../stack/stack.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
 import switch_module_default from "./switch.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";

package/dist/components/switch/switch.module.js

@@ -1,8 +1,13 @@
+//#region src/components/switch/switch.module.css
+var Switch = "viraui__switch-module__Switch_L86y7";
+var Label = "viraui__switch-module__Label_9R-rv";
+var SwitchRoot = "viraui__switch-module__SwitchRoot_Zv9An";
+var Thumb = "viraui__switch-module__Thumb_ldwJw";
 var switch_module_default = {
-	Switch: "viraui__switch-module__Switch_L86y7",
-	Label: "viraui__switch-module__Label_9R-rv",
-	SwitchRoot: "viraui__switch-module__SwitchRoot_Zv9An",
-	Thumb: "viraui__switch-module__Thumb_ldwJw"
+	Switch,
+	Label,
+	SwitchRoot,
+	Thumb
 };
 //#endregion
-export { switch_module_default as default };
+export { Label, Switch, SwitchRoot, Thumb, switch_module_default as default };

package/dist/components/tabs/tabs-indicator.js

@@ -3,14 +3,14 @@ import tabs_module_default from "./tabs.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs-indicator.tsx
-var TabsIndicator = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(Tabs.Indicator, {
+var TabsIndicator = ({ className, ref, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Indicator, {
 	render: /* @__PURE__ */ jsx(Surface, {
 		border: "all",
 		radius: "auto",
 		color: 3
 	}),
 	className: tabs_module_default.Indicator,
-	...props
+	...otherProps
 });
 //#endregion
 export { TabsIndicator };

package/dist/components/tabs/tabs-list.js

@@ -6,7 +6,7 @@ import { TabsIndicator } from "./tabs-indicator.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs-list.tsx
-var TabsList = ({ children, className, activateOnFocus = true, ref, ...props }) => /* @__PURE__ */ jsx(Tabs.List, {
+var TabsList = ({ children, className, activateOnFocus = true, ref, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.List, {
 	className: clsx(tabs_module_default.List, className),
 	activateOnFocus,
 	render: /* @__PURE__ */ jsx(Surface, {
@@ -16,7 +16,7 @@ var TabsList = ({ children, className, activateOnFocus = true, ref, ...props })
 		radius: "medium",
 		vPadding: "2x-small"
 	}),
-	...props,
+	...otherProps,
 	children: /* @__PURE__ */ jsxs(Stack, {
 		direction: "row",
 		columnGap: "small",

package/dist/components/tabs/tabs-panel.js

@@ -3,10 +3,10 @@ import tabs_module_default from "./tabs.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs-panel.tsx
-var TabsPanel = ({ children, className, ref, ...props }) => /* @__PURE__ */ jsx(Tabs.Panel, {
+var TabsPanel = ({ children, className, ref, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Panel, {
 	ref,
 	className: clsx(tabs_module_default.Panel, className),
-	...props,
+	...otherProps,
 	children
 });
 //#endregion

package/dist/components/tabs/tabs-tab.js

@@ -5,14 +5,14 @@ import tabs_module_default from "./tabs.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs-tab.tsx
-var TabsTab = ({ addon, addonPosition = "start", children, className, ...props }) => /* @__PURE__ */ jsx(Tabs.Tab, {
+var TabsTab = ({ addon, addonPosition = "start", children, className, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Tab, {
 	render: /* @__PURE__ */ jsx(Button, {
 		variant: "flat",
 		addon,
 		addonPosition,
 		className: clsx(tabs_module_default.Item, className)
 	}),
-	...props,
+	...otherProps,
 	children: /* @__PURE__ */ jsx(Text, {
 		tone: "muted",
 		whiteSpace: "nowrap",

package/dist/components/tabs/tabs-viewport.js

@@ -2,9 +2,9 @@ import { clsx } from "../../core/clsx.js";
 import tabs_module_default from "./tabs.module.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tabs/tabs-viewport.tsx
-var TabsViewport = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+var TabsViewport = ({ children, className, ...otherProps }) => /* @__PURE__ */ jsx("div", {
 	className: clsx(tabs_module_default.Viewport, className),
-	...props,
+	...otherProps,
 	children
 });
 //#endregion