@universal-material/web 3.6.13 → 3.6.14

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.
@@ -52,7 +52,7 @@ let OverflowMenu = class OverflowMenu extends LitElement {
52
52
  for (const item of this.#items) {
53
53
  hasAlwaysCollapsedItems = hasAlwaysCollapsedItems || item.collapse === 'always';
54
54
  if (this.#isNotCollapsedMenuItem(item)) {
55
- break;
55
+ continue;
56
56
  }
57
57
  collapsedCount++;
58
58
  }
@@ -1 +1 @@
1
- {"version":3,"file":"overflow-menu.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, render } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { map } from 'lit/directives/map.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { OverflowMenuItem } from './overflow-menu-item.js';\nimport { styles } from './overflow-menu.styles.js';\n\n@customElement('u-overflow-menu')\nexport class OverflowMenu extends LitElement {\n static override styles = styles;\n readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => this.#invalidate());\n #items: OverflowMenuItem[] = [];\n\n readonly #collapsedItems: OverflowMenuItem[] = [];\n\n @state() _renderMenu = false;\n\n @query('u-menu') menu?: UmMenu;\n\n #anchor: HTMLElement | null = null;\n @property()\n set anchor(value) {\n this.#anchor = value;\n\n this.#invalidate();\n this.#resizeObserver.disconnect();\n this.#resizeObserver.observe(this.anchor!);\n }\n\n get anchor(): HTMLElement | null {\n return this.#anchor ?? this;\n }\n\n readonly #menuItemsContainer = document.createElement('div');\n\n #updateMenusTimeout = 0;\n\n constructor() {\n super();\n\n this.#menuItemsContainer.slot = 'menu-items';\n setTimeout(() => this.appendChild(this.#menuItemsContainer));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.anchor = this.anchor;\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.#resizeObserver.disconnect();\n }\n\n #invalidate(): void {\n\n this.#updateMenuToggleVisibility();\n this.#updateMenuItems();\n }\n\n #updateMenuToggleVisibility(): void {\n\n let collapsedCount = 0;\n let hasAlwaysCollapsedItems = false;\n\n for (const item of this.#items) {\n\n hasAlwaysCollapsedItems = hasAlwaysCollapsedItems || item.collapse === 'always';\n\n if (this.#isNotCollapsedMenuItem(item)) {\n break;\n }\n\n collapsedCount++;\n }\n\n const firstItem = this.#items[0];\n const renderMenu = hasAlwaysCollapsedItems || !!firstItem && (this._renderMenu\n ? collapsedCount > 1\n : collapsedCount > 0);\n\n if (this._renderMenu !== renderMenu) {\n this._renderMenu = renderMenu;\n }\n }\n\n #updateMenuItems(): void {\n\n if (!this._renderMenu) {\n this.#collapsedItems.length = 0;\n return;\n }\n\n clearTimeout(this.#updateMenusTimeout);\n\n this.#updateMenusTimeout = setTimeout(() => {\n const previousCollapsedLength = this.#collapsedItems.length;\n this.#collapsedItems.length = 0;\n\n for (const item of this.#items) {\n\n if (this.#isNotCollapsedMenuItem(item)) {\n continue;\n }\n\n this.#collapsedItems.push(item);\n }\n\n if (previousCollapsedLength !== this.#collapsedItems.length) {\n this.requestUpdate();\n }\n }, 100);\n }\n\n #isNotCollapsedMenuItem(item: OverflowMenuItem) {\n return item.offsetTop === this.offsetTop && item.collapse !== 'always';\n }\n\n #handleSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this.#items = slot\n .assignedElements()\n .filter(el => el.tagName === 'U-OVERFLOW-MENU-ITEM')\n .reverse() as OverflowMenuItem[];\n\n this.#invalidate();\n }\n\n protected override render(): HTMLTemplateResult {\n this.#renderMenuItems();\n\n const classes = { 'show-menu': this._renderMenu };\n\n return html`\n <div class=\"container ${classMap(classes)}\">\n <div class=\"items-set\">\n <div class=\"empty-space\"></div>\n <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\n </div>\n ${when(this._renderMenu, () => html`\n <div class=\"inner-menu\">\n <u-icon-button @click=${{ handleEvent: () => this.menu?.toggle() }}>\n <slot name=\"icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\"\n fill=\"currentColor\">\n <path\n d=\"M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 \n 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 \n 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z\"/>\n </svg>\n </slot>\n </u-icon-button>\n <u-menu anchor-corner=\"end-end\">\n <slot name=\"menu-items\"></slot>\n </u-menu>\n </div>\n `)}\n </div>\n `;\n }\n\n #renderMenuItems() {\n const menuItems = html`\n ${map(\n this.#collapsedItems,\n item => {\n const nodes = item.childNodes.values();\n\n return html`\n <u-menu-item @click=${{ handleEvent: () => item.click() }}>\n <div slot=\"leading-icon\">\n ${map(nodes, node => node.cloneNode(true))}\n </div>\n \n ${item.label}\n </u-menu-item>\n `;\n })}`;\n\n render(menuItems, this.#menuItemsContainer);\n }\n}\n"]}
1
+ {"version":3,"file":"overflow-menu.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, render } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { map } from 'lit/directives/map.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { OverflowMenuItem } from './overflow-menu-item.js';\nimport { styles } from './overflow-menu.styles.js';\n\n@customElement('u-overflow-menu')\nexport class OverflowMenu extends LitElement {\n static override styles = styles;\n readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => this.#invalidate());\n #items: OverflowMenuItem[] = [];\n\n readonly #collapsedItems: OverflowMenuItem[] = [];\n\n @state() _renderMenu = false;\n\n @query('u-menu') menu?: UmMenu;\n\n #anchor: HTMLElement | null = null;\n @property()\n set anchor(value) {\n this.#anchor = value;\n\n this.#invalidate();\n this.#resizeObserver.disconnect();\n this.#resizeObserver.observe(this.anchor!);\n }\n\n get anchor(): HTMLElement | null {\n return this.#anchor ?? this;\n }\n\n readonly #menuItemsContainer = document.createElement('div');\n\n #updateMenusTimeout = 0;\n\n constructor() {\n super();\n\n this.#menuItemsContainer.slot = 'menu-items';\n setTimeout(() => this.appendChild(this.#menuItemsContainer));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.anchor = this.anchor;\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.#resizeObserver.disconnect();\n }\n\n #invalidate(): void {\n\n this.#updateMenuToggleVisibility();\n this.#updateMenuItems();\n }\n\n #updateMenuToggleVisibility(): void {\n\n let collapsedCount = 0;\n let hasAlwaysCollapsedItems = false;\n\n for (const item of this.#items) {\n\n hasAlwaysCollapsedItems = hasAlwaysCollapsedItems || item.collapse === 'always';\n\n if (this.#isNotCollapsedMenuItem(item)) {\n continue;\n }\n\n collapsedCount++;\n }\n\n const firstItem = this.#items[0];\n const renderMenu = hasAlwaysCollapsedItems || !!firstItem && (this._renderMenu\n ? collapsedCount > 1\n : collapsedCount > 0);\n\n if (this._renderMenu !== renderMenu) {\n this._renderMenu = renderMenu;\n }\n }\n\n #updateMenuItems(): void {\n\n if (!this._renderMenu) {\n this.#collapsedItems.length = 0;\n return;\n }\n\n clearTimeout(this.#updateMenusTimeout);\n\n this.#updateMenusTimeout = setTimeout(() => {\n const previousCollapsedLength = this.#collapsedItems.length;\n this.#collapsedItems.length = 0;\n\n for (const item of this.#items) {\n\n if (this.#isNotCollapsedMenuItem(item)) {\n continue;\n }\n\n this.#collapsedItems.push(item);\n }\n\n if (previousCollapsedLength !== this.#collapsedItems.length) {\n this.requestUpdate();\n }\n }, 100);\n }\n\n #isNotCollapsedMenuItem(item: OverflowMenuItem) {\n return item.offsetTop === this.offsetTop && item.collapse !== 'always';\n }\n\n #handleSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this.#items = slot\n .assignedElements()\n .filter(el => el.tagName === 'U-OVERFLOW-MENU-ITEM')\n .reverse() as OverflowMenuItem[];\n\n this.#invalidate();\n }\n\n protected override render(): HTMLTemplateResult {\n this.#renderMenuItems();\n\n const classes = { 'show-menu': this._renderMenu };\n\n return html`\n <div class=\"container ${classMap(classes)}\">\n <div class=\"items-set\">\n <div class=\"empty-space\"></div>\n <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\n </div>\n ${when(this._renderMenu, () => html`\n <div class=\"inner-menu\">\n <u-icon-button @click=${{ handleEvent: () => this.menu?.toggle() }}>\n <slot name=\"icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\"\n fill=\"currentColor\">\n <path\n d=\"M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 \n 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 \n 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z\"/>\n </svg>\n </slot>\n </u-icon-button>\n <u-menu anchor-corner=\"end-end\">\n <slot name=\"menu-items\"></slot>\n </u-menu>\n </div>\n `)}\n </div>\n `;\n }\n\n #renderMenuItems() {\n const menuItems = html`\n ${map(\n this.#collapsedItems,\n item => {\n const nodes = item.childNodes.values();\n\n return html`\n <u-menu-item @click=${{ handleEvent: () => item.click() }}>\n <div slot=\"leading-icon\">\n ${map(nodes, node => node.cloneNode(true))}\n </div>\n \n ${item.label}\n </u-menu-item>\n `;\n })}`;\n\n render(menuItems, this.#menuItemsContainer);\n }\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-material/web",
3
- "version": "3.6.13",
3
+ "version": "3.6.14",
4
4
  "description": "Material web components",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -3,12 +3,51 @@
3
3
  "version": 1.1,
4
4
  "tags": [
5
5
  {
6
- "name": "u-badge",
6
+ "name": "u-top-app-bar",
7
7
  "description": "\n---\n",
8
8
  "attributes": [
9
9
  {
10
- "name": "static",
10
+ "name": "position",
11
+ "values": [
12
+ {
13
+ "name": "fixed"
14
+ },
15
+ {
16
+ "name": "absolute"
17
+ },
18
+ {
19
+ "name": "static"
20
+ }
21
+ ]
22
+ },
23
+ {
24
+ "name": "size",
25
+ "values": [
26
+ {
27
+ "name": "small"
28
+ },
29
+ {
30
+ "name": "medium"
31
+ },
32
+ {
33
+ "name": "large"
34
+ }
35
+ ]
36
+ },
37
+ {
38
+ "name": "headline",
11
39
  "values": []
40
+ },
41
+ {
42
+ "name": "scrollContainer",
43
+ "values": [
44
+ {
45
+ "name": "none"
46
+ },
47
+ {
48
+ "name": "window"
49
+ }
50
+ ]
12
51
  }
13
52
  ],
14
53
  "references": []
@@ -455,6 +494,55 @@
455
494
  ],
456
495
  "references": []
457
496
  },
497
+ {
498
+ "name": "u-badge",
499
+ "description": "\n---\n",
500
+ "attributes": [
501
+ {
502
+ "name": "static",
503
+ "values": []
504
+ }
505
+ ],
506
+ "references": []
507
+ },
508
+ {
509
+ "name": "u-calendar",
510
+ "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
511
+ "attributes": [
512
+ {
513
+ "name": "value",
514
+ "values": []
515
+ },
516
+ {
517
+ "name": "dateOutsideMonth",
518
+ "values": []
519
+ },
520
+ {
521
+ "name": "locale",
522
+ "values": []
523
+ }
524
+ ],
525
+ "references": []
526
+ },
527
+ {
528
+ "name": "u-range-calendar",
529
+ "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
530
+ "attributes": [
531
+ {
532
+ "name": "value",
533
+ "values": []
534
+ },
535
+ {
536
+ "name": "dateOutsideMonth",
537
+ "values": []
538
+ },
539
+ {
540
+ "name": "locale",
541
+ "values": []
542
+ }
543
+ ],
544
+ "references": []
545
+ },
458
546
  {
459
547
  "name": "u-button-field",
460
548
  "description": "\n---\n",
@@ -533,94 +621,6 @@
533
621
  ],
534
622
  "references": []
535
623
  },
