ngx-strata 0.4.4 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-strata",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "A simple UI framework for quickly prototyping angular applications with a bit of flair.",
   "license": "MIT",
   "peerDependencies": {

package/skills/ngx-strata/components/card.md

@@ -16,7 +16,7 @@ This file contains the AI documentation for the `card` feature and its related c
 ## CSS Custom Properties
 Every component exposes internal CSS custom properties for visual styling overrides:
 - `--st-card-shadow`: Box-shadow of the elevated card (defaults to `var(--st-shadow-1)`).
-- `--st-card-padding`: Inner padding of the card (defaults to `var(--st-size-xs)`).
+- `--st-card-padding`: Inner padding of the card (defaults to `var(--st-size-sm)`).
 - `--st-card-background-color`: Background color of the card (defaults to `var(--st-color-bg-subtle)`).
 
 ## Usage Example

package/skills/ngx-strata/components/checkbox.md

@@ -9,6 +9,10 @@ This file contains the AI documentation for the `checkbox` feature and its relat
   - `[(value)] (model<boolean>)`: Whether the checkbox is checked (default `false`).
   - `[label] (string | undefined)`: Label text displayed next to the checkbox.
   - `[name] (string | undefined)`: Form field name.
+  - `[state] ('default' | 'error' | 'success' | 'warning')`: Validation state of the control.
+  - `[error] (boolean)`: Explicit boolean error flag. When true, sets state to `'error'`.
+  - `[message] (string)`: Status or helper message rendered beneath the control.
+  - `[colorMessage] (boolean)`: Whether the message follows the active state color (default `true`).
   - `[disabled] (boolean)`: Disables user interaction.
   - `[id] (string | undefined)`: Optional custom HTML id; an accessible unique id is auto-generated if omitted.
 - **Outputs**:

package/skills/ngx-strata/components/file-upload.md

@@ -32,6 +32,10 @@ The File Upload component provides a stylish, accessible dropzone for selecting
 | `accept` | `input<string>` | `'*'` | Accepted MIME types or file extensions |
 | `multiple` | `input<boolean>` | `false` | Whether multiple files can be selected |
 | `maxFileSize` | `input<number \| undefined>` | `undefined` | Maximum allowed file size in bytes |
+| `state` | `input<InputControlState \| undefined>` | `undefined` | Validation state ('default' \| 'error' \| 'success' \| 'warning') |
+| `error` | `input<boolean>` | `false` | Explicit boolean error flag |
+| `message` | `input<string \| undefined>` | `undefined` | Status or helper message rendered beneath the dropzone |
+| `colorMessage` | `input<boolean>` | `true` | Whether the message follows the active state color |
 | `disabled` | `input<boolean>` | `false` | Disable interactions |
 | `label` | `input<string>` | `'Choose a file or drag & drop it here'` | Primary prompt text |
 | `hint` | `input<string \| undefined>` | `undefined` | Secondary help text |

package/skills/ngx-strata/components/input-field.md

@@ -17,7 +17,14 @@ This file contains the AI documentation for the `input-field` feature and its re
 - **Selector**: `st-input-field`
 - **Imports**: `StrataInputFieldComponent`
 - **Inputs**:
+  - `[label] (string)`: Label text rendered above the input control with automatic semantic styling and id linkage.
+  - `[id] (string)`: Unique ID assigned to the native input/textarea and associated with the label's `for` attribute.
+  - `[name] (string)`: Form control name, used as fallback for label association when `id` is omitted.
   - `[size] ('sm' | 'md' | 'lg')`: Sizing variant. Default `'md'`.
+  - `[state] ('default' | 'error' | 'success' | 'warning')`: Validation state of the input field.
+  - `[error] (boolean)`: Explicit boolean error flag. When true, sets state to `'error'`.
+  - `[message] (string)`: Status or helper message rendered beneath the control.
+  - `[colorMessage] (boolean)`: Whether the message follows the active state color (default `true`).
   - `[disabled] (boolean)`: Disables the input field, styling the wrapper, label, affixes, and propagating to native input/textarea.
   - `[maxLength] (number)`: Enforces max character length on the native input/textarea.
   - `[showCharacterCounter] (boolean)`: Displays the character counter right-aligned below the input.
@@ -27,9 +34,8 @@ This file contains the AI documentation for the `input-field` feature and its re
 ## Usage Example
 
 ```html
-<st-input-field [maxLength]="50" [showCharacterCounter]="true">
-  <label for="userName">Name</label>
-  <input id="userName" type="text" stInput placeholder="Enter your name" [(ngModel)]="userName" />
+<st-input-field label="Name" [maxLength]="50" [showCharacterCounter]="true">
+  <input type="text" stInput placeholder="Enter your name" [(ngModel)]="userName" />
 </st-input-field>
 ```
 

package/skills/ngx-strata/components/otp.md

@@ -19,6 +19,8 @@ This file contains the AI documentation for the `otp` feature and its related co
   - `[loading] (boolean)`: Convenience boolean flag for loading state (displays centered loading overlay without layout shift).
   - `[error] (boolean | string)`: Convenience flag or error message for error state.
   - `[success] (boolean)`: Convenience boolean flag for success state.
+  - `[message] (string | undefined)`: Status or helper message displayed below slots.
+  - `[colorMessage] (boolean)`: Whether the message follows the active state color (default `true`).
   - `[errorMessage] (string | undefined)`: Error text displayed below slots.
   - `[helperText] (string | undefined)`: Informational helper text displayed below slots.
   - `[disabled] (boolean)`: Whether input slots are disabled.

package/skills/ngx-strata/components/radio.md

@@ -9,6 +9,10 @@ This file contains the AI documentation for the `radio` feature and its related
   - `[value] (string)`: Unique value represented by this radio item. Required.
   - `[label] (string | undefined)`: Label text displayed next to the radio circle.
   - `[(checked)] (model<boolean>)`: Whether this radio item is active.
+  - `[state] ('default' | 'error' | 'success' | 'warning')`: Validation state of the control.
+  - `[error] (boolean)`: Explicit boolean error flag. When true, sets state to `'error'`.
+  - `[message] (string)`: Status or helper message rendered beneath the control.
+  - `[colorMessage] (boolean)`: Whether the message follows the active state color (default `true`).
   - `[disabled] (boolean)`: Disables user interaction on this specific radio.
 - **Outputs**:
   - `(selected)`: Emitted when the radio button is selected.
@@ -18,6 +22,10 @@ This file contains the AI documentation for the `radio` feature and its related
 - **Imports**: `StrataRadioGroupComponent`
 - **Inputs & Models**:
   - `[(value)] (model<string>)`: Current active radio value in the group.
+  - `[state] ('default' | 'error' | 'success' | 'warning')`: Validation state of the group.
+  - `[error] (boolean)`: Explicit boolean error flag. When true, sets state to `'error'`.
+  - `[message] (string)`: Status or helper message rendered beneath the group.
+  - `[colorMessage] (boolean)`: Whether the message follows the active state color (default `true`).
   - `[disabled] (boolean)`: Disables all radio buttons in the group.
 - **Outputs**:
   - `(valueChange)`: Emitted whenever the group selection changes.

package/skills/ngx-strata/components/segmented-control.md

@@ -7,6 +7,10 @@ This file contains the AI documentation for the `segmented-control` feature and
 - **Imports**: `StrataSegmentedControlComponent`
 - **Inputs & Models**:
   - `[(value)] (model<string>)`: Current active segment value (maps to selected child item's `value` or `text`).
+  - `[state] ('default' | 'error' | 'success' | 'warning')`: Validation state of the control.
+  - `[error] (boolean)`: Explicit boolean error flag. When true, sets state to `'error'`.
+  - `[message] (string)`: Status or helper message rendered beneath the control.
+  - `[colorMessage] (boolean)`: Whether the message follows the active state color (default `true`).
   - `[disabled] (boolean)`: Disables the entire segmented control and all child items.
   - `[size] ('sm' | 'md' | 'lg')`: Size variant (default `'md'`).
   - `[fullWidth] (boolean)`: Whether items stretch equally to fill the parent width.

package/skills/ngx-strata/components/single-select.md

@@ -25,6 +25,10 @@ This file contains the AI documentation for the `single-select` feature and its
   - `[fullWidth] (boolean)`: Expands dropdown to 100% width.
   - `[label] (string | undefined)`: Accessible label displayed above select.
   - `[name] (string | undefined)`: Field name.
+  - `[state] ('default' | 'error' | 'success' | 'warning')`: Validation state of the control.
+  - `[error] (boolean)`: Explicit boolean error flag. When true, sets state to `'error'`.
+  - `[message] (string)`: Status or helper message rendered beneath the control.
+  - `[colorMessage] (boolean)`: Whether the message follows the active state color (default `true`).
   - `[disabled] (boolean)`: Disables interaction and dropdown opening.
   - `[searchable] (boolean)`: Enables search filter input inside menu.
   - `[searchPlaceholder] (string)`: Placeholder for search filter input.

package/skills/ngx-strata/components/slider.md

@@ -10,6 +10,10 @@ This file contains the AI documentation for the `slider` feature and its related
   - `[minimum] (number)`: Minimum slider range bound (default `0`).
   - `[maximum] (number)`: Maximum slider range bound (default `100`).
   - `[step] (number | 'none')`: Step increment, or `'none'` for continuous input (default `1`).
+  - `[state] ('default' | 'error' | 'success' | 'warning')`: Validation state of the control.
+  - `[error] (boolean)`: Explicit boolean error flag. When true, sets state to `'error'`.
+  - `[message] (string)`: Status or helper message rendered beneath the control.
+  - `[colorMessage] (boolean)`: Whether the message follows the active state color (default `true`).
   - `[disabled] (boolean)`: Disables interaction and range sliding.
 - **Outputs**:
   - `(valueChange)`: Emitted whenever the slider position changes.

package/skills/ngx-strata/components/toggle.md

@@ -9,6 +9,10 @@ This file contains the AI documentation for the `toggle` feature and its related
   - `[(checked)] (model<boolean>)`: Whether the switch is active (default `false`).
   - `[label] (string | undefined)`: Optional label text.
   - `[labelPosition] ('before' | 'after')`: Label placement relative to the switch (default `'after'`).
+  - `[state] ('default' | 'error' | 'success' | 'warning')`: Validation state of the control.
+  - `[error] (boolean)`: Explicit boolean error flag. When true, sets state to `'error'`.
+  - `[message] (string)`: Status or helper message rendered beneath the control.
+  - `[colorMessage] (boolean)`: Whether the message follows the active state color (default `true`).
   - `[disabled] (boolean)`: Disables user interaction.
 - **Outputs**:
   - `(checkedChange)`: Emitted whenever the toggle state changes.

package/types/ngx-strata.d.ts

@@ -138,6 +138,8 @@ interface StrataConfig {
 }
 declare const STRATA_CONFIG: InjectionToken<StrataConfig>;
 
+type InputControlState = 'default' | 'error' | 'success' | 'warning';
+
 declare class CapitalizePipe implements PipeTransform {
     static capitalize(value: string): string;
     transform(value: string, ..._args: unknown[]): unknown;
@@ -252,15 +254,17 @@ declare class StrataAvatarComponent implements AfterViewInit {
     alt: _angular_core.InputSignal<string>;
     text: _angular_core.InputSignal<string | null>;
     size: _angular_core.ModelSignal<AvatarSize>;
+    variant: _angular_core.InputSignal<AvatarVariant>;
     imageError: _angular_core.WritableSignal<boolean>;
     constructor();
-    get elementClasses(): AvatarSize[];
+    elementClasses: _angular_core.Signal<string>;
     onImageError(): void;
     ngAfterViewInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataAvatarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataAvatarComponent, "st-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "size": "sizeChange"; }, ["iconComponents"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataAvatarComponent, "st-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "size": "sizeChange"; }, ["iconComponents"], ["*"], true, never>;
 }
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+type AvatarVariant = 'circle' | 'rounded';
 
 declare class StrataAvatarStackComponent {
     size: _angular_core.InputSignal<AvatarSize>;
@@ -368,9 +372,17 @@ declare class StrataCheckboxComponent implements ControlValueAccessor {
     name: _angular_core.InputSignal<string | undefined>;
     id: _angular_core.InputSignal<string | undefined>;
     disabled: _angular_core.InputSignal<boolean>;
+    state: _angular_core.InputSignal<InputControlState | undefined>;
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    message: _angular_core.InputSignal<string | undefined>;
+    colorMessage: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private cvaDisabled;
     effectiveDisabled: _angular_core.Signal<boolean>;
     effectiveId: _angular_core.Signal<string>;
+    readonly effectiveState: _angular_core.Signal<InputControlState>;
+    readonly isMessageError: _angular_core.Signal<boolean>;
+    readonly isMessageSuccess: _angular_core.Signal<boolean>;
+    readonly isMessageWarning: _angular_core.Signal<boolean>;
     private onChange;
     private onTouched;
     toggle(): void;
@@ -381,7 +393,7 @@ declare class StrataCheckboxComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataCheckboxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataCheckboxComponent, "st-checkbox", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataCheckboxComponent, "st-checkbox", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 declare class StrataDividerComponent {
@@ -400,6 +412,15 @@ declare class StrataFileUploadComponent {
     disabled: _angular_core.InputSignal<boolean>;
     label: _angular_core.InputSignal<string>;
     hint: _angular_core.InputSignal<string | undefined>;
+    state: _angular_core.InputSignal<InputControlState | undefined>;
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    message: _angular_core.InputSignal<string | undefined>;
+    colorMessage: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly displayMessage: _angular_core.Signal<string | undefined>;
+    readonly effectiveState: _angular_core.Signal<InputControlState>;
+    readonly isMessageError: _angular_core.Signal<boolean>;
+    readonly isMessageSuccess: _angular_core.Signal<boolean>;
+    readonly isMessageWarning: _angular_core.Signal<boolean>;
     fileSelect: _angular_core.OutputEmitterRef<File>;
     filesSelect: _angular_core.OutputEmitterRef<File[]>;
     fileRejected: _angular_core.OutputEmitterRef<{
@@ -408,6 +429,10 @@ declare class StrataFileUploadComponent {
     }>;
     isDragOver: _angular_core.WritableSignal<boolean>;
     get hostDisabled(): boolean;
+    get hostError(): boolean;
+    get hostSuccess(): boolean;
+    get hostWarning(): boolean;
+    get hostAriaInvalid(): string | null;
     get hostDragOver(): boolean;
     readonly hostRole = "button";
     get hostTabIndex(): number;
@@ -422,7 +447,7 @@ declare class StrataFileUploadComponent {
     private processFiles;
     private matchesAccept;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataFileUploadComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataFileUploadComponent, "st-file-upload", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, { "fileSelect": "fileSelect"; "filesSelect": "filesSelect"; "fileRejected": "fileRejected"; }, never, ["[uploadIcon]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataFileUploadComponent, "st-file-upload", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "fileSelect": "fileSelect"; "filesSelect": "filesSelect"; "fileRejected": "fileRejected"; }, never, ["[uploadIcon]", "*"], true, never>;
 }
 
 declare abstract class IconLoader {
@@ -544,7 +569,15 @@ declare class StrataNativeInputRefDirective {
 type InputFieldSize = 'sm' | 'md' | 'lg';
 declare class StrataInputFieldComponent implements AfterViewInit, AfterContentChecked {
     private readonly hostElement;
+    private readonly defaultId;
     size: _angular_core.InputSignal<InputFieldSize>;
+    label: _angular_core.InputSignal<string | undefined>;
+    id: _angular_core.InputSignal<string | undefined>;
+    name: _angular_core.InputSignal<string | undefined>;
+    state: _angular_core.InputSignal<InputControlState | undefined>;
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    message: _angular_core.InputSignal<string | undefined>;
+    colorMessage: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
     maxLength: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     showCharacterCounter: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -555,8 +588,14 @@ declare class StrataInputFieldComponent implements AfterViewInit, AfterContentCh
     readonly currentLength: _angular_core.WritableSignal<number>;
     private readonly nativeMaxLength;
     readonly nativeDisabled: _angular_core.WritableSignal<boolean>;
+    readonly nativeId: _angular_core.WritableSignal<string | undefined>;
+    readonly effectiveId: _angular_core.Signal<string>;
     readonly effectiveMaxLength: _angular_core.Signal<number | undefined>;
     readonly effectiveDisabled: _angular_core.Signal<boolean>;
+    readonly effectiveState: _angular_core.Signal<InputControlState>;
+    readonly isMessageError: _angular_core.Signal<boolean>;
+    readonly isMessageSuccess: _angular_core.Signal<boolean>;
+    readonly isMessageWarning: _angular_core.Signal<boolean>;
     readonly counterText: _angular_core.Signal<string>;
     constructor();
     ngAfterViewInit(): void;
@@ -567,7 +606,7 @@ declare class StrataInputFieldComponent implements AfterViewInit, AfterContentCh
     get nativeInput(): HTMLInputElement | HTMLTextAreaElement | undefined;
     private syncNativeState;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataInputFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataInputFieldComponent, "st-input-field", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCharacterCounter": { "alias": "showCharacterCounter"; "required": false; "isSignal": true; }; "characterCounterFormatter": { "alias": "characterCounterFormatter"; "required": false; "isSignal": true; }; }, {}, ["iconComponents", "inputField"], ["label", "[prefix]", "input,textarea", "[suffix]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataInputFieldComponent, "st-input-field", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCharacterCounter": { "alias": "showCharacterCounter"; "required": false; "isSignal": true; }; "characterCounterFormatter": { "alias": "characterCounterFormatter"; "required": false; "isSignal": true; }; }, {}, ["iconComponents", "inputField"], ["[prefix]", "input,textarea", "[suffix]"], true, never>;
 }
 
 declare class StrataAutoResizeDirective implements AfterViewInit, OnChanges {
@@ -826,6 +865,8 @@ declare class StrataOtpComponent implements ControlValueAccessor, AfterViewInit,
     readonly: _angular_core.InputSignal<boolean>;
     placeholder: _angular_core.InputSignal<string>;
     ariaLabel: _angular_core.InputSignal<string>;
+    message: _angular_core.InputSignal<string | undefined>;
+    colorMessage: _angular_core.InputSignalWithTransform<boolean, unknown>;
     helperText: _angular_core.InputSignal<string | undefined>;
     errorMessage: _angular_core.InputSignal<string | undefined>;
     autofocus: _angular_core.InputSignal<boolean>;
@@ -841,6 +882,9 @@ declare class StrataOtpComponent implements ControlValueAccessor, AfterViewInit,
     effectiveState: _angular_core.Signal<OtpState>;
     effectiveDisabled: _angular_core.Signal<boolean>;
     computedErrorMessage: _angular_core.Signal<string | undefined>;
+    readonly effectiveMessage: _angular_core.Signal<string | undefined>;
+    readonly isMessageError: _angular_core.Signal<boolean>;
+    readonly isMessageSuccess: _angular_core.Signal<boolean>;
     private onChange;
     private onTouched;
     constructor();
@@ -863,7 +907,7 @@ declare class StrataOtpComponent implements ControlValueAccessor, AfterViewInit,
     private distributeChars;
     private updateSlot;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataOtpComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataOtpComponent, "st-otp", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "uppercase": { "alias": "uppercase"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "clearOnError": { "alias": "clearOnError"; "required": false; "isSignal": true; }; "clearOnErrorDelay": { "alias": "clearOnErrorDelay"; "required": false; "isSignal": true; }; "resetErrorOnInput": { "alias": "resetErrorOnInput"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "state": "stateChange"; "completed": "completed"; "errorReset": "errorReset"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataOtpComponent, "st-otp", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "uppercase": { "alias": "uppercase"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "clearOnError": { "alias": "clearOnError"; "required": false; "isSignal": true; }; "clearOnErrorDelay": { "alias": "clearOnErrorDelay"; "required": false; "isSignal": true; }; "resetErrorOnInput": { "alias": "resetErrorOnInput"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "state": "stateChange"; "completed": "completed"; "errorReset": "errorReset"; }, never, never, true, never>;
 }
 
 declare class StrataPaginationComponent {
@@ -929,21 +973,33 @@ declare class StrataRadioComponent {
     label: _angular_core.InputSignal<string | undefined>;
     checked: _angular_core.ModelSignal<boolean>;
     disabled: _angular_core.InputSignal<boolean>;
+    state: _angular_core.InputSignal<InputControlState | undefined>;
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
     groupDisabled: _angular_core.WritableSignal<boolean>;
+    groupState: _angular_core.WritableSignal<InputControlState>;
     effectiveDisabled: _angular_core.Signal<boolean>;
+    readonly effectiveState: _angular_core.Signal<InputControlState>;
     selected: _angular_core.OutputEmitterRef<void>;
     select(): void;
     onClick(event: MouseEvent): void;
     onSpaceKey(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataRadioComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataRadioComponent, "st-radio", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "selected": "selected"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataRadioComponent, "st-radio", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "selected": "selected"; }, never, never, true, never>;
 }
 
 declare class StrataRadioGroupComponent implements ControlValueAccessor {
     value: _angular_core.ModelSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
+    state: _angular_core.InputSignal<InputControlState | undefined>;
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    message: _angular_core.InputSignal<string | undefined>;
+    colorMessage: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private cvaDisabled;
     effectiveDisabled: _angular_core.Signal<boolean>;
+    readonly effectiveState: _angular_core.Signal<InputControlState>;
+    readonly isMessageError: _angular_core.Signal<boolean>;
+    readonly isMessageSuccess: _angular_core.Signal<boolean>;
+    readonly isMessageWarning: _angular_core.Signal<boolean>;
     radios: _angular_core.Signal<readonly StrataRadioComponent[]>;
     private onChange;
     private onTouched;
@@ -953,7 +1009,7 @@ declare class StrataRadioGroupComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataRadioGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataRadioGroupComponent, "st-radio-group", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["radios"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataRadioGroupComponent, "st-radio-group", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["radios"], ["*"], true, never>;
 }
 
 declare class StrataSegmentedControlItemComponent {
@@ -981,6 +1037,14 @@ declare class StrataSegmentedControlComponent implements ControlValueAccessor, A
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     size: _angular_core.InputSignal<SegmentedControlSize>;
     fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    state: _angular_core.InputSignal<InputControlState | undefined>;
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    message: _angular_core.InputSignal<string | undefined>;
+    colorMessage: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly effectiveState: _angular_core.Signal<InputControlState>;
+    readonly isMessageError: _angular_core.Signal<boolean>;
+    readonly isMessageSuccess: _angular_core.Signal<boolean>;
+    readonly isMessageWarning: _angular_core.Signal<boolean>;
     private cvaDisabled;
     effectiveDisabled: _angular_core.Signal<boolean>;
     private onChange;
@@ -1006,7 +1070,7 @@ declare class StrataSegmentedControlComponent implements ControlValueAccessor, A
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataSegmentedControlComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataSegmentedControlComponent, "st-segmented-control", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["segmentItems", "segmentItemsRefs"], ["st-segmented-control-item"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataSegmentedControlComponent, "st-segmented-control", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["segmentItems", "segmentItemsRefs"], ["st-segmented-control-item"], true, never>;
 }
 
 declare class StrataShellComponent {
@@ -1082,9 +1146,17 @@ declare class StrataSingleSelectComponent implements ControlValueAccessor {
     open: _angular_core.WritableSignal<boolean>;
     placeholder: _angular_core.InputSignal<string>;
     placement: _angular_core.InputSignal<Placement>;
+    state: _angular_core.InputSignal<InputControlState | undefined>;
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    message: _angular_core.InputSignal<string | undefined>;
+    colorMessage: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignal<boolean>;
     private cvaDisabled;
     effectiveDisabled: _angular_core.Signal<boolean>;
+    readonly effectiveState: _angular_core.Signal<InputControlState>;
+    readonly isMessageError: _angular_core.Signal<boolean>;
+    readonly isMessageSuccess: _angular_core.Signal<boolean>;
+    readonly isMessageWarning: _angular_core.Signal<boolean>;
     private onChange;
     private onTouched;
     fullWidth: _angular_core.InputSignal<boolean>;
@@ -1111,7 +1183,7 @@ declare class StrataSingleSelectComponent implements ControlValueAccessor {
     private show;
     private hide;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataSingleSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataSingleSelectComponent, "st-single-select", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "searchQuery": "searchQueryChange"; "itemSelected": "itemSelected"; }, ["selectItems", "triggerTemplate"], ["st-select-item"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataSingleSelectComponent, "st-single-select", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "searchQuery": "searchQueryChange"; "itemSelected": "itemSelected"; }, ["selectItems", "triggerTemplate"], ["st-select-item"], true, never>;
 }
 
 declare class StrataSelectTriggerDirective {
@@ -1123,9 +1195,17 @@ declare class StrataSliderComponent implements ControlValueAccessor, AfterViewIn
     wrapper: _angular_core.Signal<ElementRef<HTMLDivElement>>;
     private resizeObserver;
     value: _angular_core.ModelSignal<number | undefined>;
+    state: _angular_core.InputSignal<InputControlState | undefined>;
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    message: _angular_core.InputSignal<string | undefined>;
+    colorMessage: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignal<boolean>;
     private cvaDisabled;
     effectiveDisabled: _angular_core.Signal<boolean>;
+    readonly effectiveState: _angular_core.Signal<InputControlState>;
+    readonly isMessageError: _angular_core.Signal<boolean>;
+    readonly isMessageSuccess: _angular_core.Signal<boolean>;
+    readonly isMessageWarning: _angular_core.Signal<boolean>;
     private onChange;
     private onTouched;
     minimum: _angular_core.InputSignal<number>;
@@ -1146,7 +1226,7 @@ declare class StrataSliderComponent implements ControlValueAccessor, AfterViewIn
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataSliderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataSliderComponent, "st-slider", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minimum": { "alias": "minimum"; "required": true; "isSignal": true; }; "maximum": { "alias": "maximum"; "required": true; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataSliderComponent, "st-slider", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minimum": { "alias": "minimum"; "required": true; "isSignal": true; }; "maximum": { "alias": "maximum"; "required": true; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 declare class StrataSpinnerComponent {
@@ -1263,9 +1343,17 @@ declare class StrataToggleComponent implements ControlValueAccessor {
     checked: _angular_core.ModelSignal<boolean>;
     label: _angular_core.InputSignal<string | undefined>;
     labelPosition: _angular_core.InputSignal<"before" | "after">;
+    state: _angular_core.InputSignal<InputControlState | undefined>;
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    message: _angular_core.InputSignal<string | undefined>;
+    colorMessage: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignal<boolean>;
     private cvaDisabled;
     effectiveDisabled: _angular_core.Signal<boolean>;
+    readonly effectiveState: _angular_core.Signal<InputControlState>;
+    readonly isMessageError: _angular_core.Signal<boolean>;
+    readonly isMessageSuccess: _angular_core.Signal<boolean>;
+    readonly isMessageWarning: _angular_core.Signal<boolean>;
     private onChange;
     private onTouched;
     onCheckChanged(event?: Event): void;
@@ -1274,8 +1362,8 @@ declare class StrataToggleComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataToggleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataToggleComponent, "st-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, [{ directive: typeof StrataActivatableDirective; inputs: { "disabled": "disabled"; }; outputs: { "activated": "activated"; }; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataToggleComponent, "st-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, [{ directive: typeof StrataActivatableDirective; inputs: { "disabled": "disabled"; }; outputs: { "activated": "activated"; }; }]>;
 }
 
 export { CapitalizePipe, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCardComponent, StrataCheckboxComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataToggleComponent, StrataTooltipDirective, getDefaultShortcutLabels, isApplePlatform, provideBaseIcons, provideIcons, provideStrata, resolveIsApple };
-export type { AccordionVariant, AlertConfiguration, AvatarSize, AvatarStackSpacing, BadgePlacement, BadgeSize, BadgeVariant, ButtonGroupJustification, ButtonSize, ButtonVariant, CardVariant, CropPosition, CropResult, CropShape, CurrentDarkmode, DarkmodeSetting, HotkeyOptions, IconConfig, IconSize, InputFieldSize, ModalConfiguration, ModalFooterJustification, ModalSize, ModalVariant, NotificationConfiguration, NotificationsWithIds, OtpSize, OtpState, OtpType, PaginationItem, ProgressLinearGrowDirection, ProgressLinearLabelFormat, ProgressRadialLabelFormat, SegmentedControlSize, SingleSelectSize, SpinnerSize, StepState, StepperOrientation, StepperSize, StepperTheme, StrataConfig, StrataNotificationRef, StrataPlatform, TagSize, TextStackOverflow, Theme, TooltipPlacement };
+export type { AccordionVariant, AlertConfiguration, AvatarSize, AvatarStackSpacing, AvatarVariant, BadgePlacement, BadgeSize, BadgeVariant, ButtonGroupJustification, ButtonSize, ButtonVariant, CardVariant, CropPosition, CropResult, CropShape, CurrentDarkmode, DarkmodeSetting, HotkeyOptions, IconConfig, IconSize, InputControlState, InputFieldSize, ModalConfiguration, ModalFooterJustification, ModalSize, ModalVariant, NotificationConfiguration, NotificationsWithIds, OtpSize, OtpState, OtpType, PaginationItem, ProgressLinearGrowDirection, ProgressLinearLabelFormat, ProgressRadialLabelFormat, SegmentedControlSize, SingleSelectSize, SpinnerSize, StepState, StepperOrientation, StepperSize, StepperTheme, StrataConfig, StrataNotificationRef, StrataPlatform, TagSize, TextStackOverflow, Theme, TooltipPlacement };