ux4g-components-angular 1.4.0 → 1.4.1

package/dist/navbar/README.md

@@ -196,14 +196,20 @@ export class AppModule {}
 
 ```html
 <ux4g-image src="photo.jpg" alt="Photo" ratio="16-9"></ux4g-image>
-<ux4g-image src="photo.jpg" alt="Photo" ratio="4-3" [rounded]="true" [overlay]="true"></ux4g-image>
+<ux4g-image src="photo.jpg" alt="Photo" ratio="4-3" [rounded]="true"></ux4g-image>
+<ux4g-image src="photo.jpg" alt="Photo" ratio="16-9" [overlay]="true" overlayPosition="bottom">
+  <ng-template #overlayContent>
+    <p class="ux4g-body-m-default">Caption text</p>
+  </ng-template>
+</ux4g-image>
 ```
 
 | Input | Type | Default | Description |
 |---|---|---|---|
 | `ratio` | `'1-1' \| '4-3' \| '3-2' \| '16-10' \| '16-9' \| '2-1' \| '5-2' \| '3-1' \| '1-16' \| '2-3' \| '3-4'` | — | Aspect ratio |
 | `rounded` | `boolean` | `false` | Rounded corners |
-| `overlay` | `boolean` | `false` | Enable overlay |
+| `overlay` | `boolean` | `false` | Enable overlay container |
+| `overlayPosition` | `'top' \| 'bottom' \| 'center' \| 'full'` | `'bottom'` | Overlay position |
 
 ### Chip
 
@@ -296,15 +302,36 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-checkbox size="md" label="Accept terms"></ux4g-checkbox>
-<ux4g-checkbox size="sm" [error]="true" label="Required field"></ux4g-checkbox>
+<label>
+  <ux4g-checkbox size="md" [checked]="isChecked" (changed)="onCheck($event)"></ux4g-checkbox>
+  Accept terms
+</label>
+
+<label>
+  <ux4g-checkbox size="sm" [error]="true"></ux4g-checkbox>
+  Required field
+</label>
+
+<label>
+  <ux4g-checkbox size="md" [indeterminate]="true"></ux4g-checkbox>
+  Select all
+</label>
 ```
 
 | Input | Type | Default | Description |
 |---|---|---|---|
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Checkbox size |
+| `checked` | `boolean` | `false` | Checked state |
+| `indeterminate` | `boolean` | `false` | Indeterminate state |
+| `disabled` | `boolean` | `false` | Disabled state |
 | `error` | `boolean` | `false` | Error state |
 
+| Output | Type | Description |
+|---|---|---|
+| `changed` | `EventEmitter<Event>` | Emitted on change |
+
+> **Note:** This is a control-only wrapper. Wrap with `<label>` to associate visible text.
+
 ### Radio
 
 ```ts
@@ -315,14 +342,30 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-radio size="md" name="option" label="Option A"></ux4g-radio>
-<ux4g-radio size="lg" name="option" label="Option B" [error]="true"></ux4g-radio>
+<label>
+  <ux4g-radio size="md" name="option" value="a" [checked]="selected === 'a'" (changed)="onSelect($event)"></ux4g-radio>
+  Option A
+</label>
+<label>
+  <ux4g-radio size="lg" name="option" value="b" [error]="true"></ux4g-radio>
+  Option B
+</label>
 ```
 
 | Input | Type | Default | Description |
 |---|---|---|---|
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Radio size |
+| `checked` | `boolean` | `false` | Checked state |
+| `disabled` | `boolean` | `false` | Disabled state |
 | `error` | `boolean` | `false` | Error state |
+| `name` | `string` | `''` | Radio group name |
+| `value` | `string` | `''` | Radio value |
+
+| Output | Type | Description |
+|---|---|---|
+| `changed` | `EventEmitter<Event>` | Emitted on change |
+
+> **Note:** This is a control-only wrapper. Wrap with `<label>` to associate visible text.
 
 ### Switch
 
@@ -334,12 +377,23 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-switch size="md" label="Enable notifications"></ux4g-switch>
+<label>
+  <ux4g-switch size="md" [checked]="isOn" (changed)="onToggle($event)"></ux4g-switch>
+  Enable notifications
+</label>
 ```
 
 | Input | Type | Default | Description |
 |---|---|---|---|
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Switch size |
+| `checked` | `boolean` | `false` | Checked state |
+| `disabled` | `boolean` | `false` | Disabled state |
+
+| Output | Type | Description |
+|---|---|---|
+| `changed` | `EventEmitter<Event>` | Emitted on change |
+
+> **Note:** This is a control-only wrapper. Wrap with `<label>` to associate visible text.
 
 ### Card
 
