ux4g-components-angular 1.3.0 → 1.4.0

package/dist/chip-group/README.md

@@ -1098,6 +1098,61 @@ export class AppModule {}
 |---|---|---|---|
 | `theme` | `'default' \| 'primary' \| 'dark'` | `'default'` | Footer theme |
 
+### Mega Menu
+
+```ts
+import { UX4GMegaMenuModule } from 'ux4g-components-angular/mega-menu';
+
+@NgModule({ imports: [UX4GMegaMenuModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-mega-menu>
+  <ux4g-mega-menu-sidebar>
+    <ux4g-mega-menu-category-item [active]="true">Category 1</ux4g-mega-menu-category-item>
+    <ux4g-mega-menu-category-item>Category 2</ux4g-mega-menu-category-item>
+  </ux4g-mega-menu-sidebar>
+  <ux4g-mega-menu-content [active]="true">
+    <ux4g-mega-menu-column>
+      <a href="#">Link 1</a>
+      <a href="#">Link 2</a>
+    </ux4g-mega-menu-column>
+  </ux4g-mega-menu-content>
+</ux4g-mega-menu>
+
+<!-- Dropdown variant -->
+<ux4g-mega-menu [dropdown]="true">
+  <ux4g-mega-menu-sidebar>
+    <ux4g-mega-menu-category-item [active]="true">Services</ux4g-mega-menu-category-item>
+  </ux4g-mega-menu-sidebar>
+  <ux4g-mega-menu-content [active]="true">
+    <ux4g-mega-menu-column>
+      <a href="#">Service A</a>
+    </ux4g-mega-menu-column>
+  </ux4g-mega-menu-content>
+</ux4g-mega-menu>
+```
+
+**UX4GMegaMenu Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `dropdown` | `boolean` | `false` | Render as dropdown (wraps in positioning container) |
+| `dropdownRight` | `boolean` | `false` | Align dropdown to the right |
+
+**UX4GMegaMenuCategoryItem Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | `false` | Active/selected state |
+
+**UX4GMegaMenuContent Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | `false` | Active/visible state |
+
 ### Result List Row
 
 ```ts
@@ -1108,9 +1163,30 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-result-list-row variation="default">
-  <h4>Result Title</h4>
-  <p>Description</p>
+<ux4g-result-list-row variation="v1">
+  <!-- Header -->
+  <div class="ux4g-result-list-header">
+    <div class="ux4g-result-list-info">
+      <div class="ux4g-result-list-icon"></div>
+      <div class="ux4g-result-list-title-group">
+        <h2 class="ux4g-title-s-default ux4g-result-list-title">Certificate Name</h2>
+      </div>
+    </div>
+    <div class="ux4g-result-list-actions-container">
+      <div class="ux4g-result-list-actions">
+        <button class="ux4g-btn-outline-neutral ux4g-btn-sm ux4g-btn">Track</button>
+      </div>
+    </div>
+  </div>
+  <!-- Expanded Content -->
+  <div class="ux4g-result-list-content">
+    <div class="ux4g-result-list-details">
+      <div class="ux4g-result-list-detail-item">
+        <span class="ux4g-label-m-default ux4g-text-neutral-tertiary">Submitted Date</span>
+        <span class="ux4g-body-s-default ux4g-text-neutral-secondary">1 Apr 2026</span>
+      </div>
+    </div>
+  </div>
 </ux4g-result-list-row>
 ```
 
@@ -1158,7 +1234,7 @@ This package follows a CSS-first architecture:
 
 ---
 
-## Available Components (50)
+## Available Components (51)
 
 All components are available as sub-path imports:
 
