@viraui/react 0.0.25 → 0.0.26

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

@@ -0,0 +1,79 @@
+import { Stack } from "../stack/stack.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { Text } from "../text/text.js";
+import popover_module_default from "./popover.module.js";
+import { Icon } from "../icon/icon.js";
+import { Surface } from "../surface/surface.js";
+import { Title } from "../title/title.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/popover/popover-sheet.tsx
+var PopoverSheet = ({ unstyled, title, description, children, showCloseButton = false, headerAlign = "start", sideOffset = 8, ...positionerProps }) => /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+	className: popover_module_default.Sheet,
+	sideOffset,
+	...positionerProps,
+	children: unstyled ? /* @__PURE__ */ jsx(Popover.Popup, {
+		className: popover_module_default.Popup,
+		children: /* @__PURE__ */ jsx(Popover.Viewport, {
+			className: popover_module_default.Viewport,
+			"data-unstyled": "",
+			children
+		})
+	}) : /* @__PURE__ */ jsx(Popover.Popup, {
+		className: popover_module_default.Popup,
+		render: /* @__PURE__ */ jsx(Surface, {
+			color: 1,
+			border: "all",
+			radius: "large",
+			vibrant: true,
+			render: /* @__PURE__ */ jsx(Stack, {
+				rowGap: "medium",
+				fillChildren: false
+			})
+		}),
+		children: /* @__PURE__ */ jsxs(Popover.Viewport, {
+			className: popover_module_default.Viewport,
+			render: /* @__PURE__ */ jsx(Stack, {
+				rowGap: "medium",
+				vPadding: "medium",
+				hPadding: "medium",
+				fillChildren: false
+			}),
+			children: [
+				/* @__PURE__ */ jsxs(Stack, {
+					hAlign: headerAlign,
+					rowGap: "small",
+					vAlign: "start",
+					vPadding: [0, children ? "medium" : 0],
+					children: [/* @__PURE__ */ jsx(Popover.Title, {
+						render: /* @__PURE__ */ jsx(Title, {
+							align: headerAlign,
+							level: "h6",
+							lineHeight: "x-small"
+						}),
+						children: title
+					}), description && /* @__PURE__ */ jsx(Popover.Description, {
+						render: /* @__PURE__ */ jsx(Text, {
+							align: headerAlign,
+							tone: "muted",
+							render: /* @__PURE__ */ jsx("p", {})
+						}),
+						children: description
+					})]
+				}),
+				showCloseButton && /* @__PURE__ */ jsx(Popover.Close, {
+					className: popover_module_default.CloseButton,
+					render: /* @__PURE__ */ jsx(IconButton, {
+						"aria-label": "Close popover",
+						icon: /* @__PURE__ */ jsx(Icon, { name: "Xmark" }),
+						size: "small",
+						variant: "flat"
+					})
+				}),
+				children
+			]
+		})
+	})
+}) });
+//#endregion
+export { PopoverSheet };

package/dist/components/popover/popover.css