@@ -377,14 +431,30 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-input size="md" state="default" label="Email" placeholder="Enter email"></ux4g-input>
-<ux4g-input size="lg" state="error" label="Password" helperText="Password is required"></ux4g-input>
+<ux4g-input size="md" state="default">
+  <label class="ux4g-input-label">Email</label>
+  <input class="ux4g-input" type="email" placeholder="Enter email" />
+</ux4g-input>
+
+<ux4g-input size="lg" state="error">
+  <label class="ux4g-input-label">Password</label>
+  <input class="ux4g-input" type="password" />
+  <span class="ux4g-input-helper">Password is required</span>
+</ux4g-input>
+
+<ux4g-input size="md" state="default" [disabled]="true">
+  <label class="ux4g-input-label">Disabled</label>
+  <input class="ux4g-input" type="text" disabled />
+</ux4g-input>
 ```
 
 | Input | Type | Default | Description |
 |---|---|---|---|
-| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Input size |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Input container size |
 | `state` | `'default' \| 'error' \| 'success' \| 'warning'` | `'default'` | Validation state |
+| `disabled` | `boolean` | `false` | Disabled state |
+
+> **Note:** This is a container shell. Label, input element, and helper text are projected as children using UX4G CSS classes.
 
 ### List
 
@@ -461,9 +531,10 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-modal size="m" opacity="50" [open]="isOpen" (closed)="isOpen = false">
+<ux4g-modal size="m" opacity="50" [open]="isOpen">
   <h2>Modal Title</h2>
   <p>Modal content here.</p>
+  <button (click)="isOpen = false">Close</button>
 </ux4g-modal>
 ```
 
@@ -475,9 +546,7 @@ export class AppModule {}
 | `open` | `boolean` | `false` | Open state |
 | `centerContent` | `boolean` | `false` | Center modal content |
 
-| Output | Type | Description |
-|---|---|---|
-| `closed` | `EventEmitter<void>` | Emitted when modal is closed |
+> **Note:** Close handling is external — toggle the `open` input from your component state.
 
 ### Alert / Toast
 
@@ -492,15 +561,20 @@ export class AppModule {}
 <ux4g-alert variant="info">This is an informational message.</ux4g-alert>
 <ux4g-alert variant="success" layout="wide">Saved successfully!</ux4g-alert>
 
+<!-- Toast variant -->
+<ux4g-alert variant="success" [toast]="true">Toast notification</ux4g-alert>
+
+<!-- Toast container for positioning -->
 <ux4g-alert-container position="top-right">
-  <ux4g-alert variant="success">Toast notification</ux4g-alert>
+  <ux4g-alert variant="success" [toast]="true">Toast notification</ux4g-alert>
 </ux4g-alert-container>
 ```
 
 | Input | Type | Default | Description |
 |---|---|---|---|
 | `variant` | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | Alert type |
-| `layout` | `'fluid' \| 'center' \| 'wide'` | `'fluid'` | Alert layout |
+| `toast` | `boolean` | `false` | Use contextual toast styling instead of inline alert |
+| `layout` | `'fluid' \| 'center' \| 'wide'` | `'fluid'` | Alert layout (when toast=false) |
 
 **AlertContainer Inputs:**
 
@@ -518,16 +592,19 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-search size="m" placeholder="Search..." (searched)="onSearch($event)"></ux4g-search>
+<ux4g-search-container size="m">
+  <input class="ux4g-search-input" type="search" placeholder="Search..." />
+  <button class="ux4g-search-btn">
+    <span class="ux4g-icon-outlined">search</span>
+  </button>
+</ux4g-search-container>
 ```
 
 | Input | Type | Default | Description |
 |---|---|---|---|
-| `size` | `'s' \| 'm' \| 'lg'` | `'m'` | Search size |
+| `size` | `'s' \| 'm' \| 'lg'` | `'m'` | Search container size |
 
-| Output | Type | Description |
-|---|---|---|
-| `searched` | `EventEmitter<string>` | Emitted on search submit |
+> **Note:** This is a container shell — the search input, button, and event handling are projected as children. The selector is `ux4g-search-container`.
 
 ### Pagination
 
