@viraui/react 0.0.24 → 0.0.26

package/dist/components/shimmer/shimmer.guide.json

@@ -0,0 +1,63 @@
+{
+  "name": "Shimmer",
+  "summary": "Decorative inline text shimmer that inherits typography and color from a parent text primitive.",
+  "whenToUse": [
+    "Loading placeholder copy inside Text or Title",
+    "Animated text shimmer while awaiting async content",
+    "Muted loading labels that keep the final text dimensions"
+  ],
+  "whenNotToUse": [
+    "Block or fixed-dimension placeholders without text content",
+    "Standalone accessible loading status without a surrounding aria-busy region",
+    "Replacing Skeleton for non-text layout placeholders"
+  ],
+  "accessibility": [
+    "Shimmer renders real text content — do not mark it aria-hidden",
+    "Announce loading on the surrounding region with aria-busy or live text",
+    "Reduced motion disables the sweep and restores normal text rendering"
+  ],
+  "antiPatterns": [
+    "Putting aria-busy on Shimmer instead of the surrounding loading region",
+    "Using Shimmer without children text content",
+    "Using Shimmer for block placeholders better served by Skeleton"
+  ],
+  "related": ["Text", "Title", "Skeleton"],
+  "properties": {
+    "react": {
+      "duration": {
+        "description": "Sets the shimmer sweep duration using any valid CSS time string.",
+        "refCss": "duration"
+      },
+      "spread": {
+        "description": "Sets the shimmer highlight spread using any valid CSS length string.",
+        "refCss": "spread"
+      },
+      "angle": {
+        "description": "Sets the shimmer gradient angle offset using any valid CSS angle string.",
+        "refCss": "angle"
+      },
+      "highlightColor": {
+        "description": "Overrides the shimmer highlight color.",
+        "refCss": "highlight"
+      }
+    },
+    "css": {
+      "duration": {
+        "description": "Shimmer animation duration.",
+        "refReact": "duration"
+      },
+      "spread": {
+        "description": "Shimmer highlight spread width.",
+        "refReact": "spread"
+      },
+      "angle": {
+        "description": "Shimmer gradient angle offset.",
+        "refReact": "angle"
+      },
+      "highlight": {
+        "description": "Shimmer highlight color.",
+        "refReact": "highlightColor"
+      }
+    }
+  }
+}

package/dist/components/shimmer/shimmer.js

