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

package/dist/{chunk-UQRS5BYW.js → chunk-E34OHB3Z.js}

@@ -7,16 +7,16 @@ import { z } from "zod";
 // src/data/uni-index.json
 var uni_index_default = {
   meta: {
-    version: "5.0.0",
-    builtAt: "2026-07-23T19:54:03.647Z",
+    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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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.0.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: [],
@@ -4946,46 +6651,46 @@ var uni_index_default = {
     },
     {
       id: "shadow.raised",
-      value: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
+      value: "rgba(23, 25, 43, 0.2) 0px 2px 1px -1px, rgba(23, 25, 43, 0.14) 0px 1px 1px 0px, rgba(23, 25, 43, 0.12) 0px 1px 3px 0px",
       type: "shadow",
       kind: "style",
       target: "emotion-css",
       themeValues: {
-        LightTheme: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
-        DarkTheme: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px"
+        LightTheme: "rgba(23, 25, 43, 0.2) 0px 2px 1px -1px, rgba(23, 25, 43, 0.14) 0px 1px 1px 0px, rgba(23, 25, 43, 0.12) 0px 1px 3px 0px",
+        DarkTheme: "none"
       }
     },
     {
       id: "shadow.menu",
-      value: "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;",
+      value: "rgba(23, 25, 43, 0.2) 0px 3px 3px -2px, rgba(23, 25, 43, 0.14) 0px 3px 4px 0px, rgba(23, 25, 43, 0.12) 0px 1px 8px 0px",
       type: "shadow",
       kind: "style",
       target: "emotion-css",
       themeValues: {
-        LightTheme: "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;",
-        DarkTheme: "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"
+        LightTheme: "rgba(23, 25, 43, 0.2) 0px 3px 3px -2px, rgba(23, 25, 43, 0.14) 0px 3px 4px 0px, rgba(23, 25, 43, 0.12) 0px 1px 8px 0px",
+        DarkTheme: "0px 4px 12px rgba(0, 0, 0, 0.45)"
       }
     },
     {
       id: "shadow.dialog",
-      value: "rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px",
+      value: "rgba(23, 25, 43, 0.2) 0px 3px 5px -1px, rgba(23, 25, 43, 0.14) 0px 6px 10px 0px, rgba(23, 25, 43, 0.12) 0px 1px 18px 0px",
       type: "shadow",
       kind: "style",
       target: "emotion-css",
       themeValues: {
-        LightTheme: "rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px",
-        DarkTheme: "rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px"
+        LightTheme: "rgba(23, 25, 43, 0.2) 0px 3px 5px -1px, rgba(23, 25, 43, 0.14) 0px 6px 10px 0px, rgba(23, 25, 43, 0.12) 0px 1px 18px 0px",
+        DarkTheme: "0px 8px 28px rgba(0, 0, 0, 0.55)"
       }
     },
     {
       id: "shadow.warn",
-      value: "0 0 5px rgba(255, 0, 0, 0.5), inset 0 0 5px rgba(255, 0, 0, 0.3)",
+      value: "0 0 5px rgba(204, 40, 39, 0.5), inset 0 0 5px rgba(204, 40, 39, 0.3)",
       type: "shadow",
       kind: "style",
       target: "emotion-css",
       themeValues: {
-        LightTheme: "0 0 5px rgba(255, 0, 0, 0.5), inset 0 0 5px rgba(255, 0, 0, 0.3)",
-        DarkTheme: "0 0 5px rgba(255, 0, 0, 0.5), inset 0 0 5px rgba(255, 0, 0, 0.3)"
+        LightTheme: "0 0 5px rgba(204, 40, 39, 0.5), inset 0 0 5px rgba(204, 40, 39, 0.3)",
+        DarkTheme: "0 0 5px rgba(255, 150, 138, 0.55), inset 0 0 5px rgba(255, 150, 138, 0.35)"
       }
     },
     {
@@ -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,
@@ -5717,51 +7698,183 @@ var uni_index_default = {
       }
     },
     {
-      id: "input.behavior.height",
-      value: 32,
-      type: "number",
+      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: "primary",
+        DarkTheme: "primary"
+      }
+    },
+    {
+      id: "tabs.behavior.indicatorThickness",
+      value: "standard",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "tabs",
+      themeValues: {
+        LightTheme: "standard",
+        DarkTheme: "standard"
+      }
+    },
+    {
+      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,
@@ -6506,10 +8799,10 @@ var uni_index_default = {
         "border.light": "1px solid #7E8088",
         "border.dark": "1px solid #202127",
         "border.dotted": "1px dotted #202127",
-        "shadow.raised": "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
-        "shadow.menu": "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;",
-        "shadow.dialog": "rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px",
-        "shadow.warn": "0 0 5px rgba(255, 0, 0, 0.5), inset 0 0 5px rgba(255, 0, 0, 0.3)",
+        "shadow.raised": "rgba(23, 25, 43, 0.2) 0px 2px 1px -1px, rgba(23, 25, 43, 0.14) 0px 1px 1px 0px, rgba(23, 25, 43, 0.12) 0px 1px 3px 0px",
+        "shadow.menu": "rgba(23, 25, 43, 0.2) 0px 3px 3px -2px, rgba(23, 25, 43, 0.14) 0px 3px 4px 0px, rgba(23, 25, 43, 0.12) 0px 1px 8px 0px",
+        "shadow.dialog": "rgba(23, 25, 43, 0.2) 0px 3px 5px -1px, rgba(23, 25, 43, 0.14) 0px 6px 10px 0px, rgba(23, 25, 43, 0.12) 0px 1px 18px 0px",
+        "shadow.warn": "0 0 5px rgba(204, 40, 39, 0.5), inset 0 0 5px rgba(204, 40, 39, 0.3)",
         "thickness.thin": 1,
         "thickness.standard": 2,
         "thickness.thick": 4,
@@ -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",
@@ -6773,10 +9139,10 @@ var uni_index_default = {
         "border.light": "1px solid #90929A",
         "border.dark": "1px solid #E5E7F0",
         "border.dotted": "1px dotted #E5E7F0",
-        "shadow.raised": "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
-        "shadow.menu": "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;",
-        "shadow.dialog": "rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px",
-        "shadow.warn": "0 0 5px rgba(255, 0, 0, 0.5), inset 0 0 5px rgba(255, 0, 0, 0.3)",
+        "shadow.raised": "none",
+        "shadow.menu": "0px 4px 12px rgba(0, 0, 0, 0.45)",
+        "shadow.dialog": "0px 8px 28px rgba(0, 0, 0, 0.55)",
+        "shadow.warn": "0 0 5px rgba(255, 150, 138, 0.55), inset 0 0 5px rgba(255, 150, 138, 0.35)",
         "thickness.thin": 1,
         "thickness.standard": 2,
         "thickness.thick": 4,
@@ -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",
@@ -7637,6 +10076,31 @@ var generateColors = (config) => {
   };
 };
 var generatePalette = (config) => generateColors(config);
+var rgba = (hex, alpha) => {
+  const { red, green, blue } = hexToRgb(hex);
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+};
+var generateShadows = (colors, mode = "light") => {
+  const error = colors["error"] ?? "#CC2827";
+  if (mode === "dark") return {
+    raised: "none",
+    menu: `0px 4px 12px ${rgba("#000000", 0.45)}`,
+    dialog: `0px 8px 28px ${rgba("#000000", 0.55)}`,
+    warn: `0 0 5px ${rgba(error, 0.55)}, inset 0 0 5px ${rgba(error, 0.35)}`
+  };
+  const { h } = hexToOklch(colors["primary"] ?? "#000000");
+  const ink = oklchToHex({
+    l: 0.22,
+    c: 0.035,
+    h
+  });
+  return {
+    raised: `${rgba(ink, 0.2)} 0px 2px 1px -1px, ${rgba(ink, 0.14)} 0px 1px 1px 0px, ${rgba(ink, 0.12)} 0px 1px 3px 0px`,
+    menu: `${rgba(ink, 0.2)} 0px 3px 3px -2px, ${rgba(ink, 0.14)} 0px 3px 4px 0px, ${rgba(ink, 0.12)} 0px 1px 8px 0px`,
+    dialog: `${rgba(ink, 0.2)} 0px 3px 5px -1px, ${rgba(ink, 0.14)} 0px 6px 10px 0px, ${rgba(ink, 0.12)} 0px 1px 18px 0px`,
+    warn: `0 0 5px ${rgba(error, 0.5)}, inset 0 0 5px ${rgba(error, 0.3)}`
+  };
+};
 var BaseTypography = {
   "display-large": {
     fontFamily: "Red Hat Display",
@@ -7833,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",
@@ -7881,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",
@@ -7892,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: {
@@ -7949,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",
@@ -8041,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
       }
     },
@@ -8069,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: {
@@ -8166,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",
@@ -8306,6 +10861,8 @@ var generateThemes = (input) => {
     lightColors: lightColors2,
     darkColors: darkColors2,
     radii: input.shape ? ShapeRadii[input.shape] : void 0,
+    lightShadows: generateShadows(lightColors2, "light"),
+    darkShadows: generateShadows(darkColors2, "dark"),
     report: {
       checks,
       worstRatio,
@@ -8324,30 +10881,31 @@ var bordersLiteral = () => [
   " * shared token picks up the change.",
   " */",
   "const borders = (colors: Colors): Borders => ({",
-  "  primary: `1px solid ${colors.primary}`,",
-  "  secondary: `1px solid ${colors.secondary}`,",
-  "  tertiary: `1px solid ${colors.tertiary}`,",
-  "  quaternary: `1px solid ${colors.quaternary}`,",
-  "  warn: `1px solid ${colors.warn}`,",
-  "  success: `1px solid ${colors.success}`,",
-  "  light: `1px solid ${colors.outline}`,",
+  "  primary: `1px solid ${colors['primary']}`,",
+  "  secondary: `1px solid ${colors['secondary']}`,",
+  "  tertiary: `1px solid ${colors['tertiary']}`,",
+  "  quaternary: `1px solid ${colors['quaternary']}`,",
+  "  warn: `1px solid ${colors['warn']}`,",
+  "  success: `1px solid ${colors['success']}`,",
+  "  light: `1px solid ${colors['outline']}`,",
   "  dark: `1px solid ${colors['on-background']}`,",
   "  dotted: `1px dotted ${colors['on-background']}`,",
   "});"
 ].join("\n");
-var themeExport = (exportName, displayName, colorsConst, radii) => [
+var themeExport = (exportName, displayName, colorsConst, shadowsConst, radii) => [
   `export const ${exportName}: UniTheme = createTheme({`,
   `  id: '${exportName}',`,
   `  name: '${displayName}',`,
   `  colors: ${colorsConst},`,
   `  borders: borders(${colorsConst}),`,
   `  components: components(${colorsConst}),`,
+  `  shadows: ${shadowsConst},`,
   ...radii ? ["  radii,"] : [],
   "});"
 ].join("\n");
 var emitThemeFile = (input) => {
   const { darkMode = true, name = "Brand" } = input;
-  const { lightColors: lightColors2, darkColors: darkColors2, radii, report } = generateThemes(input);
+  const { lightColors: lightColors2, darkColors: darkColors2, radii, lightShadows, darkShadows, report } = generateThemes(input);
   const id = name.replace(/\W+/g, "") || "Brand";
   const regenerate = [
     `--brand=${(Array.isArray(input.seed) ? input.seed : [input.seed]).join(",")}`,
@@ -8361,12 +10919,16 @@ var emitThemeFile = (input) => {
     exportName: `${id}Light`,
     displayName: `${name} Light`,
     colorsConst: "lightColors",
-    colors: lightColors2
+    colors: lightColors2,
+    shadowsConst: "lightShadows",
+    shadows: lightShadows
   }, ...darkMode ? [{
     exportName: `${id}Dark`,
     displayName: `${name} Dark`,
     colorsConst: "darkColors",
-    colors: darkColors2
+    colors: darkColors2,
+    shadowsConst: "darkShadows",
+    shadows: darkShadows
   }] : []];
   return {
     content: [
@@ -8383,19 +10945,25 @@ var emitThemeFile = (input) => {
       "  type Borders,",
       "  type Colors,",
       "  type ComponentThemes,",
+      "  type Shadows,",
       "  type UniTheme,",
       "} from '@uni-design-system/uni-core';",
       "",
       ...modes.map(({ colorsConst, colors }) => `const ${colorsConst}: Colors = {
 ${recordLiteral(colors, "  ")}
 };
+`),
+      "/** Brand-tinted elevation shadows \u2014 theme-scoped, edit freely. */",
+      ...modes.map(({ shadowsConst, shadows }) => `const ${shadowsConst}: Shadows = {
+${recordLiteral(shadows, "  ")}
+};
 `),
       bordersLiteral(),
       "",
       "/**",
       " * Sparse component overrides, deep-merged over Uni component defaults: only",
       " * what you write here changes. Point components at your own primitives, e.g.:",
-      " *   button: { variants: { secondary: { border: `2px dashed ${colors.tertiary}` } } },",
+      " *   button: { variants: { secondary: { border: `2px dashed ${colors['tertiary']}` } } },",
       " *   input: { options: { borderRadius: 'max' } },",
       " */",
       "const components = (colors: Colors): ComponentThemes => ({});",
@@ -8407,7 +10975,7 @@ ${recordLiteral(radii, "  ")}
 };`,
         ""
       ] : [],
-      ...modes.map(({ exportName, displayName, colorsConst }) => `${themeExport(exportName, displayName, colorsConst, !!radii)}
+      ...modes.map(({ exportName, displayName, colorsConst, shadowsConst }) => `${themeExport(exportName, displayName, colorsConst, shadowsConst, !!radii)}
 `),
       "/** First key wins as the default theme when registered via UNI_THEMES. */",
       `export const ${id}Themes = { ${modes.map((m) => m.exportName).join(", ")} };`,
@@ -8506,12 +11074,14 @@ var darkColors = generatePalette({
 var DarkTheme = createTheme({
   id: "DarkTheme",
   name: "Dark Theme",
-  colors: darkColors
+  colors: darkColors,
+  shadows: generateShadows(darkColors, "dark")
 });
 var LightTheme = createTheme({
   id: "LightTheme",
   name: "Light Theme",
-  colors: lightColors
+  colors: lightColors,
+  shadows: generateShadows(lightColors, "light")
 });
 var UniThemes = {
   LightTheme,
@@ -8563,8 +11133,9 @@ ${failing.map((f) => `- ${f.mode} \`${f.foreground}\` on \`${f.background}\`: ${
     "- **Colors**: edit any token in the `lightColors`/`darkColors` maps; borders and every",
     "  component deriving from that token update automatically.",
     "- **Borders**: add your own primitive under any name in `borders` (e.g.",
-    "  `'brush-stroke': `3px dashed ${colors.tertiary}``) and reference it from `components`",
-    "  overrides \u2014 one edit restyles every component sharing the token.",
+    "  `'brush-stroke': `3px dashed ${colors['tertiary']}``) and reference it from `components`",
+    "  overrides \u2014 one edit restyles every component sharing the token. Use bracket access",
+    "  on `colors` \u2014 dot access fails under `noPropertyAccessFromIndexSignature`.",
     "- **Components**: the `components` function returns sparse overrides deep-merged over",
     "  Uni defaults \u2014 set only what you change, e.g.",
     "  `button: { variants: { secondary: { border: borders(colors)['brush-stroke'] } } }`.",
@@ -8777,4 +11348,4 @@ export {
   meta,
   createUniServer
 };
-//# sourceMappingURL=chunk-UQRS5BYW.js.map
+//# sourceMappingURL=chunk-E34OHB3Z.js.map