@viraui/react 2026.7.0-next.0 → 2026.7.0-next.1

package/dist/components/glow/glow.d.ts

@@ -6,69 +6,69 @@ import type * as React from 'react';
  * Glow root is a transparent Surface shell that exposes only `radius` (token, per-corner
  * tuple, or `auto`). Put the visual card as children (typically `Surface` with `radius="auto"`).
  *
- * @default Glow-owned props use the defaults below; `radius` keeps Surface defaults when omitted.
+ * @defaultValue Glow-owned props use the defaults below; `radius` keeps Surface defaults when omitted.
  */
 export type GlowProps = React.ComponentProps<'div'> & Pick<SurfaceProps, 'radius'> & {
     /**
      * Distance from the surface edge where the glow becomes fully active.
      *
-     * @default 170
+     * @defaultValue 170
      */
     proximity?: number;
     /**
      * Angular width of the highlighted arc (degrees, used as a unitless CSS number).
      *
-     * @default 250
+     * @defaultValue 250
      */
     spread?: number;
     /**
      * Resting opacity of the glow when the pointer is outside proximity.
      *
-     * @default 0
+     * @defaultValue 0
      */
     opacity?: number;
     /**
      * Shrinks the root to fit its content (`max-width: fit-content`).
      *
-     * @default false
+     * @defaultValue false
      */
     fitContent?: boolean;
     /**
      * Width of the masked glow border ring.
      *
-     * @default 2
+     * @defaultValue 2
      */
     borderWidth?: number;
     /**
      * Color of the masked border ring under the highlight.
      *
-     * @default var(--global-contrast)
+     * @defaultValue var(--global-contrast)
      */
     borderColor?: string;
     /**
      * Offset of the glow ring from the surface edge. Negative values place the ring outside.
      *
-     * @default 5
+     * @defaultValue 5
      */
     borderOffset?: number;
     /**
      * Overrides the glow gradient with a solid color or custom background value.
      * Ignored when `rainbowColors` is true.
      *
-     * @default Theme highlight conic gradient
+     * @defaultValue Theme highlight conic gradient
      */
     glowColor?: string;
     /**
      * Shares the highlight gradient across cards via `background-attachment: fixed`.
      * Forced off when `rainbowColors` is true.
      *
-     * @default true
+     * @defaultValue true
      */
     globalHighlight?: boolean;
     /**
      * Uses the multi-stop rainbow highlight gradient and disables global highlight attachment.
      *
-     * @default false
+     * @defaultValue false
      */
     rainbowColors?: boolean;
     /**
@@ -76,7 +76,7 @@ export type GlowProps = React.ComponentProps<'div'> & Pick<SurfaceProps, 'radius
      * set `0` for instant snap. Tracker writes an unwrapped continuous angle so the
      * transition does not take the long way across the 0° seam.
      *
-     * @default 80
+     * @defaultValue 80
      */
     angleLag?: number;
 };

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

@@ -7,45 +7,45 @@ type GridItemSubgrid = boolean | 'column' | 'row';
  * Includes standard `div` attributes such as `id`, `role`, `title`, and event handlers,
  * plus placement controls and Base UI `render` support for replacing the item root.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type GridItemProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *
-     * @default The item renders a `div` root.
+     * @defaultValue The item renders a `div` root.
      */
     render?: useRender.RenderProp;
     /**
      * Ref forwarded to the rendered item root element.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLElement>;
     /**
      * Spans the item across every column track (`grid-column: 1 / -1`).
      * Wins over `column` when both are set.
      *
-     * @default false
+     * @defaultValue false
      */
     fullWidth?: boolean;
     /**
      * Spans the item across every row track (`grid-row: 1 / -1`).
      * Wins over `row` when both are set.
      *
-     * @default false
+     * @defaultValue false
      */
     fullHeight?: boolean;
     /**
      * Sets explicit `grid-column` placement via `--vui-grid-item-column`.
      *
-     * @default No explicit column placement.
+     * @defaultValue No explicit column placement.
      */
     column?: React.CSSProperties['gridColumn'];
     /**
      * Sets explicit `grid-row` placement via `--vui-grid-item-row`.
      *
-     * @default No explicit row placement.
+     * @defaultValue No explicit row placement.
      */
     row?: React.CSSProperties['gridRow'];
     /**
@@ -54,7 +54,7 @@ export type GridItemProps = React.ComponentPropsWithoutRef<'div'> & {
      * Pass `true` for both axes, or `'column'` / `'row'` for one axis.
      * Pair with `fullWidth` / `fullHeight` or a `column` / `row` span so the item covers the tracks to inherit.
      *
-     * @default false
+     * @defaultValue false
      */
     subgrid?: GridItemSubgrid;
 };

