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

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

@@ -7,16 +7,16 @@ import { z } from "zod";
 // src/data/uni-index.json
 var uni_index_default = {
   meta: {
-    version: "5.2.0",
-    builtAt: "2026-07-24T03:22:37.140Z",
+    version: "6.0.0",
+    builtAt: "2026-07-24T13:32:56.708Z",
     frameworks: [
       "angular"
     ],
     counts: {
-      components: 69,
-      tokens: 272,
+      components: 70,
+      tokens: 296,
       themes: 2,
-      examples: 126
+      examples: 132
     }
   },
   components: [
@@ -27,11 +27,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-alert, Alert",
+          selectorOrTag: "uni-alert",
           api: [
             {
               name: "show",
@@ -78,7 +78,7 @@ var uni_index_default = {
         {
           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-->"
+          code: "<!-- Storybook story: Primary -->\n<button text-button (click)=\"alert.open()\">Show Alert</button>\n<uni-alert #alert ${argsToTemplate(props)}>\n  ${ngContent}\n</uni-alert>\n<!-- args:\n{\n    ngContent: 'This is an alert!',\n    variant: 'tertiary',\n    symbolName: 'privacy_tip',\n  }\n-->"
         }
       ],
       guidelines: {
@@ -101,11 +101,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-app-bar, AppBar",
+          selectorOrTag: "uni-app-bar",
           api: [
             {
               name: "title",
@@ -155,11 +155,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-avatar, Avatar",
+          selectorOrTag: "uni-avatar",
           api: [
             {
               name: "src",
@@ -190,7 +190,7 @@ var uni_index_default = {
           title: "Initials",
           framework: "angular",
           code: `<!-- Storybook story: Initials -->
-<div style="display: flex; gap: 12px; align-items: center;">
+<div row-layout gap="sm" alignItems="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" />
@@ -204,12 +204,12 @@ var uni_index_default = {
         {
           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>'
+          code: '<!-- Storybook story: Sizes And Variants -->\n<div row-layout gap="sm" alignItems="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>'
+          code: '<!-- Storybook story: Group -->\n<div row-layout gap="sm" alignItems="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: {
@@ -231,11 +231,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-avatar-group, AvatarGroup",
+          selectorOrTag: "uni-avatar-group",
           api: [
             {
               name: "max",
@@ -264,11 +264,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-background, Background",
+          selectorOrTag: "uni-background",
           api: [
             {
               name: "image",
@@ -341,11 +341,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "div[uni-badge], Badge",
+          selectorOrTag: "[uni-badge]",
           api: [
             {
               name: "color",
@@ -378,9 +378,9 @@ var uni_index_default = {
           title: "Pass",
           framework: "angular",
           code: `<!-- Storybook story: Pass -->
-<Badge color="\${color}" [width]="\${width}">
+<div uni-badge color="\${color}" [width]="\${width}">
   \${ngContent}
-</Badge>
+</div>
 <!-- args:
 {
     color: 'secondary',
@@ -393,9 +393,9 @@ var uni_index_default = {
           title: "Fail",
           framework: "angular",
           code: `<!-- Storybook story: Fail -->
-<Badge color="\${color}" [width]="\${width}">
+<div uni-badge color="\${color}" [width]="\${width}">
   \${ngContent}
-</Badge>
+</div>
 <!-- args:
 {
     color: 'warn',
@@ -422,7 +422,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "directives",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -446,11 +446,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "div[uni-box-layout], Box, div[box-layout]",
+          selectorOrTag: "[uni-box-layout], [box-layout]",
           api: [
             {
               name: "color",
@@ -654,7 +654,7 @@ var uni_index_default = {
               kind: "input",
               type: "number | string",
               required: false,
-              description: ""
+              description: 'Number = px via binding (`[height]="420"`); string = CSS length (`height="420px"`).'
             },
             {
               name: "minHeight",
@@ -675,7 +675,7 @@ var uni_index_default = {
               kind: "input",
               type: "number | string",
               required: false,
-              description: ""
+              description: 'Number = px via binding (`[width]="420"`); string = CSS length (`width="50%"`).'
             },
             {
               name: "minWidth",
@@ -791,7 +791,7 @@ var uni_index_default = {
         {
           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-->"
+          code: "<!-- Storybook story: Primary -->\n<div box-layout ${argsToTemplate(props)}>\n<span uni-text>${ngContent}</span>\n</div>\n<!-- args:\n{\n    color: 'secondary-container',\n    borderRadius: 'md',\n    padding: 'lg',\n    ngContent: 'Box Content.',\n  }\n-->"
         }
       ],
       guidelines: {
@@ -809,11 +809,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-breadcrumb, Breadcrumb",
+          selectorOrTag: "uni-breadcrumb",
           api: [
             {
               name: "items",
@@ -873,11 +873,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "button[uni-text-button], Button, button[text-button]",
+          selectorOrTag: "button[uni-text-button], button[text-button]",
           api: [
             {
               name: "disable",
@@ -1013,11 +1013,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-button-group, ButtonGroup",
+          selectorOrTag: "uni-button-group",
           api: []
         }
       },
@@ -1025,7 +1025,7 @@ var uni_index_default = {
         {
           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-->'
+          code: '<!-- Storybook story: Primary -->\n<uni-button-group ${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</uni-button-group>\n<!-- args:\n{}\n-->'
         }
       ],
       guidelines: {
@@ -1043,11 +1043,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-card, Card",
+          selectorOrTag: "uni-card",
           api: []
         }
       },
@@ -1056,12 +1056,12 @@ var uni_index_default = {
           title: "Primary",
           framework: "angular",
           code: `<!-- Storybook story: Primary -->
-<Card variant="\${variant}">
-  <CardHeader title="Card Header"></CardHeader>
-  <CardContent>
-    <Text>\${ngContent}</Text>
-  </CardContent>
-</Card>
+<uni-card variant="\${variant}">
+  <uni-card-header title="Card Header"></uni-card-header>
+  <uni-card-content>
+    <span uni-text>\${ngContent}</span>
+  </uni-card-content>
+</uni-card>
 <!-- args:
 {
     variant: 'primary',
@@ -1088,11 +1088,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-card-content, CardContent",
+          selectorOrTag: "uni-card-content",
           api: []
         }
       },
@@ -1112,11 +1112,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-card-header, CardHeader",
+          selectorOrTag: "uni-card-header",
           api: [
             {
               name: "title",
@@ -1153,11 +1153,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "div[uni-center-layout], div[center-layout]",
+          selectorOrTag: "[uni-center-layout], [center-layout]",
           api: [
             {
               name: "display",
@@ -1190,7 +1190,7 @@ var uni_index_default = {
         {
           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-->"
+          code: "<!-- Storybook story: Primary -->\n<div center-layout  ${argsToTemplate(props)}>\n  <span uni-text=\"headline-large\">${ngContent}</span>\n</div>\n<!-- args:\n{\n    ngContent: 'Centered Content',\n    height: 180,\n    width: '100%',\n  }\n-->"
         }
       ],
       guidelines: {
@@ -1208,11 +1208,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-checkbox, Checkbox",
+          selectorOrTag: "uni-checkbox",
           api: [
             {
               name: "checked",
@@ -1326,7 +1326,8 @@ var uni_index_default = {
         accessibility: []
       },
       relatedTokens: [
-        "checkbox.behavior.size"
+        "checkbox.behavior.size",
+        "checkbox.behavior.boxColor"
       ]
     },
     {
@@ -1336,11 +1337,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-confirmation-dialog, Confirmation",
+          selectorOrTag: "uni-confirmation-dialog",
           api: [
             {
               name: "show",
@@ -1383,7 +1384,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1420,7 +1421,7 @@ var uni_index_default = {
           framework: "angular",
           code: `<!-- Storybook story: Primary -->
 <uni-data-search \${argsToTemplate(props)} />
-<div style="margin-top: 16px;">
+<div box-layout paddingTop="md">
   @for (record of datasource.records(); track record.id) {
     <div>{{ record.name }} \u2014 {{ record.homeworld }}</div>
   }
@@ -1437,7 +1438,7 @@ var uni_index_default = {
           framework: "angular",
           code: `<!-- Storybook story: Field Scoped -->
 <uni-data-search \${argsToTemplate(props)} />
-<div style="margin-top: 16px;">
+<div box-layout paddingTop="md">
   @for (record of datasource.records(); track record.id) {
     <div>{{ record.name }} \u2014 {{ record.homeworld }}</div>
   }
@@ -1466,11 +1467,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "data",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-data-table, DataTable",
+          selectorOrTag: "uni-data-table",
           api: [
             {
               name: "datasource",
@@ -1563,11 +1564,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "DebounceInput, uni-debounce-input",
+          selectorOrTag: "uni-debounce-input",
           api: [
             {
               name: "inputName",
@@ -1591,6 +1592,58 @@ var uni_index_default = {
               default: "400",
               description: ""
             },
+            {
+              name: "label",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: "Accessible name for the input."
+            },
+            {
+              name: "placeholder",
+              kind: "input",
+              type: "string",
+              required: false,
+              default: "''",
+              description: ""
+            },
+            {
+              name: "disabled",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "role",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: ""
+            },
+            {
+              name: "ariaExpanded",
+              kind: "input",
+              type: "boolean | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
+            },
+            {
+              name: "ariaControls",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: ""
+            },
+            {
+              name: "ariaActivedescendant",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: ""
+            },
             {
               name: "change",
               kind: "output",
@@ -1606,8 +1659,8 @@ var uni_index_default = {
           title: "Primary",
           framework: "angular",
           code: `<!-- Storybook story: Primary -->
-<DebounceInput \${argsToTemplate(props)} (change)="lastEmitted = $event" #debounce />
-<div style="margin-top: 16px;">
+<uni-debounce-input \${argsToTemplate(props)} (change)="lastEmitted = $event" #debounce />
+<div box-layout paddingTop="md">
   <div>Live value: {{ debounce.value() }}</div>
   <div>Debounced value: {{ lastEmitted }}</div>
 </div>
@@ -1634,11 +1687,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "dialog[uni-dialog], Dialog",
+          selectorOrTag: "dialog[uni-dialog]",
           api: [
             {
               name: "show",
@@ -1683,7 +1736,7 @@ var uni_index_default = {
         {
           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-->'
+          code: '<!-- Storybook story: Primary -->\n<button text-button (click)="dialog.open()">Open Dialog</button>\n<dialog uni-dialog #dialog>\n  <header uni-dialog-header color="primary">Sample Dialog</header>\n  <div center-layout [width]="300" [height]="200">\n    <span uni-text>Dialog</span>\n  </div>\n  <footer dialog-buttons></footer>\n</dialog>\n<!-- args:\n{}\n-->'
         }
       ],
       guidelines: {
@@ -1708,11 +1761,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-dialog-buttons, DialogButtons, div[dialog-buttons]",
+          selectorOrTag: "[uni-dialog-buttons], [dialog-buttons]",
           api: [
             {
               name: "confirmButtonText",
@@ -1793,11 +1846,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "div[uni-dialog-header], DialogHeader",
+          selectorOrTag: "[uni-dialog-header]",
           api: []
         }
       },
@@ -1817,11 +1870,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-divider, Divider",
+          selectorOrTag: "uni-divider",
           api: [
             {
               name: "orientation",
@@ -1847,9 +1900,9 @@ var uni_index_default = {
           title: "Primary",
           framework: "angular",
           code: `<!-- Storybook story: Primary -->
-<Center height="200px">
-  <Divider border="\${border}" orientation="\${orientation}" />
-</Center>
+<div center-layout height="200px">
+  <uni-divider border="\${border}" orientation="\${orientation}" />
+</div>
 <!-- args:
 {
     orientation: 'horizontal',
@@ -1873,7 +1926,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "directives",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1905,11 +1958,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-drawer, Drawer",
+          selectorOrTag: "uni-drawer",
           api: [
             {
               name: "open",
@@ -1950,12 +2003,12 @@ var uni_index_default = {
         {
           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>'
+          code: '<!-- Storybook story: Dashboard Shell -->\n<section stack-layout height="420px" 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 row-layout [grow]="1" [minHeight]="0">\n  <uni-drawer mode="side" [(open)]="open">\n    <nav stack-layout gap="sm" aria-label="Main">\n      <span uni-text="title-small" display="block">Dashboard</span>\n      <span uni-text="title-small" display="block">Reports</span>\n      <span uni-text="title-small" display="block">Settings</span>\n    </nav>\n  </uni-drawer>\n  <main box-layout [grow]="1" padding="md" [minWidth]="0">\n    <h2 uni-text="headline-small">Content</h2>\n    <span uni-text="body-1-long" display="block">\n      The side drawer pushes this content; toggle it from the app bar.\n    </span>\n  </main>\n</div>\n</section>'
         },
         {
           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>'
+          code: '<!-- Storybook story: Overlay -->\n<section stack-layout height="420px" 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 row-layout [grow]="1" [minHeight]="0">\n  <uni-drawer mode="side" [(open)]="open">\n    <nav stack-layout gap="sm" aria-label="Main">\n      <span uni-text="title-small" display="block">Dashboard</span>\n      <span uni-text="title-small" display="block">Reports</span>\n      <span uni-text="title-small" display="block">Settings</span>\n    </nav>\n  </uni-drawer>\n  <main box-layout [grow]="1" padding="md" [minWidth]="0">\n    <h2 uni-text="headline-small">Content</h2>\n    <span uni-text="body-1-long" display="block">\n      The side drawer pushes this content; toggle it from the app bar.\n    </span>\n  </main>\n</div>\n</section>'
         }
       ],
       guidelines: {
@@ -1980,11 +2033,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-dropdown, Dropdown",
+          selectorOrTag: "uni-dropdown",
           api: [
             {
               name: "trigger",
@@ -2069,11 +2122,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-expand, Expand",
+          selectorOrTag: "uni-expand",
           api: [
             {
               name: "collapsed",
@@ -2091,14 +2144,14 @@ var uni_index_default = {
           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>
+<uni-card>
+<uni-card-header title="Expandable Card"><uni-expand-toggle #toggle /></uni-card-header>
+<uni-expand [collapsed]="toggle.collapsed()">
+  <uni-card-content>
+    <span uni-text>\${ngContent}</span>
+  </uni-card-content>
+</uni-expand>
+</uni-card>
 <!-- args:
 {
     collapsed: false,
@@ -2122,11 +2175,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-expand-area, ExpandArea",
+          selectorOrTag: "uni-expand-area",
           api: [
             {
               name: "title",
@@ -2166,9 +2219,9 @@ var uni_index_default = {
           title: "Primary",
           framework: "angular",
           code: `<!-- Storybook story: Primary -->
-<ExpandArea title="\${title}" padding="\${padding}" initCollapsed="\${initCollapsed}" #expandArea>
+<uni-expand-area title="\${title}" padding="\${padding}" initCollapsed="\${initCollapsed}" #expandArea>
   <button text-button (click)="expandArea.toggleExpand()" size="md" variant="ghost" symbolLeft="collapse_all">Collapse area</button>
-</ExpandArea>
+</uni-expand-area>
 <!-- args:
 {
     title: 'Expand Area Title',
@@ -2193,11 +2246,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-expand-toggle, ExpandToggle",
+          selectorOrTag: "uni-expand-toggle",
           api: [
             {
               name: "collapsed",
@@ -2221,7 +2274,7 @@ var uni_index_default = {
         {
           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-->'
+          code: '<!-- Storybook story: Primary -->\n<uni-expand-toggle [collapsed]="collapsed" #toggle />\n<div>Collapsed: {{ toggle.collapsed() }}</div>\n<!-- args:\n{\n    collapsed: true,\n  }\n-->'
         }
       ],
       guidelines: {
@@ -2239,7 +2292,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2348,8 +2401,8 @@ var uni_index_default = {
 <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>
+  <span uni-text="title-medium">Title Text</span>
+  <span uni-text="subtitle-1">Subtitle Text</span>
 </div>
 </ng-template>
 <!-- args:
@@ -2367,8 +2420,8 @@ var uni_index_default = {
 <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>
+  <span uni-text="title-medium">Title Text</span>
+  <span uni-text="subtitle-1">Subtitle Text</span>
 </div>
 </ng-template>
 <!-- args:
@@ -2395,11 +2448,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "div[uni-grid-layout], Grid, div[grid-layout]",
+          selectorOrTag: "[uni-grid-layout], [grid-layout]",
           api: [
             {
               name: "display",
@@ -2454,19 +2507,19 @@ var uni_index_default = {
           code: `<!-- Storybook story: Simple Grid -->
 <div grid-layout \${argsToTemplate(props)}>
   <div box-layout gridArea="nav" color="quaternary" padding="md" borderRadius="sm">
-    <Text>nav</Text>
+    <span uni-text>nav</span>
   </div>
   <div box-layout gridArea="a1" color="primary" padding="md" borderRadius="sm">
-    <Text>a1</Text>
+    <span uni-text>a1</span>
   </div>
   <div box-layout gridArea="a2" color="secondary" padding="md" borderRadius="sm">
-    <Text>a2</Text>
+    <span uni-text>a2</span>
   </div>
   <div box-layout gridArea="b1" color="tertiary" padding="md" borderRadius="sm">
-    <Text>b1</Text>
+    <span uni-text>b1</span>
   </div>
   <div box-layout gridArea="b2" color="warn" padding="md" borderRadius="sm">
-    <Text>b2</Text>
+    <span uni-text>b2</span>
   </div>
 </div>
 <!-- args:
@@ -2492,11 +2545,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "GridArea",
+          selectorOrTag: "[uni-grid-area-layout], [grid-area-layout]",
           api: [
             {
               name: "area",
@@ -2524,11 +2577,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-icon, Icon",
+          selectorOrTag: "uni-icon",
           api: [
             {
               name: "color",
@@ -2551,15 +2604,7 @@ var uni_index_default = {
         {
           title: "Primary",
           framework: "angular",
-          code: `<!-- Storybook story: Primary -->
-<div style="height: \${size + 'px'}">
-    <Icon name="\${name}" color="\${color}" />
-  </div>
-<!-- args:
-{
-    name: 'checkCircle',
-  }
--->`
+          code: '<!-- Storybook story: Primary -->\n<div box-layout height="${size}px">\n    <uni-icon name="${name}" color="${color}" />\n  </div>\n<!-- args:\n{\n    name: \'checkCircle\',\n  }\n-->'
         }
       ],
       guidelines: {
@@ -2577,7 +2622,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2677,7 +2722,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2817,7 +2862,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2890,7 +2935,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2960,11 +3005,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "Menu, uni-menu",
+          selectorOrTag: "uni-menu",
           api: [
             {
               name: "menuItems",
@@ -3004,9 +3049,9 @@ var uni_index_default = {
           framework: "angular",
           code: `<!-- Storybook story: Primary -->
 <div box-layout color="primary" padding="sm">
-  <Menu \${argsToTemplate(props)}>
+  <uni-menu \${argsToTemplate(props)}>
     <button text-button variant="ghost" symbolRight="arrow_drop_down">Menu</button>
-  </Menu>
+  </uni-menu>
 </div>
 <!-- args:
 {
@@ -3034,11 +3079,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "div[uni-menu-item], div[menu-item]",
+          selectorOrTag: "[uni-menu-item], [menu-item]",
           api: [
             {
               name: "display",
@@ -3150,11 +3195,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-multi-select, MultiSelect",
+          selectorOrTag: "uni-multi-select",
           api: [
             {
               name: "options",
@@ -3235,11 +3280,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-multi-select-dropdown, MultiSelectDropdown",
+          selectorOrTag: "uni-multi-select-dropdown",
           api: [
             {
               name: "value",
@@ -3366,7 +3411,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3435,7 +3480,7 @@ var uni_index_default = {
           title: "Default",
           framework: "angular",
           code: `<!-- Storybook story: Default -->
-<div style="margin: 20px;">
+<div box-layout padding="md">
 <uni-notification-badge
   [count]="count"
   [maxCount]="maxCount"
@@ -3463,7 +3508,7 @@ var uni_index_default = {
           title: "Dot",
           framework: "angular",
           code: `<!-- Storybook story: Dot -->
-<div style="margin: 20px;">
+<div box-layout padding="md">
 <uni-notification-badge
   [count]="count"
   [maxCount]="maxCount"
@@ -3489,7 +3534,7 @@ var uni_index_default = {
           title: "Count",
           framework: "angular",
           code: `<!-- Storybook story: Count -->
-<div style="margin: 20px;">
+<div box-layout padding="md">
 <uni-notification-badge
   [count]="count"
   [maxCount]="maxCount"
@@ -3517,7 +3562,7 @@ var uni_index_default = {
           title: "Pill",
           framework: "angular",
           code: `<!-- Storybook story: Pill -->
-<div style="margin: 20px;">
+<div box-layout padding="md">
 <uni-notification-badge
   [count]="count"
   [maxCount]="maxCount"
@@ -3545,7 +3590,7 @@ var uni_index_default = {
           title: "Large Count",
           framework: "angular",
           code: `<!-- Storybook story: Large Count -->
-<div style="margin: 20px;">
+<div box-layout padding="md">
 <uni-notification-badge
   [count]="count"
   [maxCount]="maxCount"
@@ -3572,22 +3617,22 @@ var uni_index_default = {
         {
           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>'
+          code: '<!-- Storybook story: Different Colors -->\n<div box-layout padding="md">\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>'
+          code: '<!-- Storybook story: Different Positions -->\n<div box-layout padding="md">\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>'
+          code: '<!-- Storybook story: Variant Comparison -->\n<div box-layout padding="md">\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>'
+          code: '<!-- Storybook story: With Icons -->\n<div box-layout padding="md">\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: {
@@ -3605,11 +3650,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-notifications, Notifications",
+          selectorOrTag: "uni-notifications",
           api: []
         }
       },
@@ -3629,11 +3674,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "data",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-paginator, Paginator",
+          selectorOrTag: "uni-paginator",
           api: [
             {
               name: "datasource",
@@ -3680,12 +3725,12 @@ var uni_index_default = {
         {
           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-->'
+          code: '<!-- Storybook story: Primary -->\n<uni-paginator ${argsToTemplate(props)} />\n<div box-layout paddingTop="md">\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-->'
+          code: '<!-- Storybook story: Page Numbers Only -->\n<uni-paginator ${argsToTemplate(props)} />\n<div box-layout paddingTop="md">\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: {
@@ -3711,11 +3756,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-popover, Popover",
+          selectorOrTag: "uni-popover",
           api: [
             {
               name: "placement",
@@ -3740,7 +3785,7 @@ var uni_index_default = {
         {
           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-->'
+          code: '<!-- Storybook story: Primary -->\n<uni-popover placement="${placement}" [autoClose]="${autoClose}" #popover>\n  <button text-button trigger>Open Popover</button>\n  <div stack-layout gap="sm">\n    <div>\n      <span uni-text="title-small" display="block">\n      This is a Popover.\n      </span>\n      It is possible to add any markup you want to a Popover.\n    </div>\n    <div>\n      <button text-button symbolLeft="thumb_up" size="sm" variant="secondary" (click)="popover.hidePopover()">OK!</button>\n    </div>\n  </div>\n</uni-popover>\n<!-- args:\n{\n    placement: \'right-start\',\n    autoClose: true,\n  }\n-->'
         }
       ],
       guidelines: {
@@ -3758,11 +3803,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-progress-bar, ProgressBar",
+          selectorOrTag: "uni-progress-bar",
           api: [
             {
               name: "width",
@@ -3802,7 +3847,7 @@ var uni_index_default = {
         {
           title: "Default",
           framework: "angular",
-          code: '<!-- Storybook story: Default -->\n<ProgressBar percent="${percent}" ${argsToTemplate(props)}></ProgressBar>\n<!-- args:\n{\n    percent: 60,\n  }\n-->'
+          code: '<!-- Storybook story: Default -->\n<uni-progress-bar percent="${percent}" ${argsToTemplate(props)}></uni-progress-bar>\n<!-- args:\n{\n    percent: 60,\n  }\n-->'
         }
       ],
       guidelines: {
@@ -3820,11 +3865,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-progress-gauge, ProgressGauge",
+          selectorOrTag: "uni-progress-gauge",
           api: [
             {
               name: "percent",
@@ -3849,7 +3894,7 @@ var uni_index_default = {
           title: "Default",
           framework: "angular",
           code: `<!-- Storybook story: Default -->
-<ProgressGauge percent="\${percent}" variant="\${variant}" size="\${size}"></ProgressGauge>
+<uni-progress-gauge percent="\${percent}" variant="\${variant}" size="\${size}"></uni-progress-gauge>
 <!-- args:
 {
     percent: 60,
@@ -3874,11 +3919,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-radio, Radio",
+          selectorOrTag: "uni-radio",
           api: [
             {
               name: "value",
@@ -4004,7 +4049,11 @@ var uni_index_default = {
         donts: [],
         accessibility: []
       },
-      relatedTokens: []
+      relatedTokens: [
+        "radio.behavior.size",
+        "radio.behavior.ringColor",
+        "radio.behavior.fillColor"
+      ]
     },
     {
       id: "ripple",
@@ -4013,7 +4062,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "directives",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4037,11 +4086,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "div[uni-row-layout], Row, div[row-layout]",
+          selectorOrTag: "[uni-row-layout], [row-layout]",
           api: [
             {
               name: "display",
@@ -4065,7 +4114,7 @@ var uni_index_default = {
               type: "number | string | undefined",
               required: false,
               default: "'fit-content'",
-              description: ""
+              description: 'Defaults to `fit-content` (guards content collapse). Set `[minWidth]="0"` when the row must shrink inside a constrained flex parent (scroll or text truncation containment).'
             }
           ]
         }
@@ -4092,11 +4141,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "div[uni-scroll-area], ScrollArea, div[scroll-area]",
+          selectorOrTag: "[uni-scroll-area], [scroll-area]",
           api: [
             {
               name: "color",
@@ -4221,7 +4270,7 @@ var uni_index_default = {
         {
           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-->'
+          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      <span uni-text="headline-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>\n      <span uni-text="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      </span>\n\n\n    `,\n  }\n-->'
         }
       ],
       guidelines: {
@@ -4239,17 +4288,24 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "SearchInput, uni-search-input",
+          selectorOrTag: "uni-search-input",
           api: [
             {
               name: "label",
               kind: "input",
               type: "string",
               required: true,
+              description: "Accessible name for the field, also the placeholder fallback."
+            },
+            {
+              name: "placeholder",
+              kind: "input",
+              type: "string",
+              required: false,
               description: ""
             },
             {
@@ -4260,6 +4316,22 @@ var uni_index_default = {
               default: "'100%'",
               description: ""
             },
+            {
+              name: "debounceTime",
+              kind: "input",
+              type: "number",
+              required: false,
+              default: "400",
+              description: ""
+            },
+            {
+              name: "suggestions",
+              kind: "input",
+              type: "string[]",
+              required: false,
+              default: "[]",
+              description: "Type-ahead entries. Keep them fresh from `change` emissions; the list shows while the field has focus and entries exist."
+            },
             {
               name: "change",
               kind: "output",
@@ -4273,6 +4345,13 @@ var uni_index_default = {
               type: "string",
               required: false,
               description: ""
+            },
+            {
+              name: "suggestionSelected",
+              kind: "output",
+              type: "string",
+              required: false,
+              description: ""
             }
           ]
         }
@@ -4281,7 +4360,24 @@ var uni_index_default = {
         {
           title: "Primary",
           framework: "angular",
-          code: "<!-- Storybook story: Primary -->\n<!-- args:\n{\n    label: 'Search',\n  }\n-->"
+          code: `<!-- Storybook story: Primary -->
+<div box-layout maxWidth="420px">
+<uni-search-input
+  label="Search the docs"
+  [debounceTime]="200"
+  [suggestions]="suggestions"
+  (change)="filter($event)"
+  (search)="log($event)"
+></uni-search-input>
+</div>
+<!-- args:
+{ label: 'Search' }
+-->`
+        },
+        {
+          title: "Type-ahead",
+          framework: "angular",
+          code: '<!-- Storybook story: Type-ahead -->\n<div box-layout maxWidth="420px">\n<uni-search-input\n  label="Search the docs"\n  [debounceTime]="200"\n  [suggestions]="suggestions"\n  (change)="filter($event)"\n  (search)="log($event)"\n></uni-search-input>\n</div>'
         }
       ],
       guidelines: {
@@ -4299,11 +4395,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-select, SelectInput",
+          selectorOrTag: "uni-select",
           api: [
             {
               name: "value",
@@ -4432,11 +4528,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-skeleton, Skeleton",
+          selectorOrTag: "uni-skeleton",
           api: [
             {
               name: "shape",
@@ -4478,15 +4574,19 @@ var uni_index_default = {
           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 box-layout maxWidth="360px">
+<uni-card>
+  <div row-layout gap="sm" alignItems="center" padding="md">
+    <uni-skeleton shape="circle" [height]="40" />
+    <div box-layout [grow]="1">
+      <uni-skeleton [lines]="2" />
+    </div>
+  </div>
+  <div box-layout paddingHorizontal="md" paddingBottom="md">
+    <uni-skeleton shape="rect" [height]="120" />
   </div>
-</div>
-<uni-skeleton shape="rect" [height]="120" style="display: block; padding: 0 16px 16px;" />
 </uni-card>
+</div>
 <!-- args:
 { shape: 'text', lines: 3 }
 -->`
@@ -4494,7 +4594,7 @@ var uni_index_default = {
         {
           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>'
+          code: '<!-- Storybook story: Card Placeholder -->\n<div box-layout maxWidth="360px">\n<uni-card>\n  <div row-layout gap="sm" alignItems="center" padding="md">\n    <uni-skeleton shape="circle" [height]="40" />\n    <div box-layout [grow]="1">\n      <uni-skeleton [lines]="2" />\n    </div>\n  </div>\n  <div box-layout paddingHorizontal="md" paddingBottom="md">\n    <uni-skeleton shape="rect" [height]="120" />\n  </div>\n</uni-card>\n</div>'
         }
       ],
       guidelines: {
@@ -4519,11 +4619,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-slider, Slider",
+          selectorOrTag: "uni-slider",
           api: [
             {
               name: "value",
@@ -4652,11 +4752,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-snackbar, Snackbar",
+          selectorOrTag: "uni-snackbar",
           api: [
             {
               name: "show",
@@ -4722,7 +4822,7 @@ var uni_index_default = {
         {
           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-->"
+          code: "<!-- Storybook story: Primary -->\n<button text-button (click)=\"snackbar.open()\">Show Snackbar</button>\n<uni-snackbar #snackbar ${argsToTemplate(props)}>\n  ${ngContent}\n</uni-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: {
@@ -4744,7 +4844,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "data",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4773,9 +4873,9 @@ var uni_index_default = {
           framework: "angular",
           code: `<!-- Storybook story: Primary -->
 <uni-sort-header [datasource]="datasource" [column]="column">
-  <Text typeface="title-small">Name</Text>
+  <span uni-text="title-small">Name</span>
 </uni-sort-header>
-<div style="margin-top: 16px;">
+<div box-layout paddingTop="md">
   @for (record of datasource.records().slice(0, 5); track record.id) {
     <div>{{ record.name }}</div>
   }
@@ -4803,11 +4903,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "div[uni-stack-layout], Stack, div[stack-layout]",
+          selectorOrTag: "[uni-stack-layout], [stack-layout]",
           api: [
             {
               name: "display",
@@ -4831,7 +4931,7 @@ var uni_index_default = {
               type: "number | string | undefined",
               required: false,
               default: "'fit-content'",
-              description: ""
+              description: 'Defaults to `fit-content` (guards content collapse). Set `[minHeight]="0"` when the stack must shrink inside a constrained flex parent (scroll containment).'
             }
           ]
         }
@@ -4840,7 +4940,7 @@ var uni_index_default = {
         {
           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-->"
+          code: "<!-- Storybook story: Stacked Cards -->\n<div stack-layout ${argsToTemplate(props)}>\n  <uni-card><uni-card-content><span uni-text>Card 1</span></uni-card-content></uni-card>\n  <uni-card><uni-card-content><span uni-text>Card 2</span></uni-card-content></uni-card>\n  <uni-card><uni-card-content><span uni-text>Card 3</span></uni-card-content></uni-card>\n  <uni-card><uni-card-content><span uni-text>Card 4</span></uni-card-content></uni-card>\n  <uni-card><uni-card-content><span uni-text>Card 5</span></uni-card-content></uni-card>\n</div>\n<!-- args:\n{ gap: 'lg' }\n-->"
         }
       ],
       guidelines: {
@@ -4851,6 +4951,103 @@ var uni_index_default = {
       },
       relatedTokens: []
     },
+    {
+      id: "stat",
+      name: "Stat",
+      status: "stable",
+      summary: "",
+      description: "",
+      category: "components",
+      version: "6.0.0",
+      bindings: {
+        angular: {
+          importPath: "@uni-design-system/uni-angular",
+          selectorOrTag: "uni-stat",
+          api: [
+            {
+              name: "label",
+              kind: "input",
+              type: "string",
+              required: true,
+              description: "What is being measured, sentence case."
+            },
+            {
+              name: "value",
+              kind: "input",
+              type: "string | number",
+              required: true,
+              description: "The headline number: strings render verbatim, numbers auto-compact."
+            },
+            {
+              name: "delta",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: 'Signed change, e.g. "+12.4%" or "-0.4%". The sign drives the arrow.'
+            },
+            {
+              name: "upIsGood",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "true",
+              description: "Whether an upward movement is good news. Flip for churn, errors, cost."
+            },
+            {
+              name: "caption",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: 'Names the comparison period, e.g. "vs last month".'
+            },
+            {
+              name: "trend",
+              kind: "input",
+              type: "number[] | undefined",
+              required: false,
+              default: "undefined",
+              description: "Recent values for the decorative sparkline (12 points reads best)."
+            }
+          ]
+        }
+      },
+      examples: [
+        {
+          title: "Default",
+          framework: "angular",
+          code: "<!-- Storybook story: Default -->\n<uni-stat ${argsToTemplate(props)}></uni-stat>\n<!-- args:\n{\n    label: 'Monthly recurring revenue',\n    value: '$48.2K',\n    delta: '+12.4%',\n    caption: 'vs last month',\n    trend: [31, 34, 33, 38, 37, 41, 40, 44, 43, 46, 47, 48],\n  }\n-->"
+        },
+        {
+          title: "Down is good (churn)",
+          framework: "angular",
+          code: "<!-- Storybook story: Down is good (churn) -->\n<uni-stat ${argsToTemplate(props)}></uni-stat>\n<!-- args:\n{\n    label: 'Churn rate',\n    value: '2.1%',\n    delta: '-0.4%',\n    upIsGood: false,\n    caption: 'vs last month',\n    trend: [3.2, 3.1, 3.0, 2.8, 2.9, 2.7, 2.6, 2.4, 2.5, 2.3, 2.2, 2.1],\n  }\n-->"
+        },
+        {
+          title: "KPI row",
+          framework: "angular",
+          code: "<!-- Storybook story: KPI row -->\n<uni-stat ${argsToTemplate(props)}></uni-stat>"
+        }
+      ],
+      guidelines: {
+        whenToUse: "",
+        dos: [],
+        donts: [],
+        accessibility: []
+      },
+      relatedTokens: [
+        "stat.behavior.labelTypeface",
+        "stat.behavior.valueTypeface",
+        "stat.behavior.color",
+        "stat.behavior.border",
+        "stat.behavior.borderRadius",
+        "stat.behavior.positiveColor",
+        "stat.behavior.negativeColor",
+        "stat.behavior.trendColor",
+        "stat.behavior.trendAccent",
+        "stat.behavior.padding",
+        "stat.behavior.gap"
+      ]
+    },
     {
       id: "symbol",
       name: "Symbol",
@@ -4858,11 +5055,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-symbol, Symbol",
+          selectorOrTag: "uni-symbol",
           api: [
             {
               name: "name",
@@ -4929,11 +5126,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-tab, Tab",
+          selectorOrTag: "uni-tab",
           api: [
             {
               name: "label",
@@ -4969,11 +5166,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-tabs, Tabs",
+          selectorOrTag: "uni-tabs",
           api: [
             {
               name: "selectedIndex",
@@ -4990,12 +5187,12 @@ var uni_index_default = {
         {
           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>'
+          code: '<!-- Storybook story: Default -->\n<uni-tabs [selectedIndex]="selectedIndex ?? 0">\n<uni-tab label="Overview">\n  <span uni-text="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  </span>\n</uni-tab>\n<uni-tab label="Activity">\n  <span uni-text="body-1-long">Recent activity would render here.</span>\n</uni-tab>\n<uni-tab label="Settings">\n  <span uni-text="body-1-long">Settings content, instantiated on selection.</span>\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>'
+          code: '<!-- Storybook story: With Disabled Tab -->\n<uni-tabs [selectedIndex]="selectedIndex ?? 0">\n<uni-tab label="Overview">\n  <span uni-text="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  </span>\n</uni-tab>\n<uni-tab label="Activity">\n  <span uni-text="body-1-long">Recent activity would render here.</span>\n</uni-tab>\n<uni-tab label="Settings">\n  <span uni-text="body-1-long">Settings content, instantiated on selection.</span>\n</uni-tab>\n</uni-tabs>'
         }
       ],
       guidelines: {
@@ -5023,11 +5220,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "data",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "Tag, uni-tag",
+          selectorOrTag: "uni-tag",
           api: [
             {
               name: "label",
@@ -5090,19 +5287,27 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-text, Text",
+          selectorOrTag: "[uni-text]",
           api: [
+            {
+              name: "uniText",
+              kind: "input",
+              type: "Typeface | ''",
+              required: false,
+              default: "'', { alias: 'uni-text' }",
+              description: 'Typeface via the selector attribute: `uni-text="headline-large"`.'
+            },
             {
               name: "typeface",
               kind: "input",
-              type: "Typeface",
+              type: "Typeface | undefined",
               required: false,
-              default: "'title-small'",
-              description: ""
+              default: "undefined",
+              description: "Explicit typeface; the attribute value wins when both are set."
             },
             {
               name: "color",
@@ -5150,7 +5355,18 @@ var uni_index_default = {
           ]
         }
       },
-      examples: [],
+      examples: [
+        {
+          title: "Value shorthand",
+          framework: "angular",
+          code: '<!-- Storybook story: Value shorthand -->\n<div stack-layout gap="sm">\n<span uni-text="display-small" display="block">Display small</span>\n<span uni-text="headline-medium" display="block">Headline medium</span>\n<span uni-text="body-1-long" display="block">\n  Body copy set with uni-text="body-1-long" \u2014 the attribute value is the typeface.\n</span>\n<span uni-text="caption" color="on-background-variant" display="block">\n  A caption in the muted ink.\n</span>\n</div>'
+        },
+        {
+          title: "Element-aware defaults",
+          framework: "angular",
+          code: '<!-- Storybook story: Element-aware defaults -->\n<div stack-layout gap="sm">\n<span uni-text="display-small" display="block">Display small</span>\n<span uni-text="headline-medium" display="block">Headline medium</span>\n<span uni-text="body-1-long" display="block">\n  Body copy set with uni-text="body-1-long" \u2014 the attribute value is the typeface.\n</span>\n<span uni-text="caption" color="on-background-variant" display="block">\n  A caption in the muted ink.\n</span>\n</div>'
+        }
+      ],
       guidelines: {
         whenToUse: "",
         dos: [],
@@ -5166,7 +5382,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5293,7 +5509,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5323,11 +5539,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-toggle, Toggle",
+          selectorOrTag: "uni-toggle",
           api: [
             {
               name: "checked",
@@ -5433,7 +5649,9 @@ var uni_index_default = {
         accessibility: []
       },
       relatedTokens: [
-        "toggle.behavior.size"
+        "toggle.behavior.size",
+        "toggle.behavior.trackColor",
+        "toggle.behavior.knobColor"
       ]
     },
     {
@@ -5443,11 +5661,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-tooltip, Tooltip",
+          selectorOrTag: "uni-tooltip",
           api: [
             {
               name: "hoverDelay",
@@ -5495,7 +5713,7 @@ var uni_index_default = {
         {
           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-->"
+          code: "<!-- Storybook story: Primary -->\n<span uni-text>Here is some text with a <uni-tooltip ${argsToTemplate(props)}>tooltip</uni-tooltip> in the middle.\n</span>\n<!-- args:\n{\n    label: 'Bottom-start tooltip',\n    placement: 'bottom-start',\n    inlineText: true,\n  }\n-->"
         }
       ],
       guidelines: {
@@ -5518,11 +5736,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "div[uni-wrap-layout], Wrap, div[wrap-layout]",
+          selectorOrTag: "[uni-wrap-layout], [wrap-layout]",
           api: [
             {
               name: "display",
@@ -6979,6 +7197,17 @@ var uni_index_default = {
         DarkTheme: '{"fontFamily":"Red Hat Display","fontSize":16,"lineHeight":24}'
       }
     },
+    {
+      id: "typography.stat",
+      value: '{"fontFamily":"Red Hat Display","fontSize":32,"lineHeight":38,"fontWeight":600,"letterSpacing":-0.32}',
+      type: "typography",
+      kind: "style",
+      target: "emotion-css",
+      themeValues: {
+        LightTheme: '{"fontFamily":"Red Hat Display","fontSize":32,"lineHeight":38,"fontWeight":600,"letterSpacing":-0.32}',
+        DarkTheme: '{"fontFamily":"Red Hat Display","fontSize":32,"lineHeight":38,"fontWeight":600,"letterSpacing":-0.32}'
+      }
+    },
     {
       id: "typography.tag",
       value: '{"fontFamily":"Red Hat Display","fontSize":15,"lineHeight":20,"fontWeight":600}',
@@ -7325,6 +7554,78 @@ var uni_index_default = {
         DarkTheme: 2
       }
     },
+    {
+      id: "searchInput.behavior.searchSymbol",
+      value: "search",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "searchInput",
+      themeValues: {
+        LightTheme: "search",
+        DarkTheme: "search"
+      }
+    },
+    {
+      id: "searchInput.behavior.clearSymbol",
+      value: "close",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "searchInput",
+      themeValues: {
+        LightTheme: "close",
+        DarkTheme: "close"
+      }
+    },
+    {
+      id: "searchInput.behavior.listColor",
+      value: "primary-surface",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "searchInput",
+      themeValues: {
+        LightTheme: "primary-surface",
+        DarkTheme: "primary-surface"
+      }
+    },
+    {
+      id: "searchInput.behavior.listShadow",
+      value: "menu",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "searchInput",
+      themeValues: {
+        LightTheme: "menu",
+        DarkTheme: "menu"
+      }
+    },
+    {
+      id: "searchInput.behavior.listBorderRadius",
+      value: "xs",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "searchInput",
+      themeValues: {
+        LightTheme: "xs",
+        DarkTheme: "xs"
+      }
+    },
+    {
+      id: "searchInput.behavior.maxSuggestions",
+      value: 8,
+      type: "number",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "searchInput",
+      themeValues: {
+        LightTheme: 8,
+        DarkTheme: 8
+      }
+    },
     {
       id: "checkbox.behavior.size",
       value: 20,
@@ -7337,6 +7638,54 @@ var uni_index_default = {
         DarkTheme: 20
       }
     },
+    {
+      id: "checkbox.behavior.boxColor",
+      value: "surface",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "checkbox",
+      themeValues: {
+        LightTheme: "surface",
+        DarkTheme: "surface"
+      }
+    },
+    {
+      id: "radio.behavior.size",
+      value: 20,
+      type: "number",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "radio",
+      themeValues: {
+        LightTheme: 20,
+        DarkTheme: 20
+      }
+    },
+    {
+      id: "radio.behavior.ringColor",
+      value: "outline",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "radio",
+      themeValues: {
+        LightTheme: "outline",
+        DarkTheme: "outline"
+      }
+    },
+    {
+      id: "radio.behavior.fillColor",
+      value: "surface",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "radio",
+      themeValues: {
+        LightTheme: "surface",
+        DarkTheme: "surface"
+      }
+    },
     {
       id: "dialog.behavior.borderRadius",
       value: "lg",
@@ -8417,6 +8766,138 @@ var uni_index_default = {
         DarkTheme: "xs"
       }
     },
+    {
+      id: "stat.behavior.labelTypeface",
+      value: "label",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "stat",
+      themeValues: {
+        LightTheme: "label",
+        DarkTheme: "label"
+      }
+    },
+    {
+      id: "stat.behavior.valueTypeface",
+      value: "stat",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "stat",
+      themeValues: {
+        LightTheme: "stat",
+        DarkTheme: "stat"
+      }
+    },
+    {
+      id: "stat.behavior.color",
+      value: "surface",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "stat",
+      themeValues: {
+        LightTheme: "surface",
+        DarkTheme: "surface"
+      }
+    },
+    {
+      id: "stat.behavior.border",
+      value: "light",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "stat",
+      themeValues: {
+        LightTheme: "light",
+        DarkTheme: "light"
+      }
+    },
+    {
+      id: "stat.behavior.borderRadius",
+      value: "xs",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "stat",
+      themeValues: {
+        LightTheme: "xs",
+        DarkTheme: "xs"
+      }
+    },
+    {
+      id: "stat.behavior.positiveColor",
+      value: "success",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "stat",
+      themeValues: {
+        LightTheme: "success",
+        DarkTheme: "success"
+      }
+    },
+    {
+      id: "stat.behavior.negativeColor",
+      value: "error",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "stat",
+      themeValues: {
+        LightTheme: "error",
+        DarkTheme: "error"
+      }
+    },
+    {
+      id: "stat.behavior.trendColor",
+      value: "outline",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "stat",
+      themeValues: {
+        LightTheme: "outline",
+        DarkTheme: "outline"
+      }
+    },
+    {
+      id: "stat.behavior.trendAccent",
+      value: "primary",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "stat",
+      themeValues: {
+        LightTheme: "primary",
+        DarkTheme: "primary"
+      }
+    },
+    {
+      id: "stat.behavior.padding",
+      value: "md",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "stat",
+      themeValues: {
+        LightTheme: "md",
+        DarkTheme: "md"
+      }
+    },
+    {
+      id: "stat.behavior.gap",
+      value: "xxs",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "stat",
+      themeValues: {
+        LightTheme: "xxs",
+        DarkTheme: "xxs"
+      }
+    },
     {
       id: "slider.behavior.color",
       value: "primary",
@@ -8645,6 +9126,30 @@ var uni_index_default = {
         DarkTheme: 20
       }
     },
+    {
+      id: "toggle.behavior.trackColor",
+      value: "surface-variant",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "toggle",
+      themeValues: {
+        LightTheme: "surface-variant",
+        DarkTheme: "surface-variant"
+      }
+    },
+    {
+      id: "toggle.behavior.knobColor",
+      value: "surface",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "toggle",
+      themeValues: {
+        LightTheme: "surface",
+        DarkTheme: "surface"
+      }
+    },
     {
       id: "tooltip.behavior.borderRadius",
       value: "xs",
@@ -8829,6 +9334,7 @@ var uni_index_default = {
         "typography.quote": '{"fontFamily":"Roboto","fontSize":16,"lineHeight":24}',
         "typography.note": '{"fontFamily":"Roboto","fontSize":14,"lineHeight":22,"fontStyle":"italic"}',
         "typography.badge": '{"fontFamily":"Red Hat Display","fontSize":16,"lineHeight":24}',
+        "typography.stat": '{"fontFamily":"Red Hat Display","fontSize":32,"lineHeight":38,"fontWeight":600,"letterSpacing":-0.32}',
         "typography.tag": '{"fontFamily":"Red Hat Display","fontSize":15,"lineHeight":20,"fontWeight":600}',
         "typography.input": '{"fontFamily":"Red Hat Display","fontSize":14,"lineHeight":24}'
       },
@@ -8872,8 +9378,22 @@ var uni_index_default = {
           ringColor: "surface",
           ringWidth: 2
         },
+        searchInput: {
+          searchSymbol: "search",
+          clearSymbol: "close",
+          listColor: "primary-surface",
+          listShadow: "menu",
+          listBorderRadius: "xs",
+          maxSuggestions: 8
+        },
         checkbox: {
-          size: 20
+          size: 20,
+          boxColor: "surface"
+        },
+        radio: {
+          size: 20,
+          ringColor: "outline",
+          fillColor: "surface"
         },
         dialog: {
           borderRadius: "lg",
@@ -8997,6 +9517,19 @@ var uni_index_default = {
           currentPageBorder: "light",
           currentPageBorderRadius: "xs"
         },
+        stat: {
+          labelTypeface: "label",
+          valueTypeface: "stat",
+          color: "surface",
+          border: "light",
+          borderRadius: "xs",
+          positiveColor: "success",
+          negativeColor: "error",
+          trendColor: "outline",
+          trendAccent: "primary",
+          padding: "md",
+          gap: "xxs"
+        },
         slider: {
           color: "primary",
           trackColor: "surface-variant",
@@ -9024,7 +9557,9 @@ var uni_index_default = {
           opticalSize: 24
         },
         toggle: {
-          size: 20
+          size: 20,
+          trackColor: "surface-variant",
+          knobColor: "surface"
         },
         tooltip: {
           borderRadius: "xs",
@@ -9169,6 +9704,7 @@ var uni_index_default = {
         "typography.quote": '{"fontFamily":"Roboto","fontSize":16,"lineHeight":24}',
         "typography.note": '{"fontFamily":"Roboto","fontSize":14,"lineHeight":22,"fontStyle":"italic"}',
         "typography.badge": '{"fontFamily":"Red Hat Display","fontSize":16,"lineHeight":24}',
+        "typography.stat": '{"fontFamily":"Red Hat Display","fontSize":32,"lineHeight":38,"fontWeight":600,"letterSpacing":-0.32}',
         "typography.tag": '{"fontFamily":"Red Hat Display","fontSize":15,"lineHeight":20,"fontWeight":600}',
         "typography.input": '{"fontFamily":"Red Hat Display","fontSize":14,"lineHeight":24}'
       },
@@ -9212,8 +9748,22 @@ var uni_index_default = {
           ringColor: "surface",
           ringWidth: 2
         },
+        searchInput: {
+          searchSymbol: "search",
+          clearSymbol: "close",
+          listColor: "primary-surface",
+          listShadow: "menu",
+          listBorderRadius: "xs",
+          maxSuggestions: 8
+        },
         checkbox: {
-          size: 20
+          size: 20,
+          boxColor: "surface"
+        },
+        radio: {
+          size: 20,
+          ringColor: "outline",
+          fillColor: "surface"
         },
         dialog: {
           borderRadius: "lg",
@@ -9337,6 +9887,19 @@ var uni_index_default = {
           currentPageBorder: "light",
           currentPageBorderRadius: "xs"
         },
+        stat: {
+          labelTypeface: "label",
+          valueTypeface: "stat",
+          color: "surface",
+          border: "light",
+          borderRadius: "xs",
+          positiveColor: "success",
+          negativeColor: "error",
+          trendColor: "outline",
+          trendAccent: "primary",
+          padding: "md",
+          gap: "xxs"
+        },
         slider: {
           color: "primary",
           trackColor: "surface-variant",
@@ -9364,7 +9927,9 @@ var uni_index_default = {
           opticalSize: 24
         },
         toggle: {
-          size: 20
+          size: 20,
+          trackColor: "surface-variant",
+          knobColor: "surface"
         },
         tooltip: {
           borderRadius: "xs",
@@ -10101,6 +10666,19 @@ var generateShadows = (colors, mode = "light") => {
     warn: `0 0 5px ${rgba(error, 0.5)}, inset 0 0 5px ${rgba(error, 0.3)}`
   };
 };
+var BaseIcons = {
+  alertCircle: "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M0 0h24v24H0V0z' fill='none'/%3e%3cpath d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3e%3c/svg%3e",
+  calendar: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'%3E%3C/path%3E%3C/svg%3E",
+  checkCircle: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg%3E%3Cpath d='M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm2.0873,41.5-5.4107,5.4106-.02.02L14.1751,32.4492l5.4306-5.4306,9.051,9.0509L46.2861,18.44l5.4305,5.4306Z'/%3E%3C/g%3E%3C/svg%3E",
+  chevronUp: "data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m296-345-56-56 240-240 240 240-56 56-184-184-184 184Z'/%3E%3C/svg%3E",
+  chevronDown: "data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E",
+  chevronLeft: "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z'/%3E%3C/svg%3E",
+  chevronRight: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E",
+  xCircle: "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3e%3cg%3e%3cpath d='M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM47.4649,42.3543l-5.4306,5.43L31.68,37.4305,21.3257,47.7848l-5.4306-5.43L26.25,32,15.8951,21.6456l5.4306-5.4305L31.68,26.5694,42.0343,16.2151l5.4306,5.4305L37.1106,32Z'/%3e%3c/g%3e%3c/svg%3e",
+  search: "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3e%3cg%3e%3cpath d='M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e",
+  close: "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cg%3e%3cpath fill='currentColor' d='M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e",
+  spinner: "data:image/svg+xml;charset=UTF-8,%3csvg stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3e%3cstyle%3e .oui_spinner %7b transform-origin: center; animation: rotate_360 2s linear infinite;%7d .oui_spinner circle %7b stroke-linecap: round; animation: dash 1.5s ease-in-out infinite;%7d %40keyframes rotate_360 %7b 100%25 %7b transform: rotate(360deg);%7d %7d %40keyframes dash %7b 0%25 %7b stroke-dasharray: 0 150; stroke-dashoffset: 0;%7d 47.5%25 %7b stroke-dasharray: 42 150; stroke-dashoffset: -16;%7d 95%25, 100%25 %7b stroke-dasharray: 42 150; stroke-dashoffset: -59;%7d %7d %3c/style%3e%3cg class='oui_spinner'%3e%3ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3e%3c/circle%3e%3c/g%3e%3c/svg%3e "
+};
 var BaseTypography = {
   "display-large": {
     fontFamily: "Red Hat Display",
@@ -10238,6 +10816,13 @@ var BaseTypography = {
     fontSize: 16,
     lineHeight: 24
   },
+  stat: {
+    fontFamily: "Red Hat Display",
+    fontSize: 32,
+    lineHeight: 38,
+    fontWeight: 600,
+    letterSpacing: -0.32
+  },
   tag: {
     fontFamily: "Red Hat Display",
     fontSize: 15,
@@ -10381,7 +10966,23 @@ var buildComponents = (c) => ({
     ringColor: "surface",
     ringWidth: 2
   } },
-  checkbox: { options: { size: 20 } },
+  searchInput: { options: {
+    searchSymbol: "search",
+    clearSymbol: "close",
+    listColor: "primary-surface",
+    listShadow: "menu",
+    listBorderRadius: "xs",
+    maxSuggestions: 8
+  } },
+  checkbox: { options: {
+    size: 20,
+    boxColor: "surface"
+  } },
+  radio: { options: {
+    size: 20,
+    ringColor: "outline",
+    fillColor: "surface"
+  } },
   dialog: { options: {
     borderRadius: "lg",
     color: "primary-surface",
@@ -10706,6 +11307,19 @@ var buildComponents = (c) => ({
     currentPageBorder: "light",
     currentPageBorderRadius: "xs"
   } },
+  stat: { options: {
+    labelTypeface: "label",
+    valueTypeface: "stat",
+    color: "surface",
+    border: "light",
+    borderRadius: "xs",
+    positiveColor: "success",
+    negativeColor: "error",
+    trendColor: "outline",
+    trendAccent: "primary",
+    padding: "md",
+    gap: "xxs"
+  } },
   slider: { options: {
     color: "primary",
     trackColor: "surface-variant",
@@ -10732,7 +11346,11 @@ var buildComponents = (c) => ({
     grade: 0,
     opticalSize: 24
   } },
-  toggle: { options: { size: 20 } },
+  toggle: { options: {
+    size: 20,
+    trackColor: "surface-variant",
+    knobColor: "surface"
+  } },
   tooltip: { options: {
     border: void 0,
     borderRadius: "xs",
@@ -10758,7 +11376,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
   shadows,
   spacing: BaseSpacing,
   thicknesses: BaseThicknesses,
-  icons,
+  icons: {
+    ...BaseIcons,
+    ...icons
+  },
   components: deepMerge(buildComponents(colors), components)
 });
 var BASE_PALETTE_CONFIG = {
@@ -10900,6 +11521,7 @@ var themeExport = (exportName, displayName, colorsConst, shadowsConst, radii) =>
   `  borders: borders(${colorsConst}),`,
   `  components: components(${colorsConst}),`,
   `  shadows: ${shadowsConst},`,
+  "  icons,",
   ...radii ? ["  radii,"] : [],
   "});"
 ].join("\n");
@@ -10945,6 +11567,7 @@ var emitThemeFile = (input) => {
       "  type Borders,",
       "  type Colors,",
       "  type ComponentThemes,",
+      "  type Icons,",
       "  type Shadows,",
       "  type UniTheme,",
       "} from '@uni-design-system/uni-core';",
@@ -10968,6 +11591,15 @@ ${recordLiteral(shadows, "  ")}
       " */",
       "const components = (colors: Colors): ComponentThemes => ({});",
       "",
+      "/**",
+      " * Icon primitives, merged over the built-in set (close, search, spinner,",
+      " * chevrons, \u2026). Define an icon ONCE here as an inline SVG data URI \u2014 it is",
+      " * masked with currentColor, so it recolors with the theme \u2014 and render it",
+      " * anywhere via `<uni-icon name='\u2026'/>`. Never inline SVG in components.",
+      ` * Example: logo: "data:image/svg+xml,%3Csvg xmlns='\u2026' viewBox='0 0 24 24'%3E\u2026%3C/svg%3E",`,
+      " */",
+      "const icons: Icons = {};",
+      "",
       ...radii ? [
         `/** Shape language: '${input.shape}'. */`,
         `const radii = {
@@ -11139,6 +11771,10 @@ ${failing.map((f) => `- ${f.mode} \`${f.foreground}\` on \`${f.background}\`: ${
     "- **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'] } } }`.",
+    "- **Icons**: never inline SVG in components. Define an icon ONCE in the theme file's",
+    "  `icons` map as an inline SVG data URI \u2014 it is masked with `currentColor`, so it",
+    "  recolors with the theme \u2014 then render it anywhere with `<uni-icon name='\u2026'/>`.",
+    "  A built-in set (close, search, spinner, chevrons, \u2026) ships with every theme.",
     "- Never hardcode hex values in application components: style through `ThemeService`",
     "  accessors and semantic token names so themes stay swappable."
   ].join("\n");
@@ -11348,4 +11984,4 @@ export {
   meta,
   createUniServer
 };
-//# sourceMappingURL=chunk-E34OHB3Z.js.map
+//# sourceMappingURL=chunk-VQE52XFX.js.map