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

package/dist/{chunk-E34OHB3Z.js → chunk-WCJS2FYS.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.1",
+    builtAt: "2026-07-24T15:08:54.365Z",
     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.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-alert, Alert",
+          selectorOrTag: "uni-alert",
           api: [
             {
               name: "show",
@@ -78,11 +78,11 @@ 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: {
-        whenToUse: "",
+        whenToUse: "The Alert is used to communicate a state that affects a system, feature or page.\nFor instance, alerts can be used to display errors or any unexpected results from a user's action.",
         dos: [],
         donts: [],
         accessibility: []
@@ -101,11 +101,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-app-bar, AppBar",
+          selectorOrTag: "uni-app-bar",
           api: [
             {
               name: "title",
@@ -141,10 +141,13 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Horizontal application bar for the top of a page or section. Project controls with the\n`leading` attribute (menu button, logo) and actions with `trailing` (pushed to the far\nedge); pass `title` or project your own center content. Surface color, height, the\ndivider rule, title typography and spacing all resolve from the theme's `appBar`\noptions, and `sticky` pins the bar to the top of its scroll container.\nPlace it inside your page's `<header>` landmark. It pairs with the Drawer \u2014 see the\nDrawer docs for the full dashboard-shell recipe.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "The bar is a styled container, not a landmark \u2014 place it inside your page's `<header>` element.",
+          "Give leading/trailing icon buttons text content or `ariaLabel` so they announce."
+        ]
       },
       relatedTokens: []
     },
@@ -155,11 +158,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-avatar, Avatar",
+          selectorOrTag: "uni-avatar",
           api: [
             {
               name: "src",
@@ -190,7 +193,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,19 +207,22 @@ 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: {
-        whenToUse: "",
+        whenToUse: "Identity avatar with a graceful fallback chain: the image when it loads, initials\nderived from `name` when it doesn't (or was never given), and a themed symbol as the\nlast resort. The name doubles as the accessible label; avatars with no name are marked\ndecorative automatically.\nVariants color initials from the role's container tokens, so avatars follow the brand\npalette in light and dark. The corner radius is the theme's `avatar.options.borderRadius`\ntoken \u2014 circles by default, squares under a `sharp` shape language.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          'With a `name`, the avatar is `role="img"` labelled by that name; purely decorative avatars are `aria-hidden`.',
+          'The group is a `role="group"`; the "+N" chip reads as text.'
+        ]
       },
       relatedTokens: [
         "avatar.behavior.borderRadius",
@@ -231,11 +237,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-avatar-group, AvatarGroup",
+          selectorOrTag: "uni-avatar-group",
           api: [
             {
               name: "max",
@@ -264,11 +270,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-background, Background",
+          selectorOrTag: "uni-background",
           api: [
             {
               name: "image",
@@ -327,10 +333,14 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "The Background component is a flexible container that allows you to add and control background images in your application.\nIt provides various options for positioning and sizing the background image while maintaining a clean and responsive layout.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "Ensure any text overlaid on the background has sufficient contrast",
+          "Don't rely on background images to convey important information",
+          "Consider providing alternative visual styles for users who prefer reduced motion"
+        ]
       },
       relatedTokens: []
     },
@@ -341,11 +351,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "div[uni-badge], Badge",
+          selectorOrTag: "[uni-badge]",
           api: [
             {
               name: "color",
@@ -378,9 +388,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 +403,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',
@@ -406,7 +416,7 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Badges are used to highlight an item's status for quick recognition.",
         dos: [],
         donts: [],
         accessibility: []
@@ -422,7 +432,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "directives",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -446,11 +456,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       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 +664,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 +685,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,11 +801,11 @@ 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: {
-        whenToUse: "",
+        whenToUse: "Box is the base Layout component. It is highly configurable.\nEach layout component extends the Box component while providing presets to support their application.",
         dos: [],
         donts: [],
         accessibility: []
@@ -809,11 +819,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-breadcrumb, Breadcrumb",
+          selectorOrTag: "uni-breadcrumb",
           api: [
             {
               name: "items",
@@ -853,10 +863,15 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Breadcrumbs show where the current page sits in the hierarchy and give one-click\npassage back up the trail. The component renders the WAI-ARIA pattern: a labelled\n`nav` landmark wrapping an ordered list, with the last item marked as the current page\nand separators hidden from assistive tech.\nItems with `href` render as real links. For SPA routing, omit `href` and handle\n`itemClicked` \u2014 items render as link-styled buttons instead. Typography, link and\ncurrent-page colors, the separator symbol, and spacing all resolve from the theme's\n`breadcrumb` options.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "Renders the WAI-ARIA pattern: a labelled `nav` landmark wrapping an ordered list.",
+          'The last item is `aria-current="page"` and not a link.',
+          "Separators are `aria-hidden` \u2014 screen readers hear the trail, not the chevrons.",
+          "Set `ariaLabel` when a page has more than one breadcrumb nav."
+        ]
       },
       relatedTokens: [
         "breadcrumb.behavior.typeface",
@@ -873,11 +888,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.1",
       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",
@@ -996,10 +1011,13 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Button is a clickable interactive element that triggers a response.\nYou can place text and icons inside of a button.\nButtons are often used for form submissions and to toggle elements into view.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "A real `<button>` element \u2014 native focus, Enter/Space activation, and `disabled` semantics.",
+          "`aria-busy` is set while `loading`; the spinner and symbols are decorative."
+        ]
       },
       relatedTokens: [
         "button.behavior.borderRadius",
@@ -1013,11 +1031,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-button-group, ButtonGroup",
+          selectorOrTag: "uni-button-group",
           api: []
         }
       },
@@ -1025,14 +1043,16 @@ 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: {
-        whenToUse: "",
+        whenToUse: "The `ButtonGroup` component is used to group related buttons. It applies some base styling to the nested buttons.\nIf this is not desirable, consider using the `Row` component.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "Group the related actions; each button keeps its own accessible name."
+        ]
       },
       relatedTokens: []
     },
@@ -1043,11 +1063,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-card, Card",
+          selectorOrTag: "uni-card",
           api: []
         }
       },
@@ -1056,12 +1076,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',
@@ -1072,7 +1092,7 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Content container with a themed frame: the border resolves from the **border\nprimitive named by its variant** (`borders.primary` \u2026 `borders.success`), the corner\nradius from the `card` theme options, and an optional elevation shadow. Compose with\nCard Header and Card Content for the standard anatomy \u2014 or point `options.border` at\na custom primitive to restyle every card in the theme at once.",
         dos: [],
         donts: [],
         accessibility: []
@@ -1088,11 +1108,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-card-content, CardContent",
+          selectorOrTag: "uni-card-content",
           api: []
         }
       },
@@ -1112,11 +1132,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-card-header, CardHeader",
+          selectorOrTag: "uni-card-header",
           api: [
             {
               name: "title",
@@ -1153,11 +1173,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       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,11 +1210,11 @@ 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: {
-        whenToUse: "",
+        whenToUse: "`Center` is a layout component that centers its child within itself.\n`Center` is an extension to the `Box` component and has all the `Box` attributes available to it.",
         dos: [],
         donts: [],
         accessibility: []
@@ -1208,11 +1228,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-checkbox, Checkbox",
+          selectorOrTag: "uni-checkbox",
           api: [
             {
               name: "checked",
@@ -1320,13 +1340,22 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
-        dos: [],
-        donts: [],
-        accessibility: []
+        whenToUse: 'Binary choice control for forms: check to opt in, submit to apply. It implements\n`FormCheckboxControl` for the Signal Forms `[field]` directive (or bind\n`[(checked)]` directly), exposes `aria-invalid` once touched, and supports an\n`indeterminate` model for "select all" parents \u2014 cleared automatically on the next\nuser interaction, matching native behavior.\nThe box color, check stroke (the variant\'s paired on-color), and size resolve from\nthe `checkbox` theme options.',
+        dos: [
+          "Use for choices that apply when the form is submitted"
+        ],
+        donts: [
+          "Use for instant on/off effects \u2014 that is a toggle"
+        ],
+        accessibility: [
+          'Semantic `<input type="checkbox">` + `<label>`; Space toggles.',
+          "`aria-invalid` reflects the error state once the field was touched or is dirty.",
+          'The indeterminate visual state is carried by the native `indeterminate` property, announced as "mixed".'
+        ]
       },
       relatedTokens: [
-        "checkbox.behavior.size"
+        "checkbox.behavior.size",
+        "checkbox.behavior.boxColor"
       ]
     },
     {
@@ -1336,11 +1365,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-confirmation-dialog, Confirmation",
+          selectorOrTag: "uni-confirmation-dialog",
           api: [
             {
               name: "show",
@@ -1383,7 +1412,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1420,7 +1449,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 +1466,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>
   }
@@ -1452,7 +1481,7 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: 'The Data Search input filters a `UniDatasource` as the user types. With a client-side\n`UniRecordDatasource` it applies a predicate over the record\'s fields; with a\n`UniServerSideDatasource` it sends a filter object to the data loader. Pass `fields` to\nrestrict the search to specific columns. A clear button resets the filter.\nIt pairs with the [Data Table](?path=/docs/components-data-table--docs) \u2014 see its\n"With Search" story.',
         dos: [],
         donts: [],
         accessibility: []
@@ -1466,11 +1495,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "data",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-data-table, DataTable",
+          selectorOrTag: "uni-data-table",
           api: [
             {
               name: "datasource",
@@ -1549,10 +1578,14 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Data grid for structured records: sortable column headers (Sort Header), paging\n(Paginator), field-scoped search (Data Search), row interaction, sticky columns,\nand expandable detail rows \u2014 all themed through the `dataTable` options, which\npoint at shared tokens for surfaces, borders, and typography.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          'Column headers use `scope="col"`; sortable headers are real buttons with `aria-sort` on the `<th>`.',
+          'The loading overlay is a `role="status"` region and the table is `aria-busy` while loading.',
+          "Collapsed detail rows are `inert`, out of the accessibility tree until expanded."
+        ]
       },
       relatedTokens: []
     },
@@ -1563,11 +1596,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "DebounceInput, uni-debounce-input",
+          selectorOrTag: "uni-debounce-input",
           api: [
             {
               name: "inputName",
@@ -1591,6 +1624,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 +1691,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>
@@ -1620,10 +1705,13 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "A themed text input that emits its `change` output only after the user pauses typing\n(400&nbsp;ms by default) and only when the value actually changed \u2014 a signal-based\ndebounce with no rxjs involved. The live value is exposed as the `value` signal, and\n`clear()` empties the field immediately (cancelling any pending emit).\nIt wears the shared input chrome (color, border, typeface, focus ring) via the input\nbox, and offers `pre-input` / `post-input` attribute slots for adornments plus ARIA\npassthrough inputs (`role`, `ariaExpanded`, `ariaControls`, `ariaActivedescendant`)\nso composite widgets can annotate the real input element.\nUsed by the [Search Input](?path=/docs/components-forms-search-input--docs), which\nprojects its magnifier and clear button through the slots and drives the combobox\nARIA through the passthroughs.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "Set `label` \u2014 it becomes the accessible name (`aria-label`) of the inner input.",
+          "The ARIA passthrough inputs (`role`, `ariaExpanded`, `ariaControls`,"
+        ]
       },
       relatedTokens: []
     },
@@ -1634,11 +1722,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "dialog[uni-dialog], Dialog",
+          selectorOrTag: "dialog[uni-dialog]",
           api: [
             {
               name: "show",
@@ -1683,14 +1771,18 @@ 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: {
-        whenToUse: "",
+        whenToUse: "Enhanced modal dialog that extends the native HTML `<dialog>` element with built-in animations, composition components, and accessibility features.\n### Features\n- **Native HTML Dialog**: Built on the standard dialog element with full semantic support\n- **Smooth Animations**: Automatic fade transitions for open/close states\n- **Composition Components**: Optional `DialogHeader` and `DialogButtons` for consistent layouts\n- **Programmatic Control**: Open/close methods plus show property binding\n- **Backdrop Handling**: Click-outside-to-close with customizable behavior\n- **Accessibility**: Full keyboard navigation, focus trapping, and screen reader support",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "Focus trapping and keyboard navigation (Tab, Escape, Enter)",
+          "Screen reader announcements",
+          "Semantic dialog roles"
+        ]
       },
       relatedTokens: [
         "dialog.behavior.borderRadius",
@@ -1708,11 +1800,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.1",
       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 +1885,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "div[uni-dialog-header], DialogHeader",
+          selectorOrTag: "[uni-dialog-header]",
           api: []
         }
       },
@@ -1817,11 +1909,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-divider, Divider",
+          selectorOrTag: "uni-divider",
           api: [
             {
               name: "orientation",
@@ -1847,9 +1939,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',
@@ -1859,7 +1951,7 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Dividers are used to visually separate content in a list or group.",
         dos: [],
         donts: [],
         accessibility: []
@@ -1873,7 +1965,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "directives",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1905,11 +1997,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-drawer, Drawer",
+          selectorOrTag: "uni-drawer",
           api: [
             {
               name: "open",
@@ -1950,19 +2042,23 @@ 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: {
-        whenToUse: "",
+        whenToUse: "Navigation drawer with two modes sharing one content slot:\n- **`side`** renders an in-flow `<aside>` that pushes page content \u2014 the classic\n  dashboard sidenav. Opening and closing animates its width; a divider border primitive\n  separates it from the content, and it is hidden from assistive tech while closed.\n- **`over`** renders a native `<dialog>` in the top layer: focus trapping, Escape, and\n  the scrim backdrop come from the platform, and the panel slides in from its edge\n  (`position`: `start` or `end`).\n`[(open)]` is two-way; Escape and backdrop clicks keep it in sync. Surface, width,\ndivider, elevation, padding and backdrop all resolve from the theme's `drawer` options.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "Overlay mode is a native `<dialog>`: focus is trapped by `showModal()`, Escape closes, and the backdrop click closes \u2014 all kept in sync with `[(open)]`.",
+          'Give the overlay an accessible name via `ariaLabel` (defaults to "Navigation").',
+          "A closed side drawer is `aria-hidden`, so its links leave the accessibility tree."
+        ]
       },
       relatedTokens: [
         "drawer.behavior.color",
@@ -1980,11 +2076,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-dropdown, Dropdown",
+          selectorOrTag: "uni-dropdown",
           api: [
             {
               name: "trigger",
@@ -2069,11 +2165,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-expand, Expand",
+          selectorOrTag: "uni-expand",
           api: [
             {
               name: "collapsed",
@@ -2091,14 +2187,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,
@@ -2108,10 +2204,12 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Expand is a group of components that can be used in concert to expand/collapse sections of information.\nThe Expand component is transparent in nature and can nest any element to collapse it out of view.\nThe Expand Toggle is an optional convenience element that can be used to trigger the expand/collapse animation.\nIt has been designed to work with the Card Header.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "The toggle carries `aria-expanded` and `aria-controls` for its region (wired automatically inside Expand Area)."
+        ]
       },
       relatedTokens: []
     },
@@ -2122,11 +2220,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-expand-area, ExpandArea",
+          selectorOrTag: "uni-expand-area",
           api: [
             {
               name: "title",
@@ -2166,9 +2264,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',
@@ -2179,7 +2277,7 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "The batteries-included collapsible: a themed surface with a header row, an Expand\nToggle, and a content region wired together \u2014 `aria-expanded`/`aria-controls`\nhandled automatically. For custom collapse layouts, compose the lower-level Expand\nand Expand Toggle directly.",
         dos: [],
         donts: [],
         accessibility: []
@@ -2193,11 +2291,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-expand-toggle, ExpandToggle",
+          selectorOrTag: "uni-expand-toggle",
           api: [
             {
               name: "collapsed",
@@ -2221,11 +2319,11 @@ 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: {
-        whenToUse: "",
+        whenToUse: 'The Expand Toggle is a chevron icon button that controls collapsed/expanded state. It pairs\nwith the [Expand](?path=/docs/components-expand--docs) component: bind the toggle\'s\n`collapsed` model to the Expand\'s `collapsed` input to build collapsible sections.\nThe icon rotates 180\xB0 between states and shows an "Expand"/"Collapse" tooltip.',
         dos: [],
         donts: [],
         accessibility: []
@@ -2239,7 +2337,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2348,8 +2446,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 +2465,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:
@@ -2381,10 +2479,12 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "The File Drop Zone component is used in uploading files.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          'Without a browse button, the zone itself is `role="button"` with `tabindex="0"` and Enter/Space activation.'
+        ]
       },
       relatedTokens: []
     },
@@ -2395,11 +2495,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       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 +2554,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:
@@ -2478,7 +2578,7 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Grid is a layout component used for composing elements in a grid-like pattern.\nLike tables, grid layouts align elements into columns and rows.\nHowever, grids allow for more control when spanning elements across columns and rows.",
         dos: [],
         donts: [],
         accessibility: []
@@ -2492,11 +2592,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "GridArea",
+          selectorOrTag: "[uni-grid-area-layout], [grid-area-layout]",
           api: [
             {
               name: "area",
@@ -2524,11 +2624,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-icon, Icon",
+          selectorOrTag: "uni-icon",
           api: [
             {
               name: "color",
@@ -2551,22 +2651,17 @@ 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: {
-        whenToUse: "",
+        whenToUse: "Icons are adaptive svg images. Instead of defining a size or color attributes, Icons\nwill grow to the space allotted to them and use the current color of its parent element.\nHowever, it is possible to statically set the icon color.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "Icons are decorative (`aria-hidden`) \u2014 the parent control carries the accessible name.",
+          "Icons come from the theme's `icons` map (masked with `currentColor`); unknown names render nothing."
+        ]
       },
       relatedTokens: []
     },
@@ -2577,7 +2672,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2663,10 +2758,13 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "A square, icon-only button for toolbars, bars, and tight layouts. Renders a real\n`<button>` around a symbol or icon, with ghost as the default variant so it sits\nquietly on any surface. Because there is no visible text, the accessible name comes\nfrom projected (visually hidden) text or `ariaLabel`.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "Icon-only buttons need a name: project text (rendered visually hidden) or set `ariaLabel`.",
+          "The icon/symbol itself is decorative (`aria-hidden`)."
+        ]
       },
       relatedTokens: []
     },
@@ -2677,7 +2775,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2789,10 +2887,15 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Single-line text field with the shared input chrome (themed color, border, typeface,\nfocus ring, error state). It implements `FormValueControl<string>`: bind a Signal\nForms field with `[field]`, or drive `[(value)]` directly. Errors style the field\nonly after the user has interacted (touched or dirty), and `required` syncs from\n`required()` validators automatically.\nProject adornments with the `pre-input` / `post-input` slots. For multi-line text\nuse Textarea; for search semantics use Search Input.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "`label` is required and becomes the accessible name (`aria-label`).",
+          "`aria-invalid` reflects the error state once the field was touched or is dirty.",
+          "`aria-required` mirrors the `required` state synced from validators.",
+          "Link external error text with `ariaDescribedBy`."
+        ]
       },
       relatedTokens: [
         "input.behavior.typeFace",
@@ -2817,7 +2920,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2876,7 +2979,7 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "The Input Box is the themed shell shared by all text-like form controls\n([Input](?path=/docs/components-forms-input--docs),\n[Select](?path=/docs/components-forms-select--docs), Multi Select Dropdown). It projects any\nnative `input` or `select` element, strips the platform's default styling, and applies the\n`input` component theme options: colors, border, radius, focus outline, and the error and\ndisabled states.\nUse it directly when composing a custom form control that should match the design system's\ninput styling.",
         dos: [],
         donts: [],
         accessibility: []
@@ -2890,7 +2993,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2946,7 +3049,7 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "The JSON View component provides a simple way to display JSON data in a formatted, readable manner. It renders the JSON in a textarea element, making it easy for users to view and copy the content. The component automatically formats the JSON with proper indentation for better readability.",
         dos: [],
         donts: [],
         accessibility: []
@@ -2960,11 +3063,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "Menu, uni-menu",
+          selectorOrTag: "uni-menu",
           api: [
             {
               name: "menuItems",
@@ -3004,9 +3107,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:
 {
@@ -3020,10 +3123,13 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Menus can be linked to any component, but it is recommended to use either the `text-button` or `icon-button` component.\nMenus are populated by creating an array of Menu Items (`MenuItem[]`) and binding it to the `Menu` component.\nActions are optional as the `Menu` component also emits the clicked menu item via the `menuItemClicked` output attribute.\n### Menu Item Interface\n```\nMenuItem {\n  label: string;\n  symbolName?: string;\n  action?: () => void;\n}\n```",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "Full ARIA menu pattern: arrows and Home/End move, first-letter typeahead jumps, Enter/Space activates.",
+          "ArrowDown/ArrowUp on the trigger opens onto the first/last item; focus returns to the trigger on close."
+        ]
       },
       relatedTokens: []
     },
@@ -3034,11 +3140,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       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 +3256,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-multi-select, MultiSelect",
+          selectorOrTag: "uni-multi-select",
           api: [
             {
               name: "options",
@@ -3221,10 +3327,13 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Inline multiple-choice: every option visible as a toggleable item, selection\nemitted as an array. Reach for it when the option set is small enough to show all\nat once and seeing the full set helps the choice; when space is tight or options\nare many, use Multi Select Dropdown instead.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "Options are real checkboxes in a labelled group \u2014 Space toggles, Tab moves between them.",
+          "Selection state is announced per option."
+        ]
       },
       relatedTokens: []
     },
@@ -3235,11 +3344,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-multi-select-dropdown, MultiSelectDropdown",
+          selectorOrTag: "uni-multi-select-dropdown",
           api: [
             {
               name: "value",
@@ -3352,10 +3461,14 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Multiple choice behind a compact trigger: a disclosure popover containing a search\nfield, checkbox options, and a Done action. Implements `FormValueControl` with an\narray value for Signal Forms, and shows a summarized selection in the trigger.\nThe popover surface, radius, and elevation resolve from the\n`multiSelectDropdown` theme options.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          'The trigger is a disclosure (`aria-haspopup="dialog"`, `aria-expanded`); the popover contains native focusables Tab reaches normally.',
+          "The search input is labelled; options are real checkboxes announced with their state.",
+          "Escape closes the popover and returns focus to the trigger."
+        ]
       },
       relatedTokens: []
     },
@@ -3366,7 +3479,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3435,7 +3548,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 +3576,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 +3602,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 +3630,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 +3658,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,29 +3685,34 @@ 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: {
-        whenToUse: "",
+        whenToUse: 'Attention indicator anchored to whatever it wraps \u2014 an icon button, a nav item, an\navatar. Three shapes: `dot` (something is new), `count` (how many), and `pill`\n(counts that need room); `maxCount` caps the display ("99+"). Position it on any\ncorner of the wrapped content.\nRadius and offset resolve from the `notificationBadge` theme options; the badge\nwears the active `variant` color.',
         dos: [],
-        donts: [],
-        accessibility: []
+        donts: [
+          "Convey urgency by color alone \u2014 the count/dot shape carries the signal"
+        ],
+        accessibility: [
+          'The visual badge is hidden from assistive tech; a visually-hidden text announcement carries the meaning ("3 notifications").',
+          "Provide `ariaLabel` context when the wrapped control's purpose isn't obvious from its own name."
+        ]
       },
       relatedTokens: []
     },
@@ -3605,11 +3723,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-notifications, Notifications",
+          selectorOrTag: "uni-notifications",
           api: []
         }
       },
@@ -3629,11 +3747,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "data",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-paginator, Paginator",
+          selectorOrTag: "uni-paginator",
           api: [
             {
               name: "datasource",
@@ -3680,19 +3798,22 @@ 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: {
-        whenToUse: "",
+        whenToUse: "The Paginator drives page navigation for any `UniDatasource`: first/previous/next/last\nbuttons, truncated page numbers, an editable page size, and a page jumper. Each section can\nbe toggled independently, so it can render as a full control bar or a minimal pager \u2014 the\n[Data Table](?path=/docs/components-data-table--docs) stories use one paginator in the header\nfor page size and another in the footer for page numbers.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          'A `role="navigation"` landmark; pages are real buttons with `aria-current="page"` on the active one.',
+          "The page-number input is labelled."
+        ]
       },
       relatedTokens: [
         "paginator.behavior.gap",
@@ -3711,11 +3832,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-popover, Popover",
+          selectorOrTag: "uni-popover",
           api: [
             {
               name: "placement",
@@ -3740,14 +3861,16 @@ 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: {
-        whenToUse: "",
+        whenToUse: "Popover is a non-modal dialog that floats around a trigger.\nAny type of content can be added inside a popover; however, it is most suitable for short callouts or compact actions.\n**Note:** It is important to add the `trigger` attribute to the item you want to open and be referenced to the Popover.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "The trigger carries `aria-expanded` and `aria-controls`; light-dismiss comes from the native popover."
+        ]
       },
       relatedTokens: []
     },
@@ -3758,11 +3881,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-progress-bar, ProgressBar",
+          selectorOrTag: "uni-progress-bar",
           api: [
             {
               name: "width",
@@ -3802,14 +3925,16 @@ 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: {
-        whenToUse: "",
+        whenToUse: "The progress bar is a graphical way of representing progress to completion.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          '`role="progressbar"` with `aria-valuenow`/`min`/`max`; name it with `ariaLabel`.'
+        ]
       },
       relatedTokens: []
     },
@@ -3820,11 +3945,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-progress-gauge, ProgressGauge",
+          selectorOrTag: "uni-progress-gauge",
           api: [
             {
               name: "percent",
@@ -3849,7 +3974,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,
@@ -3860,10 +3985,12 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "The progress gauge is a graphical way of representing progress to completion as well as scoring or ranking.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          '`role="progressbar"` with `aria-valuenow`/`min`/`max`; name it with `ariaLabel`. The SVG is decorative.'
+        ]
       },
       relatedTokens: []
     },
@@ -3874,11 +4001,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-radio, Radio",
+          selectorOrTag: "uni-radio",
           api: [
             {
               name: "value",
@@ -3999,12 +4126,24 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
-        dos: [],
-        donts: [],
-        accessibility: []
+        whenToUse: "Single choice among a small set of visible options. The component renders the whole\ngroup from an `options` array (`{ label, value, disabled? }`), implements\n`FormValueControl<string>` for Signal Forms, and defaults each group to a unique\n`name` so multiple groups on a page never collide.\nRing, fill, and size resolve from the `radio` theme options; the selected dot wears\nthe active `variant` color.",
+        dos: [
+          "Use for 2\u20135 mutually exclusive options that should all be visible"
+        ],
+        donts: [
+          "Use for long option lists \u2014 that is a select"
+        ],
+        accessibility: [
+          '`role="radiogroup"` labelled by the group label via `aria-labelledby`.',
+          "Native radio inputs: arrow keys move selection within the group, Tab moves out.",
+          "`aria-invalid` reflects the error state once the group was touched or is dirty."
+        ]
       },
-      relatedTokens: []
+      relatedTokens: [
+        "radio.behavior.size",
+        "radio.behavior.ringColor",
+        "radio.behavior.fillColor"
+      ]
     },
     {
       id: "ripple",
@@ -4013,7 +4152,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "directives",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4037,11 +4176,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       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 +4204,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).'
             }
           ]
         }
@@ -4078,7 +4217,7 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "`Row` is a layout component used to group elements in a horizontal arrangement and applies a uniform space between them.\n`Row` is an extension to the `Box` component and has all the `Box` attributes available to it.",
         dos: [],
         donts: [],
         accessibility: []
@@ -4092,11 +4231,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       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,11 +4360,11 @@ 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: {
-        whenToUse: "",
+        whenToUse: "A scroll container with themed, consistent scrollbars across browsers \u2014 thin\nEmotion-styled WebKit scrollbars with a `scrollbar-width`/`scrollbar-color`\nfallback. It detects scrollable state via ResizeObserver (the `scrollable` output)\nand offers `scrollToTop`/`scrollToBottom` for programmatic control.",
         dos: [],
         donts: [],
         accessibility: []
@@ -4239,17 +4378,24 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       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 +4406,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 +4435,13 @@ var uni_index_default = {
               type: "string",
               required: false,
               description: ""
+            },
+            {
+              name: "suggestionSelected",
+              kind: "output",
+              type: "string",
+              required: false,
+              description: ""
             }
           ]
         }
@@ -4281,14 +4450,35 @@ 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: {
-        whenToUse: "",
+        whenToUse: "Generic search field wearing the shared input chrome: a decorative leading magnifier,\na clear button while there's a query, and Enter to submit (`search`). `change` emits\ndebounced as the user types \u2014 use it to refresh results or the `suggestions` input.\nWith `suggestions`, the field becomes an ARIA combobox: entries render in a listbox\nunder the field, ArrowUp/Down move the highlight, Enter selects (emitting both\n`suggestionSelected` and `search`), and Escape closes the list first, then clears the\nquery. The suggestion list's surface, elevation and radius resolve from the theme's\n`searchInput` options, alongside the search/clear symbols.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "The field is an ARIA combobox: `aria-expanded`, `aria-controls`, and `aria-activedescendant` track the suggestion listbox.",
+          "ArrowUp/ArrowDown move the active option, Enter selects, Escape closes the list first and clears the query second.",
+          'The magnifier is decorative; the clear button has an accessible name ("Clear search").'
+        ]
       },
       relatedTokens: []
     },