536
- {
537
- "name": "u-top-app-bar",
538
- "description": "\n---\n",
539
- "attributes": [
540
- {
541
- "name": "position",
542
- "values": [
543
- {
544
- "name": "fixed"
545
- },
546
- {
547
- "name": "absolute"
548
- },
549
- {
550
- "name": "static"
551
- }
552
- ]
553
- },
554
- {
555
- "name": "size",
556
- "values": [
557
- {
558
- "name": "small"
559
- },
560
- {
561
- "name": "medium"
562
- },
563
- {
564
- "name": "large"
565
- }
566
- ]
567
- },
568
- {
569
- "name": "headline",
570
- "values": []
571
- },
572
- {
573
- "name": "scrollContainer",
574
- "values": [
575
- {
576
- "name": "none"
577
- },
578
- {
579
- "name": "window"
580
- }
581
- ]
582
- }
583
- ],
584
- "references": []
585
- },
586
- {
587
- "name": "u-calendar",
588
- "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
589
- "attributes": [
590
- {
591
- "name": "value",
592
- "values": []
593
- },
594
- {
595
- "name": "dateOutsideMonth",
596
- "values": []
597
- },
598
- {
599
- "name": "locale",
600
- "values": []
601
- }
602
- ],
603
- "references": []
604
- },
605
- {
606
- "name": "u-range-calendar",
607
- "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
608
- "attributes": [
609
- {
610
- "name": "value",
611
- "values": []
612
- },
613
- {
614
- "name": "dateOutsideMonth",
615
- "values": []
616
- },
617
- {
618
- "name": "locale",
619
- "values": []
620
- }
621
- ],
622
- "references": []
623
- },
624
624
  {
625
625
  "name": "u-card-content",
626
626
  "description": "\n---\n",
@@ -893,6 +893,12 @@
893
893
  ],
