@viraui/react 0.0.17 → 0.0.19

package/dist/components/linear-progress/linear-progress.guide.json

@@ -0,0 +1,27 @@
+{
+  "name": "LinearProgress",
+  "summary": "Shows determinate or indeterminate progress for a task in a compact horizontal track.",
+  "whenToUse": [
+    "Use for task completion with a known percentage or bounded numeric value.",
+    "Use with `value={null}` when progress is active but the amount complete is unknown.",
+    "Use with a label when the progress bar needs a visible task name."
+  ],
+  "whenNotToUse": [
+    "Use Spinner for a small standalone loading affordance without task context.",
+    "Use Skeleton when representing loading content layout.",
+    "Use Slider when the user needs to choose or adjust a value."
+  ],
+  "accessibility": [
+    "Provide a visible `label` or an accessible name through Base UI progress props when the task is not otherwise clear.",
+    "Use determinate numeric `value` when actual progress is known.",
+    "Use `value={null}` only for truly indeterminate work."
+  ],
+  "antiPatterns": [
+    "Do not use LinearProgress as an interactive value control.",
+    "Do not add fake percentages for work where progress is unknown.",
+    "Do not model invalid progress; Base UI Progress does not expose an invalid state.",
+    "Do not model disabled progress; Base UI Progress does not expose a disabled state.",
+    "Do not hide the task label when multiple progress indicators are visible."
+  ],
+  "related": ["Slider", "Spinner", "Skeleton", "Text"]
+}

package/dist/components/linear-progress/linear-progress.js

@@ -0,0 +1,61 @@
+"use client";
+import './linear-progress.css';
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
+import { Text } from "../text/text.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import linear_progress_module_default from "./linear-progress.module.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/linear-progress/linear-progress.tsx
+var LinearProgress = ({ className, description, label, showValue = false, value, ref, ...progressRootProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(progressRootProps);
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		className: clsx(linear_progress_module_default.LinearProgress, className),
+		value,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: "small",
+			columnGap: "x-small"
+		}),
+		children: [
+			(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				fillChildren: false,
+				columnGap: "small",
+				vAlign: "center",
+				hAlign: "space-between",
+				children: [label && /* @__PURE__ */ jsx(Progress.Label, {
+					render: /* @__PURE__ */ jsx(FieldLabel, {}),
+					children: label
+				}), showValue && /* @__PURE__ */ jsx(Text, {
+					size: "small",
+					tone: "muted",
+					family: "mono",
+					whiteSpace: "nowrap",
+					selection: false,
+					align: "end",
+					shrink: false,
+					render: /* @__PURE__ */ jsx(Progress.Value, { render: /* @__PURE__ */ jsx("output", {}) })
+				})]
+			}),
+			/* @__PURE__ */ jsx(Progress.Track, {
+				className: linear_progress_module_default.Track,
+				children: /* @__PURE__ */ jsx(Progress.Indicator, { className: linear_progress_module_default.Indicator })
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
+				className: linear_progress_module_default.Description,
+				size: "small",
+				tone: "muted",
+				children: description
+			})
+		]
+	});
+};
+//#endregion
+export { LinearProgress };

package/dist/components/linear-progress/linear-progress.module.js

@@ -0,0 +1,8 @@
+var linear_progress_module_default = {
+	LinearProgress: "linear-progress-module_LinearProgress_-KN0j",
+	"linear-progress-indeterminate": "linear-progress-module_linear-progress-indeterminate_g0cSO",
+	Track: "linear-progress-module_Track_qUz8P",
+	Indicator: "linear-progress-module_Indicator_maaZF"
+};
+//#endregion
+export { linear_progress_module_default as default };

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

@@ -0,0 +1,2 @@
+export { Masonry } from './masonry';
+export type { MasonryItemProps, MasonryProps } from './masonry';

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

