ux4g-components-angular 1.4.1 → 1.5.0

package/dist/native/tooltip/fesm2022/ux4g-components-angular-native-tooltip.mjs

@@ -0,0 +1,80 @@
+import * as i0 from '@angular/core';
+import { Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { generateTooltipDOM } from 'ux4g-components-web/dom-generators';
+import { BaseNativeComponent, renderDescriptorToDOM } from '@ux4g-native-shared';
+
+/**
+ * Angular Native Tooltip component.
+ * Generates the complete UX4G tooltip DOM structure internally using the shared DOM Generator.
+ *
+ * Produces a tooltip wrapper containing a trigger element with `data-ux4g-tooltip`
+ * and `aria-describedby`, plus a tooltip container with `role="tooltip"`, arrow element,
+ * and `data-placement` attribute for Runtime_JS positioning.
+ *
+ * Usage:
+ * ```html
+ * <ux4g-native-tooltip
+ *   [text]="'Help text'"
+ *   [placement]="'top-center'"
+ *   [size]="'s'">
+ * </ux4g-native-tooltip>
+ * ```
+ */
+class UX4GNativeTooltipComponent extends BaseNativeComponent {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.placement = 'top-center';
+        this.size = 's';
+    }
+    ngOnChanges(_changes) {
+        this.renderComponent();
+    }
+    renderComponent() {
+        super.renderComponent();
+        const props = {
+            text: this.text,
+            placement: this.placement,
+            size: this.size,
+        };
+        const descriptor = generateTooltipDOM(props);
+        renderDescriptorToDOM(this.renderer, descriptor, this.elementRef.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeTooltipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: UX4GNativeTooltipComponent, isStandalone: true, selector: "ux4g-native-tooltip", inputs: { text: "text", placement: "placement", size: "size" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeTooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ux4g-native-tooltip',
+                    standalone: true,
+                    template: '',
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class UX4GNativeTooltipModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeTooltipModule, imports: [UX4GNativeTooltipComponent], exports: [UX4GNativeTooltipComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeTooltipModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeTooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [UX4GNativeTooltipComponent],
+                    exports: [UX4GNativeTooltipComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UX4GNativeTooltipComponent, UX4GNativeTooltipModule };
+//# sourceMappingURL=ux4g-components-angular-native-tooltip.mjs.map

package/dist/native/tooltip/fesm2022/ux4g-components-angular-native-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ux4g-components-angular-native-tooltip.mjs","sources":["../../../../src/native/tooltip/ux4g-native-tooltip.component.ts","../../../../src/native/tooltip/ux4g-native-tooltip.module.ts","../../../../src/native/tooltip/ux4g-components-angular-native-tooltip.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  ViewEncapsulation,\r\n  OnChanges,\r\n  SimpleChanges,\r\n} from '@angular/core';\r\nimport { generateTooltipDOM, TooltipGeneratorProps } from 'ux4g-components-web/dom-generators';\r\nimport { TooltipPlacement, TooltipSize } from 'ux4g-components-web/types';\r\nimport { BaseNativeComponent, renderDescriptorToDOM } from '@ux4g-native-shared';\r\n\r\n/**\r\n * Angular Native Tooltip component.\r\n * Generates the complete UX4G tooltip DOM structure internally using the shared DOM Generator.\r\n *\r\n * Produces a tooltip wrapper containing a trigger element with `data-ux4g-tooltip`\r\n * and `aria-describedby`, plus a tooltip container with `role=\"tooltip\"`, arrow element,\r\n * and `data-placement` attribute for Runtime_JS positioning.\r\n *\r\n * Usage:\r\n * ```html\r\n * <ux4g-native-tooltip\r\n *   [text]=\"'Help text'\"\r\n *   [placement]=\"'top-center'\"\r\n *   [size]=\"'s'\">\r\n * </ux4g-native-tooltip>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'ux4g-native-tooltip',\r\n  standalone: true,\r\n  template: '',\r\n  encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class UX4GNativeTooltipComponent extends BaseNativeComponent implements OnChanges {\r\n  @Input() text: string = '';\r\n  @Input() placement: TooltipPlacement = 'top-center';\r\n  @Input() size: TooltipSize = 's';\r\n\r\n  ngOnChanges(_changes: SimpleChanges): void {\r\n    this.renderComponent();\r\n  }\r\n\r\n  protected override renderComponent(): void {\r\n    super.renderComponent();\r\n\r\n    const props: TooltipGeneratorProps = {\r\n      text: this.text,\r\n      placement: this.placement,\r\n      size: this.size,\r\n    };\r\n\r\n    const descriptor = generateTooltipDOM(props);\r\n    renderDescriptorToDOM(this.renderer, descriptor, this.elementRef.nativeElement);\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { UX4GNativeTooltipComponent } from './ux4g-native-tooltip.component';\r\n\r\n@NgModule({\r\n  imports: [UX4GNativeTooltipComponent],\r\n  exports: [UX4GNativeTooltipComponent],\r\n})\r\nexport class UX4GNativeTooltipModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAWA;;;;;;;;;;;;;;;;AAgBG;AAOG,MAAO,0BAA2B,SAAQ,mBAAmB,CAAA;AANnE,IAAA,WAAA,GAAA;;QAOW,IAAA,CAAA,IAAI,GAAW,EAAE;QACjB,IAAA,CAAA,SAAS,GAAqB,YAAY;QAC1C,IAAA,CAAA,IAAI,GAAgB,GAAG;AAkBjC,IAAA;AAhBC,IAAA,WAAW,CAAC,QAAuB,EAAA;QACjC,IAAI,CAAC,eAAe,EAAE;IACxB;IAEmB,eAAe,GAAA;QAChC,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,MAAM,KAAK,GAA0B;YACnC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB;AAED,QAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAC5C,QAAA,qBAAqB,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;IACjF;+GApBW,0BAA0B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,0BAA0B,2LAH3B,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAGD,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBANtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,EAAE;oBACZ,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACtC,iBAAA;8BAEU,IAAI,EAAA,CAAA;sBAAZ;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACQ,IAAI,EAAA,CAAA;sBAAZ;;;MC9BU,uBAAuB,CAAA;+GAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAAvB,uBAAuB,EAAA,OAAA,EAAA,CAHxB,0BAA0B,CAAA,EAAA,OAAA,EAAA,CAC1B,0BAA0B,CAAA,EAAA,CAAA,CAAA;gHAEzB,uBAAuB,EAAA,CAAA,CAAA;;4FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,0BAA0B,CAAC;oBACrC,OAAO,EAAE,CAAC,0BAA0B,CAAC;AACtC,iBAAA;;;ACND;;AAEG;;;;"}

package/dist/native/tooltip/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ux4g-components-angular" />
+export * from './public-api';
+//# sourceMappingURL=ux4g-components-angular-native-tooltip.d.ts.map

package/dist/native/tooltip/public-api.d.ts

@@ -0,0 +1,3 @@
+export { UX4GNativeTooltipComponent } from './ux4g-native-tooltip.component';
+export { UX4GNativeTooltipModule } from './ux4g-native-tooltip.module';
+//# sourceMappingURL=public-api.d.ts.map

package/dist/native/tooltip/public-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../../src/native/tooltip/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/native/tooltip/ux4g-components-angular-native-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ux4g-components-angular-native-tooltip.d.ts","sourceRoot":"","sources":["../../../src/native/tooltip/ux4g-components-angular-native-tooltip.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,cAAc,cAAc,CAAC"}

package/dist/native/tooltip/ux4g-native-tooltip.component.d.ts

@@ -0,0 +1,31 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { TooltipPlacement, TooltipSize } from 'ux4g-components-web/types';
+import { BaseNativeComponent } from '@ux4g-native-shared';
+import * as i0 from "@angular/core";
+/**
+ * Angular Native Tooltip component.
+ * Generates the complete UX4G tooltip DOM structure internally using the shared DOM Generator.
+ *
+ * Produces a tooltip wrapper containing a trigger element with `data-ux4g-tooltip`
+ * and `aria-describedby`, plus a tooltip container with `role="tooltip"`, arrow element,
+ * and `data-placement` attribute for Runtime_JS positioning.
+ *
+ * Usage:
+ * ```html
+ * <ux4g-native-tooltip
+ *   [text]="'Help text'"
+ *   [placement]="'top-center'"
+ *   [size]="'s'">
+ * </ux4g-native-tooltip>
+ * ```
+ */
+export declare class UX4GNativeTooltipComponent extends BaseNativeComponent implements OnChanges {
+    text: string;
+    placement: TooltipPlacement;
+    size: TooltipSize;
+    ngOnChanges(_changes: SimpleChanges): void;
+    protected renderComponent(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UX4GNativeTooltipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UX4GNativeTooltipComponent, "ux4g-native-tooltip", never, { "text": { "alias": "text"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=ux4g-native-tooltip.component.d.ts.map

package/dist/native/tooltip/ux4g-native-tooltip.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ux4g-native-tooltip.component.d.ts","sourceRoot":"","sources":["../../../src/native/tooltip/ux4g-native-tooltip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EACT,aAAa,EACd,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAyB,MAAM,qBAAqB,CAAC;;AAEjF;;;;;;;;;;;;;;;;GAgBG;AACH,qBAMa,0BAA2B,SAAQ,mBAAoB,YAAW,SAAS;IAC7E,IAAI,EAAE,MAAM,CAAM;IAClB,SAAS,EAAE,gBAAgB,CAAgB;IAC3C,IAAI,EAAE,WAAW,CAAO;IAEjC,WAAW,CAAC,QAAQ,EAAE,aAAa,GAAG,IAAI;cAIvB,eAAe,IAAI,IAAI;yCAT/B,0BAA0B;2CAA1B,0BAA0B;CAqBtC"}

package/dist/native/tooltip/ux4g-native-tooltip.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ux4g-native-tooltip.component";
+export declare class UX4GNativeTooltipModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UX4GNativeTooltipModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UX4GNativeTooltipModule, never, [typeof i1.UX4GNativeTooltipComponent], [typeof i1.UX4GNativeTooltipComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UX4GNativeTooltipModule>;
+}
+//# sourceMappingURL=ux4g-native-tooltip.module.d.ts.map

package/dist/native/tooltip/ux4g-native-tooltip.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ux4g-native-tooltip.module.d.ts","sourceRoot":"","sources":["../../../src/native/tooltip/ux4g-native-tooltip.module.ts"],"names":[],"mappings":";;AAGA,qBAIa,uBAAuB;yCAAvB,uBAAuB;0CAAvB,uBAAuB;0CAAvB,uBAAuB;CAAG"}

package/dist/navbar/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/otp-input/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/pagination/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)