@veracity/vui 5.4.0-alpha.manual.2609080740 → 5.4.0

package/dist/radio/radioGroup.js

@@ -1,23 +1,28 @@
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
+import { selectionControlGroupGap, selectionControlLabelSize, selectionControlStackGap } from "../selectionControl/theme.js";
+import { selectionControlColors } from "../selectionControl/consts.js";
 import styled from "../core/styled.js";
 import vui from "../core/vui.js";
+import { Box } from "../box/box.js";
+import { T } from "../t/t.js";
 import { RadioGroupProvider } from "./context.js";
-import { useCallback, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/radio/radioGroup.tsx
 const RadioGroupBase = styled.divBox`
   display: flex;
   flex-direction: column;
-  gap: 1;
 `;
 /**
 * Organizes layout and display of multiple radio buttons as a row or column.
-* Exposes some props to the children via context.
+* Exposes some props to the children via context. `label`/`helpText`/`errorText` render an optional
+* group heading/description around the stack; `errorText` overrides `helpText` and marks the group invalid.
 */
 const RadioGroup = vui((props, ref) => {
-	const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, value, variant, ...rest } = props;
+	const { children, className, defaultValue, disabled, errorText, gap, groupGap, helpText, isRow, label, name, onBlur, onChange, onFocus, size, value, variant, ...rest } = props;
+	const description = errorText ?? helpText;
 	const [isChecked, setIsChecked] = useState(value ?? defaultValue);
 	const handleOnChange = useCallback((e) => {
 		setIsChecked(e.target.value);
@@ -46,14 +51,58 @@ const RadioGroup = vui((props, ref) => {
 		value,
 		variant
 	]);
-	const aliasedProps = filterUndefined({ flexDirection: isRow ? "row" : void 0 });
-	return /* @__PURE__ */ jsx(RadioGroupProvider, {
+	const groupSize = size ?? "md";
+	const aliasedProps = filterUndefined({
+		flexDirection: isRow ? "row" : void 0,
+		gap: gap ?? selectionControlStackGap[groupSize] ?? selectionControlStackGap.md
+	});
+	const generatedId = useId();
+	const labelId = label ? `${generatedId}-label` : void 0;
+	const descriptionId = description ? `${generatedId}-help-text` : void 0;
+	if (!label && !description) return /* @__PURE__ */ jsx(RadioGroupProvider, {
 		value: context,
 		children: /* @__PURE__ */ jsx(RadioGroupBase, {
 			className: cs("vui-radioGroup", className),
 			ref,
 			...aliasedProps,
-			...rest
+			...rest,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(RadioGroupProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: cs("vui-radioGroup", className),
+			column: true,
+			gap: groupGap ?? selectionControlGroupGap[groupSize] ?? selectionControlGroupGap.md,
+			ref,
+			...rest,
+			children: [
+				label && /* @__PURE__ */ jsx(T, {
+					className: "vui-radioGroupLabel",
+					color: selectionControlColors.label,
+					fontWeight: "demi",
+					id: labelId,
+					size: selectionControlLabelSize[groupSize] ?? selectionControlLabelSize.md,
+					children: label
+				}),
+				/* @__PURE__ */ jsx(RadioGroupBase, {
+					"aria-describedby": descriptionId,
+					"aria-invalid": !!errorText || void 0,
+					"aria-labelledby": labelId,
+					className: "vui-radioGroupStack",
+					role: "group",
+					...aliasedProps,
+					children
+				}),
+				description && /* @__PURE__ */ jsx(T, {
+					className: "vui-radioGroupHelpText",
+					color: errorText ? selectionControlColors.error : selectionControlColors.helper,
+					id: descriptionId,
+					size: "xs",
+					children: description
+				})
+			]
 		})
 	});
 });
@@ -61,5 +110,5 @@ RadioGroup.displayName = "RadioGroup";
 
 //#endregion
 export { RadioGroup, RadioGroup as default, RadioGroupBase };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=radioGroup.js.map

package/dist/radio/radioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioGroup.js","names":[],"sources":["../../src/radio/radioGroup.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { RadioGroupProps } from './radioGroup.types'\n\nimport { styled, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { RadioGroupProvider } from './context'\n\nexport const RadioGroupBase = styled.divBox`\n  display: flex;\n  flex-direction: column;\n  gap: 1;\n`\n\n/**\n * Organizes layout and display of multiple radio buttons as a row or column.\n * Exposes some props to the children via context.\n */\nexport const RadioGroup = vui<'div', RadioGroupProps>((props, ref) => {\n  const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, value, variant, ...rest } =\n    props\n  const [isChecked, setIsChecked] = useState(value ?? defaultValue)\n\n  const handleOnChange = useCallback(\n    (e: ChangeEvent) => {\n      setIsChecked(e.target.value)\n      onChange?.(e)\n    },\n    [onChange],\n  )\n\n  const context = useMemo(\n    () =>\n      filterUndefined({\n        defaultValue,\n        disabled,\n        isChecked,\n        name,\n        onBlur,\n        onChange: handleOnChange,\n        onFocus,\n        size,\n        value,\n        variant,\n      }),\n    [defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant],\n  )\n\n  const aliasedProps = filterUndefined({\n    flexDirection: isRow ? 'row' : undefined,\n  } as const)\n\n  return (\n    <RadioGroupProvider value={context}>\n      <RadioGroupBase className={cs('vui-radioGroup', className)} ref={ref} {...aliasedProps} {...rest} />\n    </RadioGroupProvider>\n  )\n})\n\nRadioGroup.displayName = 'RadioGroup'\n\nexport default RadioGroup\n"],"mappings":";;;;;;;;;AASA,MAAa,iBAAiB,OAAO,MAAM;;;;;;;;;AAU3C,MAAa,aAAa,KAA6B,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,cAAc,UAAU,OAAO,MAAM,QAAQ,UAAU,SAAS,MAAM,OAAO,SAAS,GAAG,SAC1G;CACF,MAAM,CAAC,WAAW,gBAAgB,SAAS,SAAS,YAAY;CAEhE,MAAM,iBAAiB,aACpB,MAAmB;EAClB,aAAa,EAAE,OAAO,KAAK;EAC3B,WAAW,CAAC;CACd,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,UAAU,cAEZ,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;CACF,CAAC,GACH;EAAC;EAAc;EAAU;EAAgB;EAAW;EAAM;EAAQ;EAAS;EAAM;EAAO;CAAO,CACjG;CAEA,MAAM,eAAe,gBAAgB,EACnC,eAAe,QAAQ,QAAQ,OACjC,CAAU;CAEV,OACE,oBAAC,oBAAD;EAAoB,OAAO;YACzB,oBAAC,gBAAD;GAAgB,WAAW,GAAG,kBAAkB,SAAS;GAAQ;GAAK,GAAI;GAAc,GAAI;EAAO;CACjF;AAExB,CAAC;AAED,WAAW,cAAc"}
+{"version":3,"file":"radioGroup.js","names":["radioColors"],"sources":["../../src/radio/radioGroup.tsx"],"sourcesContent":["import { useCallback, useId, useMemo, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { RadioGroupProps } from './radioGroup.types'\n\nimport Box from '../box'\nimport { styled, vui } from '../core'\nimport {\n  selectionControlGroupGap,\n  selectionControlLabelSize,\n  selectionControlStackGap,\n} from '../selectionControl/theme'\nimport T from '../t'\nimport { cs, filterUndefined } from '../utils'\nimport { radioColors } from './consts'\nimport { RadioGroupProvider } from './context'\n\nexport const RadioGroupBase = styled.divBox`\n  display: flex;\n  flex-direction: column;\n`\n\n/**\n * Organizes layout and display of multiple radio buttons as a row or column.\n * Exposes some props to the children via context. `label`/`helpText`/`errorText` render an optional\n * group heading/description around the stack; `errorText` overrides `helpText` and marks the group invalid.\n */\nexport const RadioGroup = vui<'div', RadioGroupProps>((props, ref) => {\n  const {\n    children,\n    className,\n    defaultValue,\n    disabled,\n    errorText,\n    gap,\n    groupGap,\n    helpText,\n    isRow,\n    label,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    size,\n    value,\n    variant,\n    ...rest\n  } = props\n  const description = errorText ?? helpText\n  const [isChecked, setIsChecked] = useState(value ?? defaultValue)\n\n  const handleOnChange = useCallback(\n    (e: ChangeEvent) => {\n      setIsChecked(e.target.value)\n      onChange?.(e)\n    },\n    [onChange],\n  )\n\n  const context = useMemo(\n    () =>\n      filterUndefined({\n        defaultValue,\n        disabled,\n        isChecked,\n        name,\n        onBlur,\n        onChange: handleOnChange,\n        onFocus,\n        size,\n        value,\n        variant,\n      }),\n    [defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant],\n  )\n\n  const groupSize = size ?? 'md'\n  // `gap` (SystemProps) always controls radio-to-radio spacing; `groupGap` only applies to the\n  // label/help-text wrapper below, so the two can't collide when both are set.\n  const aliasedProps = filterUndefined({\n    flexDirection: isRow ? 'row' : undefined,\n    gap: gap ?? selectionControlStackGap[groupSize] ?? selectionControlStackGap.md,\n  } as const)\n\n  const generatedId = useId()\n  const labelId = label ? `${generatedId}-label` : undefined\n  const descriptionId = description ? `${generatedId}-help-text` : undefined\n\n  if (!label && !description) {\n    return (\n      <RadioGroupProvider value={context}>\n        <RadioGroupBase className={cs('vui-radioGroup', className)} ref={ref} {...aliasedProps} {...rest}>\n          {children}\n        </RadioGroupBase>\n      </RadioGroupProvider>\n    )\n  }\n\n  return (\n    <RadioGroupProvider value={context}>\n      <Box\n        className={cs('vui-radioGroup', className)}\n        column\n        gap={groupGap ?? selectionControlGroupGap[groupSize] ?? selectionControlGroupGap.md}\n        ref={ref}\n        {...rest}\n      >\n        {label && (\n          <T\n            className=\"vui-radioGroupLabel\"\n            color={radioColors.label}\n            fontWeight=\"demi\"\n            id={labelId}\n            size={selectionControlLabelSize[groupSize] ?? selectionControlLabelSize.md}\n          >\n            {label}\n          </T>\n        )}\n        <RadioGroupBase\n          aria-describedby={descriptionId}\n          aria-invalid={!!errorText || undefined}\n          aria-labelledby={labelId}\n          className=\"vui-radioGroupStack\"\n          role=\"group\"\n          {...aliasedProps}\n        >\n          {children}\n        </RadioGroupBase>\n        {description && (\n          <T\n            className=\"vui-radioGroupHelpText\"\n            color={errorText ? radioColors.error : radioColors.helper}\n            id={descriptionId}\n            size=\"xs\"\n          >\n            {description}\n          </T>\n        )}\n      </Box>\n    </RadioGroupProvider>\n  )\n})\n\nRadioGroup.displayName = 'RadioGroup'\n\nexport default RadioGroup\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,iBAAiB,OAAO,MAAM;;;;;;;;;AAU3C,MAAa,aAAa,KAA6B,OAAO,QAAQ;CACpE,MAAM,EACJ,UACA,WACA,cACA,UACA,WACA,KACA,UACA,UACA,OACA,OACA,MACA,QACA,UACA,SACA,MACA,OACA,SACA,GAAG,SACD;CACJ,MAAM,cAAc,aAAa;CACjC,MAAM,CAAC,WAAW,gBAAgB,SAAS,SAAS,YAAY;CAEhE,MAAM,iBAAiB,aACpB,MAAmB;EAClB,aAAa,EAAE,OAAO,KAAK;EAC3B,WAAW,CAAC;CACd,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,UAAU,cAEZ,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;CACF,CAAC,GACH;EAAC;EAAc;EAAU;EAAgB;EAAW;EAAM;EAAQ;EAAS;EAAM;EAAO;CAAO,CACjG;CAEA,MAAM,YAAY,QAAQ;CAG1B,MAAM,eAAe,gBAAgB;EACnC,eAAe,QAAQ,QAAQ;EAC/B,KAAK,OAAO,yBAAyB,cAAc,yBAAyB;CAC9E,CAAU;CAEV,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,QAAQ,GAAG,YAAY,UAAU;CACjD,MAAM,gBAAgB,cAAc,GAAG,YAAY,cAAc;CAEjE,IAAI,CAAC,SAAS,CAAC,aACb,OACE,oBAAC,oBAAD;EAAoB,OAAO;YACzB,oBAAC,gBAAD;GAAgB,WAAW,GAAG,kBAAkB,SAAS;GAAQ;GAAK,GAAI;GAAc,GAAI;GACzF;EACa;CACE;CAIxB,OACE,oBAAC,oBAAD;EAAoB,OAAO;YACzB,qBAAC,KAAD;GACE,WAAW,GAAG,kBAAkB,SAAS;GACzC;GACA,KAAK,YAAY,yBAAyB,cAAc,yBAAyB;GAC5E;GACL,GAAI;aALN;IAOG,SACC,oBAAC,GAAD;KACE,WAAU;KACV,OAAOA,uBAAY;KACnB,YAAW;KACX,IAAI;KACJ,MAAM,0BAA0B,cAAc,0BAA0B;eAEvE;IACA;IAEL,oBAAC,gBAAD;KACE,oBAAkB;KAClB,gBAAc,CAAC,CAAC,aAAa;KAC7B,mBAAiB;KACjB,WAAU;KACV,MAAK;KACL,GAAI;KAEH;IACa;IACf,eACC,oBAAC,GAAD;KACE,WAAU;KACV,OAAO,YAAYA,uBAAY,QAAQA,uBAAY;KACnD,IAAI;KACJ,MAAK;eAEJ;IACA;GAEF;;CACa;AAExB,CAAC;AAED,WAAW,cAAc"}

package/dist/radio/radioGroup.types.d.ts

@@ -4,14 +4,27 @@ import { ThemingProps } from "../theme/types.js";
 import "../theme/index.js";
 import { SystemProps } from "../system/system.js";
 import "../system/index.js";
+import { ReactNode } from "react";
 //#region src/radio/radioGroup.types.d.ts
 type RadioGroupProps = SystemProps & ThemingProps<'Radio'> & {
   /** Deprecated. Please use variant instead. @deprecated  */
   colorScheme?: 'blue' | 'prussian';
   /** Passes the prop to each radio. */
   disabled?: boolean;
+  /** Error text rendered below the radio stack. Overrides `helpText` and marks the group as invalid. */
+  errorText?: ReactNode;
+  /**
+   * Overrides the gap between the group label/help text and the radio stack (defaults to a
+   * size-scaled value). Only takes effect when `label` or `helpText` is set. `gap` (from
+   * `SystemProps`) overrides the gap between individual radios in either case.
+   */
+  groupGap?: SystemProps['gap'];
+  /** Help text rendered below the radio stack. Overridden by `errorText` when both are set. */
+  helpText?: ReactNode;
   /** Displays radio buttons in a row. */
   isRow?: boolean;
+  /** Group heading rendered above the radio stack. */
+  label?: ReactNode;
   /** Passes the prop to each checkbox. */
   name?: string;
   /** Passes the prop to each checkbox. */

package/dist/radio/radioGroup.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radioGroup.types.d.ts","names":[],"sources":["../../src/radio/radioGroup.types.ts"],"mappings":";;;;;;;KAIY,kBAAkB,cAC5B;;EAEE;;EAEA;;EAEA;;EAEA;;EAEA,SAAS;;EAET,WAAW;;EAEX,UAAU;;EAEV"}
+{"version":3,"file":"radioGroup.types.d.ts","names":[],"sources":["../../src/radio/radioGroup.types.ts"],"mappings":";;;;;;;;KAMY,kBAAkB,cAC5B;;EAEE;;EAEA;;EAEA,YAAY;;;;;;EAMZ,WAAW;;EAEX,WAAW;;EAEX;;EAEA,QAAQ;;EAER;;EAEA,SAAS;;EAET,WAAW;;EAEX,UAAU;;EAEV"}

package/dist/radio/theme.js

@@ -1,9 +1,11 @@
-import { radioColors } from "./consts.js";
+import { selectionControlSizes } from "../selectionControl/theme.js";
+import { selectionControlColors } from "../selectionControl/consts.js";
 
 //#region src/radio/theme.ts
 const baseStyle = { control: {
-	color: radioColors.unchecked,
-	hoverColor: radioColors.hover
+	color: selectionControlColors.unchecked,
+	hoverColor: selectionControlColors.hover,
+	pressedColor: selectionControlColors.pressed
 } };
 const defaultProps = { size: "md" };
 const parts = [
@@ -11,29 +13,7 @@ const parts = [
 	"control",
 	"label"
 ];
-const sizes = {
-	sm: {
-		control: {
-			h: 16,
-			w: 16
-		},
-		label: { size: "sm" }
-	},
-	md: {
-		control: {
-			h: 20,
-			w: 20
-		},
-		label: { size: "md" }
-	},
-	lg: {
-		control: {
-			h: 24,
-			w: 24
-		},
-		label: { size: "lg" }
-	}
-};
+const sizes = selectionControlSizes;
 const variants = {};
 var theme_default = {
 	baseStyle,
@@ -45,5 +25,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/radio/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/radio/theme.ts"],"sourcesContent":["import { radioColors } from './consts'\n\nconst baseStyle = {\n  control: {\n    color: radioColors.unchecked,\n    hoverColor: radioColors.hover,\n  },\n}\n\nconst defaultProps = {\n  size: 'md',\n}\n\nconst parts = ['container', 'control', 'label']\n\nconst sizes = {\n  sm: {\n    control: {\n      h: 16,\n      w: 16,\n    },\n    label: {\n      size: 'sm',\n    },\n  },\n  md: {\n    control: {\n      h: 20,\n      w: 20,\n    },\n    label: {\n      size: 'md',\n    },\n  },\n  lg: {\n    control: {\n      h: 24,\n      w: 24,\n    },\n    label: {\n      size: 'lg',\n    },\n  },\n}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;;AAEA,MAAM,YAAY,EAChB,SAAS;CACP,OAAO,YAAY;CACnB,YAAY,YAAY;AAC1B,EACF;AAEA,MAAM,eAAe,EACnB,MAAM,KACR;AAEA,MAAM,QAAQ;CAAC;CAAa;CAAW;AAAO;AAE9C,MAAM,QAAQ;CACZ,IAAI;EACF,SAAS;GACP,GAAG;GACH,GAAG;EACL;EACA,OAAO,EACL,MAAM,KACR;CACF;CACA,IAAI;EACF,SAAS;GACP,GAAG;GACH,GAAG;EACL;EACA,OAAO,EACL,MAAM,KACR;CACF;CACA,IAAI;EACF,SAAS;GACP,GAAG;GACH,GAAG;EACL;EACA,OAAO,EACL,MAAM,KACR;CACF;AACF;AAEA,MAAM,WAAW,CAAC;AAElB,oBAAe;CACb;CACA;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"theme.js","names":["radioColors"],"sources":["../../src/radio/theme.ts"],"sourcesContent":["import { selectionControlSizes } from '../selectionControl/theme'\nimport { radioColors } from './consts'\n\nconst baseStyle = {\n  control: {\n    color: radioColors.unchecked,\n    hoverColor: radioColors.hover,\n    pressedColor: radioColors.pressed,\n  },\n}\n\nconst defaultProps = {\n  size: 'md',\n}\n\nconst parts = ['container', 'control', 'label']\n\n// Sizes/gaps shared with Checkbox — see `selectionControl/theme.ts`. `lg` kept as a deprecated\n// alias for `md` for backwards compatibility.\nconst sizes = selectionControlSizes\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;;;AAGA,MAAM,YAAY,EAChB,SAAS;CACP,OAAOA,uBAAY;CACnB,YAAYA,uBAAY;CACxB,cAAcA,uBAAY;AAC5B,EACF;AAEA,MAAM,eAAe,EACnB,MAAM,KACR;AAEA,MAAM,QAAQ;CAAC;CAAa;CAAW;AAAO;AAI9C,MAAM,QAAQ;AAEd,MAAM,WAAW,CAAC;AAElB,oBAAe;CACb;CACA;CACA;CACA;CACA;AACF"}

package/dist/range/consts.js

@@ -7,5 +7,5 @@ const rangeColors = {
 
 //#endregion
 export { rangeColors };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=consts.js.map

package/dist/range/range.js

@@ -135,5 +135,5 @@ Range.displayName = "Range";
 
 //#endregion
 export { Range, Range as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=range.js.map

package/dist/range/theme.js

@@ -43,5 +43,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/rating/rating.js

@@ -123,5 +123,5 @@ Rating.displayName = "Rating";
 
 //#endregion
 export { Rating, Rating as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=rating.js.map

package/dist/rating/theme.js

@@ -24,5 +24,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/select/context.js

@@ -5,5 +5,5 @@ const [SelectProvider, useSelectContext] = createContext({ isOptional: true });
 
 //#endregion
 export { SelectProvider, useSelectContext };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=context.js.map

package/dist/select/select.js

@@ -113,5 +113,5 @@ Select.displayName = "Select";
 
 //#endregion
 export { Select, Select as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=select.js.map

package/dist/select/selectButton.js

@@ -70,5 +70,5 @@ SelectButton.displayName = "SelectButton";
 
 //#endregion
 export { SelectButton, SelectButton as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=selectButton.js.map

package/dist/select/selectContent.js

@@ -23,5 +23,5 @@ SelectContent.displayName = "SelectContent";
 
 //#endregion
 export { SelectContent, SelectContent as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=selectContent.js.map

package/dist/select/selectGroup.js

@@ -25,5 +25,5 @@ SelectGroup.displayName = "SelectGroup";
 
 //#endregion
 export { SelectGroup, SelectGroup as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=selectGroup.js.map

package/dist/select/selectLabel.js

@@ -22,5 +22,5 @@ SelectLabel.displayName = "SelectLabel";
 
 //#endregion
 export { SelectLabel, SelectLabel as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=selectLabel.js.map

package/dist/select/selectOption.js

@@ -74,5 +74,5 @@ SelectOption.displayName = "SelectOption";
 
 //#endregion
 export { SelectOption, SelectOption as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=selectOption.js.map

package/dist/select/theme.js

@@ -74,5 +74,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/select/useSelect.js

@@ -30,5 +30,5 @@ function useSelect(props) {
 
 //#endregion
 export { useSelect as default, getOptionText };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=useSelect.js.map

package/dist/selectionControl/consts.js

@@ -0,0 +1,25 @@
+//#region src/selectionControl/consts.ts
+const selectionControlColors = {
+	readOnly: "var(--vui-color-sandstone-30)",
+	unchecked: "var(--vui-control-border-default)",
+	uncheckedHover: "var(--vui-control-border-hover)",
+	checked: "var(--vui-action-brand-solid)",
+	hover: "var(--vui-action-brand-solid-hover)",
+	pressed: "var(--vui-action-brand-solid-pressed)",
+	focus: "var(--vui-utility-focus)",
+	mark: "var(--vui-action-brand-solid-inverse)",
+	label: "var(--vui-control-label)",
+	helper: "var(--vui-control-helper)",
+	error: "var(--vui-action-danger-solid)"
+};
+const selectionControlDisabled = {
+	bg: "var(--vui-action-disabled-background)",
+	icon: "var(--vui-action-disabled-background)",
+	mark: "var(--vui-action-disabled-foreground)",
+	text: "var(--vui-color-sandstone-60)"
+};
+
+//#endregion
+export { selectionControlColors, selectionControlDisabled };
+globalThis.__vuiVersion__ = "5.4.0"
+//# sourceMappingURL=consts.js.map

package/dist/selectionControl/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/selectionControl/consts.ts"],"sourcesContent":["// Shared semantic tokens for selection controls (Checkbox, Radio) — single source of truth so both\n// stay visually consistent. Sourced from the VUI v5 Figma \"Checkbox\"/\"Radio\" specs, verified against\n// core/vuiProvider/consts.ts CSS variables.\nexport const selectionControlColors = {\n  // No semantic read-only token yet; same sandstone step as before, expressed as a CSS var.\n  readOnly: 'var(--vui-color-sandstone-30)',\n  unchecked: 'var(--vui-control-border-default)',\n  // Unchecked hover/pressed darken the border (no colour change); checked/indeterminate use the brand hover/pressed blue.\n  uncheckedHover: 'var(--vui-control-border-hover)',\n  checked: 'var(--vui-action-brand-solid)',\n  hover: 'var(--vui-action-brand-solid-hover)',\n  pressed: 'var(--vui-action-brand-solid-pressed)',\n  focus: 'var(--vui-utility-focus)',\n  // Colour of the mark drawn on top of a (checked/indeterminate) filled control, e.g. Checkbox's checkmark.\n  mark: 'var(--vui-action-brand-solid-inverse)',\n  label: 'var(--vui-control-label)',\n  helper: 'var(--vui-control-helper)',\n  error: 'var(--vui-action-danger-solid)',\n} as const\n\nexport const selectionControlDisabled = {\n  bg: 'var(--vui-action-disabled-background)',\n  // Figma's disabled control has no separate border colour — it matches the background exactly.\n  icon: 'var(--vui-action-disabled-background)',\n  // The checked/indeterminate mark needs to stand out from the (near-white) disabled background.\n  mark: 'var(--vui-action-disabled-foreground)',\n  // Matches Figma `--control/foreground/disabled` (#9c9a96) — the semantic `--vui-control-foreground-disabled`\n  // token has drifted (sandstone-20, far too dark), so the raw palette var is used instead.\n  text: 'var(--vui-color-sandstone-60)',\n} as const\n"],"mappings":";AAGA,MAAa,yBAAyB;CAEpC,UAAU;CACV,WAAW;CAEX,gBAAgB;CAChB,SAAS;CACT,OAAO;CACP,SAAS;CACT,OAAO;CAEP,MAAM;CACN,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAa,2BAA2B;CACtC,IAAI;CAEJ,MAAM;CAEN,MAAM;CAGN,MAAM;AACR"}

package/dist/selectionControl/selectionControl.js

@@ -0,0 +1,123 @@
+import { selectionControlColors, selectionControlDisabled } from "./consts.js";
+import styled from "../core/styled.js";
+import { useEffect, useId } from "react";
+
+//#region src/selectionControl/selectionControl.tsx
+const SelectionControlInput = styled.input`
+  cursor: inherit;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+`;
+/** Warns once per size change when the deprecated `lg` size alias is used. */
+function useDeprecatedLgSize(size, componentName) {
+	useEffect(() => {
+		if (size === "lg") console.warn(`[${componentName}] size='lg' is deprecated and matches 'md'. Use size='md' instead.`);
+	}, [size, componentName]);
+}
+/** Resolves the `id`/description pairing shared by Checkbox and Radio's `helpText`/`errorText` sockets. */
+function useSelectionControlDescription(idProp, helpText, errorText, isActive) {
+	const generatedId = useId();
+	const id = idProp ?? generatedId;
+	const effectiveErrorText = isActive ? void 0 : errorText;
+	const description = effectiveErrorText ?? helpText;
+	return {
+		description,
+		descriptionId: description ? `${id}-description` : void 0,
+		errorText: effectiveErrorText,
+		id
+	};
+}
+/** Priority for a selection control's border/fill colour: disabled, then error state, then checked/readOnly, then default. */
+function resolveControlColor(args) {
+	const { checkedColor, controlColor, disabled, disabledColor, errorColor, errorText, isActive, readOnly, readOnlyColor } = args;
+	if (disabled) return disabledColor;
+	if (errorText) return errorColor;
+	if (isActive) return readOnly ? readOnlyColor : checkedColor;
+	return controlColor;
+}
+/** Priority for a selection control's label colour: disabled greys it out, otherwise the default label colour. */
+function resolveLabelColor(args) {
+	const { disabled, disabledColor, labelColor } = args;
+	return disabled ? disabledColor : labelColor;
+}
+/** Priority for a selection control's helper/error description colour: disabled, then error state, then helper. */
+function resolveDescriptionColor(args) {
+	const { disabled, disabledColor, errorColor, errorText, helperColor } = args;
+	if (disabled) return disabledColor;
+	if (errorText) return errorColor;
+	return helperColor;
+}
+/**
+* Error state always wins (the theme's baseStyle bakes in a non-undefined hover/pressed default, so it can't
+* be treated as an opt-in override); otherwise explicit wins, then the active/inactive state colour.
+*/
+function resolveStateColor(args) {
+	const { activeColor, errorColor, errorText, explicit, inactiveColor = activeColor, isActive } = args;
+	if (errorText && errorColor) return errorColor;
+	return explicit ?? (isActive ? activeColor : inactiveColor);
+}
+/**
+* Bundles every colour computation shared by Checkbox and Radio — control border/fill, hover/pressed state,
+* label and helper/error description — so both stay in lockstep with a single disabled/error/checked priority.
+*/
+function useSelectionControlColors(args) {
+	const { controlColor, differentiateUnchecked, disabled, errorText, hoverColor, isActive, pressedColor, readOnly } = args;
+	const inactiveStateColor = differentiateUnchecked ? selectionControlColors.uncheckedHover : void 0;
+	const color = resolveControlColor({
+		checkedColor: selectionControlColors.checked,
+		controlColor,
+		disabled,
+		disabledColor: selectionControlDisabled.icon,
+		errorColor: selectionControlColors.error,
+		errorText,
+		isActive,
+		readOnly,
+		readOnlyColor: selectionControlColors.readOnly
+	});
+	const controlHoverColor = resolveStateColor({
+		activeColor: selectionControlColors.hover,
+		errorColor: selectionControlColors.error,
+		errorText,
+		explicit: hoverColor,
+		inactiveColor: inactiveStateColor,
+		isActive
+	});
+	const controlPressedColor = resolveStateColor({
+		activeColor: selectionControlColors.pressed,
+		errorColor: selectionControlColors.error,
+		errorText,
+		explicit: pressedColor,
+		inactiveColor: inactiveStateColor,
+		isActive
+	});
+	const labelColor = resolveLabelColor({
+		disabled,
+		disabledColor: selectionControlDisabled.text,
+		labelColor: selectionControlColors.label
+	});
+	return {
+		color,
+		controlHoverColor,
+		controlPressedColor,
+		descriptionColor: resolveDescriptionColor({
+			disabled,
+			disabledColor: selectionControlDisabled.text,
+			errorColor: selectionControlColors.error,
+			errorText,
+			helperColor: selectionControlColors.helper
+		}),
+		labelColor
+	};
+}
+
+//#endregion
+export { SelectionControlInput, useDeprecatedLgSize, useSelectionControlColors, useSelectionControlDescription };
+globalThis.__vuiVersion__ = "5.4.0"
+//# sourceMappingURL=selectionControl.js.map

package/dist/selectionControl/selectionControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.js","names":["colors","disabledColors"],"sources":["../../src/selectionControl/selectionControl.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { useEffect, useId } from 'react'\n\nimport { styled } from '../core'\nimport { selectionControlColors as colors, selectionControlDisabled as disabledColors } from './consts'\n\n// Visually hidden native input stacked over the control icon — identical positioning for Checkbox and Radio.\nexport const SelectionControlInput = styled.input`\n  cursor: inherit;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n`\n\n/** Warns once per size change when the deprecated `lg` size alias is used. */\nexport function useDeprecatedLgSize(size: string | undefined, componentName: string): void {\n  useEffect(() => {\n    if (size === 'lg') {\n      console.warn(`[${componentName}] size='lg' is deprecated and matches 'md'. Use size='md' instead.`)\n    }\n  }, [size, componentName])\n}\n\n/** Resolves the `id`/description pairing shared by Checkbox and Radio's `helpText`/`errorText` sockets. */\nexport function useSelectionControlDescription(\n  idProp: string | undefined,\n  helpText?: ReactNode,\n  errorText?: ReactNode,\n  isActive?: boolean,\n) {\n  const generatedId = useId()\n  const id = idProp ?? generatedId\n  // Checking/selecting the control clears its error state — errorText only applies while unselected.\n  const effectiveErrorText = isActive ? undefined : errorText\n  const description = effectiveErrorText ?? helpText\n  const descriptionId = description ? `${id}-description` : undefined\n  return { description, descriptionId, errorText: effectiveErrorText, id }\n}\n\n/** Priority for a selection control's border/fill colour: disabled, then error state, then checked/readOnly, then default. */\nfunction resolveControlColor(args: {\n  checkedColor: string\n  controlColor: string\n  disabled?: boolean\n  disabledColor: string\n  errorColor: string\n  errorText?: ReactNode\n  isActive: boolean\n  readOnly?: boolean\n  readOnlyColor: string\n}): string {\n  const {\n    checkedColor,\n    controlColor,\n    disabled,\n    disabledColor,\n    errorColor,\n    errorText,\n    isActive,\n    readOnly,\n    readOnlyColor,\n  } = args\n  if (disabled) return disabledColor\n  if (errorText) return errorColor\n  if (isActive) return readOnly ? readOnlyColor : checkedColor\n  return controlColor\n}\n\n/** Priority for a selection control's label colour: disabled greys it out, otherwise the default label colour. */\nfunction resolveLabelColor(args: { disabled?: boolean; disabledColor: string; labelColor: string }): string {\n  const { disabled, disabledColor, labelColor } = args\n  return disabled ? disabledColor : labelColor\n}\n\n/** Priority for a selection control's helper/error description colour: disabled, then error state, then helper. */\nfunction resolveDescriptionColor(args: {\n  disabled?: boolean\n  disabledColor: string\n  errorColor: string\n  errorText?: ReactNode\n  helperColor: string\n}): string {\n  const { disabled, disabledColor, errorColor, errorText, helperColor } = args\n  if (disabled) return disabledColor\n  if (errorText) return errorColor\n  return helperColor\n}\n\n/**\n * Error state always wins (the theme's baseStyle bakes in a non-undefined hover/pressed default, so it can't\n * be treated as an opt-in override); otherwise explicit wins, then the active/inactive state colour.\n */\nfunction resolveStateColor(args: {\n  activeColor: string\n  errorColor?: string\n  errorText?: ReactNode\n  explicit?: string\n  inactiveColor?: string\n  isActive: boolean\n}): string {\n  const { activeColor, errorColor, errorText, explicit, inactiveColor = activeColor, isActive } = args\n  if (errorText && errorColor) return errorColor\n  return explicit ?? (isActive ? activeColor : inactiveColor)\n}\n\n/**\n * Bundles every colour computation shared by Checkbox and Radio — control border/fill, hover/pressed state,\n * label and helper/error description — so both stay in lockstep with a single disabled/error/checked priority.\n */\nexport function useSelectionControlColors(args: {\n  controlColor: string\n  // Checkbox darkens the border on hover/pressed only while unchecked (Radio always uses the same hover/pressed colour).\n  differentiateUnchecked?: boolean\n  disabled?: boolean\n  errorText?: ReactNode\n  hoverColor?: string\n  isActive: boolean\n  pressedColor?: string\n  readOnly?: boolean\n}): {\n  color: string\n  controlHoverColor: string\n  controlPressedColor: string\n  descriptionColor: string\n  labelColor: string\n} {\n  const { controlColor, differentiateUnchecked, disabled, errorText, hoverColor, isActive, pressedColor, readOnly } =\n    args\n  const inactiveStateColor = differentiateUnchecked ? colors.uncheckedHover : undefined\n\n  const color = resolveControlColor({\n    checkedColor: colors.checked,\n    controlColor,\n    disabled,\n    disabledColor: disabledColors.icon,\n    errorColor: colors.error,\n    errorText,\n    isActive,\n    readOnly,\n    readOnlyColor: colors.readOnly,\n  })\n\n  const controlHoverColor = resolveStateColor({\n    activeColor: colors.hover,\n    errorColor: colors.error,\n    errorText,\n    explicit: hoverColor,\n    inactiveColor: inactiveStateColor,\n    isActive,\n  })\n\n  const controlPressedColor = resolveStateColor({\n    activeColor: colors.pressed,\n    errorColor: colors.error,\n    errorText,\n    explicit: pressedColor,\n    inactiveColor: inactiveStateColor,\n    isActive,\n  })\n\n  const labelColor = resolveLabelColor({ disabled, disabledColor: disabledColors.text, labelColor: colors.label })\n\n  const descriptionColor = resolveDescriptionColor({\n    disabled,\n    disabledColor: disabledColors.text,\n    errorColor: colors.error,\n    errorText,\n    helperColor: colors.helper,\n  })\n\n  return { color, controlHoverColor, controlPressedColor, descriptionColor, labelColor }\n}\n"],"mappings":";;;;;AAQA,MAAa,wBAAwB,OAAO,KAAK;;;;;;;;;;;;;AAcjD,SAAgB,oBAAoB,MAA0B,eAA6B;CACzF,gBAAgB;EACd,IAAI,SAAS,MACX,QAAQ,KAAK,IAAI,cAAc,mEAAmE;CAEtG,GAAG,CAAC,MAAM,aAAa,CAAC;AAC1B;;AAGA,SAAgB,+BACd,QACA,UACA,WACA,UACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,UAAU;CAErB,MAAM,qBAAqB,WAAW,SAAY;CAClD,MAAM,cAAc,sBAAsB;CAE1C,OAAO;EAAE;EAAa,eADA,cAAc,GAAG,GAAG,gBAAgB;EACrB,WAAW;EAAoB;CAAG;AACzE;;AAGA,SAAS,oBAAoB,MAUlB;CACT,MAAM,EACJ,cACA,cACA,UACA,eACA,YACA,WACA,UACA,UACA,kBACE;CACJ,IAAI,UAAU,OAAO;CACrB,IAAI,WAAW,OAAO;CACtB,IAAI,UAAU,OAAO,WAAW,gBAAgB;CAChD,OAAO;AACT;;AAGA,SAAS,kBAAkB,MAAiF;CAC1G,MAAM,EAAE,UAAU,eAAe,eAAe;CAChD,OAAO,WAAW,gBAAgB;AACpC;;AAGA,SAAS,wBAAwB,MAMtB;CACT,MAAM,EAAE,UAAU,eAAe,YAAY,WAAW,gBAAgB;CACxE,IAAI,UAAU,OAAO;CACrB,IAAI,WAAW,OAAO;CACtB,OAAO;AACT;;;;;AAMA,SAAS,kBAAkB,MAOhB;CACT,MAAM,EAAE,aAAa,YAAY,WAAW,UAAU,gBAAgB,aAAa,aAAa;CAChG,IAAI,aAAa,YAAY,OAAO;CACpC,OAAO,aAAa,WAAW,cAAc;AAC/C;;;;;AAMA,SAAgB,0BAA0B,MAgBxC;CACA,MAAM,EAAE,cAAc,wBAAwB,UAAU,WAAW,YAAY,UAAU,cAAc,aACrG;CACF,MAAM,qBAAqB,yBAAyBA,uBAAO,iBAAiB;CAE5E,MAAM,QAAQ,oBAAoB;EAChC,cAAcA,uBAAO;EACrB;EACA;EACA,eAAeC,yBAAe;EAC9B,YAAYD,uBAAO;EACnB;EACA;EACA;EACA,eAAeA,uBAAO;CACxB,CAAC;CAED,MAAM,oBAAoB,kBAAkB;EAC1C,aAAaA,uBAAO;EACpB,YAAYA,uBAAO;EACnB;EACA,UAAU;EACV,eAAe;EACf;CACF,CAAC;CAED,MAAM,sBAAsB,kBAAkB;EAC5C,aAAaA,uBAAO;EACpB,YAAYA,uBAAO;EACnB;EACA,UAAU;EACV,eAAe;EACf;CACF,CAAC;CAED,MAAM,aAAa,kBAAkB;EAAE;EAAU,eAAeC,yBAAe;EAAM,YAAYD,uBAAO;CAAM,CAAC;CAU/G,OAAO;EAAE;EAAO;EAAmB;EAAqB,kBAR/B,wBAAwB;GAC/C;GACA,eAAeC,yBAAe;GAC9B,YAAYD,uBAAO;GACnB;GACA,aAAaA,uBAAO;EACtB,CAEuE;EAAG;CAAW;AACvF"}

package/dist/selectionControl/theme.js

@@ -0,0 +1,55 @@
+//#region src/selectionControl/theme.ts
+const selectionControlSizes = {
+	xs: {
+		control: {
+			h: 16,
+			w: 16
+		},
+		label: { size: "xs" }
+	},
+	sm: {
+		control: {
+			h: 20,
+			w: 20
+		},
+		label: { size: "sm" }
+	},
+	md: {
+		control: {
+			h: 24,
+			w: 24
+		},
+		label: { size: "md" }
+	},
+	/** @deprecated Use `md` instead — `lg` is kept as an alias for backwards compatibility. */
+	lg: {
+		control: {
+			h: 24,
+			w: 24
+		},
+		label: { size: "md" }
+	}
+};
+const selectionControlStackGap = {
+	lg: "12px",
+	md: "12px",
+	sm: "12px",
+	xs: "8px"
+};
+const selectionControlGroupGap = {
+	lg: "12px",
+	md: "12px",
+	sm: "12px",
+	xs: "8px"
+};
+const selectionControlLabelSize = {
+	lg: "md",
+	md: "md",
+	sm: "sm",
+	xs: "xs"
+};
+
+//#endregion
+export { selectionControlGroupGap, selectionControlLabelSize, selectionControlSizes, selectionControlStackGap };
+globalThis.__vuiVersion__ = "5.4.0"
+//# sourceMappingURL=theme.js.map

package/dist/selectionControl/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/selectionControl/theme.ts"],"sourcesContent":["// Shared per-size dimensions/gaps for selection controls (Checkbox, Radio), matching the VUI v5\n// Figma spec: control xs=16/sm=20/md=24, group gaps xs=8px/sm=12px/md=12px. `lg` is kept as a\n// deprecated alias for `md` on both components (see `useDeprecatedLgSize`).\nexport const selectionControlSizes = {\n  xs: { control: { h: 16, w: 16 }, label: { size: 'xs' } },\n  sm: { control: { h: 20, w: 20 }, label: { size: 'sm' } },\n  md: { control: { h: 24, w: 24 }, label: { size: 'md' } },\n  /** @deprecated Use `md` instead — `lg` is kept as an alias for backwards compatibility. */\n  lg: { control: { h: 24, w: 24 }, label: { size: 'md' } },\n} as const\n\n// Gap between individual controls in a group stack, and between the group label/help text and the stack.\nexport const selectionControlStackGap: Record<string, string> = { lg: '12px', md: '12px', sm: '12px', xs: '8px' }\nexport const selectionControlGroupGap: Record<string, string> = { lg: '12px', md: '12px', sm: '12px', xs: '8px' }\nexport const selectionControlLabelSize: Record<string, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n}\n"],"mappings":";AAGA,MAAa,wBAAwB;CACnC,IAAI;EAAE,SAAS;GAAE,GAAG;GAAI,GAAG;EAAG;EAAG,OAAO,EAAE,MAAM,KAAK;CAAE;CACvD,IAAI;EAAE,SAAS;GAAE,GAAG;GAAI,GAAG;EAAG;EAAG,OAAO,EAAE,MAAM,KAAK;CAAE;CACvD,IAAI;EAAE,SAAS;GAAE,GAAG;GAAI,GAAG;EAAG;EAAG,OAAO,EAAE,MAAM,KAAK;CAAE;;CAEvD,IAAI;EAAE,SAAS;GAAE,GAAG;GAAI,GAAG;EAAG;EAAG,OAAO,EAAE,MAAM,KAAK;CAAE;AACzD;AAGA,MAAa,2BAAmD;CAAE,IAAI;CAAQ,IAAI;CAAQ,IAAI;CAAQ,IAAI;AAAM;AAChH,MAAa,2BAAmD;CAAE,IAAI;CAAQ,IAAI;CAAQ,IAAI;CAAQ,IAAI;AAAM;AAChH,MAAa,4BAAgE;CAC3E,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN"}

package/dist/sidemenu/context.js

@@ -5,5 +5,5 @@ const [SidemenuProvider, useSidemenuContext] = createContext({ isOptional: true
 
 //#endregion
 export { SidemenuProvider, useSidemenuContext };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=context.js.map

package/dist/sidemenu/sidemenu.js

@@ -94,5 +94,5 @@ Sidemenu.displayName = "Sidemenu";
 
 //#endregion
 export { Sidemenu, Sidemenu as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=sidemenu.js.map

package/dist/sidemenu/sidemenuItem.js

@@ -112,5 +112,5 @@ SidemenuItem.displayName = "SidemenuItem";
 
 //#endregion
 export { SidemenuItem, SidemenuItem as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=sidemenuItem.js.map

package/dist/sidemenu/sidemenuTop.js

@@ -30,5 +30,5 @@ SidemenuTop.displayName = "SidemenuTop";
 
 //#endregion
 export { SidemenuTop, SidemenuTop as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=sidemenuTop.js.map

package/dist/sidemenu/theme.js

@@ -41,5 +41,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/sidemenu/useSidemenuItem.js

@@ -22,5 +22,5 @@ const useSidemenuItem = (isExpanded) => {
 
 //#endregion
 export { useSidemenuItem as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=useSidemenuItem.js.map

package/dist/sidemenuV2/SidemenuItemContent.js

@@ -63,5 +63,5 @@ SidemenuItemContent.displayName = "SidemenuItemContent";
 
 //#endregion
 export { SidemenuItemContent as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=SidemenuItemContent.js.map

package/dist/sidemenuV2/context.js

@@ -107,5 +107,5 @@ const SidemenuStateProvider = ({ children, isExpandedInitial = true, onExpandedC
 
 //#endregion
 export { SidemenuProvider, SidemenuStateProvider, useSidemenuContext };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=context.js.map