package/dist/components/grid/grid.d.ts

@@ -10,19 +10,19 @@ type GridAxisPadding = GridSpace | [GridSpace | 0, GridSpace | 0];
  * Includes standard `div` attributes such as `id`, `role`, `title`, and event handlers,
  * plus Vira-owned CSS Grid controls and Base UI `render` support for replacing the root element.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type GridProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *
-     * @default The grid renders a `div` root.
+     * @defaultValue The grid renders a `div` root.
      */
     render?: useRender.RenderProp;
     /**
      * Ref forwarded to the rendered grid root element.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLElement>;
     /**
@@ -33,32 +33,32 @@ export type GridProps = React.ComponentPropsWithoutRef<'div'> & {
      * explicit `colMinWidth` as well for fixed-breadth tracks and
      * `data-grid-fixed-breadth="true"` (`inline-size: max-content`).
      *
-     * @default No fixed column count (uses `filling` auto tracks).
+     * @defaultValue No fixed column count (uses `filling` auto tracks).
      */
     columns?: number;
     /**
      * Fixes the number of row tracks via `--vui-grid-rows`.
      *
-     * @default No fixed row count.
+     * @defaultValue No fixed row count.
      */
     rows?: number;
     /**
      * Sets the gap between grid rows using the Vira space token scale.
      *
-     * @default No row gap (`0`).
+     * @defaultValue No row gap (`0`).
      */
     rowGap?: GridSpace;
     /**
      * Sets the gap between grid columns using the Vira space token scale.
      *
-     * @default No column gap (`0`).
+     * @defaultValue No column gap (`0`).
      */
     columnGap?: GridSpace;
     /**
      * Controls `repeat(auto-fill|auto-fit, …)` when `columns` is unset.
      * Pass `false` to skip the filling data attribute.
      *
-     * @default 'fill'
+     * @defaultValue 'fill'
      */
     filling?: 'fit' | 'fill' | false;
     /**
@@ -67,25 +67,25 @@ export type GridProps = React.ComponentPropsWithoutRef<'div'> & {
      * tracks (`repeat(N, var(--vui-grid-column-min-w))`) and sets
      * `data-grid-fixed-breadth`; omit this prop to keep fluid `1fr` tracks.
      *
-     * @default '10rem'
+     * @defaultValue '10rem'
      */
     colMinWidth?: string;
     /**
      * Minimum row track size used when `rows` is set.
      *
-     * @default '1fr'
+     * @defaultValue '1fr'
      */
     rowMinHeight?: string;
     /**
      * Sets inline padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No inline padding.
+     * @defaultValue No inline padding.
      */
     hPadding?: GridAxisPadding;
     /**
      * Sets block padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No block padding.
+     * @defaultValue No block padding.
      */
     vPadding?: GridAxisPadding;
 };

package/dist/components/icon-button/icon-button-link.d.ts

@@ -18,13 +18,13 @@ export type IconButtonLinkProps = Omit<ButtonLinkProps, 'children' | 'addon' | '
     /**
      * Controls the visual button size.
      *
-     * @default 'm'
+     * @defaultValue 'm'
      */
     size?: ButtonLinkProps['size'];
     /**
      * Icon rendered as the sole visible control content.
      *
-     * @default No default; required for every IconButtonLink.
+     * @defaultValue No default; required for every IconButtonLink.
      */
     icon: ReactNode;
 };

package/dist/components/icon-button/icon-button.d.ts

@@ -17,13 +17,13 @@ export type IconButtonProps = Omit<ButtonProps, 'children' | 'addon' | 'addonPos
     /**
      * Controls the visual button size.
      *
-     * @default 'm'
+     * @defaultValue 'm'
      */
     size?: ButtonProps['size'];
     /**
      * Icon rendered as the sole visible control content.
      *
-     * @default No default; required for every IconButton.
+     * @defaultValue No default; required for every IconButton.
      */
     icon: ReactNode;
 };

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './checkbox';
 export * from './chip';
 export * from './clamp-text';
 export * from './dialog';
