npm - @uni-design-system/uni-mcp - Versions diffs - 4.1.1 → 4.1.2 - Mend

@uni-design-system/uni-mcp 4.1.1 → 4.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/{chunk-2CKFXSMH.js → chunk-E34OHB3Z.js} +2709 -179
package/dist/chunk-E34OHB3Z.js.map +1 -0
package/dist/http.js +1 -1
package/dist/server.js +1 -1
package/dist/stdio.js +1 -1
package/package.json +7 -4
package/dist/chunk-2CKFXSMH.js.map +0 -1

package/dist/{chunk-2CKFXSMH.js → chunk-E34OHB3Z.js} RENAMED Viewed

@@ -7,16 +7,16 @@ import { z } from "zod";
 // src/data/uni-index.json
 var uni_index_default = {
   meta: {
-    version: "5.1.0",
-    builtAt: "2026-07-23T20:25:42.150Z",
+    version: "5.2.0",
+    builtAt: "2026-07-24T03:22:37.140Z",
     frameworks: [
       "angular"
     ],
     counts: {
-      components: 59,
-      tokens: 223,
+      components: 69,
+      tokens: 272,
       themes: 2,
-      examples: 0
+      examples: 126
     }
   },
   components: [
@@ -27,7 +27,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -74,7 +74,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<Button (click)=\"alert.open()\">Show Alert</Button>\n<Alert #alert ${argsToTemplate(props)}>\n  ${ngContent}\n</Alert>\n<!-- args:\n{\n    ngContent: 'This is an alert!',\n    variant: 'tertiary',\n    symbolName: 'privacy_tip',\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -88,6 +94,169 @@ var uni_index_default = {
         "alert.behavior.elevation"
       ]
     },
