@lumx/core 4.19.0-next.0 → 4.19.0

package/components-and-utils.css

@@ -11513,17 +11513,16 @@ table {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  margin-left: auto;
-}
-.lumx-text-field__char-counter span {
+  margin-left: 16px;
+  float: right;
   font-size: var(--lumx-material-text-field-header-label-font-size);
   font-weight: var(--lumx-material-text-field-header-label-font-weight);
   line-height: var(--lumx-material-text-field-header-label-line-height);
 }
-.lumx-text-field--theme-light .lumx-text-field__char-counter span {
+.lumx-text-field--theme-light .lumx-text-field__char-counter {
   color: var(--lumx-color-dark-L2);
 }
-.lumx-text-field--theme-dark .lumx-text-field__char-counter span {
+.lumx-text-field--theme-dark .lumx-text-field__char-counter {
   color: var(--lumx-color-light-L2);
 }
 .lumx-text-field__char-counter i {

package/js/components/TextField/Stories.d.ts

@@ -80,6 +80,7 @@ export declare function setup({ component: TextField, components: { Chip, IconBu
         args: {
             value: string;
             maxLength: number;
+            charCounterMessage: (n: number) => string;
             label: string;
             helper: string;
         };

package/js/components/TextField/TextField.d.ts

@@ -38,6 +38,8 @@ export interface TextFieldProps extends HasClassName, HasTheme, HasAriaDisabled,
     labelProps?: InputLabelProps;
     /** Max string length the input accepts (constrains the input and displays a character counter). */
     maxLength?: number;
+    /** Character counter message formatter. Receives remaining character count, returns accessible label (e.g. \"{n} characters remaining\"). */
+    charCounterMessage?: (charCount: number) => string | JSXElement;
     /** Whether the text field is a textarea or an input. */
     multiline?: boolean;
     /** Placeholder text. */
@@ -57,7 +59,7 @@ export interface TextFieldProps extends HasClassName, HasTheme, HasAriaDisabled,
     /** Ref to the component root. */
     ref?: CommonRef;
 }
-export type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
+export type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'charCounterMessage' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
 /**
  * Generate unique accessibility IDs for helper and error texts.
  * Combines them with any existing aria-describedby in priority order (error > helper > existing).

package/lumx.css

@@ -12194,17 +12194,16 @@ table {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  margin-left: auto;
-}
-.lumx-text-field__char-counter span {
+  margin-left: 16px;
+  float: right;
   font-size: var(--lumx-material-text-field-header-label-font-size);
   font-weight: var(--lumx-material-text-field-header-label-font-weight);
   line-height: var(--lumx-material-text-field-header-label-line-height);
 }
-.lumx-text-field--theme-light .lumx-text-field__char-counter span {
+.lumx-text-field--theme-light .lumx-text-field__char-counter {
   color: var(--lumx-color-dark-L2);
 }
-.lumx-text-field--theme-dark .lumx-text-field__char-counter span {
+.lumx-text-field--theme-dark .lumx-text-field__char-counter {
   color: var(--lumx-color-light-L2);
 }
 .lumx-text-field__char-counter i {

package/package.json

@@ -7,7 +7,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.7.5",
-        "@lumx/icons": "^4.19.0-next.0",
+        "@lumx/icons": "^4.19.0",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.18.1",
@@ -66,7 +66,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.19.0-next.0",
+    "version": "4.19.0",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",
@@ -89,6 +89,5 @@
         "vite": "^7.3.5",
         "vite-tsconfig-paths": "^5.1.4",
         "vitest": "^4.0.18"
-    },
-    "stableVersion": "4.18.0"
+    }
 }

package/scss/components/text-field/_index.scss

@@ -42,20 +42,19 @@
         display: flex;
         flex-shrink: 0;
         align-items: center;
-        margin-left: auto;
+        margin-left: $lumx-spacing-unit-big;
+        float: right;
 
-        span {
-            font-size: var(--lumx-material-text-field-header-label-font-size);
-            font-weight: var(--lumx-material-text-field-header-label-font-weight);
-            line-height: var(--lumx-material-text-field-header-label-line-height);
+        font-size: var(--lumx-material-text-field-header-label-font-size);
+        font-weight: var(--lumx-material-text-field-header-label-font-weight);
+        line-height: var(--lumx-material-text-field-header-label-line-height);
 
-            #{$self}--theme-light & {
-                color: lumx-color-variant("dark", "L2");
-            }
+        #{$self}--theme-light & {
+            color: lumx-color-variant("dark", "L2");
+        }
 
-            #{$self}--theme-dark & {
-                color: lumx-color-variant("light", "L2");
-            }
+        #{$self}--theme-dark & {
+            color: lumx-color-variant("light", "L2");
         }
 
         i {