@@ -0,0 +1,32 @@
+import { useRender } from '@base-ui/react/use-render';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public Masonry.Item props.
+ *
+ * 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.
+ */
+export type MasonryItemProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+    /**
+     * Replaces the default `div` root using Base UI render semantics.
+     *
+     * @default The item renders a `div` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Makes the item span across all columns.
+     *
+     * @default false
+     */
+    spanAll?: boolean;
+    /**
+     * Ref forwarded to the rendered item root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLElement>;
+};
+export declare const MasonryItem: React.FC<MasonryItemProps>;

package/dist/components/masonry/masonry-item.js

@@ -0,0 +1,22 @@
+"use client";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import masonry_module_default from "./masonry.module.js";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/masonry/masonry-item.tsx
+var MasonryItem = ({ className, ref, render, spanAll = false, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...componentProps,
+			...intrinsicAttributes,
+			"data-masonry-item-span-all": spanAll ? "true" : "false",
+			className: clsx(masonry_module_default.Item, className)
+		}
+	});
+};
+//#endregion
+export { MasonryItem };

package/dist/components/masonry/masonry.css

@@ -0,0 +1 @@
+.masonry-module_Masonry_l7c8U{--masonry-gap:var(--space-large);--masonry-column-fill:balance;--masonry-column-rule-color:var(--global-contrast);display:block;column-gap:var(--masonry-gap);column-fill:var(--masonry-column-fill);column-rule-color:var(--masonry-column-rule-color);columns:var(--masonry-column-width,auto) var(--masonry-column-count,auto);max-inline-size:100%}.masonry-module_Item_ywXwo{display:block;break-inside:avoid;margin:0;padding-block-end:var(--masonry-gap);&[data-masonry-item-span-all=true]{column-span:all}}

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

@@ -0,0 +1,67 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { MasonryItemProps } from './masonry-item';
+import type * as React from 'react';
+type MasonryColumnRuleStyle = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+/**
+ * Public Masonry props.
+ *
+ * Includes standard `div` attributes such as `id`, `role`, `title`, data attributes, and event handlers,
+ * plus Vira-owned CSS multi-column layout controls.
+ *
+ * @default Native div pass-through props keep React defaults.
+ */
+export type MasonryProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+    /**
+     * Replaces the default `div` root using Base UI render semantics.
+     *
+     * @default The masonry renders a `div` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Sets the gap between columns and the block-end spacing on each `Masonry.Item`.
+     *
+     * @default 'large'
+     */
+    gap?: ThemeTypes['space'];
+    /**
+     * Sets how the browser balances content across columns.
+     *
+     * @default 'balance'
+     */
+    columnFill?: 'balance' | 'auto';
+    /**
+     * Sets the CSS `column-width` value used for width-based multi-column layout.
+     *
+     * When provided, it overrides `columnCount`.
+     *
+     * @default No width override.
+     */
+    columnWidth?: string;
+    /**
+     * Sets the CSS `column-count` value used for count-based multi-column layout.
+     *
+     * Ignored when `columnWidth` is provided.
+     *
+     * @default 4
+     */
+    columnCount?: number;
+    /**
+     * Sets the CSS `column-rule-width` value for the separator between columns.
+     *
+     * @default No rule width override.
+     */
+    columnRuleWidth?: string;
+    /**
+     * Sets the CSS `column-rule-style` value for the separator between columns.
+     *
+     * @default No rule style override.
+     */
+    columnRuleStyle?: MasonryColumnRuleStyle;
+};
+export type { MasonryItemProps } from './masonry-item';
+type MasonryComponent = React.FC<MasonryProps> & {
+    Item: React.FC<MasonryItemProps>;
+};
+export declare const Masonry: MasonryComponent;

package/dist/components/masonry/masonry.guide.json