+export * from './disclosure';
 export * from './elevator';
 export * from './fieldset';
 export * from './fit-text';
@@ -22,6 +23,7 @@ export * from './linear-progress';
 export * from './masonry';
 export * from './menu';
 export * from './meter';
+export * from './number-field';
 export * from './otp-field';
 export * from './popover';
 export * from './progressive-blur';

package/dist/components/linear-progress/linear-progress.d.ts

@@ -6,19 +6,19 @@ import type * as React from 'react';
  * Includes Base UI progress root props such as `value`, `min`, `max`, `format`,
  * and `getAriaValueText`, plus optional label, description, and value display.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type LinearProgressProps = ProgressRoot.Props & {
     /**
      * Visible label rendered through `Progress.Label` with shared internal `FieldLabel`.
      *
-     * @default No label is rendered.
+     * @defaultValue No label is rendered.
      */
     label?: React.ReactNode;
     /**
      * Static helper copy rendered with `Text` below the progress track.
      *
-     * @default No description is rendered.
+     * @defaultValue No description is rendered.
      */
     description?: React.ReactNode;
     /**
@@ -27,7 +27,7 @@ export type LinearProgressProps = ProgressRoot.Props & {
      * Pass `true` for Base UI default formatting, or a function matching
      * `Progress.Value` `children` to customize the printed label.
      *
-     * @default Value UI is hidden.
+     * @defaultValue Value UI is hidden.
      */
     renderValue?: boolean | Exclude<React.ComponentProps<typeof PrimitiveProgress.Value>['children'], null | undefined>;
 };

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

@@ -6,19 +6,19 @@ import type * as React from 'react';
  * Includes standard `div` attributes such as `id`, `role`, `title`, data attributes, and event handlers,
  * plus Base UI `render` support for replacing the default item root.
  *
- * @default Native div pass-through props keep React defaults.
+ * @defaultValue Native div pass-through props keep React defaults.
  */
 export type MasonryItemProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *
-     * @default The item renders a `div` root.
+     * @defaultValue The item renders a `div` root.
      */
     render?: useRender.RenderProp;
     /**
      * Ref forwarded to the rendered item root element.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLElement>;
 };

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

@@ -19,19 +19,19 @@ export type MasonryBreakpointCols = {
  * Includes standard `div` attributes such as `id`, `role`, `title`, data attributes, and event handlers,
  * plus mobile-first React column distribution controls.
  *
- * @default Native div pass-through props keep React defaults.
+ * @defaultValue Native div pass-through props keep React defaults.
  */
 export type MasonryProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *
-     * @default The masonry renders a `div` root.
+     * @defaultValue The masonry renders a `div` root.
      */
     render?: useRender.RenderProp;
     /**
      * Sets the gap between columns (`--vui-masonry-gap`) and the `rowGap` on each column `Stack`.
      *
-     * @default 'l'
+     * @defaultValue 'l'
      */
     gap?: StackProps['columnGap'];
     /**
@@ -41,7 +41,7 @@ export type MasonryProps = React.ComponentPropsWithRef<'div'> & {
      * root's content-box inline size. Keys may be in any order; the largest
      * matching breakpoint wins. Non-finite keys are ignored.
      *
-     * @default { default: 1, 480: 2, 768: 3, 960: 4, 1280: 5, 2560: 6 }
+     * @defaultValue { default: 1, 480: 2, 768: 3, 960: 4, 1280: 5, 2560: 6 }
      */
     breakpointCols?: MasonryBreakpointCols;
 };

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

@@ -3,26 +3,26 @@ import type * as React from 'react';
 /**
  * Public Menu.CheckboxItem props.
  *
- * @default `closeOnClick` is `false`.
+ * @defaultValue `closeOnClick` is `false`.
  */
 export type MenuCheckboxItemProps = MenuCheckboxItemPrimitive.Props & {
     /**
      * Decorative leading node rendered before the item label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * End-aligned secondary text (e.g. keyboard shortcut) before the check indicator.
      * Rendered muted `xs`.
      *
-     * @default No note is rendered.
+     * @defaultValue No note is rendered.
      */
     note?: React.ReactNode;
     /**
      * Visual sentiment. `destructive` uses highlight-red wash + text.
      *
-     * @default Neutral item styling.
+     * @defaultValue Neutral item styling.
      */
     sentiment?: 'destructive';
 };

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