894
894
  "references": []
895
895
  },
896
+ {
897
+ "name": "u-datepicker",
898
+ "description": "\n---\n",
899
+ "attributes": [],
900
+ "references": []
901
+ },
896
902
  {
897
903
  "name": "u-dialog",
898
904
  "description": "\n---\n\n\n### **Events:**\n - **close**\n- **closed**\n- **cancel**",
@@ -923,7 +929,7 @@
923
929
  "references": []
924
930
  },
925
931
  {
926
- "name": "u-datepicker",
932
+ "name": "u-elevation",
927
933
  "description": "\n---\n",
928
934
  "attributes": [],
929
935
  "references": []
@@ -1002,12 +1008,6 @@
1002
1008
  ],
1003
1009
  "references": []
1004
1010
  },
1005
- {
1006
- "name": "u-elevation",
1007
- "description": "\n---\n",
1008
- "attributes": [],
1009
- "references": []
1010
- },
1011
1011
  {
1012
1012
  "name": "u-icon",
1013
1013
  "description": "\n---\n",
@@ -1031,96 +1031,6 @@
1031
1031
  "attributes": [],
1032
1032
  "references": []
1033
1033
  },
1034
- {
1035
- "name": "u-drawer-headline",
1036
- "description": "\n---\n",
1037
- "attributes": [],
1038
- "references": []
1039
- },
1040
- {
1041
- "name": "u-drawer-item",
1042
- "description": "\n---\n",
1043
- "attributes": [
1044
- {
1045
- "name": "active",
1046
- "description": "Whether the drawer item is active or not\n\n_Note:_ Readonly",
1047
- "values": []
1048
- },
1049
- {
1050
- "name": "keep-drawer-open",
1051
- "description": "If true, it will not attempt to close de navigation drawer on click",
1052
- "values": []
1053
- },
1054
- {
1055
- "name": "disabled",
1056
- "description": "Whether the button is disabled or not.",
1057
- "values": []
1058
- },
1059
- {
1060
- "name": "href",
1061
- "description": "The URL that the link button points to.",
1062
- "values": []
1063
- },
1064
- {
1065
- "name": "target",
1066
- "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
1067
- "values": []
1068
- },
1069
- {
1070
- "name": "name",
1071
- "values": []
1072
- }
1073
- ],
1074
- "references": []
1075
- },
1076
- {
1077
- "name": "u-drawer",
1078
- "description": "\n---\n",
1079
- "attributes": [],
1080
- "references": []
1081
- },
1082
- {
1083
- "name": "u-side-navigation",
1084
- "description": "\n---\n",
1085
- "attributes": [
1086
- {
1087
- "name": "toggle-drawer",
1088
- "description": "Toggle the navigation drawer visibility\n\n_Modal drawer_: Open if `true`, closed if `false`\n_Standard drawer_: Collapsed if `true`, visible if `false`",
1089
- "values": []
1090
- }
1091
- ],
1092
- "references": []
1093
- },
1094
- {
1095
- "name": "u-overflow-menu-item",
1096
- "description": "\n---\n",
1097
- "attributes": [
1098
- {
1099
- "name": "label",
1100
- "values": []
1101
- },
1102
- {
1103
- "name": "menu-only",
1104
- "values": []
1105
- }
1106
- ],
1107
- "references": []
1108
- },
1109
- {
1110
- "name": "u-overflow-menu",
1111
- "description": "\n---\n",
1112
- "attributes": [
1113
- {
1114
- "name": "anchor",
1115
- "values": [
1116
- {
1117
- "name": "HTMLElement"
1118
- }
1119
- ]
1120
- }
1121
- ],
1122
- "references": []
1123
- },
1124
1034
  {
1125
1035
  "name": "u-menu-item",
1126
1036
  "description": "\n---\n",
@@ -1238,90 +1148,187 @@
1238
1148
  "references": []
1239
1149
  },
