ux4g-components-angular 1.4.1 → 1.5.0

package/dist/social-links/README.md

@@ -1397,6 +1397,140 @@ Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadc
 
 ---
 
+## Native Wrappers
+
+In addition to the default thin wrappers documented above, this package provides **Native Wrappers** — Angular components that internally generate the complete UX4G-compliant DOM structure. With Native Wrappers, you declare a single element with input bindings and get a fully rendered, accessible, interactive component without writing any HTML markup.
+
+### Architecture Decision
+
+> **Thin Wrappers are the default export. Native Wrappers are opt-in via `/native/` sub-paths.** This decision shall not be reversed without a major version bump.
+
+- Existing thin wrapper imports (e.g., `ux4g-components-angular/dropdown`) remain unchanged
+- Native Wrappers use the `/native/` sub-path convention (e.g., `ux4g-components-angular/native/dropdown`)
+- Both can coexist in the same application without conflicts
+
+### Import Convention
+
+```ts
+// Thin Wrapper (default — unchanged)
+import { UX4GDropdownModule } from 'ux4g-components-angular/dropdown';
+
+// Native Wrapper (opt-in)
+import { UX4GNativeDropdownComponent } from 'ux4g-components-angular/native/dropdown';
+```
+
+### Usage Example
+
+```ts
+// app.component.ts
+import { Component } from '@angular/core';
+import { UX4GNativeDropdownComponent } from 'ux4g-components-angular/native/dropdown';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [UX4GNativeDropdownComponent],
+  template: `
+    <ux4g-native-dropdown
+      [options]="options"
+      [(ngModel)]="selected"
+      placeholder="Select..."
+      size="md"
+    ></ux4g-native-dropdown>
+  `,
+})
+export class AppComponent {
+  options = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3', disabled: true },
+  ];
+  selected = '1';
+}
+```
+
+Compare this to the thin wrapper approach, which requires manual HTML structure:
+
+```html
+<!-- Thin wrapper — consumer provides all HTML structure -->
+<ux4g-dropdown type="selection" mode="single" size="md" state="default">
+  <ux4g-dropdown-item value="1">Option 1</ux4g-dropdown-item>
+  <ux4g-dropdown-item value="2">Option 2</ux4g-dropdown-item>
+  <ux4g-dropdown-item value="3">Option 3</ux4g-dropdown-item>
+</ux4g-dropdown>
+```
+
+### Available Native Wrapper Components (19)
+
+| Import Path | Component |
+|---|---|
+| `ux4g-components-angular/native/dropdown` | Dropdown |
+| `ux4g-components-angular/native/accordion` | Accordion |
+| `ux4g-components-angular/native/tabs` | Tabs |
+| `ux4g-components-angular/native/modal` | Modal |
+| `ux4g-components-angular/native/carousel` | Carousel |
+| `ux4g-components-angular/native/date-picker` | Date Picker |
+| `ux4g-components-angular/native/time-picker` | Time Picker |
+| `ux4g-components-angular/native/drawer` | Drawer |
+| `ux4g-components-angular/native/combobox` | Combobox |
+| `ux4g-components-angular/native/search` | Search |
+| `ux4g-components-angular/native/otp` | OTP Input |
+| `ux4g-components-angular/native/progress` | Progress Indicator |
+| `ux4g-components-angular/native/file-upload` | File Upload |
+| `ux4g-components-angular/native/table` | Table |
+| `ux4g-components-angular/native/stepper` | Stepper |
+| `ux4g-components-angular/native/popover` | Popover |
+| `ux4g-components-angular/native/tooltip` | Tooltip |
+| `ux4g-components-angular/native/avatar` | Avatar |
+| `ux4g-components-angular/native/chip` | Chip |
+
+### Key Differences from Thin Wrappers
+
+| Feature | Thin Wrapper | Native Wrapper |
+|---|---|---|
+| DOM structure | Consumer provides HTML | Generated internally |
+| Data attributes | Consumer adds manually | Included automatically |
+| ARIA attributes | Consumer manages | Built-in |
+| Interactive behaviors | Consumer wires up | Works via Runtime JS auto-init |
+| Angular Forms | N/A | `ControlValueAccessor` support |
+| Standalone | NgModule-based | `standalone: true` (NgModule also available) |
+
+### Angular Forms Integration
+
+Native Wrappers for form control components implement `ControlValueAccessor`, so they work with both template-driven and reactive forms:
+
+```html
+<!-- Template-driven -->
+<ux4g-native-dropdown [options]="options" [(ngModel)]="selected"></ux4g-native-dropdown>
+
+<!-- Reactive forms -->
+<ux4g-native-dropdown [options]="options" formControlName="country"></ux4g-native-dropdown>
+```
+
+### Standalone and NgModule Support
+
+Native Wrappers are declared as `standalone: true` for Angular 17+ consumers. An NgModule is also provided for backward compatibility:
+
+```ts
+// Standalone (Angular 17+)
+import { UX4GNativeDropdownComponent } from 'ux4g-components-angular/native/dropdown';
+
+@Component({
+  standalone: true,
+  imports: [UX4GNativeDropdownComponent],
+  // ...
+})
+
+// NgModule (Angular 15–16)
+import { UX4GNativeDropdownModule } from 'ux4g-components-angular/native/dropdown';
+
+@NgModule({
+  imports: [UX4GNativeDropdownModule],
+})
+```
+
+---
+
 ## Related Packages
 
 - [`ux4g-components-web`](https://www.npmjs.com/package/ux4g-components-web) — CSS bundle and shared types (required)

package/dist/spinner/README.md

@@ -1397,6 +1397,140 @@ Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadc
 
 ---
 
+## Native Wrappers
+
+In addition to the default thin wrappers documented above, this package provides **Native Wrappers** — Angular components that internally generate the complete UX4G-compliant DOM structure. With Native Wrappers, you declare a single element with input bindings and get a fully rendered, accessible, interactive component without writing any HTML markup.
+
+### Architecture Decision
+
+> **Thin Wrappers are the default export. Native Wrappers are opt-in via `/native/` sub-paths.** This decision shall not be reversed without a major version bump.
+
+- Existing thin wrapper imports (e.g., `ux4g-components-angular/dropdown`) remain unchanged
+- Native Wrappers use the `/native/` sub-path convention (e.g., `ux4g-components-angular/native/dropdown`)
+- Both can coexist in the same application without conflicts
+
+### Import Convention
+
+```ts
+// Thin Wrapper (default — unchanged)
+import { UX4GDropdownModule } from 'ux4g-components-angular/dropdown';
+
+// Native Wrapper (opt-in)
+import { UX4GNativeDropdownComponent } from 'ux4g-components-angular/native/dropdown';
+```
+
+### Usage Example
+
+```ts
+// app.component.ts
+import { Component } from '@angular/core';
+import { UX4GNativeDropdownComponent } from 'ux4g-components-angular/native/dropdown';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [UX4GNativeDropdownComponent],
+  template: `
+    <ux4g-native-dropdown
+      [options]="options"
+      [(ngModel)]="selected"
+      placeholder="Select..."
+      size="md"
+    ></ux4g-native-dropdown>
+  `,
+})
+export class AppComponent {
+  options = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3', disabled: true },
+  ];
+  selected = '1';
+}
+```
+
+Compare this to the thin wrapper approach, which requires manual HTML structure:
+
+```html
+<!-- Thin wrapper — consumer provides all HTML structure -->
+<ux4g-dropdown type="selection" mode="single" size="md" state="default">
+  <ux4g-dropdown-item value="1">Option 1</ux4g-dropdown-item>
+  <ux4g-dropdown-item value="2">Option 2</ux4g-dropdown-item>
+  <ux4g-dropdown-item value="3">Option 3</ux4g-dropdown-item>
+</ux4g-dropdown>
+```
+
+### Available Native Wrapper Components (19)
+
+| Import Path | Component |
+|---|---|
+| `ux4g-components-angular/native/dropdown` | Dropdown |
+| `ux4g-components-angular/native/accordion` | Accordion |
+| `ux4g-components-angular/native/tabs` | Tabs |
+| `ux4g-components-angular/native/modal` | Modal |
+| `ux4g-components-angular/native/carousel` | Carousel |
+| `ux4g-components-angular/native/date-picker` | Date Picker |
+| `ux4g-components-angular/native/time-picker` | Time Picker |
+| `ux4g-components-angular/native/drawer` | Drawer |
+| `ux4g-components-angular/native/combobox` | Combobox |
+| `ux4g-components-angular/native/search` | Search |
+| `ux4g-components-angular/native/otp` | OTP Input |
+| `ux4g-components-angular/native/progress` | Progress Indicator |
+| `ux4g-components-angular/native/file-upload` | File Upload |
+| `ux4g-components-angular/native/table` | Table |
+| `ux4g-components-angular/native/stepper` | Stepper |
+| `ux4g-components-angular/native/popover` | Popover |
+| `ux4g-components-angular/native/tooltip` | Tooltip |
+| `ux4g-components-angular/native/avatar` | Avatar |
+| `ux4g-components-angular/native/chip` | Chip |
+
+### Key Differences from Thin Wrappers
+
+| Feature | Thin Wrapper | Native Wrapper |
+|---|---|---|
+| DOM structure | Consumer provides HTML | Generated internally |
+| Data attributes | Consumer adds manually | Included automatically |
+| ARIA attributes | Consumer manages | Built-in |
+| Interactive behaviors | Consumer wires up | Works via Runtime JS auto-init |
+| Angular Forms | N/A | `ControlValueAccessor` support |
+| Standalone | NgModule-based | `standalone: true` (NgModule also available) |
+
+### Angular Forms Integration
+
+Native Wrappers for form control components implement `ControlValueAccessor`, so they work with both template-driven and reactive forms:
+
+```html
+<!-- Template-driven -->
+<ux4g-native-dropdown [options]="options" [(ngModel)]="selected"></ux4g-native-dropdown>
+
+<!-- Reactive forms -->
+<ux4g-native-dropdown [options]="options" formControlName="country"></ux4g-native-dropdown>
+```
+
+### Standalone and NgModule Support
+
+Native Wrappers are declared as `standalone: true` for Angular 17+ consumers. An NgModule is also provided for backward compatibility:
+
+```ts
+// Standalone (Angular 17+)
+import { UX4GNativeDropdownComponent } from 'ux4g-components-angular/native/dropdown';
+
+@Component({
+  standalone: true,
+  imports: [UX4GNativeDropdownComponent],
+  // ...
+})
+
+// NgModule (Angular 15–16)
+import { UX4GNativeDropdownModule } from 'ux4g-components-angular/native/dropdown';
+
+@NgModule({
+  imports: [UX4GNativeDropdownModule],
+})
+```
+
+---
+
 ## Related Packages
 
 - [`ux4g-components-web`](https://www.npmjs.com/package/ux4g-components-web) — CSS bundle and shared types (required)

package/dist/status-pipeline/README.md

@@ -1397,6 +1397,140 @@ Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadc
 
 ---
 
+## Native Wrappers
+
+In addition to the default thin wrappers documented above, this package provides **Native Wrappers** — Angular components that internally generate the complete UX4G-compliant DOM structure. With Native Wrappers, you declare a single element with input bindings and get a fully rendered, accessible, interactive component without writing any HTML markup.
+
+### Architecture Decision
+
+> **Thin Wrappers are the default export. Native Wrappers are opt-in via `/native/` sub-paths.** This decision shall not be reversed without a major version bump.
+
+- Existing thin wrapper imports (e.g., `ux4g-components-angular/dropdown`) remain unchanged
+- Native Wrappers use the `/native/` sub-path convention (e.g., `ux4g-components-angular/native/dropdown`)
+- Both can coexist in the same application without conflicts
+
+### Import Convention
+
+```ts
+// Thin Wrapper (default — unchanged)
+import { UX4GDropdownModule } from 'ux4g-components-angular/dropdown';
+
+// Native Wrapper (opt-in)
+import { UX4GNativeDropdownComponent } from 'ux4g-components-angular/native/dropdown';
+```
+
+### Usage Example
+
+```ts
+// app.component.ts
+import { Component } from '@angular/core';
+import { UX4GNativeDropdownComponent } from 'ux4g-components-angular/native/dropdown';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [UX4GNativeDropdownComponent],
+  template: `
+    <ux4g-native-dropdown
+      [options]="options"
+      [(ngModel)]="selected"
+      placeholder="Select..."
+      size="md"
+    ></ux4g-native-dropdown>
+  `,
+})
+export class AppComponent {
+  options = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3', disabled: true },
+  ];
+  selected = '1';
+}
+```
+
+Compare this to the thin wrapper approach, which requires manual HTML structure:
+
+```html
+<!-- Thin wrapper — consumer provides all HTML structure -->
+<ux4g-dropdown type="selection" mode="single" size="md" state="default">
+  <ux4g-dropdown-item value="1">Option 1</ux4g-dropdown-item>
+  <ux4g-dropdown-item value="2">Option 2</ux4g-dropdown-item>
+  <ux4g-dropdown-item value="3">Option 3</ux4g-dropdown-item>
+</ux4g-dropdown>
+```
+
+### Available Native Wrapper Components (19)
+
+| Import Path | Component |
+|---|---|
+| `ux4g-components-angular/native/dropdown` | Dropdown |
+| `ux4g-components-angular/native/accordion` | Accordion |
+| `ux4g-components-angular/native/tabs` | Tabs |
+| `ux4g-components-angular/native/modal` | Modal |
+| `ux4g-components-angular/native/carousel` | Carousel |
+| `ux4g-components-angular/native/date-picker` | Date Picker |
+| `ux4g-components-angular/native/time-picker` | Time Picker |
+| `ux4g-components-angular/native/drawer` | Drawer |
+| `ux4g-components-angular/native/combobox` | Combobox |
+| `ux4g-components-angular/native/search` | Search |
+| `ux4g-components-angular/native/otp` | OTP Input |
+| `ux4g-components-angular/native/progress` | Progress Indicator |
+| `ux4g-components-angular/native/file-upload` | File Upload |
+| `ux4g-components-angular/native/table` | Table |
+| `ux4g-components-angular/native/stepper` | Stepper |
+| `ux4g-components-angular/native/popover` | Popover |
+| `ux4g-components-angular/native/tooltip` | Tooltip |
+| `ux4g-components-angular/native/avatar` | Avatar |
+| `ux4g-components-angular/native/chip` | Chip |
+
+### Key Differences from Thin Wrappers
+
+| Feature | Thin Wrapper | Native Wrapper |
+|---|---|---|
+| DOM structure | Consumer provides HTML | Generated internally |
+| Data attributes | Consumer adds manually | Included automatically |
+| ARIA attributes | Consumer manages | Built-in |
+| Interactive behaviors | Consumer wires up | Works via Runtime JS auto-init |
+| Angular Forms | N/A | `ControlValueAccessor` support |
+| Standalone | NgModule-based | `standalone: true` (NgModule also available) |
+
+### Angular Forms Integration
+
+Native Wrappers for form control components implement `ControlValueAccessor`, so they work with both template-driven and reactive forms:
+
+```html
+<!-- Template-driven -->
+<ux4g-native-dropdown [options]="options" [(ngModel)]="selected"></ux4g-native-dropdown>
+
+<!-- Reactive forms -->
+<ux4g-native-dropdown [options]="options" formControlName="country"></ux4g-native-dropdown>
+```
+
+### Standalone and NgModule Support
+
+Native Wrappers are declared as `standalone: true` for Angular 17+ consumers. An NgModule is also provided for backward compatibility:
+
+```ts
+// Standalone (Angular 17+)
+import { UX4GNativeDropdownComponent } from 'ux4g-components-angular/native/dropdown';
+
+@Component({
+  standalone: true,
+  imports: [UX4GNativeDropdownComponent],
+  // ...
+})
+
+// NgModule (Angular 15–16)
+import { UX4GNativeDropdownModule } from 'ux4g-components-angular/native/dropdown';
+
+@NgModule({
+  imports: [UX4GNativeDropdownModule],
+})
+```
+
+---
+
 ## Related Packages
 
 - [`ux4g-components-web`](https://www.npmjs.com/package/ux4g-components-web) — CSS bundle and shared types (required)

package/dist/stepper/README.md

@@ -1397,6 +1397,140 @@ Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadc
 
 ---
 
+## Native Wrappers
+
+In addition to the default thin wrappers documented above, this package provides **Native Wrappers** — Angular components that internally generate the complete UX4G-compliant DOM structure. With Native Wrappers, you declare a single element with input bindings and get a fully rendered, accessible, interactive component without writing any HTML markup.
+
+### Architecture Decision
+
+> **Thin Wrappers are the default export. Native Wrappers are opt-in via `/native/` sub-paths.** This decision shall not be reversed without a major version bump.
+
+- Existing thin wrapper imports (e.g., `ux4g-components-angular/dropdown`) remain unchanged
+- Native Wrappers use the `/native/` sub-path convention (e.g., `ux4g-components-angular/native/dropdown`)
+- Both can coexist in the same application without conflicts
+
+### Import Convention
+
+```ts
+// Thin Wrapper (default — unchanged)
+import { UX4GDropdownModule } from 'ux4g-components-angular/dropdown';
+
+// Native Wrapper (opt-in)
+import { UX4GNativeDropdownComponent } from 'ux4g-components-angular/native/dropdown';
+```
+
+### Usage Example
+
+```ts
+// app.component.ts
+import { Component } from '@angular/core';
+import { UX4GNativeDropdownComponent } from 'ux4g-components-angular/native/dropdown';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [UX4GNativeDropdownComponent],
+  template: `
+    <ux4g-native-dropdown
+      [options]="options"
+      [(ngModel)]="selected"
+      placeholder="Select..."
+      size="md"
+    ></ux4g-native-dropdown>
+  `,
+})
+export class AppComponent {
+  options = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3', disabled: true },
+  ];
+  selected = '1';
+}
+```
+
+Compare this to the thin wrapper approach, which requires manual HTML structure:
+
+```html
+<!-- Thin wrapper — consumer provides all HTML structure -->
+<ux4g-dropdown type="selection" mode="single" size="md" state="default">
+  <ux4g-dropdown-item value="1">Option 1</ux4g-dropdown-item>
+  <ux4g-dropdown-item value="2">Option 2</ux4g-dropdown-item>
+  <ux4g-dropdown-item value="3">Option 3</ux4g-dropdown-item>
+</ux4g-dropdown>
+```
+
+### Available Native Wrapper Components (19)
+
+| Import Path | Component |
+|---|---|
+| `ux4g-components-angular/native/dropdown` | Dropdown |
+| `ux4g-components-angular/native/accordion` | Accordion |
+| `ux4g-components-angular/native/tabs` | Tabs |
+| `ux4g-components-angular/native/modal` | Modal |
+| `ux4g-components-angular/native/carousel` | Carousel |
+| `ux4g-components-angular/native/date-picker` | Date Picker |
+| `ux4g-components-angular/native/time-picker` | Time Picker |
+| `ux4g-components-angular/native/drawer` | Drawer |
+| `ux4g-components-angular/native/combobox` | Combobox |
+| `ux4g-components-angular/native/search` | Search |
+| `ux4g-components-angular/native/otp` | OTP Input |
+| `ux4g-components-angular/native/progress` | Progress Indicator |
+| `ux4g-components-angular/native/file-upload` | File Upload |
+| `ux4g-components-angular/native/table` | Table |
+| `ux4g-components-angular/native/stepper` | Stepper |
+| `ux4g-components-angular/native/popover` | Popover |
+| `ux4g-components-angular/native/tooltip` | Tooltip |
+| `ux4g-components-angular/native/avatar` | Avatar |
+| `ux4g-components-angular/native/chip` | Chip |
+
+### Key Differences from Thin Wrappers
+
+| Feature | Thin Wrapper | Native Wrapper |
+|---|---|---|
+| DOM structure | Consumer provides HTML | Generated internally |
+| Data attributes | Consumer adds manually | Included automatically |
+| ARIA attributes | Consumer manages | Built-in |
+| Interactive behaviors | Consumer wires up | Works via Runtime JS auto-init |
+| Angular Forms | N/A | `ControlValueAccessor` support |
+| Standalone | NgModule-based | `standalone: true` (NgModule also available) |
+
+### Angular Forms Integration
+
+Native Wrappers for form control components implement `ControlValueAccessor`, so they work with both template-driven and reactive forms:
+
+```html
+<!-- Template-driven -->
+<ux4g-native-dropdown [options]="options" [(ngModel)]="selected"></ux4g-native-dropdown>
+
+<!-- Reactive forms -->
+<ux4g-native-dropdown [options]="options" formControlName="country"></ux4g-native-dropdown>
+```
+
+### Standalone and NgModule Support
+
+Native Wrappers are declared as `standalone: true` for Angular 17+ consumers. An NgModule is also provided for backward compatibility:
+
+```ts
+// Standalone (Angular 17+)
+import { UX4GNativeDropdownComponent } from 'ux4g-components-angular/native/dropdown';
+
+@Component({
+  standalone: true,
+  imports: [UX4GNativeDropdownComponent],
+  // ...
+})
+
+// NgModule (Angular 15–16)
+import { UX4GNativeDropdownModule } from 'ux4g-components-angular/native/dropdown';
+
+@NgModule({
+  imports: [UX4GNativeDropdownModule],
+})
+```
+
+---
+
 ## Related Packages
 
 - [`ux4g-components-web`](https://www.npmjs.com/package/ux4g-components-web) — CSS bundle and shared types (required)