@@ -0,0 +1,24 @@
+{
+  "name": "Masonry",
+  "summary": "Multi-column layout primitive for read-only mixed-height content walls.",
+  "whenToUse": [
+    "Card walls, gallery-like collections, and editorial layouts with uneven item heights",
+    "Presentational grids where visual packing matters more than row alignment",
+    "Read-only collections composed from Surface, Stack, Text, and similar content primitives"
+  ],
+  "whenNotToUse": [
+    "Interactive collections where keyboard tab order must match visual scan order",
+    "Layouts that need strict row alignment or item-to-item placement control",
+    "Cases where Stack or another linear layout already preserves the intended reading sequence"
+  ],
+  "accessibility": [
+    "Masonry is presentational and keeps DOM order, so tab order follows source order rather than the visual column flow",
+    "Avoid interactive descendants when the visual arrangement could mislead keyboard users",
+    "Choose semantic item roots with Masonry.Item render when list or article semantics matter"
+  ],
+  "antiPatterns": [
+    "Treating CSS columns as a true interactive grid with predictable left-to-right keyboard traversal",
+    "Using arbitrary child margins instead of the component gap contract for item spacing"
+  ],
+  "related": ["Stack", "Surface", "Text"]
+}

package/dist/components/masonry/masonry.js

@@ -0,0 +1,38 @@
+"use client";
+import './masonry.css';
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
+import masonry_module_default from "./masonry.module.js";
+import { MasonryItem } from "./masonry-item.js";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/masonry/masonry.tsx
+var MasonryRoot = ({ children, className, columnCount = 4, columnFill = "balance", columnRuleStyle, columnRuleWidth, columnWidth, gap = "large", ref, render, style, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const usesColumnWidth = columnWidth !== void 0;
+	const dynamicStyle = {
+		"--masonry-gap": resolveThemeValue(gap, "space", "var(--space-large)"),
+		"--masonry-column-fill": columnFill,
+		...usesColumnWidth ? { "--masonry-column-width": columnWidth } : { "--masonry-column-count": `${columnCount}` },
+		...columnRuleWidth ? { columnRuleWidth } : {},
+		...columnRuleStyle ? { columnRuleStyle } : {},
+		...style
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...componentProps,
+			...intrinsicAttributes,
+			"data-masonry-column-fill": columnFill,
+			"data-masonry-layout-mode": usesColumnWidth ? "width" : "count",
+			className: clsx(masonry_module_default.Masonry, className),
+			style: dynamicStyle,
+			children
+		}
+	});
+};
+var Masonry = Object.assign(MasonryRoot, { Item: MasonryItem });
+//#endregion
+export { Masonry };

package/dist/components/masonry/masonry.module.js

@@ -0,0 +1,6 @@
+var masonry_module_default = {
+	Masonry: "masonry-module_Masonry_l7c8U",
+	Item: "masonry-module_Item_ywXwo"
+};
+//#endregion
+export { masonry_module_default as default };

package/dist/components/radio/index.d.ts

@@ -0,0 +1,4 @@
+export { Radio } from './radio';
+export { RadioGroup } from './radio-group';
+export type { RadioProps } from './radio';
+export type { RadioGroupProps } from './radio-group';

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