1240
1150
  {
1241
- "name": "u-radio-list-item",
1151
+ "name": "u-drawer-headline",
1152
+ "description": "\n---\n",
1153
+ "attributes": [],
1154
+ "references": []
1155
+ },
1156
+ {
1157
+ "name": "u-drawer-item",
1242
1158
  "description": "\n---\n",
1243
1159
  "attributes": [
1244
1160
  {
1245
- "name": "leading",
1161
+ "name": "active",
1162
+ "description": "Whether the drawer item is active or not\n\n_Note:_ Readonly",
1246
1163
  "values": []
1247
1164
  },
1248
1165
  {
1249
- "name": "hide-state-layer",
1166
+ "name": "keep-drawer-open",
1167
+ "description": "If true, it will not attempt to close de navigation drawer on click",
1250
1168
  "values": []
1251
1169
  },
1252
1170
  {
1253
- "name": "name",
1171
+ "name": "disabled",
1172
+ "description": "Whether the button is disabled or not.",
1254
1173
  "values": []
1255
1174
  },
1256
1175
  {
1257
- "name": "disabled",
1176
+ "name": "href",
1177
+ "description": "The URL that the link button points to.",
1258
1178
  "values": []
1259
1179
  },
1260
1180
  {
1261
- "name": "value",
1262
- "description": "The element value to use in form submission when checked.",
1181
+ "name": "target",
1182
+ "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
1263
1183
  "values": []
1264
1184
  },
1265
1185
  {
1266
- "name": "checked",
1186
+ "name": "name",
1267
1187
  "values": []
1268
1188
  }
1269
1189
  ],
1270
1190
  "references": []
1271
1191
  },