@@ -0,0 +1,25 @@
+import './shimmer.css';
+import { clsx } from "../../core/clsx.js";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import shimmer_module_default from "./shimmer.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/shimmer/shimmer.tsx
+var Shimmer = ({ angle, className, duration, highlightColor, ref, spread, style, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const dynamicStyle = {
+		...duration && { "--vui-shimmer-duration": duration },
+		...spread && { "--vui-shimmer-spread": spread },
+		...angle && { "--vui-shimmer-angle": angle },
+		...highlightColor && { "--vui-shimmer-highlight": highlightColor },
+		...style
+	};
+	return /* @__PURE__ */ jsx("span", {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		className: clsx(shimmer_module_default.Shimmer, className),
+		style: dynamicStyle
+	});
+};
+//#endregion
+export { Shimmer };

package/dist/components/shimmer/shimmer.module.js

@@ -0,0 +1,6 @@
+var shimmer_module_default = {
+	Shimmer: "viraui__shimmer-module__Shimmer_1k-ZM",
+	"shimmer-slide": "viraui__shimmer-module__shimmer-slide_V1znC"
+};
+//#endregion
+export { shimmer_module_default as default };

package/dist/components/skeleton/skeleton.css

@@ -1 +1 @@
-.viraui__skeleton-module__Skeleton_pn7Xk{--skeleton-background:var(--global-contrast);--skeleton-border-radius:var(--radius-small);--skeleton-inline-size:auto;--skeleton-block-size:auto;--skeleton-min-inline-size:var(--space-x-large);--skeleton-min-block-size:var(--space-medium);display:inline-block;box-sizing:border-box;inline-size:var(--skeleton-inline-size);block-size:var(--skeleton-block-size);min-inline-size:var(--skeleton-min-inline-size);min-block-size:var(--skeleton-min-block-size);max-inline-size:100%;background:var(--skeleton-background);border-radius:var(--skeleton-border-radius);vertical-align:middle;animation:viraui__skeleton-module__skeleton-fade_XHkG4 var(--duration-slow) var(--easing-standard) infinite alternate;@media (prefers-reduced-motion:reduce){animation:none}}@keyframes viraui__skeleton-module__skeleton-fade_XHkG4{0%{opacity:.52}to{opacity:1}}
+.viraui__skeleton-module__Skeleton_pn7Xk{--vui-skeleton-background:var(--global-contrast);--vui-skeleton-border-radius:var(--radius-small);--vui-skeleton-inline-size:auto;--vui-skeleton-block-size:auto;--vui-skeleton-min-inline-size:var(--space-x-large);--vui-skeleton-min-block-size:var(--space-medium);display:inline-block;box-sizing:border-box;inline-size:var(--vui-skeleton-inline-size);block-size:var(--vui-skeleton-block-size);min-inline-size:var(--vui-skeleton-min-inline-size);min-block-size:var(--vui-skeleton-min-block-size);max-inline-size:100%;background:var(--vui-skeleton-background);border-radius:var(--vui-skeleton-border-radius);vertical-align:middle;animation:viraui__skeleton-module__skeleton-fade_XHkG4 var(--duration-slow) var(--easing-standard) infinite alternate;@media (prefers-reduced-motion:reduce){animation:none}}@keyframes viraui__skeleton-module__skeleton-fade_XHkG4{0%{opacity:.52}to{opacity:1}}

package/dist/components/skeleton/skeleton.guide.json

@@ -19,5 +19,54 @@
     "Using children to derive skeleton dimensions",
     "Putting aria-busy on Skeleton instead of the surrounding loading region"
   ],
-  "related": ["Avatar"]
+  "related": ["Avatar"],
+  "properties": {
+    "react": {
+      "radius": {
+        "description": "Sets the corner radius from the Vira radius token scale.",
+        "refCss": "border-radius"
+      },
+      "width": {
+        "description": "Sets the skeleton inline size.",
+        "refCss": "inline-size"
+      },
+      "height": {
+        "description": "Sets the skeleton block size.",
+        "refCss": "block-size"
+      },
+      "minWidth": {
+        "description": "Sets the skeleton minimum inline size.",
+        "refCss": "min-inline-size"
+      },
+      "minHeight": {
+        "description": "Sets the skeleton minimum block size.",
+        "refCss": "min-block-size"
+      }
+    },
+    "css": {
+      "border-radius": {
+        "description": "Skeleton corner radius.",
+        "refReact": "radius"
+      },
+      "inline-size": {
+        "description": "Skeleton inline size.",
+        "refReact": "width"
+      },
+      "block-size": {
+        "description": "Skeleton block size.",
+        "refReact": "height"
+      },
+      "min-inline-size": {
+        "description": "Skeleton minimum inline size.",
+        "refReact": "minWidth"
+      },
+      "min-block-size": {
+        "description": "Skeleton minimum block size.",
+        "refReact": "minHeight"
+      },
+      "background": {
+        "description": "Skeleton placeholder background color."
+      }
+    }
+  }
 }

package/dist/components/skeleton/skeleton.js