+    {
+      id: "app-bar",
+      name: "AppBar",
+      status: "stable",
+      summary: "",
+      description: "",
+      category: "components",
+      version: "5.2.0",
+      bindings: {
+        angular: {
+          importPath: "@uni-design-system/uni-angular",
+          selectorOrTag: "uni-app-bar, AppBar",
+          api: [
+            {
+              name: "title",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: "Bar title; alternatively project your own center content."
+            },
+            {
+              name: "sticky",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: "Stick the bar to the top of its scroll container."
+            }
+          ]
+        }
+      },
+      examples: [
+        {
+          title: "Default",
+          framework: "angular",
+          code: `<!-- Storybook story: Default -->
+<uni-app-bar [title]="title" [sticky]="sticky">
+<button leading icon-button symbolName="menu">Open navigation</button>
+<button trailing icon-button symbolName="notifications">Notifications</button>
+<uni-avatar trailing name="Grace Hopper" size="sm" />
+</uni-app-bar>
+<!-- args:
+{ title: 'Console' }
+-->`
+        }
+      ],
+      guidelines: {
+        whenToUse: "",
+        dos: [],
+        donts: [],
+        accessibility: []
+      },
+      relatedTokens: []
+    },
+    {
+      id: "avatar",
+      name: "Avatar",
+      status: "stable",
+      summary: "",
+      description: "",
+      category: "components",
+      version: "5.2.0",
+      bindings: {
+        angular: {
+          importPath: "@uni-design-system/uni-angular",
+          selectorOrTag: "uni-avatar, Avatar",
+          api: [
+            {
+              name: "src",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: "Image URL; on load error the avatar falls back to initials/symbol."
+            },
+            {
+              name: "name",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: "Person's name: drives the initials and the accessible label."
+            },
+            {
+              name: "text",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: "Verbatim text instead of derived initials (e.g. a group's \u201C+3\u201D)."
+            }
+          ]
+        }
+      },
+      examples: [
+        {
+          title: "Initials",
+          framework: "angular",
+          code: `<!-- Storybook story: Initials -->
+<div style="display: flex; gap: 12px; align-items: center;">
+<uni-avatar name="Ada Lovelace" size="sm" />
+<uni-avatar name="Grace Hopper" size="md" variant="secondary" />
+<uni-avatar name="Katherine Johnson" size="lg" variant="tertiary" />
+<uni-avatar name="Annie Easley" size="xl" variant="success" />
+<uni-avatar size="lg" variant="quaternary" />
+</div>
+<!-- args:
+{ name: 'Grace Hopper', variant: 'primary', size: 'lg' }
+-->`
+        },
+        {
+          title: "Sizes And Variants",
+          framework: "angular",
+          code: '<!-- Storybook story: Sizes And Variants -->\n<div style="display: flex; gap: 12px; align-items: center;">\n<uni-avatar name="Ada Lovelace" size="sm" />\n<uni-avatar name="Grace Hopper" size="md" variant="secondary" />\n<uni-avatar name="Katherine Johnson" size="lg" variant="tertiary" />\n<uni-avatar name="Annie Easley" size="xl" variant="success" />\n<uni-avatar size="lg" variant="quaternary" />\n</div>'
+        },
+        {
+          title: "Group",
+          framework: "angular",
+          code: '<!-- Storybook story: Group -->\n<div style="display: flex; gap: 12px; align-items: center;">\n<uni-avatar name="Ada Lovelace" size="sm" />\n<uni-avatar name="Grace Hopper" size="md" variant="secondary" />\n<uni-avatar name="Katherine Johnson" size="lg" variant="tertiary" />\n<uni-avatar name="Annie Easley" size="xl" variant="success" />\n<uni-avatar size="lg" variant="quaternary" />\n</div>'
+        }
+      ],
+      guidelines: {
+        whenToUse: "",
+        dos: [],
+        donts: [],
+        accessibility: []
+      },
+      relatedTokens: [
+        "avatar.behavior.borderRadius",
+        "avatar.behavior.typeface",
+        "avatar.behavior.fallbackSymbol"
+      ]
+    },
+    {
+      id: "avatar-group",
+      name: "AvatarGroup",
+      status: "stable",
+      summary: "",
+      description: "",
+      category: "components",
+      version: "5.2.0",
+      bindings: {
+        angular: {
+          importPath: "@uni-design-system/uni-angular",
+          selectorOrTag: "uni-avatar-group, AvatarGroup",
+          api: [
+            {
+              name: "max",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "undefined",
+              description: "Show at most this many avatars; the rest collapse into a \u201C+N\u201D chip."
+            }
+          ]
+        }
+      },
+      examples: [],
+      guidelines: {
+        whenToUse: "",
+        dos: [],
+        donts: [],
+        accessibility: []
+      },
+      relatedTokens: []
+    },
     {
       id: "background",
       name: "Background",
@@ -95,7 +264,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -140,7 +309,23 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<!-- args:\n{\n    image: 'images/phone-zone-illustration.svg',\n    imagePosition: 'center',\n    imageSize: '400px',\n    height: '400px',\n    width: '100%',\n  }\n-->"
+        },
+        {
+          title: "Contain Size",
+          framework: "angular",
+          code: "<!-- Storybook story: Contain Size -->\n<!-- args:\n{\n    ...Primary.args,\n    imageSize: 'contain',\n  }\n-->"
+        },
+        {
+          title: "Custom Position",
+          framework: "angular",
+          code: "<!-- Storybook story: Custom Position -->\n<!-- args:\n{\n    ...Primary.args,\n    imagePosition: 'top',\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -156,7 +341,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -188,7 +373,38 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Pass",
+          framework: "angular",
+          code: `<!-- Storybook story: Pass -->
+<Badge color="\${color}" [width]="\${width}">
+  \${ngContent}
+</Badge>
+<!-- args:
+{
+    color: 'secondary',
+    ngContent: 'Pass',
+    width: 76,
+  }
+-->`
+        },
+        {
+          title: "Fail",
+          framework: "angular",
+          code: `<!-- Storybook story: Fail -->
+<Badge color="\${color}" [width]="\${width}">
+  \${ngContent}
+</Badge>
+<!-- args:
+{
+    color: 'warn',
+    ngContent: 'Fail',
+    width: 76,
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -206,7 +422,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "directives",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -230,7 +446,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -571,7 +787,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<div box-layout ${argsToTemplate(props)}>\n<Text>${ngContent}</Text>\n</div>\n<!-- args:\n{\n    color: 'secondary-container',\n    borderRadius: 'md',\n    padding: 'lg',\n    ngContent: 'Box Content.',\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -580,6 +802,70 @@ var uni_index_default = {
       },
       relatedTokens: []
     },
+    {
+      id: "breadcrumb",
+      name: "Breadcrumb",
+      status: "stable",
+      summary: "",
+      description: "",
+      category: "components",
+      version: "5.2.0",
+      bindings: {
+        angular: {
+          importPath: "@uni-design-system/uni-angular",
+          selectorOrTag: "uni-breadcrumb, Breadcrumb",
+          api: [
+            {
+              name: "items",
+              kind: "input",
+              type: "BreadcrumbItem[]",
+              required: true,
+              description: "The trail, root first; the last item is the current page."
+            },
+            {
+              name: "ariaLabel",
+              kind: "input",
+              type: "string",
+              required: false,
+              default: "'Breadcrumb'",
+              description: "Landmark label distinguishing this nav from others on the page."
+            },
+            {
+              name: "itemClicked",
+              kind: "output",
+              type: "BreadcrumbItem",
+              required: false,
+              description: "Emits the clicked ancestor item (also fires for `href` links)."
+            }
+          ]
+        }
+      },
+      examples: [
+        {
+          title: "Default",
+          framework: "angular",
+          code: "<!-- Storybook story: Default -->\n<!-- args:\n{\n    items: [\n      { label: 'Home', href: '#' },\n      { label: 'Reports', href: '#' },\n      { label: 'Q3 Revenue' },\n    ],\n  }\n-->"
+        },
+        {
+          title: "Router-driven (no hrefs)",
+          framework: "angular",
+          code: "<!-- Storybook story: Router-driven (no hrefs) -->\n<!-- args:\n{\n    items: [{ label: 'Home' }, { label: 'Settings' }, { label: 'Notifications' }],\n  }\n-->"
+        }
+      ],
+      guidelines: {
+        whenToUse: "",
+        dos: [],
+        donts: [],
+        accessibility: []
+      },
+      relatedTokens: [
+        "breadcrumb.behavior.typeface",
+        "breadcrumb.behavior.color",
+        "breadcrumb.behavior.currentColor",
+        "breadcrumb.behavior.separatorSymbol",
+        "breadcrumb.behavior.gap"
+      ]
+    },
     {
       id: "button",
       name: "Button",
@@ -587,7 +873,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -634,14 +920,91 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: `<!-- Storybook story: Primary -->
+<button text-button [variant]="variant" [size]="size" \${argsToTemplate(props)}>
+  {{ngContent}}
+</button>
+<!-- args:
+{
+    variant: 'primary',
+    size: 'lg',
+    ngContent: 'Button',
+  }
+-->`
+        },
+        {
+          title: "Secondary",
+          framework: "angular",
+          code: `<!-- Storybook story: Secondary -->
+<button text-button [variant]="variant" [size]="size" \${argsToTemplate(props)}>
+  {{ngContent}}
+</button>
+<!-- args:
+{
+    size: 'lg',
+    variant: 'secondary',
+    ngContent: 'Secondary Button',
+  }
+-->`
+        },
+        {
+          title: "Tertiary",
+          framework: "angular",
+          code: `<!-- Storybook story: Tertiary -->
+<button text-button [variant]="variant" [size]="size" \${argsToTemplate(props)}>
+  {{ngContent}}
+</button>
+<!-- args:
+{
+    size: 'lg',
+    variant: 'tertiary',
+    ngContent: 'Tertiary Button',
+  }
+-->`
+        },
+        {
+          title: "Medium",
+          framework: "angular",
+          code: `<!-- Storybook story: Medium -->
+<button text-button [variant]="variant" [size]="size" \${argsToTemplate(props)}>
+  {{ngContent}}
+</button>
+<!-- args:
+{
+    size: 'md',
+    ngContent: 'Medium Button',
+  }
+-->`
+        },
+        {
+          title: "Small",
+          framework: "angular",
+          code: `<!-- Storybook story: Small -->
+<button text-button [variant]="variant" [size]="size" \${argsToTemplate(props)}>
+  {{ngContent}}
+</button>
+<!-- args:
+{
+    size: 'sm',
+    ngContent: 'Small Button',
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
         donts: [],
         accessibility: []
       },
-      relatedTokens: []
+      relatedTokens: [
+        "button.behavior.borderRadius",
+        "button.behavior.typeface"
+      ]
     },
     {
       id: "button-group",
@@ -650,7 +1013,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -658,7 +1021,13 @@ var uni_index_default = {
           api: []
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: '<!-- Storybook story: Primary -->\n<ButtonGroup ${argsToTemplate(props)}>\n  <button icon-button symbolName="align_horizontal_left" size="sm"></button>\n  <button icon-button symbolName="align_horizontal_center" size="sm"></button>\n  <button icon-button symbolName="align_horizontal_right" size="sm"></button>\n</ButtonGroup>\n<!-- args:\n{}\n-->'
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -674,7 +1043,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -682,14 +1051,35 @@ var uni_index_default = {
           api: []
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: `<!-- Storybook story: Primary -->
+<Card variant="\${variant}">
+  <CardHeader title="Card Header"></CardHeader>
+  <CardContent>
+    <Text>\${ngContent}</Text>
+  </CardContent>
+</Card>
+<!-- args:
+{
+    variant: 'primary',
+    size: 'lg',
+    ngContent: 'Card content.',
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
         donts: [],
         accessibility: []
       },
-      relatedTokens: []
+      relatedTokens: [
+        "card.behavior.borderRadius"
+      ]
     },
     {
       id: "card-content",
@@ -698,7 +1088,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -722,7 +1112,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -763,7 +1153,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -796,7 +1186,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<div center-layout  ${argsToTemplate(props)}>\n  <Text typeface=\"headline-large\">${ngContent}</Text>\n</div>\n<!-- args:\n{\n    ngContent: 'Centered Content',\n    height: 180,\n    width: '100%',\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -812,7 +1208,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -891,7 +1287,38 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Default",
+          framework: "angular",
+          code: "<!-- Storybook story: Default -->\n<uni-checkbox ${argsToTemplate(args)}></uni-checkbox>\n<!-- args:\n{\n    label: 'Accept terms and conditions',\n    variant: 'primary',\n    disabled: false,\n    checked: true,\n  }\n-->"
+        },
+        {
+          title: "Without Label",
+          framework: "angular",
+          code: "<!-- Storybook story: Without Label -->\n<uni-checkbox ${argsToTemplate(args)}></uni-checkbox>\n<!-- args:\n{\n    label: '',\n    variant: 'primary',\n    disabled: false,\n  }\n-->"
+        },
+        {
+          title: "Disabled",
+          framework: "angular",
+          code: "<!-- Storybook story: Disabled -->\n<uni-checkbox ${argsToTemplate(args)}></uni-checkbox>\n<!-- args:\n{\n    label: 'Disabled checkbox',\n    variant: 'primary',\n    disabled: true,\n  }\n-->"
+        },
+        {
+          title: "Variants",
+          framework: "angular",
+          code: "<!-- Storybook story: Variants -->\n<uni-checkbox ${argsToTemplate(args)}></uni-checkbox>"
+        },
+        {
+          title: "With Change Event",
+          framework: "angular",
+          code: "<!-- Storybook story: With Change Event -->\n<uni-checkbox ${argsToTemplate(args)}></uni-checkbox>"
+        },
+        {
+          title: "Form Signals",
+          framework: "angular",
+          code: "<!-- Storybook story: Form Signals -->\n<uni-checkbox ${argsToTemplate(args)}></uni-checkbox>"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -909,7 +1336,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -956,7 +1383,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -987,7 +1414,43 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: `<!-- Storybook story: Primary -->
+<uni-data-search \${argsToTemplate(props)} />
+<div style="margin-top: 16px;">
+  @for (record of datasource.records(); track record.id) {
+    <div>{{ record.name }} \u2014 {{ record.homeworld }}</div>
+  }
+</div>
+<!-- args:
+{
+    datasource: new UniRecordDatasource<any>(starWarsCharacters.slice(0, 10)),
+    placeholder: 'Search characters',
+  }
+-->`
+        },
+        {
+          title: "Field Scoped",
+          framework: "angular",
+          code: `<!-- Storybook story: Field Scoped -->
+<uni-data-search \${argsToTemplate(props)} />
+<div style="margin-top: 16px;">
+  @for (record of datasource.records(); track record.id) {
+    <div>{{ record.name }} \u2014 {{ record.homeworld }}</div>
+  }
+</div>
+<!-- args:
+{
+    datasource: new UniRecordDatasource<any>(starWarsCharacters.slice(0, 10)),
+    placeholder: 'Search by name only',
+    fields: ['name'],
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -1003,7 +1466,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "data",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1063,7 +1526,28 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<!-- args:\n{\n    columns: [\n      {\n        columnDef: 'id',\n        header: 'ID',\n        isSticky: true,\n      },\n      {\n        columnDef: 'name',\n        header: 'Name',\n        textAlign: 'left',\n      },\n      {\n        columnDef: 'species',\n        header: 'Species',\n      },\n      {\n        columnDef: 'height',\n        header: 'Height',\n        cell: (element: any) => (element.height ? `${element.height} m` : ''),\n      },\n      {\n        columnDef: 'homeworld',\n        header: 'Home World',\n      },\n    ],\n    datasource: new UniRecordDatasource<any>(starWarsCharacters),\n  }\n-->"
+        },
+        {
+          title: "With Header",
+          framework: "angular",
+          code: "<!-- Storybook story: With Header -->\n<!-- args:\n{\n    height: '300px',\n    columns: [\n      {\n        columnDef: 'id',\n        header: 'ID',\n      },\n      {\n        columnDef: 'name',\n        header: 'Name',\n        textAlign: 'left',\n      },\n      {\n        columnDef: 'homeworld',\n        header: 'Home World',\n      },\n    ],\n    datasource: new UniRecordDatasource<any>(starWarsCharacters),\n  }\n-->"
+        },
+        {
+          title: "With Search",
+          framework: "angular",
+          code: "<!-- Storybook story: With Search -->\n<!-- args:\n{\n    height: '300px',\n    columns: [\n      {\n        columnDef: 'id',\n        header: 'ID',\n      },\n      {\n        columnDef: 'name',\n        header: 'Name',\n        textAlign: 'left',\n      },\n      {\n        columnDef: 'homeworld',\n        header: 'Home World',\n      },\n    ],\n    datasource: new UniRecordDatasource<any>(starWarsCharacters),\n  }\n-->"
+        },
+        {
+          title: "With Detail Row",
+          framework: "angular",
+          code: "<!-- Storybook story: With Detail Row -->\n<!-- args:\n{\n    height: '300px',\n    columns: [\n      {\n        columnDef: 'id',\n        header: 'ID',\n      },\n      {\n        columnDef: 'name',\n        header: 'Name',\n        textAlign: 'left',\n      },\n      {\n        columnDef: 'homeworld',\n        header: 'Home World',\n      },\n    ],\n    datasource: new UniRecordDatasource<any>(starWarsCharacters),\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -1079,7 +1563,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1117,7 +1601,24 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: `<!-- Storybook story: Primary -->
+<DebounceInput \${argsToTemplate(props)} (change)="lastEmitted = $event" #debounce />
+<div style="margin-top: 16px;">
+  <div>Live value: {{ debounce.value() }}</div>
+  <div>Debounced value: {{ lastEmitted }}</div>
+</div>
+<!-- args:
+{
+    inputName: 'search',
+    debounceTime: 400,
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -1133,7 +1634,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1178,7 +1679,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: '<!-- Storybook story: Primary -->\n<Button (click)="dialog.open()">Open Dialog</Button>\n<Dialog #dialog>\n  <DialogHeader color="primary">Sample Dialog</DialogHeader>\n  <div center-layout [width]="300" [height]="200">\n    <Text>Dialog</Text>\n  </div>\n  <DialogButtons></DialogButtons>\n</Dialog>\n<!-- args:\n{}\n-->'
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -1201,7 +1708,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1286,7 +1793,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1310,7 +1817,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1335,7 +1842,22 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: `<!-- Storybook story: Primary -->
+<Center height="200px">
+  <Divider border="\${border}" orientation="\${orientation}" />
+</Center>
+<!-- args:
+{
+    orientation: 'horizontal',
+    border: 'primary',
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -1351,7 +1873,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "directives",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1376,6 +1898,81 @@ var uni_index_default = {
       },
       relatedTokens: []
     },
+    {
+      id: "drawer",
+      name: "Drawer",
+      status: "stable",
+      summary: "",
+      description: "",
+      category: "components",
+      version: "5.2.0",
+      bindings: {
+        angular: {
+          importPath: "@uni-design-system/uni-angular",
+          selectorOrTag: "uni-drawer, Drawer",
+          api: [
+            {
+              name: "open",
+              kind: "model",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: "Two-way bindable open state: [(open)]."
+            },
+            {
+              name: "mode",
+              kind: "input",
+              type: "DrawerMode",
+              required: false,
+              default: "'side'",
+              description: ""
+            },
+            {
+              name: "position",
+              kind: "input",
+              type: "DrawerPosition",
+              required: false,
+              default: "'start'",
+              description: ""
+            },
+            {
+              name: "ariaLabel",
+              kind: "input",
+              type: "string",
+              required: false,
+              default: "'Navigation'",
+              description: "Accessible name for the overlay mode's dialog."
+            }
+          ]
+        }
+      },
+      examples: [
+        {
+          title: "Dashboard Shell",
+          framework: "angular",
+          code: '<!-- Storybook story: Dashboard Shell -->\n<div style="display: flex; flex-direction: column; height: 420px; border: 1px solid #8884; overflow: hidden;">\n<uni-app-bar title="Console">\n  <button leading icon-button symbolName="menu" (click)="open = !open">Toggle navigation</button>\n  <button trailing icon-button symbolName="account_circle">Account</button>\n</uni-app-bar>\n<div style="display: flex; flex: 1; min-height: 0;">\n  <uni-drawer mode="side" [(open)]="open">\n    <uni-text typeface="title-small" display="block">Dashboard</uni-text>\n    <uni-text typeface="title-small" display="block">Reports</uni-text>\n    <uni-text typeface="title-small" display="block">Settings</uni-text>\n  </uni-drawer>\n  <main style="flex: 1; padding: 16px; min-width: 0;">\n    <uni-text typeface="headline-small">Content</uni-text>\n    <uni-text typeface="body-1-long" display="block">\n      The side drawer pushes this content; toggle it from the app bar.\n    </uni-text>\n  </main>\n</div>\n</div>'
+        },
+        {
+          title: "Overlay",
+          framework: "angular",
+          code: '<!-- Storybook story: Overlay -->\n<div style="display: flex; flex-direction: column; height: 420px; border: 1px solid #8884; overflow: hidden;">\n<uni-app-bar title="Console">\n  <button leading icon-button symbolName="menu" (click)="open = !open">Toggle navigation</button>\n  <button trailing icon-button symbolName="account_circle">Account</button>\n</uni-app-bar>\n<div style="display: flex; flex: 1; min-height: 0;">\n  <uni-drawer mode="side" [(open)]="open">\n    <uni-text typeface="title-small" display="block">Dashboard</uni-text>\n    <uni-text typeface="title-small" display="block">Reports</uni-text>\n    <uni-text typeface="title-small" display="block">Settings</uni-text>\n  </uni-drawer>\n  <main style="flex: 1; padding: 16px; min-width: 0;">\n    <uni-text typeface="headline-small">Content</uni-text>\n    <uni-text typeface="body-1-long" display="block">\n      The side drawer pushes this content; toggle it from the app bar.\n    </uni-text>\n  </main>\n</div>\n</div>'
+        }
+      ],
+      guidelines: {
+        whenToUse: "",
+        dos: [],
+        donts: [],
+        accessibility: []
+      },
+      relatedTokens: [
+        "drawer.behavior.color",
+        "drawer.behavior.width",
+        "drawer.behavior.divider",
+        "drawer.behavior.elevation",
+        "drawer.behavior.padding",
+        "drawer.behavior.backdrop"
+      ]
+    },
     {
       id: "dropdown",
       name: "Dropdown",
@@ -1383,7 +1980,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1472,7 +2069,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1489,7 +2086,27 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: `<!-- Storybook story: Primary -->
+<Card>
+<CardHeader title="Expandable Card"><ExpandToggle #toggle /></CardHeader>
+<Expand [collapsed]="toggle.collapsed()">
+  <CardContent>
+    <Text>\${ngContent}</Text>
+  </CardContent>
+</Expand>
+</Card>
+<!-- args:
+{
+    collapsed: false,
+    ngContent: 'Expandable Content',
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -1505,7 +2122,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1544,7 +2161,23 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: `<!-- Storybook story: Primary -->
+<ExpandArea title="\${title}" padding="\${padding}" initCollapsed="\${initCollapsed}" #expandArea>
+  <button text-button (click)="expandArea.toggleExpand()" size="md" variant="ghost" symbolLeft="collapse_all">Collapse area</button>
+</ExpandArea>
+<!-- args:
+{
+    title: 'Expand Area Title',
+    padding: 'sm',
+    initCollapsed: true,
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -1560,7 +2193,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1584,7 +2217,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: '<!-- Storybook story: Primary -->\n<ExpandToggle [collapsed]="collapsed" #toggle />\n<div>Collapsed: {{ toggle.collapsed() }}</div>\n<!-- args:\n{\n    collapsed: true,\n  }\n-->'
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -1600,7 +2239,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1701,7 +2340,46 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: `<!-- Storybook story: Primary -->
+<uni-file-drop-zone \${argsToTemplate(props)} [helpTemplate]="myTemplate" />
+<ng-template #myTemplate>
+<div stack-layout alignItems="center">
+  <Text typeface="title-medium">Title Text</Text>
+  <Text typeface="subtitle-1">Subtitle Text</Text>
+</div>
+</ng-template>
+<!-- args:
+{
+    label: 'Image',
+    browseButtonText: 'Browse for image',
+    allowedFileExtensions: ['png', 'jpg'],
+  }
+-->`
+        },
+        {
+          title: "With Help Template",
+          framework: "angular",
+          code: `<!-- Storybook story: With Help Template -->
+<uni-file-drop-zone \${argsToTemplate(props)} [helpTemplate]="myTemplate" />
+<ng-template #myTemplate>
+<div stack-layout alignItems="center">
+  <Text typeface="title-medium">Title Text</Text>
+  <Text typeface="subtitle-1">Subtitle Text</Text>
+</div>
+</ng-template>
+<!-- args:
+{
+    label: 'Image',
+    browseButtonText: 'Browse for image',
+    allowedFileExtensions: ['png', 'jpg'],
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -1717,7 +2395,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1769,7 +2447,36 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Simple Grid",
+          framework: "angular",
+          code: `<!-- Storybook story: Simple Grid -->
+<div grid-layout \${argsToTemplate(props)}>
+  <div box-layout gridArea="nav" color="quaternary" padding="md" borderRadius="sm">
+    <Text>nav</Text>
+  </div>
+  <div box-layout gridArea="a1" color="primary" padding="md" borderRadius="sm">
+    <Text>a1</Text>
+  </div>
+  <div box-layout gridArea="a2" color="secondary" padding="md" borderRadius="sm">
+    <Text>a2</Text>
+  </div>
+  <div box-layout gridArea="b1" color="tertiary" padding="md" borderRadius="sm">
+    <Text>b1</Text>
+  </div>
+  <div box-layout gridArea="b2" color="warn" padding="md" borderRadius="sm">
+    <Text>b2</Text>
+  </div>
+</div>
+<!-- args:
+{
+    templateAreas: \`'nav a1 a2' 'nav b1 b2'\`,
+    gap: 'sm',
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -1785,7 +2492,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1817,7 +2524,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1840,7 +2547,21 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: `<!-- Storybook story: Primary -->
+<div style="height: \${size + 'px'}">
+    <Icon name="\${name}" color="\${color}" />
+  </div>
+<!-- args:
+{
+    name: 'checkCircle',
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -1856,7 +2577,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1924,7 +2645,23 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: `<!-- Storybook story: Primary -->
+<button icon-button iconName="\${iconName}" variant="\${variant}" size="\${size}" \${argsToTemplate(
+  props
+)}></button>
+<!-- args:
+{
+    iconName: 'search',
+    size: 'lg',
+    variant: 'ghost',
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -1940,7 +2677,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2019,7 +2756,38 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<uni-input ${argsToTemplate(props)}>\n</uni-input>\n<!-- args:\n{\n    label: 'Email Address',\n    placeholder: 'Enter your email',\n    value: '',\n    disabled: false,\n    touched: false,\n    invalid: false,\n    dirty: false,\n  }\n-->"
+        },
+        {
+          title: "With Value",
+          framework: "angular",
+          code: "<!-- Storybook story: With Value -->\n<uni-input ${argsToTemplate(props)}>\n</uni-input>\n<!-- args:\n{\n    label: 'Username',\n    placeholder: 'Enter username',\n    value: 'john.doe',\n    disabled: false,\n    touched: true,\n    invalid: false,\n    dirty: true,\n  }\n-->"
+        },
+        {
+          title: "Disabled",
+          framework: "angular",
+          code: "<!-- Storybook story: Disabled -->\n<uni-input ${argsToTemplate(props)}>\n</uni-input>\n<!-- args:\n{\n    label: 'Disabled Input',\n    placeholder: 'This input is disabled',\n    value: 'Cannot edit this',\n    disabled: true,\n    touched: false,\n    invalid: false,\n    dirty: false,\n  }\n-->"
+        },
+        {
+          title: "Invalid",
+          framework: "angular",
+          code: "<!-- Storybook story: Invalid -->\n<uni-input ${argsToTemplate(props)}>\n</uni-input>\n<!-- args:\n{\n    label: 'Email Address',\n    placeholder: 'Enter your email',\n    value: 'invalid-email',\n    disabled: false,\n    touched: true,\n    invalid: true,\n    dirty: true,\n  }\n-->"
+        },
+        {
+          title: "Required",
+          framework: "angular",
+          code: "<!-- Storybook story: Required -->\n<uni-input ${argsToTemplate(props)}>\n</uni-input>\n<!-- args:\n{\n    label: 'Full Name',\n    placeholder: 'This field is required',\n    value: '',\n    disabled: false,\n    touched: true,\n    invalid: true,\n    dirty: false,\n  }\n-->"
+        },
+        {
+          title: "Long Label",
+          framework: "angular",
+          code: "<!-- Storybook story: Long Label -->\n<uni-input ${argsToTemplate(props)}>\n</uni-input>\n<!-- args:\n{\n    label: 'A Very Long Label That Demonstrates How The Component Handles Extended Text',\n    placeholder: 'Enter some text',\n    value: '',\n    disabled: false,\n    touched: false,\n    invalid: false,\n    dirty: false,\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2049,7 +2817,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2078,11 +2846,35 @@ var uni_index_default = {
               required: false,
               default: "'0'",
               description: ""
+            },
+            {
+              name: "height",
+              kind: "input",
+              type: "string | number | undefined",
+              required: false,
+              default: "undefined",
+              description: "Override the themed field height, e.g. `'auto'` for multi-line fields."
             }
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: '<!-- Storybook story: Primary -->\n<uni-input-box ${argsToTemplate(props)}>\n  <input type="text" placeholder="Type here..." />\n</uni-input-box>\n<!-- args:\n{\n    disabled: false,\n    error: false,\n  }\n-->'
+        },
+        {
+          title: "Error State",
+          framework: "angular",
+          code: '<!-- Storybook story: Error State -->\n<uni-input-box ${argsToTemplate(props)}>\n  <input type="text" placeholder="Type here..." />\n</uni-input-box>\n<!-- args:\n{\n    disabled: false,\n    error: true,\n  }\n-->'
+        },
+        {
+          title: "Disabled",
+          framework: "angular",
+          code: '<!-- Storybook story: Disabled -->\n<uni-input-box ${argsToTemplate(props)}>\n  <input type="text" placeholder="Type here..." />\n</uni-input-box>\n<!-- args:\n{\n    disabled: true,\n    error: false,\n  }\n-->'
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2098,7 +2890,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2146,7 +2938,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<!-- args:\n{\n    json: { a: { b: ['c', 'd', 'e', 'f'], g: ['h', 'i'] }, j: 'k' },\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2162,7 +2960,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2200,7 +2998,27 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: `<!-- Storybook story: Primary -->
+<div box-layout color="primary" padding="sm">
+  <Menu \${argsToTemplate(props)}>
+    <button text-button variant="ghost" symbolRight="arrow_drop_down">Menu</button>
+  </Menu>
+</div>
+<!-- args:
+{
+    menuItems: [
+      { label: 'Language', symbolName: 'translate' },
+      { label: 'Settings', symbolName: 'settings' },
+      { label: 'Logout', symbolName: 'logout' },
+    ],
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2216,7 +3034,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2332,7 +3150,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2380,7 +3198,28 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<uni-multi-select ${argsToTemplate(props)}>\n</uni-multi-select>\n<!-- args:\n{\n    options: [\n      { value: 'option1', label: 'Option 1' },\n      { value: 'option2', label: 'Option 2' },\n      { value: 'option3', label: 'Option 3' },\n      { value: 'option4', label: 'Option 4' },\n    ],\n    selections: ['option1', 'option3'],\n  }\n-->"
+        },
+        {
+          title: "Empty",
+          framework: "angular",
+          code: "<!-- Storybook story: Empty -->\n<uni-multi-select ${argsToTemplate(props)}>\n</uni-multi-select>\n<!-- args:\n{\n    options: [\n      { value: 'option1', label: 'Option 1' },\n      { value: 'option2', label: 'Option 2' },\n      { value: 'option3', label: 'Option 3' },\n    ],\n    selections: undefined,\n  }\n-->"
+        },
+        {
+          title: "Single Selection",
+          framework: "angular",
+          code: "<!-- Storybook story: Single Selection -->\n<uni-multi-select ${argsToTemplate(props)}>\n</uni-multi-select>\n<!-- args:\n{\n    options: [\n      { value: 'red', label: 'Red' },\n      { value: 'green', label: 'Green' },\n      { value: 'blue', label: 'Blue' },\n    ],\n    selections: ['red'],\n  }\n-->"
+        },
+        {
+          title: "Many Options",
+          framework: "angular",
+          code: "<!-- Storybook story: Many Options -->\n<uni-multi-select ${argsToTemplate(props)}>\n</uni-multi-select>\n<!-- args:\n{\n    options: [\n      { value: 'option1', label: 'First Option' },\n      { value: 'option2', label: 'Second Option' },\n      { value: 'option3', label: 'Third Option' },\n      { value: 'option4', label: 'Fourth Option' },\n      { value: 'option5', label: 'Fifth Option' },\n      { value: 'option6', label: 'Sixth Option' },\n      { value: 'option7', label: 'Seventh Option' },\n      { value: 'option8', label: 'Eighth Option' },\n    ],\n    selections: ['option2', 'option4', 'option6'],\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2396,7 +3235,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2475,7 +3314,43 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<uni-multi-select-dropdown ${argsToTemplate(props)}>\n</uni-multi-select-dropdown>\n<!-- args:\n{\n    options: [\n      { value: 'option1', label: 'Option 1' },\n      { value: 'option2', label: 'Option 2' },\n      { value: 'option3', label: 'Option 3' },\n      { value: 'option4', label: 'Option 4' },\n    ],\n    value: ['option1', 'option3'],\n  }\n-->"
+        },
+        {
+          title: "Empty",
+          framework: "angular",
+          code: "<!-- Storybook story: Empty -->\n<uni-multi-select-dropdown ${argsToTemplate(props)}>\n</uni-multi-select-dropdown>\n<!-- args:\n{\n    options: [\n      { value: 'option1', label: 'Option 1' },\n      { value: 'option2', label: 'Option 2' },\n      { value: 'option3', label: 'Option 3' },\n    ],\n    value: [],\n  }\n-->"
+        },
+        {
+          title: "Single Selection",
+          framework: "angular",
+          code: "<!-- Storybook story: Single Selection -->\n<uni-multi-select-dropdown ${argsToTemplate(props)}>\n</uni-multi-select-dropdown>\n<!-- args:\n{\n    options: [\n      { value: 'red', label: 'Red' },\n      { value: 'green', label: 'Green' },\n      { value: 'blue', label: 'Blue' },\n    ],\n    value: ['red'],\n  }\n-->"
+        },
+        {
+          title: "Many Options",
+          framework: "angular",
+          code: "<!-- Storybook story: Many Options -->\n<uni-multi-select-dropdown ${argsToTemplate(props)}>\n</uni-multi-select-dropdown>\n<!-- args:\n{\n    options: [\n      { value: 'option1', label: 'First Option' },\n      { value: 'option2', label: 'Second Option' },\n      { value: 'option3', label: 'Third Option' },\n      { value: 'option4', label: 'Fourth Option' },\n      { value: 'option5', label: 'Fifth Option' },\n      { value: 'option6', label: 'Sixth Option' },\n      { value: 'option7', label: 'Seventh Option' },\n      { value: 'option8', label: 'Eighth Option' },\n    ],\n    value: ['option2', 'option4', 'option6'],\n  }\n-->"
+        },
+        {
+          title: "Disabled",
+          framework: "angular",
+          code: "<!-- Storybook story: Disabled -->\n<uni-multi-select-dropdown ${argsToTemplate(props)}>\n</uni-multi-select-dropdown>\n<!-- args:\n{\n    options: [\n      { value: 'option1', label: 'Option 1' },\n      { value: 'option2', label: 'Option 2' },\n      { value: 'option3', label: 'Option 3' },\n    ],\n    value: ['option1'],\n    disabled: true,\n  }\n-->"
+        },
+        {
+          title: "Error State",
+          framework: "angular",
+          code: "<!-- Storybook story: Error State -->\n<uni-multi-select-dropdown ${argsToTemplate(props)}>\n</uni-multi-select-dropdown>\n<!-- args:\n{\n    options: [\n      { value: 'option1', label: 'Option 1' },\n      { value: 'option2', label: 'Option 2' },\n      { value: 'option3', label: 'Option 3' },\n    ],\n    value: [],\n    invalid: true,\n    touched: true,\n  }\n-->"
+        },
+        {
+          title: "With Placeholder",
+          framework: "angular",
+          code: "<!-- Storybook story: With Placeholder -->\n<uni-multi-select-dropdown ${argsToTemplate(props)}>\n</uni-multi-select-dropdown>\n<!-- args:\n{\n    options: [\n      { value: 'apple', label: 'Apple' },\n      { value: 'banana', label: 'Banana' },\n      { value: 'orange', label: 'Orange' },\n      { value: 'grape', label: 'Grape' },\n    ],\n    value: [],\n    placeholder: 'Choose your favorite fruits...',\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2491,7 +3366,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2555,7 +3430,166 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Default",
+          framework: "angular",
+          code: `<!-- Storybook story: Default -->
+<div style="margin: 20px;">
+<uni-notification-badge
+  [count]="count"
+  [maxCount]="maxCount"
+  [badgeVariant]="badgeVariant"
+  [color]="color"
+  [position]="position"
+  [show]="show">
+  <button uni-text-button>
+    Button with Badge
+  </button>
+</uni-notification-badge>
+</div>
+<!-- args:
+{
+    count: 5,
+    badgeVariant: 'count',
+    color: 'warn',
+    position: 'top-right',
+    show: true,
+    maxCount: 99,
+  }
+-->`
+        },
+        {
+          title: "Dot",
+          framework: "angular",
+          code: `<!-- Storybook story: Dot -->
+<div style="margin: 20px;">
+<uni-notification-badge
+  [count]="count"
+  [maxCount]="maxCount"
+  [badgeVariant]="badgeVariant"
+  [color]="color"
+  [position]="position"
+  [show]="show">
+  <button uni-text-button>
+    Button with Badge
+  </button>
+</uni-notification-badge>
+</div>
+<!-- args:
+{
+    badgeVariant: 'dot',
+    color: 'warn',
+    position: 'top-right',
+    show: true,
+  }
+-->`
+        },
+        {
+          title: "Count",
+          framework: "angular",
+          code: `<!-- Storybook story: Count -->
+<div style="margin: 20px;">
+<uni-notification-badge
+  [count]="count"
+  [maxCount]="maxCount"
+  [badgeVariant]="badgeVariant"
+  [color]="color"
+  [position]="position"
+  [show]="show">
+  <button uni-text-button>
+    Button with Badge
+  </button>
+</uni-notification-badge>
+</div>
+<!-- args:
+{
+    count: 12,
+    badgeVariant: 'count',
+    color: 'warn',
+    position: 'top-right',
+    show: true,
+    maxCount: 99,
+  }
+-->`
+        },
+        {
+          title: "Pill",
+          framework: "angular",
+          code: `<!-- Storybook story: Pill -->
+<div style="margin: 20px;">
+<uni-notification-badge
+  [count]="count"
+  [maxCount]="maxCount"
+  [badgeVariant]="badgeVariant"
+  [color]="color"
+  [position]="position"
+  [show]="show">
+  <button uni-text-button>
+    Button with Badge
+  </button>
+</uni-notification-badge>
+</div>
+<!-- args:
+{
+    count: 1234,
+    badgeVariant: 'pill',
+    color: 'warn',
+    position: 'top-right',
+    show: true,
+    maxCount: 999,
+  }
+-->`
+        },
+        {
+          title: "Large Count",
+          framework: "angular",
+          code: `<!-- Storybook story: Large Count -->
+<div style="margin: 20px;">
+<uni-notification-badge
+  [count]="count"
+  [maxCount]="maxCount"
+  [badgeVariant]="badgeVariant"
+  [color]="color"
+  [position]="position"
+  [show]="show">
+  <button uni-text-button>
+    Button with Badge
+  </button>
+</uni-notification-badge>
+</div>
+<!-- args:
+{
+    count: 150,
+    badgeVariant: 'count',
+    color: 'warn',
+    position: 'top-right',
+    show: true,
+    maxCount: 99,
+  }
+-->`
+        },
+        {
+          title: "Different Colors",
+          framework: "angular",
+          code: '<!-- Storybook story: Different Colors -->\n<div style="margin: 20px;">\n<uni-notification-badge\n  [count]="count"\n  [maxCount]="maxCount"\n  [badgeVariant]="badgeVariant"\n  [color]="color"\n  [position]="position"\n  [show]="show">\n  <button uni-text-button>\n    Button with Badge\n  </button>\n</uni-notification-badge>\n</div>'
+        },
+        {
+          title: "Different Positions",
+          framework: "angular",
+          code: '<!-- Storybook story: Different Positions -->\n<div style="margin: 20px;">\n<uni-notification-badge\n  [count]="count"\n  [maxCount]="maxCount"\n  [badgeVariant]="badgeVariant"\n  [color]="color"\n  [position]="position"\n  [show]="show">\n  <button uni-text-button>\n    Button with Badge\n  </button>\n</uni-notification-badge>\n</div>'
+        },
+        {
+          title: "Variant Comparison",
+          framework: "angular",
+          code: '<!-- Storybook story: Variant Comparison -->\n<div style="margin: 20px;">\n<uni-notification-badge\n  [count]="count"\n  [maxCount]="maxCount"\n  [badgeVariant]="badgeVariant"\n  [color]="color"\n  [position]="position"\n  [show]="show">\n  <button uni-text-button>\n    Button with Badge\n  </button>\n</uni-notification-badge>\n</div>'
+        },
+        {
+          title: "With Icons",
+          framework: "angular",
+          code: '<!-- Storybook story: With Icons -->\n<div style="margin: 20px;">\n<uni-notification-badge\n  [count]="count"\n  [maxCount]="maxCount"\n  [badgeVariant]="badgeVariant"\n  [color]="color"\n  [position]="position"\n  [show]="show">\n  <button uni-text-button>\n    Button with Badge\n  </button>\n</uni-notification-badge>\n</div>'
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2571,7 +3605,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2595,7 +3629,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "data",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2642,7 +3676,18 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: '<!-- Storybook story: Primary -->\n<Paginator ${argsToTemplate(props)} />\n<div style="margin-top: 16px;">\n  @for (record of datasource.records(); track record.id) {\n    <div>{{ record.name }}</div>\n  }\n</div>\n<!-- args:\n{\n    datasource: new UniRecordDatasource<any>(starWarsCharacters),\n    initPageSize: 5,\n    showPageSize: true,\n    showPageJumper: true,\n    showPageNumbers: true,\n  }\n-->'
+        },
+        {
+          title: "Page Numbers Only",
+          framework: "angular",
+          code: '<!-- Storybook story: Page Numbers Only -->\n<Paginator ${argsToTemplate(props)} />\n<div style="margin-top: 16px;">\n  @for (record of datasource.records(); track record.id) {\n    <div>{{ record.name }}</div>\n  }\n</div>\n<!-- args:\n{\n    datasource: new UniRecordDatasource<any>(starWarsCharacters),\n    initPageSize: 5,\n    showPageSize: false,\n    showPageJumper: false,\n    showPageNumbers: true,\n  }\n-->'
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2666,7 +3711,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2691,7 +3736,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: '<!-- Storybook story: Primary -->\n<Popover placement="${placement}" [autoClose]="${autoClose}" #popover>\n  <Button trigger>Open Popover</Button>\n  <Stack gap="sm">\n    <div>\n      <Text typeface="title-small" display="block">\n      This is a Popover.\n      </Text>\n      It is possible to add any markup you want to a Popover.\n    </div>\n    <div>\n      <Button symbolLeft="thumb_up" size="sm" variant="secondary" (click)="popover.hidePopover()">OK!</Button>\n    </div>\n  </Stack>\n</Popover>\n<!-- args:\n{\n    placement: \'right-start\',\n    autoClose: true,\n  }\n-->'
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2707,7 +3758,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2747,7 +3798,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Default",
+          framework: "angular",
+          code: '<!-- Storybook story: Default -->\n<ProgressBar percent="${percent}" ${argsToTemplate(props)}></ProgressBar>\n<!-- args:\n{\n    percent: 60,\n  }\n-->'
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2763,7 +3820,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2787,7 +3844,21 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Default",
+          framework: "angular",
+          code: `<!-- Storybook story: Default -->
+<ProgressGauge percent="\${percent}" variant="\${variant}" size="\${size}"></ProgressGauge>
+<!-- args:
+{
+    percent: 60,
+    size: 'lg',
+    variant: 'primary',
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2803,7 +3874,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2890,7 +3961,43 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Default",
+          framework: "angular",
+          code: "<!-- Storybook story: Default -->\n<uni-radio ${argsToTemplate(args)}></uni-radio>\n<!-- args:\n{\n    label: 'Select an option',\n    variant: 'primary',\n    disabled: false,\n    value: 'option1',\n    name: 'radio-group',\n    options: defaultOptions,\n  }\n-->"
+        },
+        {
+          title: "Without Label",
+          framework: "angular",
+          code: "<!-- Storybook story: Without Label -->\n<uni-radio ${argsToTemplate(args)}></uni-radio>\n<!-- args:\n{\n    label: '',\n    variant: 'primary',\n    disabled: false,\n    value: '',\n    name: 'radio-group',\n    options: defaultOptions,\n  }\n-->"
+        },
+        {
+          title: "Disabled",
+          framework: "angular",
+          code: "<!-- Storybook story: Disabled -->\n<uni-radio ${argsToTemplate(args)}></uni-radio>\n<!-- args:\n{\n    label: 'Disabled radio group',\n    variant: 'primary',\n    disabled: true,\n    value: 'option1',\n    name: 'radio-group',\n    options: defaultOptions,\n  }\n-->"
+        },
+        {
+          title: "With Disabled Options",
+          framework: "angular",
+          code: "<!-- Storybook story: With Disabled Options -->\n<uni-radio ${argsToTemplate(args)}></uni-radio>\n<!-- args:\n{\n    label: 'Some options disabled',\n    variant: 'primary',\n    disabled: false,\n    value: 'option1',\n    name: 'radio-group',\n    options: [\n      { label: 'Available Option', value: 'option1' },\n      { label: 'Disabled Option', value: 'option2', disabled: true },\n      { label: 'Another Available', value: 'option3' },\n    ],\n  }\n-->"
+        },
+        {
+          title: "Variants",
+          framework: "angular",
+          code: "<!-- Storybook story: Variants -->\n<uni-radio ${argsToTemplate(args)}></uni-radio>"
+        },
+        {
+          title: "With Change Event",
+          framework: "angular",
+          code: "<!-- Storybook story: With Change Event -->\n<uni-radio ${argsToTemplate(args)}></uni-radio>"
+        },
+        {
+          title: "Form Signals",
+          framework: "angular",
+          code: "<!-- Storybook story: Form Signals -->\n<uni-radio ${argsToTemplate(args)}></uni-radio>"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2906,7 +4013,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "directives",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2930,7 +4037,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2963,7 +4070,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Button Row",
+          framework: "angular",
+          code: "<!-- Storybook story: Button Row -->\n<div row-layout ${argsToTemplate(props)}>\n  <button text-button>Button 1</button>\n  <button text-button>Button 2</button>\n  <button text-button>Button 3</button>\n</div>\n<!-- args:\n{ gap: 'lg' }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -2979,7 +4092,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3104,7 +4217,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: '<!-- Storybook story: Primary -->\n<div scroll-area ${argsToTemplate(props)} #scrollArea>\n  <button size="sm" text-button variant="ghost" symbolLeft="arrow_downward" (click)="scrollArea.scrollToBottom()">Scroll to bottom</button>\n  ${ngContent}\n  <button size="sm" text-button variant="ghost" symbolLeft="arrow_upward" (click)="scrollArea.scrollToTop()">Back to top</button>\n</div>\n<!-- args:\n{\n    border: \'quaternary\',\n    color: \'tertiary-surface\',\n    height: 200,\n    ngContent: `\n      <Text typeface="headline-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</Text>\n      <Text typeface="body-1-long">\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere debitis ullam, quae quidem, impedit\n              culpa nam\n              repellat in voluptatibus esse ab harum, hic? Aliquam nesciunt voluptates repellendus assumenda labore.\n            </p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quos voluptate doloribus. Optio unde\n              inventore, tempore\n              nemo repellat expedita! Quod, accusamus nobis iure. Aliquam quibusdam, nemo explicabo ipsum provident\n              asperiores.</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, qui, rem! Debitis cum maiores iste,\n              possimus!\n              Obcaecati accusamus eaque expedita quo soluta quis, repudiandae similique, veritatis repellendus facere\n              suscipit!\n              Et!</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum doloremque repellat praesentium quae et\n              consectetur\n              iure quos porro, provident voluptates reprehenderit a. Accusamus ut, quaerat asperiores blanditiis\n              voluptate, sint\n              facilis.</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus beatae inventore nobis esse\n              temporibus\n              exercitationem\n              eos illo minima non magnam, provident sit doloribus maiores odio in animi quidem unde. Perferendis.</p>\n\n      </Text>\n\n\n    `,\n  }\n-->'
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -3120,7 +4239,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3158,7 +4277,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<!-- args:\n{\n    label: 'Search',\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -3174,7 +4299,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3260,7 +4385,38 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<uni-select ${argsToTemplate(props)}>\n</uni-select>\n<!-- args:\n{\n    placeholder: 'Select your country...',\n    options: [\n      { value: 'us', label: 'United States' },\n      { value: 'ca', label: 'Canada' },\n      { value: 'uk', label: 'United Kingdom' },\n      { value: 'au', label: 'Australia' },\n    ],\n    value: null,\n    disabled: false,\n    touched: false,\n    invalid: false,\n    dirty: false,\n  }\n-->"
+        },
+        {
+          title: "With Value",
+          framework: "angular",
+          code: "<!-- Storybook story: With Value -->\n<uni-select ${argsToTemplate(props)}>\n</uni-select>\n<!-- args:\n{\n    placeholder: 'Select priority...',\n    options: [\n      { value: 'low', label: 'Low Priority' },\n      { value: 'medium', label: 'Medium Priority' },\n      { value: 'high', label: 'High Priority' },\n      { value: 'urgent', label: 'Urgent' },\n    ],\n    value: 'high',\n    disabled: false,\n    touched: true,\n    invalid: false,\n    dirty: false,\n  }\n-->"
+        },
+        {
+          title: "Disabled",
+          framework: "angular",
+          code: "<!-- Storybook story: Disabled -->\n<uni-select ${argsToTemplate(props)}>\n</uni-select>\n<!-- args:\n{\n    placeholder: 'Cannot select...',\n    options: [\n      { value: 'option1', label: 'Option 1' },\n      { value: 'option2', label: 'Option 2' },\n      { value: 'option3', label: 'Option 3' },\n    ],\n    value: 'option2',\n    disabled: true,\n    touched: false,\n    invalid: false,\n    dirty: false,\n  }\n-->"
+        },
+        {
+          title: "Invalid",
+          framework: "angular",
+          code: "<!-- Storybook story: Invalid -->\n<uni-select ${argsToTemplate(props)}>\n</uni-select>\n<!-- args:\n{\n    placeholder: 'Please select an option...',\n    options: [\n      { value: 'yes', label: 'Yes' },\n      { value: 'no', label: 'No' },\n      { value: 'maybe', label: 'Maybe' },\n    ],\n    value: null,\n    disabled: false,\n    touched: true,\n    invalid: true,\n  }\n-->"
+        },
+        {
+          title: "Many Options",
+          framework: "angular",
+          code: "<!-- Storybook story: Many Options -->\n<uni-select ${argsToTemplate(props)}>\n</uni-select>\n<!-- args:\n{\n    placeholder: 'Select state or province...',\n    options: [\n      { value: 'al', label: 'Alabama' },\n      { value: 'ak', label: 'Alaska' },\n      { value: 'az', label: 'Arizona' },\n      { value: 'ar', label: 'Arkansas' },\n      { value: 'ca', label: 'California' },\n      { value: 'co', label: 'Colorado' },\n      { value: 'ct', label: 'Connecticut' },\n      { value: 'de', label: 'Delaware' },\n      { value: 'fl', label: 'Florida' },\n      { value: 'ga', label: 'Georgia' },\n      { value: 'hi', label: 'Hawaii' },\n      { value: 'id', label: 'Idaho' },\n      { value: 'il', label: 'Illinois' },\n      { value: 'in', label: 'Indiana' },\n      { value: 'ia', label: 'Iowa' },\n    ],\n    value: 'ca',\n    disabled: false,\n    touched: true,\n    invalid: false,\n    dirty: false,\n  }\n-->"
+        },
+        {
+          title: "Short Options",
+          framework: "angular",
+          code: "<!-- Storybook story: Short Options -->\n<uni-select ${argsToTemplate(props)}>\n</uni-select>\n<!-- args:\n{\n    placeholder: 'Pick a size...',\n    options: [\n      { value: 'xs', label: 'XS' },\n      { value: 's', label: 'S' },\n      { value: 'm', label: 'M' },\n      { value: 'l', label: 'L' },\n      { value: 'xl', label: 'XL' },\n    ],\n    value: 'm',\n    disabled: false,\n    touched: false,\n    invalid: false,\n    dirty: false,\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -3269,6 +4425,226 @@ var uni_index_default = {
       },
       relatedTokens: []
     },
+    {
+      id: "skeleton",
+      name: "Skeleton",
+      status: "stable",
+      summary: "",
+      description: "",
+      category: "components",
+      version: "5.2.0",
+      bindings: {
+        angular: {
+          importPath: "@uni-design-system/uni-angular",
+          selectorOrTag: "uni-skeleton, Skeleton",
+          api: [
+            {
+              name: "shape",
+              kind: "input",
+              type: "SkeletonShape",
+              required: false,
+              default: "'text'",
+              description: ""
+            },
+            {
+              name: "width",
+              kind: "input",
+              type: "string | number | undefined",
+              required: false,
+              default: "undefined",
+              description: "CSS width; defaults to 100% for text/rect and `height` for circles."
+            },
+            {
+              name: "height",
+              kind: "input",
+              type: "string | number | undefined",
+              required: false,
+              default: "undefined",
+              description: "CSS height per block; defaults to 1em (text), 96px (rect), 40px (circle)."
+            },
+            {
+              name: "lines",
+              kind: "input",
+              type: "number",
+              required: false,
+              default: "1",
+              description: "Number of text lines (text shape only)."
+            }
+          ]
+        }
+      },
+      examples: [
+        {
+          title: "Text Lines",
+          framework: "angular",
+          code: `<!-- Storybook story: Text Lines -->
+<uni-card style="max-width: 360px; display: block;">
+<div style="display: flex; gap: 12px; align-items: center; padding: 16px;">
+  <uni-skeleton shape="circle" [height]="40" />
+  <div style="flex: 1;">
+    <uni-skeleton [lines]="2" />
+  </div>
+</div>
+<uni-skeleton shape="rect" [height]="120" style="display: block; padding: 0 16px 16px;" />
+</uni-card>
+<!-- args:
+{ shape: 'text', lines: 3 }
+-->`
+        },
+        {
+          title: "Card Placeholder",
+          framework: "angular",
+          code: '<!-- Storybook story: Card Placeholder -->\n<uni-card style="max-width: 360px; display: block;">\n<div style="display: flex; gap: 12px; align-items: center; padding: 16px;">\n  <uni-skeleton shape="circle" [height]="40" />\n  <div style="flex: 1;">\n    <uni-skeleton [lines]="2" />\n  </div>\n</div>\n<uni-skeleton shape="rect" [height]="120" style="display: block; padding: 0 16px 16px;" />\n</uni-card>'
+        }
+      ],
+      guidelines: {
+        whenToUse: "",
+        dos: [],
+        donts: [],
+        accessibility: []
+      },
+      relatedTokens: [
+        "skeleton.behavior.color",
+        "skeleton.behavior.highlightColor",
+        "skeleton.behavior.borderRadius",
+        "skeleton.behavior.animation",
+        "skeleton.behavior.duration",
+        "skeleton.behavior.gap"
+      ]
+    },
+    {
+      id: "slider",
+      name: "Slider",
+      status: "stable",
+      summary: "",
+      description: "",
+      category: "forms",
+      version: "5.2.0",
+      bindings: {
+        angular: {
+          importPath: "@uni-design-system/uni-angular",
+          selectorOrTag: "uni-slider, Slider",
+          api: [
+            {
+              name: "value",
+              kind: "model",
+              type: "number",
+              required: false,
+              default: "0",
+              description: ""
+            },
+            {
+              name: "disabled",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "touched",
+              kind: "model",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "invalid",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "dirty",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "required",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: "Synced from required() validators by the Signal Forms [field] directive."
+            },
+            {
+              name: "ariaDescribedBy",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: "Id(s) of external element(s) describing this control \u2014 typically your app-rendered value or error text \u2014 exposed as aria-describedby."
+            },
+            {
+              name: "label",
+              kind: "input",
+              type: "string",
+              required: true,
+              description: ""
+            },
+            {
+              name: "min",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "0",
+              description: ""
+            },
+            {
+              name: "max",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "100",
+              description: ""
+            },
+            {
+              name: "step",
+              kind: "input",
+              type: "number",
+              required: false,
+              default: "1",
+              description: ""
+            }
+          ]
+        }
+      },
+      examples: [
+        {
+          title: "Default",
+          framework: "angular",
+          code: "<!-- Storybook story: Default -->\n<uni-slider ${argsToTemplate(props)}></uni-slider>\n<!-- args:\n{ label: 'Volume', value: 40 }\n-->"
+        },
+        {
+          title: "Stepped Range",
+          framework: "angular",
+          code: "<!-- Storybook story: Stepped Range -->\n<uni-slider ${argsToTemplate(props)}></uni-slider>\n<!-- args:\n{ label: 'Opacity', min: 0, max: 1, step: 0.05, value: 0.6 }\n-->"
+        },
+        {
+          title: "Disabled",
+          framework: "angular",
+          code: "<!-- Storybook story: Disabled -->\n<uni-slider ${argsToTemplate(props)}></uni-slider>\n<!-- args:\n{ label: 'Brightness', value: 70, disabled: true }\n-->"
+        }
+      ],
+      guidelines: {
+        whenToUse: "",
+        dos: [],
+        donts: [],
+        accessibility: []
+      },
+      relatedTokens: [
+        "slider.behavior.color",
+        "slider.behavior.trackColor",
+        "slider.behavior.borderRadius",
+        "slider.behavior.trackHeight",
+        "slider.behavior.thumbSize"
+      ]
+    },
     {
       id: "snackbar",
       name: "Snackbar",
@@ -3276,7 +4652,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3342,7 +4718,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<Button (click)=\"snackbar.open()\">Show Snackbar</Button>\n<Snackbar #snackbar ${argsToTemplate(props)}>\n  ${ngContent}\n</Snackbar>\n<!-- args:\n{\n    ngContent: 'The record has been removed.',\n    variant: 'warn',\n    actionLabel: 'undo',\n    timeout: '5000',\n    symbolName: 'delete_sweep',\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -3362,7 +4744,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "data",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3385,7 +4767,27 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: `<!-- Storybook story: Primary -->
+<uni-sort-header [datasource]="datasource" [column]="column">
+  <Text typeface="title-small">Name</Text>
+</uni-sort-header>
+<div style="margin-top: 16px;">
+  @for (record of datasource.records().slice(0, 5); track record.id) {
+    <div>{{ record.name }}</div>
+  }
+</div>
+<!-- args:
+{
+    column: 'name',
+    datasource: new UniRecordDatasource<any>(starWarsCharacters),
+  }
+-->`
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -3401,7 +4803,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3434,7 +4836,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Stacked Cards",
+          framework: "angular",
+          code: "<!-- Storybook story: Stacked Cards -->\n<div stack-layout ${argsToTemplate(props)}>\n  <Card><CardContent><Text>Card 1</Text></CardContent></Card>\n  <Card><CardContent><Text>Card 2</Text></CardContent></Card>\n  <Card><CardContent><Text>Card 3</Text></CardContent></Card>\n  <Card><CardContent><Text>Card 4</Text></CardContent></Card>\n  <Card><CardContent><Text>Card 5</Text></CardContent></Card>\n</div>\n<!-- args:\n{ gap: 'lg' }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -3450,7 +4858,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3494,7 +4902,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<!-- args:\n{\n    name: 'settings',\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -3509,13 +4923,107 @@ var uni_index_default = {
       ]
     },
     {
-      id: "tag",
-      name: "Tag",
+      id: "tab",
+      name: "Tab",
+      status: "stable",
+      summary: "",
+      description: "",
+      category: "components",
+      version: "5.2.0",
+      bindings: {
+        angular: {
+          importPath: "@uni-design-system/uni-angular",
+          selectorOrTag: "uni-tab, Tab",
+          api: [
+            {
+              name: "label",
+              kind: "input",
+              type: "string",
+              required: true,
+              description: ""
+            },
+            {
+              name: "disabled",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            }
+          ]
+        }
+      },
+      examples: [],
+      guidelines: {
+        whenToUse: "",
+        dos: [],
+        donts: [],
+        accessibility: []
+      },
+      relatedTokens: []
+    },
+    {
+      id: "tabs",
+      name: "Tabs",
+      status: "stable",
+      summary: "",
+      description: "",
+      category: "components",
+      version: "5.2.0",
+      bindings: {
+        angular: {
+          importPath: "@uni-design-system/uni-angular",
+          selectorOrTag: "uni-tabs, Tabs",
+          api: [
+            {
+              name: "selectedIndex",
+              kind: "model",
+              type: "number",
+              required: false,
+              default: "0",
+              description: "Index of the selected tab; two-way bindable."
+            }
+          ]
+        }
+      },
+      examples: [
+        {
+          title: "Default",
+          framework: "angular",
+          code: '<!-- Storybook story: Default -->\n<uni-tabs [selectedIndex]="selectedIndex ?? 0">\n<uni-tab label="Overview">\n  <uni-text typeface="body-1-long">\n    Arrow keys move between tabs (disabled tabs are skipped), Home and End jump\n    to the extremes, and only the selected panel is rendered.\n  </uni-text>\n</uni-tab>\n<uni-tab label="Activity">\n  <uni-text typeface="body-1-long">Recent activity would render here.</uni-text>\n</uni-tab>\n<uni-tab label="Settings">\n  <uni-text typeface="body-1-long">Settings content, instantiated on selection.</uni-text>\n</uni-tab>\n</uni-tabs>'
+        },
+        {
+          title: "With Disabled Tab",
+          framework: "angular",
+          code: '<!-- Storybook story: With Disabled Tab -->\n<uni-tabs [selectedIndex]="selectedIndex ?? 0">\n<uni-tab label="Overview">\n  <uni-text typeface="body-1-long">\n    Arrow keys move between tabs (disabled tabs are skipped), Home and End jump\n    to the extremes, and only the selected panel is rendered.\n  </uni-text>\n</uni-tab>\n<uni-tab label="Activity">\n  <uni-text typeface="body-1-long">Recent activity would render here.</uni-text>\n</uni-tab>\n<uni-tab label="Settings">\n  <uni-text typeface="body-1-long">Settings content, instantiated on selection.</uni-text>\n</uni-tab>\n</uni-tabs>'
+        }
+      ],
+      guidelines: {
+        whenToUse: "",
+        dos: [],
+        donts: [],
+        accessibility: []
+      },
+      relatedTokens: [
+        "tabs.behavior.typeface",
+        "tabs.behavior.textColor",
+        "tabs.behavior.activeTextColor",
+        "tabs.behavior.indicatorColor",
+        "tabs.behavior.indicatorThickness",
+        "tabs.behavior.divider",
+        "tabs.behavior.gap",
+        "tabs.behavior.borderRadius",
+        "tabs.behavior.padding"
+      ]
+    },
+    {
+      id: "tag",
+      name: "Tag",
       status: "stable",
       summary: "",
       description: "",
       category: "data",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3545,7 +5053,28 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<!-- args:\n{\n    label: 'Primary Tag',\n    value: '1',\n  }\n-->"
+        },
+        {
+          title: "Numeric Value",
+          framework: "angular",
+          code: "<!-- Storybook story: Numeric Value -->\n<!-- args:\n{\n    label: 'Numeric Tag',\n    value: 42,\n  }\n-->"
+        },
+        {
+          title: "Long Label",
+          framework: "angular",
+          code: "<!-- Storybook story: Long Label -->\n<!-- args:\n{\n    label: 'This is a very long tag label that might need truncation',\n    value: 'long',\n  }\n-->"
+        },
+        {
+          title: "Without Value",
+          framework: "angular",
+          code: "<!-- Storybook story: Without Value -->\n<!-- args:\n{\n    label: 'Tag without value',\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -3561,7 +5090,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3630,6 +5159,133 @@ var uni_index_default = {
       },
       relatedTokens: []
     },
+    {
+      id: "textarea",
+      name: "Textarea",
+      status: "stable",
+      summary: "",
+      description: "",
+      category: "primitives",
+      version: "5.2.0",
+      bindings: {
+        angular: {
+          importPath: "@uni-design-system/uni-angular",
+          selectorOrTag: "uni-textarea",
+          api: [
+            {
+              name: "value",
+              kind: "model",
+              type: "string",
+              required: false,
+              default: "''",
+              description: ""
+            },
+            {
+              name: "disabled",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "touched",
+              kind: "model",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "invalid",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "dirty",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "required",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: "Synced from required() validators by the Signal Forms [field] directive."
+            },
+            {
+              name: "ariaDescribedBy",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: "Id(s) of external element(s) describing this control \u2014 typically your app-rendered error message \u2014 exposed as aria-describedby."
+            },
+            {
+              name: "label",
+              kind: "input",
+              type: "string",
+              required: true,
+              description: ""
+            },
+            {
+              name: "placeholder",
+              kind: "input",
+              type: "string",
+              required: false,
+              default: "''",
+              description: ""
+            },
+            {
+              name: "rows",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "undefined",
+              description: "Visible text rows. Defaults to the theme's `textarea` options."
+            }
+          ]
+        }
+      },
+      examples: [
+        {
+          title: "Default",
+          framework: "angular",
+          code: "<!-- Storybook story: Default -->\n<uni-textarea ${argsToTemplate(props)}>\n</uni-textarea>\n<!-- args:\n{ label: 'Message', placeholder: 'Tell us everything\u2026' }\n-->"
+        },
+        {
+          title: "Prefilled",
+          framework: "angular",
+          code: "<!-- Storybook story: Prefilled -->\n<uni-textarea ${argsToTemplate(props)}>\n</uni-textarea>\n<!-- args:\n{\n    label: 'Bio',\n    value: 'Design systems engineer.\\nOKLCH enthusiast.',\n    rows: 5,\n  }\n-->"
+        },
+        {
+          title: "Invalid",
+          framework: "angular",
+          code: "<!-- Storybook story: Invalid -->\n<uni-textarea ${argsToTemplate(props)}>\n</uni-textarea>\n<!-- args:\n{\n    label: 'Feedback',\n    placeholder: 'Required',\n    invalid: true,\n    touched: true,\n  }\n-->"
+        },
+        {
+          title: "Disabled",
+          framework: "angular",
+          code: "<!-- Storybook story: Disabled -->\n<uni-textarea ${argsToTemplate(props)}>\n</uni-textarea>\n<!-- args:\n{ label: 'Notes', value: 'Read-only content', disabled: true }\n-->"
+        }
+      ],
+      guidelines: {
+        whenToUse: "",
+        dos: [],
+        donts: [],
+        accessibility: []
+      },
+      relatedTokens: [
+        "textarea.behavior.rows",
+        "textarea.behavior.resize"
+      ]
+    },
     {
       id: "theme-builder",
       name: "ThemeBuilder",
@@ -3637,7 +5293,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3645,7 +5301,13 @@ var uni_index_default = {
           api: []
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Builder",
+          framework: "angular",
+          code: "<!-- Storybook story: Builder -->\n<uni-theme-builder />"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -3661,7 +5323,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3732,7 +5394,38 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Default",
+          framework: "angular",
+          code: "<!-- Storybook story: Default -->\n<uni-toggle ${argsToTemplate(args)}></uni-toggle>\n<!-- args:\n{\n    label: 'Enable notifications',\n    variant: 'primary',\n    disabled: false,\n    checked: true,\n  }\n-->"
+        },
+        {
+          title: "Without Label",
+          framework: "angular",
+          code: "<!-- Storybook story: Without Label -->\n<uni-toggle ${argsToTemplate(args)}></uni-toggle>\n<!-- args:\n{\n    label: '',\n    variant: 'primary',\n    disabled: false,\n  }\n-->"
+        },
+        {
+          title: "Disabled",
+          framework: "angular",
+          code: "<!-- Storybook story: Disabled -->\n<uni-toggle ${argsToTemplate(args)}></uni-toggle>\n<!-- args:\n{\n    label: 'Disabled toggle',\n    variant: 'primary',\n    disabled: true,\n  }\n-->"
+        },
+        {
+          title: "Variants",
+          framework: "angular",
+          code: "<!-- Storybook story: Variants -->\n<uni-toggle ${argsToTemplate(args)}></uni-toggle>"
+        },
+        {
+          title: "With Change Event",
+          framework: "angular",
+          code: "<!-- Storybook story: With Change Event -->\n<uni-toggle ${argsToTemplate(args)}></uni-toggle>"
+        },
+        {
+          title: "Form Signals",
+          framework: "angular",
+          code: "<!-- Storybook story: Form Signals -->\n<uni-toggle ${argsToTemplate(args)}></uni-toggle>"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -3750,7 +5443,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3798,7 +5491,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->\n<Text>Here is some text with a <Tooltip ${argsToTemplate(props)}>tooltip</Tooltip> in the middle.\n</Text>\n<!-- args:\n{\n    label: 'Bottom-start tooltip',\n    placement: 'bottom-start',\n    inlineText: true,\n  }\n-->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -3819,7 +5518,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.1.0",
+      version: "5.2.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3844,7 +5543,13 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Primary",
+          framework: "angular",
+          code: "<!-- Storybook story: Primary -->"
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -5344,6 +7049,282 @@ var uni_index_default = {
         DarkTheme: "md"
       }
     },
+    {
+      id: "breadcrumb.behavior.typeface",
+      value: "label",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "breadcrumb",
+      themeValues: {
+        LightTheme: "label",
+        DarkTheme: "label"
+      }
+    },
+    {
+      id: "breadcrumb.behavior.color",
+      value: "on-background-variant",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "breadcrumb",
+      themeValues: {
+        LightTheme: "on-background-variant",
+        DarkTheme: "on-background-variant"
+      }
+    },
+    {
+      id: "breadcrumb.behavior.currentColor",
+      value: "on-background",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "breadcrumb",
+      themeValues: {
+        LightTheme: "on-background",
+        DarkTheme: "on-background"
+      }
+    },
+    {
+      id: "breadcrumb.behavior.separatorSymbol",
+      value: "chevron_right",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "breadcrumb",
+      themeValues: {
+        LightTheme: "chevron_right",
+        DarkTheme: "chevron_right"
+      }
+    },
+    {
+      id: "breadcrumb.behavior.gap",
+      value: "xs",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "breadcrumb",
+      themeValues: {
+        LightTheme: "xs",
+        DarkTheme: "xs"
+      }
+    },
+    {
+      id: "appBar.behavior.color",
+      value: "surface",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "appBar",
+      themeValues: {
+        LightTheme: "surface",
+        DarkTheme: "surface"
+      }
+    },
+    {
+      id: "appBar.behavior.height",
+      value: 56,
+      type: "number",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "appBar",
+      themeValues: {
+        LightTheme: 56,
+        DarkTheme: 56
+      }
+    },
+    {
+      id: "appBar.behavior.divider",
+      value: "light",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "appBar",
+      themeValues: {
+        LightTheme: "light",
+        DarkTheme: "light"
+      }
+    },
+    {
+      id: "appBar.behavior.typeface",
+      value: "title-large",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "appBar",
+      themeValues: {
+        LightTheme: "title-large",
+        DarkTheme: "title-large"
+      }
+    },
+    {
+      id: "appBar.behavior.padding",
+      value: "md",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "appBar",
+      themeValues: {
+        LightTheme: "md",
+        DarkTheme: "md"
+      }
+    },
+    {
+      id: "appBar.behavior.gap",
+      value: "md",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "appBar",
+      themeValues: {
+        LightTheme: "md",
+        DarkTheme: "md"
+      }
+    },
+    {
+      id: "drawer.behavior.color",
+      value: "surface",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "drawer",
+      themeValues: {
+        LightTheme: "surface",
+        DarkTheme: "surface"
+      }
+    },
+    {
+      id: "drawer.behavior.width",
+      value: 280,
+      type: "number",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "drawer",
+      themeValues: {
+        LightTheme: 280,
+        DarkTheme: 280
+      }
+    },
+    {
+      id: "drawer.behavior.divider",
+      value: "light",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "drawer",
+      themeValues: {
+        LightTheme: "light",
+        DarkTheme: "light"
+      }
+    },
+    {
+      id: "drawer.behavior.elevation",
+      value: "menu",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "drawer",
+      themeValues: {
+        LightTheme: "menu",
+        DarkTheme: "menu"
+      }
+    },
+    {
+      id: "drawer.behavior.padding",
+      value: "md",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "drawer",
+      themeValues: {
+        LightTheme: "md",
+        DarkTheme: "md"
+      }
+    },
+    {
+      id: "drawer.behavior.backdrop",
+      value: '{"background":"rgba(0, 0, 0, 0.4)"}',
+      type: "object",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "drawer",
+      themeValues: {
+        LightTheme: '{"background":"rgba(0, 0, 0, 0.4)"}',
+        DarkTheme: '{"background":"rgba(0, 0, 0, 0.4)"}'
+      }
+    },
+    {
+      id: "avatar.behavior.borderRadius",
+      value: "max",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "avatar",
+      themeValues: {
+        LightTheme: "max",
+        DarkTheme: "max"
+      }
+    },
+    {
+      id: "avatar.behavior.typeface",
+      value: "subtitle-2",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "avatar",
+      themeValues: {
+        LightTheme: "subtitle-2",
+        DarkTheme: "subtitle-2"
+      }
+    },
+    {
+      id: "avatar.behavior.fallbackSymbol",
+      value: "person",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "avatar",
+      themeValues: {
+        LightTheme: "person",
+        DarkTheme: "person"
+      }
+    },
+    {
+      id: "avatarGroup.behavior.overlap",
+      value: "sm",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "avatarGroup",
+      themeValues: {
+        LightTheme: "sm",
+        DarkTheme: "sm"
+      }
+    },
+    {
+      id: "avatarGroup.behavior.ringColor",
+      value: "surface",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "avatarGroup",
+      themeValues: {
+        LightTheme: "surface",
+        DarkTheme: "surface"
+      }
+    },
+    {
+      id: "avatarGroup.behavior.ringWidth",
+      value: 2,
+      type: "number",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "avatarGroup",
+      themeValues: {
+        LightTheme: 2,
+        DarkTheme: 2
+      }
+    },
     {
       id: "checkbox.behavior.size",
       value: 20,
@@ -5698,70 +7679,202 @@ var uni_index_default = {
       type: "string",
       kind: "behavioral",
       target: "component-prop",
-      appliesTo: "input",
+      appliesTo: "input",
+      themeValues: {
+        LightTheme: "warn",
+        DarkTheme: "warn"
+      }
+    },
+    {
+      id: "input.behavior.errorBorder",
+      value: "warn",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "input",
+      themeValues: {
+        LightTheme: "warn",
+        DarkTheme: "warn"
+      }
+    },
+    {
+      id: "input.behavior.height",
+      value: 32,
+      type: "number",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "input",
+      themeValues: {
+        LightTheme: 32,
+        DarkTheme: 32
+      }
+    },
+    {
+      id: "input.behavior.paddingLeft",
+      value: "sm",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "input",
+      themeValues: {
+        LightTheme: "sm",
+        DarkTheme: "sm"
+      }
+    },
+    {
+      id: "input.behavior.focusOutline",
+      value: "2px solid #6A6F8F",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "input",
+      themeValues: {
+        LightTheme: "2px solid #6A6F8F",
+        DarkTheme: "2px solid #AFB5D8"
+      }
+    },
+    {
+      id: "input.behavior.focusOutlineOffset",
+      value: 2,
+      type: "number",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "input",
+      themeValues: {
+        LightTheme: 2,
+        DarkTheme: 2
+      }
+    },
+    {
+      id: "textarea.behavior.rows",
+      value: 3,
+      type: "number",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "textarea",
+      themeValues: {
+        LightTheme: 3,
+        DarkTheme: 3
+      }
+    },
+    {
+      id: "textarea.behavior.resize",
+      value: "vertical",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "textarea",
+      themeValues: {
+        LightTheme: "vertical",
+        DarkTheme: "vertical"
+      }
+    },
+    {
+      id: "tabs.behavior.typeface",
+      value: "title-small",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "tabs",
+      themeValues: {
+        LightTheme: "title-small",
+        DarkTheme: "title-small"
+      }
+    },
+    {
+      id: "tabs.behavior.textColor",
+      value: "on-surface-variant",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "tabs",
+      themeValues: {
+        LightTheme: "on-surface-variant",
+        DarkTheme: "on-surface-variant"
+      }
+    },
+    {
+      id: "tabs.behavior.activeTextColor",
+      value: "primary",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "tabs",
+      themeValues: {
+        LightTheme: "primary",
+        DarkTheme: "primary"
+      }
+    },
+    {
+      id: "tabs.behavior.indicatorColor",
+      value: "primary",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "tabs",
       themeValues: {
-        LightTheme: "warn",
-        DarkTheme: "warn"
+        LightTheme: "primary",
+        DarkTheme: "primary"
       }
     },
     {
-      id: "input.behavior.errorBorder",
-      value: "warn",
+      id: "tabs.behavior.indicatorThickness",
+      value: "standard",
       type: "string",
       kind: "behavioral",
       target: "component-prop",
-      appliesTo: "input",
+      appliesTo: "tabs",
       themeValues: {
-        LightTheme: "warn",
-        DarkTheme: "warn"
+        LightTheme: "standard",
+        DarkTheme: "standard"
       }
     },
     {
-      id: "input.behavior.height",
-      value: 32,
-      type: "number",
+      id: "tabs.behavior.divider",
+      value: "light",
+      type: "string",
       kind: "behavioral",
       target: "component-prop",
-      appliesTo: "input",
+      appliesTo: "tabs",
       themeValues: {
-        LightTheme: 32,
-        DarkTheme: 32
+        LightTheme: "light",
+        DarkTheme: "light"
       }
     },
     {
-      id: "input.behavior.paddingLeft",
+      id: "tabs.behavior.gap",
       value: "sm",
       type: "string",
       kind: "behavioral",
       target: "component-prop",
-      appliesTo: "input",
+      appliesTo: "tabs",
       themeValues: {
         LightTheme: "sm",
         DarkTheme: "sm"
       }
     },
     {
-      id: "input.behavior.focusOutline",
-      value: "2px solid #6A6F8F",
+      id: "tabs.behavior.borderRadius",
+      value: "none",
       type: "string",
       kind: "behavioral",
       target: "component-prop",
-      appliesTo: "input",
+      appliesTo: "tabs",
       themeValues: {
-        LightTheme: "2px solid #6A6F8F",
-        DarkTheme: "2px solid #AFB5D8"
+        LightTheme: "none",
+        DarkTheme: "none"
       }
     },
     {
-      id: "input.behavior.focusOutlineOffset",
-      value: 2,
-      type: "number",
+      id: "tabs.behavior.padding",
+      value: "md",
+      type: "string",
       kind: "behavioral",
       target: "component-prop",
-      appliesTo: "input",
+      appliesTo: "tabs",
       themeValues: {
-        LightTheme: 2,
-        DarkTheme: 2
+        LightTheme: "md",
+        DarkTheme: "md"
       }
     },
     {
@@ -5860,6 +7973,54 @@ var uni_index_default = {
         DarkTheme: "xxs"
       }
     },
+    {
+      id: "button.behavior.borderRadius",
+      value: "max",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "button",
+      themeValues: {
+        LightTheme: "max",
+        DarkTheme: "max"
+      }
+    },
+    {
+      id: "button.behavior.typeface",
+      value: "button",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "button",
+      themeValues: {
+        LightTheme: "button",
+        DarkTheme: "button"
+      }
+    },
+    {
+      id: "iconButton.behavior.borderRadius",
+      value: "max",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "iconButton",
+      themeValues: {
+        LightTheme: "max",
+        DarkTheme: "max"
+      }
+    },
+    {
+      id: "card.behavior.borderRadius",
+      value: "xs",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "card",
+      themeValues: {
+        LightTheme: "xs",
+        DarkTheme: "xs"
+      }
+    },
     {
       id: "dataSearch.behavior.border",
       value: "light",
@@ -6256,6 +8417,138 @@ var uni_index_default = {
         DarkTheme: "xs"
       }
     },
+    {
+      id: "slider.behavior.color",
+      value: "primary",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "slider",
+      themeValues: {
+        LightTheme: "primary",
+        DarkTheme: "primary"
+      }
+    },
+    {
+      id: "slider.behavior.trackColor",
+      value: "surface-variant",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "slider",
+      themeValues: {
+        LightTheme: "surface-variant",
+        DarkTheme: "surface-variant"
+      }
+    },
+    {
+      id: "slider.behavior.borderRadius",
+      value: "max",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "slider",
+      themeValues: {
+        LightTheme: "max",
+        DarkTheme: "max"
+      }
+    },
+    {
+      id: "slider.behavior.trackHeight",
+      value: 4,
+      type: "number",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "slider",
+      themeValues: {
+        LightTheme: 4,
+        DarkTheme: 4
+      }
+    },
+    {
+      id: "slider.behavior.thumbSize",
+      value: 16,
+      type: "number",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "slider",
+      themeValues: {
+        LightTheme: 16,
+        DarkTheme: 16
+      }
+    },
+    {
+      id: "skeleton.behavior.color",
+      value: "surface-variant",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "skeleton",
+      themeValues: {
+        LightTheme: "surface-variant",
+        DarkTheme: "surface-variant"
+      }
+    },
+    {
+      id: "skeleton.behavior.highlightColor",
+      value: "surface",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "skeleton",
+      themeValues: {
+        LightTheme: "surface",
+        DarkTheme: "surface"
+      }
+    },
+    {
+      id: "skeleton.behavior.borderRadius",
+      value: "xs",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "skeleton",
+      themeValues: {
+        LightTheme: "xs",
+        DarkTheme: "xs"
+      }
+    },
+    {
+      id: "skeleton.behavior.animation",
+      value: "shimmer",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "skeleton",
+      themeValues: {
+        LightTheme: "shimmer",
+        DarkTheme: "shimmer"
+      }
+    },
+    {
+      id: "skeleton.behavior.duration",
+      value: 1.4,
+      type: "number",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "skeleton",
+      themeValues: {
+        LightTheme: 1.4,
+        DarkTheme: 1.4
+      }
+    },
+    {
+      id: "skeleton.behavior.gap",
+      value: "sm",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "skeleton",
+      themeValues: {
+        LightTheme: "sm",
+        DarkTheme: "sm"
+      }
+    },
     {
       id: "snackbar.behavior.bottomPosition",
       value: 40,
@@ -6546,6 +8839,39 @@ var uni_index_default = {
           transitionSpeed: 0.35,
           elevation: "md"
         },
+        breadcrumb: {
+          typeface: "label",
+          color: "on-background-variant",
+          currentColor: "on-background",
+          separatorSymbol: "chevron_right",
+          gap: "xs"
+        },
+        appBar: {
+          color: "surface",
+          height: 56,
+          divider: "light",
+          typeface: "title-large",
+          padding: "md",
+          gap: "md"
+        },
+        drawer: {
+          color: "surface",
+          width: 280,
+          divider: "light",
+          elevation: "menu",
+          padding: "md",
+          backdrop: '{"background":"rgba(0, 0, 0, 0.4)"}'
+        },
+        avatar: {
+          borderRadius: "max",
+          typeface: "subtitle-2",
+          fallbackSymbol: "person"
+        },
+        avatarGroup: {
+          overlap: "sm",
+          ringColor: "surface",
+          ringWidth: 2
+        },
         checkbox: {
           size: 20
         },
@@ -6593,6 +8919,21 @@ var uni_index_default = {
           focusOutline: "2px solid #6A6F8F",
           focusOutlineOffset: 2
         },
+        textarea: {
+          rows: 3,
+          resize: "vertical"
+        },
+        tabs: {
+          typeface: "title-small",
+          textColor: "on-surface-variant",
+          activeTextColor: "primary",
+          indicatorColor: "primary",
+          indicatorThickness: "standard",
+          divider: "light",
+          gap: "sm",
+          borderRadius: "none",
+          padding: "md"
+        },
         multiSelectDropdown: {
           textRole: "input",
           textColor: "on-primary-surface",
@@ -6605,6 +8946,16 @@ var uni_index_default = {
         badge: {
           borderRadius: "xxs"
         },
+        button: {
+          borderRadius: "max",
+          typeface: "button"
+        },
+        iconButton: {
+          borderRadius: "max"
+        },
+        card: {
+          borderRadius: "xs"
+        },
         dataSearch: {
           border: "light",
           borderRadius: "xs",
@@ -6646,6 +8997,21 @@ var uni_index_default = {
           currentPageBorder: "light",
           currentPageBorderRadius: "xs"
         },
+        slider: {
+          color: "primary",
+          trackColor: "surface-variant",
+          borderRadius: "max",
+          trackHeight: 4,
+          thumbSize: 16
+        },
+        skeleton: {
+          color: "surface-variant",
+          highlightColor: "surface",
+          borderRadius: "xs",
+          animation: "shimmer",
+          duration: 1.4,
+          gap: "sm"
+        },
         snackbar: {
           bottomPosition: 40,
           transitionDelay: "0.35s",
@@ -6813,6 +9179,39 @@ var uni_index_default = {
           transitionSpeed: 0.35,
           elevation: "md"
         },
+        breadcrumb: {
+          typeface: "label",
+          color: "on-background-variant",
+          currentColor: "on-background",
+          separatorSymbol: "chevron_right",
+          gap: "xs"
+        },
+        appBar: {
+          color: "surface",
+          height: 56,
+          divider: "light",
+          typeface: "title-large",
+          padding: "md",
+          gap: "md"
+        },
+        drawer: {
+          color: "surface",
+          width: 280,
+          divider: "light",
+          elevation: "menu",
+          padding: "md",
+          backdrop: '{"background":"rgba(0, 0, 0, 0.4)"}'
+        },
+        avatar: {
+          borderRadius: "max",
+          typeface: "subtitle-2",
+          fallbackSymbol: "person"
+        },
+        avatarGroup: {
+          overlap: "sm",
+          ringColor: "surface",
+          ringWidth: 2
+        },
         checkbox: {
           size: 20
         },
@@ -6860,6 +9259,21 @@ var uni_index_default = {
           focusOutline: "2px solid #AFB5D8",
           focusOutlineOffset: 2
         },
+        textarea: {
+          rows: 3,
+          resize: "vertical"
+        },
+        tabs: {
+          typeface: "title-small",
+          textColor: "on-surface-variant",
+          activeTextColor: "primary",
+          indicatorColor: "primary",
+          indicatorThickness: "standard",
+          divider: "light",
+          gap: "sm",
+          borderRadius: "none",
+          padding: "md"
+        },
         multiSelectDropdown: {
           textRole: "input",
           textColor: "on-primary-surface",
@@ -6872,6 +9286,16 @@ var uni_index_default = {
         badge: {
           borderRadius: "xxs"
         },
+        button: {
+          borderRadius: "max",
+          typeface: "button"
+        },
+        iconButton: {
+          borderRadius: "max"
+        },
+        card: {
+          borderRadius: "xs"
+        },
         dataSearch: {
           border: "light",
           borderRadius: "xs",
@@ -6913,6 +9337,21 @@ var uni_index_default = {
           currentPageBorder: "light",
           currentPageBorderRadius: "xs"
         },
+        slider: {
+          color: "primary",
+          trackColor: "surface-variant",
+          borderRadius: "max",
+          trackHeight: 4,
+          thumbSize: 16
+        },
+        skeleton: {
+          color: "surface-variant",
+          highlightColor: "surface",
+          borderRadius: "xs",
+          animation: "shimmer",
+          duration: 1.4,
+          gap: "sm"
+        },
         snackbar: {
           bottomPosition: 40,
           transitionDelay: "0.35s",
@@ -7858,6 +10297,90 @@ var buildComponents = (c) => ({
     transitionSpeed: 0.35,
     elevation: "md"
   } },
+  breadcrumb: { options: {
+    typeface: "label",
+    color: "on-background-variant",
+    currentColor: "on-background",
+    separatorSymbol: "chevron_right",
+    gap: "xs"
+  } },
+  appBar: { options: {
+    color: "surface",
+    height: 56,
+    divider: "light",
+    typeface: "title-large",
+    padding: "md",
+    gap: "md",
+    elevation: void 0
+  } },
+  drawer: { options: {
+    color: "surface",
+    width: 280,
+    divider: "light",
+    elevation: "menu",
+    padding: "md",
+    backdrop: { background: "rgba(0, 0, 0, 0.4)" }
+  } },
+  avatar: {
+    options: {
+      borderRadius: "max",
+      typeface: "subtitle-2",
+      fallbackSymbol: "person"
+    },
+    variants: {
+      primary: {
+        backgroundColor: c["primary-container"],
+        color: c["on-primary-container"]
+      },
+      secondary: {
+        backgroundColor: c["secondary-container"],
+        color: c["on-secondary-container"]
+      },
+      tertiary: {
+        backgroundColor: c["tertiary-container"],
+        color: c["on-tertiary-container"]
+      },
+      quaternary: {
+        backgroundColor: c["surface-variant"],
+        color: c["on-surface-variant"]
+      },
+      warn: {
+        backgroundColor: c["warn-container"],
+        color: c["on-warn-container"]
+      },
+      success: {
+        backgroundColor: c["success-container"],
+        color: c["on-success-container"]
+      }
+    },
+    sizes: {
+      sm: {
+        height: 24,
+        width: 24,
+        fontSize: 10
+      },
+      md: {
+        height: 32,
+        width: 32,
+        fontSize: 13
+      },
+      lg: {
+        height: 40,
+        width: 40,
+        fontSize: 16
+      },
+      xl: {
+        height: 56,
+        width: 56,
+        fontSize: 22
+      }
+    }
+  },
+  avatarGroup: { options: {
+    overlap: "sm",
+    ringColor: "surface",
+    ringWidth: 2
+  } },
   checkbox: { options: { size: 20 } },
   dialog: { options: {
     borderRadius: "lg",
@@ -7906,6 +10429,22 @@ var buildComponents = (c) => ({
     focusOutline: `2px solid ${c.primary}`,
     focusOutlineOffset: 2
   } },
+  textarea: { options: {
+    rows: 3,
+    resize: "vertical"
+  } },
+  tabs: { options: {
+    typeface: "title-small",
+    textColor: "on-surface-variant",
+    activeTextColor: "primary",
+    indicatorColor: "primary",
+    indicatorThickness: "standard",
+    divider: "light",
+    gap: "sm",
+    borderRadius: "none",
+    padding: "md",
+    activeColor: void 0
+  } },
   multiSelectDropdown: { options: {
     textRole: "input",
     textColor: "on-primary-surface",
@@ -7917,13 +10456,16 @@ var buildComponents = (c) => ({
   } },
   badge: { options: { borderRadius: "xxs" } },
   button: {
+    options: {
+      borderRadius: "max",
+      typeface: "button"
+    },
     fixed: {
       position: "relative",
       overflow: "hidden",
       outline: "0",
       border: "0",
       cursor: "pointer",
-      fontFamily: "Euphemia, sans-serif",
       transition: "all 0.28s ease"
     },
     variants: {
@@ -7974,33 +10516,29 @@ var buildComponents = (c) => ({
     sizes: {
       sm: {
         height: 22,
-        borderRadius: 11,
         fontSize: 12,
         padding: "0 12px",
-        fontFamily: "Euphemia Bold, sans-serif",
         fontWeight: 600
       },
       md: {
         height: 26,
-        borderRadius: 13,
         fontSize: 16,
         padding: "0 16px"
       },
       lg: {
         height: 36,
-        borderRadius: 18,
         fontSize: 18,
         padding: "0 18px"
       },
       xl: {
         height: 48,
-        borderRadius: 24,
         fontSize: 24,
         padding: "0 22px"
       }
     }
   },
   iconButton: {
+    options: { borderRadius: "max" },
     variants: {
       ghost: {
         backgroundColor: "transparent",
@@ -8066,23 +10604,23 @@ var buildComponents = (c) => ({
     fixed: { textFill: c["on-background"] },
     variants: {
       primary: {
-        backgroundColor: "#b3d4ea",
+        backgroundColor: c["primary-container"],
         color: c.primary
       },
       secondary: {
-        backgroundColor: "#b3e7c2",
+        backgroundColor: c["secondary-container"],
         color: c.secondary
       },
       tertiary: {
-        backgroundColor: "#ffe2b3",
+        backgroundColor: c["tertiary-container"],
         color: c.tertiary
       },
       warn: {
-        backgroundColor: "#ffc2b3",
+        backgroundColor: c["warn-container"],
         color: c.warn
       },
       success: {
-        backgroundColor: "#b3e7c2",
+        backgroundColor: c["success-container"],
         color: c.success
       }
     },
@@ -8094,33 +10632,10 @@ var buildComponents = (c) => ({
     }
   },
   card: {
+    options: { borderRadius: "xs" },
     fixed: {
-      borderStyle: "solid",
-      borderWidth: "1px",
-      borderRadius: "8px",
-      overflow: "hidden"
-    },
-    variants: {
-      primary: {
-        borderColor: c.primary,
-        backgroundColor: c.background
-      },
-      secondary: {
-        borderColor: c.secondary,
-        backgroundColor: c.background
-      },
-      tertiary: {
-        borderColor: c.tertiary,
-        backgroundColor: c.background
-      },
-      warn: {
-        borderColor: c.warn,
-        backgroundColor: c.background
-      },
-      success: {
-        borderColor: c.success,
-        backgroundColor: c.background
-      }
+      overflow: "hidden",
+      backgroundColor: c.background
     }
   },
   cardHeader: {
@@ -8191,6 +10706,21 @@ var buildComponents = (c) => ({
     currentPageBorder: "light",
     currentPageBorderRadius: "xs"
   } },
+  slider: { options: {
+    color: "primary",
+    trackColor: "surface-variant",
+    borderRadius: "max",
+    trackHeight: 4,
+    thumbSize: 16
+  } },
+  skeleton: { options: {
+    color: "surface-variant",
+    highlightColor: "surface",
+    borderRadius: "xs",
+    animation: "shimmer",
+    duration: 1.4,
+    gap: "sm"
+  } },
   snackbar: { options: {
     bottomPosition: 40,
     transitionDelay: "0.35s",
@@ -8818,4 +11348,4 @@ export {
   meta,
   createUniServer
 };
-//# sourceMappingURL=chunk-2CKFXSMH.js.map
+//# sourceMappingURL=chunk-E34OHB3Z.js.map