@@ -539,8 +616,19 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-pagination variant="default" [totalPages]="10" [currentPage]="1" (pageChanged)="onPage($event)"></ux4g-pagination>
-<ux4g-pagination variant="dotted" paginationStyle="solid" [totalPages]="5" [currentPage]="2"></ux4g-pagination>
+<ux4g-pagination variant="default">
+  <button class="ux4g-pagination-prev" aria-label="Previous">‹</button>
+  <button class="ux4g-pagination-item ux4g-pagination-active">1</button>
+  <button class="ux4g-pagination-item">2</button>
+  <button class="ux4g-pagination-item">3</button>
+  <button class="ux4g-pagination-next" aria-label="Next">›</button>
+</ux4g-pagination>
+
+<ux4g-pagination variant="dotted" paginationStyle="solid">
+  <span class="ux4g-pagination-dot ux4g-pagination-active"></span>
+  <span class="ux4g-pagination-dot"></span>
+  <span class="ux4g-pagination-dot"></span>
+</ux4g-pagination>
 ```
 
 | Input | Type | Default | Description |
@@ -548,9 +636,7 @@ export class AppModule {}
 | `variant` | `'default' \| 'dotted'` | `'default'` | Pagination style |
 | `paginationStyle` | `'default' \| 'solid' \| 'translucent'` | `'default'` | Dotted variant style |
 
-| Output | Type | Description |
-|---|---|---|
-| `pageChanged` | `EventEmitter<number>` | Emitted on page change |
+> **Note:** This is a container shell — page items, navigation buttons, and active state management are handled externally via content projection.
 
 ### Table
 
@@ -592,8 +678,9 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-popover placement="right" title="Popover Title" content="Body text" [show]="showPopover">
-  <button>Toggle Popover</button>
+<ux4g-popover placement="right" [show]="showPopover">
+  <div class="ux4g-popover-header">Popover Title</div>
+  <div class="ux4g-popover-body">Body text goes here</div>
 </ux4g-popover>
 ```
 
@@ -602,6 +689,8 @@ export class AppModule {}
 | `placement` | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `'bottom'` | Popover position |
 | `show` | `boolean` | `false` | Visibility |
 
+> **Note:** Content (title, body) is projected as children using UX4G popover CSS classes. There are no `title` or `content` inputs.
+
 ### Tooltip
 
 ```ts
@@ -612,8 +701,8 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-tooltip placement="top-center" size="s" content="Tooltip text">
-  <button>Hover me</button>
+<ux4g-tooltip placement="top-center" size="s">
+  Tooltip text content goes here
 </ux4g-tooltip>
 ```
 
@@ -622,6 +711,8 @@ export class AppModule {}
 | `placement` | `'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right' \| 'left-center' \| 'right-center'` | `'top-center'` | Tooltip position |
 | `size` | `'s' \| 'xs'` | `'s'` | Tooltip size |
 
+> **Note:** Tooltip text is projected as content. There is no `content` input. Visibility is controlled by the UX4G runtime.
+
 ### Tab
 
 ```ts
@@ -665,7 +756,7 @@ export class AppModule {}
 
 | Input | Type | Default | Description |
 |---|---|---|---|
-| `variant` | `'primary' \| 'outline-primary' \| 'tonal-primary' \| 'text-primary'` | `'primary'` | Button style |
+| `variant` | `'primary' \| 'outline-primary' \| 'tonal-primary' \| 'text-primary'` | `'text-primary'` | Button style |
 | `size` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | Button size |
 | `pill` | `boolean` | `false` | Pill shape |
 
@@ -732,21 +823,29 @@ export class AppModule {}
 ### Slider
 
 ```ts
-import { UX4GSliderModule } from 'ux4g-components-angular/slider';
+import { UX4GSliderFieldModule } from 'ux4g-components-angular/slider';
 
-@NgModule({ imports: [UX4GSliderModule] })
+@NgModule({ imports: [UX4GSliderFieldModule] })
 export class AppModule {}
 ```
 
 ```html
-<ux4g-slider size="sm" [min]="0" [max]="100" [value]="50"></ux4g-slider>
-<ux4g-slider size="md" [min]="0" [max]="100" [value]="75"></ux4g-slider>
+<ux4g-slider-field size="sm">
+  <label class="ux4g-slider-label">Volume</label>
+  <input class="ux4g-slider-input" type="range" min="0" max="100" value="50" />
+</ux4g-slider-field>
+
+<ux4g-slider-field size="md">
+  <input class="ux4g-slider-input" type="range" min="0" max="100" value="75" />
+</ux4g-slider-field>
 ```
 
 | Input | Type | Default | Description |
 |---|---|---|---|
 | `size` | `'sm' \| 'md'` | `'sm'` | Slider size |
 
+> **Note:** The module is `UX4GSliderFieldModule` and the selector is `ux4g-slider-field`. The range input and label are projected as children.
+
 ### Drawer
 
 ```ts
@@ -757,9 +856,10 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-drawer placement="right" [open]="isOpen" (closed)="isOpen = false">
+<ux4g-drawer placement="right" [open]="isOpen">
   <h3>Drawer Title</h3>
   <p>Drawer content</p>