@@ -0,0 +1,44 @@
+import { FieldRoot, RadioGroup as RadioGroupPrimitive } from '@base-ui/react';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public RadioGroup props.
+ *
+ * Thin wrapper around Base UI `RadioGroup` with group-level Field validation.
+ * Layout and spacing between options are owned by the consumer.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type RadioGroupProps = RadioGroupPrimitive.Props & Omit<FieldRoot.Props, 'ref'> & {
+    /**
+     * Adds `data-grow="false"` to the field root when false.
+     *
+     * @default The field root does not render a grow attribute.
+     */
+    grow?: IntrinsicViraProps['grow'];
+    /**
+     * Adds `data-shrink="false"` to the field root when false.
+     *
+     * @default The field root does not render a shrink attribute.
+     */
+    shrink?: IntrinsicViraProps['shrink'];
+    /**
+     * Visible group label rendered with shared internal `FieldLabel`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Group helper copy rendered below the options while valid.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Group error copy rendered below the options when invalid.
+     *
+     * @default No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+};
+export declare const RadioGroup: React.FC<RadioGroupProps>;

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

@@ -0,0 +1,54 @@
+"use client";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import radio_module_default from "./radio.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field, Fieldset, RadioGroup } from "@base-ui/react";
+//#region src/components/radio/radio-group.tsx
+var RadioGroup$1 = ({ children, className, description, error, invalid, label, name, disabled, dirty, touched, validate, validationDebounceTime, validationMode, ...radioGroupProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(radioGroupProps);
+	return /* @__PURE__ */ jsx(Field.Root, {
+		...intrinsicAttributes,
+		className: radio_module_default.RadioGroup,
+		dirty,
+		disabled,
+		invalid,
+		name,
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			className: radio_module_default.RadioFieldset,
+			fillChildren: false,
+			render: /* @__PURE__ */ jsx(Fieldset.Root, { disabled }),
+			rowGap: "small",
+			children: [
+				label && /* @__PURE__ */ jsx(Fieldset.Legend, {
+					render: /* @__PURE__ */ jsx(FieldLabel, {}),
+					children: label
+				}),
+				(description || error) && /* @__PURE__ */ jsx(FieldHelperCopy, {
+					description,
+					error
+				}),
+				/* @__PURE__ */ jsx(RadioGroup, {
+					...componentProps,
+					className,
+					disabled,
+					render: /* @__PURE__ */ jsx(Stack, {
+						fillChildren: false,
+						vPadding: ["small", 0],
+						rowGap: "small"
+					}),
+					name,
+					children
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { RadioGroup$1 as RadioGroup };

package/dist/components/radio/radio.css

@@ -0,0 +1 @@
+.radio-module_RadioGroup_vnd3F{&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.radio-module_RadioFieldset_g50K8{min-inline-size:0;margin:0;padding:0}.radio-module_RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color:transparent;--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;cursor:not-allowed}&[data-invalid]:not([data-disabled]),.radio-module_RadioGroup_vnd3F[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],.radio-module_RadioGroup_vnd3F[data-disabled] &{--radio-background:var(--global-disabled-background);--radio-border-color:transparent;--radio-indicator-color:var(--global-disabled-foreground);box-shadow:none}}.radio-module_Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--radio-indicator-color)}.radio-module_Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:100000px;corner-shape:unset;background:currentColor}.radio-module_RadioRoot_3uvvn:not([data-checked]) .radio-module_Disk_pV-Q1{display:none}

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

@@ -0,0 +1,44 @@
+import { RadioRoot } from '@base-ui/react/radio';
+import { StackProps } from '..';
+import type * as React from 'react';
+/**
+ * Public Radio props.
+ *
+ * Self-contained option row for use inside `RadioGroup`. Group-level `name`,
+ * `invalid`, and `error` belong on `RadioGroup`, not on individual options.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type RadioProps = RadioRoot.Props & {
+    /**
+     * Visible label rendered with shared internal `FieldLabel`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper copy rendered with `Field.Description` and `Text` for this option.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Controls the visual radio size.
+     *
+     * @default 'small'
+     */
+    size?: 'regular' | 'small';
+    /**
+     * Sets block padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No block padding.
+     */
+    vPadding?: StackProps['vPadding'];
+    /**
+     * Sets inline padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No inline padding.
+     */
+    hPadding?: StackProps['hPadding'];
+};
+export declare const Radio: React.FC<RadioProps>;

package/dist/components/radio/radio.guide.json

@@ -0,0 +1,26 @@
+{
+  "name": "Radio",
+  "summary": "Mutually exclusive choice within a RadioGroup, with optional per-option label and helper text.",
+  "whenToUse": [
+    "Single selection from a small set of related options",
+    "Card-style or custom layouts where each option is wrapped in Surface or consumer markup",
+    "Form fields that require one answer from a named group"
+  ],
+  "whenNotToUse": [
+    "Independent boolean toggles (use Checkbox or Switch)",
+    "Multi-select sets (use Checkbox)",
+    "Options rendered outside a RadioGroup wrapper"
+  ],
+  "accessibility": [
+    "Wrap options in RadioGroup so the group exposes a shared name",
+    "Provide visible label or aria-label on each option so radios have accessible names",
+    "Surface group invalid state and error copy through RadioGroup, not individual Radio options"
+  ],
+  "antiPatterns": [
+    "Rendering Radio outside RadioGroup",
+    "Putting invalid or error on a single Radio instead of RadioGroup",
+    "Expecting RadioGroup to add spacing or grid layout between options",
+    "Importing @viraui/react/radio/radio.css or other component CSS subpaths in consumer bootstrap"
+  ],
+  "related": ["Checkbox", "Surface", "Stack"]
+}

package/dist/components/radio/radio.js

@@ -0,0 +1,45 @@
+"use client";
+import './radio.css';
+import { Stack } from "../stack/stack.js";
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import radio_module_default from "./radio.module.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { Radio } from "@base-ui/react/radio";
+//#region src/components/radio/radio.tsx
+var Radio$1 = ({ className, description, disabled, id, label, ref, size = "small", vPadding, hPadding, value, ...radioRootProps }) => {
+	const hasTextDescription = Boolean(description);
+	return /* @__PURE__ */ jsx(Field.Item, { children: /* @__PURE__ */ jsx(Field.Label, { children: /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		columnGap: size === "small" ? "small" : "medium",
+		fillChildren: false,
+		vAlign: hasTextDescription ? "start" : "center",
+		...hPadding !== void 0 ? { hPadding } : {},
+		...vPadding !== void 0 ? { vPadding } : {},
+		children: [/* @__PURE__ */ jsx(Radio.Root, {
+			...radioRootProps,
+			className: clsx(radio_module_default.RadioRoot, className),
+			"data-size": size,
+			disabled,
+			id,
+			ref,
+			value,
+			children: /* @__PURE__ */ jsx(Radio.Indicator, {
+				className: radio_module_default.Indicator,
+				children: /* @__PURE__ */ jsx("span", { className: radio_module_default.Disk })
+			})
+		}), label || description ? /* @__PURE__ */ jsxs(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: size === "small" ? "2x-small" : "x-small",
+			children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+				size: size === "small" ? "small" : "medium",
+				children: label
+			}), /* @__PURE__ */ jsx(FieldHelperCopy, { description })]
+		}) : null]
+	}) }) });
+};
+//#endregion
+export { Radio$1 as Radio };

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

