@viraui/react 0.0.25 → 0.0.27

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,13 @@
+//#region src/components/popover/popover.module.css
+var Sheet = "viraui__popover-module__Sheet_4x-7H";
+var Popup = "viraui__popover-module__Popup_pJyIh";
+var Viewport = "viraui__popover-module__Viewport_KrjBC";
+var CloseButton = "viraui__popover-module__CloseButton_YOe2L";
+var popover_module_default = {
+	Sheet,
+	Popup,
+	Viewport,
+	CloseButton
+};
+//#endregion
+export { CloseButton, Popup, Sheet, Viewport, 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/progressive-blur/progressive-blur.module.js

@@ -1,6 +1,9 @@
+//#region src/components/progressive-blur/progressive-blur.module.css
+var ProgressiveBlur = "viraui__progressive-blur-module__ProgressiveBlur_eIxTK";
+var Layer = "viraui__progressive-blur-module__Layer_zbzMS";
 var progressive_blur_module_default = {
-	ProgressiveBlur: "viraui__progressive-blur-module__ProgressiveBlur_eIxTK",
-	Layer: "viraui__progressive-blur-module__Layer_zbzMS"
+	ProgressiveBlur,
+	Layer
 };
 //#endregion
-export { progressive_blur_module_default as default };
+export { Layer, ProgressiveBlur, progressive_blur_module_default as default };

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/radio/radio.js

@@ -1,8 +1,8 @@
 import './radio.css';
 import { clsx } from "../../core/clsx.js";
-import { Stack } from "../stack/stack.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
 import radio_module_default from "./radio.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";

package/dist/components/radio/radio.module.js

@@ -1,7 +1,11 @@
+//#region src/components/radio/radio.module.css
+var RadioRoot = "viraui__radio-module__RadioRoot_3uvvn";
+var Indicator = "viraui__radio-module__Indicator_Ecavw";
+var Disk = "viraui__radio-module__Disk_pV-Q1";
 var radio_module_default = {
-	RadioRoot: "viraui__radio-module__RadioRoot_3uvvn",
-	Indicator: "viraui__radio-module__Indicator_Ecavw",
-	Disk: "viraui__radio-module__Disk_pV-Q1"
+	RadioRoot,
+	Indicator,
+	Disk
 };
 //#endregion
-export { radio_module_default as default };
+export { Disk, Indicator, RadioRoot, radio_module_default as default };

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

@@ -1,6 +1,6 @@
 import { clsx } from "../../core/clsx.js";
-import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
+import { Stack } from "../stack/stack.js";
 import select_module_default from "./select.module.js";
 import { SelectIndicatorSlot } from "./select-indicator-slot.js";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,9 +1,9 @@
 import { clsx } from "../../core/clsx.js";
-import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
+import { Stack } from "../stack/stack.js";
+import { Icon } from "../icon/icon.js";
 import select_module_default from "./select.module.js";
 import { SelectIndicatorSlot } from "./select-indicator-slot.js";
-import { Icon } from "../icon/icon.js";
 import { Surface } from "../surface/surface.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react";
@@ -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

@@ -2,17 +2,17 @@
 import './select.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
-import { Stack } from "../stack/stack.js";
-import { Elevator } from "../elevator/elevator.js";
-import { IconButton } from "../icon-button/icon-button.js";
 import { Text } from "../text/text.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
+import { Elevator } from "../elevator/elevator.js";
+import { Icon } from "../icon/icon.js";
+import { IconButton } from "../icon-button/icon-button.js";
 import select_module_default from "./select.module.js";
 import { SelectGroup } from "./select-group.js";
 import { SelectOption } from "./select-option.js";
 import { SelectSeparator } from "./select-separator.js";
-import { Icon } from "../icon/icon.js";
 import { Surface } from "../surface/surface.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
@@ -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/select/select.module.js

@@ -1,21 +1,39 @@
+//#region src/components/select/select.module.css
+var Select = "viraui__select-module__Select_eXv4Y";
+var Label = "viraui__select-module__Label_-Y1fR";
+var Trigger = "viraui__select-module__Trigger_-wBsg";
+var Value = "viraui__select-module__Value_uWHPX";
+var Icon = "viraui__select-module__Icon_EOwki";
+var Description = "viraui__select-module__Description_OmwmV";
+var SelectPopup = "viraui__select-module__SelectPopup_UzGXL";
+var ScrollArrow = "viraui__select-module__ScrollArrow_kHlEi";
+var ScrollButton = "viraui__select-module__ScrollButton_sHBOa";
+var ScrollArrowUp = "viraui__select-module__ScrollArrowUp_DGXS-";
+var ScrollArrowDown = "viraui__select-module__ScrollArrowDown_vhJy0";
+var List = "viraui__select-module__List_jdUWx";
+var OptionText = "viraui__select-module__OptionText_UynBD";
+var Option = "viraui__select-module__Option_KgYqz";
+var Indicator = "viraui__select-module__Indicator_YNUuz";
+var Group = "viraui__select-module__Group_xzkuA";
+var Separator = "viraui__select-module__Separator_Q-ri9";
 var select_module_default = {
-	Select: "viraui__select-module__Select_eXv4Y",
-	Label: "viraui__select-module__Label_-Y1fR",
-	Trigger: "viraui__select-module__Trigger_-wBsg",
-	Value: "viraui__select-module__Value_uWHPX",
-	Icon: "viraui__select-module__Icon_EOwki",
-	Description: "viraui__select-module__Description_OmwmV",
-	SelectPopup: "viraui__select-module__SelectPopup_UzGXL",
-	ScrollArrow: "viraui__select-module__ScrollArrow_kHlEi",
-	ScrollButton: "viraui__select-module__ScrollButton_sHBOa",
-	ScrollArrowUp: "viraui__select-module__ScrollArrowUp_DGXS-",
-	ScrollArrowDown: "viraui__select-module__ScrollArrowDown_vhJy0",
-	List: "viraui__select-module__List_jdUWx",
-	OptionText: "viraui__select-module__OptionText_UynBD",
-	Option: "viraui__select-module__Option_KgYqz",
-	Indicator: "viraui__select-module__Indicator_YNUuz",
-	Group: "viraui__select-module__Group_xzkuA",
-	Separator: "viraui__select-module__Separator_Q-ri9"
+	Select,
+	Label,
+	Trigger,
+	Value,
+	Icon,
+	Description,
+	SelectPopup,
+	ScrollArrow,
+	ScrollButton,
+	ScrollArrowUp,
+	ScrollArrowDown,
+	List,
+	OptionText,
+	Option,
+	Indicator,
+	Group,
+	Separator
 };
 //#endregion
-export { select_module_default as default };
+export { Description, Group, Icon, Indicator, Label, List, Option, OptionText, ScrollArrow, ScrollArrowDown, ScrollArrowUp, ScrollButton, Select, SelectPopup, Separator, Trigger, Value, select_module_default as default };

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/separator/separator.module.js

@@ -1,3 +1,5 @@
-var separator_module_default = { Line: "viraui__separator-module__Line_xXOe9" };
+//#region src/components/separator/separator.module.css
+var Line = "viraui__separator-module__Line_xXOe9";
+var separator_module_default = { Line };
 //#endregion
-export { separator_module_default as default };
+export { Line, separator_module_default as default };

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/shimmer/shimmer.module.js

@@ -1,6 +1,8 @@
+//#region src/components/shimmer/shimmer.module.css
+var Shimmer = "viraui__shimmer-module__Shimmer_1k-ZM";
 var shimmer_module_default = {
-	Shimmer: "viraui__shimmer-module__Shimmer_1k-ZM",
+	Shimmer,
 	"shimmer-slide": "viraui__shimmer-module__shimmer-slide_V1znC"
 };
 //#endregion
-export { shimmer_module_default as default };
+export { Shimmer, 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", {