@uni-design-system/uni-mcp 10.3.0 → 11.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,16 +7,16 @@ import { z } from "zod";
7
7
  // src/data/uni-index.json
8
8
  var uni_index_default = {
9
9
  meta: {
10
- version: "10.3.0",
11
- builtAt: "2026-09-02T01:46:25.174Z",
10
+ version: "11.0.0",
11
+ builtAt: "2026-09-07T13:37:31.297Z",
12
12
  frameworks: [
13
13
  "angular"
14
14
  ],
15
15
  counts: {
16
- components: 84,
17
- tokens: 454,
16
+ components: 85,
17
+ tokens: 482,
18
18
  themes: 2,
19
- examples: 225
19
+ examples: 233
20
20
  }
21
21
  },
22
22
  components: [
@@ -27,7 +27,7 @@ var uni_index_default = {
27
27
  summary: "",
28
28
  description: "",
29
29
  category: "feedback",
30
- version: "10.3.0",
30
+ version: "11.0.0",
31
31
  bindings: {
32
32
  angular: {
33
33
  importPath: "@uni-design-system/uni-angular",
@@ -117,7 +117,7 @@ var uni_index_default = {
117
117
  summary: "Horizontal application bar: project leading controls (menu button, logo) with the `leading` attribute, actions with `trailing` (pushed to the far edge), and either pass `title` or project custom center content.",
118
118
  description: "Horizontal application bar: project leading controls (menu button, logo) with the `leading` attribute, actions with `trailing` (pushed to the far edge), and either pass `title` or project custom center content. Surface, divider, height, typography and spacing all resolve from `appBar` tokens. Place it inside your page's `<header>` landmark.",
119
119
  category: "components",
120
- version: "10.3.0",
120
+ version: "11.0.0",
121
121
  bindings: {
122
122
  angular: {
123
123
  importPath: "@uni-design-system/uni-angular",
@@ -190,7 +190,7 @@ var uni_index_default = {
190
190
  summary: "Identity avatar with a graceful fallback chain: image \u2192 initials from `name` \u2192 themed symbol.",
191
191
  description: "Identity avatar with a graceful fallback chain: image \u2192 initials from `name` \u2192 themed symbol. Coloring, radius, typeface and sizes all resolve from `avatar` theme tokens; `variant` picks the container palette.",
192
192
  category: "components",
193
- version: "10.3.0",
193
+ version: "11.0.0",
194
194
  bindings: {
195
195
  angular: {
196
196
  importPath: "@uni-design-system/uni-angular",
@@ -275,7 +275,7 @@ var uni_index_default = {
275
275
  relatedTokens: [
276
276
  "avatar.behavior.borderRadius",
277
277
  "avatar.behavior.typeface",
278
- "avatar.behavior.fallbackSymbol"
278
+ "avatar.behavior.fallbackIcon"
279
279
  ]
280
280
  },
281
281
  {
@@ -285,7 +285,7 @@ var uni_index_default = {
285
285
  summary: "Overlapping stack of avatars.",
286
286
  description: "Overlapping stack of avatars. `max` collapses the overflow into a themed \u201C+N\u201D chip (itself a `uni-avatar`). Overlap and separator ring resolve from `avatarGroup` theme tokens.",
287
287
  category: "components",
288
- version: "10.3.0",
288
+ version: "11.0.0",
289
289
  bindings: {
290
290
  angular: {
291
291
  importPath: "@uni-design-system/uni-angular",
@@ -334,7 +334,7 @@ var uni_index_default = {
334
334
  summary: "",
335
335
  description: "",
336
336
  category: "primitives",
337
- version: "10.3.0",
337
+ version: "11.0.0",
338
338
  bindings: {
339
339
  angular: {
340
340
  importPath: "@uni-design-system/uni-angular",
@@ -415,7 +415,7 @@ var uni_index_default = {
415
415
  summary: "",
416
416
  description: "",
417
417
  category: "feedback",
418
- version: "10.3.0",
418
+ version: "11.0.0",
419
419
  bindings: {
420
420
  angular: {
421
421
  importPath: "@uni-design-system/uni-angular",
@@ -512,7 +512,7 @@ var uni_index_default = {
512
512
  summary: "",
513
513
  description: "",
514
514
  category: "directives",
515
- version: "10.3.0",
515
+ version: "11.0.0",
516
516
  bindings: {
517
517
  angular: {
518
518
  importPath: "@uni-design-system/uni-angular",
@@ -536,7 +536,7 @@ var uni_index_default = {
536
536
  summary: 'The base layout primitive, applied as an attribute to any element so semantics stay yours: `<main box-layout [grow]="1" padding="md">`.',
537
537
  description: 'The base layout primitive, applied as an attribute to any element so semantics stay yours: `<main box-layout [grow]="1" padding="md">`. It is a directive, so it composes freely \u2014 with another layout attribute (`<div stack-layout uni-text="body-1-long">`) and with a component\'s own host element (`<uni-card box-layout padding="lg">`); Angular merges the host `class` bindings rather than letting one win. Sizing convention (height/width/min/max/inset): a **number is px and needs a binding** \u2014 `[height]="420"`; a **plain attribute is a CSS length string** \u2014 `height="420px"`. Spacing/radius/color inputs take theme tokens.',
538
538
  category: "layout",
539
- version: "10.3.0",
539
+ version: "11.0.0",
540
540
  bindings: {
541
541
  angular: {
542
542
  importPath: "@uni-design-system/uni-angular",
@@ -942,7 +942,7 @@ var uni_index_default = {
942
942
  summary: 'WAI-ARIA breadcrumb: a `nav` landmark wrapping an ordered list; the last item is the current page (`aria-current="page"`), separators are decorative.',
943
943
  description: 'WAI-ARIA breadcrumb: a `nav` landmark wrapping an ordered list; the last item is the current page (`aria-current="page"`), separators are decorative. Items with `href` render as real links; without one they render as link-styled buttons emitting `itemClicked` \u2014 wire that to your router.',
944
944
  category: "components",
945
- version: "10.3.0",
945
+ version: "11.0.0",
946
946
  bindings: {
947
947
  angular: {
948
948
  importPath: "@uni-design-system/uni-angular",
@@ -1016,7 +1016,7 @@ var uni_index_default = {
1016
1016
  "breadcrumb.behavior.typeface",
1017
1017
  "breadcrumb.behavior.color",
1018
1018
  "breadcrumb.behavior.currentColor",
1019
- "breadcrumb.behavior.separatorSymbol",
1019
+ "breadcrumb.behavior.separatorIcon",
1020
1020
  "breadcrumb.behavior.gap"
1021
1021
  ]
1022
1022
  },
@@ -1027,7 +1027,7 @@ var uni_index_default = {
1027
1027
  summary: "",
1028
1028
  description: "",
1029
1029
  category: "primitives",
1030
- version: "10.3.0",
1030
+ version: "11.0.0",
1031
1031
  bindings: {
1032
1032
  angular: {
1033
1033
  importPath: "@uni-design-system/uni-angular",
@@ -1176,7 +1176,8 @@ var uni_index_default = {
1176
1176
  },
1177
1177
  relatedTokens: [
1178
1178
  "button.behavior.borderRadius",
1179
- "button.behavior.typeface"
1179
+ "button.behavior.typeface",
1180
+ "button.behavior.motion"
1180
1181
  ]
1181
1182
  },
1182
1183
  {
@@ -1186,7 +1187,7 @@ var uni_index_default = {
1186
1187
  summary: "",
1187
1188
  description: "",
1188
1189
  category: "primitives",
1189
- version: "10.3.0",
1190
+ version: "11.0.0",
1190
1191
  bindings: {
1191
1192
  angular: {
1192
1193
  importPath: "@uni-design-system/uni-angular",
@@ -1218,7 +1219,7 @@ var uni_index_default = {
1218
1219
  summary: "Inline month calendar: single-date or start\u2013end range selection, day markers (availability dots), min/max fences and disabled dates.",
1219
1220
  description: "Inline month calendar: single-date or start\u2013end range selection, day markers (availability dots), min/max fences and disabled dates. One tab stop with a roving-tabindex `role=\"grid\"`; every day is a real button named with its full date. Values are plain ISO strings (`'YYYY-MM-DD'`), never `Date` objects, so bindings are timezone-free and serializable. Selection and today colours come from the theme's `primary` role pair; geometry and glyphs come from the `calendar` theme entry.",
1220
1221
  category: "forms",
1221
- version: "10.3.0",
1222
+ version: "11.0.0",
1222
1223
  bindings: {
1223
1224
  angular: {
1224
1225
  importPath: "@uni-design-system/uni-angular",
@@ -1247,6 +1248,13 @@ var uni_index_default = {
1247
1248
  default: "false",
1248
1249
  description: ""
1249
1250
  },
1251
+ {
1252
+ name: "touch",
1253
+ kind: "output",
1254
+ type: "void",
1255
+ required: false,
1256
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
1257
+ },
1250
1258
  {
1251
1259
  name: "invalid",
1252
1260
  kind: "input",
@@ -1438,8 +1446,8 @@ var uni_index_default = {
1438
1446
  "calendar.behavior.dayBorderRadius",
1439
1447
  "calendar.behavior.typeface",
1440
1448
  "calendar.behavior.gap",
1441
- "calendar.behavior.navPrevSymbol",
1442
- "calendar.behavior.navNextSymbol",
1449
+ "calendar.behavior.navPrevIcon",
1450
+ "calendar.behavior.navNextIcon",
1443
1451
  "calendar.behavior.weekdayFormat",
1444
1452
  "calendar.behavior.showOutsideDays",
1445
1453
  "calendar.behavior.todayStyle"
@@ -1452,7 +1460,7 @@ var uni_index_default = {
1452
1460
  summary: "Anchored coach-mark panel that dims the page and cuts a spotlight hole around its target.",
1453
1461
  description: 'Anchored coach-mark panel that dims the page and cuts a spotlight hole around its target. Both the scrim and the panel are `popover="manual"` elements shown in order, so they stack deterministically in the top layer above every app z-index, and every scrim piece is CSS-anchor-positioned to the target \u2014 the hole tracks scroll/resize/layout with zero listeners. The panel is a non-modal `role="dialog"` (deliberately no `aria-modal`): focus moves into it on open, Tab runs a "duet loop" over the panel\'s focusables plus the spotlit target while it stays interactive, and on close focus returns to the pre-open element \u2014 unless the user moved into the target, where it stays. Storage-free by rule: `key` and the `dismissed` output are the "don\'t show again" hooks; persistence is the app\'s business (e.g. cdk local-storage).',
1454
1462
  category: "components",
1455
- version: "10.3.0",
1463
+ version: "11.0.0",
1456
1464
  bindings: {
1457
1465
  angular: {
1458
1466
  importPath: "@uni-design-system/uni-angular",
@@ -1655,7 +1663,7 @@ var uni_index_default = {
1655
1663
  "callout.behavior.padding",
1656
1664
  "callout.behavior.headerTypeface",
1657
1665
  "callout.behavior.typeface",
1658
- "callout.behavior.closeSymbol",
1666
+ "callout.behavior.closeIcon",
1659
1667
  "callout.behavior.arrowSize",
1660
1668
  "callout.behavior.offset",
1661
1669
  "callout.behavior.scrimColor",
@@ -1672,7 +1680,7 @@ var uni_index_default = {
1672
1680
  summary: "",
1673
1681
  description: "",
1674
1682
  category: "layout",
1675
- version: "10.3.0",
1683
+ version: "11.0.0",
1676
1684
  bindings: {
1677
1685
  angular: {
1678
1686
  importPath: "@uni-design-system/uni-angular",
@@ -1734,7 +1742,7 @@ var uni_index_default = {
1734
1742
  summary: "",
1735
1743
  description: "",
1736
1744
  category: "layout",
1737
- version: "10.3.0",
1745
+ version: "11.0.0",
1738
1746
  bindings: {
1739
1747
  angular: {
1740
1748
  importPath: "@uni-design-system/uni-angular",
@@ -1775,7 +1783,7 @@ var uni_index_default = {
1775
1783
  summary: "",
1776
1784
  description: "",
1777
1785
  category: "layout",
1778
- version: "10.3.0",
1786
+ version: "11.0.0",
1779
1787
  bindings: {
1780
1788
  angular: {
1781
1789
  importPath: "@uni-design-system/uni-angular",
@@ -1832,7 +1840,7 @@ var uni_index_default = {
1832
1840
  summary: "",
1833
1841
  description: "",
1834
1842
  category: "layout",
1835
- version: "10.3.0",
1843
+ version: "11.0.0",
1836
1844
  bindings: {
1837
1845
  angular: {
1838
1846
  importPath: "@uni-design-system/uni-angular",
@@ -1887,7 +1895,7 @@ var uni_index_default = {
1887
1895
  summary: "",
1888
1896
  description: "",
1889
1897
  category: "forms",
1890
- version: "10.3.0",
1898
+ version: "11.0.0",
1891
1899
  bindings: {
1892
1900
  angular: {
1893
1901
  importPath: "@uni-design-system/uni-angular",
@@ -1917,6 +1925,13 @@ var uni_index_default = {
1917
1925
  default: "false",
1918
1926
  description: ""
1919
1927
  },
1928
+ {
1929
+ name: "touch",
1930
+ kind: "output",
1931
+ type: "void",
1932
+ required: false,
1933
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
1934
+ },
1920
1935
  {
1921
1936
  name: "invalid",
1922
1937
  kind: "input",
@@ -2050,6 +2065,7 @@ var uni_index_default = {
2050
2065
  ]
2051
2066
  },
2052
2067
  relatedTokens: [
2068
+ "checkbox.behavior.motion",
2053
2069
  "checkbox.behavior.size",
2054
2070
  "checkbox.behavior.boxColor",
2055
2071
  "checkbox.behavior.borderRadius",
@@ -2063,7 +2079,7 @@ var uni_index_default = {
2063
2079
  summary: "Form-bound, closed-set, single-select autocomplete: `FormValueControl<T | null>` over object `Options<T>`, type-to-filter, commit-on-select.",
2064
2080
  description: "Form-bound, closed-set, single-select autocomplete: `FormValueControl<T | null>` over object `Options<T>`, type-to-filter, commit-on-select. Typing produces a draft \u2014 a filter, never a value; the value changes only when an option commits, `clear()` runs, or the model is written from outside. Select semantics, not search: a real label, a chevron, no magnifier, nothing submits. For short lists with no need to type, prefer `uni-select` \u2014 the value contract is identical, so swapping is a template-only change.",
2065
2081
  category: "forms",
2066
- version: "10.3.0",
2082
+ version: "11.0.0",
2067
2083
  bindings: {
2068
2084
  angular: {
2069
2085
  importPath: "@uni-design-system/uni-angular",
@@ -2093,6 +2109,13 @@ var uni_index_default = {
2093
2109
  default: "false",
2094
2110
  description: ""
2095
2111
  },
2112
+ {
2113
+ name: "touch",
2114
+ kind: "output",
2115
+ type: "void",
2116
+ required: false,
2117
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
2118
+ },
2096
2119
  {
2097
2120
  name: "invalid",
2098
2121
  kind: "input",
@@ -2342,7 +2365,7 @@ emptyText="No countries found"
2342
2365
  summary: "",
2343
2366
  description: "",
2344
2367
  category: "feedback",
2345
- version: "10.3.0",
2368
+ version: "11.0.0",
2346
2369
  bindings: {
2347
2370
  angular: {
2348
2371
  importPath: "@uni-design-system/uni-angular",
@@ -2389,7 +2412,7 @@ emptyText="No countries found"
2389
2412
  summary: "",
2390
2413
  description: "",
2391
2414
  category: "forms",
2392
- version: "10.3.0",
2415
+ version: "11.0.0",
2393
2416
  bindings: {
2394
2417
  angular: {
2395
2418
  importPath: "@uni-design-system/uni-angular",
@@ -2488,7 +2511,7 @@ emptyText="No countries found"
2488
2511
  summary: "",
2489
2512
  description: "",
2490
2513
  category: "data",
2491
- version: "10.3.0",
2514
+ version: "11.0.0",
2492
2515
  bindings: {
2493
2516
  angular: {
2494
2517
  importPath: "@uni-design-system/uni-angular",
@@ -2728,7 +2751,7 @@ emptyText="No countries found"
2728
2751
  summary: "Date field with free-typed parsing and a popup calendar.",
2729
2752
  description: "Date field with free-typed parsing and a popup calendar. Type `aug 20`, `8/20/2026` or `2026-08-20`, or pick from the grid \u2014 the form gets the same canonical `'YYYY-MM-DD'` string either way. Parsing is `Intl`-driven (locale digit order and month names, never hardcoded); unreadable text stays in the field, flagged, with a `rejected` event. The popup is a native popover hosting the same `uni-calendar` an app could render inline.",
2730
2753
  category: "forms",
2731
- version: "10.3.0",
2754
+ version: "11.0.0",
2732
2755
  bindings: {
2733
2756
  angular: {
2734
2757
  importPath: "@uni-design-system/uni-angular",
@@ -2757,6 +2780,13 @@ emptyText="No countries found"
2757
2780
  default: "false",
2758
2781
  description: ""
2759
2782
  },
2783
+ {
2784
+ name: "touch",
2785
+ kind: "output",
2786
+ type: "void",
2787
+ required: false,
2788
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
2789
+ },
2760
2790
  {
2761
2791
  name: "invalid",
2762
2792
  kind: "input",
@@ -2952,7 +2982,7 @@ emptyText="No countries found"
2952
2982
  summary: "One field for a date and a time: a thin composer seating a uni-date-input and a uni-time-input in one input-box chrome under one label, yielding one combined `'YYYY-MM-DDTHH:mm'` value.",
2953
2983
  description: "One field for a date and a time: a thin composer seating a uni-date-input and a uni-time-input in one input-box chrome under one label, yielding one combined `'YYYY-MM-DDTHH:mm'` value. The value emits only when both parts are set \u2014 a time without a day is not an answer \u2014 and clearing the date clears it. With `slotsFor`, the time part stays disabled until a day is chosen and offers exactly that day's slots: the scheduling flow in one attribute. Two honest tab stops (it is two questions); apps needing a different arrangement compose the primitives directly.",
2954
2984
  category: "forms",
2955
- version: "10.3.0",
2985
+ version: "11.0.0",
2956
2986
  bindings: {
2957
2987
  angular: {
2958
2988
  importPath: "@uni-design-system/uni-angular",
@@ -2981,6 +3011,13 @@ emptyText="No countries found"
2981
3011
  default: "false",
2982
3012
  description: ""
2983
3013
  },
3014
+ {
3015
+ name: "touch",
3016
+ kind: "output",
3017
+ type: "void",
3018
+ required: false,
3019
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
3020
+ },
2984
3021
  {
2985
3022
  name: "invalid",
2986
3023
  kind: "input",
@@ -3138,7 +3175,7 @@ emptyText="No countries found"
3138
3175
  summary: "Text input that emits `change` only after the user pauses typing.",
3139
3176
  description: "Text input that emits `change` only after the user pauses typing. Wears the shared input chrome (themed color, border, typeface, focus ring) via `uni-input-box`; project adornments with the `pre-input` / `post-input` slots, matching `uni-input`'s convention. The ARIA passthrough inputs let a wrapping composite (e.g. SearchInput's combobox) annotate the real input element.",
3140
3177
  category: "forms",
3141
- version: "10.3.0",
3178
+ version: "11.0.0",
3142
3179
  bindings: {
3143
3180
  angular: {
3144
3181
  importPath: "@uni-design-system/uni-angular",
@@ -3283,10 +3320,10 @@ emptyText="No countries found"
3283
3320
  id: "dialog",
3284
3321
  name: "Dialog",
3285
3322
  status: "stable",
3286
- summary: "",
3287
- description: "",
3323
+ summary: "Modal dialog on the native `<dialog>` element, laid out as three rows: an optional `[dialog-header]`, the projected body, an optional `[dialog-buttons]`.",
3324
+ description: "Modal dialog on the native `<dialog>` element, laid out as three rows: an optional `[dialog-header]`, the projected body, an optional `[dialog-buttons]`. **The surface is never the scroll container.** It is a flex column that is `overflow: clip` on both axes; the header and buttons pin while only the body row scrolls. Unlike the drawer, which is deliberately viewport-tall, the dialog stays content-sized: it has no `height`, and grows until it hits `calc(100dvh - 2 x inset)` \u2014 the point at which the body starts to scroll. The theme's `padding` insets all three rows (which is what makes the default header read as a pill floating inside the surface); `bodyPadding` pads the scrolling row alone.",
3288
3325
  category: "feedback",
3289
- version: "10.3.0",
3326
+ version: "11.0.0",
3290
3327
  bindings: {
3291
3328
  angular: {
3292
3329
  importPath: "@uni-design-system/uni-angular",
@@ -3351,11 +3388,68 @@ emptyText="No countries found"
3351
3388
  {
3352
3389
  title: "Primary",
3353
3390
  framework: "angular",
3354
- 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-->'
3391
+ code: '<!-- Storybook story: Primary -->\n<button text-button (click)="dialog.open()">Open Dialog</button>\n<dialog uni-dialog #dialog>\n <header 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-->'
3392
+ },
3393
+ {
3394
+ title: "Long Content",
3395
+ framework: "angular",
3396
+ code: `<!-- Storybook story: Long Content -->
3397
+ <div box-layout padding="md">
3398
+ <span uni-text="body-1-long" display="block">
3399
+ The dialog opens over this. Close it and reopen from the button.
3400
+ </span>
3401
+ <button text-button variant="primary" size="md" (click)="show = true">Open dialog</button>
3402
+ </div>
3403
+ <dialog uni-dialog [(show)]="show">
3404
+ <header dialog-header>Edit line item</header>
3405
+ <div stack-layout gap="md" padding="md">
3406
+ <uni-input label="SKU" placeholder="WS-00000" />
3407
+ <!-- Long enough to overflow at any plausible viewport: the point of
3408
+ the story is that this scrolls while the rows above and below it
3409
+ do not. -->
3410
+ @for (n of attributes; track n) {
3411
+ <uni-input [label]="'Attribute ' + n" placeholder="Value" />
3412
+ }
3413
+ </div>
3414
+ <footer dialog-buttons confirmButtonText="Save" cancelButtonText="Cancel"></footer>
3415
+ </dialog>`
3416
+ },
3417
+ {
3418
+ title: "Shrink To Content",
3419
+ framework: "angular",
3420
+ code: '<!-- Storybook story: Shrink To Content -->\n<div box-layout padding="md">\n<button text-button variant="primary" size="md" (click)="show = true">Open dialog</button>\n</div>\n<dialog uni-dialog [(show)]="show">\n<header dialog-header>Discard changes?</header>\n<div box-layout padding="md">\n <span uni-text="body-1-long">Your edits to this line item will be lost.</span>\n</div>\n<footer dialog-buttons confirmButtonText="Discard" cancelButtonText="Keep editing"></footer>\n</dialog>'
3421
+ },
3422
+ {
3423
+ title: "Without Header",
3424
+ framework: "angular",
3425
+ code: '<!-- Storybook story: Without Header -->\n<button text-button variant="primary" (click)="show = true">Open dialog</button>\n<dialog uni-dialog [(show)]="show" ariaLabel="Keyboard shortcuts" [defaultCloseButton]="true">\n<div box-layout padding="lg" [width]="320">\n <span uni-text="body-1-long" display="block">\n Press <strong>Escape</strong> to close, or use the button in the corner.\n With no header to be labelled by, the dialog announces its\n <code>ariaLabel</code> instead.\n </span>\n</div>\n</dialog>'
3426
+ },
3427
+ {
3428
+ title: "Controlled",
3429
+ framework: "angular",
3430
+ code: `<!-- Storybook story: Controlled -->
3431
+ <div stack-layout gap="md" padding="md" alignItems="flex-start">
3432
+ <button text-button variant="primary" (click)="show = true">Open dialog</button>
3433
+ <span uni-text="body-2">Dialog reports: {{ lastEvent }}</span>
3434
+ </div>
3435
+ <dialog
3436
+ uni-dialog
3437
+ [(show)]="show"
3438
+ (showing)="lastEvent = $event ? 'open' : 'closed'"
3439
+ >
3440
+ <header dialog-header>Controlled dialog</header>
3441
+ <div box-layout padding="md" [width]="320">
3442
+ <span uni-text="body-1-long" display="block">
3443
+ Confirm and Cancel both close it, and so do Escape and a backdrop
3444
+ click \u2014 every route keeps <code>show</code> in sync.
3445
+ </span>
3446
+ </div>
3447
+ <footer dialog-buttons confirmButtonText="Save" cancelButtonText="Cancel"></footer>
3448
+ </dialog>`
3355
3449
  }
3356
3450
  ],
3357
3451
  guidelines: {
3358
- 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",
3452
+ 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- **Three-row layout**: Pinned header and action row with a scrolling body, on a surface that stays content-sized\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",
3359
3453
  dos: [],
3360
3454
  donts: [],
3361
3455
  accessibility: [
@@ -3369,8 +3463,10 @@ emptyText="No countries found"
3369
3463
  "dialog.behavior.color",
3370
3464
  "dialog.behavior.border",
3371
3465
  "dialog.behavior.padding",
3466
+ "dialog.behavior.inset",
3372
3467
  "dialog.behavior.elevation",
3373
- "dialog.behavior.backdrop"
3468
+ "dialog.behavior.backdrop",
3469
+ "dialog.behavior.motion"
3374
3470
  ]
3375
3471
  },
3376
3472
  {
@@ -3380,7 +3476,7 @@ emptyText="No countries found"
3380
3476
  summary: "",
3381
3477
  description: "",
3382
3478
  category: "feedback",
3383
- version: "10.3.0",
3479
+ version: "11.0.0",
3384
3480
  bindings: {
3385
3481
  angular: {
3386
3482
  importPath: "@uni-design-system/uni-angular",
@@ -3484,11 +3580,11 @@ emptyText="No countries found"
3484
3580
  summary: "",
3485
3581
  description: "",
3486
3582
  category: "feedback",
3487
- version: "10.3.0",
3583
+ version: "11.0.0",
3488
3584
  bindings: {
3489
3585
  angular: {
3490
3586
  importPath: "@uni-design-system/uni-angular",
3491
- selectorOrTag: "[uni-dialog-header]",
3587
+ selectorOrTag: "[uni-dialog-header], [dialog-header]",
3492
3588
  api: [
3493
3589
  {
3494
3590
  name: "variant",
@@ -3525,7 +3621,7 @@ emptyText="No countries found"
3525
3621
  summary: "",
3526
3622
  description: "",
3527
3623
  category: "layout",
3528
- version: "10.3.0",
3624
+ version: "11.0.0",
3529
3625
  bindings: {
3530
3626
  angular: {
3531
3627
  importPath: "@uni-design-system/uni-angular",
@@ -3581,7 +3677,7 @@ emptyText="No countries found"
3581
3677
  summary: "",
3582
3678
  description: "",
3583
3679
  category: "directives",
3584
- version: "10.3.0",
3680
+ version: "11.0.0",
3585
3681
  bindings: {
3586
3682
  angular: {
3587
3683
  importPath: "@uni-design-system/uni-angular",
@@ -3613,7 +3709,7 @@ emptyText="No countries found"
3613
3709
  summary: "Drawer with two modes sharing one three-row layout: - `side` \u2014 an in-flow `<aside>` that pushes content (dashboard sidenav); opening/closing animates its width, and the divider border primitive separates it from the page.",
3614
3710
  description: "Drawer with two modes sharing one three-row layout: - `side` \u2014 an in-flow `<aside>` that pushes content (dashboard sidenav); opening/closing animates its width, and the divider border primitive separates it from the page. - `over` \u2014 a native `<dialog>` in the top layer: focus trap, Escape and scrim backdrop come from the platform (same machinery as `uni-dialog`), sliding in from its edge. **The panel is never the scroll container.** It is a flex column of three rows \u2014 an optional `[uni-drawer-header]`, the projected body, an optional `[uni-drawer-buttons]` \u2014 and only the body scrolls. The panel itself is `overflow: clip` on both axes. That is what lets a header and a save bar pin while a long form scrolls between them, and it is why the theme's `padding` option lands on the body row rather than the panel: padding on a scrolling box scrolls away with its content. Surface, width, divider, elevation, padding, backdrop, scrim and background all resolve from `drawer` theme tokens.",
3615
3711
  category: "components",
3616
- version: "10.3.0",
3712
+ version: "11.0.0",
3617
3713
  bindings: {
3618
3714
  angular: {
3619
3715
  importPath: "@uni-design-system/uni-angular",
@@ -3793,7 +3889,8 @@ initialFocus="input"
3793
3889
  "drawer.behavior.padding",
3794
3890
  "drawer.behavior.backdrop",
3795
3891
  "drawer.behavior.scrim",
3796
- "drawer.behavior.background"
3892
+ "drawer.behavior.background",
3893
+ "drawer.behavior.motion"
3797
3894
  ]
3798
3895
  },
3799
3896
  {
@@ -3803,7 +3900,7 @@ initialFocus="input"
3803
3900
  summary: "The drawer's pinned footer action row \u2014 the save bar of an editor panel.",
3804
3901
  description: "The drawer's pinned footer action row \u2014 the save bar of an editor panel. Sits outside the scrolling body, so the actions stay reachable however long the form is. Mirrors `[dialog-buttons]`; the difference is posture, which lives in the `drawerButtons` theme options rather than here.",
3805
3902
  category: "primitives",
3806
- version: "10.3.0",
3903
+ version: "11.0.0",
3807
3904
  bindings: {
3808
3905
  angular: {
3809
3906
  importPath: "@uni-design-system/uni-angular",
@@ -3900,7 +3997,7 @@ initialFocus="input"
3900
3997
  summary: "The drawer's pinned header row: a title, and optionally a close button.",
3901
3998
  description: "The drawer's pinned header row: a title, and optionally a close button. Sits outside the scrolling body, so it stays put while the form beneath it moves. Reached either by projecting it \u2014 `<div uni-drawer-header>` \u2014 or implicitly, by giving `uni-drawer` a `headline`, in which case the drawer renders one of these itself.",
3902
3999
  category: "components",
3903
- version: "10.3.0",
4000
+ version: "11.0.0",
3904
4001
  bindings: {
3905
4002
  angular: {
3906
4003
  importPath: "@uni-design-system/uni-angular",
@@ -3948,7 +4045,7 @@ initialFocus="input"
3948
4045
  summary: "",
3949
4046
  description: "",
3950
4047
  category: "components",
3951
- version: "10.3.0",
4048
+ version: "11.0.0",
3952
4049
  bindings: {
3953
4050
  angular: {
3954
4051
  importPath: "@uni-design-system/uni-angular",
@@ -4082,7 +4179,7 @@ initialFocus="input"
4082
4179
  summary: "",
4083
4180
  description: "",
4084
4181
  category: "layout",
4085
- version: "10.3.0",
4182
+ version: "11.0.0",
4086
4183
  bindings: {
4087
4184
  angular: {
4088
4185
  importPath: "@uni-design-system/uni-angular",
@@ -4186,7 +4283,7 @@ initialFocus="input"
4186
4283
  summary: "",
4187
4284
  description: "",
4188
4285
  category: "layout",
4189
- version: "10.3.0",
4286
+ version: "11.0.0",
4190
4287
  bindings: {
4191
4288
  angular: {
4192
4289
  importPath: "@uni-design-system/uni-angular",
@@ -4257,7 +4354,7 @@ initialFocus="input"
4257
4354
  summary: "Trigger for a {@link UniExpandComponent} region.",
4258
4355
  description: "Trigger for a {@link UniExpandComponent} region. Two shapes, chosen by whether `label` is set: - **Icon only** (default) \u2014 the bare chevron, sized for a Card Header. - **Labelled** \u2014 chevron plus a label and optional muted sublabel, as a single full-width button. Most real disclosures need a name for the section, and building that row by hand is the thing this saves; it also makes the label the button's accessible name rather than adjacent text.",
4259
4356
  category: "layout",
4260
- version: "10.3.0",
4357
+ version: "11.0.0",
4261
4358
  bindings: {
4262
4359
  angular: {
4263
4360
  importPath: "@uni-design-system/uni-angular",
@@ -4342,7 +4439,7 @@ initialFocus="input"
4342
4439
  summary: "",
4343
4440
  description: "",
4344
4441
  category: "forms",
4345
- version: "10.3.0",
4442
+ version: "11.0.0",
4346
4443
  bindings: {
4347
4444
  angular: {
4348
4445
  importPath: "@uni-design-system/uni-angular",
@@ -4500,7 +4597,7 @@ initialFocus="input"
4500
4597
  summary: "",
4501
4598
  description: "",
4502
4599
  category: "layout",
4503
- version: "10.3.0",
4600
+ version: "11.0.0",
4504
4601
  bindings: {
4505
4602
  angular: {
4506
4603
  importPath: "@uni-design-system/uni-angular",
@@ -4597,7 +4694,7 @@ initialFocus="input"
4597
4694
  summary: "",
4598
4695
  description: "",
4599
4696
  category: "layout",
4600
- version: "10.3.0",
4697
+ version: "11.0.0",
4601
4698
  bindings: {
4602
4699
  angular: {
4603
4700
  importPath: "@uni-design-system/uni-angular",
@@ -4629,7 +4726,7 @@ initialFocus="input"
4629
4726
  summary: "",
4630
4727
  description: "",
4631
4728
  category: "primitives",
4632
- version: "10.3.0",
4729
+ version: "11.0.0",
4633
4730
  bindings: {
4634
4731
  angular: {
4635
4732
  importPath: "@uni-design-system/uni-angular",
@@ -4689,7 +4786,7 @@ initialFocus="input"
4689
4786
  summary: "",
4690
4787
  description: "",
4691
4788
  category: "primitives",
4692
- version: "10.3.0",
4789
+ version: "11.0.0",
4693
4790
  bindings: {
4694
4791
  angular: {
4695
4792
  importPath: "@uni-design-system/uni-angular",
@@ -4785,6 +4882,121 @@ initialFocus="input"
4785
4882
  },
4786
4883
  relatedTokens: []
4787
4884
  },
4885
+ {
4886
+ id: "inline-button",
4887
+ name: "InlineButton",
4888
+ status: "stable",
4889
+ summary: "A button that lives inside a sentence.",
4890
+ description: "A button that lives inside a sentence. Every other button in the library owns a box. Even `ghost` is a flex box with a hit area, horizontal padding and a type scale of its own, so dropping one into a sentence takes it out of the run of text entirely. This one inherits that type \u2014 family, size, weight, line height and colour \u2014 and adds no padding, so a paragraph reads as one continuous run with an action in the middle of it. It is always a real `<button>`: it can *look* like a link (`underline`, `link`) without claiming to be navigation, so Enter and Space activate it and assistive tech announces a button rather than an unfollowable link. A glyph may sit alongside the label without disturbing that: it is sized in `em`, so it scales with the type it lands in rather than pinning a px size into someone else's paragraph. One limit comes from the element itself. Browsers blockify a `<button>` to `inline-block` whatever `display` it asks for, so the control is an atomic inline box: its own label wraps inside it, but the run cannot split across a line break the way the words around it do. `display: contents` would buy that at the cost of the button being focusable at all, which is not a trade worth making \u2014 keep labels to a few words, which is what an inline action wants anyway.",
4891
+ category: "primitives",
4892
+ version: "11.0.0",
4893
+ bindings: {
4894
+ angular: {
4895
+ importPath: "@uni-design-system/uni-angular",
4896
+ selectorOrTag: "button[uni-inline-button], button[inline-button]",
4897
+ api: [
4898
+ {
4899
+ name: "iconName",
4900
+ kind: "input",
4901
+ type: "IconName",
4902
+ required: false,
4903
+ description: "Theme icon token rendered beside the label. Prefer this over `symbolName`."
4904
+ },
4905
+ {
4906
+ name: "symbolName",
4907
+ kind: "input",
4908
+ type: "string",
4909
+ required: false,
4910
+ description: "Material Symbols ligature, for glyphs the theme's icon set doesn't carry."
4911
+ },
4912
+ {
4913
+ name: "iconPosition",
4914
+ kind: "input",
4915
+ type: "'start' | 'end'",
4916
+ required: false,
4917
+ default: "'start'",
4918
+ description: "Which side of the label the glyph sits on."
4919
+ },
4920
+ {
4921
+ name: "link",
4922
+ kind: "input",
4923
+ type: "unknown",
4924
+ required: false,
4925
+ default: "false, { transform: booleanAttribute }",
4926
+ description: "Paint the label with the theme's link colour instead of inheriting the ink."
4927
+ },
4928
+ {
4929
+ name: "disable",
4930
+ kind: "input",
4931
+ type: "unknown",
4932
+ required: false,
4933
+ default: "false, { transform: booleanAttribute }",
4934
+ description: ""
4935
+ },
4936
+ {
4937
+ name: "variant",
4938
+ kind: "input",
4939
+ type: "Variant",
4940
+ required: false,
4941
+ default: "'primary'",
4942
+ description: "Style archetype from the theme. Inherited from BaseComponent."
4943
+ },
4944
+ {
4945
+ name: "size",
4946
+ kind: "input",
4947
+ type: "Size",
4948
+ required: false,
4949
+ default: "'lg'",
4950
+ description: "Size token from the theme. Inherited from BaseComponent. Only has an effect where the component theme defines a `sizes` block."
4951
+ }
4952
+ ]
4953
+ }
4954
+ },
4955
+ examples: [
4956
+ {
4957
+ title: "In Prose",
4958
+ framework: "angular",
4959
+ code: '<!-- Storybook story: In Prose -->\n<p uni-text="body-1-long" style="max-width: 46ch">\nYour data is processed under the terms you accepted at sign-up. You can\n<button inline-button [underline]="underline" [link]="link" [disable]="disable"\n [iconName]="iconName" [symbolName]="symbolName" [iconPosition]="iconPosition">review them</button>\nat any time, or\n<button inline-button [underline]="underline" [link]="link">export everything</button>\nas a single archive.\n</p>\n<!-- args:\n{ underline: true, link: true }\n-->'
4960
+ },
4961
+ {
4962
+ title: "Against A Ghost Button",
4963
+ framework: "angular",
4964
+ code: '<!-- Storybook story: Against A Ghost Button -->\n<div style="display: grid; gap: 16px; max-width: 46ch">\n<p uni-text="body-1-long">\n Inline button: read the <button inline-button underline>privacy policy</button> before continuing.\n</p>\n<p uni-text="body-1-long">\n Ghost button: read the <button text-button variant="ghost">privacy policy</button> before continuing.\n</p>\n</div>'
4965
+ },
4966
+ {
4967
+ title: "With A Glyph",
4968
+ framework: "angular",
4969
+ code: '<!-- Storybook story: With A Glyph -->\n<div style="display: grid; gap: 16px; max-width: 46ch">\n<p uni-text="body-1-long">\n Opens elsewhere:\n <button inline-button link underline iconName="externalLink" iconPosition="end">the full report</button>.\n</p>\n<p uni-text="caption">\n Same control at caption size:\n <button inline-button link underline iconName="externalLink" iconPosition="end">the full report</button>.\n</p>\n<p uni-text="headline-small">\n And in a headline:\n <button inline-button link underline iconName="externalLink" iconPosition="end">the full report</button>.\n</p>\n</div>'
4970
+ },
4971
+ {
4972
+ title: "Long Labels Stay Whole",
4973
+ framework: "angular",
4974
+ code: '<!-- Storybook story: Long Labels Stay Whole -->\n<div style="display: grid; gap: 16px; max-width: 20ch">\n<p uni-text="body-1-long">\n Short label: <button inline-button underline>review terms</button> whenever you like.\n</p>\n<p uni-text="body-1-long">\n Long label: <button inline-button underline>review the terms of processing</button> whenever you like.\n</p>\n</div>'
4975
+ }
4976
+ ],
4977
+ guidelines: {
4978
+ whenToUse: "An action that lives **inside a sentence**.\nEvery other button in the library owns a box. Even `ghost` is a flex box with a\nhit area, horizontal padding and its own type scale, so dropping one into a\nparagraph takes it out of the run of text and onto a line of its own. This one\nadds no box at all: it inherits the surrounding type \u2014 family, size, weight,\nline height, letter spacing and colour \u2014 and renders as part of the sentence.",
4979
+ dos: [
4980
+ "Use it for actions inside running text: opening a dialog, revealing a section, undoing the last change",
4981
+ "Keep the label to a few words, so it never has to wrap",
4982
+ "Pair `link` with `underline`, so the action is not marked by colour alone",
4983
+ "Write a label that says what the action does on its own \u2014 it is the accessible name"
4984
+ ],
4985
+ donts: [
4986
+ "Reach for it where a link belongs; if the thing goes somewhere, use an `<a>`",
4987
+ "Set a px size on the glyph \u2014 the `em` sizing is what lets one markup read correctly from caption to headline",
4988
+ "Leave it undecorated *and* turn `underlineOnHover` off, which hides the action entirely",
4989
+ "Use it as a primary action; a paragraph is not where a form's Submit lives"
4990
+ ],
4991
+ accessibility: [
4992
+ "A real `<button>`: native focus, Enter/Space activation and `disabled` semantics, so nothing has to be re-implemented with key handlers",
4993
+ "The focus ring is the library's shared ring, drawn on the control rather than on the paragraph, and `focusColor` retunes it per theme",
4994
+ "The glyph is decorative and hidden from assistive tech; the label carries the accessible name",
4995
+ "Underlining is a visual affordance only \u2014 do not rely on colour alone to mark the action"
4996
+ ]
4997
+ },
4998
+ relatedTokens: []
4999
+ },
4788
5000
  {
4789
5001
  id: "input",
4790
5002
  name: "Input",
@@ -4792,7 +5004,7 @@ initialFocus="input"
4792
5004
  summary: "",
4793
5005
  description: "",
4794
5006
  category: "forms",
4795
- version: "10.3.0",
5007
+ version: "11.0.0",
4796
5008
  bindings: {
4797
5009
  angular: {
4798
5010
  importPath: "@uni-design-system/uni-angular",
@@ -4822,6 +5034,13 @@ initialFocus="input"
4822
5034
  default: "false",
4823
5035
  description: ""
4824
5036
  },
5037
+ {
5038
+ name: "touch",
5039
+ kind: "output",
5040
+ type: "void",
5041
+ required: false,
5042
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
5043
+ },
4825
5044
  {
4826
5045
  name: "invalid",
4827
5046
  kind: "input",
@@ -4893,19 +5112,19 @@ initialFocus="input"
4893
5112
  description: ""
4894
5113
  },
4895
5114
  {
4896
- name: "min",
5115
+ name: "minAttr",
4897
5116
  kind: "input",
4898
5117
  type: "number | undefined",
4899
5118
  required: false,
4900
- default: "undefined",
5119
+ default: "undefined, { alias: 'min' }",
4901
5120
  description: ""
4902
5121
  },
4903
5122
  {
4904
- name: "max",
5123
+ name: "maxAttr",
4905
5124
  kind: "input",
4906
5125
  type: "number | undefined",
4907
5126
  required: false,
4908
- default: "undefined",
5127
+ default: "undefined, { alias: 'max' }",
4909
5128
  description: ""
4910
5129
  },
4911
5130
  {
@@ -5070,7 +5289,7 @@ initialFocus="input"
5070
5289
  summary: "",
5071
5290
  description: "",
5072
5291
  category: "forms",
5073
- version: "10.3.0",
5292
+ version: "11.0.0",
5074
5293
  bindings: {
5075
5294
  angular: {
5076
5295
  importPath: "@uni-design-system/uni-angular",
@@ -5191,7 +5410,7 @@ initialFocus="input"
5191
5410
  summary: "",
5192
5411
  description: "",
5193
5412
  category: "components",
5194
- version: "10.3.0",
5413
+ version: "11.0.0",
5195
5414
  bindings: {
5196
5415
  angular: {
5197
5416
  importPath: "@uni-design-system/uni-angular",
@@ -5261,7 +5480,7 @@ initialFocus="input"
5261
5480
  summary: "",
5262
5481
  description: "",
5263
5482
  category: "layout",
5264
- version: "10.3.0",
5483
+ version: "11.0.0",
5265
5484
  bindings: {
5266
5485
  angular: {
5267
5486
  importPath: "@uni-design-system/uni-angular",
@@ -5365,7 +5584,7 @@ initialFocus="input"
5365
5584
  summary: "",
5366
5585
  description: "",
5367
5586
  category: "layout",
5368
- version: "10.3.0",
5587
+ version: "11.0.0",
5369
5588
  bindings: {
5370
5589
  angular: {
5371
5590
  importPath: "@uni-design-system/uni-angular",
@@ -5447,7 +5666,7 @@ initialFocus="input"
5447
5666
  summary: "",
5448
5667
  description: "",
5449
5668
  category: "forms",
5450
- version: "10.3.0",
5669
+ version: "11.0.0",
5451
5670
  bindings: {
5452
5671
  angular: {
5453
5672
  importPath: "@uni-design-system/uni-angular",
@@ -5541,7 +5760,7 @@ initialFocus="input"
5541
5760
  summary: "",
5542
5761
  description: "",
5543
5762
  category: "forms",
5544
- version: "10.3.0",
5763
+ version: "11.0.0",
5545
5764
  bindings: {
5546
5765
  angular: {
5547
5766
  importPath: "@uni-design-system/uni-angular",
@@ -5571,6 +5790,13 @@ initialFocus="input"
5571
5790
  default: "false",
5572
5791
  description: ""
5573
5792
  },
5793
+ {
5794
+ name: "touch",
5795
+ kind: "output",
5796
+ type: "void",
5797
+ required: false,
5798
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
5799
+ },
5574
5800
  {
5575
5801
  name: "invalid",
5576
5802
  kind: "input",
@@ -5713,7 +5939,7 @@ initialFocus="input"
5713
5939
  summary: "",
5714
5940
  description: "",
5715
5941
  category: "feedback",
5716
- version: "10.3.0",
5942
+ version: "11.0.0",
5717
5943
  bindings: {
5718
5944
  angular: {
5719
5945
  importPath: "@uni-design-system/uni-angular",
@@ -5973,7 +6199,7 @@ initialFocus="input"
5973
6199
  summary: "",
5974
6200
  description: "",
5975
6201
  category: "feedback",
5976
- version: "10.3.0",
6202
+ version: "11.0.0",
5977
6203
  bindings: {
5978
6204
  angular: {
5979
6205
  importPath: "@uni-design-system/uni-angular",
@@ -5997,7 +6223,7 @@ initialFocus="input"
5997
6223
  summary: "Numeric field with locale-aware parsing, `Intl` formatting on commit, prefix/suffix adornments and steppers that hold to repeat.",
5998
6224
  description: 'Numeric field with locale-aware parsing, `Intl` formatting on commit, prefix/suffix adornments and steppers that hold to repeat. Not `<input type="number">`, and the first reason is a data-loss bug: per the HTML value sanitization algorithm, a number input whose text is not a valid floating-point number reports `value === \'\'`. Type `12,50` as most of Europe does, or paste `1,234.56` from a spreadsheet, and the app reads an empty field. This is `type="text"` with `role="spinbutton"`, which is the only way to keep the user\'s malformed text on screen and tell them about it. Chrome comes from `uni-input-box`, so error, disabled and focus states match every other field. All arithmetic runs on the cdk\'s exact decimal helpers.',
5999
6225
  category: "forms",
6000
- version: "10.3.0",
6226
+ version: "11.0.0",
6001
6227
  bindings: {
6002
6228
  angular: {
6003
6229
  importPath: "@uni-design-system/uni-angular",
@@ -6027,6 +6253,13 @@ initialFocus="input"
6027
6253
  default: "false",
6028
6254
  description: ""
6029
6255
  },
6256
+ {
6257
+ name: "touch",
6258
+ kind: "output",
6259
+ type: "void",
6260
+ required: false,
6261
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
6262
+ },
6030
6263
  {
6031
6264
  name: "invalid",
6032
6265
  kind: "input",
@@ -6416,7 +6649,7 @@ initialFocus="input"
6416
6649
  summary: "Two linked numeric fields in one chrome, with one `{ start, end }` value \u2014 price filters, thresholds, tolerances.",
6417
6650
  description: "Two linked numeric fields in one chrome, with one `{ start, end }` value \u2014 price filters, thresholds, tolerances. `start`/`end` deliberately match `UniDateRange`, so the library has one range vocabulary, and they avoid colliding with the `min`/`max` **inputs**, which mean the fence rather than the value. It owns its commit path rather than nesting two `uni-number-input`s, because the two behaviours the spec asks for need *different* bounds: a stepper must be fenced at the other end, while a typed commit must reach the parent un-clamped so a backwards range can be swapped instead of destroyed. A child field applies one bound pair to both. The arithmetic, parsing and formatting are still the cdk's, shared with every other numeric control.",
6418
6651
  category: "forms",
6419
- version: "10.3.0",
6652
+ version: "11.0.0",
6420
6653
  bindings: {
6421
6654
  angular: {
6422
6655
  importPath: "@uni-design-system/uni-angular",
@@ -6446,6 +6679,13 @@ initialFocus="input"
6446
6679
  default: "false",
6447
6680
  description: ""
6448
6681
  },
6682
+ {
6683
+ name: "touch",
6684
+ kind: "output",
6685
+ type: "void",
6686
+ required: false,
6687
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
6688
+ },
6449
6689
  {
6450
6690
  name: "invalid",
6451
6691
  kind: "input",
@@ -6573,17 +6813,19 @@ initialFocus="input"
6573
6813
  description: ""
6574
6814
  },
6575
6815
  {
6576
- name: "min",
6816
+ name: "minValue",
6577
6817
  kind: "input",
6578
6818
  type: "number | undefined",
6579
6819
  required: false,
6820
+ default: "undefined, { alias: 'min' }",
6580
6821
  description: ""
6581
6822
  },
6582
6823
  {
6583
- name: "max",
6824
+ name: "maxValue",
6584
6825
  kind: "input",
6585
6826
  type: "number | undefined",
6586
6827
  required: false,
6828
+ default: "undefined, { alias: 'max' }",
6587
6829
  description: ""
6588
6830
  },
6589
6831
  {
@@ -6638,17 +6880,17 @@ initialFocus="input"
6638
6880
  {
6639
6881
  title: "Primary",
6640
6882
  framework: "angular",
6641
- code: "<!-- Storybook story: Primary -->\n<!-- args:\n{\n label: 'Price range',\n currency: 'USD',\n min: 0,\n max: 5000,\n step: 10,\n value: { start: 200, end: 1500 },\n }\n-->"
6883
+ code: "<!-- Storybook story: Primary -->\n<!-- args:\n{\n label: 'Price range',\n currency: 'USD',\n minValue: 0,\n maxValue: 5000,\n step: 10,\n value: { start: 200, end: 1500 },\n }\n-->"
6642
6884
  },
6643
6885
  {
6644
6886
  title: "Price Filter",
6645
6887
  framework: "angular",
6646
- code: "<!-- Storybook story: Price Filter -->\n<!-- args:\n{\n label: 'Price range',\n currency: 'USD',\n min: 0,\n max: 5000,\n step: 10,\n value: { start: 200, end: 1500 },\n }\n-->"
6888
+ code: "<!-- Storybook story: Price Filter -->\n<!-- args:\n{\n label: 'Price range',\n currency: 'USD',\n minValue: 0,\n maxValue: 5000,\n step: 10,\n value: { start: 200, end: 1500 },\n }\n-->"
6647
6889
  },
6648
6890
  {
6649
6891
  title: "Minimum Gap",
6650
6892
  framework: "angular",
6651
- code: "<!-- Storybook story: Minimum Gap -->\n<!-- args:\n{ label: 'Temperature tolerance', suffix: '\xB0C', min: -20, max: 40, minGap: 5, value: { start: 5, end: 20 } }\n-->"
6893
+ code: "<!-- Storybook story: Minimum Gap -->\n<!-- args:\n{ label: 'Temperature tolerance', suffix: '\xB0C', minValue: -20, maxValue: 40, minGap: 5, value: { start: 5, end: 20 } }\n-->"
6652
6894
  },
6653
6895
  {
6654
6896
  title: "Open Ended",
@@ -6658,7 +6900,7 @@ initialFocus="input"
6658
6900
  {
6659
6901
  title: "Custom End Labels",
6660
6902
  framework: "angular",
6661
- code: "<!-- Storybook story: Custom End Labels -->\n<!-- args:\n{ label: 'Delivery window', suffix: ' days', startLabel: 'From', endLabel: 'To', min: 0, value: { start: 2, end: 7 } }\n-->"
6903
+ code: "<!-- Storybook story: Custom End Labels -->\n<!-- args:\n{ label: 'Delivery window', suffix: ' days', startLabel: 'From', endLabel: 'To', minValue: 0, value: { start: 2, end: 7 } }\n-->"
6662
6904
  },
6663
6905
  {
6664
6906
  title: "Disabled",
@@ -6698,7 +6940,7 @@ initialFocus="input"
6698
6940
  summary: "",
6699
6941
  description: "",
6700
6942
  category: "data",
6701
- version: "10.3.0",
6943
+ version: "11.0.0",
6702
6944
  bindings: {
6703
6945
  angular: {
6704
6946
  importPath: "@uni-design-system/uni-angular",
@@ -6799,7 +7041,7 @@ initialFocus="input"
6799
7041
  summary: "Anchored, top-layer panel on the native `popover` element \u2014 the browser owns positioning (CSS anchor positioning), stacking, and, in rich mode, light dismissal.",
6800
7042
  description: 'Anchored, top-layer panel on the native `popover` element \u2014 the browser owns positioning (CSS anchor positioning), stacking, and, in rich mode, light dismissal. Two modes share one implementation: - `rich` (default): a click-toggled disclosure. The projected `[trigger]` carries `aria-expanded`/`aria-controls`; with no trigger content the app drives `open` and no element claims controller ARIA. Focus stays on the trigger (APG disclosure) unless the panel marks an `[autofocus]` field, and returns to the trigger on close. - `tooltip`: hover/focus-triggered, `role="tooltip"` + `aria-describedby`, WCAG 1.4.13 dismissable/hoverable/persistent. Content must not contain focusable elements. Anchoring and control are separate: `anchor` re-anchors the panel to any element (or id) while the trigger keeps the disclosure semantics.',
6801
7043
  category: "layout",
6802
- version: "10.3.0",
7044
+ version: "11.0.0",
6803
7045
  bindings: {
6804
7046
  angular: {
6805
7047
  importPath: "@uni-design-system/uni-angular",
@@ -6976,7 +7218,7 @@ initialFocus="input"
6976
7218
  "popover.behavior.maxWidth",
6977
7219
  "popover.behavior.offset",
6978
7220
  "popover.behavior.arrowSize",
6979
- "popover.behavior.closeSymbol",
7221
+ "popover.behavior.closeIcon",
6980
7222
  "popover.behavior.headerTypeface",
6981
7223
  "popover.behavior.tooltipPadding",
6982
7224
  "popover.behavior.tooltipOpenDelay",
@@ -6991,7 +7233,7 @@ initialFocus="input"
6991
7233
  summary: "",
6992
7234
  description: "",
6993
7235
  category: "feedback",
6994
- version: "10.3.0",
7236
+ version: "11.0.0",
6995
7237
  bindings: {
6996
7238
  angular: {
6997
7239
  importPath: "@uni-design-system/uni-angular",
@@ -7055,7 +7297,7 @@ initialFocus="input"
7055
7297
  summary: "",
7056
7298
  description: "",
7057
7299
  category: "feedback",
7058
- version: "10.3.0",
7300
+ version: "11.0.0",
7059
7301
  bindings: {
7060
7302
  angular: {
7061
7303
  importPath: "@uni-design-system/uni-angular",
@@ -7127,7 +7369,7 @@ initialFocus="input"
7127
7369
  summary: "`\u2212 3 +` for cart lines, table cells and seat counts: the numeric core with no field chrome, no label and no room for either.",
7128
7370
  description: '`\u2212 3 +` for cart lines, table cells and seat counts: the numeric core with no field chrome, no label and no room for either. A separate component rather than a `chrome="bare"` flag on `uni-number-input`, because this control is defined by what it does *not* have \u2014 presets, affixes, expressions, four stepper layouts \u2014 and eight inputs are easier to write correctly than forty with a list of which ones to leave alone. The arithmetic, parsing and hold-to-repeat are the cdk\'s, shared with the field, so `1,200` and the keyboard map behave identically in both. The middle stays a real input by default: typing `12` beats tapping `+` eleven times. `editable=false` is for read-mostly tables.',
7129
7371
  category: "forms",
7130
- version: "10.3.0",
7372
+ version: "11.0.0",
7131
7373
  bindings: {
7132
7374
  angular: {
7133
7375
  importPath: "@uni-design-system/uni-angular",
@@ -7157,6 +7399,13 @@ initialFocus="input"
7157
7399
  default: "false",
7158
7400
  description: ""
7159
7401
  },
7402
+ {
7403
+ name: "touch",
7404
+ kind: "output",
7405
+ type: "void",
7406
+ required: false,
7407
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
7408
+ },
7160
7409
  {
7161
7410
  name: "invalid",
7162
7411
  kind: "input",
@@ -7323,7 +7572,7 @@ initialFocus="input"
7323
7572
  summary: "",
7324
7573
  description: "",
7325
7574
  category: "forms",
7326
- version: "10.3.0",
7575
+ version: "11.0.0",
7327
7576
  bindings: {
7328
7577
  angular: {
7329
7578
  importPath: "@uni-design-system/uni-angular",
@@ -7353,6 +7602,13 @@ initialFocus="input"
7353
7602
  default: "false",
7354
7603
  description: ""
7355
7604
  },
7605
+ {
7606
+ name: "touch",
7607
+ kind: "output",
7608
+ type: "void",
7609
+ required: false,
7610
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
7611
+ },
7356
7612
  {
7357
7613
  name: "invalid",
7358
7614
  kind: "input",
@@ -7514,7 +7770,7 @@ initialFocus="input"
7514
7770
  summary: "",
7515
7771
  description: "",
7516
7772
  category: "directives",
7517
- version: "10.3.0",
7773
+ version: "11.0.0",
7518
7774
  bindings: {
7519
7775
  angular: {
7520
7776
  importPath: "@uni-design-system/uni-angular",
@@ -7538,7 +7794,7 @@ initialFocus="input"
7538
7794
  summary: "",
7539
7795
  description: "",
7540
7796
  category: "layout",
7541
- version: "10.3.0",
7797
+ version: "11.0.0",
7542
7798
  bindings: {
7543
7799
  angular: {
7544
7800
  importPath: "@uni-design-system/uni-angular",
@@ -7593,7 +7849,7 @@ initialFocus="input"
7593
7849
  summary: "Native scroll area with theme-driven scrollbar styling.",
7594
7850
  description: "Native scroll area with theme-driven scrollbar styling. Scrollbars are styled entirely through Emotion-generated CSS: `::-webkit-scrollbar` rules cover Chromium/Safari, with a `scrollbar-width`/`scrollbar-color` fallback for Firefox.",
7595
7851
  category: "layout",
7596
- version: "10.3.0",
7852
+ version: "11.0.0",
7597
7853
  bindings: {
7598
7854
  angular: {
7599
7855
  importPath: "@uni-design-system/uni-angular",
@@ -7740,7 +7996,7 @@ initialFocus="input"
7740
7996
  summary: "Generic search field: shared input chrome with a leading magnifier, a clear button while there's a query, Enter to submit, and optional type-ahead \u2014 pass `suggestions` (refresh them from `change`) and the field becomes an ARIA combobox with a keyboard-navigable listbox.",
7741
7997
  description: "Generic search field: shared input chrome with a leading magnifier, a clear button while there's a query, Enter to submit, and optional type-ahead \u2014 pass `suggestions` (refresh them from `change`) and the field becomes an ARIA combobox with a keyboard-navigable listbox. Escape closes the list first, then clears the query.",
7742
7998
  category: "forms",
7743
- version: "10.3.0",
7999
+ version: "11.0.0",
7744
8000
  bindings: {
7745
8001
  angular: {
7746
8002
  importPath: "@uni-design-system/uni-angular",
@@ -7867,7 +8123,7 @@ initialFocus="input"
7867
8123
  summary: "",
7868
8124
  description: "",
7869
8125
  category: "forms",
7870
- version: "10.3.0",
8126
+ version: "11.0.0",
7871
8127
  bindings: {
7872
8128
  angular: {
7873
8129
  importPath: "@uni-design-system/uni-angular",
@@ -8024,7 +8280,11 @@ initialFocus="input"
8024
8280
  "Disabled options are rendered and announced, not hidden \u2014 removing them would"
8025
8281
  ]
8026
8282
  },
8027
- relatedTokens: []
8283
+ relatedTokens: [
8284
+ "select.behavior.toggleIcon",
8285
+ "select.behavior.toggleColor",
8286
+ "select.behavior.toggleSize"
8287
+ ]
8028
8288
  },
8029
8289
  {
8030
8290
  id: "skeleton",
@@ -8033,7 +8293,7 @@ initialFocus="input"
8033
8293
  summary: "Loading placeholder painted with surface tokens.",
8034
8294
  description: "Loading placeholder painted with surface tokens. `text` renders one or more lines (the last line shortened, as real text would be), `rect` and `circle` render fixed shapes. The shimmer only animates when the user allows motion; it degrades to static blocks under `prefers-reduced-motion`. Color and radius are theme options with per-instance overrides, because one app routinely needs several: skeletons on a card and on the page background want different tints, and a pill placeholder wants a different corner than the text bars beside it.",
8035
8295
  category: "components",
8036
- version: "10.3.0",
8296
+ version: "11.0.0",
8037
8297
  bindings: {
8038
8298
  angular: {
8039
8299
  importPath: "@uni-design-system/uni-angular",
@@ -8184,7 +8444,7 @@ initialFocus="input"
8184
8444
  summary: "Bounded numeric input by pointer, for values where the *position* is the information: volume, opacity, weightings, price filters.",
8185
8445
  description: "Bounded numeric input by pointer, for values where the *position* is the information: volume, opacity, weightings, price filters. Custom thumbs rather than `<input type=\"range\">`, which the previous version used: one native range input cannot carry two thumbs, marks or a tooltip, and a second component for the range case would mean two keyboard maps to keep in step. The step model and the keyboard map are the cdk's, shared with the numeric fields, so nothing new is learned moving between them. All arithmetic on values runs through the cdk's exact decimal helpers \u2014 stepping `0.1` never yields `0.30000000000000004`. Only pointer *positions* use floats, and they are snapped to the grid before becoming a value.",
8186
8446
  category: "forms",
8187
- version: "10.3.0",
8447
+ version: "11.0.0",
8188
8448
  bindings: {
8189
8449
  angular: {
8190
8450
  importPath: "@uni-design-system/uni-angular",
@@ -8214,6 +8474,13 @@ initialFocus="input"
8214
8474
  default: "false",
8215
8475
  description: ""
8216
8476
  },
8477
+ {
8478
+ name: "touch",
8479
+ kind: "output",
8480
+ type: "void",
8481
+ required: false,
8482
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
8483
+ },
8217
8484
  {
8218
8485
  name: "invalid",
8219
8486
  kind: "input",
@@ -8263,7 +8530,7 @@ initialFocus="input"
8263
8530
  {
8264
8531
  name: "min",
8265
8532
  kind: "input",
8266
- type: "number | undefined",
8533
+ type: "number | UniNumberRange | undefined",
8267
8534
  required: false,
8268
8535
  default: "0",
8269
8536
  description: ""
@@ -8271,7 +8538,7 @@ initialFocus="input"
8271
8538
  {
8272
8539
  name: "max",
8273
8540
  kind: "input",
8274
- type: "number | undefined",
8541
+ type: "number | UniNumberRange | undefined",
8275
8542
  required: false,
8276
8543
  default: "100",
8277
8544
  description: ""
@@ -8441,7 +8708,7 @@ initialFocus="input"
8441
8708
  "slider.behavior.tooltipTextColor",
8442
8709
  "slider.behavior.tooltipShadow",
8443
8710
  "slider.behavior.tooltipBorderRadius",
8444
- "slider.behavior.transitionMs"
8711
+ "slider.behavior.motion"
8445
8712
  ]
8446
8713
  },
8447
8714
  {
@@ -8451,7 +8718,7 @@ initialFocus="input"
8451
8718
  summary: "",
8452
8719
  description: "",
8453
8720
  category: "feedback",
8454
- version: "10.3.0",
8721
+ version: "11.0.0",
8455
8722
  bindings: {
8456
8723
  angular: {
8457
8724
  importPath: "@uni-design-system/uni-angular",
@@ -8563,7 +8830,7 @@ initialFocus="input"
8563
8830
  summary: "",
8564
8831
  description: "",
8565
8832
  category: "data",
8566
- version: "10.3.0",
8833
+ version: "11.0.0",
8567
8834
  bindings: {
8568
8835
  angular: {
8569
8836
  importPath: "@uni-design-system/uni-angular",
@@ -8622,7 +8889,7 @@ initialFocus="input"
8622
8889
  summary: "",
8623
8890
  description: "",
8624
8891
  category: "layout",
8625
- version: "10.3.0",
8892
+ version: "11.0.0",
8626
8893
  bindings: {
8627
8894
  angular: {
8628
8895
  importPath: "@uni-design-system/uni-angular",
@@ -8677,7 +8944,7 @@ initialFocus="input"
8677
8944
  summary: 'KPI stat tile: muted label, large value (numbers auto-compact: 48234 \u2192 "48.2K"), an optional delta whose ink is decided by *direction \xD7 whether up is good* (never direction alone \u2014 churn going down is good news), and an optional decorative sparkline.',
8678
8945
  description: 'KPI stat tile: muted label, large value (numbers auto-compact: 48234 \u2192 "48.2K"), an optional delta whose ink is decided by *direction \xD7 whether up is good* (never direction alone \u2014 churn going down is good news), and an optional decorative sparkline. Frame, typography and inks are all `stat` theme tokens.',
8679
8946
  category: "components",
8680
- version: "10.3.0",
8947
+ version: "11.0.0",
8681
8948
  bindings: {
8682
8949
  angular: {
8683
8950
  importPath: "@uni-design-system/uni-angular",
@@ -8795,7 +9062,7 @@ initialFocus="input"
8795
9062
  summary: "",
8796
9063
  description: "",
8797
9064
  category: "primitives",
8798
- version: "10.3.0",
9065
+ version: "11.0.0",
8799
9066
  bindings: {
8800
9067
  angular: {
8801
9068
  importPath: "@uni-design-system/uni-angular",
@@ -8884,7 +9151,7 @@ initialFocus="input"
8884
9151
  summary: "One tab inside `uni-tabs`: a label for the tablist plus projected panel content.",
8885
9152
  description: "One tab inside `uni-tabs`: a label for the tablist plus projected panel content. Content is captured in a template and only instantiated while the tab is selected, so inactive panels cost nothing.",
8886
9153
  category: "components",
8887
- version: "10.3.0",
9154
+ version: "11.0.0",
8888
9155
  bindings: {
8889
9156
  angular: {
8890
9157
  importPath: "@uni-design-system/uni-angular",
@@ -8924,7 +9191,7 @@ initialFocus="input"
8924
9191
  summary: "WAI-ARIA tabs: roving tabindex, automatic activation (arrow keys move focus and select), Home/End, disabled tabs skipped.",
8925
9192
  description: "WAI-ARIA tabs: roving tabindex, automatic activation (arrow keys move focus and select), Home/End, disabled tabs skipped. Only the selected panel is instantiated. All styling resolves from `tabs` theme option tokens.",
8926
9193
  category: "components",
8927
- version: "10.3.0",
9194
+ version: "11.0.0",
8928
9195
  bindings: {
8929
9196
  angular: {
8930
9197
  importPath: "@uni-design-system/uni-angular",
@@ -8986,6 +9253,7 @@ initialFocus="input"
8986
9253
  ]
8987
9254
  },
8988
9255
  relatedTokens: [
9256
+ "tabs.behavior.motion",
8989
9257
  "tabs.behavior.typeface",
8990
9258
  "tabs.behavior.textColor",
8991
9259
  "tabs.behavior.activeTextColor",
@@ -9004,7 +9272,7 @@ initialFocus="input"
9004
9272
  summary: "Compact chip for categories, states, filters and tokens.",
9005
9273
  description: "Compact chip for categories, states, filters and tokens. Two orthogonal style axes: `variant` picks the colour role and `tone` picks the archetype (soft / solid / outline). Both live in the theme's `tag` entry, so a theme restyles every chip in the app without touching markup. Structurally a chip is **body + trailing action as siblings**, never nested buttons: an interactive chip whose body is a `<button>` cannot contain the remove `<button>` (invalid HTML, and the inner control becomes unreachable for keyboard users). Both stay independently operable.",
9006
9274
  category: "data",
9007
- version: "10.3.0",
9275
+ version: "11.0.0",
9008
9276
  bindings: {
9009
9277
  angular: {
9010
9278
  importPath: "@uni-design-system/uni-angular",
@@ -9351,7 +9619,8 @@ initialFocus="input"
9351
9619
  "tag.behavior.typeface",
9352
9620
  "tag.behavior.gap",
9353
9621
  "tag.behavior.removeIcon",
9354
- "tag.behavior.selectedIcon"
9622
+ "tag.behavior.selectedIcon",
9623
+ "tag.behavior.motion"
9355
9624
  ]
9356
9625
  },
9357
9626
  {
@@ -9361,7 +9630,7 @@ initialFocus="input"
9361
9630
  summary: "",
9362
9631
  description: "",
9363
9632
  category: "forms",
9364
- version: "10.3.0",
9633
+ version: "11.0.0",
9365
9634
  bindings: {
9366
9635
  angular: {
9367
9636
  importPath: "@uni-design-system/uni-angular",
@@ -9391,6 +9660,13 @@ initialFocus="input"
9391
9660
  default: "false",
9392
9661
  description: ""
9393
9662
  },
9663
+ {
9664
+ name: "touch",
9665
+ kind: "output",
9666
+ type: "void",
9667
+ required: false,
9668
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
9669
+ },
9394
9670
  {
9395
9671
  name: "invalid",
9396
9672
  kind: "input",
@@ -9469,10 +9745,11 @@ initialFocus="input"
9469
9745
  description: ""
9470
9746
  },
9471
9747
  {
9472
- name: "max",
9748
+ name: "maxLength",
9473
9749
  kind: "input",
9474
- type: "number",
9750
+ type: "number | undefined",
9475
9751
  required: false,
9752
+ default: "undefined, { alias: 'max' }",
9476
9753
  description: ""
9477
9754
  },
9478
9755
  {
@@ -9650,7 +9927,7 @@ placeholder="Name or address\u2026"
9650
9927
  (query)="onQuery($event)"
9651
9928
  />
9652
9929
  <!-- args:
9653
- { max: 3, value: [{ value: 'alpha' }, { value: 'beta' }] }
9930
+ { maxLength: 3, value: [{ value: 'alpha' }, { value: 'beta' }] }
9654
9931
  -->`
9655
9932
  },
9656
9933
  {
@@ -9694,7 +9971,7 @@ placeholder="Name or address\u2026"
9694
9971
  summary: "The typography primitive, applied as an attribute to any element so semantics stay yours.",
9695
9972
  description: 'The typography primitive, applied as an attribute to any element so semantics stay yours. The attribute value is the typeface: `<h1 uni-text="display-small">`, `<span uni-text="caption">`, dynamic via `[uni-text]="role()"`. With no value, the typeface is inferred from the host element (h1 \u2192 headline-large, p \u2192 body-1-long, \u2026), falling back to `title-small`; the `typeface` input remains as an explicit override. It is a directive, so it stacks with anything else on the element \u2014 a layout attribute (`<div stack-layout uni-text="title-small">`) or a component\'s own host \u2014 rather than colliding with it.',
9696
9973
  category: "primitives",
9697
- version: "10.3.0",
9974
+ version: "11.0.0",
9698
9975
  bindings: {
9699
9976
  angular: {
9700
9977
  importPath: "@uni-design-system/uni-angular",
@@ -9796,7 +10073,7 @@ placeholder="Name or address\u2026"
9796
10073
  summary: "",
9797
10074
  description: "",
9798
10075
  category: "forms",
9799
- version: "10.3.0",
10076
+ version: "11.0.0",
9800
10077
  bindings: {
9801
10078
  angular: {
9802
10079
  importPath: "@uni-design-system/uni-angular",
@@ -9826,6 +10103,13 @@ placeholder="Name or address\u2026"
9826
10103
  default: "false",
9827
10104
  description: ""
9828
10105
  },
10106
+ {
10107
+ name: "touch",
10108
+ kind: "output",
10109
+ type: "void",
10110
+ required: false,
10111
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
10112
+ },
9829
10113
  {
9830
10114
  name: "invalid",
9831
10115
  kind: "input",
@@ -9996,7 +10280,7 @@ placeholder="Name or address\u2026"
9996
10280
  summary: "",
9997
10281
  description: "",
9998
10282
  category: "primitives",
9999
- version: "10.3.0",
10283
+ version: "11.0.0",
10000
10284
  bindings: {
10001
10285
  angular: {
10002
10286
  importPath: "@uni-design-system/uni-angular",
@@ -10026,7 +10310,7 @@ placeholder="Name or address\u2026"
10026
10310
  summary: "Drop-in switcher for the themes registered via `UNI_THEMES`: a select over `ThemeService.themeOptions` that applies the choice through `selectTheme` (so it persists across reloads like any other theme selection).",
10027
10311
  description: "Drop-in switcher for the themes registered via `UNI_THEMES`: a select over `ThemeService.themeOptions` that applies the choice through `selectTheme` (so it persists across reloads like any other theme selection).",
10028
10312
  category: "components",
10029
- version: "10.3.0",
10313
+ version: "11.0.0",
10030
10314
  bindings: {
10031
10315
  angular: {
10032
10316
  importPath: "@uni-design-system/uni-angular",
@@ -10084,7 +10368,7 @@ placeholder="Name or address\u2026"
10084
10368
  summary: "Time field: a combobox over time options \u2014 the same listbox contract as uni-search-input and uni-tag-input.",
10085
10369
  description: "Time field: a combobox over time options \u2014 the same listbox contract as uni-search-input and uni-tag-input. Type `3p`, `930` or `15:00`, or pick `3:00 PM` from the list; the form always gets 24-hour `'HH:mm'` (`hour12` affects display only). The list is assistive, not exhaustive: any parseable time commits, unless `slots` pins the choices (a slot picker) \u2014 then a typed time must match one. Unreadable or unavailable text stays in the field, flagged, with a `rejected` event.",
10086
10370
  category: "forms",
10087
- version: "10.3.0",
10371
+ version: "11.0.0",
10088
10372
  bindings: {
10089
10373
  angular: {
10090
10374
  importPath: "@uni-design-system/uni-angular",
@@ -10113,6 +10397,13 @@ placeholder="Name or address\u2026"
10113
10397
  default: "false",
10114
10398
  description: ""
10115
10399
  },
10400
+ {
10401
+ name: "touch",
10402
+ kind: "output",
10403
+ type: "void",
10404
+ required: false,
10405
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
10406
+ },
10116
10407
  {
10117
10408
  name: "invalid",
10118
10409
  kind: "input",
@@ -10292,7 +10583,7 @@ placeholder="Name or address\u2026"
10292
10583
  summary: "",
10293
10584
  description: "",
10294
10585
  category: "forms",
10295
- version: "10.3.0",
10586
+ version: "11.0.0",
10296
10587
  bindings: {
10297
10588
  angular: {
10298
10589
  importPath: "@uni-design-system/uni-angular",
@@ -10322,6 +10613,13 @@ placeholder="Name or address\u2026"
10322
10613
  default: "false",
10323
10614
  description: ""
10324
10615
  },
10616
+ {
10617
+ name: "touch",
10618
+ kind: "output",
10619
+ type: "void",
10620
+ required: false,
10621
+ description: "Angular 22 marks the bound field touched through this output; the `touched` model above is bound inward by the directive and no longer propagates back out. Emitted wherever this control already decided the user was done with it."
10622
+ },
10325
10623
  {
10326
10624
  name: "invalid",
10327
10625
  kind: "input",
@@ -10515,7 +10813,7 @@ placeholder="Name or address\u2026"
10515
10813
  summary: "",
10516
10814
  description: "",
10517
10815
  category: "feedback",
10518
- version: "10.3.0",
10816
+ version: "11.0.0",
10519
10817
  bindings: {
10520
10818
  angular: {
10521
10819
  importPath: "@uni-design-system/uni-angular",
@@ -10589,6 +10887,7 @@ placeholder="Name or address\u2026"
10589
10887
  ]
10590
10888
  },
10591
10889
  relatedTokens: [
10890
+ "tooltip.behavior.motion",
10592
10891
  "tooltip.behavior.borderRadius",
10593
10892
  "tooltip.behavior.shadow",
10594
10893
  "tooltip.behavior.color",
@@ -10602,7 +10901,7 @@ placeholder="Name or address\u2026"
10602
10901
  summary: 'A thin sequencer over one `uni-callout`: steps spotlight their targets, a footer walks Next/Back with dots-or-fraction progress, and `advanceOn` gates a step behind an interaction with its target (auto-advancing for clicks, unlocking Next otherwise \u2014 announced through one `role="status"` region).',
10603
10902
  description: 'A thin sequencer over one `uni-callout`: steps spotlight their targets, a footer walks Next/Back with dots-or-fraction progress, and `advanceOn` gates a step behind an interaction with its target (auto-advancing for clicks, unlocking Next otherwise \u2014 announced through one `role="status"` region). Escape or the close button skips the tour and reports the step. `active` is a two-way model, so a tour is deep-linkable and inspectable; steps whose declared target cannot be resolved are skipped (with a dev warning) in the direction of travel rather than erroring.',
10604
10903
  category: "components",
10605
- version: "10.3.0",
10904
+ version: "11.0.0",
10606
10905
  bindings: {
10607
10906
  angular: {
10608
10907
  importPath: "@uni-design-system/uni-angular",
@@ -10729,7 +11028,7 @@ placeholder="Name or address\u2026"
10729
11028
  summary: "",
10730
11029
  description: "",
10731
11030
  category: "layout",
10732
- version: "10.3.0",
11031
+ version: "11.0.0",
10733
11032
  bindings: {
10734
11033
  angular: {
10735
11034
  importPath: "@uni-design-system/uni-angular",
@@ -11915,6 +12214,83 @@ placeholder="Name or address\u2026"
11915
12214
  DarkTheme: "0 0 5px rgba(255, 150, 138, 0.55), inset 0 0 5px rgba(255, 150, 138, 0.35)"
11916
12215
  }
11917
12216
  },
12217
+ {
12218
+ id: "backdrop.scrim",
12219
+ value: '{"background":"rgba(255, 255, 255, 0.6)","backdropFilter":"blur(2px)"}',
12220
+ type: "backdrop",
12221
+ kind: "style",
12222
+ target: "emotion-css",
12223
+ themeValues: {
12224
+ LightTheme: '{"background":"rgba(255, 255, 255, 0.6)","backdropFilter":"blur(2px)"}',
12225
+ DarkTheme: '{"background":"rgba(255, 255, 255, 0.6)","backdropFilter":"blur(2px)"}'
12226
+ }
12227
+ },
12228
+ {
12229
+ id: "motion.popup",
12230
+ value: '{"duration":100,"easing":"linear","scale":0.8}',
12231
+ type: "motion",
12232
+ kind: "style",
12233
+ target: "emotion-css",
12234
+ themeValues: {
12235
+ LightTheme: '{"duration":100,"easing":"linear","scale":0.8}',
12236
+ DarkTheme: '{"duration":100,"easing":"linear","scale":0.8}'
12237
+ }
12238
+ },
12239
+ {
12240
+ id: "motion.panel",
12241
+ value: '{"duration":250,"easing":"ease"}',
12242
+ type: "motion",
12243
+ kind: "style",
12244
+ target: "emotion-css",
12245
+ themeValues: {
12246
+ LightTheme: '{"duration":250,"easing":"ease"}',
12247
+ DarkTheme: '{"duration":250,"easing":"ease"}'
12248
+ }
12249
+ },
12250
+ {
12251
+ id: "motion.reveal",
12252
+ value: '{"duration":350,"easing":"ease-in-out"}',
12253
+ type: "motion",
12254
+ kind: "style",
12255
+ target: "emotion-css",
12256
+ themeValues: {
12257
+ LightTheme: '{"duration":350,"easing":"ease-in-out"}',
12258
+ DarkTheme: '{"duration":350,"easing":"ease-in-out"}'
12259
+ }
12260
+ },
12261
+ {
12262
+ id: "motion.notification",
12263
+ value: '{"duration":350,"easing":"ease-in-out"}',
12264
+ type: "motion",
12265
+ kind: "style",
12266
+ target: "emotion-css",
12267
+ themeValues: {
12268
+ LightTheme: '{"duration":350,"easing":"ease-in-out"}',
12269
+ DarkTheme: '{"duration":350,"easing":"ease-in-out"}'
12270
+ }
12271
+ },
12272
+ {
12273
+ id: "motion.control",
12274
+ value: '{"duration":300,"easing":"ease"}',
12275
+ type: "motion",
12276
+ kind: "style",
12277
+ target: "emotion-css",
12278
+ themeValues: {
12279
+ LightTheme: '{"duration":300,"easing":"ease"}',
12280
+ DarkTheme: '{"duration":300,"easing":"ease"}'
12281
+ }
12282
+ },
12283
+ {
12284
+ id: "motion.snap",
12285
+ value: '{"duration":120,"easing":"ease"}',
12286
+ type: "motion",
12287
+ kind: "style",
12288
+ target: "emotion-css",
12289
+ themeValues: {
12290
+ LightTheme: '{"duration":120,"easing":"ease"}',
12291
+ DarkTheme: '{"duration":120,"easing":"ease"}'
12292
+ }
12293
+ },
11918
12294
  {
11919
12295
  id: "thickness.thin",
11920
12296
  value: 1,
@@ -12319,15 +12695,15 @@ placeholder="Name or address\u2026"
12319
12695
  }
12320
12696
  },
12321
12697
  {
12322
- id: "breadcrumb.behavior.separatorSymbol",
12323
- value: "chevron_right",
12698
+ id: "breadcrumb.behavior.separatorIcon",
12699
+ value: "chevronRight",
12324
12700
  type: "string",
12325
12701
  kind: "behavioral",
12326
12702
  target: "component-prop",
12327
12703
  appliesTo: "breadcrumb",
12328
12704
  themeValues: {
12329
- LightTheme: "chevron_right",
12330
- DarkTheme: "chevron_right"
12705
+ LightTheme: "chevronRight",
12706
+ DarkTheme: "chevronRight"
12331
12707
  }
12332
12708
  },
12333
12709
  {
@@ -12476,14 +12852,14 @@ placeholder="Name or address\u2026"
12476
12852
  },
12477
12853
  {
12478
12854
  id: "drawer.behavior.backdrop",
12479
- value: '{"background":"rgba(0, 0, 0, 0.4)"}',
12480
- type: "object",
12855
+ value: "scrim",
12856
+ type: "string",
12481
12857
  kind: "behavioral",
12482
12858
  target: "component-prop",
12483
12859
  appliesTo: "drawer",
12484
12860
  themeValues: {
12485
- LightTheme: '{"background":"rgba(0, 0, 0, 0.4)"}',
12486
- DarkTheme: '{"background":"rgba(0, 0, 0, 0.4)"}'
12861
+ LightTheme: "scrim",
12862
+ DarkTheme: "scrim"
12487
12863
  }
12488
12864
  },
12489
12865
  {
@@ -12511,10 +12887,22 @@ placeholder="Name or address\u2026"
12511
12887
  }
12512
12888
  },
12513
12889
  {
12514
- id: "drawerHeader.behavior.height",
12515
- value: 56,
12516
- type: "number",
12517
- kind: "behavioral",
12890
+ id: "drawer.behavior.motion",
12891
+ value: "panel",
12892
+ type: "string",
12893
+ kind: "behavioral",
12894
+ target: "component-prop",
12895
+ appliesTo: "drawer",
12896
+ themeValues: {
12897
+ LightTheme: "panel",
12898
+ DarkTheme: "panel"
12899
+ }
12900
+ },
12901
+ {
12902
+ id: "drawerHeader.behavior.height",
12903
+ value: 56,
12904
+ type: "number",
12905
+ kind: "behavioral",
12518
12906
  target: "component-prop",
12519
12907
  appliesTo: "drawerHeader",
12520
12908
  themeValues: {
@@ -12727,15 +13115,15 @@ placeholder="Name or address\u2026"
12727
13115
  }
12728
13116
  },
12729
13117
  {
12730
- id: "avatar.behavior.fallbackSymbol",
12731
- value: "person",
13118
+ id: "avatar.behavior.fallbackIcon",
13119
+ value: "profile",
12732
13120
  type: "string",
12733
13121
  kind: "behavioral",
12734
13122
  target: "component-prop",
12735
13123
  appliesTo: "avatar",
12736
13124
  themeValues: {
12737
- LightTheme: "person",
12738
- DarkTheme: "person"
13125
+ LightTheme: "profile",
13126
+ DarkTheme: "profile"
12739
13127
  }
12740
13128
  },
12741
13129
  {
@@ -12775,7 +13163,7 @@ placeholder="Name or address\u2026"
12775
13163
  }
12776
13164
  },
12777
13165
  {
12778
- id: "searchInput.behavior.searchSymbol",
13166
+ id: "searchInput.behavior.searchIcon",
12779
13167
  value: "search",
12780
13168
  type: "string",
12781
13169
  kind: "behavioral",
@@ -12787,7 +13175,7 @@ placeholder="Name or address\u2026"
12787
13175
  }
12788
13176
  },
12789
13177
  {
12790
- id: "searchInput.behavior.clearSymbol",
13178
+ id: "searchInput.behavior.clearIcon",
12791
13179
  value: "close",
12792
13180
  type: "string",
12793
13181
  kind: "behavioral",
@@ -12858,6 +13246,18 @@ placeholder="Name or address\u2026"
12858
13246
  DarkTheme: 8
12859
13247
  }
12860
13248
  },
13249
+ {
13250
+ id: "checkbox.behavior.motion",
13251
+ value: "control",
13252
+ type: "string",
13253
+ kind: "behavioral",
13254
+ target: "component-prop",
13255
+ appliesTo: "checkbox",
13256
+ themeValues: {
13257
+ LightTheme: "control",
13258
+ DarkTheme: "control"
13259
+ }
13260
+ },
12861
13261
  {
12862
13262
  id: "checkbox.behavior.size",
12863
13263
  value: 20,
@@ -13002,6 +13402,18 @@ placeholder="Name or address\u2026"
13002
13402
  DarkTheme: "sm"
13003
13403
  }
13004
13404
  },
13405
+ {
13406
+ id: "dialog.behavior.inset",
13407
+ value: "lg",
13408
+ type: "string",
13409
+ kind: "behavioral",
13410
+ target: "component-prop",
13411
+ appliesTo: "dialog",
13412
+ themeValues: {
13413
+ LightTheme: "lg",
13414
+ DarkTheme: "lg"
13415
+ }
13416
+ },
13005
13417
  {
13006
13418
  id: "dialog.behavior.elevation",
13007
13419
  value: "dialog",
@@ -13016,14 +13428,26 @@ placeholder="Name or address\u2026"
13016
13428
  },
13017
13429
  {
13018
13430
  id: "dialog.behavior.backdrop",
13019
- value: '{"background":"rgba(255, 255, 255, 0.6)","backdropFilter":"blur(2px)"}',
13020
- type: "object",
13431
+ value: "scrim",
13432
+ type: "string",
13021
13433
  kind: "behavioral",
13022
13434
  target: "component-prop",
13023
13435
  appliesTo: "dialog",
13024
13436
  themeValues: {
13025
- LightTheme: '{"background":"rgba(255, 255, 255, 0.6)","backdropFilter":"blur(2px)"}',
13026
- DarkTheme: '{"background":"rgba(255, 255, 255, 0.6)","backdropFilter":"blur(2px)"}'
13437
+ LightTheme: "scrim",
13438
+ DarkTheme: "scrim"
13439
+ }
13440
+ },
13441
+ {
13442
+ id: "dialog.behavior.motion",
13443
+ value: "panel",
13444
+ type: "string",
13445
+ kind: "behavioral",
13446
+ target: "component-prop",
13447
+ appliesTo: "dialog",
13448
+ themeValues: {
13449
+ LightTheme: "panel",
13450
+ DarkTheme: "panel"
13027
13451
  }
13028
13452
  },
13029
13453
  {
@@ -13218,6 +13642,126 @@ placeholder="Name or address\u2026"
13218
13642
  DarkTheme: "md"
13219
13643
  }
13220
13644
  },
13645
+ {
13646
+ id: "select.behavior.toggleIcon",
13647
+ value: "chevronDown",
13648
+ type: "string",
13649
+ kind: "behavioral",
13650
+ target: "component-prop",
13651
+ appliesTo: "select",
13652
+ themeValues: {
13653
+ LightTheme: "chevronDown",
13654
+ DarkTheme: "chevronDown"
13655
+ }
13656
+ },
13657
+ {
13658
+ id: "select.behavior.toggleColor",
13659
+ value: "on-background-variant",
13660
+ type: "string",
13661
+ kind: "behavioral",
13662
+ target: "component-prop",
13663
+ appliesTo: "select",
13664
+ themeValues: {
13665
+ LightTheme: "on-background-variant",
13666
+ DarkTheme: "on-background-variant"
13667
+ }
13668
+ },
13669
+ {
13670
+ id: "select.behavior.toggleSize",
13671
+ value: 20,
13672
+ type: "number",
13673
+ kind: "behavioral",
13674
+ target: "component-prop",
13675
+ appliesTo: "select",
13676
+ themeValues: {
13677
+ LightTheme: 20,
13678
+ DarkTheme: 20
13679
+ }
13680
+ },
13681
+ {
13682
+ id: "buttonGroup.behavior.border",
13683
+ value: "quaternary",
13684
+ type: "string",
13685
+ kind: "behavioral",
13686
+ target: "component-prop",
13687
+ appliesTo: "buttonGroup",
13688
+ themeValues: {
13689
+ LightTheme: "quaternary",
13690
+ DarkTheme: "quaternary"
13691
+ }
13692
+ },
13693
+ {
13694
+ id: "buttonGroup.behavior.borderRadius",
13695
+ value: 4,
13696
+ type: "number",
13697
+ kind: "behavioral",
13698
+ target: "component-prop",
13699
+ appliesTo: "buttonGroup",
13700
+ themeValues: {
13701
+ LightTheme: 4,
13702
+ DarkTheme: 4
13703
+ }
13704
+ },
13705
+ {
13706
+ id: "progressBar.behavior.trackColor",
13707
+ value: "primary-surface",
13708
+ type: "string",
13709
+ kind: "behavioral",
13710
+ target: "component-prop",
13711
+ appliesTo: "progressBar",
13712
+ themeValues: {
13713
+ LightTheme: "primary-surface",
13714
+ DarkTheme: "primary-surface"
13715
+ }
13716
+ },
13717
+ {
13718
+ id: "progressBar.behavior.fillColor",
13719
+ value: "secondary-surface",
13720
+ type: "string",
13721
+ kind: "behavioral",
13722
+ target: "component-prop",
13723
+ appliesTo: "progressBar",
13724
+ themeValues: {
13725
+ LightTheme: "secondary-surface",
13726
+ DarkTheme: "secondary-surface"
13727
+ }
13728
+ },
13729
+ {
13730
+ id: "progressBar.behavior.completeColor",
13731
+ value: "secondary",
13732
+ type: "string",
13733
+ kind: "behavioral",
13734
+ target: "component-prop",
13735
+ appliesTo: "progressBar",
13736
+ themeValues: {
13737
+ LightTheme: "secondary",
13738
+ DarkTheme: "secondary"
13739
+ }
13740
+ },
13741
+ {
13742
+ id: "progressBar.behavior.borderColor",
13743
+ value: "on-background-variant",
13744
+ type: "string",
13745
+ kind: "behavioral",
13746
+ target: "component-prop",
13747
+ appliesTo: "progressBar",
13748
+ themeValues: {
13749
+ LightTheme: "on-background-variant",
13750
+ DarkTheme: "on-background-variant"
13751
+ }
13752
+ },
13753
+ {
13754
+ id: "progressBar.behavior.strokeWidth",
13755
+ value: 1,
13756
+ type: "number",
13757
+ kind: "behavioral",
13758
+ target: "component-prop",
13759
+ appliesTo: "progressBar",
13760
+ themeValues: {
13761
+ LightTheme: 1,
13762
+ DarkTheme: 1
13763
+ }
13764
+ },
13221
13765
  {
13222
13766
  id: "dropdown.behavior.border",
13223
13767
  value: "none",
@@ -13411,7 +13955,7 @@ placeholder="Name or address\u2026"
13411
13955
  }
13412
13956
  },
13413
13957
  {
13414
- id: "menuItem.behavior.activeSymbol",
13958
+ id: "menuItem.behavior.activeIcon",
13415
13959
  value: "check",
13416
13960
  type: "string",
13417
13961
  kind: "behavioral",
@@ -13543,7 +14087,7 @@ placeholder="Name or address\u2026"
13543
14087
  }
13544
14088
  },
13545
14089
  {
13546
- id: "popover.behavior.closeSymbol",
14090
+ id: "popover.behavior.closeIcon",
13547
14091
  value: "close",
13548
14092
  type: "string",
13549
14093
  kind: "behavioral",
@@ -13626,54 +14170,6 @@ placeholder="Name or address\u2026"
13626
14170
  DarkTheme: "reveal"
13627
14171
  }
13628
14172
  },
13629
- {
13630
- id: "footer.behavior.height",
13631
- value: 52,
13632
- type: "number",
13633
- kind: "behavioral",
13634
- target: "component-prop",
13635
- appliesTo: "footer",
13636
- themeValues: {
13637
- LightTheme: 52,
13638
- DarkTheme: 52
13639
- }
13640
- },
13641
- {
13642
- id: "footer.behavior.color",
13643
- value: "primary",
13644
- type: "string",
13645
- kind: "behavioral",
13646
- target: "component-prop",
13647
- appliesTo: "footer",
13648
- themeValues: {
13649
- LightTheme: "primary",
13650
- DarkTheme: "primary"
13651
- }
13652
- },
13653
- {
13654
- id: "footer.behavior.logoHeight",
13655
- value: 18.6,
13656
- type: "number",
13657
- kind: "behavioral",
13658
- target: "component-prop",
13659
- appliesTo: "footer",
13660
- themeValues: {
13661
- LightTheme: 18.6,
13662
- DarkTheme: 18.6
13663
- }
13664
- },
13665
- {
13666
- id: "footer.behavior.logoPadding",
13667
- value: "md",
13668
- type: "string",
13669
- kind: "behavioral",
13670
- target: "component-prop",
13671
- appliesTo: "footer",
13672
- themeValues: {
13673
- LightTheme: "md",
13674
- DarkTheme: "md"
13675
- }
13676
- },
13677
14173
  {
13678
14174
  id: "input.behavior.typeface",
13679
14175
  value: "input",
@@ -14154,6 +14650,18 @@ placeholder="Name or address\u2026"
14154
14650
  DarkTheme: "3ch"
14155
14651
  }
14156
14652
  },
14653
+ {
14654
+ id: "tabs.behavior.motion",
14655
+ value: "snap",
14656
+ type: "string",
14657
+ kind: "behavioral",
14658
+ target: "component-prop",
14659
+ appliesTo: "tabs",
14660
+ themeValues: {
14661
+ LightTheme: "snap",
14662
+ DarkTheme: "snap"
14663
+ }
14664
+ },
14157
14665
  {
14158
14666
  id: "tabs.behavior.typeface",
14159
14667
  value: "title-small",
@@ -14418,6 +14926,18 @@ placeholder="Name or address\u2026"
14418
14926
  DarkTheme: "check"
14419
14927
  }
14420
14928
  },
14929
+ {
14930
+ id: "tag.behavior.motion",
14931
+ value: "control",
14932
+ type: "string",
14933
+ kind: "behavioral",
14934
+ target: "component-prop",
14935
+ appliesTo: "tag",
14936
+ themeValues: {
14937
+ LightTheme: "control",
14938
+ DarkTheme: "control"
14939
+ }
14940
+ },
14421
14941
  {
14422
14942
  id: "tagInput.behavior.chipGap",
14423
14943
  value: "xs",
@@ -14551,27 +15071,27 @@ placeholder="Name or address\u2026"
14551
15071
  }
14552
15072
  },
14553
15073
  {
14554
- id: "calendar.behavior.navPrevSymbol",
14555
- value: "chevron_left",
15074
+ id: "calendar.behavior.navPrevIcon",
15075
+ value: "chevronLeft",
14556
15076
  type: "string",
14557
15077
  kind: "behavioral",
14558
15078
  target: "component-prop",
14559
15079
  appliesTo: "calendar",
14560
15080
  themeValues: {
14561
- LightTheme: "chevron_left",
14562
- DarkTheme: "chevron_left"
15081
+ LightTheme: "chevronLeft",
15082
+ DarkTheme: "chevronLeft"
14563
15083
  }
14564
15084
  },
14565
15085
  {
14566
- id: "calendar.behavior.navNextSymbol",
14567
- value: "chevron_right",
15086
+ id: "calendar.behavior.navNextIcon",
15087
+ value: "chevronRight",
14568
15088
  type: "string",
14569
15089
  kind: "behavioral",
14570
15090
  target: "component-prop",
14571
15091
  appliesTo: "calendar",
14572
15092
  themeValues: {
14573
- LightTheme: "chevron_right",
14574
- DarkTheme: "chevron_right"
15093
+ LightTheme: "chevronRight",
15094
+ DarkTheme: "chevronRight"
14575
15095
  }
14576
15096
  },
14577
15097
  {
@@ -14719,15 +15239,15 @@ placeholder="Name or address\u2026"
14719
15239
  }
14720
15240
  },
14721
15241
  {
14722
- id: "dateInput.behavior.toggleSymbol",
14723
- value: "calendar_month",
15242
+ id: "dateInput.behavior.toggleIcon",
15243
+ value: "calendar",
14724
15244
  type: "string",
14725
15245
  kind: "behavioral",
14726
15246
  target: "component-prop",
14727
15247
  appliesTo: "dateInput",
14728
15248
  themeValues: {
14729
- LightTheme: "calendar_month",
14730
- DarkTheme: "calendar_month"
15249
+ LightTheme: "calendar",
15250
+ DarkTheme: "calendar"
14731
15251
  }
14732
15252
  },
14733
15253
  {
@@ -14767,15 +15287,15 @@ placeholder="Name or address\u2026"
14767
15287
  }
14768
15288
  },
14769
15289
  {
14770
- id: "timeInput.behavior.toggleSymbol",
14771
- value: "schedule",
15290
+ id: "timeInput.behavior.toggleIcon",
15291
+ value: "clock",
14772
15292
  type: "string",
14773
15293
  kind: "behavioral",
14774
15294
  target: "component-prop",
14775
15295
  appliesTo: "timeInput",
14776
15296
  themeValues: {
14777
- LightTheme: "schedule",
14778
- DarkTheme: "schedule"
15297
+ LightTheme: "clock",
15298
+ DarkTheme: "clock"
14779
15299
  }
14780
15300
  },
14781
15301
  {
@@ -14886,6 +15406,18 @@ placeholder="Name or address\u2026"
14886
15406
  DarkTheme: "button"
14887
15407
  }
14888
15408
  },
15409
+ {
15410
+ id: "button.behavior.motion",
15411
+ value: "control",
15412
+ type: "string",
15413
+ kind: "behavioral",
15414
+ target: "component-prop",
15415
+ appliesTo: "button",
15416
+ themeValues: {
15417
+ LightTheme: "control",
15418
+ DarkTheme: "control"
15419
+ }
15420
+ },
14889
15421
  {
14890
15422
  id: "iconButton.behavior.borderRadius",
14891
15423
  value: "max",
@@ -14898,6 +15430,78 @@ placeholder="Name or address\u2026"
14898
15430
  DarkTheme: "max"
14899
15431
  }
14900
15432
  },
15433
+ {
15434
+ id: "iconButton.behavior.motion",
15435
+ value: "control",
15436
+ type: "string",
15437
+ kind: "behavioral",
15438
+ target: "component-prop",
15439
+ appliesTo: "iconButton",
15440
+ themeValues: {
15441
+ LightTheme: "control",
15442
+ DarkTheme: "control"
15443
+ }
15444
+ },
15445
+ {
15446
+ id: "inlineButton.behavior.linkColor",
15447
+ value: "primary",
15448
+ type: "string",
15449
+ kind: "behavioral",
15450
+ target: "component-prop",
15451
+ appliesTo: "inlineButton",
15452
+ themeValues: {
15453
+ LightTheme: "primary",
15454
+ DarkTheme: "primary"
15455
+ }
15456
+ },
15457
+ {
15458
+ id: "inlineButton.behavior.underline",
15459
+ value: false,
15460
+ type: "boolean",
15461
+ kind: "behavioral",
15462
+ target: "component-prop",
15463
+ appliesTo: "inlineButton",
15464
+ themeValues: {
15465
+ LightTheme: false,
15466
+ DarkTheme: false
15467
+ }
15468
+ },
15469
+ {
15470
+ id: "inlineButton.behavior.underlineOnHover",
15471
+ value: true,
15472
+ type: "boolean",
15473
+ kind: "behavioral",
15474
+ target: "component-prop",
15475
+ appliesTo: "inlineButton",
15476
+ themeValues: {
15477
+ LightTheme: true,
15478
+ DarkTheme: true
15479
+ }
15480
+ },
15481
+ {
15482
+ id: "inlineButton.behavior.underlineOffset",
15483
+ value: "0.15em",
15484
+ type: "string",
15485
+ kind: "behavioral",
15486
+ target: "component-prop",
15487
+ appliesTo: "inlineButton",
15488
+ themeValues: {
15489
+ LightTheme: "0.15em",
15490
+ DarkTheme: "0.15em"
15491
+ }
15492
+ },
15493
+ {
15494
+ id: "inlineButton.behavior.gap",
15495
+ value: "xxs",
15496
+ type: "string",
15497
+ kind: "behavioral",
15498
+ target: "component-prop",
15499
+ appliesTo: "inlineButton",
15500
+ themeValues: {
15501
+ LightTheme: "xxs",
15502
+ DarkTheme: "xxs"
15503
+ }
15504
+ },
14901
15505
  {
14902
15506
  id: "card.behavior.borderRadius",
14903
15507
  value: "xs",
@@ -14958,6 +15562,18 @@ placeholder="Name or address\u2026"
14958
15562
  DarkTheme: "disabled"
14959
15563
  }
14960
15564
  },
15565
+ {
15566
+ id: "dataTable.behavior.motion",
15567
+ value: "control",
15568
+ type: "string",
15569
+ kind: "behavioral",
15570
+ target: "component-prop",
15571
+ appliesTo: "dataTable",
15572
+ themeValues: {
15573
+ LightTheme: "control",
15574
+ DarkTheme: "control"
15575
+ }
15576
+ },
14961
15577
  {
14962
15578
  id: "dataTable.behavior.color",
14963
15579
  value: "primary-surface",
@@ -15607,15 +16223,15 @@ placeholder="Name or address\u2026"
15607
16223
  }
15608
16224
  },
15609
16225
  {
15610
- id: "slider.behavior.transitionMs",
15611
- value: 120,
15612
- type: "number",
16226
+ id: "slider.behavior.motion",
16227
+ value: "snap",
16228
+ type: "string",
15613
16229
  kind: "behavioral",
15614
16230
  target: "component-prop",
15615
16231
  appliesTo: "slider",
15616
16232
  themeValues: {
15617
- LightTheme: 120,
15618
- DarkTheme: 120
16233
+ LightTheme: "snap",
16234
+ DarkTheme: "snap"
15619
16235
  }
15620
16236
  },
15621
16237
  {
@@ -15834,6 +16450,18 @@ placeholder="Name or address\u2026"
15834
16450
  DarkTheme: "control"
15835
16451
  }
15836
16452
  },
16453
+ {
16454
+ id: "tooltip.behavior.motion",
16455
+ value: "notification",
16456
+ type: "string",
16457
+ kind: "behavioral",
16458
+ target: "component-prop",
16459
+ appliesTo: "tooltip",
16460
+ themeValues: {
16461
+ LightTheme: "notification",
16462
+ DarkTheme: "notification"
16463
+ }
16464
+ },
15837
16465
  {
15838
16466
  id: "tooltip.behavior.borderRadius",
15839
16467
  value: "xs",
@@ -15967,7 +16595,7 @@ placeholder="Name or address\u2026"
15967
16595
  }
15968
16596
  },
15969
16597
  {
15970
- id: "callout.behavior.closeSymbol",
16598
+ id: "callout.behavior.closeIcon",
15971
16599
  value: "close",
15972
16600
  type: "string",
15973
16601
  kind: "behavioral",
@@ -16197,6 +16825,13 @@ placeholder="Name or address\u2026"
16197
16825
  "shadow.menu": "rgba(23, 25, 43, 0.2) 0px 3px 3px -2px, rgba(23, 25, 43, 0.14) 0px 3px 4px 0px, rgba(23, 25, 43, 0.12) 0px 1px 8px 0px",
16198
16826
  "shadow.dialog": "rgba(23, 25, 43, 0.2) 0px 3px 5px -1px, rgba(23, 25, 43, 0.14) 0px 6px 10px 0px, rgba(23, 25, 43, 0.12) 0px 1px 18px 0px",
16199
16827
  "shadow.warn": "0 0 5px rgba(204, 40, 39, 0.5), inset 0 0 5px rgba(204, 40, 39, 0.3)",
16828
+ "backdrop.scrim": '{"background":"rgba(255, 255, 255, 0.6)","backdropFilter":"blur(2px)"}',
16829
+ "motion.popup": '{"duration":100,"easing":"linear","scale":0.8}',
16830
+ "motion.panel": '{"duration":250,"easing":"ease"}',
16831
+ "motion.reveal": '{"duration":350,"easing":"ease-in-out"}',
16832
+ "motion.notification": '{"duration":350,"easing":"ease-in-out"}',
16833
+ "motion.control": '{"duration":300,"easing":"ease"}',
16834
+ "motion.snap": '{"duration":120,"easing":"ease"}',
16200
16835
  "thickness.thin": 1,
16201
16836
  "thickness.standard": 2,
16202
16837
  "thickness.thick": 4,
@@ -16238,7 +16873,7 @@ placeholder="Name or address\u2026"
16238
16873
  typeface: "label",
16239
16874
  color: "on-background-variant",
16240
16875
  currentColor: "on-background",
16241
- separatorSymbol: "chevron_right",
16876
+ separatorIcon: "chevronRight",
16242
16877
  gap: "xs"
16243
16878
  },
16244
16879
  appBar: {
@@ -16255,9 +16890,10 @@ placeholder="Name or address\u2026"
16255
16890
  divider: "light",
16256
16891
  elevation: "menu",
16257
16892
  padding: "md",
16258
- backdrop: '{"background":"rgba(0, 0, 0, 0.4)"}',
16893
+ backdrop: "scrim",
16259
16894
  scrim: true,
16260
- background: "solid"
16895
+ background: "solid",
16896
+ motion: "panel"
16261
16897
  },
16262
16898
  drawerHeader: {
16263
16899
  height: 56,
@@ -16282,7 +16918,7 @@ placeholder="Name or address\u2026"
16282
16918
  avatar: {
16283
16919
  borderRadius: "max",
16284
16920
  typeface: "subtitle-2",
16285
- fallbackSymbol: "person"
16921
+ fallbackIcon: "profile"
16286
16922
  },
16287
16923
  avatarGroup: {
16288
16924
  overlap: "sm",
@@ -16290,8 +16926,8 @@ placeholder="Name or address\u2026"
16290
16926
  ringWidth: 2
16291
16927
  },
16292
16928
  searchInput: {
16293
- searchSymbol: "search",
16294
- clearSymbol: "close",
16929
+ searchIcon: "search",
16930
+ clearIcon: "close",
16295
16931
  listColor: "primary-surface",
16296
16932
  listShadow: "menu",
16297
16933
  listBorderRadius: "xs",
@@ -16299,6 +16935,7 @@ placeholder="Name or address\u2026"
16299
16935
  maxSuggestions: 8
16300
16936
  },
16301
16937
  checkbox: {
16938
+ motion: "control",
16302
16939
  size: 20,
16303
16940
  boxColor: "surface",
16304
16941
  borderRadius: 2,
@@ -16315,8 +16952,10 @@ placeholder="Name or address\u2026"
16315
16952
  color: "primary-surface",
16316
16953
  border: "quaternary",
16317
16954
  padding: "sm",
16955
+ inset: "lg",
16318
16956
  elevation: "dialog",
16319
- backdrop: '{"background":"rgba(255, 255, 255, 0.6)","backdropFilter":"blur(2px)"}'
16957
+ backdrop: "scrim",
16958
+ motion: "panel"
16320
16959
  },
16321
16960
  dialogButtons: {
16322
16961
  gap: "md",
@@ -16338,6 +16977,22 @@ placeholder="Name or address\u2026"
16338
16977
  closeButtonIcon: "close",
16339
16978
  closeButtonSize: "md"
16340
16979
  },
16980
+ select: {
16981
+ toggleIcon: "chevronDown",
16982
+ toggleColor: "on-background-variant",
16983
+ toggleSize: 20
16984
+ },
16985
+ buttonGroup: {
16986
+ border: "quaternary",
16987
+ borderRadius: 4
16988
+ },
16989
+ progressBar: {
16990
+ trackColor: "primary-surface",
16991
+ fillColor: "secondary-surface",
16992
+ completeColor: "secondary",
16993
+ borderColor: "on-background-variant",
16994
+ strokeWidth: 1
16995
+ },
16341
16996
  dropdown: {
16342
16997
  border: "none",
16343
16998
  borderRadius: "xxs",
@@ -16359,7 +17014,7 @@ placeholder="Name or address\u2026"
16359
17014
  borderRadius: "none",
16360
17015
  typeface: "label",
16361
17016
  hoverColor: "primary-container",
16362
- activeSymbol: "check",
17017
+ activeIcon: "check",
16363
17018
  motion: "control"
16364
17019
  },
16365
17020
  popover: {
@@ -16372,7 +17027,7 @@ placeholder="Name or address\u2026"
16372
17027
  maxWidth: "38ch",
16373
17028
  offset: 7,
16374
17029
  arrowSize: 8,
16375
- closeSymbol: "close",
17030
+ closeIcon: "close",
16376
17031
  headerTypeface: "title-small",
16377
17032
  tooltipPadding: "4px 8px",
16378
17033
  tooltipOpenDelay: 500,
@@ -16382,12 +17037,6 @@ placeholder="Name or address\u2026"
16382
17037
  expand: {
16383
17038
  motion: "reveal"
16384
17039
  },
16385
- footer: {
16386
- height: 52,
16387
- color: "primary",
16388
- logoHeight: 18.6,
16389
- logoPadding: "md"
16390
- },
16391
17040
  input: {
16392
17041
  typeface: "input",
16393
17042
  color: "primary-surface",
@@ -16439,6 +17088,7 @@ placeholder="Name or address\u2026"
16439
17088
  valueWidth: "3ch"
16440
17089
  },
16441
17090
  tabs: {
17091
+ motion: "snap",
16442
17092
  typeface: "title-small",
16443
17093
  textColor: "on-surface-variant",
16444
17094
  activeTextColor: "primary",
@@ -16466,7 +17116,8 @@ placeholder="Name or address\u2026"
16466
17116
  typeface: "tag",
16467
17117
  gap: "xs",
16468
17118
  removeIcon: "close",
16469
- selectedIcon: "check"
17119
+ selectedIcon: "check",
17120
+ motion: "control"
16470
17121
  },
16471
17122
  tagInput: {
16472
17123
  chipGap: "xs",
@@ -16482,8 +17133,8 @@ placeholder="Name or address\u2026"
16482
17133
  dayBorderRadius: "max",
16483
17134
  typeface: "label",
16484
17135
  gap: "xxs",
16485
- navPrevSymbol: "chevron_left",
16486
- navNextSymbol: "chevron_right",
17136
+ navPrevIcon: "chevronLeft",
17137
+ navNextIcon: "chevronRight",
16487
17138
  weekdayFormat: "short",
16488
17139
  showOutsideDays: false,
16489
17140
  todayStyle: "outline"
@@ -16500,13 +17151,13 @@ placeholder="Name or address\u2026"
16500
17151
  descriptionColor: "on-primary-surface-variant"
16501
17152
  },
16502
17153
  dateInput: {
16503
- toggleSymbol: "calendar_month",
17154
+ toggleIcon: "calendar",
16504
17155
  popupShadow: "menu",
16505
17156
  popupBorderRadius: "xs",
16506
17157
  popupColor: "primary-surface"
16507
17158
  },
16508
17159
  timeInput: {
16509
- toggleSymbol: "schedule",
17160
+ toggleIcon: "clock",
16510
17161
  listColor: "primary-surface",
16511
17162
  listShadow: "menu",
16512
17163
  listBorderRadius: "xs",
@@ -16519,10 +17170,19 @@ placeholder="Name or address\u2026"
16519
17170
  },
16520
17171
  button: {
16521
17172
  borderRadius: "max",
16522
- typeface: "button"
17173
+ typeface: "button",
17174
+ motion: "control"
16523
17175
  },
16524
17176
  iconButton: {
16525
- borderRadius: "max"
17177
+ borderRadius: "max",
17178
+ motion: "control"
17179
+ },
17180
+ inlineButton: {
17181
+ linkColor: "primary",
17182
+ underline: false,
17183
+ underlineOnHover: true,
17184
+ underlineOffset: "0.15em",
17185
+ gap: "xxs"
16526
17186
  },
16527
17187
  card: {
16528
17188
  borderRadius: "xs"
@@ -16534,6 +17194,7 @@ placeholder="Name or address\u2026"
16534
17194
  placeholderColor: "disabled"
16535
17195
  },
16536
17196
  dataTable: {
17197
+ motion: "control",
16537
17198
  color: "primary-surface",
16538
17199
  border: "light",
16539
17200
  borderRadius: "sm",
@@ -16596,7 +17257,7 @@ placeholder="Name or address\u2026"
16596
17257
  tooltipTextColor: "on-inverse-surface",
16597
17258
  tooltipShadow: "menu",
16598
17259
  tooltipBorderRadius: "xs",
16599
- transitionMs: 120
17260
+ motion: "snap"
16600
17261
  },
16601
17262
  skeleton: {
16602
17263
  color: "surface-variant",
@@ -16625,6 +17286,7 @@ placeholder="Name or address\u2026"
16625
17286
  motion: "control"
16626
17287
  },
16627
17288
  tooltip: {
17289
+ motion: "notification",
16628
17290
  borderRadius: "xs",
16629
17291
  shadow: "raised",
16630
17292
  color: "inverse-surface",
@@ -16638,7 +17300,7 @@ placeholder="Name or address\u2026"
16638
17300
  padding: "16px",
16639
17301
  headerTypeface: "title-small",
16640
17302
  typeface: "label",
16641
- closeSymbol: "close",
17303
+ closeIcon: "close",
16642
17304
  arrowSize: 8,
16643
17305
  offset: 12,
16644
17306
  scrimColor: "rgba(0, 0, 0, 0.45)",
@@ -16763,6 +17425,13 @@ placeholder="Name or address\u2026"
16763
17425
  "shadow.menu": "0px 4px 12px rgba(0, 0, 0, 0.45)",
16764
17426
  "shadow.dialog": "0px 8px 28px rgba(0, 0, 0, 0.55)",
16765
17427
  "shadow.warn": "0 0 5px rgba(255, 150, 138, 0.55), inset 0 0 5px rgba(255, 150, 138, 0.35)",
17428
+ "backdrop.scrim": '{"background":"rgba(255, 255, 255, 0.6)","backdropFilter":"blur(2px)"}',
17429
+ "motion.popup": '{"duration":100,"easing":"linear","scale":0.8}',
17430
+ "motion.panel": '{"duration":250,"easing":"ease"}',
17431
+ "motion.reveal": '{"duration":350,"easing":"ease-in-out"}',
17432
+ "motion.notification": '{"duration":350,"easing":"ease-in-out"}',
17433
+ "motion.control": '{"duration":300,"easing":"ease"}',
17434
+ "motion.snap": '{"duration":120,"easing":"ease"}',
16766
17435
  "thickness.thin": 1,
16767
17436
  "thickness.standard": 2,
16768
17437
  "thickness.thick": 4,
@@ -16804,7 +17473,7 @@ placeholder="Name or address\u2026"
16804
17473
  typeface: "label",
16805
17474
  color: "on-background-variant",
16806
17475
  currentColor: "on-background",
16807
- separatorSymbol: "chevron_right",
17476
+ separatorIcon: "chevronRight",
16808
17477
  gap: "xs"
16809
17478
  },
16810
17479
  appBar: {
@@ -16821,9 +17490,10 @@ placeholder="Name or address\u2026"
16821
17490
  divider: "light",
16822
17491
  elevation: "menu",
16823
17492
  padding: "md",
16824
- backdrop: '{"background":"rgba(0, 0, 0, 0.4)"}',
17493
+ backdrop: "scrim",
16825
17494
  scrim: true,
16826
- background: "solid"
17495
+ background: "solid",
17496
+ motion: "panel"
16827
17497
  },
16828
17498
  drawerHeader: {
16829
17499
  height: 56,
@@ -16848,7 +17518,7 @@ placeholder="Name or address\u2026"
16848
17518
  avatar: {
16849
17519
  borderRadius: "max",
16850
17520
  typeface: "subtitle-2",
16851
- fallbackSymbol: "person"
17521
+ fallbackIcon: "profile"
16852
17522
  },
16853
17523
  avatarGroup: {
16854
17524
  overlap: "sm",
@@ -16856,8 +17526,8 @@ placeholder="Name or address\u2026"
16856
17526
  ringWidth: 2
16857
17527
  },
16858
17528
  searchInput: {
16859
- searchSymbol: "search",
16860
- clearSymbol: "close",
17529
+ searchIcon: "search",
17530
+ clearIcon: "close",
16861
17531
  listColor: "primary-surface",
16862
17532
  listShadow: "menu",
16863
17533
  listBorderRadius: "xs",
@@ -16865,6 +17535,7 @@ placeholder="Name or address\u2026"
16865
17535
  maxSuggestions: 8
16866
17536
  },
16867
17537
  checkbox: {
17538
+ motion: "control",
16868
17539
  size: 20,
16869
17540
  boxColor: "surface",
16870
17541
  borderRadius: 2,
@@ -16881,8 +17552,10 @@ placeholder="Name or address\u2026"
16881
17552
  color: "primary-surface",
16882
17553
  border: "quaternary",
16883
17554
  padding: "sm",
17555
+ inset: "lg",
16884
17556
  elevation: "dialog",
16885
- backdrop: '{"background":"rgba(255, 255, 255, 0.6)","backdropFilter":"blur(2px)"}'
17557
+ backdrop: "scrim",
17558
+ motion: "panel"
16886
17559
  },
16887
17560
  dialogButtons: {
16888
17561
  gap: "md",
@@ -16904,6 +17577,22 @@ placeholder="Name or address\u2026"
16904
17577
  closeButtonIcon: "close",
16905
17578
  closeButtonSize: "md"
16906
17579
  },
17580
+ select: {
17581
+ toggleIcon: "chevronDown",
17582
+ toggleColor: "on-background-variant",
17583
+ toggleSize: 20
17584
+ },
17585
+ buttonGroup: {
17586
+ border: "quaternary",
17587
+ borderRadius: 4
17588
+ },
17589
+ progressBar: {
17590
+ trackColor: "primary-surface",
17591
+ fillColor: "secondary-surface",
17592
+ completeColor: "secondary",
17593
+ borderColor: "on-background-variant",
17594
+ strokeWidth: 1
17595
+ },
16907
17596
  dropdown: {
16908
17597
  border: "none",
16909
17598
  borderRadius: "xxs",
@@ -16925,7 +17614,7 @@ placeholder="Name or address\u2026"
16925
17614
  borderRadius: "none",
16926
17615
  typeface: "label",
16927
17616
  hoverColor: "primary-container",
16928
- activeSymbol: "check",
17617
+ activeIcon: "check",
16929
17618
  motion: "control"
16930
17619
  },
16931
17620
  popover: {
@@ -16938,7 +17627,7 @@ placeholder="Name or address\u2026"
16938
17627
  maxWidth: "38ch",
16939
17628
  offset: 7,
16940
17629
  arrowSize: 8,
16941
- closeSymbol: "close",
17630
+ closeIcon: "close",
16942
17631
  headerTypeface: "title-small",
16943
17632
  tooltipPadding: "4px 8px",
16944
17633
  tooltipOpenDelay: 500,
@@ -16948,12 +17637,6 @@ placeholder="Name or address\u2026"
16948
17637
  expand: {
16949
17638
  motion: "reveal"
16950
17639
  },
16951
- footer: {
16952
- height: 52,
16953
- color: "primary",
16954
- logoHeight: 18.6,
16955
- logoPadding: "md"
16956
- },
16957
17640
  input: {
16958
17641
  typeface: "input",
16959
17642
  color: "primary-surface",
@@ -17005,6 +17688,7 @@ placeholder="Name or address\u2026"
17005
17688
  valueWidth: "3ch"
17006
17689
  },
17007
17690
  tabs: {
17691
+ motion: "snap",
17008
17692
  typeface: "title-small",
17009
17693
  textColor: "on-surface-variant",
17010
17694
  activeTextColor: "primary",
@@ -17032,7 +17716,8 @@ placeholder="Name or address\u2026"
17032
17716
  typeface: "tag",
17033
17717
  gap: "xs",
17034
17718
  removeIcon: "close",
17035
- selectedIcon: "check"
17719
+ selectedIcon: "check",
17720
+ motion: "control"
17036
17721
  },
17037
17722
  tagInput: {
17038
17723
  chipGap: "xs",
@@ -17048,8 +17733,8 @@ placeholder="Name or address\u2026"
17048
17733
  dayBorderRadius: "max",
17049
17734
  typeface: "label",
17050
17735
  gap: "xxs",
17051
- navPrevSymbol: "chevron_left",
17052
- navNextSymbol: "chevron_right",
17736
+ navPrevIcon: "chevronLeft",
17737
+ navNextIcon: "chevronRight",
17053
17738
  weekdayFormat: "short",
17054
17739
  showOutsideDays: false,
17055
17740
  todayStyle: "outline"
@@ -17066,13 +17751,13 @@ placeholder="Name or address\u2026"
17066
17751
  descriptionColor: "on-primary-surface-variant"
17067
17752
  },
17068
17753
  dateInput: {
17069
- toggleSymbol: "calendar_month",
17754
+ toggleIcon: "calendar",
17070
17755
  popupShadow: "menu",
17071
17756
  popupBorderRadius: "xs",
17072
17757
  popupColor: "primary-surface"
17073
17758
  },
17074
17759
  timeInput: {
17075
- toggleSymbol: "schedule",
17760
+ toggleIcon: "clock",
17076
17761
  listColor: "primary-surface",
17077
17762
  listShadow: "menu",
17078
17763
  listBorderRadius: "xs",
@@ -17085,10 +17770,19 @@ placeholder="Name or address\u2026"
17085
17770
  },
17086
17771
  button: {
17087
17772
  borderRadius: "max",
17088
- typeface: "button"
17773
+ typeface: "button",
17774
+ motion: "control"
17089
17775
  },
17090
17776
  iconButton: {
17091
- borderRadius: "max"
17777
+ borderRadius: "max",
17778
+ motion: "control"
17779
+ },
17780
+ inlineButton: {
17781
+ linkColor: "primary",
17782
+ underline: false,
17783
+ underlineOnHover: true,
17784
+ underlineOffset: "0.15em",
17785
+ gap: "xxs"
17092
17786
  },
17093
17787
  card: {
17094
17788
  borderRadius: "xs"
@@ -17100,6 +17794,7 @@ placeholder="Name or address\u2026"
17100
17794
  placeholderColor: "disabled"
17101
17795
  },
17102
17796
  dataTable: {
17797
+ motion: "control",
17103
17798
  color: "primary-surface",
17104
17799
  border: "light",
17105
17800
  borderRadius: "sm",
@@ -17162,7 +17857,7 @@ placeholder="Name or address\u2026"
17162
17857
  tooltipTextColor: "on-inverse-surface",
17163
17858
  tooltipShadow: "menu",
17164
17859
  tooltipBorderRadius: "xs",
17165
- transitionMs: 120
17860
+ motion: "snap"
17166
17861
  },
17167
17862
  skeleton: {
17168
17863
  color: "surface-variant",
@@ -17191,6 +17886,7 @@ placeholder="Name or address\u2026"
17191
17886
  motion: "control"
17192
17887
  },
17193
17888
  tooltip: {
17889
+ motion: "notification",
17194
17890
  borderRadius: "xs",
17195
17891
  shadow: "raised",
17196
17892
  color: "inverse-surface",
@@ -17204,7 +17900,7 @@ placeholder="Name or address\u2026"
17204
17900
  padding: "16px",
17205
17901
  headerTypeface: "title-small",
17206
17902
  typeface: "label",
17207
- closeSymbol: "close",
17903
+ closeIcon: "close",
17208
17904
  arrowSize: 8,
17209
17905
  offset: 12,
17210
17906
  scrimColor: "rgba(0, 0, 0, 0.45)",
@@ -17225,6 +17921,62 @@ placeholder="Name or address\u2026"
17225
17921
  {
17226
17922
  package: "@uni-design-system/uni-angular",
17227
17923
  releases: [
17924
+ {
17925
+ version: "11.0.0",
17926
+ entries: [
17927
+ {
17928
+ bump: "major",
17929
+ title: "Require Angular 22. `@angular/common`, `@angular/core` and `@angular/forms` move from `^21.2.0` to `^22.0.0`, so 11.x tracks Angular 22 and 10.x remains the Angular 21 line \u2014 one major of this package per Angular major, as documented. The old range excluded v22 outright, so an app that had taken Angular 22 could not install this package without a peer override.",
17930
+ body: "Two consequences of the framework's own changes:\n\n**`touch` output on every form control.** Angular 22 marks a bound field touched through a dedicated `touch` output rather than through the `touched` model, which the `Field` directive now binds inward only. All sixteen controls that track touched state (input, textarea, checkbox, radio, toggle, select, combobox, multi-select, tag-input, calendar, date/date-time/time inputs, number/number-range inputs, quantity-stepper, slider) emit it wherever they already considered the user done with the control. Without it, `touched()` never flips and error display gated on it never appears.\n\n**`min` / `max` typing.** The contract now types `min`/`max` as the control's own value type rather than as numbers. Where that still fits, the input was widened (`uni-slider`). Where it does not \u2014 a text control's native numeric attributes (`uni-input`), a range control's scalar bounds (`uni-number-range-input`), a tag limit (`uni-tag-input`) \u2014 the class member steps aside and the public binding name is preserved by an alias, so **templates are unchanged**. Only code reaching these through a `ViewChild` instance is affected: `min`/`max` are now `minAttr`/`maxAttr` on `uni-input`, `minValue`/`maxValue` on `uni-number-range-input`, and `max` is `maxLength` on `uni-tag-input`. `uni-number-range-input`'s protected `valueOf()` is renamed `partValue()`, since `valueOf` collides with `Object.valueOf`.\n\nAngular 22 also makes `OnPush` the default change detection; every component here already set it explicitly.",
17931
+ commit: "8fef84f"
17932
+ },
17933
+ {
17934
+ bump: "major",
17935
+ title: "Add `uni-inline-button`, and remove the `footer` component name.",
17936
+ body: "**`uni-inline-button`** is an action that lives inside a sentence. Every other button in the library owns a box \u2014 even `ghost` carries padding and a hit area, so dropping one into a paragraph pushes the words apart and breaks the line's rhythm. This one adds no box: it inherits the surrounding type (family, size, weight, line height, letter spacing and colour) and renders as part of the run of text.\n\n```html\nYour data is processed under the terms you accepted. You can\n<button inline-button underline link>review them</button> at any time.\n```\n\nIt is always a real `<button>`, so it can _look_ like a link without claiming to be navigation: Enter and Space activate it and assistive tech announces a button rather than an unfollowable link. Reach for an `<a>` when the thing actually goes somewhere.\n\nInputs: `underline` and `link` (both tri-state against the theme's defaults, and both readable as bare attributes), `iconName` / `symbolName` with `iconPosition`, and `disable`. A glyph is sized in `em` rather than px, so the same markup reads correctly in a caption and in a headline and never changes the line height of the paragraph it sits in.\n\nIt is themed as **`inlineButton`**, with `linkColor`, `underline`, `underlineOnHover`, `underlineOffset`, `gap` and `focusColor`. This replaces the `textButton` name that had sat in `ComponentName` since before there was anything to put behind it \u2014 **`ComponentName`'s `'textButton'` is renamed to `'inlineButton'`, and the exported options type `UniTextButtonOptions` to `UniInlineButtonOptions`.** Nothing shipped a `textButton` entry, so a theme only needs the rename if it had reached for the unbacked name.\n\nOne documented limit: browsers blockify every `<button>` to `inline-block` whatever `display` it asks for, so the control is an atomic inline box. A long label wraps inside it, but the run moves to the next line whole rather than splitting where the surrounding words would. `display: contents` would fix that and cost the button its focusability, so labels should stay to a few words.\n\n**`footer` is removed** from `ComponentName` and from the base theme. It was declared and themed but never built, so a theme could set options that reached nothing. Themes that state a `footer` entry now fail to type-check; delete the entry.",
17937
+ commit: "403043a"
17938
+ },
17939
+ {
17940
+ bump: "major",
17941
+ title: "Put every remaining hardcoded animation duration on the `motion` scale. Seventeen sites across twelve components carried their own literal, so a theme could retime some of the library and not the rest.",
17942
+ body: "New `motion` options, each defaulting to the token named: `button`, `iconButton`, `checkbox`, `tabs`, `tooltip`, `dataTable`, `tag`. `uni-sort-header` names `control` directly \u2014 it has no theme entry to hang an option on. `combobox`'s chevron now turns with the popup it opens, reading that component's existing `motion` option.\n\nTimings move where the literal and the token disagreed:\n\n| | before | after | token |\n| ----------------------------------------- | ----------------- | ----------------- | -------------- |\n| button, icon-button, data-table row hover | 280ms ease | 300ms ease | `control` |\n| checkbox box and dash | 200ms ease | 300ms ease | `control` |\n| checkbox tick (drawn, trails the box) | 500ms ease | 350ms ease-in-out | `reveal` |\n| tabs ink and indicator | 150ms ease | 120ms ease | `snap` |\n| combobox chevron | 150ms ease | 100ms linear | `popup` |\n| tag fill and ink | 200ms ease | 300ms ease | `control` |\n| sort-header arrow | 350ms ease-in-out | 300ms ease | `control` |\n| alert, snackbar dismiss | 300ms | 350ms | `notification` |\n| data-table detail expand | 300ms ease | 350ms ease-in-out | `reveal` |\n| tooltip fade, data-table loading overlay | 350ms | unchanged | `notification` |\n\nTwo of these lived in the theme rather than in a component: `button.fixed` and `tag.fixed` each baked a `transition`, and the button's won over the component that had already been migrated \u2014 so the button kept its old timing regardless. Both are gone; the components own their transitions and follow the token at runtime. A spec now fails if any shipped theme states a duration in a style block.\n\n`uni-skeleton` still stays out: its shimmer is a loop, not a transition.",
17943
+ commit: "2e4a6a4"
17944
+ },
17945
+ {
17946
+ bump: "major",
17947
+ title: "Move `uni-slider`'s click-to-jump timing onto the `motion` scale. The `slider.transitionMs` theme option is removed; use `slider.motion` \u2014 a token name \u2014 instead.",
17948
+ body: "It was the last duration option outside the scale. The other eight went in 9.0.0, but the slider was rewritten for the numeric family afterwards and reintroduced its own, so a theme could retime every animated component except this one.\n\nThe scale gains a sixth token for it, `snap` (120ms `ease`), which is the slider's exact previous timing \u2014 nothing moves faster or slower than before. It is a separate token rather than a reuse of `control` because the two describe different motion: `control` times a state change in place (a hover fill, a check mark) and runs 300ms, where a slider thumb covers distance to a value the user just chose and at 300ms reads as lagging the input rather than answering it. A drag is still never animated.\n\nThemes setting `slider.transitionMs` should set `motion.snap` instead, which also retimes anything else pointed at that token.",
17949
+ commit: "2dc4fb5"
17950
+ },
17951
+ {
17952
+ bump: "major",
17953
+ title: "Composite components now render their glyphs through `uni-icon` theme tokens instead of `uni-symbol` ligatures, completing the rule set in `AGENTS.md`. Thirteen theme options are renamed and retyped from `string` to `IconName`:",
17954
+ body: "| Component | before | after |\n| ---------------------- | --------------------------------- | ------------------------------------- |\n| date-input, time-input | `toggleSymbol` | `toggleIcon` (`calendar`, `clock`) |\n| calendar | `navPrevSymbol` / `navNextSymbol` | `navPrevIcon` / `navNextIcon` |\n| menu-item | `activeSymbol` | `activeIcon` |\n| avatar | `fallbackSymbol` | `fallbackIcon` (`person` \u2192 `profile`) |\n| breadcrumb | `separatorSymbol` | `separatorIcon` |\n| search-input | `searchSymbol` / `clearSymbol` | `searchIcon` / `clearIcon` |\n| callout, popover | `closeSymbol` | `closeIcon` |\n\n`drawer-header` and `dialog-header` shipped both `closeButtonIcon` and `closeButtonSymbol`; the `*Symbol` half is removed, and since `symbolName` outranked `iconName` inside the icon button, those two headers were still rendering the ligature path until now.\n\nFour glyphs join `BaseIcons` (65 total): `arrowUp`/`arrowDown` and `chevronsLeft`/`chevronsRight`, which is what unblocked `uni-sort-header` and `uni-paginator`. `select-input`, `multi-select-dropdown` and `data-search` also stopped hardcoding ligatures.\n\n**Migrating:** rename the option in your theme and swap the Material ligature for an icon token \u2014 `activeSymbol: 'check'` becomes `activeIcon: 'check'`, `toggleSymbol: 'calendar_month'` becomes `toggleIcon: 'calendar'`. Any glyph you need that `BaseIcons` lacks can be registered through `createTheme({ icons })`.\n\n`uni-symbol` is unchanged and still the right tool for app-facing inputs that take arbitrary ligature names \u2014 `symbolName` on icon-button, tag, alert, snackbar and menu-item, and `symbolLeft`/`symbolRight` on button. One consequence worth knowing: `uni-icon` has no variable-font axes, so a theme setting `symbol: { options: { weight } }` no longer affects these composites' glyphs \u2014 they take the icon set's weight (300). The Wellsourced theme, which sets weight 200, has accepted this.",
17955
+ commit: "44feb5d"
17956
+ },
17957
+ {
17958
+ bump: "major",
17959
+ title: "Remove the deprecated `toggle.size` theme option and wire up three component names that were declared but unreachable.",
17960
+ body: "`toggle.size` was the last `@deprecated` API in the library \u2014 the pre-`sizes` geometry (width 2x, knob 0.8x) that outranked the size block for every instance regardless of a toggle's own `size` input. No shipped theme set it. Use the `toggle.sizes` block, which gives each size token its own `width` / `height` / `padding`.\n\n`select`, `buttonGroup` and `progressBar` were listed in `ComponentName` with no theme entry and no `COMPONENT_NAME` provider behind them, so a theme could not dress them however it tried. Each now has an entry whose defaults are exactly what the component previously hardcoded, so nothing moves:\n- **`select`** \u2014 `toggleIcon`, `toggleColor`, `toggleSize` for the dropdown affordance, matching `uni-combobox`'s (`chevronDown`, `on-background-variant`, 20).\n- **`buttonGroup`** \u2014 `border` and `borderRadius` for the segmented frame, previously a literal `quaternary` border and 4px corners.\n- **`progressBar`** \u2014 `trackColor`, `fillColor`, `completeColor`, `borderColor` and `strokeWidth`, previously read straight off the palette.\n\nThe two remaining names are dealt with separately: `textButton` is renamed `inlineButton` and now backs the new `uni-inline-button`, and `footer` is removed from `ComponentName` altogether.",
17961
+ commit: "0b1c528"
17962
+ }
17963
+ ],
17964
+ dependencyBumps: [
17965
+ "@uni-design-system/uni-core@11.0.0"
17966
+ ]
17967
+ },
17968
+ {
17969
+ version: "10.4.0",
17970
+ entries: [
17971
+ {
17972
+ bump: "minor",
17973
+ title: "Give `uni-dialog` the drawer's three-row layout: a pinned `[uni-dialog-header]`, a scrolling body, and pinned `[uni-dialog-buttons]`.",
17974
+ body: "The surface is now a flex column that is `overflow: clip` on both axes, so it is never the scroll container \u2014 previously a long form scrolled the dialog's own title and action buttons off the screen. Unlike the drawer, the dialog declares no height and stays sized by its content, growing until it reaches `calc(100dvh - 2 \xD7 inset)` and only then scrolling its body.\n\nNew theme options: `dialog.inset` (gap from the viewport edge before the body scrolls, default `lg`), `dialog.bodyPadding` (pads the scrolling row alone; `dialog.padding` still insets all three rows), and `divider` on `dialogHeader` / `dialogButtons` for a border between a pinned row and the body \u2014 all off or unchanged by default, so existing dialogs keep their appearance.\n\n`[uni-dialog-header]` gains the shorter `[dialog-header]` alias, matching `[dialog-buttons]`; the long form keeps working. The `defaultCloseButton` now actually floats in the corner \u2014 its `position: absolute` was being lost to the icon button's own class, which left it inline at the top of the surface.\n\nThe drawer's overlay scrim now fades in and out with the panel instead of snapping. Its `::backdrop` had a background and no animation at all, so the dimming appeared and vanished instantly around a panel that took 250ms to slide. A new `drawer.motion` option (default `panel`) times the slide, the scrim's fade and the side panel's width transition together, replacing the hardcoded 250ms literals. The global reduced-motion rule now also reaches `::backdrop`, so both the drawer's and the dialog's scrim honour the preference (WCAG 2.3.3).\n\nDialog and drawer scrims now come from one token. `UniTheme` gains a `backdrops` scale \u2014 open and named like `shadows` and `motion` \u2014 and both components' `backdrop` option points at a name (`'scrim'`) instead of carrying its own CSS. They had drifted: the dialog washed the page white and blurred it while the drawer dimmed it dark, and a theme that dressed the dialog left the drawer on the library default. A raw style object is still accepted on either option, so a theme that states one keeps working.\n\nThe dialog's fade now reads the theme's `motion` token too (new `dialog.motion` option, default `panel`), replacing a hardcoded `350ms ease-in`. It shared the drawer's scrim but not its timing, so the same surface arrived at two speeds; both are now 250ms and a theme retimes them together.",
17975
+ commit: "cb5f08f"
17976
+ }
17977
+ ],
17978
+ dependencyBumps: []
17979
+ },
17228
17980
  {
17229
17981
  version: "10.3.0",
17230
17982
  entries: [
@@ -18001,6 +18753,66 @@ placeholder="Name or address\u2026"
18001
18753
  {
18002
18754
  package: "@uni-design-system/uni-core",
18003
18755
  releases: [
18756
+ {
18757
+ version: "11.0.0",
18758
+ entries: [
18759
+ {
18760
+ bump: "major",
18761
+ title: "Require Angular 22. `@angular/common`, `@angular/core` and `@angular/forms` move from `^21.2.0` to `^22.0.0`, so 11.x tracks Angular 22 and 10.x remains the Angular 21 line \u2014 one major of this package per Angular major, as documented. The old range excluded v22 outright, so an app that had taken Angular 22 could not install this package without a peer override.",
18762
+ body: "Two consequences of the framework's own changes:\n\n**`touch` output on every form control.** Angular 22 marks a bound field touched through a dedicated `touch` output rather than through the `touched` model, which the `Field` directive now binds inward only. All sixteen controls that track touched state (input, textarea, checkbox, radio, toggle, select, combobox, multi-select, tag-input, calendar, date/date-time/time inputs, number/number-range inputs, quantity-stepper, slider) emit it wherever they already considered the user done with the control. Without it, `touched()` never flips and error display gated on it never appears.\n\n**`min` / `max` typing.** The contract now types `min`/`max` as the control's own value type rather than as numbers. Where that still fits, the input was widened (`uni-slider`). Where it does not \u2014 a text control's native numeric attributes (`uni-input`), a range control's scalar bounds (`uni-number-range-input`), a tag limit (`uni-tag-input`) \u2014 the class member steps aside and the public binding name is preserved by an alias, so **templates are unchanged**. Only code reaching these through a `ViewChild` instance is affected: `min`/`max` are now `minAttr`/`maxAttr` on `uni-input`, `minValue`/`maxValue` on `uni-number-range-input`, and `max` is `maxLength` on `uni-tag-input`. `uni-number-range-input`'s protected `valueOf()` is renamed `partValue()`, since `valueOf` collides with `Object.valueOf`.\n\nAngular 22 also makes `OnPush` the default change detection; every component here already set it explicitly.",
18763
+ commit: "8fef84f"
18764
+ },
18765
+ {
18766
+ bump: "major",
18767
+ title: "Add `uni-inline-button`, and remove the `footer` component name.",
18768
+ body: "**`uni-inline-button`** is an action that lives inside a sentence. Every other button in the library owns a box \u2014 even `ghost` carries padding and a hit area, so dropping one into a paragraph pushes the words apart and breaks the line's rhythm. This one adds no box: it inherits the surrounding type (family, size, weight, line height, letter spacing and colour) and renders as part of the run of text.\n\n```html\nYour data is processed under the terms you accepted. You can\n<button inline-button underline link>review them</button> at any time.\n```\n\nIt is always a real `<button>`, so it can _look_ like a link without claiming to be navigation: Enter and Space activate it and assistive tech announces a button rather than an unfollowable link. Reach for an `<a>` when the thing actually goes somewhere.\n\nInputs: `underline` and `link` (both tri-state against the theme's defaults, and both readable as bare attributes), `iconName` / `symbolName` with `iconPosition`, and `disable`. A glyph is sized in `em` rather than px, so the same markup reads correctly in a caption and in a headline and never changes the line height of the paragraph it sits in.\n\nIt is themed as **`inlineButton`**, with `linkColor`, `underline`, `underlineOnHover`, `underlineOffset`, `gap` and `focusColor`. This replaces the `textButton` name that had sat in `ComponentName` since before there was anything to put behind it \u2014 **`ComponentName`'s `'textButton'` is renamed to `'inlineButton'`, and the exported options type `UniTextButtonOptions` to `UniInlineButtonOptions`.** Nothing shipped a `textButton` entry, so a theme only needs the rename if it had reached for the unbacked name.\n\nOne documented limit: browsers blockify every `<button>` to `inline-block` whatever `display` it asks for, so the control is an atomic inline box. A long label wraps inside it, but the run moves to the next line whole rather than splitting where the surrounding words would. `display: contents` would fix that and cost the button its focusability, so labels should stay to a few words.\n\n**`footer` is removed** from `ComponentName` and from the base theme. It was declared and themed but never built, so a theme could set options that reached nothing. Themes that state a `footer` entry now fail to type-check; delete the entry.",
18769
+ commit: "403043a"
18770
+ },
18771
+ {
18772
+ bump: "major",
18773
+ title: "Put every remaining hardcoded animation duration on the `motion` scale. Seventeen sites across twelve components carried their own literal, so a theme could retime some of the library and not the rest.",
18774
+ body: "New `motion` options, each defaulting to the token named: `button`, `iconButton`, `checkbox`, `tabs`, `tooltip`, `dataTable`, `tag`. `uni-sort-header` names `control` directly \u2014 it has no theme entry to hang an option on. `combobox`'s chevron now turns with the popup it opens, reading that component's existing `motion` option.\n\nTimings move where the literal and the token disagreed:\n\n| | before | after | token |\n| ----------------------------------------- | ----------------- | ----------------- | -------------- |\n| button, icon-button, data-table row hover | 280ms ease | 300ms ease | `control` |\n| checkbox box and dash | 200ms ease | 300ms ease | `control` |\n| checkbox tick (drawn, trails the box) | 500ms ease | 350ms ease-in-out | `reveal` |\n| tabs ink and indicator | 150ms ease | 120ms ease | `snap` |\n| combobox chevron | 150ms ease | 100ms linear | `popup` |\n| tag fill and ink | 200ms ease | 300ms ease | `control` |\n| sort-header arrow | 350ms ease-in-out | 300ms ease | `control` |\n| alert, snackbar dismiss | 300ms | 350ms | `notification` |\n| data-table detail expand | 300ms ease | 350ms ease-in-out | `reveal` |\n| tooltip fade, data-table loading overlay | 350ms | unchanged | `notification` |\n\nTwo of these lived in the theme rather than in a component: `button.fixed` and `tag.fixed` each baked a `transition`, and the button's won over the component that had already been migrated \u2014 so the button kept its old timing regardless. Both are gone; the components own their transitions and follow the token at runtime. A spec now fails if any shipped theme states a duration in a style block.\n\n`uni-skeleton` still stays out: its shimmer is a loop, not a transition.",
18775
+ commit: "2e4a6a4"
18776
+ },
18777
+ {
18778
+ bump: "major",
18779
+ title: "Move `uni-slider`'s click-to-jump timing onto the `motion` scale. The `slider.transitionMs` theme option is removed; use `slider.motion` \u2014 a token name \u2014 instead.",
18780
+ body: "It was the last duration option outside the scale. The other eight went in 9.0.0, but the slider was rewritten for the numeric family afterwards and reintroduced its own, so a theme could retime every animated component except this one.\n\nThe scale gains a sixth token for it, `snap` (120ms `ease`), which is the slider's exact previous timing \u2014 nothing moves faster or slower than before. It is a separate token rather than a reuse of `control` because the two describe different motion: `control` times a state change in place (a hover fill, a check mark) and runs 300ms, where a slider thumb covers distance to a value the user just chose and at 300ms reads as lagging the input rather than answering it. A drag is still never animated.\n\nThemes setting `slider.transitionMs` should set `motion.snap` instead, which also retimes anything else pointed at that token.",
18781
+ commit: "2dc4fb5"
18782
+ },
18783
+ {
18784
+ bump: "major",
18785
+ title: "Composite components now render their glyphs through `uni-icon` theme tokens instead of `uni-symbol` ligatures, completing the rule set in `AGENTS.md`. Thirteen theme options are renamed and retyped from `string` to `IconName`:",
18786
+ body: "| Component | before | after |\n| ---------------------- | --------------------------------- | ------------------------------------- |\n| date-input, time-input | `toggleSymbol` | `toggleIcon` (`calendar`, `clock`) |\n| calendar | `navPrevSymbol` / `navNextSymbol` | `navPrevIcon` / `navNextIcon` |\n| menu-item | `activeSymbol` | `activeIcon` |\n| avatar | `fallbackSymbol` | `fallbackIcon` (`person` \u2192 `profile`) |\n| breadcrumb | `separatorSymbol` | `separatorIcon` |\n| search-input | `searchSymbol` / `clearSymbol` | `searchIcon` / `clearIcon` |\n| callout, popover | `closeSymbol` | `closeIcon` |\n\n`drawer-header` and `dialog-header` shipped both `closeButtonIcon` and `closeButtonSymbol`; the `*Symbol` half is removed, and since `symbolName` outranked `iconName` inside the icon button, those two headers were still rendering the ligature path until now.\n\nFour glyphs join `BaseIcons` (65 total): `arrowUp`/`arrowDown` and `chevronsLeft`/`chevronsRight`, which is what unblocked `uni-sort-header` and `uni-paginator`. `select-input`, `multi-select-dropdown` and `data-search` also stopped hardcoding ligatures.\n\n**Migrating:** rename the option in your theme and swap the Material ligature for an icon token \u2014 `activeSymbol: 'check'` becomes `activeIcon: 'check'`, `toggleSymbol: 'calendar_month'` becomes `toggleIcon: 'calendar'`. Any glyph you need that `BaseIcons` lacks can be registered through `createTheme({ icons })`.\n\n`uni-symbol` is unchanged and still the right tool for app-facing inputs that take arbitrary ligature names \u2014 `symbolName` on icon-button, tag, alert, snackbar and menu-item, and `symbolLeft`/`symbolRight` on button. One consequence worth knowing: `uni-icon` has no variable-font axes, so a theme setting `symbol: { options: { weight } }` no longer affects these composites' glyphs \u2014 they take the icon set's weight (300). The Wellsourced theme, which sets weight 200, has accepted this.",
18787
+ commit: "44feb5d"
18788
+ },
18789
+ {
18790
+ bump: "major",
18791
+ title: "Remove the deprecated `toggle.size` theme option and wire up three component names that were declared but unreachable.",
18792
+ body: "`toggle.size` was the last `@deprecated` API in the library \u2014 the pre-`sizes` geometry (width 2x, knob 0.8x) that outranked the size block for every instance regardless of a toggle's own `size` input. No shipped theme set it. Use the `toggle.sizes` block, which gives each size token its own `width` / `height` / `padding`.\n\n`select`, `buttonGroup` and `progressBar` were listed in `ComponentName` with no theme entry and no `COMPONENT_NAME` provider behind them, so a theme could not dress them however it tried. Each now has an entry whose defaults are exactly what the component previously hardcoded, so nothing moves:\n- **`select`** \u2014 `toggleIcon`, `toggleColor`, `toggleSize` for the dropdown affordance, matching `uni-combobox`'s (`chevronDown`, `on-background-variant`, 20).\n- **`buttonGroup`** \u2014 `border` and `borderRadius` for the segmented frame, previously a literal `quaternary` border and 4px corners.\n- **`progressBar`** \u2014 `trackColor`, `fillColor`, `completeColor`, `borderColor` and `strokeWidth`, previously read straight off the palette.\n\nThe two remaining names are dealt with separately: `textButton` is renamed `inlineButton` and now backs the new `uni-inline-button`, and `footer` is removed from `ComponentName` altogether.",
18793
+ commit: "0b1c528"
18794
+ },
18795
+ {
18796
+ bump: "patch",
18797
+ title: "Fix unreadable text in `uni-card` under dark themes. The card's theme entry painted `backgroundColor` without the matching `color`, so any unstyled text inside it fell back to the user-agent default black. On a light theme that happened to read; on every dark theme it rendered black on a near-black surface \u2014 1.11:1 against a 4.5:1 AA requirement, reported from the theme switcher's preview card.",
18798
+ body: "The card now states `on-background` alongside its background, as `cardHeader` already did for each of its variants. All six registered themes measure between 13.8:1 and 18.1:1 on that text.\n\nAdded with the fix: a spec asserting the invariant across every component entry in the shipped themes \u2014 anything that paints a `backgroundColor` must also state a `color` \u2014 so the next half-painted surface fails a test rather than reaching a consumer.",
18799
+ commit: "85a1ec5"
18800
+ }
18801
+ ],
18802
+ dependencyBumps: []
18803
+ },
18804
+ {
18805
+ version: "10.4.0",
18806
+ entries: [
18807
+ {
18808
+ bump: "minor",
18809
+ title: "Give `uni-dialog` the drawer's three-row layout: a pinned `[uni-dialog-header]`, a scrolling body, and pinned `[uni-dialog-buttons]`.",
18810
+ body: "The surface is now a flex column that is `overflow: clip` on both axes, so it is never the scroll container \u2014 previously a long form scrolled the dialog's own title and action buttons off the screen. Unlike the drawer, the dialog declares no height and stays sized by its content, growing until it reaches `calc(100dvh - 2 \xD7 inset)` and only then scrolling its body.\n\nNew theme options: `dialog.inset` (gap from the viewport edge before the body scrolls, default `lg`), `dialog.bodyPadding` (pads the scrolling row alone; `dialog.padding` still insets all three rows), and `divider` on `dialogHeader` / `dialogButtons` for a border between a pinned row and the body \u2014 all off or unchanged by default, so existing dialogs keep their appearance.\n\n`[uni-dialog-header]` gains the shorter `[dialog-header]` alias, matching `[dialog-buttons]`; the long form keeps working. The `defaultCloseButton` now actually floats in the corner \u2014 its `position: absolute` was being lost to the icon button's own class, which left it inline at the top of the surface.\n\nThe drawer's overlay scrim now fades in and out with the panel instead of snapping. Its `::backdrop` had a background and no animation at all, so the dimming appeared and vanished instantly around a panel that took 250ms to slide. A new `drawer.motion` option (default `panel`) times the slide, the scrim's fade and the side panel's width transition together, replacing the hardcoded 250ms literals. The global reduced-motion rule now also reaches `::backdrop`, so both the drawer's and the dialog's scrim honour the preference (WCAG 2.3.3).\n\nDialog and drawer scrims now come from one token. `UniTheme` gains a `backdrops` scale \u2014 open and named like `shadows` and `motion` \u2014 and both components' `backdrop` option points at a name (`'scrim'`) instead of carrying its own CSS. They had drifted: the dialog washed the page white and blurred it while the drawer dimmed it dark, and a theme that dressed the dialog left the drawer on the library default. A raw style object is still accepted on either option, so a theme that states one keeps working.\n\nThe dialog's fade now reads the theme's `motion` token too (new `dialog.motion` option, default `panel`), replacing a hardcoded `350ms ease-in`. It shared the drawer's scrim but not its timing, so the same surface arrived at two speeds; both are now 250ms and a theme retimes them together.",
18811
+ commit: "cb5f08f"
18812
+ }
18813
+ ],
18814
+ dependencyBumps: []
18815
+ },
18004
18816
  {
18005
18817
  version: "10.3.0",
18006
18818
  entries: [
@@ -18549,6 +19361,29 @@ placeholder="Name or address\u2026"
18549
19361
  {
18550
19362
  package: "@uni-design-system/uni-react",
18551
19363
  releases: [
19364
+ {
19365
+ version: "11.0.0",
19366
+ entries: [
19367
+ {
19368
+ bump: "major",
19369
+ title: "Require Angular 22. `@angular/common`, `@angular/core` and `@angular/forms` move from `^21.2.0` to `^22.0.0`, so 11.x tracks Angular 22 and 10.x remains the Angular 21 line \u2014 one major of this package per Angular major, as documented. The old range excluded v22 outright, so an app that had taken Angular 22 could not install this package without a peer override.",
19370
+ body: "Two consequences of the framework's own changes:\n\n**`touch` output on every form control.** Angular 22 marks a bound field touched through a dedicated `touch` output rather than through the `touched` model, which the `Field` directive now binds inward only. All sixteen controls that track touched state (input, textarea, checkbox, radio, toggle, select, combobox, multi-select, tag-input, calendar, date/date-time/time inputs, number/number-range inputs, quantity-stepper, slider) emit it wherever they already considered the user done with the control. Without it, `touched()` never flips and error display gated on it never appears.\n\n**`min` / `max` typing.** The contract now types `min`/`max` as the control's own value type rather than as numbers. Where that still fits, the input was widened (`uni-slider`). Where it does not \u2014 a text control's native numeric attributes (`uni-input`), a range control's scalar bounds (`uni-number-range-input`), a tag limit (`uni-tag-input`) \u2014 the class member steps aside and the public binding name is preserved by an alias, so **templates are unchanged**. Only code reaching these through a `ViewChild` instance is affected: `min`/`max` are now `minAttr`/`maxAttr` on `uni-input`, `minValue`/`maxValue` on `uni-number-range-input`, and `max` is `maxLength` on `uni-tag-input`. `uni-number-range-input`'s protected `valueOf()` is renamed `partValue()`, since `valueOf` collides with `Object.valueOf`.\n\nAngular 22 also makes `OnPush` the default change detection; every component here already set it explicitly.",
19371
+ commit: "8fef84f"
19372
+ },
19373
+ {
19374
+ bump: "patch",
19375
+ title: "Mark the React package experimental. It shares a version number with `@uni-design-system/uni-angular` because the packages release together as a fixed group, not because they are at parity \u2014 React implements roughly a sixth of the Angular library's components and carries a single spec file. The version was reading as a maturity signal it had not earned.",
19376
+ body: "The package description and a README banner now say so; nothing about the code changes, and it stays published.",
19377
+ commit: "0b1c528"
19378
+ }
19379
+ ],
19380
+ dependencyBumps: []
19381
+ },
19382
+ {
19383
+ version: "10.4.0",
19384
+ entries: [],
19385
+ dependencyBumps: []
19386
+ },
18552
19387
  {
18553
19388
  version: "10.3.0",
18554
19389
  entries: [],
@@ -18797,6 +19632,23 @@ placeholder="Name or address\u2026"
18797
19632
  {
18798
19633
  package: "@uni-design-system/uni-mcp",
18799
19634
  releases: [
19635
+ {
19636
+ version: "11.0.0",
19637
+ entries: [
19638
+ {
19639
+ bump: "major",
19640
+ title: "Require Angular 22. `@angular/common`, `@angular/core` and `@angular/forms` move from `^21.2.0` to `^22.0.0`, so 11.x tracks Angular 22 and 10.x remains the Angular 21 line \u2014 one major of this package per Angular major, as documented. The old range excluded v22 outright, so an app that had taken Angular 22 could not install this package without a peer override.",
19641
+ body: "Two consequences of the framework's own changes:\n\n**`touch` output on every form control.** Angular 22 marks a bound field touched through a dedicated `touch` output rather than through the `touched` model, which the `Field` directive now binds inward only. All sixteen controls that track touched state (input, textarea, checkbox, radio, toggle, select, combobox, multi-select, tag-input, calendar, date/date-time/time inputs, number/number-range inputs, quantity-stepper, slider) emit it wherever they already considered the user done with the control. Without it, `touched()` never flips and error display gated on it never appears.\n\n**`min` / `max` typing.** The contract now types `min`/`max` as the control's own value type rather than as numbers. Where that still fits, the input was widened (`uni-slider`). Where it does not \u2014 a text control's native numeric attributes (`uni-input`), a range control's scalar bounds (`uni-number-range-input`), a tag limit (`uni-tag-input`) \u2014 the class member steps aside and the public binding name is preserved by an alias, so **templates are unchanged**. Only code reaching these through a `ViewChild` instance is affected: `min`/`max` are now `minAttr`/`maxAttr` on `uni-input`, `minValue`/`maxValue` on `uni-number-range-input`, and `max` is `maxLength` on `uni-tag-input`. `uni-number-range-input`'s protected `valueOf()` is renamed `partValue()`, since `valueOf` collides with `Object.valueOf`.\n\nAngular 22 also makes `OnPush` the default change detection; every component here already set it explicitly.",
19642
+ commit: "8fef84f"
19643
+ }
19644
+ ],
19645
+ dependencyBumps: []
19646
+ },
19647
+ {
19648
+ version: "10.4.0",
19649
+ entries: [],
19650
+ dependencyBumps: []
19651
+ },
18800
19652
  {
18801
19653
  version: "10.3.0",
18802
19654
  entries: [],
@@ -19810,6 +20662,10 @@ var BaseIcons = {
19810
20662
  chevronRight: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='m517.85-480-184-184L376-706.15 602.15-480 376-253.85 333.85-296l184-184Z'/%3e%3c/svg%3e",
19811
20663
  arrowLeft: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='m294.92-450 227.85 227.85L480-180 180-480l300-300 42.77 42.15L294.92-510H780v60H294.92Z'/%3e%3c/svg%3e",
19812
20664
  arrowRight: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M665.08-450H180v-60h485.08L437.23-737.85 480-780l300 300-300 300-42.77-42.15L665.08-450Z'/%3e%3c/svg%3e",
20665
+ arrowUp: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M450-180v-485.08L222.15-437.23 180-480l300-300 300 300-42.15 42.77L510-665.08V-180h-60Z'/%3e%3c/svg%3e",
20666
+ arrowDown: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M450-780v485.08L222.15-522.77 180-480l300 300 300-300-42.15-42.77L510-294.92V-780h-60Z'/%3e%3c/svg%3e",
20667
+ chevronsLeft: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M445-253.85 218.85-480 445-706.15 487.15-664 303.77-480l183.38 184L445-253.85Zm254 0L472.85-480 699-706.15 741.15-664 557.77-480l183.38 184L699-253.85Z'/%3e%3c/svg%3e",
20668
+ chevronsRight: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M402.23-480 218.85-664 261-706.15 487.15-480 261-253.85 218.85-296l183.38-184Zm254 0L472.85-664 515-706.15 741.15-480 515-253.85 472.85-296l183.38-184Z'/%3e%3c/svg%3e",
19813
20669
  home: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M240-200h133.85v-237.69h212.3V-200H720v-360L480-740.77 240-560v360Zm-60 60v-450l300-225.77L780-590v450H526.15v-237.69h-92.3V-140H180Zm300-330.38Z'/%3e%3c/svg%3e",
19814
20670
  building: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M130-136.92v-540h160v-160h380v320h160v380H530v-160H430v160H130Zm60-60h100v-100H190v100Zm0-160h100v-100H190v100Zm0-160h100v-100H190v100Zm160 160h100v-100H350v100Zm0-160h100v-100H350v100Zm0-160h100v-100H350v100Zm160 320h100v-100H510v100Zm0-160h100v-100H510v100Zm0-160h100v-100H510v100Zm160 480h100v-100H670v100Zm0-160h100v-100H670v100Z'/%3e%3c/svg%3e",
19815
20671
  externalLink: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M212.31-140Q182-140 161-161q-21-21-21-51.31v-535.38Q140-778 161-799q21-21 51.31-21h252.3v60h-252.3q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v535.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85h535.38q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46v-252.3h60v252.3Q820-182 799-161q-21 21-51.31 21H212.31Zm176.46-206.62-42.15-42.15L717.85-760H560v-60h260v260h-60v-157.85L388.77-346.62Z'/%3e%3c/svg%3e",
@@ -20064,8 +20920,16 @@ var BaseMotion = {
20064
20920
  control: {
20065
20921
  duration: 300,
20066
20922
  easing: "ease"
20923
+ },
20924
+ snap: {
20925
+ duration: 120,
20926
+ easing: "ease"
20067
20927
  }
20068
20928
  };
20929
+ var BaseBackdrops = { scrim: {
20930
+ background: "rgba(255, 255, 255, 0.6)",
20931
+ backdropFilter: "blur(2px)"
20932
+ } };
20069
20933
  var BaseRadii = {
20070
20934
  none: "none",
20071
20935
  xxs: "4px",
@@ -20122,7 +20986,7 @@ var buildComponents = (c) => ({
20122
20986
  typeface: "label",
20123
20987
  color: "on-background-variant",
20124
20988
  currentColor: "on-background",
20125
- separatorSymbol: "chevron_right",
20989
+ separatorIcon: "chevronRight",
20126
20990
  gap: "xs"
20127
20991
  } },
20128
20992
  appBar: { options: {
@@ -20140,9 +21004,10 @@ var buildComponents = (c) => ({
20140
21004
  divider: "light",
20141
21005
  elevation: "menu",
20142
21006
  padding: "md",
20143
- backdrop: { background: "rgba(0, 0, 0, 0.4)" },
21007
+ backdrop: "scrim",
20144
21008
  scrim: true,
20145
- background: "solid"
21009
+ background: "solid",
21010
+ motion: "panel"
20146
21011
  } },
20147
21012
  drawerHeader: { options: {
20148
21013
  color: void 0,
@@ -20169,7 +21034,7 @@ var buildComponents = (c) => ({
20169
21034
  options: {
20170
21035
  borderRadius: "max",
20171
21036
  typeface: "subtitle-2",
20172
- fallbackSymbol: "person"
21037
+ fallbackIcon: "profile"
20173
21038
  },
20174
21039
  variants: {
20175
21040
  primary: {
@@ -20226,8 +21091,8 @@ var buildComponents = (c) => ({
20226
21091
  ringWidth: 2
20227
21092
  } },
20228
21093
  searchInput: { options: {
20229
- searchSymbol: "search",
20230
- clearSymbol: "close",
21094
+ searchIcon: "search",
21095
+ clearIcon: "close",
20231
21096
  listColor: "primary-surface",
20232
21097
  listShadow: "menu",
20233
21098
  listBorderRadius: "xs",
@@ -20236,6 +21101,7 @@ var buildComponents = (c) => ({
20236
21101
  } },
20237
21102
  checkbox: {
20238
21103
  options: {
21104
+ motion: "control",
20239
21105
  size: 20,
20240
21106
  boxColor: "surface",
20241
21107
  borderRadius: 2,
@@ -20257,17 +21123,18 @@ var buildComponents = (c) => ({
20257
21123
  color: "primary-surface",
20258
21124
  border: "quaternary",
20259
21125
  padding: "sm",
21126
+ bodyPadding: void 0,
21127
+ inset: "lg",
20260
21128
  elevation: "dialog",
20261
- backdrop: {
20262
- background: "rgba(255, 255, 255, 0.6)",
20263
- backdropFilter: "blur(2px)"
20264
- }
21129
+ backdrop: "scrim",
21130
+ motion: "panel"
20265
21131
  } },
20266
21132
  dialogButtons: { options: {
20267
21133
  gap: "md",
20268
21134
  padding: "md",
20269
21135
  paddingBottom: "lg",
20270
21136
  justifyContent: "center",
21137
+ divider: void 0,
20271
21138
  confirmButtonVariant: "primary",
20272
21139
  cancelButtonVariant: "warn",
20273
21140
  buttonSize: "lg",
@@ -20280,9 +21147,26 @@ var buildComponents = (c) => ({
20280
21147
  height: 48,
20281
21148
  textRole: "title-large",
20282
21149
  textAlign: "center",
21150
+ divider: void 0,
20283
21151
  closeButtonIcon: "close",
20284
21152
  closeButtonSize: "md"
20285
21153
  } },
21154
+ select: { options: {
21155
+ toggleIcon: "chevronDown",
21156
+ toggleColor: "on-background-variant",
21157
+ toggleSize: 20
21158
+ } },
21159
+ buttonGroup: { options: {
21160
+ border: "quaternary",
21161
+ borderRadius: 4
21162
+ } },
21163
+ progressBar: { options: {
21164
+ trackColor: "primary-surface",
21165
+ fillColor: "secondary-surface",
21166
+ completeColor: "secondary",
21167
+ borderColor: "on-background-variant",
21168
+ strokeWidth: 1
21169
+ } },
20286
21170
  dropdown: { options: {
20287
21171
  border: "none",
20288
21172
  borderRadius: "xxs",
@@ -20310,7 +21194,7 @@ var buildComponents = (c) => ({
20310
21194
  typeface: "label",
20311
21195
  textColor: void 0,
20312
21196
  hoverColor: "primary-container",
20313
- activeSymbol: "check",
21197
+ activeIcon: "check",
20314
21198
  motion: "control"
20315
21199
  },
20316
21200
  variants: {
@@ -20334,7 +21218,7 @@ var buildComponents = (c) => ({
20334
21218
  maxWidth: "38ch",
20335
21219
  offset: 7,
20336
21220
  arrowSize: 8,
20337
- closeSymbol: "close",
21221
+ closeIcon: "close",
20338
21222
  headerTypeface: "title-small",
20339
21223
  tooltipPadding: "4px 8px",
20340
21224
  tooltipOpenDelay: 500,
@@ -20342,12 +21226,6 @@ var buildComponents = (c) => ({
20342
21226
  motion: "panel"
20343
21227
  } },
20344
21228
  expand: { options: { motion: "reveal" } },
20345
- footer: { options: {
20346
- height: 52,
20347
- color: "primary",
20348
- logoHeight: 18.6,
20349
- logoPadding: "md"
20350
- } },
20351
21229
  input: { options: {
20352
21230
  typeface: "input",
20353
21231
  color: "primary-surface",
@@ -20406,6 +21284,7 @@ var buildComponents = (c) => ({
20406
21284
  }
20407
21285
  },
20408
21286
  tabs: { options: {
21287
+ motion: "snap",
20409
21288
  typeface: "title-small",
20410
21289
  textColor: "on-surface-variant",
20411
21290
  activeTextColor: "primary",
@@ -20433,14 +21312,14 @@ var buildComponents = (c) => ({
20433
21312
  typeface: "tag",
20434
21313
  gap: "xs",
20435
21314
  removeIcon: "close",
20436
- selectedIcon: "check"
21315
+ selectedIcon: "check",
21316
+ motion: "control"
20437
21317
  },
20438
21318
  fixed: {
20439
21319
  display: "inline-flex",
20440
21320
  alignItems: "center",
20441
21321
  maxWidth: "100%",
20442
- border: "1px solid transparent",
20443
- transition: "background-color .2s ease, color .2s ease"
21322
+ border: "1px solid transparent"
20444
21323
  },
20445
21324
  variants: {
20446
21325
  ...tagVariant(c, "primary"),
@@ -20506,8 +21385,8 @@ var buildComponents = (c) => ({
20506
21385
  dayBorderRadius: "max",
20507
21386
  typeface: "label",
20508
21387
  gap: "xxs",
20509
- navPrevSymbol: "chevron_left",
20510
- navNextSymbol: "chevron_right",
21388
+ navPrevIcon: "chevronLeft",
21389
+ navNextIcon: "chevronRight",
20511
21390
  weekdayFormat: "short",
20512
21391
  showOutsideDays: false,
20513
21392
  todayStyle: "outline"
@@ -20546,13 +21425,13 @@ var buildComponents = (c) => ({
20546
21425
  descriptionColor: "on-primary-surface-variant"
20547
21426
  } },
20548
21427
  dateInput: { options: {
20549
- toggleSymbol: "calendar_month",
21428
+ toggleIcon: "calendar",
20550
21429
  popupShadow: "menu",
20551
21430
  popupBorderRadius: "xs",
20552
21431
  popupColor: "primary-surface"
20553
21432
  } },
20554
21433
  timeInput: { options: {
20555
- toggleSymbol: "schedule",
21434
+ toggleIcon: "clock",
20556
21435
  listColor: "primary-surface",
20557
21436
  listShadow: "menu",
20558
21437
  listBorderRadius: "xs",
@@ -20566,15 +21445,15 @@ var buildComponents = (c) => ({
20566
21445
  button: {
20567
21446
  options: {
20568
21447
  borderRadius: "max",
20569
- typeface: "button"
21448
+ typeface: "button",
21449
+ motion: "control"
20570
21450
  },
20571
21451
  fixed: {
20572
21452
  position: "relative",
20573
21453
  overflow: "hidden",
20574
21454
  outline: "0",
20575
21455
  border: "0",
20576
- cursor: "pointer",
20577
- transition: "all 0.28s ease"
21456
+ cursor: "pointer"
20578
21457
  },
20579
21458
  variantOptions: {
20580
21459
  primary: { focusColor: "primary" },
@@ -20655,7 +21534,10 @@ var buildComponents = (c) => ({
20655
21534
  }
20656
21535
  },
20657
21536
  iconButton: {
20658
- options: { borderRadius: "max" },
21537
+ options: {
21538
+ borderRadius: "max",
21539
+ motion: "control"
21540
+ },
20659
21541
  variantOptions: {
20660
21542
  primary: { focusColor: "primary" },
20661
21543
  secondary: { focusColor: "secondary" },
@@ -20732,6 +21614,13 @@ var buildComponents = (c) => ({
20732
21614
  }
20733
21615
  }
20734
21616
  },
21617
+ inlineButton: { options: {
21618
+ linkColor: "primary",
21619
+ underline: false,
21620
+ underlineOnHover: true,
21621
+ underlineOffset: "0.15em",
21622
+ gap: "xxs"
21623
+ } },
20735
21624
  progressGauge: {
20736
21625
  fixed: { textFill: c["on-background"] },
20737
21626
  variants: {
@@ -20767,7 +21656,8 @@ var buildComponents = (c) => ({
20767
21656
  options: { borderRadius: "xs" },
20768
21657
  fixed: {
20769
21658
  overflow: "hidden",
20770
- backgroundColor: c.background
21659
+ backgroundColor: c.background,
21660
+ color: c["on-background"]
20771
21661
  }
20772
21662
  },
20773
21663
  cardHeader: {
@@ -20803,6 +21693,7 @@ var buildComponents = (c) => ({
20803
21693
  placeholderColor: "disabled"
20804
21694
  } },
20805
21695
  dataTable: { options: {
21696
+ motion: "control",
20806
21697
  color: "primary-surface",
20807
21698
  border: "light",
20808
21699
  borderRadius: "sm",
@@ -20866,7 +21757,7 @@ var buildComponents = (c) => ({
20866
21757
  tooltipTextColor: "on-inverse-surface",
20867
21758
  tooltipShadow: "menu",
20868
21759
  tooltipBorderRadius: "xs",
20869
- transitionMs: 120
21760
+ motion: "snap"
20870
21761
  } },
20871
21762
  skeleton: { options: {
20872
21763
  color: "surface-variant",
@@ -20915,6 +21806,7 @@ var buildComponents = (c) => ({
20915
21806
  }
20916
21807
  },
20917
21808
  tooltip: { options: {
21809
+ motion: "notification",
20918
21810
  border: void 0,
20919
21811
  borderRadius: "xs",
20920
21812
  shadow: "raised",
@@ -20929,7 +21821,7 @@ var buildComponents = (c) => ({
20929
21821
  padding: "16px",
20930
21822
  headerTypeface: "title-small",
20931
21823
  typeface: "label",
20932
- closeSymbol: "close",
21824
+ closeIcon: "close",
20933
21825
  arrowSize: 8,
20934
21826
  offset: 12,
20935
21827
  scrimColor: "rgba(0, 0, 0, 0.45)",
@@ -20950,7 +21842,7 @@ var deepMerge = (base, override) => {
20950
21842
  for (const [key, value] of Object.entries(override)) out[key] = isRecord$1(value) && isRecord$1(out[key]) ? deepMerge(out[key], value) : value;
20951
21843
  return out;
20952
21844
  };
20953
- var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, motion, typography, borders, thicknesses, spacing, components }) => ({
21845
+ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, motion, backdrops, typography, borders, thicknesses, spacing, components }) => ({
20954
21846
  id,
20955
21847
  name,
20956
21848
  colors,
@@ -20966,6 +21858,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
20966
21858
  ...BaseMotion,
20967
21859
  ...motion
20968
21860
  },
21861
+ backdrops: {
21862
+ ...BaseBackdrops,
21863
+ ...backdrops
21864
+ },
20969
21865
  thicknesses: {
20970
21866
  ...BaseThicknesses,
20971
21867
  ...thicknesses
@@ -21996,7 +22892,7 @@ function createUniServer() {
21996
22892
  "list-tokens",
21997
22893
  {
21998
22894
  title: "List design tokens",
21999
- description: "Inventory of Uni design tokens. Filter by `type` (color, spacing, radius, shadow, border, thickness, typography, ...), `kind` (style|behavioral), or `theme`.",
22895
+ description: "Inventory of Uni design tokens. Filter by `type` (color, spacing, radius, shadow, border, backdrop, motion, thickness, typography, ...), `kind` (style|behavioral), or `theme`.",
22000
22896
  inputSchema: {
22001
22897
  type: z.string().optional(),
22002
22898
  kind: z.enum(["style", "behavioral"]).optional(),
@@ -22316,4 +23212,4 @@ export {
22316
23212
  buildStoredTheme,
22317
23213
  createUniServer
22318
23214
  };
22319
- //# sourceMappingURL=chunk-UAV4NZYN.js.map
23215
+ //# sourceMappingURL=chunk-RAD6CBGV.js.map