@@ -0,0 +1,9 @@
+var radio_module_default = {
+	RadioGroup: "radio-module_RadioGroup_vnd3F",
+	RadioFieldset: "radio-module_RadioFieldset_g50K8",
+	RadioRoot: "radio-module_RadioRoot_3uvvn",
+	Indicator: "radio-module_Indicator_Ecavw",
+	Disk: "radio-module_Disk_pV-Q1"
+};
+//#endregion
+export { radio_module_default as default };

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

@@ -1,6 +1,6 @@
 "use client";
-import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
+import { Text } from "../text/text.js";
 import select_module_default from "./select.module.js";
 import { SelectIndicatorSlot } from "./select-indicator-slot.js";
 import { clsx } from "clsx";

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

@@ -1,6 +1,6 @@
 "use client";
-import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
+import { Text } from "../text/text.js";
 import select_module_default from "./select.module.js";
 import { SelectIndicatorSlot } from "./select-indicator-slot.js";
 import { Icon } from "../icon/icon.js";

package/dist/components/select/select.css

@@ -1 +1 @@
-.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-small);--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);&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]>.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)}}.select-module_Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);padding-inline:calc(var(--select-trigger-padding-inline-start) + ((var(--control-group-border-radius) + 0px) / 4)) 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;&:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;--control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.select-module_Value_uWHPX{--text-fluid-factor:0;--text-font-size:var(--font-scale-body-small);overflow:hidden;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.select-module_Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.select-module_Description_OmwmV{padding-inline:calc((var(--control-group-border-radius) + 0px) / 2)}.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}.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)}.select-module_ScrollButton_sHBOa{pointer-events:none}.select-module_ScrollArrowUp_DGXS-{inset-block-start:0;border-block-end:1px solid var(--global-contrast);border-radius:var(--select-list-border-radius) var(--select-list-border-radius) 0 0}.select-module_ScrollArrowDown_vhJy0{inset-block-end:0;border-block-start:1px solid var(--global-contrast);border-radius:0 0 var(--select-list-border-radius) var(--select-list-border-radius)}.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}}.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:2px solid var(--global-foreground);outline-offset:0}&:hover,&[data-highlighted]{background:var(--base-2)}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.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}}.select-module_Group_xzkuA+.select-module_Group_xzkuA{margin-block-start:var(--space-medium)}.select-module_Separator_Q-ri9{block-size:1px;margin-block:var(--space-small);margin-inline:var(--space-small);background:var(--base-3)}
+.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-small);--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);z-index:0;&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]>.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)}}.select-module_Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);padding-inline:calc(var(--select-trigger-padding-inline-start) + ((var(--control-group-border-radius) + 0px) / 4)) 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;&:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;--control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.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)}}.select-module_Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.select-module_Description_OmwmV{padding-inline:calc((var(--control-group-border-radius) + 0px) / 2)}.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}.select-module_ScrollArrow_kHlEi{--scroll-arrow-background:var(--is-vibrancy-active) oklab(from var(--base-1) l a b/80%);position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--scroll-arrow-background,var(--base-1));backdrop-filter:var(--vibrancy-filter,none);border:1px solid var(--global-contrast)}.select-module_ScrollButton_sHBOa{pointer-events:none}.select-module_ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--select-list-border-radius) var(--select-list-border-radius) 0 0}.select-module_ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--select-list-border-radius) var(--select-list-border-radius)}.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}}.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:2px solid var(--global-foreground);outline-offset:0}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{--option-hover-background:var(--is-vibrancy-active) oklab(from var(--global-contrast) l a b/14%);background:var(--option-hover-background,var(--global-contrast))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.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}}.select-module_Group_xzkuA+.select-module_Group_xzkuA{margin-block-start:var(--space-medium)}.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