@@ -8,11 +8,11 @@ import { jsx } from "react/jsx-runtime";
 var Skeleton = ({ className, height, minHeight, minWidth, radius, ref, style, width, ...otherProps }) => {
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
-		"--skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)"),
-		...width ? { "--skeleton-inline-size": width } : {},
-		...height ? { "--skeleton-block-size": height } : {},
-		...minWidth ? { "--skeleton-min-inline-size": minWidth } : {},
-		...minHeight ? { "--skeleton-min-block-size": minHeight } : {},
+		"--vui-skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)"),
+		...width && { "--vui-skeleton-inline-size": width },
+		...height && { "--vui-skeleton-block-size": height },
+		...minWidth && { "--vui-skeleton-min-inline-size": minWidth },
+		...minHeight && { "--vui-skeleton-min-block-size": minHeight },
 		...style
 	};
 	return /* @__PURE__ */ jsx("span", {

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;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

@@ -44,7 +44,7 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 			render: /* @__PURE__ */ jsx(Stack, {
 				direction: "column",
 				fillChildren: false,
-				rowGap: "small",
+				rowGap: "medium",
 				columnGap: "x-small",
 				vAlign: isVertical ? "stretch" : "center",
 				hAlign: isVertical ? "center" : "initial"

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/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;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.d.ts

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
-import { ThemeTypes } from '@viraui/foundation/vira/types';
 import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 type StackAlignment = 'start' | 'center' | 'end' | 'stretch' | 'initial' | 'space-between' | 'space-around' | 'space-evenly';
 type StackSpace = ThemeTypes['space'];

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

@@ -1,10 +1,11 @@
 {
   "name": "Stack",
-  "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding.",
+  "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding; root is a named CSS container query context (`stack`).",
   "whenToUse": [
     "Column or row layouts with token gap and alignment",
     "Composing screens and component internals without custom flex CSS",
-    "Custom native root through render while keeping data-stack hooks"
+    "Custom native root through render while keeping data-stack hooks",
+    "Style descendants with @container stack queries when layout, gap, or typography should respond to the Stack's own inline-size and block-size instead of the viewport"
   ],
   "whenNotToUse": [
     "Cases where a single component already owns required flex chrome",
@@ -15,6 +16,85 @@
     "Keep reading order aligned with visual order when using direction and wrap",
     "Do not use Stack alone to imply grouping; use landmarks or headings where needed"
   ],
-  "antiPatterns": ["Re-declaring primitive flex container rules in app CSS when Stack can own the layout"],
-  "related": ["Surface", "Text", "Button"]
+  "antiPatterns": [
+    "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"],
+  "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/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,7 +74,7 @@ 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

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;--surface-vibrancy-background:var(--is-vibrancy-active) oklab(from var(--surface-background) l a b/80%);position:relative;overflow:var(--surface-overflow);box-sizing:border-box;background:var(--surface-vibrancy-background,var(--surface-background,transparent));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;&[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

@@ -1,6 +1,6 @@
 {
   "name": "Surface",
-  "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners.",
+  "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; root is a named CSS container query context (`surface`).",
   "whenToUse": [
     "Group content with base-level background and contrast border",
     "Popup or card chrome with optional hover background",
@@ -9,7 +9,8 @@
     "Set radius to a four-value tuple [top-left, top-right, bottom-right, bottom-left] when corners need different token radii",
     "Set radius=\"auto\" on a nested Surface when its parent Surface has a radius so each corner subtracts the nearest ancestor padding and stays concentric",
     "Stack nested auto-radius Surfaces recursively; context still resolves through wrapper layout such as Stack",
-    "Set overflow=\"hidden\" (or scroll/auto) when Surface must clip or scroll inner content with radius or padding"
+    "Set overflow=\"hidden\" (or scroll/auto) when Surface must clip or scroll inner content with radius or padding",
+    "Style descendants with @container surface queries when layout or typography should respond to the Surface's own inline-size and block-size instead of the viewport"
   ],
   "whenNotToUse": [
     "Interactive control semantics without an appropriate render root",
@@ -25,7 +26,92 @@
     "Overwriting transition shorthand without composing box-shadow when data-elevation is present",
     "Assuming hoverColor applies on touch devices",
     "Reusing the parent token radius on nested Surfaces instead of radius=\"auto\" when concentric corners are required",
-    "Expecting radius=\"auto\" to inherit a token when the nearest ancestor Surface has no radius set"
+    "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({
@@ -48,8 +48,8 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 		props: {
 			...componentProps,
 			...intrinsicAttributes,
-			...border ? { "data-surface-border": border } : {},
-			...hasAutoRadius ? { "data-surface-radius": "auto" } : {},
+			...border && { "data-surface-border": border },
+			...hasAutoRadius && { "data-surface-radius": "auto" },
 			"data-surface-has-hover-color": hasHoverColor ? "true" : "false",
 			"data-surface-has-padding": hasPadding ? "true" : "false",
 			className: clsx(surface_module_default.Surface, className),

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}}