@@ -3,25 +3,25 @@ import type * as React from 'react';
 /**
  * Public Menu.Item props.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type MenuItemProps = MenuItemPrimitive.Props & {
     /**
      * Decorative leading node rendered before the item label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `xs`.
      *
-     * @default No note is rendered.
+     * @defaultValue No note is rendered.
      */
     note?: React.ReactNode;
     /**
      * Visual sentiment. `destructive` uses highlight-red wash + text.
      *
-     * @default Neutral item styling.
+     * @defaultValue Neutral item styling.
      */
     sentiment?: 'destructive';
 };

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

@@ -3,25 +3,25 @@ import type * as React from 'react';
 /**
  * Public Menu.LinkItem props.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type MenuLinkItemProps = MenuLinkItemPrimitive.Props & {
     /**
      * Decorative leading node rendered before the item label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `xs`.
      *
-     * @default No note is rendered.
+     * @defaultValue No note is rendered.
      */
     note?: React.ReactNode;
     /**
      * Visual sentiment. `destructive` uses highlight-red wash + text.
      *
-     * @default Neutral item styling.
+     * @defaultValue Neutral item styling.
      */
     sentiment?: 'destructive';
 };

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

@@ -9,7 +9,7 @@ type MenuPopupPositionerProps = Omit<MenuPositioner.Props, 'className' | 'style'
  * defaults to `2`. RTL placement comes from Base UI `DirectionProvider`;
  * app must also set HTML/`dir` (or `direction`) so portaled CSS inherits RTL.
  *
- * @default `sideOffset` is `2`.
+ * @defaultValue `sideOffset` is `2`.
  */
 export type MenuPopupProps = MenuPopupPositionerProps & {
     children?: React.ReactNode;
@@ -18,7 +18,7 @@ export type MenuPopupProps = MenuPopupPositionerProps & {
      * Omit for Base UI default (`document.body` from the module window —
      * iframe hosts must pass the iframe document body explicitly).
      *
-     * @default Base UI FloatingPortal resolution
+     * @defaultValue Base UI FloatingPortal resolution
      */
     container?: React.ComponentProps<typeof PrimitiveMenu.Portal>['container'];
 };

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

@@ -3,13 +3,13 @@ import type * as React from 'react';
 /**
  * Public Menu.RadioGroup props.
  *
- * @default No label is rendered.
+ * @defaultValue No label is rendered.
  */
 export type MenuRadioGroupProps = MenuRadioGroupPrimitive.Props & {
     /**
      * Optional accessible group label rendered with `Menu.GroupLabel`.
      *
-     * @default No label is rendered.
+     * @defaultValue No label is rendered.
      */
     label?: React.ReactNode;
 };

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

@@ -3,26 +3,26 @@ import type * as React from 'react';
 /**
  * Public Menu.RadioItem props.
  *
- * @default `closeOnClick` is `false`.
+ * @defaultValue `closeOnClick` is `false`.
  */
 export type MenuRadioItemProps = MenuRadioItemPrimitive.Props & {
     /**
      * Decorative leading node rendered before the item label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * End-aligned secondary text (e.g. keyboard shortcut) before the check indicator.
      * Rendered muted `xs`.
      *
-     * @default No note is rendered.
+     * @defaultValue No note is rendered.
      */
     note?: React.ReactNode;
     /**
      * Visual sentiment. `destructive` uses highlight-red wash + text.
      *
-     * @default Neutral item styling.
+     * @defaultValue Neutral item styling.
      */
     sentiment?: 'destructive';
 };

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

@@ -3,7 +3,7 @@ import type * as React from 'react';
 /**
  * Public Menu.Separator props.
  *
- * @default `orientation` is `'horizontal'`.
+ * @defaultValue `orientation` is `'horizontal'`.
  */
 export type MenuSeparatorProps = React.ComponentProps<typeof PrimitiveMenu.Separator>;
 export declare const MenuSeparator: React.FC<MenuSeparatorProps>;

package/dist/components/menu/menu-submenu-trigger.d.ts

@@ -3,19 +3,19 @@ import type * as React from 'react';
 /**
  * Public Menu.SubmenuTrigger props.
  *
- * @default Trailing end chevron; RTL mirror via CSS `:dir(rtl)`.
+ * @defaultValue Trailing end chevron; RTL mirror via CSS `:dir(rtl)`.
  */
 export type MenuSubmenuTriggerProps = MenuSubmenuTriggerPrimitive.Props & {
     /**
      * Decorative leading node rendered before the item label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * Visual sentiment. `destructive` uses highlight-red wash + text.
      *
-     * @default Neutral item styling.
+     * @defaultValue Neutral item styling.
      */
     sentiment?: 'destructive';
 };

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

@@ -17,7 +17,7 @@ import type * as React from 'react';
  * 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.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type MenuProps = MenuRoot.Props;
 /**
@@ -26,7 +26,7 @@ export type MenuProps = MenuRoot.Props;
  * Pass-through to Base UI `Menu.Trigger`. Use `render` for the visible control
  * (`Button`, `IconButton`, or another element).
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type MenuTriggerProps = MenuTriggerNamespace.Props;
 /**
@@ -35,7 +35,7 @@ export type MenuTriggerProps = MenuTriggerNamespace.Props;
  * Pass-through to Base UI `Menu.SubmenuRoot`. Compose `Menu.SubmenuTrigger` and
  * nested `Menu.Popup` as children.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type MenuSubmenuProps = React.ComponentProps<typeof PrimitiveMenu.SubmenuRoot>;
 export declare const MenuTrigger: PrimitiveMenu.Trigger;

package/dist/components/meter/meter.d.ts

@@ -8,19 +8,19 @@ import type * as React from 'react';
  * and `getAriaValueText`, plus optional label, description, value display, and
  * highlight `variant` for track/indicator color.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type MeterProps = MeterRoot.Props & {
     /**
      * Visible label rendered through `Meter.Label` with shared internal `FieldLabel`.
      *
-     * @default No label is rendered.
+     * @defaultValue No label is rendered.
      */
     label?: React.ReactNode;
     /**
      * Static helper copy rendered with `Text` below the meter track.
      *
-     * @default No description is rendered.
+     * @defaultValue No description is rendered.
      */
     description?: React.ReactNode;
     /**
@@ -29,7 +29,7 @@ export type MeterProps = MeterRoot.Props & {
      * Pass `true` for Base UI default formatting, or a function matching
      * `Meter.Value` `children` to customize the printed label.
      *
-     * @default Value UI is hidden.
+     * @defaultValue Value UI is hidden.
      */
     renderValue?: boolean | Exclude<React.ComponentProps<typeof PrimitiveMeter.Value>['children'], null | undefined>;
     /**
@@ -37,7 +37,7 @@ export type MeterProps = MeterRoot.Props & {
      * indicator; highlight token names tint both track (wash) and indicator
      * via `--highlight-*`, matching Chip highlight variants.
      *
-     * @default 'primary'
+     * @defaultValue 'primary'
      */
     variant?: 'primary' | ThemeTypes['highlight'];
 };