@@ -12,6 +12,10 @@
     "Wire description and error copy through the field pattern so assistive tech gets helper text",
     "Keep list options keyboard reachable; do not trap focus outside the popup pattern"
   ],
-  "antiPatterns": ["Expecting multi-select or combobox behavior", "Leaving the trigger without label or aria-label"],
+  "antiPatterns": [
+    "Expecting multi-select or combobox behavior",
+    "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": ["Textfield", "Stack", "Surface", "Icon"]
 }

package/dist/components/select/select.js

@@ -1,17 +1,17 @@
-import './select.css';
 "use client";
+import './select.css';
 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 select_module_default from "./select.module.js";
 import { SelectGroup } from "./select-group.js";
-import { Icon } from "../icon/icon.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 { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -93,6 +93,7 @@ function SelectRootComponent({ children, className, description, dirty, disabled
 						children: [
 							/* @__PURE__ */ jsx(Select.ScrollUpArrow, {
 								className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowUp),
+								"data-vibrant": "",
 								render: /* @__PURE__ */ jsx(Stack, {
 									fillChildren: false,
 									hAlign: "center",
@@ -117,13 +118,15 @@ function SelectRootComponent({ children, className, description, dirty, disabled
 										color: 1,
 										hPadding: "x-small",
 										radius: "medium",
-										vPadding: "x-small"
+										vPadding: "x-small",
+										vibrant: true
 									}),
 									children
 								})
 							}),
 							/* @__PURE__ */ jsx(Select.ScrollDownArrow, {
 								className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowDown),
+								"data-vibrant": "",
 								render: /* @__PURE__ */ jsx(Stack, {
 									fillChildren: false,
 									hAlign: "center",