+  <button (click)="isOpen = false">Close</button>
 </ux4g-drawer>
 ```
 
@@ -768,9 +868,7 @@ export class AppModule {}
 | `placement` | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | Slide-in direction |
 | `open` | `boolean` | `false` | Open state |
 
-| Output | Type | Description |
-|---|---|---|
-| `closed` | `EventEmitter<void>` | Emitted when drawer is closed |
+> **Note:** Close handling is external — toggle the `open` input from your component state.
 
 ### Date-Time Picker
 
@@ -861,14 +959,31 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-otp-input [length]="4" state="default"></ux4g-otp-input>
-<ux4g-otp-input [length]="6" state="error"></ux4g-otp-input>
+<ux4g-otp-input state="default">
+  <div class="ux4g-otp-label ux4g-label-l-default">Enter OTP</div>
+  <div class="ux4g-otp-group">
+    <input class="ux4g-otp-source" type="hidden" value="" data-ux-count="4" placeholder="—" />
+  </div>
+  <div class="ux4g-otp-meta ux4g-body-s-default">
+    <span class="ux4g-otp-helper">Didn't receive OTP?</span>
+    <span class="ux4g-otp-resend">Resend</span>
+  </div>
+</ux4g-otp-input>
+
+<ux4g-otp-input state="error">
+  <div class="ux4g-otp-label ux4g-label-l-default">Enter OTP</div>
+  <div class="ux4g-otp-group">
+    <input class="ux4g-otp-source" type="hidden" value="" data-ux-count="6" placeholder="—" />
+  </div>
+</ux4g-otp-input>
 ```
 
 | Input | Type | Default | Description |
 |---|---|---|---|
 | `state` | `'default' \| 'success' \| 'error' \| 'locked'` | `'default'` | Input state |
 
+> **Note:** The OTP digit inputs are constructed by the runtime JS. The `data-ux-count` attribute on the hidden input controls how many digit boxes render. There is no `length` input — content is projected as children.
+
 ### File Upload
 
 ```ts
@@ -897,14 +1012,35 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-progress-indicator type="bar" [value]="60"></ux4g-progress-indicator>
-<ux4g-progress-indicator type="circle" [value]="75" size="l"></ux4g-progress-indicator>
+<!-- Bar variant -->
+<ux4g-progress-indicator type="bar">
+  <div class="ux4g-progress-bar-track">
+    <div class="ux4g-progress-bar-fill" style="width: 60%"></div>
+  </div>
+  <span class="ux4g-progress-label">60%</span>
+</ux4g-progress-indicator>
+
+<!-- Circle variant -->
+<ux4g-progress-indicator type="circle" size="l" labelPlacement="inside">
+  <span class="ux4g-progress-value">75%</span>
+</ux4g-progress-indicator>
+
+<!-- Rounded shape -->
+<ux4g-progress-indicator type="bar" shape="rounded">
+  <div class="ux4g-progress-bar-track">
+    <div class="ux4g-progress-bar-fill" style="width: 45%"></div>
+  </div>
+</ux4g-progress-indicator>
 ```
 
 | Input | Type | Default | Description |
 |---|---|---|---|
-| `type` | `'bar' \| 'circle'` | `'bar'` | Indicator type |
-| `size` | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| '2xl' \| '3xl'` | `'m'` | Circle size |
+| `type` | `'bar' \| 'circle'` | — (required) | Indicator type |
+| `labelPlacement` | `'outside' \| 'inside'` | — | Label position |
+| `shape` | `'default' \| 'rounded'` | — | Bar shape |
+| `size` | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| '2xl' \| '3xl'` | — | Circle size (ignored for bar) |
+
+> **Note:** This is a container shell. Progress track, fill, and value label are projected as children. There is no `value` input.
 
 ### Feedback
 
@@ -952,14 +1088,26 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-sla-progress-indicator type="circle" [value]="75"></ux4g-sla-progress-indicator>
-<ux4g-sla-progress-indicator type="linear" [value]="50"></ux4g-sla-progress-indicator>
+<ux4g-sla-progress-indicator type="circle">
+  <div class="ux4g-sla-circle-track">
+    <span class="ux4g-sla-value">75%</span>
+  </div>
+</ux4g-sla-progress-indicator>
+
+<ux4g-sla-progress-indicator type="linear">
+  <div class="ux4g-sla-linear-track">
+    <div class="ux4g-sla-linear-fill" style="width: 50%"></div>
+  </div>
+</ux4g-sla-progress-indicator>
+
 <ux4g-sla-progress-indicator type="badge">On Track</ux4g-sla-progress-indicator>
 ```
 
 | Input | Type | Default | Description |
 |---|---|---|---|
-| `type` | `'circle' \| 'linear' \| 'badge'` | `'circle'` | Indicator type |
+| `type` | `'circle' \| 'linear' \| 'badge'` | — (required) | Indicator type |
+
+> **Note:** This is a container shell. Progress value and track are projected as children. There is no `value` input.
 
 ### Carousel