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

package/dist/stepperHorizontal/stepperHorizontal.js

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

package/dist/stepperHorizontal/stepperHorizontalBase.js

@@ -22,5 +22,5 @@ const StepperHorizontalBase = styled.divBox`
 
 //#endregion
 export { StepperHorizontalBase as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=stepperHorizontalBase.js.map

package/dist/stepperHorizontal/theme.js

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

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

package/dist/stepperVertical/context.js

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

package/dist/stepperVertical/stepVertical.js

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

package/dist/stepperVertical/stepVerticalTail.js

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

package/dist/stepperVertical/stepVerticalTitle.js

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

package/dist/stepperVertical/stepperVertical.js

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

package/dist/stepperVertical/stepperVerticalBase.js

@@ -12,5 +12,5 @@ const StepperVerticalBase = styled.divBox`
 
 //#endregion
 export { StepperVerticalBase as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=stepperVerticalBase.js.map

package/dist/stepperVertical/theme.js

@@ -17,5 +17,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/svg/cache.js

@@ -27,5 +27,5 @@ const cache = new Cache();
 
 //#endregion
 export { cache as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=cache.js.map

package/dist/svg/helpers.js

@@ -83,5 +83,5 @@ function initState() {
 
 //#endregion
 export { getAttributes, getSvgContent, initState, parseSvg };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=helpers.js.map

package/dist/svg/svg.js

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

package/dist/switch/consts.js

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

package/dist/switch/context.js

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

package/dist/switch/switchButton.js

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

package/dist/switch/switchLabel.js

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

package/dist/switch/switchMain.js

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

package/dist/switch/theme.js

@@ -91,5 +91,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/system/custom.js

@@ -30,5 +30,5 @@ const wordBreak = style({ prop: "wordBreak" });
 
 //#endregion
 export { isTruncated, maxLines, wordBreak };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=custom.js.map

package/dist/system/system.js

@@ -6,5 +6,5 @@ const system = compose(animation, backgroundColor, borders, color, effects, flex
 
 //#endregion
 export { system as default, system };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=system.js.map

package/dist/t/specialVariants.js

@@ -13,5 +13,5 @@ const Lead = vui((props, ref) => /* @__PURE__ */ jsx(T, {
 
 //#endregion
 export { Lead };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=specialVariants.js.map

package/dist/t/t.js

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

package/dist/t/theme.js

@@ -50,5 +50,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/table/context.js

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

package/dist/table/table.js

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

package/dist/table/tableSortIcon.js

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

package/dist/table/tbody.js

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

package/dist/table/td.js

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

package/dist/table/tfoot.js

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

package/dist/table/th.js

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

package/dist/table/thead.js

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

package/dist/table/theme.js

@@ -38,5 +38,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/table/tr.js

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

package/dist/table/useTable.js

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

package/dist/tabs/consts.js

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

package/dist/tabs/tab.js

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

package/dist/tabs/tabs.js

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

package/dist/tabs/tabsNavBar.js

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

package/dist/tabs/theme.js

@@ -45,5 +45,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/tabs/useTabsState.js

@@ -17,5 +17,5 @@ const useTabsState = (initialAnimation, tabIndex) => {
 
 //#endregion
 export { useTabsState };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=useTabsState.js.map

package/dist/tag/tag.js

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

package/dist/tag/tagPillBase.css.js

@@ -19,5 +19,5 @@ const tagPillBaseCss = css`
 
 //#endregion
 export { tagPillBaseCss };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=tagPillBase.css.js.map

package/dist/tag/theme.js

@@ -171,5 +171,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/tag/utils.js

@@ -20,5 +20,5 @@ const resolveTagVariantKey = (variant, color) => {
 
 //#endregion
 export { resolveTagVariantKey };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=utils.js.map

package/dist/tagToggle/TagToggle.js

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

package/dist/tagToggle/theme.js

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

@@ -27,9 +27,8 @@ const clearIconSize = {
 	lg: "sm",
 	xl: "md"
 };
-const helpTextMargin = "60px";
 
 //#endregion
-export { clearIconSize, displayValueOnlyTextSize, fieldColors, helpTextMargin };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+export { clearIconSize, displayValueOnlyTextSize, fieldColors };
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=consts.js.map

package/dist/textField/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","names":[],"sources":["../../src/textField/consts.ts"],"sourcesContent":["// Values sourced from the VUI v5 Figma \"Text field\" component (node 1691:2232), verified against\n// core/vuiProvider/consts.ts CSS variables. Where the semantic --vui-control-*/--vui-feedback-* var has\n// drifted from the current design, the raw --vui-color-* palette var is used instead.\nexport const fieldColors = {\n  border: 'var(--vui-control-border-default)',\n  placeholder: 'var(--vui-control-placeholder)',\n  inputText: 'var(--vui-control-foreground-default)',\n  helpText: 'var(--vui-control-helper)',\n  icons: 'var(--vui-foreground-muted)',\n  disabledBackground: 'var(--vui-color-sandstone-90)',\n  disabledForeground: 'var(--vui-color-sandstone-60)',\n  // no Figma-verified readOnly token yet; same sandstone step as the old xstyled tokens, just as a CSS var\n  readOnlyBackground: 'var(--vui-color-sandstone-97)',\n  readOnlyBorder: 'var(--vui-color-sandstone-55)',\n  focus: 'var(--vui-utility-focus)',\n  error: 'var(--vui-action-danger-solid)',\n  loading: 'var(--vui-color-sea-blue-80)',\n  loadingBar: 'var(--vui-color-sea-blue-60)',\n  success: 'var(--vui-feedback-success-solid)',\n} as const\n\nexport const displayValueOnlyTextSize = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n  xl: 'lg',\n} as const\n\nexport const clearIconSize = {\n  sm: 'sm',\n  md: 'sm',\n  lg: 'sm',\n  xl: 'md',\n} as const\n\nexport const helpTextMargin = '60px' as const\n"],"mappings":";AAGA,MAAa,cAAc;CACzB,QAAQ;CACR,aAAa;CACb,WAAW;CACX,UAAU;CACV,OAAO;CACP,oBAAoB;CACpB,oBAAoB;CAEpB,oBAAoB;CACpB,gBAAgB;CAChB,OAAO;CACP,OAAO;CACP,SAAS;CACT,YAAY;CACZ,SAAS;AACX;AAEA,MAAa,2BAA2B;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,gBAAgB;CAC3B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,iBAAiB"}
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/textField/consts.ts"],"sourcesContent":["// Values sourced from the VUI v5 Figma \"Text field\" component (node 1691:2232), verified against\n// core/vuiProvider/consts.ts CSS variables. Where the semantic --vui-control-*/--vui-feedback-* var has\n// drifted from the current design, the raw --vui-color-* palette var is used instead.\nexport const fieldColors = {\n  border: 'var(--vui-control-border-default)',\n  placeholder: 'var(--vui-control-placeholder)',\n  inputText: 'var(--vui-control-foreground-default)',\n  helpText: 'var(--vui-control-helper)',\n  icons: 'var(--vui-foreground-muted)',\n  disabledBackground: 'var(--vui-color-sandstone-90)',\n  disabledForeground: 'var(--vui-color-sandstone-60)',\n  // no Figma-verified readOnly token yet; same sandstone step as the old xstyled tokens, just as a CSS var\n  readOnlyBackground: 'var(--vui-color-sandstone-97)',\n  readOnlyBorder: 'var(--vui-color-sandstone-55)',\n  focus: 'var(--vui-utility-focus)',\n  error: 'var(--vui-action-danger-solid)',\n  loading: 'var(--vui-color-sea-blue-80)',\n  loadingBar: 'var(--vui-color-sea-blue-60)',\n  success: 'var(--vui-feedback-success-solid)',\n} as const\n\nexport const displayValueOnlyTextSize = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n  xl: 'lg',\n} as const\n\nexport const clearIconSize = {\n  sm: 'sm',\n  md: 'sm',\n  lg: 'sm',\n  xl: 'md',\n} as const\n\nexport const containerGap = '4px' as const\n\nexport const helpRowGap = '8px' as const\n"],"mappings":";AAGA,MAAa,cAAc;CACzB,QAAQ;CACR,aAAa;CACb,WAAW;CACX,UAAU;CACV,OAAO;CACP,oBAAoB;CACpB,oBAAoB;CAEpB,oBAAoB;CACpB,gBAAgB;CAChB,OAAO;CACP,OAAO;CACP,SAAS;CACT,YAAY;CACZ,SAAS;AACX;AAEA,MAAa,2BAA2B;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,gBAAgB;CAC3B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN"}

package/dist/textField/context.js

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

package/dist/textField/helpers.js

@@ -1,5 +1,4 @@
 import { isString } from "../utils/assertion.js";
-import { helpTextMargin } from "./consts.js";
 import { Label } from "../label/label.js";
 import { cloneElement, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -10,10 +9,6 @@ function getInitialCount(props) {
 	const { defaultValue, value } = props;
 	return defaultValue?.toString().length ?? value?.toString().length ?? 0;
 }
-/** Reserves horizontal space for the counter so help/error text doesn't run underneath it. */
-function getHelpTextMargin(showCount) {
-	return showCount ? helpTextMargin : void 0;
-}
 /** Truncates a value to `maxLength`, if set. */
 function clampValue(value, maxLength) {
 	return maxLength ? value.slice(0, maxLength) : value;
@@ -51,6 +46,6 @@ function resolveLabel(label, id, disabled, labelMarkOptional, labelTooltipText,
 }
 
 //#endregion
-export { clampValue, createSyntheticChangeEvent, filterAutoCompleteOption, getHelpTextMargin, getInitialCount, resolveLabel };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+export { clampValue, createSyntheticChangeEvent, filterAutoCompleteOption, getInitialCount, resolveLabel };
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=helpers.js.map

package/dist/textField/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":[],"sources":["../../src/textField/helpers.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react'\n\nimport { cloneElement, isValidElement } from 'react'\n\nimport type { TextFieldProps } from './textField.types'\n\nimport Label from '../label'\nimport { isString } from '../utils'\nimport { helpTextMargin } from './consts'\n\n/** Returns length of the initial field's value. */\nexport function getInitialCount(props: TextFieldProps) {\n  const { defaultValue, value } = props\n\n  return defaultValue?.toString().length ?? value?.toString().length ?? 0\n}\n\n/** Reserves horizontal space for the counter so help/error text doesn't run underneath it. */\nexport function getHelpTextMargin(showCount: boolean | undefined) {\n  return showCount ? helpTextMargin : undefined\n}\n\n/** Truncates a value to `maxLength`, if set. */\nexport function clampValue(value: string, maxLength?: number) {\n  return maxLength ? value.slice(0, maxLength) : value\n}\n\n/** Builds a minimal synthetic change event carrying just the given value. */\nexport function createSyntheticChangeEvent(value: string, type: string) {\n  return { target: { value }, type }\n}\n\n/** Predicate for filtering autocomplete options against the field's current value. */\nexport function filterAutoCompleteOption(currentValue: string, option: string) {\n  return currentValue === option ? false : !currentValue || option.toLowerCase().includes(currentValue.toLowerCase())\n}\n\n/** Matches `Label` elements, including thin wrappers (styled/memo) that preserve the `Label` display name. */\nfunction isLabelElement(label: ReactNode): label is ReactElement<{ htmlFor?: string }> {\n  if (!isValidElement<{ htmlFor?: string }>(label)) return false\n\n  const type = label.type as { displayName?: string }\n\n  return label.type === Label || type?.displayName === Label.displayName\n}\n\n/** Resolves the `label` prop: wraps strings in `Label`, auto-wires `htmlFor` onto `Label` elements. */\nexport function resolveLabel(\n  label: ReactNode,\n  id: string,\n  disabled: boolean | undefined,\n  labelMarkOptional: boolean | undefined,\n  labelTooltipText: ReactNode,\n  labelStyles: Record<string, unknown>,\n) {\n  if (isString(label)) {\n    return (\n      <Label\n        aria-disabled={disabled}\n        className=\"vui-textFieldLabel\"\n        htmlFor={id}\n        markAsOptional={labelMarkOptional}\n        text={label}\n        tooltipText={labelTooltipText}\n        {...labelStyles}\n      />\n    )\n  }\n\n  if (isLabelElement(label)) {\n    return cloneElement(label, { htmlFor: label.props.htmlFor ?? id })\n  }\n\n  return label\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,gBAAgB,OAAuB;CACrD,MAAM,EAAE,cAAc,UAAU;CAEhC,OAAO,cAAc,SAAS,CAAC,CAAC,UAAU,OAAO,SAAS,CAAC,CAAC,UAAU;AACxE;;AAGA,SAAgB,kBAAkB,WAAgC;CAChE,OAAO,YAAY,iBAAiB;AACtC;;AAGA,SAAgB,WAAW,OAAe,WAAoB;CAC5D,OAAO,YAAY,MAAM,MAAM,GAAG,SAAS,IAAI;AACjD;;AAGA,SAAgB,2BAA2B,OAAe,MAAc;CACtE,OAAO;EAAE,QAAQ,EAAE,MAAM;EAAG;CAAK;AACnC;;AAGA,SAAgB,yBAAyB,cAAsB,QAAgB;CAC7E,OAAO,iBAAiB,SAAS,QAAQ,CAAC,gBAAgB,OAAO,YAAY,CAAC,CAAC,SAAS,aAAa,YAAY,CAAC;AACpH;;AAGA,SAAS,eAAe,OAA+D;CACrF,IAAI,CAAC,eAAqC,KAAK,GAAG,OAAO;CAEzD,MAAM,OAAO,MAAM;CAEnB,OAAO,MAAM,SAAS,SAAS,MAAM,gBAAgB,MAAM;AAC7D;;AAGA,SAAgB,aACd,OACA,IACA,UACA,mBACA,kBACA,aACA;CACA,IAAI,SAAS,KAAK,GAChB,OACE,oBAAC,OAAD;EACE,iBAAe;EACf,WAAU;EACV,SAAS;EACT,gBAAgB;EAChB,MAAM;EACN,aAAa;EACb,GAAI;CACL;CAIL,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAAO,EAAE,SAAS,MAAM,MAAM,WAAW,GAAG,CAAC;CAGnE,OAAO;AACT"}
+{"version":3,"file":"helpers.js","names":[],"sources":["../../src/textField/helpers.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react'\n\nimport { cloneElement, isValidElement } from 'react'\n\nimport type { TextFieldProps } from './textField.types'\n\nimport Label from '../label'\nimport { isString } from '../utils'\n\n/** Returns length of the initial field's value. */\nexport function getInitialCount(props: TextFieldProps) {\n  const { defaultValue, value } = props\n\n  return defaultValue?.toString().length ?? value?.toString().length ?? 0\n}\n\n/** Truncates a value to `maxLength`, if set. */\nexport function clampValue(value: string, maxLength?: number) {\n  return maxLength ? value.slice(0, maxLength) : value\n}\n\n/** Builds a minimal synthetic change event carrying just the given value. */\nexport function createSyntheticChangeEvent(value: string, type: string) {\n  return { target: { value }, type }\n}\n\n/** Predicate for filtering autocomplete options against the field's current value. */\nexport function filterAutoCompleteOption(currentValue: string, option: string) {\n  return currentValue === option ? false : !currentValue || option.toLowerCase().includes(currentValue.toLowerCase())\n}\n\n/** Matches `Label` elements, including thin wrappers (styled/memo) that preserve the `Label` display name. */\nfunction isLabelElement(label: ReactNode): label is ReactElement<{ htmlFor?: string }> {\n  if (!isValidElement<{ htmlFor?: string }>(label)) return false\n\n  const type = label.type as { displayName?: string }\n\n  return label.type === Label || type?.displayName === Label.displayName\n}\n\n/** Resolves the `label` prop: wraps strings in `Label`, auto-wires `htmlFor` onto `Label` elements. */\nexport function resolveLabel(\n  label: ReactNode,\n  id: string,\n  disabled: boolean | undefined,\n  labelMarkOptional: boolean | undefined,\n  labelTooltipText: ReactNode,\n  labelStyles: Record<string, unknown>,\n) {\n  if (isString(label)) {\n    return (\n      <Label\n        aria-disabled={disabled}\n        className=\"vui-textFieldLabel\"\n        htmlFor={id}\n        markAsOptional={labelMarkOptional}\n        text={label}\n        tooltipText={labelTooltipText}\n        {...labelStyles}\n      />\n    )\n  }\n\n  if (isLabelElement(label)) {\n    return cloneElement(label, { htmlFor: label.props.htmlFor ?? id })\n  }\n\n  return label\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,gBAAgB,OAAuB;CACrD,MAAM,EAAE,cAAc,UAAU;CAEhC,OAAO,cAAc,SAAS,CAAC,CAAC,UAAU,OAAO,SAAS,CAAC,CAAC,UAAU;AACxE;;AAGA,SAAgB,WAAW,OAAe,WAAoB;CAC5D,OAAO,YAAY,MAAM,MAAM,GAAG,SAAS,IAAI;AACjD;;AAGA,SAAgB,2BAA2B,OAAe,MAAc;CACtE,OAAO;EAAE,QAAQ,EAAE,MAAM;EAAG;CAAK;AACnC;;AAGA,SAAgB,yBAAyB,cAAsB,QAAgB;CAC7E,OAAO,iBAAiB,SAAS,QAAQ,CAAC,gBAAgB,OAAO,YAAY,CAAC,CAAC,SAAS,aAAa,YAAY,CAAC;AACpH;;AAGA,SAAS,eAAe,OAA+D;CACrF,IAAI,CAAC,eAAqC,KAAK,GAAG,OAAO;CAEzD,MAAM,OAAO,MAAM;CAEnB,OAAO,MAAM,SAAS,SAAS,MAAM,gBAAgB,MAAM;AAC7D;;AAGA,SAAgB,aACd,OACA,IACA,UACA,mBACA,kBACA,aACA;CACA,IAAI,SAAS,KAAK,GAChB,OACE,oBAAC,OAAD;EACE,iBAAe;EACf,WAAU;EACV,SAAS;EACT,gBAAgB;EAChB,MAAM;EACN,aAAa;EACb,GAAI;CACL;CAIL,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAAO,EAAE,SAAS,MAAM,MAAM,WAAW,GAAG,CAAC;CAGnE,OAAO;AACT"}

package/dist/textField/textField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textField.d.ts","names":[],"sources":["../../src/textField/textField.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;cA4Ba,kDAAoB,mDAAA,cAApB,iBAAoB,uBAAA,cAAA,iBAAA,mBAAA,oBAAA,kBAAA,mBAAA,sBAAA,wBAAA,yBAAA,uBAAA,mBAAA,sBAAA,wBAAA,yBAAA,uBAAA,mBAAA,oBAAA,eAAA,oBAAA,oBAAA,oBAAA,eAAA,eAAA,sBAAA,sBAAA,mBAAA,mBAAA,YAAA,iBAAA,eAAA,iBAAA,kBAAA,eAAA,kBAAA,oBAAA,sBAAA,oBAAA,gBAAA,gBAAA,kBAAA,iBAAA,qBAAA,YAAA,mBAAA,iBAAA,aAAA,WAAA,WAAA,WAAA,iBAAA,cAAA,kBAAA,eAAA,oBAAA,uBAAA,oBAAA,2BAAA,wBAAA,yBAAA,gBAAA,kBAAA,cAAA,qBAAA,cAAA,kBAAA,mBAAA,aAAA,iBAAA,gBAAA,iBAAA,iBAAA,gBAAA,cAAA,WAAA,aAAA,cAAA,YAAA,kBAAA,0BAAA,iBAAA,gBAAA,aAAA,cAAA,gBAAA,iBAAA,gBAAA,iBAAA,cAAA,iBAAA,mBAAA,oBAAA,kBAAA,eAAA,eAAA,eAAA,kBAAA,oBAAA,qBAAA,mBAAA,gBAAA,gBAAA,cAAA,cAAA,qBAAA,qBAAA,sBAAA,mBAAA,iBAAA,uBAAA,kBAAA,kBAAA,cAAA,aAAA,aAAA,aAAA,cAAA,cAAA,kBAAA,0BAAA,0BAAA,gCAAA,uBAAA,kBAAA,gBAAA,iBAAA,kBAAA,kBAAA,aAAA,qBAAA,sBAAA,iBAAA,qBAAA,qBAAA,kBAAA,oBAAA,qBAAA,yBAAA;EAAgC;;cA8CpD,gDAAkB;cAiBlB,mDAAqB,wDAAA,cAAA;;;;;;;cAsBrB,WAwSP,oBAAoB;EACxB,qBAAqB;EACrB,iBAAiB;EACjB,aAAa"}
+{"version":3,"file":"textField.d.ts","names":[],"sources":["../../src/textField/textField.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;cA2Ba,kDAAoB,mDAAA,cAApB,iBAAoB,uBAAA,cAAA,iBAAA,mBAAA,oBAAA,kBAAA,mBAAA,sBAAA,wBAAA,yBAAA,uBAAA,mBAAA,sBAAA,wBAAA,yBAAA,uBAAA,mBAAA,oBAAA,eAAA,oBAAA,oBAAA,oBAAA,eAAA,eAAA,sBAAA,sBAAA,mBAAA,mBAAA,YAAA,iBAAA,eAAA,iBAAA,kBAAA,eAAA,kBAAA,oBAAA,sBAAA,oBAAA,gBAAA,gBAAA,kBAAA,iBAAA,qBAAA,YAAA,mBAAA,iBAAA,aAAA,WAAA,WAAA,WAAA,iBAAA,cAAA,kBAAA,eAAA,oBAAA,uBAAA,oBAAA,2BAAA,wBAAA,yBAAA,gBAAA,kBAAA,cAAA,qBAAA,cAAA,kBAAA,mBAAA,aAAA,iBAAA,gBAAA,iBAAA,iBAAA,gBAAA,cAAA,WAAA,aAAA,cAAA,YAAA,kBAAA,0BAAA,iBAAA,gBAAA,aAAA,cAAA,gBAAA,iBAAA,gBAAA,iBAAA,cAAA,iBAAA,mBAAA,oBAAA,kBAAA,eAAA,eAAA,eAAA,kBAAA,oBAAA,qBAAA,mBAAA,gBAAA,gBAAA,cAAA,cAAA,qBAAA,qBAAA,sBAAA,mBAAA,iBAAA,uBAAA,kBAAA,kBAAA,cAAA,aAAA,aAAA,aAAA,cAAA,cAAA,kBAAA,0BAAA,0BAAA,gCAAA,uBAAA,kBAAA,gBAAA,iBAAA,kBAAA,kBAAA,aAAA,qBAAA,sBAAA,iBAAA,qBAAA,qBAAA,kBAAA,oBAAA,qBAAA,yBAAA;EAAgC;;cA8CpD,gDAAkB;cAiBlB,mDAAqB,wDAAA,cAAA;;;;;;;cAyDrB,WAsRP,oBAAoB;EACxB,qBAAqB;EACrB,iBAAiB;EACjB,aAAa"}

package/dist/textField/textField.js

@@ -9,7 +9,7 @@ import { Box } from "../box/box.js";
 import { T } from "../t/t.js";
 import { IconButton } from "../button/buttons.js";
 import { TextFieldProvider } from "./context.js";
-import { clampValue, createSyntheticChangeEvent, filterAutoCompleteOption, getHelpTextMargin, getInitialCount, resolveLabel } from "./helpers.js";
+import { clampValue, createSyntheticChangeEvent, filterAutoCompleteOption, getInitialCount, resolveLabel } from "./helpers.js";
 import { TextFieldAutoComplete } from "./textFieldAutoComplete.js";
 import { TextFieldHelpText } from "./textFieldHelpText.js";
 import { TextFieldIcon } from "./textFieldIcon.js";
@@ -91,6 +91,31 @@ const TextFieldTextareaBase = styled.textareaBox`
     cursor: not-allowed;
   }
 `;
+/** Renders the help/error text alongside the character counter in a single row. */
+function TextFieldFooter({ count, descriptionId, errorText, helpText, maxLength, showCount }) {
+	if (!helpText && !errorText && !showCount) return null;
+	const message = errorText ?? helpText;
+	return /* @__PURE__ */ jsxs(Box, {
+		alignItems: "flex-start",
+		gap: "8px",
+		children: [/* @__PURE__ */ jsx(Box, {
+			flex: "1",
+			children: message && /* @__PURE__ */ jsx(TextFieldHelpText, {
+				id: descriptionId,
+				isError: !!errorText,
+				children: message
+			})
+		}), showCount && /* @__PURE__ */ jsxs(TextFieldHelpText, {
+			className: "vui-textFieldCount",
+			isError: !!maxLength && count > maxLength,
+			children: [
+				count,
+				" ",
+				maxLength ? `/ ${maxLength}` : null
+			]
+		})]
+	});
+}
 /**
 * Displays a text field wrapped in a div to allow extra content, like counter, side icons or buttons.
 * Renders a native `<input>` when `rows` is unset or `<= 1`, and a `<textarea>` when `rows > 1`.
@@ -147,14 +172,12 @@ const TextField = vui((props, ref) => {
 		"aria-disabled": disabled,
 		"aria-label": ariaLabel
 	});
-	const helpTextId = helpText ? `${id}-help-text` : void 0;
-	const errorTextId = errorText ? `${id}-error-text` : void 0;
-	const ariaDescribedBy = [helpTextId, errorTextId].filter(Boolean).join(" ") || void 0;
+	const descriptionId = helpText || errorText ? `${id}-description` : void 0;
 	const commonFieldProps = {
 		value: valueInternal,
 		...styles.field,
 		...fieldAliasedProps,
-		"aria-describedby": ariaDescribedBy,
+		"aria-describedby": descriptionId,
 		"aria-invalid": errorText ? true : void 0
 	};
 	const sharedFieldProps = {
@@ -196,19 +219,6 @@ const TextField = vui((props, ref) => {
 	}, [value]);
 	const filterAutoCompleteOptions = (i) => filterAutoCompleteOption(`${valueInternal}`, i);
 	const resolvedLabel = resolveLabel(label, id, disabled, labelMarkOptional, labelTooltipText, styles.label);
-	const counterNode = showCount && /* @__PURE__ */ jsxs(T, {
-		className: "vui-textFieldCount",
-		color: maxLength && count > maxLength ? fieldColors.error : fieldColors.helpText,
-		position: "absolute",
-		right: 0,
-		size: "sm",
-		top: "100%",
-		children: [
-			count,
-			" ",
-			maxLength ? `/ ${maxLength}` : null
-		]
-	});
 	if (type === "hidden") return /* @__PURE__ */ jsx("input", {
 		defaultValue,
 		id,
@@ -271,20 +281,16 @@ const TextField = vui((props, ref) => {
 									title: "Clear",
 									variant: "tertiary"
 								})
-							] }),
-							counterNode
+							] })
 						]
 					}),
-					!!helpText && /* @__PURE__ */ jsx(TextFieldHelpText, {
-						id: helpTextId,
-						mr: getHelpTextMargin(showCount),
-						children: helpText
-					}),
-					!!errorText && /* @__PURE__ */ jsx(TextFieldHelpText, {
-						id: errorTextId,
-						isError: true,
-						mr: getHelpTextMargin(showCount),
-						children: errorText
+					/* @__PURE__ */ jsx(TextFieldFooter, {
+						count,
+						descriptionId,
+						errorText,
+						helpText,
+						maxLength,
+						showCount
 					})
 				]
 			})
@@ -298,5 +304,5 @@ TextField.displayName = "TextField";
 
 //#endregion
 export { TextField, TextField as default, TextFieldControlBase, TextFieldInputBase, TextFieldTextareaBase };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=textField.js.map