@vsn-ux/ngx-gaia 0.11.5 → 0.11.7

package/README.md

@@ -48,8 +48,8 @@ ng add @vsn-ux/ngx-gaia
 If you use [Claude Code](https://claude.ai/code), you can install the ngx-gaia plugin for better AI assistance with components:
 
 ```sh
-/plugin marketplace add ./node_modules/@vsn-ux/ngx-gaia/claude --scope project
-/plugin install ngx-gaia@ngx-gaia --scope project
+/plugin marketplace add visma-software-nordic/claude-code-marketplace
+/plugin install ngx-gaia@visma-software-nordic-marketplace
 ```
 
 ## Browser support

package/docs/alert.md

@@ -6,7 +6,7 @@ Alert components for displaying contextual notifications with optional progress
 
 ## `<ga-alert>`
 
-Alert component for displaying notifications and contextual information. Uses `role="alert"` for screen reader announcements.
+Alert component for displaying notifications and contextual information. Uses dynamic ARIA attributes based on variant for proper accessibility.
 
 ### Inputs:
 
@@ -16,10 +16,12 @@ Alert component for displaying notifications and contextual information. Uses `r
 - `progress: number | 'indeterminate'` - Progress value 0-100 or indeterminate state
 - `progressLabel: string` - Accessible label for progress bar
 - `progressLabelledBy: string` - ID of element labeling progress bar
+- `role: 'alert' | 'status' | string` - ARIA role override (default: 'alert' for error, 'status' for others)
+- `aria-live: 'assertive' | 'polite' | 'off'` - ARIA live region behavior (default: 'assertive' for error, 'polite' for others)
 
 ### Outputs:
 
-- `dismiss: EventEmitter<void>` - Emitted when dismiss button is clicked
+- `dismiss()` - Emitted when dismiss button is clicked
 
 ### Properties:
 

package/docs/badge.md

@@ -6,12 +6,12 @@ Badge component for displaying status indicators and labels.
 
 ## `<ga-badge>`
 
-### Inputs:
+### Inputs
 
 - `variant: 'default' | 'default-inverted' | 'information' | 'error' | 'warning' | 'success' | 'muted' | 'disabled'` - Badge variant (default: 'default')
 - `type: 'text' | 'dot'` - Badge type (default: 'text')
 
-## Examples:
+## Examples
 
 Badge variants
 

package/docs/button.md

@@ -13,6 +13,7 @@ Button directive for styling button and anchor elements.
 - `gaButton: GaButtonType | ""` - Button variant ('primary' | 'secondary' | 'ghost' | 'transparent', default: 'secondary')
 - `gaButtonLoading: boolean` - Show loading state (default: false)
 - `gaButtonLoadingLabel: string` - Loading state label
+- `disabled: boolean` - Disabled state (default: false)
 
 ## `[gaIconButton]`
 
@@ -24,10 +25,11 @@ Icon button directive for buttons with icons.
 - `gaIconButtonVariant: GaIconButtonVariant` - Button variant (default: 'secondary')
 - `gaIconButtonLoading: boolean` - Show loading state (default: false)
 - `gaIconButtonLoadingLabel: string` - Loading state label
+- `disabled: boolean` - Disabled state (default: false)
 
 ## GaButtonI18n
 
-Service for button internationalization.
+Abstract class for button internationalization.
 
 ### Properties:
 

package/docs/card.md

@@ -6,19 +6,37 @@ Card component for grouping related content.
 
 ## `<ga-card>`
 
-### Inputs:
+### Inputs
 
 - `selectable: boolean` - Can be selected (default: false)
 - `selected: boolean` - Is selected (default: false)
 - `disabled: boolean` - Disabled state (default: false)
 
-## Examples:
+## Examples
 
-Selectable card
+Basic card
+
+```html
+<ga-card>
+  <h3>Card Title</h3>
+  <p>Card content goes here.</p>
+</ga-card>
+```
+
+Selectable card with selection binding
 
 ```html
 <ga-card selectable [selected]="isSelected">
   <h3>Card Title</h3>
-  <p>Card content</p>
+  <p>Click to select this card.</p>
+</ga-card>
+```
+
+Disabled card
+
+```html
+<ga-card disabled>
+  <h3>Unavailable</h3>
+  <p>This card is disabled.</p>
 </ga-card>
 ```

package/docs/checkbox.md

@@ -13,6 +13,13 @@ Checkbox component for boolean selections.
 - `indeterminate: boolean` - Indeterminate state (default: false)
 - `name: string | null` - Input name (default: null)
 - `id: string | null` - Input ID (default: null)
+- `disabled: boolean` - Disabled state (default: false)
+- `required: boolean` - Required state (default: false)
+- `aria-label: string | null` - ARIA label (default: null)
+- `aria-labelledby: string | null` - ARIA labelledby (default: null)
+- `aria-describedby: string | null` - ARIA describedby (default: null)
+- `aria-invalid: string | null` - ARIA invalid override (default: null)
+- `aria-errormessage: string | null` - ARIA error message ID (default: null)
 
 ### Outputs:
 

package/docs/chip.md

@@ -19,7 +19,7 @@ Container component for managing chip selection and keyboard navigation.
 
 ### Outputs:
 
-- `valueChange(value: any | any[])` - Emitted when selection changes
+- `valueChange: readonly T[]` - Emitted when selection changes
 
 ### Methods:
 

package/docs/data-select.md

@@ -38,6 +38,7 @@ Data select component that automatically generates options from an items array.
 - `groupBy: string | ((item: IGaSelectOption) => string)` - Property or function for grouping options
 - `loading: boolean` - Show loading spinner (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)
 
 ### Outputs:
 
@@ -93,10 +94,7 @@ Service for data-select internationalization.
 - `clearLabel: string` - Label for clear button (default: 'Clear')
 - `searchInputLabel: string` - Accessible label for search input (default: 'Search')
 - `noOptionsLabel: string` - Message when no options available (default: 'No options')
-
-## GaDataSelectRequiredValidator
-
-Built-in required validator for Angular Forms integration.
+- `displayLimitReachedLabel: (counter: number) => string` - Label when display limit reached (default: '+{counter} more')
 
 ## Providers:
 
@@ -140,6 +138,23 @@ Multi-select mode
 selectedValues = ['Option 1', 'Option 2'];
 ```
 
+Multi-select with display limit
+
+```html
+<ga-data-select
+  multiple
+  [valueDisplayLimit]="2"
+  placeholder="Select multiple"
+  [items]="options"
+  [(value)]="selectedValues"
+/>
+```
+
+```typescript
+// When more than 2 values selected, shows "+N more" label
+selectedValues = ['Option 1', 'Option 2', 'Option 3'];
+```
+
 Searchable with built-in filtering
 
 ```html
@@ -320,6 +335,7 @@ provideGaDataSelectI18n({
   clearLabel: 'Clear',
   searchInputLabel: 'Search',
   noOptionsLabel: 'No results found',
+  displayLimitReachedLabel: (count) => `+${count} more`,
 });
 
 // Factory function with injection context
@@ -329,6 +345,7 @@ provideGaDataSelectI18n(() => {
     clearLabel: i18n.translate('clear'),
     searchInputLabel: i18n.translate('search'),
     noOptionsLabel: i18n.translate('no-results'),
+    displayLimitReachedLabel: (count) => i18n.translate('more', { count }),
   };
 });
 ```

package/docs/datepicker.md

@@ -8,75 +8,114 @@ Comprehensive datepicker with input integration, toggles, and multiple value ada
 
 Inline datepicker component for date selection.
 
-### Inputs:
+### Inputs
 
-- `value: any` - Selected date value (model binding)
+- `value: any` - Selected date value (two-way binding)
 - `min: any` - Minimum selectable date
 - `max: any` - Maximum selectable date
 
-### Outputs:
+### Outputs
 
-- `valueChange(value: any)` - Emitted when date is selected
+- `valueChange: any` - Emitted when date is selected
 
-## `[gaDatepicker]`
+## `input[gaDatepickerInput]`
 
-Input directive for datepicker integration.
+Input directive for datepicker integration. Implements ControlValueAccessor and Validator.
 
-### Inputs:
+### Inputs
 
-- `gaDatepicker: GaDatepickerComponent` - Associated datepicker instance
+- `value: any` - Selected date value (default: null)
+- `disabled: boolean` - Disabled state (default: false)
 - `min: any` - Minimum date constraint
 - `max: any` - Maximum date constraint
 
-### Outputs:
+### Outputs
 
-- `dateChange(value: any)` - Emitted when the input loses focus (blur) and the date has changed
-- `dateInput(value: any)` - Emitted immediately when the user types in the text input and the parsed value changes
+- `dateInput: any` - Emitted immediately when user types and parsed value changes
+- `dateChange: any` - Emitted on blur when date has changed
+
+### Validation Errors
+
+- `dateFormat` - Invalid date format
+- `minDate` - Date is before minimum
+- `maxDate` - Date is after maximum
 
 ## `<ga-datepicker-toggle>`
 
-Toggle button component for opening datepicker.
+Toggle button component for opening datepicker overlay.
+
+### Inputs
 
-### Inputs:
+- `for: GaDatepickerInputDirective` - Associated datepicker input directive (required)
 
-- `for: GaDatepickerComponent` - Associated datepicker instance
+### Methods
+
+- `open()` - Open the datepicker overlay
+- `close()` - Close the datepicker overlay
+- `toggle()` - Toggle the datepicker overlay
 
 ## GaDatepickerI18n
 
-Service for datepicker internationalization.
+Abstract class for datepicker internationalization.
 
-### Methods:
+### Properties
 
+- `previousLabel: string` - Previous navigation button label
+- `nextLabel: string` - Next navigation button label
+- `selectMonthLabel: string` - Month selector label
+- `selectYearLabel: string` - Year selector label
+- `openCalendarLabel: string` - Calendar toggle button label
+- `todayButtonLabel: string` - Today button label
 - `weekDays: string[]` - Week day labels
 - `monthNames: string[]` - Full month names
 - `monthNamesShort: string[]` - Abbreviated month names
 
 ## GaDatepickerParserFormatter
 
-Service for parsing and formatting date strings.
+Abstract class for parsing and formatting date strings.
 
-### Methods:
+### Methods
 
-- `parse(value: string): any` - Parse string to date value
-- `format(value: any): string` - Format date value to string
+- `parse(value: string): GaDatepickerStruct | null` - Parse string to date struct
+- `format(date: GaDatepickerStruct | null): string` - Format date struct to string
 
 ## GaDatepickerValueAdapter
 
-Abstract service for converting between external and internal date representations.
+Abstract class for converting between external and internal date representations.
+
+### Methods
+
+- `toStruct(value: T | null): GaDatepickerStruct | null` - Convert external value to struct
+- `fromStruct(struct: GaDatepickerStruct | null): T | null` - Convert struct to external value
+
+## GaDatepickerStruct
+
+Interface for internal date representation.
+
+```typescript
+interface GaDatepickerStruct {
+  year: number;
+  month: number; // 1-12 (January = 1)
+  day: number;
+}
+```
 
-## Value Adapters:
+## Value Adapters
 
-- `GaDateStructAdapter` - Works with `{year, month, day}` objects
-- `GaDateNativeUtcAdapter` - Works with native Date objects in UTC
-- `GaDateNativeUtcIsoAdapter` - Works with ISO date strings
+- `GaDatepickerStructValueAdapter` - Works with `GaDatepickerStruct` objects (default)
+- `GaDatepickerNativeUtcValueAdapter` - Works with native Date objects in UTC
+- `GaDatepickerNativeUtcIsoValueAdapter` - Works with ISO date strings
 
-## Providers:
+## Providers
 
-- `provideGaDatepickerI18n(value: GaDatepickerI18n)` - Configure datepicker i18n
-- `provideGaDatepickerParserFormatter(value: GaDatepickerParserFormatter)` - Configure parser/formatter
-- `provideGaDatepickerValueAdapter<T>(value: GaDatepickerValueAdapter<T>)` - Configure value adapter
+- `provideGaDatepickerI18n(value)` - Configure i18n (accepts class, object, or factory)
+- `provideGaDatepickerParserFormatter(value)` - Configure parser/formatter (accepts class or factory)
+- `provideGaDatepickerValueAdapter<T>(value)` - Configure value adapter (accepts class)
+- `extendGaDateParserFormatter(formats)` - Extend default date formats for additional locales
 
-## Examples:
+## Examples
+
+Basic inline datepicker:
 
 ```html
 <ga-datepicker
@@ -84,11 +123,40 @@ Abstract service for converting between external and internal date representatio
   [min]="minDate"
   [max]="maxDate"
 ></ga-datepicker>
+```
+
+Datepicker with input and toggle:
 
+```html
 <ga-form-field>
   <label gaFieldLabel>Select Date</label>
-  <input gaInput [gaDatepicker]="picker" [(ngModel)]="date" />
-  <ga-datepicker-toggle [for]="picker"></ga-datepicker-toggle>
+  <input
+    gaInput
+    gaDatepickerInput
+    #dateInput="gaDatepickerInput"
+    [(ngModel)]="date"
+  />
+  <ga-datepicker-toggle [for]="dateInput"></ga-datepicker-toggle>
 </ga-form-field>
-<ga-datepicker #picker></ga-datepicker>
+```
+
+Using native Date adapter:
+
+```typescript
+providers: [provideGaDatepickerValueAdapter(GaDatepickerNativeUtcValueAdapter)];
+```
+
+Custom i18n labels:
+
+```typescript
+providers: [
+  provideGaDatepickerI18n({
+    previousLabel: 'Forrige',
+    nextLabel: 'Neste',
+    selectMonthLabel: 'Velg maaned',
+    selectYearLabel: 'Velg aar',
+    openCalendarLabel: 'Aapne kalender',
+    todayButtonLabel: 'I dag',
+  }),
+];
 ```

package/docs/icon.md

@@ -6,17 +6,37 @@ Icon component for displaying Lucide icons.
 
 ## `<ga-icon>`
 
-### Inputs:
+### Inputs
 
 - `icon: GaIconData | string` - Lucide icon (required)
-- `size: string | number` - Icon size (default: 24)
-- `color: string` - Icon color
-- `strokeWidth: number` - Stroke width
+- `size: string | number` - Icon size in pixels or CSS size string (default: 24)
+- `color: string` - Icon color as CSS color value
+- `strokeWidth: number` - Stroke width of the icon
 
-## Examples:
+## Examples
 
-Icon with custom styling
+Basic usage
 
 ```html
-<ga-icon [icon]="icons.Settings" size="32" color="var(--ga-color-primary)" />
+<ga-icon [icon]="icons.PackageOpen" />
+```
+
+Custom size
+
+```html
+<ga-icon [icon]="icons.PackageOpen" size="16" />
+<ga-icon [icon]="icons.PackageOpen" size="32" />
+```
+
+Custom color
+
+```html
+<ga-icon [icon]="icons.TriangleAlert" color="var(--ga-color-error)" />
+```
+
+Custom stroke width
+
+```html
+<ga-icon [icon]="icons.PackageOpen" [strokeWidth]="1" />
+<ga-icon [icon]="icons.PackageOpen" [strokeWidth]="3" />
 ```

package/docs/input.md

@@ -8,22 +8,60 @@ Input components and directives for text input fields.
 
 Input directive for styling input elements.
 
-### Inputs:
+Export: `gaInput`
 
-- `id: string` - Element ID
+### Inputs
+
+- `id: string` - Element ID (default: auto-generated)
 - `disabled: boolean` - Disabled state
 - `invalid: boolean` - Invalid state styling
 
+### Methods
+
+- `focus(): void` - Focuses the input element
+
 ## `<ga-input>`
 
-Input component wrapper.
+Wrapper component for inputs with prefix/suffix elements.
 
-## Examples:
+## Examples
+
+Basic input
 
 ```html
 <input gaInput type="text" placeholder="Enter text" [(ngModel)]="value" />
+```
+
+Input with prefix icon
+
+```html
+<ga-input>
+  <ga-icon [icon]="MailIcon" size="24" />
+  <input gaInput type="text" placeholder="Email" [(ngModel)]="email" />
+</ga-input>
+```
+
+Input with suffix button
 
+```html
 <ga-input>
-  <input type="text" placeholder="Wrapped input" [(ngModel)]="value" />
+  <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>
 ```
+
+Programmatic focus
+
+```typescript
+@ViewChild('myInput', { read: GaInputDirective }) myInput: GaInputDirective;
+
+focusInput() {
+  this.myInput.focus();
+}
+```
+
+```html
+<input gaInput #myInput type="text" />
+```

package/docs/link.md

@@ -4,11 +4,11 @@ Link directive for styled navigation links.
 
 **Angular module: GaLinkModule**
 
-## `[gaLink]`
+## `a[gaLink]`, `button[gaLink]`
 
-Link directive.
+Link directive for anchor and button elements.
 
-### Inputs:
+### Inputs
 
 - `gaLink: 'inline' | ''` - Link variant (default: '')
 - `gaLinkSize: 'small' | 'medium' | 'large'` - Link size (default: 'medium')
@@ -16,7 +16,7 @@ Link directive.
 - `gaLinkLeadingIcon: GaIconData | string` - Leading icon (default: '')
 - `gaLinkTrailingIcon: GaIconData | string` - Trailing icon (default: '')
 
-## Examples:
+## Examples
 
 Link variants
 

package/docs/menu.md

@@ -16,11 +16,12 @@ Menu title component.
 
 Menu item directive.
 
-### Inputs:
+### Inputs
 
-- `gaMenuItemIcon: GaIconData` - Item icon
+- `gaMenuItemIcon: GaIconData | string` - Item icon
 - `gaMenuItemDescription: string` - Item description
 - `gaMenuItemShortcut: string` - Keyboard shortcut
+- `gaMenuItemSelected: boolean` - Selected state (default: false)
 
 ## `<ga-menu-separator>`
 
@@ -28,22 +29,22 @@ Menu separator component.
 
 ## `<ga-menu-trigger-icon>`
 
-Trigger icon component.
+Trigger icon component that shows chevron up/down based on menu state.
 
 ## `[gaMenuTrigger]`
 
-Menu trigger directive.
+Menu trigger directive. Export as `gaMenuTrigger` for template reference.
 
-### Inputs:
+### Inputs
 
-- `gaMenuTrigger: TemplateRef` - Menu template (required)
+- `gaMenuTrigger: TemplateRef<any>` - Menu template (required)
 
-### Outputs:
+### Outputs
 
-- `gaMenuOpened()` - Opened event
-- `gaMenuClosed()` - Closed event
+- `gaMenuOpened: void` - Emitted when menu opens
+- `gaMenuClosed: void` - Emitted when menu closes
 
-## Examples:
+## Examples
 
 Menu with trigger