1272
1192
  {
1273
- "name": "u-radio",
1193
+ "name": "u-drawer",
1194
+ "description": "\n---\n",
1195
+ "attributes": [],
1196
+ "references": []
1197
+ },
1198
+ {
1199
+ "name": "u-side-navigation",
1274
1200
  "description": "\n---\n",
1275
1201
  "attributes": [
1276
1202
  {
1277
- "name": "hide-state-layer",
1203
+ "name": "toggle-drawer",
1204
+ "description": "Toggle the navigation drawer visibility\n\n_Modal drawer_: Open if `true`, closed if `false`\n_Standard drawer_: Collapsed if `true`, visible if `false`",
1278
1205
  "values": []
1279
- },
1206
+ }
1207
+ ],
1208
+ "references": []
1209
+ },
1210
+ {
1211
+ "name": "u-overflow-menu-item",
1212
+ "description": "\n---\n",
1213
+ "attributes": [
1280
1214
  {
1281
- "name": "name",
1215
+ "name": "label",
1282
1216
  "values": []
1283
1217
  },
1284
1218
  {
1285
- "name": "disabled",
1219
+ "name": "collapse",
1220
+ "values": [
1221
+ {
1222
+ "name": "auto"
1223
+ },
1224
+ {
1225
+ "name": "always"
1226
+ }
1227
+ ]
1228
+ }
1229
+ ],
1230
+ "references": []
1231
+ },
1232
+ {
1233
+ "name": "u-overflow-menu",
1234
+ "description": "\n---\n",
1235
+ "attributes": [
1236
+ {
1237
+ "name": "anchor",
1238
+ "values": [
1239
+ {
1240
+ "name": "HTMLElement"
1241
+ }
1242
+ ]
1243
+ }
1244
+ ],
1245
+ "references": []
1246
+ },
1247
+ {
1248
+ "name": "u-circular-progress",
1249
+ "description": "\n---\n",
1250
+ "attributes": [
1251
+ {
1252
+ "name": "value",
1286
1253
  "values": []
1287
1254
  },
1255
+ {
1256
+ "name": "max",
1257
+ "values": []
1258
+ }
1259
+ ],
1260
+ "references": []
1261
+ },
1262
+ {
1263
+ "name": "u-progress-bar",
1264
+ "description": "\n---\n",
1265
+ "attributes": [
1288
1266
  {
1289
1267
  "name": "value",
1290
- "description": "The element value to use in form submission when checked.",
1291
1268
  "values": []
1292
1269
  },
1293
1270
  {
1294
- "name": "checked",
1271
+ "name": "max",
1295
1272
  "values": []
1296
1273
  }
1297
1274
  ],
1298
1275
  "references": []
1299
1276
  },
