@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.
- package/CHANGELOG.md +16 -0
- package/dist/{chunk-UAV4NZYN.js → chunk-RAD6CBGV.js} +1194 -298
- package/dist/chunk-RAD6CBGV.js.map +1 -0
- package/dist/http.js +1 -1
- package/dist/server.js +1 -1
- package/dist/stdio.js +1 -1
- package/package.json +3 -3
- package/dist/chunk-UAV4NZYN.js.map +0 -1
|
@@ -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: "
|
|
11
|
-
builtAt: "2026-09-
|
|
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:
|
|
17
|
-
tokens:
|
|
16
|
+
components: 85,
|
|
17
|
+
tokens: 482,
|
|
18
18
|
themes: 2,
|
|
19
|
-
examples:
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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.
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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.
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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.
|
|
1442
|
-
"calendar.behavior.
|
|
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: "
|
|
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.
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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
|
|
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
|
|
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',
|
|
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',
|
|
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: "
|
|
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: "
|
|
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.
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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.
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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
|
-
{
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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.
|
|
12323
|
-
value: "
|
|
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: "
|
|
12330
|
-
DarkTheme: "
|
|
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:
|
|
12480
|
-
type: "
|
|
12855
|
+
value: "scrim",
|
|
12856
|
+
type: "string",
|
|
12481
12857
|
kind: "behavioral",
|
|
12482
12858
|
target: "component-prop",
|
|
12483
12859
|
appliesTo: "drawer",
|
|
12484
12860
|
themeValues: {
|
|
12485
|
-
LightTheme:
|
|
12486
|
-
DarkTheme:
|
|
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: "
|
|
12515
|
-
value:
|
|
12516
|
-
type: "
|
|
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.
|
|
12731
|
-
value: "
|
|
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: "
|
|
12738
|
-
DarkTheme: "
|
|
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.
|
|
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.
|
|
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:
|
|
13020
|
-
type: "
|
|
13431
|
+
value: "scrim",
|
|
13432
|
+
type: "string",
|
|
13021
13433
|
kind: "behavioral",
|
|
13022
13434
|
target: "component-prop",
|
|
13023
13435
|
appliesTo: "dialog",
|
|
13024
13436
|
themeValues: {
|
|
13025
|
-
LightTheme:
|
|
13026
|
-
DarkTheme:
|
|
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.
|
|
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.
|
|
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.
|
|
14555
|
-
value: "
|
|
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: "
|
|
14562
|
-
DarkTheme: "
|
|
15081
|
+
LightTheme: "chevronLeft",
|
|
15082
|
+
DarkTheme: "chevronLeft"
|
|
14563
15083
|
}
|
|
14564
15084
|
},
|
|
14565
15085
|
{
|
|
14566
|
-
id: "calendar.behavior.
|
|
14567
|
-
value: "
|
|
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: "
|
|
14574
|
-
DarkTheme: "
|
|
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.
|
|
14723
|
-
value: "
|
|
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: "
|
|
14730
|
-
DarkTheme: "
|
|
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.
|
|
14771
|
-
value: "
|
|
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: "
|
|
14778
|
-
DarkTheme: "
|
|
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.
|
|
15611
|
-
value:
|
|
15612
|
-
type: "
|
|
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:
|
|
15618
|
-
DarkTheme:
|
|
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.
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
16294
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
16486
|
-
|
|
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
|
-
|
|
17154
|
+
toggleIcon: "calendar",
|
|
16504
17155
|
popupShadow: "menu",
|
|
16505
17156
|
popupBorderRadius: "xs",
|
|
16506
17157
|
popupColor: "primary-surface"
|
|
16507
17158
|
},
|
|
16508
17159
|
timeInput: {
|
|
16509
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
16860
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
17052
|
-
|
|
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
|
-
|
|
17754
|
+
toggleIcon: "calendar",
|
|
17070
17755
|
popupShadow: "menu",
|
|
17071
17756
|
popupBorderRadius: "xs",
|
|
17072
17757
|
popupColor: "primary-surface"
|
|
17073
17758
|
},
|
|
17074
17759
|
timeInput: {
|
|
17075
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
20230
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
20510
|
-
|
|
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
|
-
|
|
21428
|
+
toggleIcon: "calendar",
|
|
20550
21429
|
popupShadow: "menu",
|
|
20551
21430
|
popupBorderRadius: "xs",
|
|
20552
21431
|
popupColor: "primary-surface"
|
|
20553
21432
|
} },
|
|
20554
21433
|
timeInput: { options: {
|
|
20555
|
-
|
|
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: {
|
|
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
|
-
|
|
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
|
-
|
|
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-
|
|
23215
|
+
//# sourceMappingURL=chunk-RAD6CBGV.js.map
|