@@ -1169,7 +1245,7 @@ import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
 // ... etc.
 ```
 
-Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
+Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `mega-menu`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
 
 ---
 

package/dist/combobox/README.md

@@ -1098,6 +1098,61 @@ export class AppModule {}
 |---|---|---|---|
 | `theme` | `'default' \| 'primary' \| 'dark'` | `'default'` | Footer theme |
 
+### Mega Menu
+
+```ts
+import { UX4GMegaMenuModule } from 'ux4g-components-angular/mega-menu';
+
+@NgModule({ imports: [UX4GMegaMenuModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-mega-menu>
+  <ux4g-mega-menu-sidebar>
+    <ux4g-mega-menu-category-item [active]="true">Category 1</ux4g-mega-menu-category-item>
+    <ux4g-mega-menu-category-item>Category 2</ux4g-mega-menu-category-item>
+  </ux4g-mega-menu-sidebar>
+  <ux4g-mega-menu-content [active]="true">
+    <ux4g-mega-menu-column>
+      <a href="#">Link 1</a>
+      <a href="#">Link 2</a>
+    </ux4g-mega-menu-column>
+  </ux4g-mega-menu-content>
+</ux4g-mega-menu>
+
+<!-- Dropdown variant -->
+<ux4g-mega-menu [dropdown]="true">
+  <ux4g-mega-menu-sidebar>
+    <ux4g-mega-menu-category-item [active]="true">Services</ux4g-mega-menu-category-item>
+  </ux4g-mega-menu-sidebar>
+  <ux4g-mega-menu-content [active]="true">
+    <ux4g-mega-menu-column>
+      <a href="#">Service A</a>
+    </ux4g-mega-menu-column>
+  </ux4g-mega-menu-content>
+</ux4g-mega-menu>
+```
+
+**UX4GMegaMenu Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `dropdown` | `boolean` | `false` | Render as dropdown (wraps in positioning container) |
+| `dropdownRight` | `boolean` | `false` | Align dropdown to the right |
+
+**UX4GMegaMenuCategoryItem Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | `false` | Active/selected state |
+
+**UX4GMegaMenuContent Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | `false` | Active/visible state |
+
 ### Result List Row
 
 ```ts
@@ -1108,9 +1163,30 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-result-list-row variation="default">
-  <h4>Result Title</h4>
-  <p>Description</p>
+<ux4g-result-list-row variation="v1">
+  <!-- Header -->
+  <div class="ux4g-result-list-header">
+    <div class="ux4g-result-list-info">
+      <div class="ux4g-result-list-icon"></div>
+      <div class="ux4g-result-list-title-group">
+        <h2 class="ux4g-title-s-default ux4g-result-list-title">Certificate Name</h2>
+      </div>
+    </div>
+    <div class="ux4g-result-list-actions-container">
+      <div class="ux4g-result-list-actions">
+        <button class="ux4g-btn-outline-neutral ux4g-btn-sm ux4g-btn">Track</button>
+      </div>
+    </div>
+  </div>
+  <!-- Expanded Content -->
+  <div class="ux4g-result-list-content">
+    <div class="ux4g-result-list-details">
+      <div class="ux4g-result-list-detail-item">
+        <span class="ux4g-label-m-default ux4g-text-neutral-tertiary">Submitted Date</span>
+        <span class="ux4g-body-s-default ux4g-text-neutral-secondary">1 Apr 2026</span>
+      </div>
+    </div>
+  </div>
 </ux4g-result-list-row>
 ```
 
@@ -1158,7 +1234,7 @@ This package follows a CSS-first architecture:
 
 ---
 
-## Available Components (50)
+## Available Components (51)
 
 All components are available as sub-path imports:
 
@@ -1169,7 +1245,7 @@ import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
 // ... etc.
 ```
 
-Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
+Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `mega-menu`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
 
 ---
 

package/dist/date-time-picker/README.md

@@ -1098,6 +1098,61 @@ export class AppModule {}
 |---|---|---|---|
 | `theme` | `'default' \| 'primary' \| 'dark'` | `'default'` | Footer theme |
 
+### Mega Menu
+
+```ts
+import { UX4GMegaMenuModule } from 'ux4g-components-angular/mega-menu';
+
+@NgModule({ imports: [UX4GMegaMenuModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-mega-menu>
+  <ux4g-mega-menu-sidebar>
+    <ux4g-mega-menu-category-item [active]="true">Category 1</ux4g-mega-menu-category-item>
+    <ux4g-mega-menu-category-item>Category 2</ux4g-mega-menu-category-item>
+  </ux4g-mega-menu-sidebar>
+  <ux4g-mega-menu-content [active]="true">
+    <ux4g-mega-menu-column>
+      <a href="#">Link 1</a>
+      <a href="#">Link 2</a>
+    </ux4g-mega-menu-column>
+  </ux4g-mega-menu-content>
+</ux4g-mega-menu>
+
+<!-- Dropdown variant -->
+<ux4g-mega-menu [dropdown]="true">
+  <ux4g-mega-menu-sidebar>
+    <ux4g-mega-menu-category-item [active]="true">Services</ux4g-mega-menu-category-item>
+  </ux4g-mega-menu-sidebar>
+  <ux4g-mega-menu-content [active]="true">
+    <ux4g-mega-menu-column>
+      <a href="#">Service A</a>
+    </ux4g-mega-menu-column>
+  </ux4g-mega-menu-content>
+</ux4g-mega-menu>
+```
+
+**UX4GMegaMenu Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `dropdown` | `boolean` | `false` | Render as dropdown (wraps in positioning container) |
+| `dropdownRight` | `boolean` | `false` | Align dropdown to the right |
+
+**UX4GMegaMenuCategoryItem Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | `false` | Active/selected state |
+
+**UX4GMegaMenuContent Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | `false` | Active/visible state |
+
 ### Result List Row
 
 ```ts
@@ -1108,9 +1163,30 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-result-list-row variation="default">
-  <h4>Result Title</h4>
-  <p>Description</p>
+<ux4g-result-list-row variation="v1">
+  <!-- Header -->
+  <div class="ux4g-result-list-header">
+    <div class="ux4g-result-list-info">
+      <div class="ux4g-result-list-icon"></div>
+      <div class="ux4g-result-list-title-group">
+        <h2 class="ux4g-title-s-default ux4g-result-list-title">Certificate Name</h2>
+      </div>
+    </div>
+    <div class="ux4g-result-list-actions-container">
+      <div class="ux4g-result-list-actions">
+        <button class="ux4g-btn-outline-neutral ux4g-btn-sm ux4g-btn">Track</button>
+      </div>
+    </div>
+  </div>
+  <!-- Expanded Content -->
+  <div class="ux4g-result-list-content">
+    <div class="ux4g-result-list-details">
+      <div class="ux4g-result-list-detail-item">
+        <span class="ux4g-label-m-default ux4g-text-neutral-tertiary">Submitted Date</span>
+        <span class="ux4g-body-s-default ux4g-text-neutral-secondary">1 Apr 2026</span>
+      </div>
+    </div>
+  </div>
 </ux4g-result-list-row>
 ```
 
@@ -1158,7 +1234,7 @@ This package follows a CSS-first architecture:
 
 ---
 
-## Available Components (50)
+## Available Components (51)
 
 All components are available as sub-path imports:
 
@@ -1169,7 +1245,7 @@ import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
 // ... etc.
 ```
 
-Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
+Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `mega-menu`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
 
 ---
 

package/dist/divider/README.md

@@ -1098,6 +1098,61 @@ export class AppModule {}
 |---|---|---|---|
 | `theme` | `'default' \| 'primary' \| 'dark'` | `'default'` | Footer theme |
 
+### Mega Menu
+
+```ts
+import { UX4GMegaMenuModule } from 'ux4g-components-angular/mega-menu';
+
+@NgModule({ imports: [UX4GMegaMenuModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-mega-menu>
+  <ux4g-mega-menu-sidebar>
+    <ux4g-mega-menu-category-item [active]="true">Category 1</ux4g-mega-menu-category-item>
+    <ux4g-mega-menu-category-item>Category 2</ux4g-mega-menu-category-item>
+  </ux4g-mega-menu-sidebar>
+  <ux4g-mega-menu-content [active]="true">
+    <ux4g-mega-menu-column>
+      <a href="#">Link 1</a>
+      <a href="#">Link 2</a>
+    </ux4g-mega-menu-column>
+  </ux4g-mega-menu-content>
+</ux4g-mega-menu>
+
+<!-- Dropdown variant -->
+<ux4g-mega-menu [dropdown]="true">
+  <ux4g-mega-menu-sidebar>
+    <ux4g-mega-menu-category-item [active]="true">Services</ux4g-mega-menu-category-item>
+  </ux4g-mega-menu-sidebar>
+  <ux4g-mega-menu-content [active]="true">
+    <ux4g-mega-menu-column>
+      <a href="#">Service A</a>
+    </ux4g-mega-menu-column>
+  </ux4g-mega-menu-content>
+</ux4g-mega-menu>
+```
+
+**UX4GMegaMenu Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `dropdown` | `boolean` | `false` | Render as dropdown (wraps in positioning container) |
+| `dropdownRight` | `boolean` | `false` | Align dropdown to the right |
+
+**UX4GMegaMenuCategoryItem Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | `false` | Active/selected state |
+
+**UX4GMegaMenuContent Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | `false` | Active/visible state |
+
 ### Result List Row
 
 ```ts
@@ -1108,9 +1163,30 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-result-list-row variation="default">
-  <h4>Result Title</h4>
-  <p>Description</p>
+<ux4g-result-list-row variation="v1">
+  <!-- Header -->
+  <div class="ux4g-result-list-header">
+    <div class="ux4g-result-list-info">
+      <div class="ux4g-result-list-icon"></div>
+      <div class="ux4g-result-list-title-group">
+        <h2 class="ux4g-title-s-default ux4g-result-list-title">Certificate Name</h2>
+      </div>
+    </div>
+    <div class="ux4g-result-list-actions-container">
+      <div class="ux4g-result-list-actions">
+        <button class="ux4g-btn-outline-neutral ux4g-btn-sm ux4g-btn">Track</button>
+      </div>
+    </div>
+  </div>
+  <!-- Expanded Content -->
+  <div class="ux4g-result-list-content">
+    <div class="ux4g-result-list-details">
+      <div class="ux4g-result-list-detail-item">
+        <span class="ux4g-label-m-default ux4g-text-neutral-tertiary">Submitted Date</span>
+        <span class="ux4g-body-s-default ux4g-text-neutral-secondary">1 Apr 2026</span>
+      </div>
+    </div>
+  </div>
 </ux4g-result-list-row>
 ```
 
@@ -1158,7 +1234,7 @@ This package follows a CSS-first architecture:
 
 ---
 
-## Available Components (50)
+## Available Components (51)
 
 All components are available as sub-path imports:
 
@@ -1169,7 +1245,7 @@ import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
 // ... etc.
 ```
 
-Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
+Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `mega-menu`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
 
 ---
 

package/dist/draft-status-banner/README.md

@@ -1098,6 +1098,61 @@ export class AppModule {}
 |---|---|---|---|
 | `theme` | `'default' \| 'primary' \| 'dark'` | `'default'` | Footer theme |
 
+### Mega Menu
+
+```ts
+import { UX4GMegaMenuModule } from 'ux4g-components-angular/mega-menu';
+
+@NgModule({ imports: [UX4GMegaMenuModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-mega-menu>
+  <ux4g-mega-menu-sidebar>
+    <ux4g-mega-menu-category-item [active]="true">Category 1</ux4g-mega-menu-category-item>
+    <ux4g-mega-menu-category-item>Category 2</ux4g-mega-menu-category-item>
+  </ux4g-mega-menu-sidebar>
+  <ux4g-mega-menu-content [active]="true">
+    <ux4g-mega-menu-column>
+      <a href="#">Link 1</a>
+      <a href="#">Link 2</a>
+    </ux4g-mega-menu-column>
+  </ux4g-mega-menu-content>
+</ux4g-mega-menu>
+
+<!-- Dropdown variant -->
+<ux4g-mega-menu [dropdown]="true">
+  <ux4g-mega-menu-sidebar>
+    <ux4g-mega-menu-category-item [active]="true">Services</ux4g-mega-menu-category-item>
+  </ux4g-mega-menu-sidebar>
+  <ux4g-mega-menu-content [active]="true">
+    <ux4g-mega-menu-column>
+      <a href="#">Service A</a>
+    </ux4g-mega-menu-column>
+  </ux4g-mega-menu-content>
+</ux4g-mega-menu>
+```
+
+**UX4GMegaMenu Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `dropdown` | `boolean` | `false` | Render as dropdown (wraps in positioning container) |
+| `dropdownRight` | `boolean` | `false` | Align dropdown to the right |
+
+**UX4GMegaMenuCategoryItem Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | `false` | Active/selected state |
+
+**UX4GMegaMenuContent Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | `false` | Active/visible state |
+
 ### Result List Row
 
 ```ts
@@ -1108,9 +1163,30 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-result-list-row variation="default">
-  <h4>Result Title</h4>
-  <p>Description</p>
+<ux4g-result-list-row variation="v1">
+  <!-- Header -->
+  <div class="ux4g-result-list-header">
+    <div class="ux4g-result-list-info">
+      <div class="ux4g-result-list-icon"></div>
+      <div class="ux4g-result-list-title-group">
+        <h2 class="ux4g-title-s-default ux4g-result-list-title">Certificate Name</h2>
+      </div>
+    </div>
+    <div class="ux4g-result-list-actions-container">
+      <div class="ux4g-result-list-actions">
+        <button class="ux4g-btn-outline-neutral ux4g-btn-sm ux4g-btn">Track</button>
+      </div>
+    </div>
+  </div>
+  <!-- Expanded Content -->
+  <div class="ux4g-result-list-content">
+    <div class="ux4g-result-list-details">
+      <div class="ux4g-result-list-detail-item">
+        <span class="ux4g-label-m-default ux4g-text-neutral-tertiary">Submitted Date</span>
+        <span class="ux4g-body-s-default ux4g-text-neutral-secondary">1 Apr 2026</span>
+      </div>
+    </div>
+  </div>
 </ux4g-result-list-row>
 ```
 
@@ -1158,7 +1234,7 @@ This package follows a CSS-first architecture:
 
 ---
 
-## Available Components (50)
+## Available Components (51)
 
 All components are available as sub-path imports:
 
@@ -1169,7 +1245,7 @@ import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
 // ... etc.
 ```
 
-Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
+Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `mega-menu`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
 
 ---
 

package/dist/drawer/README.md

@@ -1098,6 +1098,61 @@ export class AppModule {}
 |---|---|---|---|
 | `theme` | `'default' \| 'primary' \| 'dark'` | `'default'` | Footer theme |
 
+### Mega Menu
+
+```ts
+import { UX4GMegaMenuModule } from 'ux4g-components-angular/mega-menu';
+
+@NgModule({ imports: [UX4GMegaMenuModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-mega-menu>
+  <ux4g-mega-menu-sidebar>
+    <ux4g-mega-menu-category-item [active]="true">Category 1</ux4g-mega-menu-category-item>
+    <ux4g-mega-menu-category-item>Category 2</ux4g-mega-menu-category-item>
+  </ux4g-mega-menu-sidebar>
+  <ux4g-mega-menu-content [active]="true">
+    <ux4g-mega-menu-column>
+      <a href="#">Link 1</a>
+      <a href="#">Link 2</a>
+    </ux4g-mega-menu-column>
+  </ux4g-mega-menu-content>
+</ux4g-mega-menu>
+
+<!-- Dropdown variant -->
+<ux4g-mega-menu [dropdown]="true">
+  <ux4g-mega-menu-sidebar>
+    <ux4g-mega-menu-category-item [active]="true">Services</ux4g-mega-menu-category-item>
+  </ux4g-mega-menu-sidebar>
+  <ux4g-mega-menu-content [active]="true">
+    <ux4g-mega-menu-column>
+      <a href="#">Service A</a>
+    </ux4g-mega-menu-column>
+  </ux4g-mega-menu-content>
+</ux4g-mega-menu>
+```
+
+**UX4GMegaMenu Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `dropdown` | `boolean` | `false` | Render as dropdown (wraps in positioning container) |
+| `dropdownRight` | `boolean` | `false` | Align dropdown to the right |
+
+**UX4GMegaMenuCategoryItem Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | `false` | Active/selected state |
+
+**UX4GMegaMenuContent Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | `false` | Active/visible state |
+
 ### Result List Row
 
 ```ts
@@ -1108,9 +1163,30 @@ export class AppModule {}
 ```
 
 ```html
-<ux4g-result-list-row variation="default">
-  <h4>Result Title</h4>
-  <p>Description</p>
+<ux4g-result-list-row variation="v1">
+  <!-- Header -->
+  <div class="ux4g-result-list-header">
+    <div class="ux4g-result-list-info">
+      <div class="ux4g-result-list-icon"></div>
+      <div class="ux4g-result-list-title-group">
+        <h2 class="ux4g-title-s-default ux4g-result-list-title">Certificate Name</h2>
+      </div>
+    </div>
+    <div class="ux4g-result-list-actions-container">
+      <div class="ux4g-result-list-actions">
+        <button class="ux4g-btn-outline-neutral ux4g-btn-sm ux4g-btn">Track</button>
+      </div>
+    </div>
+  </div>
+  <!-- Expanded Content -->
+  <div class="ux4g-result-list-content">
+    <div class="ux4g-result-list-details">
+      <div class="ux4g-result-list-detail-item">
+        <span class="ux4g-label-m-default ux4g-text-neutral-tertiary">Submitted Date</span>
+        <span class="ux4g-body-s-default ux4g-text-neutral-secondary">1 Apr 2026</span>
+      </div>
+    </div>
+  </div>
 </ux4g-result-list-row>
 ```
 
@@ -1158,7 +1234,7 @@ This package follows a CSS-first architecture:
 
 ---
 
-## Available Components (50)
+## Available Components (51)
 
 All components are available as sub-path imports:
 
@@ -1169,7 +1245,7 @@ import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
 // ... etc.
 ```
 
-Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
+Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `mega-menu`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
 
 ---