package/dist/components/number-field/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberField } from './number-field';
+export type { NumberFieldProps } from './number-field';

package/dist/components/number-field/number-field.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{.viraui__number-field-module__NumberField_l7i9a{display:contents}.viraui__number-field-module__Field_Ud43i{--vui-textfield-input-height:var(--space-2xl);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-m);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);max-block-size:min-content;&:has([required]) .viraui__number-field-module__Label_-Sji0:after{content:" ＊";color:var(--highlight-red)}}.viraui__number-field-module__ControlGroup_CX5th{box-sizing:border-box;block-size:round(to-zero,var(--vui-textfield-input-height),2px);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__number-field-module__CustomBasicInput_6fmMO:focus),&:has(.viraui__number-field-module__CustomBasicInput_6fmMO:focus-visible),&:has(.viraui__number-field-module__CustomBasicInput_6fmMO[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__number-field-module__CustomBasicInput_6fmMO[data-invalid][data-dirty]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__number-field-module__CustomBasicInput_6fmMO:disabled),&:has(.viraui__number-field-module__CustomBasicInput_6fmMO[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;--vui-textfield-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__number-field-module__Addon_QwT1q{min-inline-size:var(--space-xl)}.viraui__number-field-module__ScrubArea_3Wzje{-webkit-user-select:none;user-select:none;:where(& *){cursor:ew-resize;-webkit-user-select:none;user-select:none}}.viraui__number-field-module__Description_GWcij{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__number-field-module__CustomBasicInput_6fmMO{text-align:center;&:focus,&:focus-visible{outline:none}}}