@@ -0,0 +1 @@
+.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}@media (prefers-reduced-motion:reduce){transition: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){transition:none;&[data-ending-style],&[data-starting-style]{opacity:1;transform:none}}}.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(--vui-stack-padding-inline-start) - var(--vui-stack-padding-inline-end))}&[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(--vui-stack-padding-block-start) - var(--vui-stack-padding-block-end));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-previous]{transition:none}&>[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)}

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,74 @@
+import { Popover as PrimitivePopover, PopoverClose as PopoverCloseNamespace, PopoverDescription as PopoverDescriptionNamespace, PopoverRoot, PopoverTitle as PopoverTitleNamespace, PopoverTrigger as PopoverTriggerNamespace } from '@base-ui/react/popover';
+import { PopoverSheetProps } from './popover-sheet';
+import type * as React from 'react';
+/**
+ * Public Popover root props.
+ *
+ * Pass-through to Base UI `Popover.Root`. Supports `open`/`defaultOpen`/`onOpenChange`,
+ * `modal` (focus trap and outside interaction), `triggerId` for controlled activation,
+ * and `handle` for detached/multiple triggers. `children` may be a node or a
+ * `({ payload }) => ReactNode` render function for per-trigger content.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type PopoverProps = PopoverRoot.Props;
+/**
+ * Public Popover.Trigger props.
+ *
+ * Pass-through to Base UI `Popover.Trigger`. Use `render` for the visible control
+ * (`Button`, `IconButton`, or another element) and set `nativeButton` when the
+ * rendered root is not a native `<button>`. Pass `handle` for detached triggers,
+ * `payload` for per-trigger content, `openOnHover`/`delay`/`closeDelay` for hover
+ * open behavior, and `id` for controlled activation via the Root `triggerId` prop.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type PopoverTriggerProps = PopoverTriggerNamespace.Props;
+/**
+ * Public Popover.Close props.
+ *
+ * Pass-through to Base UI `Popover.Close`. Use `render` for the visible control
+ * (`Button`, `IconButton`, or another element) and set `nativeButton` when the
+ * rendered root is not a native `<button>`.
+ *
+ * Compose inside `Popover.Sheet` so the control closes the open popover.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type PopoverCloseProps = PopoverCloseNamespace.Props;
+/**
+ * Public Popover.Title props.
+ *
+ * Pass-through to Base UI `Popover.Title`. Use `render` for the visible heading
+ * (for example the Vira `Title` primitive). Compose inside an `unstyled`
+ * `Popover.Sheet` so the popup keeps an accessible name; the styled sheet
+ * renders it internally from its `title` prop.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type PopoverTitleProps = PopoverTitleNamespace.Props;
+/**
+ * Public Popover.Description props.
+ *
+ * Pass-through to Base UI `Popover.Description`. Use `render` for the visible
+ * copy (for example the Vira `Text` primitive). Compose inside an `unstyled`
+ * `Popover.Sheet`; the styled sheet renders it internally from its
+ * `description` prop.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type PopoverDescriptionProps = PopoverDescriptionNamespace.Props;
+export declare const PopoverTrigger: PrimitivePopover.Trigger;
+export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+type PopoverComponent = React.FC<PopoverProps> & {
+    Trigger: React.FC<PopoverTriggerProps>;
+    Sheet: React.FC<PopoverSheetProps>;
+    Close: React.FC<PopoverCloseProps>;
+    Title: React.FC<PopoverTitleProps>;
+    Description: React.FC<PopoverDescriptionProps>;
+    createHandle: typeof PrimitivePopover.createHandle;
+};
+export declare const Popover: PopoverComponent;
+export {};

package/dist/components/popover/popover.guide.json

@@ -0,0 +1,28 @@
+{
+  "name": "Popover",
+  "summary": "Compound popover built on Base UI Popover with `Popover.Trigger`, `Popover.Sheet`, `Popover.Close`, `Popover.Title`, `Popover.Description`, and `Popover.createHandle` for detached and multiple triggers; `Sheet` encapsulates Portal + Positioner + Popup + Viewport + Title + Description and animates position, size, and content between triggers; `Sheet` with `unstyled` skips the built-in Surface and header so the consumer composes the popup chrome, including `Popover.Title` and `Popover.Description`.",
+  "whenToUse": [
+    "Anchored quick actions or contextual hints next to a triggering control",
+    "Lightweight forms or confirmations that float beside the trigger without blocking the page",
+    "Multi-trigger panels that swap content with direction-aware animations using `Popover.createHandle` and trigger `payload`",
+    "Hover-revealed hints via `openOnHover` with `delay` and `closeDelay`",
+    "Fully custom popup chrome via `Sheet` `unstyled` composed with `Popover.Title` and `Popover.Description`"
+  ],
+  "whenNotToUse": [
+    "Modal tasks that must block the page and demand focused attention (use Dialog)",
+    "Nested drill-down sheet flows (use Dialog)",
+    "System-wide transient alerts and confirmations (use Toast)"
+  ],
+  "accessibility": [
+    "Always pass `title`; add `description` when the heading alone is not enough context",
+    "With `unstyled`, render `Popover.Title` inside `children` (and `Popover.Description` when needed) so the popup keeps an accessible name",
+    "Compose `Popover.Close` with an accessible name when a visible close control is needed, or set `showCloseButton` for the built-in one",
+    "Use `modal` to control focus trap and outside interaction; render a `Popover.Close` inside the popup when `modal` is `true` or `'trap-focus'` so touch screen readers can escape"
+  ],
+  "antiPatterns": [
+    "Opening a popover without `title` copy for assistive technologies",
+    "Rendering heavy or scroll-bound content that belongs in a Dialog",
+    "Expecting `Popover.Arrow` (it is intentionally not exported or rendered)"
+  ],
+  "related": ["Surface", "Button", "IconButton", "Stack", "Dialog", "Tabs"]
+}

package/dist/components/popover/popover.js

@@ -0,0 +1,23 @@
+import './popover.css';
+import { PopoverSheet } from "./popover-sheet.js";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/popover/popover.tsx
+var PopoverTrigger = Popover.Trigger;
+var PopoverClose = Popover.Close;
+var PopoverTitle = Popover.Title;
+var PopoverDescription = Popover.Description;
+var PopoverRootComponent = ({ children, ...otherProps }) => /* @__PURE__ */ jsx(Popover.Root, {
+	...otherProps,
+	children
+});
+var Popover$1 = Object.assign(PopoverRootComponent, {
+	Trigger: Popover.Trigger,
+	Sheet: PopoverSheet,
+	Close: Popover.Close,
+	Title: Popover.Title,
+	Description: Popover.Description,
+	createHandle: Popover.createHandle
+});
+//#endregion
+export { Popover$1 as Popover, PopoverClose, PopoverDescription, PopoverTitle, PopoverTrigger };