@@ -4299,11 +4489,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-select, SelectInput",
+          selectorOrTag: "uni-select",
           api: [
             {
               name: "value",
@@ -4418,10 +4608,13 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Single choice from a list, on a native `<select>` \u2014 platform pickers on mobile,\nplatform keyboard behavior everywhere. Options are typed generically\n(`options: T[]` with `optionLabel`/`optionValue` accessors), and the component\nimplements `FormValueControl` for the Signal Forms `[field]` directive. Errors\nstyle the field only after interaction, matching Input.\nFor choosing several, use Multi Select; for type-to-filter over large sets, use\nSearch Input's type-ahead.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "Native `<select>`: platform keyboard interaction and mobile pickers for free.",
+          "`label` becomes the accessible name; `aria-invalid` reflects the touched error state."
+        ]
       },
       relatedTokens: []
     },
@@ -4432,11 +4625,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-skeleton, Skeleton",
+          selectorOrTag: "uni-skeleton",
           api: [
             {
               name: "shape",
@@ -4478,15 +4671,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,14 +4691,19 @@ 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: {
-        whenToUse: "",
+        whenToUse: "Loading placeholder that sketches the shape of incoming content: `text` renders one or\nmore lines (ending on a short line, as real copy would), `rect` stands in for media and\ncharts, `circle` for avatars. Skeletons paint with the theme's surface tokens so they\nsit naturally on any brand in both modes, and the shimmer sweep only animates for users\nwho allow motion \u2014 under `prefers-reduced-motion` it degrades to calm static blocks.\nSkeletons are `aria-hidden`; announce loading on the container (e.g. `aria-busy`)\nwhere your app knows what is actually loading.",
         dos: [],
-        donts: [],
-        accessibility: []
+        donts: [
+          "Announce individual skeletons to assistive tech \u2014 they are decorative placeholders"
+        ],
+        accessibility: [
+          "Skeletons are `aria-hidden` \u2014 announce loading on the container (e.g. `aria-busy`) where your app knows what is loading.",
+          "The shimmer respects `prefers-reduced-motion`, degrading to static blocks."
+        ]
       },
       relatedTokens: [
         "skeleton.behavior.color",
@@ -4519,11 +4721,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-slider, Slider",
+          selectorOrTag: "uni-slider",
           api: [
             {
               name: "value",
@@ -4632,10 +4834,14 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: 'Range slider for picking a number within bounds. It renders a native\n`<input type="range">`, so keyboard interaction (arrows, Home/End, Page Up/Down) and\nthe ARIA slider contract come from the platform. The same Signal Forms contract as\nInput applies \u2014 bind with the `[field]` directive or drive `[(value)]` directly.\nFill and thumb color, track color, radii and geometry resolve from the theme\'s\n`slider` options; the fill level rides a CSS custom property, so dragging never\nregenerates styles.',
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          'Native `<input type="range">`: arrows, Home/End, and Page Up/Down come from the platform, and the ARIA slider contract (valuenow/min/max) is native.',
+          "`label` is required and becomes the accessible name.",
+          "Expose the current value textually nearby and link it with `ariaDescribedBy` when the number matters."
+        ]
       },
       relatedTokens: [
         "slider.behavior.color",
@@ -4652,11 +4858,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-snackbar, Snackbar",
+          selectorOrTag: "uni-snackbar",
           api: [
             {
               name: "show",
@@ -4722,11 +4928,11 @@ 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: {
-        whenToUse: "",
+        whenToUse: "The Snackbar component is used to give feedback to users after an action has taken place.\nIt appears near the bottom center of the screen temporarily and floats above the UI to not affect the application's layout.\nA side action can be defined (e.g. undoing a process or navigating to the details of a newly created record).",
         dos: [],
         donts: [],
         accessibility: []
@@ -4744,7 +4950,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "data",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4773,9 +4979,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>
   }
@@ -4789,7 +4995,7 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "The Sort Header wraps a column heading and cycles the bound datasource's sort state\n(ascending \u2192 descending \u2192 unsorted) when clicked. An animated arrow indicates the current\nsort direction. It is used by the [Data Table](?path=/docs/components-data-table--docs)\nfor sortable columns, but can wrap any header content bound to a `UniDatasource`.",
         dos: [],
         donts: [],
         accessibility: []
@@ -4803,11 +5009,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       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 +5037,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,17 +5046,119 @@ 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: {
-        whenToUse: "",
+        whenToUse: "`Stack` is a layout component used to group elements in a vertical arrangement and applies a uniform space between them.\n`Stack` is an extension to the `Box` component and has all the `Box` attributes available to it.",
         dos: [],
         donts: [],
         accessibility: []
       },
       relatedTokens: []
     },
+    {
+      id: "stat",
+      name: "Stat",
+      status: "stable",
+      summary: "",
+      description: "",
+      category: "components",
+      version: "6.0.1",
+      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: 'The KPI tile a dashboard leads with: a muted label, a large headline value (numbers\nauto-compact \u2014 `48234` renders "48.2K"), an optional signed delta, and an optional\ndecorative sparkline.\nThe delta\'s color is decided by **direction \xD7 whether up is good**, never direction\nalone \u2014 set `upIsGood` to `false` for measures like churn, errors, or cost, and a\nfalling number correctly reads as good news. The arrow is accompanied by\nscreen-reader text ("up"/"down"), so state never relies on color alone, and `caption`\nnames the comparison period.\nFrame (surface, border primitive, radius), typography (the type scale\'s `stat` role\nfor values), delta inks (the semantic `success`/`error`), and sparkline colors all\nresolve from the theme\'s `stat` options.',
+        dos: [],
+        donts: [
+          "Rely on delta color alone \u2014 the arrow + wording carry direction for everyone"
+        ],
+        accessibility: [
+          'The delta arrow is decorative; screen readers hear "up"/"down" in words instead.',
+          "The sparkline is `aria-hidden` \u2014 the value and delta carry the information."
+        ]
+      },
+      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 +5166,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-symbol, Symbol",
+          selectorOrTag: "uni-symbol",
           api: [
             {
               name: "name",
@@ -4910,10 +5218,12 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "The Symbol Component integrates the latest [Material Symbols](https://fonts.google.com/icons?icon.platform=web&icon.style=Rounded&icon.set=Material+Symbols&query=les).\nMaterial Symbols consolidates over 3,275 glyphs (icons) in a single font file with a wide range of design variants.\nSymbols are available in three styles and four adjustable variable font styles (fill, weight, grade, and optical size).",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "Symbols are decorative (`aria-hidden`) \u2014 the parent control carries the accessible name."
+        ]
       },
       relatedTokens: [
         "symbol.behavior.fill",
@@ -4929,11 +5239,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-tab, Tab",
+          selectorOrTag: "uni-tab",
           api: [
             {
               name: "label",
@@ -4969,11 +5279,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "components",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-tabs, Tabs",
+          selectorOrTag: "uni-tabs",
           api: [
             {
               name: "selectedIndex",
@@ -4990,19 +5300,29 @@ 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: {
-        whenToUse: "",
-        dos: [],
-        donts: [],
-        accessibility: []
+        whenToUse: "Tabs organize peer views behind a single switcher. Each `uni-tab` supplies a label and\nits panel content; only the selected panel is instantiated, so heavy tab content costs\nnothing until visited.\nThe default tokens render underline tabs; a theme that sets `borderRadius: 'max'` and\nan `activeColor` gets segmented pills without any component changes.",
+        dos: [
+          "Use for peer views of the same subject (details, activity, settings)",
+          "Keep labels to one or two words"
+        ],
+        donts: [
+          "Nest tabs inside tabs",
+          "Use tabs for sequential steps \u2014 that is a stepper"
+        ],
+        accessibility: [
+          "Full WAI-ARIA tabs pattern: `tablist`/`tab`/`tabpanel` roles with wired",
+          "Arrow keys move between tabs with selection following focus, wrapping at the ends;",
+          "Roving tabindex: only the selected tab sits in the tab order; the panel itself is"
+        ]
       },
       relatedTokens: [
         "tabs.behavior.typeface",
@@ -5023,11 +5343,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "data",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "Tag, uni-tag",
+          selectorOrTag: "uni-tag",
           api: [
             {
               name: "label",
@@ -5076,7 +5396,7 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Compact label for classifying content \u2014 categories, states, filters. Tags are\ndisplay-only chips that wear the active variant's colors; for removable,\ntype-to-add chips (a future input variant), see the roadmap.",
         dos: [],
         donts: [],
         accessibility: []
@@ -5090,19 +5410,27 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.1",
       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,12 +5478,30 @@ 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: [],
-        donts: [],
-        accessibility: []
+        whenToUse: 'The typography primitive, applied as an **attribute on any element** so your HTML\nsemantics stay intact. The attribute value is the typeface \u2014\n`<h1 uni-text="display-small">` \u2014 and `[uni-text]="role()"` binds it dynamically.\nWith no value, the typeface is inferred from the host element (`h1` \u2192\n`headline-large`, `p` \u2192 `body-1-long`, `small` \u2192 `caption`, `blockquote` \u2192 `quote`,\nfalling back to `title-small`), so plain semantic markup is correctly set with zero\nconfiguration. `color` takes any theme color token; `align`, `nowrap`, `maxWidth`,\nand `ellipsis` handle common text layout.',
+        dos: [
+          "Reach for semantic elements first and let the element-aware defaults set the type"
+        ],
+        donts: [
+          'Use `span uni-text="headline-large"` where a real heading belongs'
+        ],
+        accessibility: [
+          "Text never replaces your elements \u2014 headings stay `h1`\u2013`h6`, paragraphs stay `p`,",
+          "Type is styling only: pick the element for meaning, the typeface for appearance"
+        ]
       },
       relatedTokens: []
     },
@@ -5166,7 +5512,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5276,10 +5622,13 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Multi-line text field with the same Signal Forms contract as Input \u2014 use it anywhere\nfree-form text runs past one line (comments, descriptions, feedback). It shares Input's\nthemed chrome (color, border, error state, focus outline, typeface) and adds\ntextarea-specific behavior from the theme's `textarea` options: default `rows` and the\nCSS `resize` mode. Bind it to a form with the `[field]` directive, or drive `[(value)]`\ndirectly.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          "`label` is required and becomes the accessible name (`aria-label`).",
+          "Error state is exposed as `aria-invalid` once the field was touched or is dirty; wire your error text with `ariaDescribedBy`."
+        ]
       },
       relatedTokens: [
         "textarea.behavior.rows",
@@ -5293,7 +5642,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5323,11 +5672,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-toggle, Toggle",
+          selectorOrTag: "uni-toggle",
           api: [
             {
               name: "checked",
@@ -5427,13 +5776,23 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
-        dos: [],
-        donts: [],
-        accessibility: []
+        whenToUse: "A switch-style control for turning an option on or off with immediate effect \u2014\nprefer it over a checkbox when the change applies instantly (settings, feature\nswitches) rather than as part of a submitted form. It implements\n`FormCheckboxControl`, so it binds with the Signal Forms `[field]` directive or a\ndirect `[(checked)]` model.\nTrack, knob, and size resolve from the `toggle` theme options; the checked state\nwears the active `variant` color.",
+        dos: [
+          "Use for instant on/off effects (settings, feature switches)"
+        ],
+        donts: [
+          "Use in submitted forms where nothing happens until save \u2014 that is a checkbox"
+        ],
+        accessibility: [
+          'Semantic `<input type="checkbox">` with `role="switch"`, properly associated with its label.',
+          "Space toggles; focus indicators are provided for keyboard navigation.",
+          "Screen readers announce the label and on/off state."
+        ]
       },
       relatedTokens: [
-        "toggle.behavior.size"
+        "toggle.behavior.size",
+        "toggle.behavior.trackColor",
+        "toggle.behavior.knobColor"
       ]
     },
     {
@@ -5443,11 +5802,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "5.2.0",
+      version: "6.0.1",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
-          selectorOrTag: "uni-tooltip, Tooltip",
+          selectorOrTag: "uni-tooltip",
           api: [
             {
               name: "hoverDelay",
@@ -5495,14 +5854,18 @@ 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: {
-        whenToUse: "",
+        whenToUse: "A tooltip is a brief, informative message that appears when a user interacts with an element.\nIf using a tooltip within a body of text, set the `inlineText` option to `true`.",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          '`role="tooltip"` linked to the trigger via `aria-describedby` (wired once \u2014 the bubble is always in the DOM).',
+          "Shows on keyboard focus, hides on blur and Escape; stays open while hovered (WCAG 1.4.13).",
+          'Non-focusable triggers get `tabindex="0"` so keyboard users can reach the tooltip.'
+        ]
       },
       relatedTokens: [
         "tooltip.behavior.borderRadius",
@@ -5518,11 +5881,11 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "5.2.0",
+      version: "6.0.1",
       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",
@@ -5551,7 +5914,7 @@ var uni_index_default = {
         }
       ],
       guidelines: {
-        whenToUse: "",
+        whenToUse: "Used to add space between elements and wraps automatically if there isn't enough space.",
         dos: [],
         donts: [],
         accessibility: []
@@ -6979,6 +7342,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 +7699,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 +7783,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 +8911,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 +9271,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 +9479,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 +9523,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 +9662,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 +9702,9 @@ var uni_index_default = {
           opticalSize: 24
         },
         toggle: {
-          size: 20
+          size: 20,
+          trackColor: "surface-variant",
+          knobColor: "surface"
         },
         tooltip: {
           borderRadius: "xs",
@@ -9169,6 +9849,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 +9893,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 +10032,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 +10072,9 @@ var uni_index_default = {
           opticalSize: 24
         },
         toggle: {
-          size: 20
+          size: 20,
+          trackColor: "surface-variant",
+          knobColor: "surface"
         },
         tooltip: {
           borderRadius: "xs",
@@ -10101,6 +10811,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 +10961,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 +11111,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 +11452,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 +11491,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 +11521,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 +11666,7 @@ var themeExport = (exportName, displayName, colorsConst, shadowsConst, radii) =>
   `  borders: borders(${colorsConst}),`,
   `  components: components(${colorsConst}),`,
   `  shadows: ${shadowsConst},`,
+  "  icons,",
   ...radii ? ["  radii,"] : [],
   "});"
 ].join("\n");
@@ -10945,6 +11712,7 @@ var emitThemeFile = (input) => {
       "  type Borders,",
       "  type Colors,",
       "  type ComponentThemes,",
+      "  type Icons,",
       "  type Shadows,",
       "  type UniTheme,",
       "} from '@uni-design-system/uni-core';",
@@ -10968,6 +11736,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 +11916,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 +12129,4 @@ export {
   meta,
   createUniServer
 };
-//# sourceMappingURL=chunk-E34OHB3Z.js.map
+//# sourceMappingURL=chunk-WCJS2FYS.js.map