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

package/dist/radio/radio.js

@@ -6,7 +6,7 @@ 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 { SelectionControlInput, resolveControlColor, resolveStateColor, useDeprecatedLgSize, useSelectionControlDescription } from "../selectionControl/selectionControl.js";
+import { SelectionControlInput, useDeprecatedLgSize, useSelectionControlColors, useSelectionControlDescription } from "../selectionControl/selectionControl.js";
 import { useRadioGroupContext } from "./context.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -91,20 +91,18 @@ const Radio = vui((props, ref) => {
 	const styles = useStyleConfig("Radio", mergedProps);
 	const { color: controlColor, hoverColor, pressedColor, ...controlStyles } = styles.control;
 	const size = mergedProps.size ?? "md";
-	const { description, descriptionId, id } = useSelectionControlDescription(idProp, helpText, errorText);
+	const { description, descriptionId, errorText: effectiveErrorText, id } = useSelectionControlDescription(idProp, helpText, errorText, !!isChecked);
 	const hasJsxChildren = !!children;
 	const controlMr = children || label ? 1 : 0;
-	const color = resolveControlColor({
-		checkedColor: selectionControlColors.checked,
+	const { color, controlHoverColor, controlPressedColor, descriptionColor, labelColor } = useSelectionControlColors({
 		controlColor,
-		errorColor: selectionControlColors.error,
-		errorText,
+		disabled,
+		errorText: effectiveErrorText,
+		hoverColor,
 		isActive: !!isChecked,
-		readOnly,
-		readOnlyColor: selectionControlColors.readOnly
+		pressedColor,
+		readOnly
 	});
-	const controlHoverColor = resolveStateColor(hoverColor, false, selectionControlColors.hover);
-	const controlPressedColor = resolveStateColor(pressedColor, false, selectionControlColors.pressed);
 	useDeprecatedLgSize(size, "Radio");
 	useEffect(() => {
 		if (groupIsChecked !== void 0) setIsChecked(groupIsChecked === value);
@@ -139,7 +137,7 @@ const Radio = vui((props, ref) => {
 			...controlStyles,
 			children: [/* @__PURE__ */ jsx(SelectionControlInput, {
 				"aria-describedby": descriptionId,
-				"aria-invalid": !!errorText || void 0,
+				"aria-invalid": !!effectiveErrorText || void 0,
 				className: "vui-radioInput",
 				onChange: handleOnChange,
 				ref: inputRef,
@@ -161,13 +159,13 @@ const Radio = vui((props, ref) => {
 			column: true,
 			children: [/* @__PURE__ */ jsx(T, {
 				className: "vui-radioLabel",
-				color: disabled ? selectionControlDisabled.text : selectionControlColors.label,
+				color: labelColor,
 				variant: "caption",
 				...styles.label,
 				children: label
 			}), description && /* @__PURE__ */ jsx(T, {
 				className: "vui-radioDescription",
-				color: errorText ? selectionControlColors.error : selectionControlColors.helper,
+				color: descriptionColor,
 				id: descriptionId,
 				mt: "2px",
 				size: "sm",
@@ -180,5 +178,5 @@ Radio.displayName = "Radio";
 
 //#endregion
 export { Radio, Radio as default, RadioBase };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=radio.js.map

package/dist/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":["radioColors","disabledColors"],"sources":["../../src/radio/radio.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { useEffect, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { RadioProps, RadioStyleProps } from './radio.types'\n\nimport Box from '../box'\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'\nimport {\n  resolveControlColor,\n  resolveStateColor,\n  SelectionControlInput,\n  useDeprecatedLgSize,\n  useSelectionControlDescription,\n} from '../selectionControl/selectionControl'\nimport T from '../t'\nimport { cs, filterUndefined } from '../utils'\nimport { disabled as disabledColors, radioColors } from './consts'\nimport { useRadioGroupContext } from './context'\n\n// Figma \"VUI v5 (modernized)\" Radio spec: inner filled dot shown when checked, roughly half the ring's\n// diameter (xs=16 -> 8px, sm=20 -> 10px, md/lg=24 -> 12px) — matches Checkbox's mark-inset proportions.\nconst dotSize: Record<string, string> = { lg: '12px', md: '12px', sm: '10px', xs: '8px' }\n// Offset decreases as control size grows, so JSX children stay visually centered with the first text line.\nconst jsxChildrenMt: Record<string, string> = { lg: '0px', md: '0px', sm: '2px', xs: '3px' }\n// Centers the ring on the label's first line: (caption line-height 150% of font-size - control ring height) / 2.\nconst labelMt: Record<string, string> = { lg: '0px', md: '0px', sm: '0.5px', xs: '1px' }\n\nconst RadioControl = styled.spanBox`\n  align-items: center;\n  border: 1px solid currentColor;\n  border-radius: 50%;\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n  position: relative;\n  transition-duration: fast;\n`\n\n// Plain CSS dot for the checked state — no icon asset involved. Inherits `color` from `RadioControl`,\n// so it automatically matches the ring's current colour (checked/hover/pressed/disabled).\nconst RadioDot = styled.spanBox`\n  background-color: currentColor;\n  border-radius: 50%;\n  flex-shrink: 0;\n`\n\nexport const RadioBase = styled.labelBox<RadioStyleProps>`\n  cursor: pointer;\n  display: inline-flex;\n  width: fit-content;\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']):hover .vui-radioControl {\n    color: ${p => th.color(p.controlHoverColor)};\n  }\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']):active .vui-radioControl {\n    color: ${p => th.color(p.controlPressedColor)};\n  }\n\n  &[aria-readonly='true'] {\n    cursor: auto;\n  }\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']) .vui-radioControl:focus-within {\n    color: ${radioColors.focus};\n  }\n\n  &[aria-disabled='true'] {\n    color: ${disabledColors.text};\n    cursor: not-allowed;\n\n    .vui-radioControl {\n      color: ${disabledColors.icon};\n    }\n  }\n`\n\n/**\n * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.\n * The ring and the inner dot shown when checked are both plain CSS — no icon assets involved.\n */\nexport const Radio = vui<'span', RadioProps>((props, ref) => {\n  const {\n    defaultValue: groupDefaultValue,\n    isChecked: groupIsChecked,\n    onChange: groupOnChange,\n    value: groupValue,\n    ...radioGroupProps\n  } = useRadioGroupContext() ?? {}\n  const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined\n\n  const mergedProps = { ...radioGroupProps, ...props }\n  const {\n    checked = groupValue !== undefined ? props.value === groupValue : undefined,\n    children,\n    className,\n    defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined,\n    disabled,\n    errorText,\n    readOnly,\n    helpText,\n    id: idProp,\n    inputProps,\n    inputRef,\n    label,\n    name,\n    onChange,\n    required,\n    value,\n    ...rest\n  } = omitThemingProps(mergedProps)\n\n  const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked)\n  const styles = useStyleConfig('Radio', mergedProps)\n  const { color: controlColor, hoverColor, pressedColor, ...controlStyles } = styles.control\n  const size = mergedProps.size ?? 'md'\n  const { description, descriptionId, id } = useSelectionControlDescription(idProp, helpText, errorText)\n\n  const hasJsxChildren = !!children\n  const controlMr = children || label ? 1 : 0\n  const color = resolveControlColor({\n    checkedColor: radioColors.checked,\n    controlColor,\n    errorColor: radioColors.error,\n    errorText,\n    isActive: !!isChecked,\n    readOnly,\n    readOnlyColor: radioColors.readOnly,\n  })\n  const controlHoverColor = resolveStateColor(hoverColor, false, radioColors.hover)\n  const controlPressedColor = resolveStateColor(pressedColor, false, radioColors.pressed)\n\n  useDeprecatedLgSize(size, 'Radio')\n\n  useEffect(() => {\n    if (groupIsChecked !== undefined) setIsChecked(groupIsChecked === value)\n    else if (checked !== undefined) setIsChecked(checked)\n  }, [checked, groupIsChecked])\n\n  function handleOnChange(e: ChangeEvent) {\n    if (readOnly) return\n    // Uncontrolled and outside a group (or group hasn't settled on a value yet): manage checked state locally.\n    if (checked === undefined && groupIsChecked === undefined) setIsChecked(e.target.checked)\n    groupOnChange?.(e)\n    onChange?.(e)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-readonly': readOnly,\n  })\n\n  return (\n    <RadioBase\n      alignItems={label || hasJsxChildren ? 'flex-start' : 'center'}\n      className={cs('vui-radio', className)}\n      controlHoverColor={controlHoverColor}\n      controlPressedColor={controlPressedColor}\n      ref={ref}\n      {...styles.container}\n      {...aliasedProps}\n      {...rest}\n    >\n      <RadioControl\n        bg=\"white\"\n        className=\"vui-radioControl\"\n        color={color}\n        focusWithinRing={3}\n        mr={controlMr}\n        mt={\n          hasJsxChildren ? (jsxChildrenMt[size] ?? jsxChildrenMt.md) : label ? (labelMt[size] ?? labelMt.md) : undefined\n        }\n        {...controlStyles}\n      >\n        <SelectionControlInput\n          aria-describedby={descriptionId}\n          aria-invalid={!!errorText || undefined}\n          className=\"vui-radioInput\"\n          onChange={handleOnChange}\n          ref={inputRef}\n          type=\"radio\"\n          {...{ checked, defaultChecked, disabled, id, name, required, value }}\n          {...inputProps}\n        />\n        {isChecked && (\n          <RadioDot className=\"vui-radioDot\" h={dotSize[size] ?? dotSize.md} w={dotSize[size] ?? dotSize.md} />\n        )}\n      </RadioControl>\n\n      {children ??\n        (label && (\n          <Box column>\n            <T\n              className=\"vui-radioLabel\"\n              color={disabled ? disabledColors.text : radioColors.label}\n              variant=\"caption\"\n              {...styles.label}\n            >\n              {label}\n            </T>\n            {description && (\n              <T\n                className=\"vui-radioDescription\"\n                color={errorText ? radioColors.error : radioColors.helper}\n                id={descriptionId}\n                mt=\"2px\"\n                size=\"sm\"\n              >\n                {description as ReactNode}\n              </T>\n            )}\n          </Box>\n        ))}\n    </RadioBase>\n  )\n})\n\nRadio.displayName = 'Radio'\n\nexport default Radio\n"],"mappings":"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"}
+{"version":3,"file":"radio.js","names":["radioColors","disabledColors"],"sources":["../../src/radio/radio.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { useEffect, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { RadioProps, RadioStyleProps } from './radio.types'\n\nimport Box from '../box'\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'\nimport {\n  SelectionControlInput,\n  useDeprecatedLgSize,\n  useSelectionControlColors,\n  useSelectionControlDescription,\n} from '../selectionControl/selectionControl'\nimport T from '../t'\nimport { cs, filterUndefined } from '../utils'\nimport { disabled as disabledColors, radioColors } from './consts'\nimport { useRadioGroupContext } from './context'\n\n// Figma \"VUI v5 (modernized)\" Radio spec: inner filled dot shown when checked, roughly half the ring's\n// diameter (xs=16 -> 8px, sm=20 -> 10px, md/lg=24 -> 12px) — matches Checkbox's mark-inset proportions.\nconst dotSize: Record<string, string> = { lg: '12px', md: '12px', sm: '10px', xs: '8px' }\n// Offset decreases as control size grows, so JSX children stay visually centered with the first text line.\nconst jsxChildrenMt: Record<string, string> = { lg: '0px', md: '0px', sm: '2px', xs: '3px' }\n// Centers the ring on the label's first line: (caption line-height 150% of font-size - control ring height) / 2.\nconst labelMt: Record<string, string> = { lg: '0px', md: '0px', sm: '0.5px', xs: '1px' }\n\nconst RadioControl = styled.spanBox`\n  align-items: center;\n  border: 1px solid currentColor;\n  border-radius: 50%;\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n  position: relative;\n  transition-duration: fast;\n`\n\n// Plain CSS dot for the checked state — no icon asset involved. Inherits `color` from `RadioControl`,\n// so it automatically matches the ring's current colour (checked/hover/pressed/disabled).\nconst RadioDot = styled.spanBox`\n  background-color: currentColor;\n  border-radius: 50%;\n  flex-shrink: 0;\n`\n\nexport const RadioBase = styled.labelBox<RadioStyleProps>`\n  cursor: pointer;\n  display: inline-flex;\n  width: fit-content;\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']):hover .vui-radioControl {\n    color: ${p => th.color(p.controlHoverColor)};\n  }\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']):active .vui-radioControl {\n    color: ${p => th.color(p.controlPressedColor)};\n  }\n\n  &[aria-readonly='true'] {\n    cursor: auto;\n  }\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']) .vui-radioControl:focus-within {\n    color: ${radioColors.focus};\n  }\n\n  &[aria-disabled='true'] {\n    color: ${disabledColors.text};\n    cursor: not-allowed;\n\n    .vui-radioControl {\n      color: ${disabledColors.icon};\n    }\n  }\n`\n\n/**\n * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.\n * The ring and the inner dot shown when checked are both plain CSS — no icon assets involved.\n */\nexport const Radio = vui<'span', RadioProps>((props, ref) => {\n  const {\n    defaultValue: groupDefaultValue,\n    isChecked: groupIsChecked,\n    onChange: groupOnChange,\n    value: groupValue,\n    ...radioGroupProps\n  } = useRadioGroupContext() ?? {}\n  const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined\n\n  const mergedProps = { ...radioGroupProps, ...props }\n  const {\n    checked = groupValue !== undefined ? props.value === groupValue : undefined,\n    children,\n    className,\n    defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined,\n    disabled,\n    errorText,\n    readOnly,\n    helpText,\n    id: idProp,\n    inputProps,\n    inputRef,\n    label,\n    name,\n    onChange,\n    required,\n    value,\n    ...rest\n  } = omitThemingProps(mergedProps)\n\n  const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked)\n  const styles = useStyleConfig('Radio', mergedProps)\n  const { color: controlColor, hoverColor, pressedColor, ...controlStyles } = styles.control\n  const size = mergedProps.size ?? 'md'\n  const {\n    description,\n    descriptionId,\n    errorText: effectiveErrorText,\n    id,\n  } = useSelectionControlDescription(idProp, helpText, errorText, !!isChecked)\n\n  const hasJsxChildren = !!children\n  const controlMr = children || label ? 1 : 0\n  const { color, controlHoverColor, controlPressedColor, descriptionColor, labelColor } = useSelectionControlColors({\n    controlColor,\n    disabled,\n    errorText: effectiveErrorText,\n    hoverColor,\n    isActive: !!isChecked,\n    pressedColor,\n    readOnly,\n  })\n\n  useDeprecatedLgSize(size, 'Radio')\n\n  useEffect(() => {\n    if (groupIsChecked !== undefined) setIsChecked(groupIsChecked === value)\n    else if (checked !== undefined) setIsChecked(checked)\n  }, [checked, groupIsChecked])\n\n  function handleOnChange(e: ChangeEvent) {\n    if (readOnly) return\n    // Uncontrolled and outside a group (or group hasn't settled on a value yet): manage checked state locally.\n    if (checked === undefined && groupIsChecked === undefined) setIsChecked(e.target.checked)\n    groupOnChange?.(e)\n    onChange?.(e)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-readonly': readOnly,\n  })\n\n  return (\n    <RadioBase\n      alignItems={label || hasJsxChildren ? 'flex-start' : 'center'}\n      className={cs('vui-radio', className)}\n      controlHoverColor={controlHoverColor}\n      controlPressedColor={controlPressedColor}\n      ref={ref}\n      {...styles.container}\n      {...aliasedProps}\n      {...rest}\n    >\n      <RadioControl\n        bg=\"white\"\n        className=\"vui-radioControl\"\n        color={color}\n        focusWithinRing={3}\n        mr={controlMr}\n        mt={\n          hasJsxChildren ? (jsxChildrenMt[size] ?? jsxChildrenMt.md) : label ? (labelMt[size] ?? labelMt.md) : undefined\n        }\n        {...controlStyles}\n      >\n        <SelectionControlInput\n          aria-describedby={descriptionId}\n          aria-invalid={!!effectiveErrorText || undefined}\n          className=\"vui-radioInput\"\n          onChange={handleOnChange}\n          ref={inputRef}\n          type=\"radio\"\n          {...{ checked, defaultChecked, disabled, id, name, required, value }}\n          {...inputProps}\n        />\n        {isChecked && (\n          <RadioDot className=\"vui-radioDot\" h={dotSize[size] ?? dotSize.md} w={dotSize[size] ?? dotSize.md} />\n        )}\n      </RadioControl>\n\n      {children ??\n        (label && (\n          <Box column>\n            <T className=\"vui-radioLabel\" color={labelColor} variant=\"caption\" {...styles.label}>\n              {label}\n            </T>\n            {description && (\n              <T className=\"vui-radioDescription\" color={descriptionColor} id={descriptionId} mt=\"2px\" size=\"sm\">\n                {description as ReactNode}\n              </T>\n            )}\n          </Box>\n        ))}\n    </RadioBase>\n  )\n})\n\nRadio.displayName = 'Radio'\n\nexport default Radio\n"],"mappings":"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"}

package/dist/radio/radioGroup.js

@@ -110,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/theme.js

@@ -25,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/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

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

package/dist/selectionControl/selectionControl.js

@@ -1,3 +1,4 @@
+import { selectionControlColors, selectionControlDisabled } from "./consts.js";
 import styled from "../core/styled.js";
 import { useEffect, useId } from "react";
 
@@ -21,29 +22,102 @@ function useDeprecatedLgSize(size, componentName) {
 	}, [size, componentName]);
 }
 /** Resolves the `id`/description pairing shared by Checkbox and Radio's `helpText`/`errorText` sockets. */
-function useSelectionControlDescription(idProp, helpText, errorText) {
+function useSelectionControlDescription(idProp, helpText, errorText, isActive) {
 	const generatedId = useId();
 	const id = idProp ?? generatedId;
-	const description = errorText ?? helpText;
+	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: error state, then checked/readOnly, then default. */
+/** Priority for a selection control's border/fill colour: disabled, then error state, then checked/readOnly, then default. */
 function resolveControlColor(args) {
-	const { checkedColor, controlColor, errorColor, errorText, isActive, readOnly, readOnlyColor } = 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;
 }
-/** Explicit override wins; otherwise pick the active/inactive variant of a shared state colour (hover, pressed). */
-function resolveStateColor(explicit, isActive, activeColor, inactiveColor = activeColor) {
+/** 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, resolveControlColor, resolveStateColor, useDeprecatedLgSize, useSelectionControlDescription };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+export { SelectionControlInput, useDeprecatedLgSize, useSelectionControlColors, useSelectionControlDescription };
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=selectionControl.js.map

package/dist/selectionControl/selectionControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectionControl.js","names":[],"sources":["../../src/selectionControl/selectionControl.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { useEffect, useId } from 'react'\n\nimport { styled } from '../core'\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) {\n  const generatedId = useId()\n  const id = idProp ?? generatedId\n  const description = errorText ?? helpText\n  const descriptionId = description ? `${id}-description` : undefined\n  return { description, descriptionId, id }\n}\n\n/** Priority for a selection control's border/fill colour: error state, then checked/readOnly, then default. */\nexport function resolveControlColor(args: {\n  checkedColor: string\n  controlColor: string\n  errorColor: string\n  errorText?: ReactNode\n  isActive: boolean\n  readOnly?: boolean\n  readOnlyColor: string\n}): string {\n  const { checkedColor, controlColor, errorColor, errorText, isActive, readOnly, readOnlyColor } = args\n  if (errorText) return errorColor\n  if (isActive) return readOnly ? readOnlyColor : checkedColor\n  return controlColor\n}\n\n/** Explicit override wins; otherwise pick the active/inactive variant of a shared state colour (hover, pressed). */\nexport function resolveStateColor(\n  explicit: string | undefined,\n  isActive: boolean,\n  activeColor: string,\n  inactiveColor: string = activeColor,\n): string {\n  return explicit ?? (isActive ? activeColor : inactiveColor)\n}\n"],"mappings":";;;;AAOA,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;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,UAAU;CACrB,MAAM,cAAc,aAAa;CAEjC,OAAO;EAAE;EAAa,eADA,cAAc,GAAG,GAAG,gBAAgB;EACrB;CAAG;AAC1C;;AAGA,SAAgB,oBAAoB,MAQzB;CACT,MAAM,EAAE,cAAc,cAAc,YAAY,WAAW,UAAU,UAAU,kBAAkB;CACjG,IAAI,WAAW,OAAO;CACtB,IAAI,UAAU,OAAO,WAAW,gBAAgB;CAChD,OAAO;AACT;;AAGA,SAAgB,kBACd,UACA,UACA,aACA,gBAAwB,aAChB;CACR,OAAO,aAAa,WAAW,cAAc;AAC/C"}
+{"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

@@ -51,5 +51,5 @@ const selectionControlLabelSize = {
 
 //#endregion
 export { selectionControlGroupGap, selectionControlLabelSize, selectionControlSizes, selectionControlStackGap };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

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

package/dist/sidemenuV2/sidemenuItemV2.js

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

package/dist/sidemenuV2/sidemenuTopV2.js

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

package/dist/sidemenuV2/sidemenuV2.js

@@ -232,5 +232,5 @@ SidemenuV2.displayName = "SidemenuV2";
 
 //#endregion
 export { SidemenuStateProvider, SidemenuV2, SidemenuV2 as default, useSidemenuContext };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=sidemenuV2.js.map

package/dist/sidemenuV2/theme.js

@@ -138,5 +138,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/sidemenuV2/useSidemenuItem.js

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

package/dist/skeleton/skeleton.js

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

package/dist/skeleton/theme.js

@@ -26,5 +26,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/spinner/consts.js

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

package/dist/spinner/spinner.js

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

package/dist/spinner/theme.js

@@ -83,5 +83,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/stepIndicator/stepIndicator.js

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

package/dist/stepIndicator/theme.js

@@ -69,5 +69,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/stepperHorizontal/consts.js

@@ -21,5 +21,5 @@ const tailClassNameRight = tailClassName + "Right";
 
 //#endregion
 export { boldTitles, stepClassName, tailClassName, tailClassNameLeft, tailClassNameRight, titleColor, variantColor };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=consts.js.map

package/dist/stepperHorizontal/context.js

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

package/dist/stepperHorizontal/stepHorizontal.js

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

package/dist/stepperHorizontal/stepHorizontalTail.js

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

package/dist/stepperHorizontal/stepHorizontalTitle.js

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