asma-ui-core 3.108.4 → 3.110.0

package/dist/src/components/inputs/dynamic-select/components/DynamicSelectReadOnlyValue.d.ts

@@ -1,5 +1,5 @@
 import { DynamicSelectOption, StyledDynamicSelectProps } from '../types';
-type DynamicSelectReadOnlyValueProps<TOption extends DynamicSelectOption> = Pick<StyledDynamicSelectProps<TOption>, 'dataTest' | 'options' | 'title' | 'valueKey' | 'labelKey' | 'renderLabel'> & {
+type DynamicSelectReadOnlyValueProps<TOption extends DynamicSelectOption> = Pick<StyledDynamicSelectProps<TOption>, 'dataTest' | 'options' | 'title' | 'titleSize' | 'width' | 'valueKey' | 'labelKey' | 'renderLabel'> & {
     value: TOption | null;
 };
 /**
@@ -11,5 +11,5 @@ type DynamicSelectReadOnlyValueProps<TOption extends DynamicSelectOption> = Pick
  * buttons, and read-only draws neither. No value → `-`, the same placeholder the chip variant shows.
  * Multiple selects never reach this component.
  */
-export declare const DynamicSelectReadOnlyValue: <TOption extends DynamicSelectOption>({ dataTest, options, value, title, valueKey, labelKey, renderLabel, }: DynamicSelectReadOnlyValueProps<TOption>) => JSX.Element;
+export declare const DynamicSelectReadOnlyValue: <TOption extends DynamicSelectOption>({ dataTest, options, value, title, titleSize, width, valueKey, labelKey, renderLabel, }: DynamicSelectReadOnlyValueProps<TOption>) => JSX.Element;
 export {};

package/dist/src/components/inputs/dynamic-select/components/DynamicSelectTitle.d.ts

@@ -0,0 +1,14 @@
+import { DynamicSelectOption, StyledDynamicSelectProps } from '../types';
+type DynamicSelectTitleProps = Pick<StyledDynamicSelectProps<DynamicSelectOption>, 'title' | 'titleSize'> & {
+    id?: string;
+};
+/**
+ * The title above every dynamic select variant — chips, autocomplete and the read-only value — so all
+ * three read the same and a consumer never stacks its own form label (with its input-title bottom
+ * padding) on top of the select.
+ *
+ * `base` = Body Base SemiBold 16/24; `lg` = Section title SemiBold 18/28 — both `text-icon/title-label`
+ * (delta-800), the `StyledFormLabel` sizes of the same names.
+ */
+export declare const DynamicSelectTitle: ({ title, titleSize, id }: DynamicSelectTitleProps) => JSX.Element | null;
+export {};

package/dist/src/components/inputs/dynamic-select/types.d.ts

@@ -1,3 +1,4 @@
+import { FieldWidth } from '../field-styles';
 import { StyledSelectAutocompleteProps } from '../select-autocomplete';
 import { default as React } from 'react';
 export type DynamicSelectOptionPrimitive = string | number | boolean;
@@ -34,8 +35,16 @@ interface DynamicSelectCommonProps<TOption extends DynamicSelectOption> {
     readOnly?: boolean;
     /** Prevents the built-in clear button from appearing even when a value is set. Applies to autocomplete only. */
     disableClearable?: boolean;
-    /** @figmaProp Title (Body Base SemiBold 16, text-icon/title-label delta-800) above the control. */
-    title?: string;
+    /**
+     * @figmaProp Title (text-icon/title-label delta-800) above the control. A node, so a title can carry
+     * an icon or a required marker. Prefer it over a separate form label stacked on the select: the
+     * select owns the title-to-control gap, which is tighter in read-only (title over plain text).
+     */
+    title?: React.ReactNode;
+    /** @figmaProp none — title typography: `'base'` Body Base SemiBold 16/24 (default), `'lg'` Section title 18/28. */
+    titleSize?: 'base' | 'lg';
+    /** Field width pattern step. The pattern keeps a dynamic select Full (WID-5); Full is the default. */
+    width?: FieldWidth;
     /** @figmaProp none — app size (chips/buttons). Defaults to `'medium'`. */
     size?: 'small' | 'medium';
     /**

package/dist/src/components/inputs/field-styles.d.ts

@@ -11,6 +11,28 @@ export interface SingleLineInputLayoutOptions {
 export declare const singleLineInputLayoutStyle: ({ paddingLeft, paddingRight, }?: SingleLineInputLayoutOptions) => CSSProperties;
 /** Label vertical anchor — inline so duplicate Tailwind `top-*` utilities cannot shift it. */
 export declare const floatingLabelLayoutStyle: (shrink: boolean) => CSSProperties;
+/** Field width pattern (ASMA-8489): XS 8rem, S 12.5rem, M 20rem, Full up to the 37.5rem form column. */
+export type FieldWidth = 'xs' | 's' | 'm' | 'full';
+/** `width: 100%; max-width: <step>`, so a field shrinks in a narrower container and never overflows it. */
+export declare const fieldWidthStyle: (width: FieldWidth) => CSSProperties;
+/**
+ * Full screen is the one place a field may be wider than 600 px (WID-10): Full fields and the form
+ * column fill the dialog's content width, while XS, S and M keep their step.
+ */
+export declare const fullScreenFieldWidthVars: {
+    '--field-width-full': string;
+    '--form-column-width': string;
+};
+/** The step a character limit picks (WID-2): up to 9 characters XS, 15 S, 27 M, longer Full. */
+export declare const fieldWidthForMaxLength: (maxLength: number) => FieldWidth;
+export type FieldLabelPlacement = 'above' | 'floating';
+/**
+ * The label above a field, as `StyledPhoneField` draws it. It wraps and is never truncated (TRUNC-4).
+ * Put it on a wrapper around the `<label>`: apps in the shell ship `label { padding: 0 !important }`.
+ */
+export declare const fieldLabelAboveClass: ({ disabled }?: {
+    disabled?: boolean;
+}) => string;
 /**
  * Shared outlined-field styling so `StyledInputField`, `StyledInputLabel` (+ `StyledFormControl`)
  * and `StyledSelect` render an identical border + floating label without MUI. TASK-401.

package/dist/src/components/inputs/form-layout/StyledFieldPair.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export interface StyledFieldPairProps {
+    /** The two fields, first field first, so focus and screen readers reach it first. */
+    children: ReactNode;
+    /**
+     * A group label for parts that only make sense together, such as country code and number.
+     * Renders the pair as a `fieldset` with this `legend`; each field still keeps its own label.
+     */
+    legend?: ReactNode;
+    className?: string;
+    dataTest?: string;
+}
+/**
+ * Two fields that are parts of one answer, side by side (field width pattern WID-9): first name + last
+ * name, postal code + city, date + time, from + to, a value + its unit. Each field keeps its width step;
+ * a Full field fills the rest of the row and is never narrower than S. Stacks when the row is too narrow.
+ */
+export declare const StyledFieldPair: ({ children, legend, className, dataTest }: StyledFieldPairProps) => JSX.Element;

package/dist/src/components/inputs/form-layout/StyledFormColumn.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export interface StyledFormColumnProps {
+    children?: ReactNode;
+    className?: string;
+    dataTest?: string;
+}
+/**
+ * The one form column (field width pattern WID-1): at most 37.5rem (600 px), left-aligned, and as wide
+ * as its container when that is narrower. Fields, labels, hints and errors all sit inside it.
+ * A full-screen `MinimizableDialog` widens it to the dialog (WID-10).
+ */
+export declare const StyledFormColumn: ({ children, className, dataTest }: StyledFormColumnProps) => JSX.Element;

package/dist/src/components/inputs/form-layout/index.d.ts

@@ -0,0 +1,4 @@
+export * from './StyledFieldPair';
+export * from './StyledFormColumn';
+export { fieldLabelAboveClass, fieldWidthForMaxLength, fieldWidthStyle } from '../field-styles';
+export type { FieldLabelPlacement, FieldWidth } from '../field-styles';

package/dist/src/components/inputs/input-field/StyledInputField.d.ts

@@ -1,5 +1,6 @@
 import { ChangeEvent, CSSProperties, FocusEvent, HTMLAttributes, InputHTMLAttributes, ReactNode, Ref } from 'react';
-import { FieldSize } from '../field-styles';
+import { UiCoreLocale } from '../../../helpers/uiCoreLocale';
+import { FieldLabelPlacement, FieldSize, FieldWidth } from '../field-styles';
 interface InputSlot {
     startAdornment?: ReactNode;
     endAdornment?: ReactNode;
@@ -21,8 +22,13 @@ type HtmlInputSlot = InputHTMLAttributes<HTMLInputElement> & {
 export interface StyledInputFieldProps {
     /** @figmaProp none — test hook */
     dataTest: string;
-    /** @figmaProp Label element (floating) */
+    /** @figmaProp Label element */
     label?: ReactNode;
+    /**
+     * `above` (default): the label sits above the field and wraps. `floating`: inside the field, only
+     * where a label above has no room, such as the search field (field width pattern §10).
+     */
+    labelPlacement?: FieldLabelPlacement;
     /** @figmaProp Filled = (value != '')→"on" | else→"off" */
     value?: string | number;
     /** @figmaProp Filled = (defaultValue != '')→"on" | else→"off" */
@@ -36,6 +42,12 @@ export interface StyledInputFieldProps {
     helperText?: ReactNode;
     reserveHelperText?: boolean;
     expandHelperText?: boolean;
+    /** Character limit; also readable from `slotProps.htmlInput.maxLength`. */
+    maxLength?: number;
+    /** Shows the count against `maxLength` as the user types, for free text with a limit. */
+    counter?: boolean;
+    /** Language of the counter text. */
+    locale?: UiCoreLocale;
     /** @figmaProp State = true→"Disabled" */
     disabled?: boolean;
     /** @figmaProp State = true→"Read only" */
@@ -61,6 +73,9 @@ export interface StyledInputFieldProps {
     size?: FieldSize;
     /** Accepted for API parity; the design always renders outlined. */
     variant?: string;
+    /** Field width pattern step, `width: 100%; max-width: <step>`. Full fills the form column. */
+    width?: FieldWidth;
+    /** @deprecated Fields are Full by default; use `width`. */
     fullWidth?: boolean;
     className?: string;
     style?: CSSProperties;
@@ -83,7 +98,7 @@ export interface StyledInputFieldProps {
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 /**
- * Outlined text field with a floating label (replaces MUI `TextField`). Self-contained: manages its
+ * Outlined text field with its label above it (replaces MUI `TextField`). Self-contained: manages its
  * own focus/value state to drive the shared field styling ([[field-styles]]); supports multiline,
  * start/end adornments, an optional clear button, and error/helper text. Public props preserved
  *
@@ -91,5 +106,5 @@ export interface StyledInputFieldProps {
  * the visual gate. Multiline auto-grows between `minRows` and `maxRows` (a fixed `rows` pins the height)
  * and scrolls once the content exceeds the cap; `readOnly` ignores the cap and shows the whole value.
  */
-export declare const StyledInputField: ({ dataTest, label, value, defaultValue, onChange, onBlur, onFocus, error, helperText, reserveHelperText, expandHelperText, disabled, readOnly, required, allowClear, onClear, type, placeholder, name, id, autoComplete, autoFocus, multiline, rows, minRows, maxRows, size, fullWidth, className, style, sx, inputRef, slotProps, InputProps, onKeyDown, onClick, variant: _variant, }: StyledInputFieldProps) => JSX.Element;
+export declare const StyledInputField: ({ dataTest, label, labelPlacement, value, defaultValue, onChange, onBlur, onFocus, error, helperText, reserveHelperText, expandHelperText, maxLength, counter, locale, disabled, readOnly, required, allowClear, onClear, type, placeholder, name, id, autoComplete, autoFocus, multiline, rows, minRows, maxRows, size, width, fullWidth: _fullWidth, className, style, sx, inputRef, slotProps, InputProps, onKeyDown, onClick, variant: _variant, }: StyledInputFieldProps) => JSX.Element;
 export {};

package/dist/src/components/inputs/select/StyledSelect.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, FocusEventHandler, ReactNode } from 'react';
-import { FieldSize } from '../field-styles';
+import { FieldSize, FieldWidth } from '../field-styles';
 export interface SelectChangeEvent<T = unknown> {
     target: {
         value: T;
@@ -44,6 +44,9 @@ export interface StyledSelectProps {
     displayEmpty?: boolean;
     multiple?: boolean;
     renderValue?: (value: unknown) => ReactNode;
+    /** Field width pattern step; Full by default. `variant="standard"` keeps its content width. */
+    width?: FieldWidth;
+    /** @deprecated Fields are Full by default; use `width`. */
     fullWidth?: boolean;
     className?: string;
     style?: CSSProperties;
@@ -57,6 +60,8 @@ export interface StyledSelectProps {
      * above). Without it (and no `name`/placeholder/value text), the trigger has no accessible name
      * at all — a common gap when a floating/external label isn't referenced. */
     labelId?: string;
+    /** Marks the trigger `aria-required`; also read from a surrounding `StyledFormControl`. */
+    required?: boolean;
     children?: ReactNode;
     MenuProps?: {
         className?: string;
@@ -70,4 +75,4 @@ export interface StyledSelectProps {
  * portalled `role="listbox"`. Reports open/filled into a surrounding `StyledFormControl` so its
  * TASK-402.
  */
-export declare const StyledSelect: ({ dataTest, value, defaultValue, onChange, error, errorText, helperText, reserveHelperText, expandHelperText, allowClear, disabled, readOnly, name, placeholder, displayEmpty, multiple, renderValue, fullWidth, className, style, sx, variant, children, MenuProps, onFocus, onBlur, labelId, }: StyledSelectProps) => JSX.Element;
+export declare const StyledSelect: ({ dataTest, value, defaultValue, onChange, error, errorText, helperText, reserveHelperText, expandHelperText, allowClear, disabled, readOnly, name, placeholder, displayEmpty, multiple, renderValue, width, fullWidth: _fullWidth, className, style, sx, variant, children, MenuProps, onFocus, onBlur, labelId, required, }: StyledSelectProps) => JSX.Element;

package/dist/src/components/inputs/select-autocomplete/StyledSelectAutocomplete.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties, HTMLAttributes, KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
+import { FieldWidth } from '../field-styles';
 export type AutocompleteChangeReason = 'createOption' | 'selectOption' | 'removeOption' | 'clear' | 'blur';
 export type AutocompleteInputChangeReason = 'input' | 'reset' | 'clear';
 export interface AutocompleteRenderOptionState {
@@ -105,6 +106,9 @@ export interface StyledSelectAutocompleteProps<T, Multiple extends boolean | und
     multiple?: Multiple;
     allowSelectAll?: boolean;
     selectAllLabel?: string;
+    /** Field width pattern step; Full by default. */
+    width?: FieldWidth;
+    /** @deprecated Fields are Full by default; use `width`. */
     fullWidth?: boolean;
     /** Accepted for MUI parity; single-select already omits selected options via filtering. */
     filterSelectedOptions?: boolean;
@@ -132,5 +136,5 @@ export interface StyledSelectAutocompleteProps<T, Multiple extends boolean | und
  * ponytail: `freeSolo` is accepted (arbitrary input is emitted via onInputChange) but not turned
  * into option values; exact keyboard-parity edge cases are Chromatic/axe-gated.
  */
-export declare function StyledSelectAutocomplete<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false>({ dataTest, options, renderInput, value, onChange, getOptionLabel, getOptionKey, isOptionEqualToValue, renderOption, renderValue, filterOptions, loading, loadingText, noOptionsText, disabled, readOnly, error, helperText, size, rowSize, disableClearable, disableCloseOnSelect, popupIcon, autoHeight, multiple, allowSelectAll, selectAllLabel, fullWidth, classes, inputValue: controlledInput, onInputChange, open: controlledOpen, onOpen, onClose, className, wrapperClassName, getOptionDisabled, slotProps, }: StyledSelectAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>): JSX.Element;
+export declare function StyledSelectAutocomplete<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false>({ dataTest, options, renderInput, value, onChange, getOptionLabel, getOptionKey, isOptionEqualToValue, renderOption, renderValue, filterOptions, loading, loadingText, noOptionsText, disabled, readOnly, error, helperText, size, rowSize, disableClearable, disableCloseOnSelect, popupIcon, autoHeight, multiple, allowSelectAll, selectAllLabel, width, fullWidth: _fullWidth, classes, inputValue: controlledInput, onInputChange, open: controlledOpen, onOpen, onClose, className, wrapperClassName, getOptionDisabled, slotProps, }: StyledSelectAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>): JSX.Element;
 export {};

package/dist/src/components/inputs/textarea/StyledTextarea.d.ts

@@ -1,4 +1,6 @@
 import { default as React, ChangeEvent, MutableRefObject, ReactNode } from 'react';
+import { UiCoreLocale } from '../../../helpers/uiCoreLocale';
+import { FieldWidth } from '../field-styles';
 export interface TextareaCommonProps {
     id?: string;
     /** @figmaProp Filled — the field text (Body Base 16/lh24, delta-800). */
@@ -12,6 +14,10 @@ export interface TextareaCommonProps {
     containerClassName?: string;
     className?: string;
     dataTest?: string;
+    /** Field width pattern step; a text area is Full. */
+    width?: FieldWidth;
+    /** Language of the character counter. */
+    locale?: UiCoreLocale;
 }
 export interface TextAreaNotEditableProps {
     variant?: 'not_editable' | 'view_only';

package/dist/src/components/miscellaneous/StyledFormControl.d.ts

@@ -1,11 +1,14 @@
 import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactNode } from 'react';
-import { FieldSize } from '../inputs/field-styles';
+import { FieldSize, FieldWidth } from '../inputs/field-styles';
 export interface FormControlProps {
     children?: ReactNode;
     error?: boolean;
     disabled?: boolean;
     required?: boolean;
     size?: FieldSize;
+    /** Field width pattern step of the field it wraps; Full by default. */
+    width?: FieldWidth;
+    /** @deprecated Fields are Full by default; use `width`. */
     fullWidth?: boolean;
     /** Accepted for API parity; the design always renders outlined. */
     variant?: string;
@@ -24,4 +27,4 @@ export interface FormControlProps {
  * focus/filled state so `StyledInputLabel` can float and `StyledFormHelperText` can colour itself;
  * `StyledSelect` reports its state into this context. Public props preserved (DEC-003). TASK-401.
  */
-export declare const StyledFormControl: ({ children, error, disabled, required, size, fullWidth, className, style, sx, id, onFocus, onBlur, onClick, }: FormControlProps) => JSX.Element;
+export declare const StyledFormControl: ({ children, error, disabled, required, size, width, fullWidth: _fullWidth, className, style, sx, id, onFocus, onBlur, onClick, }: FormControlProps) => JSX.Element;

package/dist/src/components/miscellaneous/StyledInputLabel.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FieldSize } from '../inputs/field-styles';
+import { FieldLabelPlacement, FieldSize } from '../inputs/field-styles';
 export interface InputLabelProps {
     children?: ReactNode;
     htmlFor?: string;
@@ -10,11 +10,13 @@ export interface InputLabelProps {
     size?: FieldSize;
     /** Force the shrunk (floated) state; otherwise derived from the surrounding FormControl. */
     shrink?: boolean;
+    /** `above` (default) or `floating`, as on `StyledInputField`. */
+    labelPlacement?: FieldLabelPlacement;
     className?: string;
 }
 /**
- * Floating field label (replaces MUI `InputLabel`). Reads focus/filled/error/size from the
- * surrounding `StyledFormControl`; `shrink` lifts it onto the border. Public props preserved
- * (DEC-003). TASK-401.
+ * Field label (replaces MUI `InputLabel`), above the field by default. The `floating` placement reads
+ * focus/filled/error/size from the surrounding `StyledFormControl`; `shrink` lifts it onto the border.
+ * Public props preserved (DEC-003). TASK-401.
  */
-export declare const StyledInputLabel: ({ children, htmlFor, id, required, disabled, error, size, shrink, className, }: InputLabelProps) => JSX.Element;
+export declare const StyledInputLabel: ({ children, htmlFor, id, required, disabled, error, size, shrink, labelPlacement, className, }: InputLabelProps) => JSX.Element;

package/dist/src/datetime/components/date-picker/components/BaseDatePickerInput.d.ts

@@ -1,3 +1,4 @@
+import { FieldWidth } from '../../../../components/inputs/field-styles';
 import { AriaAttributes } from 'react';
 import { DayPickerProps as ReactDayPickerProps, Matcher } from 'react-day-picker';
 export interface IBaseDatePickerInput {
@@ -25,5 +26,6 @@ export interface IBaseDatePickerInput {
     required?: boolean;
     minDate?: Date;
     inputAriaProps?: AriaAttributes;
+    width?: FieldWidth;
 }
 export declare const BaseDatePickerInput: React.FC<IBaseDatePickerInput>;

package/dist/src/datetime/components/date-picker/types.d.ts

@@ -1,5 +1,6 @@
 import { AriaAttributes } from 'react';
 import { DayPicker, Matcher } from 'react-day-picker';
+import { FieldWidth } from '../../../components/inputs/field-styles';
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 type CommonDatePickerProps = {
     dateFormat?: string;
@@ -13,6 +14,8 @@ type CommonDatePickerProps = {
     validateOnCalendarClose?: boolean;
     onValidatedOnce?: () => void;
     required?: boolean;
+    /** Field width pattern step of each date field, calendar button included. Defaults to S. */
+    width?: FieldWidth;
 } & CalendarProps;
 export interface DatePickerSingleFieldProps {
     label?: string;

package/dist/src/datetime/components/time-picker/helpers/timePickerWidth.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+import { StyledTimePickerProps } from '../types';
+/** The step box of the picker root; a legacy numeric `width` is applied on the input instead. */
+export declare const timePickerWidthProps: (width: StyledTimePickerProps["width"]) => {
+    "data-field-width"?: string;
+    style?: CSSProperties;
+};

package/dist/src/datetime/components/time-picker/types.d.ts

@@ -1,4 +1,5 @@
 import { AriaAttributes, ReactNode } from 'react';
+import { FieldWidth } from '../../../components/inputs/field-styles';
 /**
     * @param notBeforeTime - Start time of the range. Selected time must be after this value.
 */
@@ -10,7 +11,8 @@ export interface StyledTimePickerProps {
     readOnly?: boolean;
     inputClassName?: string;
     dataTest: string;
-    width?: number;
+    /** Field width pattern step; defaults to XS. A number (a fixed `px` width) is deprecated: use a step. */
+    width?: FieldWidth | number;
     error?: boolean;
     helperText?: ReactNode;
     label?: string;

package/dist/src/helpers/CharacterCounter.d.ts

@@ -0,0 +1,16 @@
+import { UiCoreLocale } from './uiCoreLocale';
+/** Screen readers hear the count only once the user is close to the limit, not on every keystroke. */
+export declare const isNearCharacterLimit: (length: number, limit: number) => boolean;
+export interface CharacterCounterProps {
+    /** Id of the visible count, for the field's `aria-describedby`. */
+    id: string;
+    length: number;
+    limit: number;
+    locale?: UiCoreLocale;
+    className?: string;
+}
+/**
+ * The count of a free-text field with a character limit, such as *12 av 100 tegn* (field width
+ * pattern WID-2, Q12), so typed text is never cut without notice.
+ */
+export declare const CharacterCounter: ({ id, length, limit, locale, className }: CharacterCounterProps) => JSX.Element;

package/dist/src/helpers/CharacterCounter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/index.d.ts

@@ -27,6 +27,7 @@ export * from './components/inputs/radio-button';
 export * from './components/inputs/label';
 export * from './components/inputs/dynamic-select';
 export * from './components/inputs/phone-field';
+export * from './components/inputs/form-layout';
 export * from './datetime/components/date-picker';
 export * from './datetime/components/time-picker';
 export * from './datetime/helpers/date.helper';

package/dist/tailwind.config.d.ts

@@ -170,6 +170,20 @@ declare const _default: {
                     };
                 };
             };
+            width: {
+                "field-xs": string;
+                "field-s": string;
+                "field-m": string;
+                "field-full": string;
+                "form-column": string;
+            };
+            maxWidth: {
+                "field-xs": string;
+                "field-s": string;
+                "field-m": string;
+                "field-full": string;
+                "form-column": string;
+            };
         };
     };
     darkMode: "media";

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.108.4",
+    "version": "3.110.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",

package/src/styles/fieldWidthTokens.css

@@ -0,0 +1,8 @@
+:root {
+    /* Field width pattern (ASMA-8489, WID-1/WID-3): four widths only, in rem so they grow with text. */
+    --field-width-xs: 8rem; /* 128px: postal code, year, age, time */
+    --field-width-s: 12.5rem; /* 200px: date, phone number, national ID, amount */
+    --field-width-m: 20rem; /* 320px: IBAN, long codes */
+    --form-column-width: 37.5rem; /* 600px: the one form column */
+    --field-width-full: var(--form-column-width);
+}

package/src/styles/index.css

@@ -4,6 +4,7 @@
 @import 'color-variables/fretexTokens.css';
 @import 'color-variables/jadeTokens.css';
 @import 'typographyTokens.css';
+@import 'fieldWidthTokens.css';
 
 @tailwind base;
 @tailwind components;

package/tw-configs/twConfigs.json

@@ -163,5 +163,19 @@
                 "transform": "rotate(360deg)"
             }
         }
+    },
+    "width": {
+        "field-xs": "var(--field-width-xs)",
+        "field-s": "var(--field-width-s)",
+        "field-m": "var(--field-width-m)",
+        "field-full": "var(--field-width-full)",
+        "form-column": "var(--form-column-width)"
+    },
+    "maxWidth": {
+        "field-xs": "var(--field-width-xs)",
+        "field-s": "var(--field-width-s)",
+        "field-m": "var(--field-width-m)",
+        "field-full": "var(--field-width-full)",
+        "form-column": "var(--form-column-width)"
     }
 }