1300
1277
  {
1301
- "name": "u-circular-progress",
1278
+ "name": "u-radio-list-item",
1302
1279
  "description": "\n---\n",
1303
1280
  "attributes": [
1281
+ {
1282
+ "name": "leading",
1283
+ "values": []
1284
+ },
1285
+ {
1286
+ "name": "hide-state-layer",
1287
+ "values": []
1288
+ },
1289
+ {
1290
+ "name": "name",
1291
+ "values": []
1292
+ },
1293
+ {
1294
+ "name": "disabled",
1295
+ "values": []
1296
+ },
1304
1297
  {
1305
1298
  "name": "value",
1299
+ "description": "The element value to use in form submission when checked.",
1306
1300
  "values": []
1307
1301
  },
1308
1302
  {
1309
- "name": "max",
1303
+ "name": "checked",
1310
1304
  "values": []
1311
1305
  }
1312
1306
  ],
1313
1307
  "references": []
1314
1308
  },
1315
1309
  {
1316
- "name": "u-progress-bar",
1310
+ "name": "u-radio",
1317
1311
  "description": "\n---\n",
1318
1312
  "attributes": [
1313
+ {
1314
+ "name": "hide-state-layer",
1315
+ "values": []
1316
+ },
1317
+ {
1318
+ "name": "name",
1319
+ "values": []
1320
+ },
1321
+ {
1322
+ "name": "disabled",
1323
+ "values": []
1324
+ },
1319
1325
  {
1320
1326
  "name": "value",
1327
+ "description": "The element value to use in form submission when checked.",
1321
1328
  "values": []
1322
1329
  },
1323
1330
  {
1324
- "name": "max",
1331
+ "name": "checked",
1325
1332
  "values": []
1326
1333
  }
1327
1334
  ],