package/dist/components/popover/popover.module.js

@@ -0,0 +1,8 @@
+var popover_module_default = {
+	Sheet: "viraui__popover-module__Sheet_4x-7H",
+	Popup: "viraui__popover-module__Popup_pJyIh",
+	Viewport: "viraui__popover-module__Viewport_KrjBC",
+	CloseButton: "viraui__popover-module__CloseButton_YOe2L"
+};
+//#endregion
+export { popover_module_default as default };

package/dist/components/progressive-blur/progressive-blur.css

@@ -1 +1 @@
-.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{--progressive-blur:16px;pointer-events:none}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;backdrop-filter:blur(calc(var(--progressive-blur) * var(--progressive-blur-factor)));mask-image:var(--progressive-blur-mask-image);.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=top] &{--progressive-blur-mask-image:linear-gradient(to top,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=right] &{--progressive-blur-mask-image:linear-gradient(to right,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=bottom] &{--progressive-blur-mask-image:linear-gradient(to bottom,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=left] &{--progressive-blur-mask-image:linear-gradient(to left,var(--progressive-blur-mask-gradient))}}
+.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{--vui-progressive-blur-amount:16px;pointer-events:none}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;backdrop-filter:blur(calc(var(--vui-progressive-blur-amount) * var(--progressive-blur-factor)));mask-image:var(--progressive-blur-mask-image);.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=top] &{--progressive-blur-mask-image:linear-gradient(to top,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=right] &{--progressive-blur-mask-image:linear-gradient(to right,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=bottom] &{--progressive-blur-mask-image:linear-gradient(to bottom,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=left] &{--progressive-blur-mask-image:linear-gradient(to left,var(--progressive-blur-mask-gradient))}}

package/dist/components/progressive-blur/progressive-blur.guide.json

@@ -21,5 +21,19 @@
     "Driving layout size or scroll behavior from inside the overlay component",
     "Embedding layout positioning rules inside the component stylesheet"
   ],
-  "related": ["Surface", "StaticNoise"]
+  "related": ["Surface", "StaticNoise"],
+  "properties": {
+    "react": {
+      "blur": {
+        "description": "Sets the maximum blur radius applied to the first layer at the selected edge.",
+        "refCss": "amount"
+      }
+    },
+    "css": {
+      "amount": {
+        "description": "Maximum blur amount for progressive blur layers.",
+        "refReact": "blur"
+      }
+    }
+  }
 }

package/dist/components/progressive-blur/progressive-blur.js

@@ -9,7 +9,7 @@ var ProgressiveBlur = ({ blur = "16px", className, direction = "bottom", easing
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const resolvedSteps = resolveProgressiveBlurSteps(steps, easing);
 	const dynamicStyle = {
-		"--progressive-blur": blur,
+		"--vui-progressive-blur-amount": blur,
 		...style
 	};
 	const layers = Array.from({ length: resolvedSteps }, (_, layerIndex) => {

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

@@ -8,4 +8,4 @@ import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react';
  * @default Base UI pass-through props keep upstream defaults.
  */
 export type RadioGroupProps<Value = string> = RadioGroupPrimitive.Props<Value>;
-export declare const RadioGroup: <Value>({ children, className, ...props }: RadioGroupProps<Value>) => import("react").JSX.Element;
+export declare const RadioGroup: <Value>({ children, className, ...otherProps }: RadioGroupProps<Value>) => import("react").JSX.Element;

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

@@ -2,8 +2,8 @@ import { Stack } from "../stack/stack.js";
 import { jsx } from "react/jsx-runtime";
 import { RadioGroup } from "@base-ui/react";
 //#region src/components/radio/radio-group.tsx
-var RadioGroup$1 = ({ children, className, ...props }) => /* @__PURE__ */ jsx(RadioGroup, {
-	...props,
+var RadioGroup$1 = ({ children, className, ...otherProps }) => /* @__PURE__ */ jsx(RadioGroup, {
+	...otherProps,
 	className,
 	render: /* @__PURE__ */ jsx(Stack, {
 		"data-radiogroup": true,

package/dist/components/radio/radio.css

@@ -1 +1 @@
-.viraui__radio-module__RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color:#0000;--radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--radio-size) / 2);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(--radio-border-color);inline-size:var(--radio-size);block-size:var(--radio-size);background:var(--radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--radio-background:var(--global-primary);--radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--radio-border-color:var(--highlight-red);--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] &{--radio-background:var(--global-disabled-background);--radio-border-color:#0000;--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(--radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}
+.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-border-color:#0000;--vui-radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--vui-radio-size) / 2);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(--vui-radio-size);block-size:var(--vui-radio-size);background:var(--vui-radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--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{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}

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

@@ -18,7 +18,7 @@ function SelectOption({ addon, addonAlign = "center", children, className, disab
 		render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
 		value,
 		children: /* @__PURE__ */ jsxs(Stack, {
-			columnGap: "small",
+			columnGap: "medium",
 			direction: "row",
 			hPadding: "small",
 			vPadding: "small",

package/dist/components/select/select.css

@@ -1 +1 @@
-.viraui__select-module__Select_eXv4Y{--input-height:var(--space-x-large);--control-group-background:var(--base-1);--control-group-color:var(--global-foreground);--control-group-border-color:var(--global-contrast);--control-group-border-radius:var(--radius-medium);--select-trigger-padding-inline-start:var(--space-small);--select-trigger-padding-inline-end:var(--space-x-small);--field-label-padding-inline:calc((var(--control-group-border-radius) + 0px) / 2);--select-list-appear-offest:8px;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--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%;min-inline-size:0;block-size:var(--input-height);padding-inline:var(--select-trigger-padding-inline-start) var(--select-trigger-padding-inline-end);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);background:var(--control-group-background);color:var(--control-group-color);font:inherit;text-align:start;cursor:pointer;&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--control-group-background:var(--global-disabled-background);--control-group-border-color:#0000;--control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Value_uWHPX{--text-fluid-factor:0;--text-font-size:var(--font-scale-body-small);flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--select-list-border-radius:var(--radius-medium);--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]{scale:.96;translate:0 calc(var(--select-list-appear-offest) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{scale:.96;translate:0 var(--select-list-appear-offest)}&[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]{scale:.96;translate:var(--select-list-appear-offest) 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]{scale:.96;translate:calc(var(--select-list-appear-offest) * -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(--vibrancy-enable: 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(--select-list-border-radius) var(--select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--select-list-border-radius) var(--select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);overflow-y:auto;scroll-padding-block:var(--select-list-padding);list-style:none;overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__OptionText_UynBD{flex:1 1 auto;min-inline-size:0}.viraui__select-module__Option_KgYqz{border-radius:calc((var(--select-list-border-radius) + 0px) - var(--select-list-padding));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(--vibrancy-enable: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.viraui__select-module__Indicator_YNUuz{inline-size:var(--space-medium);color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}.viraui__select-module__Group_xzkuA+.viraui__select-module__Group_xzkuA{margin-block-start:var(--space-medium)}.viraui__select-module__Separator_Q-ri9{block-size:1px;margin-block:var(--space-small);margin-inline:var(--space-small);background:var(--base-3)}
+.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-x-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:var(--space-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);--select-list-appear-offest:8px;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR:after{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%;min-inline-size:0;block-size:var(--vui-select-input-height);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;&[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__Value_uWHPX{--text-fluid-factor:0;--text-font-size:var(--font-scale-body-small);flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.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]{scale:.96;translate:0 calc(var(--select-list-appear-offest) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{scale:.96;translate:0 var(--select-list-appear-offest)}&[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]{scale:.96;translate:var(--select-list-appear-offest) 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]{scale:.96;translate:calc(var(--select-list-appear-offest) * -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(--vibrancy-enable: 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);list-style:none;overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__OptionText_UynBD{flex:1 1 auto;min-inline-size:0}.viraui__select-module__Option_KgYqz{border-radius:calc((var(--vui-select-list-border-radius) + 0px) - var(--vui-select-list-padding));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(--vibrancy-enable: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-selected]{background:oklab(from var(--global-contrast) l a b/8%)}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.viraui__select-module__Indicator_YNUuz{inline-size:var(--space-medium);color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}.viraui__select-module__Group_xzkuA+.viraui__select-module__Group_xzkuA{margin-block-start:var(--space-medium)}.viraui__select-module__Separator_Q-ri9{block-size:1px;margin-block:var(--space-small);margin-inline:var(--space-small);background:var(--base-3)}

package/dist/components/select/select.guide.json

@@ -23,5 +23,30 @@
     "Leaving the trigger without label or aria-label",
     "Never set the size prop (if present) of Buttons, IconButtons or other interactive elements passed as addon other than small"
   ],
-  "related": ["Fieldset", "Textfield", "Stack", "Surface", "Icon"]
+  "related": ["Fieldset", "Textfield", "Stack", "Surface", "Icon"],
+  "properties": {
+    "css": {
+      "input-height": {
+        "description": "Select trigger block size."
+      },
+      "control-group-background": {
+        "description": "Trigger background fill."
+      },
+      "control-group-color": {
+        "description": "Trigger text and icon color."
+      },
+      "control-group-border-color": {
+        "description": "Trigger border color; invalid state overrides."
+      },
+      "control-group-border-radius": {
+        "description": "Trigger corner radius."
+      },
+      "trigger-padding-inline-start": {
+        "description": "Trigger inline-start padding."
+      },
+      "trigger-padding-inline-end": {
+        "description": "Trigger inline-end padding."
+      }
+    }
+  }
 }

package/dist/components/select/select.js

@@ -118,6 +118,7 @@ function SelectRootComponent({ alignListWithTrigger = false, children, className
 										border: "all",
 										color: 1,
 										hPadding: "x-small",
+										overflow: "auto",
 										radius: "medium",
 										vPadding: "x-small",
 										vibrant: true

package/dist/components/separator/separator.css

@@ -1 +1 @@
-.viraui__separator-module__Line_xXOe9{--separator-size:1px;border:0;margin:0;background:oklab(from var(--global-contrast) l a b/20%);&[data-separator-orientation=horizontal]{inline-size:100%;block-size:var(--separator-size)}&[data-separator-orientation=vertical]{inline-size:var(--separator-size);block-size:100%}}
+.viraui__separator-module__Line_xXOe9{--vui-separator-size:1px;border:0;margin:0;background:oklab(from var(--global-contrast) l a b/20%);&[data-separator-orientation=horizontal]{inline-size:100%;block-size:var(--vui-separator-size)}&[data-separator-orientation=vertical]{inline-size:var(--vui-separator-size);block-size:100%}}

package/dist/components/separator/separator.js

@@ -14,7 +14,7 @@ var separatorSizeValues = {
 var Separator = ({ className, hPadding, orientation = "horizontal", ref, render, size = "small", style, vPadding, ...otherProps }) => {
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
-		"--separator-size": `${separatorSizeValues[size]}px`,
+		"--vui-separator-size": `${separatorSizeValues[size]}px`,
 		...style
 	};
 	const line = useRender({

package/dist/components/shimmer/shimmer.css

@@ -1 +1 @@
-.viraui__shimmer-module__Shimmer_1k-ZM{--shimmer-duration:var(--duration-slowest);--shimmer-spread:calc(3ch + var(--space-2x-large));--shimmer-angle:0deg;--shimmer-base:currentcolor;--shimmer-highlight:oklch(from var(--shimmer-base) min(calc(l + 0.35),1) c h);background-image:linear-gradient(calc(90deg + var(--shimmer-angle)),var(--shimmer-base) calc(50% - var(--shimmer-spread)),color-mix(in oklch,var(--shimmer-highlight),var(--shimmer-base) 50%) calc(50% - var(--shimmer-spread) * .5),var(--shimmer-highlight) 50%,color-mix(in oklch,var(--shimmer-highlight),var(--shimmer-base) 50%) calc(50% + var(--shimmer-spread) * .5),var(--shimmer-base) calc(50% + var(--shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--shimmer-duration) linear infinite;&::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));-webkit-text-fill-color:contrast-color(var(--global-primary));background-image:none;background-clip:initial;text-shadow:none}@media (prefers-reduced-motion:reduce){animation:none;background-image:none;-webkit-text-fill-color:currentcolor}}@keyframes viraui__shimmer-module__shimmer-slide_V1znC{0%{background-position:0 0}to{background-position:100% 0}}
+.viraui__shimmer-module__Shimmer_1k-ZM{--vui-shimmer-duration:var(--duration-slowest);--vui-shimmer-spread:calc(3ch + var(--space-2x-large));--vui-shimmer-angle:0deg;--shimmer-base:currentcolor;--vui-shimmer-highlight:oklch(from var(--shimmer-base) min(calc(l + 0.35),1) c h);background-image:linear-gradient(calc(90deg + var(--vui-shimmer-angle)),var(--shimmer-base) calc(50% - var(--vui-shimmer-spread)),color-mix(in oklch,var(--vui-shimmer-highlight),var(--shimmer-base) 50%) calc(50% - var(--vui-shimmer-spread) * .5),var(--vui-shimmer-highlight) 50%,color-mix(in oklch,var(--vui-shimmer-highlight),var(--shimmer-base) 50%) calc(50% + var(--vui-shimmer-spread) * .5),var(--shimmer-base) calc(50% + var(--vui-shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--vui-shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--vui-shimmer-duration) linear infinite;&::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));-webkit-text-fill-color:contrast-color(var(--global-primary));background-image:none;background-clip:initial;text-shadow:none}@media (prefers-reduced-motion:reduce){animation:none;background-image:none;-webkit-text-fill-color:currentcolor}}@keyframes viraui__shimmer-module__shimmer-slide_V1znC{0%{background-position:0 0}to{background-position:100% 0}}

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

@@ -21,5 +21,43 @@
     "Using Shimmer without children text content",
     "Using Shimmer for block placeholders better served by Skeleton"
   ],
-  "related": ["Text", "Title", "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

@@ -7,10 +7,10 @@ import { jsx } from "react/jsx-runtime";
 var Shimmer = ({ angle, className, duration, highlightColor, ref, spread, style, ...otherProps }) => {
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
-		...duration && { "--shimmer-duration": duration },
-		...spread && { "--shimmer-spread": spread },
-		...angle && { "--shimmer-angle": angle },
-		...highlightColor && { "--shimmer-highlight": highlightColor },
+		...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", {

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;-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/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;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)}}