@vsn-ux/ngx-gaia 0.12.4 → 0.13.1

package/docs/data-select.md

@@ -36,7 +36,9 @@ Data select component that automatically generates options from an items array.
 - `bindValue: string` - Property path to use as option value
 - `bindLabel: string` - Property path to use as option label
 - `groupBy: string | ((item: IGaSelectOption) => string)` - Property or function for grouping options
-- `loading: boolean` - Show loading spinner (default: false)
+- `valueLoading: boolean` - Show loading spinner in the trigger area (default: false)
+- `optionsLoading: boolean` - Show loading spinner in the dropdown options list (default: false)
+- `loading: boolean` - **Deprecated.** Maps to `optionsLoading`. Use `valueLoading` or `optionsLoading` instead (default: false)
 - `labelHidden: boolean` - Use when the connected label is not visible; keeps the placeholder always shown so the component remains identifiable (default: false)
 - `withOptionInput: boolean | null` - Show radio/checkbox in options (default: null)
 - `valueDisplayLimit: number | null` - Limit number of displayed values in multi-select (default: null)
@@ -187,7 +189,7 @@ Searchable with custom filtering (server-side)
   searchable
   customFilter
   [items]="filteredOptions.value() ?? []"
-  [loading]="filteredOptions.isLoading()"
+  [optionsLoading]="filteredOptions.isLoading()"
   (searchValueChange)="searchText.set($event)"
   [(value)]="selected"
 />
@@ -333,12 +335,23 @@ Infinite scroll with optionsEndReached
 ```html
 <ga-data-select
   [items]="items"
-  [loading]="isLoading"
+  [optionsLoading]="isLoading"
   (optionsEndReached)="loadMore()"
   [(value)]="selected"
 />
 ```
 
+Value loading
+
+```html
+<ga-data-select
+  [items]="options"
+  [valueLoading]="isLoading"
+  placeholder="Select option"
+  [(value)]="selected"
+/>
+```
+
 i18n configuration
 
 ```typescript

package/docs/input.md

@@ -22,7 +22,40 @@ Export: `gaInput`
 
 ## `<ga-input>`
 
-Wrapper component for inputs with prefix/suffix elements.
+Wrapper component for inputs with prefix/suffix elements. Automatically sets `aria-busy="true"` when `ga-input-loading` is present inside. Built-in suffix components include `<ga-input-clear-button>` and `<ga-input-loading>`, but any custom content can also be placed after the input as a suffix.
+
+## `<ga-input-loading>`
+
+Loading spinner for use inside `<ga-input>`.
+
+### Inputs
+
+- `announcement: string` - Screen reader announcement via `aria-label` (default: `''`)
+- `ariaLive: 'polite' | 'assertive'` - `aria-live` region behavior (default: `'polite'`)
+
+## `<ga-input-clear-button>`
+
+Clear button for use inside `<ga-input>`. Displays a CircleX icon.
+
+### Inputs
+
+- `ariaLabel: string` - Button aria-label override (default: `GaInputI18n.clearLabel`)
+
+### Outputs
+
+- `cleared: void` - Emitted when the clear button is clicked
+
+## GaInputI18n
+
+Abstract class for input internationalization.
+
+### Properties
+
+- `clearLabel: string` - Default label for the clear button (default: `'Clear'`)
+
+## Providers
+
+- `provideGaInputI18n(value: GaInputI18n | (() => GaInputI18n))` - Configure input i18n labels
 
 ## Examples
 
@@ -41,17 +74,39 @@ Input with prefix icon
 </ga-input>
 ```
 
-Input with suffix button
+Input with clear button
 
 ```html
 <ga-input>
   <input gaInput type="text" placeholder="Search" [(ngModel)]="search" />
-  <button type="button" aria-label="clear" (click)="search = ''">
-    <ga-icon [icon]="CircleXIcon" size="16" />
-  </button>
+  <ga-input-clear-button (cleared)="search = ''" />
 </ga-input>
 ```
 
+Input with loading spinner
+
+```html
+<ga-input>
+  <input gaInput type="text" placeholder="Search" [(ngModel)]="search" />
+  <ga-input-loading announcement="Searching..." />
+</ga-input>
+```
+
+Input with custom suffix
+
+```html
+<ga-input>
+  <input gaInput type="text" placeholder="0.00" />
+  <span>EUR</span>
+</ga-input>
+```
+
+Custom i18n labels
+
+```typescript
+provideGaInputI18n({ clearLabel: 'Tøm' });
+```
+
 Programmatic focus
 
 ```typescript