@redvars/peacock 3.8.1 → 3.8.3

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.
Files changed (501) hide show
  1. package/dist/{BaseInput-14YmcfK7.js → BaseInput-CU1zZYKc.js} +3 -3
  2. package/dist/{BaseInput-14YmcfK7.js.map → BaseInput-CU1zZYKc.js.map} +1 -1
  3. package/dist/ButtonConstants-CahP2_NA.js +4 -0
  4. package/dist/ButtonConstants-CahP2_NA.js.map +1 -0
  5. package/dist/{IndividualComponent-DUINtMGK.js → IndividualComponent-Bdwyrvd6.js} +2 -2
  6. package/dist/{IndividualComponent-DUINtMGK.js.map → IndividualComponent-Bdwyrvd6.js.map} +1 -1
  7. package/dist/{NativeHyperlinkMixin-DrYXyfMQ.js → NativeHyperlinkMixin-D9J4aBTy.js} +4 -30
  8. package/dist/NativeHyperlinkMixin-D9J4aBTy.js.map +1 -0
  9. package/dist/accordion-item.js +338 -0
  10. package/dist/accordion-item.js.map +1 -0
  11. package/dist/accordion.js +159 -0
  12. package/dist/accordion.js.map +1 -0
  13. package/dist/alert.js +190 -0
  14. package/dist/alert.js.map +1 -0
  15. package/dist/app-bar.js +324 -0
  16. package/dist/app-bar.js.map +1 -0
  17. package/dist/assets/components.css +1 -1
  18. package/dist/assets/components.css.map +1 -1
  19. package/dist/assets/styles.css +1 -1
  20. package/dist/assets/styles.css.map +1 -1
  21. package/dist/attachable-controller-CAKVrfcG.js +119 -0
  22. package/dist/attachable-controller-CAKVrfcG.js.map +1 -0
  23. package/dist/avatar.js +114 -0
  24. package/dist/avatar.js.map +1 -0
  25. package/dist/babel-DBsfpl3B.js +18 -0
  26. package/dist/babel-DBsfpl3B.js.map +1 -0
  27. package/dist/badge.js +91 -0
  28. package/dist/badge.js.map +1 -0
  29. package/dist/base-Cl6v8-BZ.js +9 -0
  30. package/dist/base-Cl6v8-BZ.js.map +1 -0
  31. package/dist/bottom-sheet.js +14 -5
  32. package/dist/bottom-sheet.js.map +1 -1
  33. package/dist/breadcrumb-item.js +163 -0
  34. package/dist/breadcrumb-item.js.map +1 -0
  35. package/dist/breadcrumb.js +95 -0
  36. package/dist/breadcrumb.js.map +1 -0
  37. package/dist/button-group.js +87 -137
  38. package/dist/button-group.js.map +1 -1
  39. package/dist/button.js +863 -133
  40. package/dist/button.js.map +1 -1
  41. package/dist/calendar-column-view.js +8 -4
  42. package/dist/calendar-column-view.js.map +1 -1
  43. package/dist/calendar-month-view.js +8 -4
  44. package/dist/calendar-month-view.js.map +1 -1
  45. package/dist/calendar.js +8 -4
  46. package/dist/calendar.js.map +1 -1
  47. package/dist/canvas.js +8 -4
  48. package/dist/canvas.js.map +1 -1
  49. package/dist/card-content.js +1 -1
  50. package/dist/card.js +45 -52
  51. package/dist/card.js.map +1 -1
  52. package/dist/cb-compound-expression.js +6 -2
  53. package/dist/cb-compound-expression.js.map +1 -1
  54. package/dist/cb-divider.js +7 -3
  55. package/dist/cb-divider.js.map +1 -1
  56. package/dist/cb-expression.js +6 -2
  57. package/dist/cb-expression.js.map +1 -1
  58. package/dist/cb-predicate.js +7 -3
  59. package/dist/cb-predicate.js.map +1 -1
  60. package/dist/{chart-bar-cn6rrna-.js → chart-bar-CYoGNXnK.js} +6 -2
  61. package/dist/{chart-bar-cn6rrna-.js.map → chart-bar-CYoGNXnK.js.map} +1 -1
  62. package/dist/chart-bar.js +7 -6
  63. package/dist/chart-bar.js.map +1 -1
  64. package/dist/chart-doughnut.js +8 -3
  65. package/dist/chart-doughnut.js.map +1 -1
  66. package/dist/chart-pie.js +8 -3
  67. package/dist/chart-pie.js.map +1 -1
  68. package/dist/chart-stacked-bar.js +7 -6
  69. package/dist/chart-stacked-bar.js.map +1 -1
  70. package/dist/checkbox.js +526 -0
  71. package/dist/checkbox.js.map +1 -0
  72. package/dist/chip.js +459 -0
  73. package/dist/chip.js.map +1 -0
  74. package/dist/{class-map-YU7g0o3B.js → class-map-DG7CA1et.js} +2 -2
  75. package/dist/{class-map-YU7g0o3B.js.map → class-map-DG7CA1et.js.map} +1 -1
  76. package/dist/clock.js +6 -2
  77. package/dist/clock.js.map +1 -1
  78. package/dist/code-editor.js +45 -30
  79. package/dist/code-editor.js.map +1 -1
  80. package/dist/code-highlighter.js +82 -11216
  81. package/dist/code-highlighter.js.map +1 -1
  82. package/dist/color-picker.js +701 -0
  83. package/dist/color-picker.js.map +1 -0
  84. package/dist/condition-builder.js +5 -1
  85. package/dist/condition-builder.js.map +1 -1
  86. package/dist/container.js +141 -0
  87. package/dist/container.js.map +1 -0
  88. package/dist/custom-elements-jsdocs.json +823 -778
  89. package/dist/custom-elements.json +4067 -2207
  90. package/dist/datasource-B2eRh6Or.js +108 -0
  91. package/dist/datasource-B2eRh6Or.js.map +1 -0
  92. package/dist/dispatch-event-utils-CuEqjlPT.js.map +1 -1
  93. package/dist/divider.js +135 -0
  94. package/dist/divider.js.map +1 -0
  95. package/dist/dropdown-button.js +11 -6
  96. package/dist/dropdown-button.js.map +1 -1
  97. package/dist/element-internals-2CMts_0M.js +290 -0
  98. package/dist/element-internals-2CMts_0M.js.map +1 -0
  99. package/dist/elevation.js +94 -0
  100. package/dist/elevation.js.map +1 -0
  101. package/dist/empty-state.js +194 -0
  102. package/dist/empty-state.js.map +1 -0
  103. package/dist/estree-C2LDzX4U.js +47 -0
  104. package/dist/estree-C2LDzX4U.js.map +1 -0
  105. package/dist/{event-manager-D-QCmUgR.js → event-manager-DTyX2uYD.js} +2 -2
  106. package/dist/{event-manager-D-QCmUgR.js.map → event-manager-DTyX2uYD.js.map} +1 -1
  107. package/dist/fab.js +139 -148
  108. package/dist/fab.js.map +1 -1
  109. package/dist/field.js +461 -0
  110. package/dist/field.js.map +1 -0
  111. package/dist/{popover-DUPmMVWS.js → floating-controller-CnUZnOhK.js} +2 -171
  112. package/dist/floating-controller-CnUZnOhK.js.map +1 -0
  113. package/dist/{flow-designer-node-BWrPuxAR.js → flow-designer-node-DsVwQTac.js} +7 -3
  114. package/dist/{flow-designer-node-BWrPuxAR.js.map → flow-designer-node-DsVwQTac.js.map} +1 -1
  115. package/dist/flow-designer-node.js +3 -3
  116. package/dist/flow-designer.js +19 -12
  117. package/dist/flow-designer.js.map +1 -1
  118. package/dist/focus-ring.js +126 -0
  119. package/dist/focus-ring.js.map +1 -0
  120. package/dist/form-associated-BXADnjOB.js +388 -0
  121. package/dist/form-associated-BXADnjOB.js.map +1 -0
  122. package/dist/html-D22sQuVy.js +27 -0
  123. package/dist/html-D22sQuVy.js.map +1 -0
  124. package/dist/html-editor.js +21 -9
  125. package/dist/html-editor.js.map +1 -1
  126. package/dist/hyperlink-DLvb6MXE.js +98 -0
  127. package/dist/hyperlink-DLvb6MXE.js.map +1 -0
  128. package/dist/icon-button.js +1064 -0
  129. package/dist/icon-button.js.map +1 -0
  130. package/dist/icon.js +170 -0
  131. package/dist/icon.js.map +1 -0
  132. package/dist/if-defined-BXZpRQ4P.js +10 -0
  133. package/dist/if-defined-BXZpRQ4P.js.map +1 -0
  134. package/dist/image.js +201 -0
  135. package/dist/image.js.map +1 -0
  136. package/dist/index-_g_oLekF.js +14095 -0
  137. package/dist/index-_g_oLekF.js.map +1 -0
  138. package/dist/index.js +74 -20
  139. package/dist/index.js.map +1 -1
  140. package/dist/is-dark-mode-DOcaw4Yq.js.map +1 -1
  141. package/dist/is-link-Dk2OV3PM.js +6 -0
  142. package/dist/is-link-Dk2OV3PM.js.map +1 -0
  143. package/dist/item.js +213 -0
  144. package/dist/item.js.map +1 -0
  145. package/dist/link.js +75 -0
  146. package/dist/link.js.map +1 -0
  147. package/dist/list-H0itjRte.js +526 -0
  148. package/dist/list-H0itjRte.js.map +1 -0
  149. package/dist/list.js +14 -0
  150. package/dist/list.js.map +1 -0
  151. package/dist/{peacock-loader.js → loader.js} +87 -22
  152. package/dist/loader.js.map +1 -0
  153. package/dist/menu-item.js +388 -0
  154. package/dist/menu-item.js.map +1 -0
  155. package/dist/menu.js +520 -0
  156. package/dist/menu.js.map +1 -0
  157. package/dist/modal.js +9 -5
  158. package/dist/modal.js.map +1 -1
  159. package/dist/navigation-rail-item.js +400 -0
  160. package/dist/navigation-rail-item.js.map +1 -0
  161. package/dist/navigation-rail.js +219 -0
  162. package/dist/navigation-rail.js.map +1 -0
  163. package/dist/notification-manager.js +8 -4
  164. package/dist/notification-manager.js.map +1 -1
  165. package/dist/notification.js +8 -4
  166. package/dist/notification.js.map +1 -1
  167. package/dist/number-counter.js +7 -3
  168. package/dist/number-counter.js.map +1 -1
  169. package/dist/{observe-slot-change-D8Xg-kSS.js → observe-slot-change-DPxaZrZF.js} +3 -4
  170. package/dist/observe-slot-change-DPxaZrZF.js.map +1 -0
  171. package/dist/option.js +121 -0
  172. package/dist/option.js.map +1 -0
  173. package/dist/pagination.js +255 -0
  174. package/dist/pagination.js.map +1 -0
  175. package/dist/pierre-dark-DFWl0m-C.js +4 -0
  176. package/dist/pierre-dark-DFWl0m-C.js.map +1 -0
  177. package/dist/pierre-light-BEkAPImt.js +4 -0
  178. package/dist/pierre-light-BEkAPImt.js.map +1 -0
  179. package/dist/popover-content.js +7 -3
  180. package/dist/popover-content.js.map +1 -1
  181. package/dist/popover.js +175 -3
  182. package/dist/popover.js.map +1 -1
  183. package/dist/postcss-BhbitHaI.js +64 -0
  184. package/dist/postcss-BhbitHaI.js.map +1 -0
  185. package/dist/{property-1psGvXOq.js → property-B49QQ8pS.js} +2 -2
  186. package/dist/{property-1psGvXOq.js.map → property-B49QQ8pS.js.map} +1 -1
  187. package/dist/query-CHb9Ft_d.js +10 -0
  188. package/dist/query-CHb9Ft_d.js.map +1 -0
  189. package/dist/query-assigned-elements-BJaGSqM0.js +10 -0
  190. package/dist/query-assigned-elements-BJaGSqM0.js.map +1 -0
  191. package/dist/radio.js +476 -0
  192. package/dist/radio.js.map +1 -0
  193. package/dist/ripple.js +506 -0
  194. package/dist/ripple.js.map +1 -0
  195. package/dist/search.js +12 -7
  196. package/dist/search.js.map +1 -1
  197. package/dist/segmented-button-group.js +137 -0
  198. package/dist/segmented-button-group.js.map +1 -0
  199. package/dist/segmented-button.js +289 -0
  200. package/dist/segmented-button.js.map +1 -0
  201. package/dist/select-CspawZ18.js +3944 -0
  202. package/dist/select-CspawZ18.js.map +1 -0
  203. package/dist/side-sheet.js +9 -5
  204. package/dist/side-sheet.js.map +1 -1
  205. package/dist/skeleton.js +122 -0
  206. package/dist/skeleton.js.map +1 -0
  207. package/dist/slider.js +346 -0
  208. package/dist/slider.js.map +1 -0
  209. package/dist/snackbar.js +335 -0
  210. package/dist/snackbar.js.map +1 -0
  211. package/dist/spinner.js +100 -0
  212. package/dist/spinner.js.map +1 -0
  213. package/dist/split-button.js +10 -5
  214. package/dist/split-button.js.map +1 -1
  215. package/dist/spread-B5cgadZl.js +32 -0
  216. package/dist/spread-B5cgadZl.js.map +1 -0
  217. package/dist/src/__internal/aria/aria.d.ts +98 -0
  218. package/dist/src/__internal/aria/delegate.d.ts +54 -0
  219. package/dist/src/__internal/events/dispatch-hooks.d.ts +80 -0
  220. package/dist/src/__internal/mixins/element-internals.d.ts +40 -0
  221. package/dist/src/__internal/mixins/form-associated.d.ts +174 -0
  222. package/dist/src/__internal/mixins/form-submitter.d.ts +59 -0
  223. package/dist/src/__internal/mixins/hyperlink.d.ts +42 -0
  224. package/dist/src/__internal/mixins/mixin.d.ts +49 -0
  225. package/dist/src/{__utils → __internal/utils}/observe-slot-change.d.ts +1 -0
  226. package/dist/src/accordion/accordion-item.d.ts +3 -1
  227. package/dist/src/accordion/accordion.d.ts +1 -1
  228. package/dist/src/alert/alert.d.ts +43 -0
  229. package/dist/src/alert/index.d.ts +1 -0
  230. package/dist/src/app-bar/app-bar.d.ts +92 -0
  231. package/dist/src/app-bar/index.d.ts +1 -0
  232. package/dist/src/avatar/avatar.d.ts +2 -0
  233. package/dist/src/bottom-sheet/bottom-sheet.d.ts +1 -1
  234. package/dist/src/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +1 -0
  235. package/dist/src/button/ButtonTypes.d.ts +5 -0
  236. package/dist/src/button/base-button/base-button.d.ts +18 -0
  237. package/dist/src/button/button/button.d.ts +29 -37
  238. package/dist/src/button/button-group/button-group.d.ts +17 -18
  239. package/dist/src/{fab → button/fab}/fab.d.ts +8 -26
  240. package/dist/src/button/icon-button/icon-button.d.ts +20 -27
  241. package/dist/src/button/index.d.ts +1 -0
  242. package/dist/src/calendar/calendar.d.ts +1 -1
  243. package/dist/src/canvas/canvas.d.ts +1 -1
  244. package/dist/src/card/card.d.ts +5 -6
  245. package/dist/src/chart-bar/chart-bar.d.ts +1 -1
  246. package/dist/src/chart-bar/chart-stacked-bar.d.ts +1 -1
  247. package/dist/src/checkbox/checkbox.d.ts +5 -1
  248. package/dist/src/chip/chip/chip.d.ts +9 -8
  249. package/dist/src/code-highlighter/code-highlighter.d.ts +2 -2
  250. package/dist/src/color-picker/color-picker.d.ts +85 -0
  251. package/dist/src/color-picker/index.d.ts +1 -0
  252. package/dist/src/container/container.d.ts +5 -1
  253. package/dist/src/divider/divider.d.ts +2 -0
  254. package/dist/src/empty-state/empty-state.d.ts +1 -0
  255. package/dist/src/field/field.d.ts +19 -1
  256. package/dist/src/focus-ring/focus-ring.d.ts +3 -7
  257. package/dist/src/html-editor/html-editor.d.ts +1 -1
  258. package/dist/src/icon/icon.d.ts +9 -4
  259. package/dist/src/image/image.d.ts +4 -0
  260. package/dist/src/index.d.ts +8 -6
  261. package/dist/src/item/item.d.ts +19 -29
  262. package/dist/src/link/link.d.ts +1 -1
  263. package/dist/src/list/list-item.d.ts +10 -6
  264. package/dist/src/list/list.d.ts +27 -2
  265. package/dist/src/menu/menu/menu.d.ts +14 -0
  266. package/dist/src/menu/menu-item/menu-item.d.ts +11 -4
  267. package/dist/src/modal/modal.d.ts +1 -1
  268. package/dist/src/navigation-rail/navigation-rail-item.d.ts +5 -4
  269. package/dist/src/navigation-rail/navigation-rail.d.ts +1 -1
  270. package/dist/src/radio/radio.d.ts +5 -0
  271. package/dist/src/ripple/ripple.d.ts +10 -1
  272. package/dist/src/search/search.d.ts +1 -1
  273. package/dist/src/segmented-button/segmented-button-group.d.ts +2 -2
  274. package/dist/src/segmented-button/segmented-button.d.ts +2 -0
  275. package/dist/src/side-sheet/side-sheet.d.ts +1 -1
  276. package/dist/src/skeleton/skeleton.d.ts +1 -0
  277. package/dist/src/slider/slider.d.ts +1 -0
  278. package/dist/src/snackbar/snackbar.d.ts +12 -2
  279. package/dist/src/svg/svg.d.ts +5 -0
  280. package/dist/src/table/table.d.ts +5 -0
  281. package/dist/src/tabs/tab.d.ts +2 -7
  282. package/dist/src/toolbar/toolbar.d.ts +2 -2
  283. package/dist/standalone-Ccq0tWwA.js +32 -0
  284. package/dist/standalone-Ccq0tWwA.js.map +1 -0
  285. package/dist/{state-DwbEjqVk.js → state-DkTK9EGF.js} +2 -2
  286. package/dist/{state-DwbEjqVk.js.map → state-DkTK9EGF.js.map} +1 -1
  287. package/dist/{style-map-DVmWOuYy.js → style-map-BQD5Et1D.js} +2 -2
  288. package/dist/{style-map-DVmWOuYy.js.map → style-map-BQD5Et1D.js.map} +1 -1
  289. package/dist/sub-menu.js +246 -0
  290. package/dist/sub-menu.js.map +1 -0
  291. package/dist/svg.js +273 -0
  292. package/dist/svg.js.map +1 -0
  293. package/dist/tab-group.js +188 -0
  294. package/dist/tab-group.js.map +1 -0
  295. package/dist/tab-panel.js +61 -0
  296. package/dist/tab-panel.js.map +1 -0
  297. package/dist/tab.js +658 -0
  298. package/dist/tab.js.map +1 -0
  299. package/dist/table.js +620 -0
  300. package/dist/table.js.map +1 -0
  301. package/dist/tabs.js +240 -0
  302. package/dist/tabs.js.map +1 -0
  303. package/dist/throttle-C7ZAPqtu.js +24 -0
  304. package/dist/throttle-C7ZAPqtu.js.map +1 -0
  305. package/dist/toolbar.js +9 -5
  306. package/dist/toolbar.js.map +1 -1
  307. package/dist/tooltip.js +270 -0
  308. package/dist/tooltip.js.map +1 -0
  309. package/dist/tsconfig.tsbuildinfo +1 -1
  310. package/dist/{unsafe-html-BsGUjx94.js → unsafe-html-Ct0N2_UU.js} +2 -2
  311. package/dist/{unsafe-html-BsGUjx94.js.map → unsafe-html-Ct0N2_UU.js.map} +1 -1
  312. package/dist/when-DEJm_QN9.js +9 -0
  313. package/dist/when-DEJm_QN9.js.map +1 -0
  314. package/package.json +4 -2
  315. package/readme.md +4 -4
  316. package/scss/mixin.scss +9 -6
  317. package/src/__internal/aria/aria.ts +293 -0
  318. package/src/__internal/aria/delegate.ts +206 -0
  319. package/src/__internal/events/dispatch-hooks.ts +182 -0
  320. package/src/__internal/mixins/element-internals.ts +73 -0
  321. package/src/__internal/mixins/form-associated.ts +295 -0
  322. package/src/__internal/mixins/form-submitter.ts +133 -0
  323. package/src/__internal/mixins/hyperlink.ts +71 -0
  324. package/src/__internal/mixins/mixin.ts +58 -0
  325. package/src/{__utils → __internal/utils}/observe-slot-change.ts +2 -5
  326. package/src/accordion/accordion-item.ts +6 -2
  327. package/src/accordion/accordion.ts +4 -2
  328. package/src/accordion/demo/index.html +95 -90
  329. package/src/alert/alert.scss +82 -0
  330. package/src/{banner/banner.ts → alert/alert.ts} +22 -22
  331. package/src/alert/index.ts +1 -0
  332. package/src/app-bar/app-bar-colors.scss +17 -0
  333. package/src/app-bar/app-bar.scss +165 -0
  334. package/src/app-bar/app-bar.ts +155 -0
  335. package/src/app-bar/index.ts +1 -0
  336. package/src/avatar/avatar.ts +4 -0
  337. package/src/badge/badge.ts +2 -0
  338. package/src/bottom-sheet/bottom-sheet.ts +8 -2
  339. package/src/breadcrumb/breadcrumb/breadcrumb.ts +2 -0
  340. package/src/breadcrumb/breadcrumb-item/breadcrumb-item.ts +3 -0
  341. package/src/button/ButtonTypes.ts +17 -0
  342. package/src/button/base-button/base-button.ts +85 -0
  343. package/src/button/button/button-base.scss +307 -0
  344. package/src/button/button/button-colors.scss +27 -32
  345. package/src/button/button/button-layers.scss +126 -43
  346. package/src/button/button/button-shapes.scss +73 -0
  347. package/src/button/button/button.scss +12 -286
  348. package/src/button/button/button.ts +174 -194
  349. package/src/button/button-group/button-group.scss +43 -36
  350. package/src/button/button-group/button-group.ts +26 -137
  351. package/src/{fab → button/fab}/fab-colors.scss +0 -10
  352. package/src/button/fab/fab-sizes.scss +37 -0
  353. package/src/button/fab/fab.scss +172 -0
  354. package/src/{fab → button/fab}/fab.ts +69 -109
  355. package/src/button/icon-button/icon-button-sizes.scss +18 -3
  356. package/src/button/icon-button/icon-button.scss +5 -0
  357. package/src/button/icon-button/icon-button.ts +111 -141
  358. package/src/button/index.ts +7 -0
  359. package/src/calendar/calendar.ts +2 -2
  360. package/src/canvas/canvas.ts +2 -2
  361. package/src/card/card.scss +21 -8
  362. package/src/card/card.ts +20 -40
  363. package/src/chart-bar/chart-bar.ts +2 -2
  364. package/src/chart-bar/chart-stacked-bar.ts +2 -2
  365. package/src/checkbox/checkbox.ts +12 -4
  366. package/src/chip/chip/chip.scss +1 -1
  367. package/src/chip/chip/chip.ts +35 -55
  368. package/src/chip/demo/index.html +30 -26
  369. package/src/code-editor/code-editor.ts +68 -58
  370. package/src/code-editor/demo/index.html +32 -27
  371. package/src/code-highlighter/code-highlighter.ts +95 -40
  372. package/src/code-highlighter/demo/index.html +24 -21
  373. package/src/color-picker/color-picker.scss +217 -0
  374. package/src/color-picker/color-picker.ts +478 -0
  375. package/src/color-picker/index.ts +1 -0
  376. package/src/container/container.ts +8 -2
  377. package/src/date-picker/date-picker.ts +2 -3
  378. package/src/divider/divider.ts +5 -1
  379. package/src/dropdown-button/demo/index.html +106 -101
  380. package/src/dropdown-button/dropdown-button.ts +1 -1
  381. package/src/elevation/elevation.ts +2 -0
  382. package/src/empty-state/empty-state.ts +3 -0
  383. package/src/field/field.ts +52 -33
  384. package/src/focus-ring/focus-ring.ts +5 -7
  385. package/src/html-editor/html-editor.ts +28 -16
  386. package/src/icon/datasource.ts +1 -1
  387. package/src/icon/icon.ts +27 -15
  388. package/src/image/image.ts +18 -6
  389. package/src/index.ts +25 -6
  390. package/src/input/input.ts +2 -2
  391. package/src/item/item.scss +127 -161
  392. package/src/item/item.ts +69 -323
  393. package/src/link/link.ts +3 -1
  394. package/src/list/list-item.scss +48 -32
  395. package/src/list/list-item.ts +109 -79
  396. package/src/list/list.scss +1 -13
  397. package/src/list/list.ts +170 -5
  398. package/src/{peacock-loader.ts → loader.ts} +95 -79
  399. package/src/menu/menu/menu.scss +15 -26
  400. package/src/menu/menu/menu.ts +20 -9
  401. package/src/menu/menu-item/menu-item.scss +82 -20
  402. package/src/menu/menu-item/menu-item.ts +85 -46
  403. package/src/menu/sub-menu/sub-menu.scss +5 -1
  404. package/src/menu/sub-menu/sub-menu.ts +3 -0
  405. package/src/modal/modal.ts +2 -2
  406. package/src/navigation-rail/navigation-rail-item.scss +25 -8
  407. package/src/navigation-rail/navigation-rail-item.ts +21 -36
  408. package/src/navigation-rail/navigation-rail.scss +25 -21
  409. package/src/navigation-rail/navigation-rail.ts +4 -2
  410. package/src/number-field/number-field.ts +2 -2
  411. package/src/pagination/pagination.ts +2 -0
  412. package/src/popover/popover.ts +3 -3
  413. package/src/radio/radio.ts +13 -5
  414. package/src/ripple/ripple.ts +14 -1
  415. package/src/search/search.ts +3 -3
  416. package/src/segmented-button/segmented-button-group.ts +8 -4
  417. package/src/segmented-button/segmented-button.ts +4 -0
  418. package/src/select/option.ts +2 -0
  419. package/src/side-sheet/side-sheet.ts +3 -3
  420. package/src/sidebar-menu/sidebar-menu-item.scss +12 -6
  421. package/src/sidebar-menu/sidebar-menu-item.ts +3 -2
  422. package/src/skeleton/skeleton.ts +3 -0
  423. package/src/slider/slider.ts +4 -1
  424. package/src/snackbar/snackbar.ts +40 -25
  425. package/src/spinner/spinner.ts +2 -0
  426. package/src/svg/svg.ts +27 -9
  427. package/src/switch/switch.ts +1 -1
  428. package/src/table/table.ts +16 -3
  429. package/src/tabs/demo/index.html +79 -79
  430. package/src/tabs/tab-group.ts +2 -0
  431. package/src/tabs/tab-panel.ts +2 -0
  432. package/src/tabs/tab.scss +4 -4
  433. package/src/tabs/tab.ts +16 -39
  434. package/src/tabs/tabs.ts +2 -0
  435. package/src/textarea/textarea.ts +2 -2
  436. package/src/time-picker/time-picker.ts +2 -2
  437. package/src/toolbar/toolbar.ts +3 -3
  438. package/src/tooltip/tooltip.ts +14 -8
  439. package/src/url-field/url-field.ts +2 -3
  440. package/dist/ButtonConstants-D06bY4uy.js +0 -114
  441. package/dist/ButtonConstants-D06bY4uy.js.map +0 -1
  442. package/dist/NativeHyperlinkMixin-DrYXyfMQ.js.map +0 -1
  443. package/dist/banner.js +0 -186
  444. package/dist/banner.js.map +0 -1
  445. package/dist/button-colors-D7sJyPy8.js +0 -586
  446. package/dist/button-colors-D7sJyPy8.js.map +0 -1
  447. package/dist/icon-CueRR7wx.js +0 -260
  448. package/dist/icon-CueRR7wx.js.map +0 -1
  449. package/dist/icon-button-CAzYr_qr.js +0 -318
  450. package/dist/icon-button-CAzYr_qr.js.map +0 -1
  451. package/dist/navigation-rail-CM_svs5_.js +0 -14184
  452. package/dist/navigation-rail-CM_svs5_.js.map +0 -1
  453. package/dist/observe-slot-change-D8Xg-kSS.js.map +0 -1
  454. package/dist/peacock-loader.js.map +0 -1
  455. package/dist/popover-DUPmMVWS.js.map +0 -1
  456. package/dist/query-QBcUV-L_.js +0 -15
  457. package/dist/query-QBcUV-L_.js.map +0 -1
  458. package/dist/src/banner/banner.d.ts +0 -43
  459. package/dist/src/banner/index.d.ts +0 -1
  460. package/dist/src/button/GroupButtonInterface.d.ts +0 -4
  461. package/src/banner/banner.scss +0 -82
  462. package/src/banner/index.ts +0 -1
  463. package/src/button/GroupButtonInterface.ts +0 -4
  464. package/src/button/button/only-button.scss +0 -13
  465. package/src/fab/fab-sizes.scss +0 -37
  466. package/src/fab/fab.scss +0 -143
  467. /package/dist/src/{__controllers → __internal/controllers}/attachable-controller.d.ts +0 -0
  468. /package/dist/src/{__controllers → __internal/controllers}/floating-controller.d.ts +0 -0
  469. /package/dist/src/{__directive → __internal/directive}/spread.d.ts +0 -0
  470. /package/dist/src/{__mixins → __internal/mixins}/MixinConstructor.d.ts +0 -0
  471. /package/dist/src/{__mixins → __internal/mixins}/NativeButtonMixin.d.ts +0 -0
  472. /package/dist/src/{__mixins → __internal/mixins}/NativeHyperlinkMixin.d.ts +0 -0
  473. /package/dist/src/{__utils → __internal/utils}/cache-fetch.d.ts +0 -0
  474. /package/dist/src/{__utils → __internal/utils}/copy-to-clipboard.d.ts +0 -0
  475. /package/dist/src/{__utils → __internal/utils}/dispatch-event-utils.d.ts +0 -0
  476. /package/dist/src/{__utils → __internal/utils}/is-dark-mode.d.ts +0 -0
  477. /package/dist/src/{__utils → __internal/utils}/is-in-viewport.d.ts +0 -0
  478. /package/dist/src/{__utils → __internal/utils}/is-link.d.ts +0 -0
  479. /package/dist/src/{__utils → __internal/utils}/observe-theme-change.d.ts +0 -0
  480. /package/dist/src/{__utils → __internal/utils}/sanitize-svg.d.ts +0 -0
  481. /package/dist/src/{__utils → __internal/utils}/throttle.d.ts +0 -0
  482. /package/dist/src/{fab → button/fab}/index.d.ts +0 -0
  483. /package/dist/src/{peacock-loader.d.ts → loader.d.ts} +0 -0
  484. /package/dist/test/{banner.test.d.ts → alert.test.d.ts} +0 -0
  485. /package/src/{__controllers → __internal/controllers}/attachable-controller.ts +0 -0
  486. /package/src/{__controllers → __internal/controllers}/floating-controller.ts +0 -0
  487. /package/src/{__directive → __internal/directive}/spread.ts +0 -0
  488. /package/src/{__mixins → __internal/mixins}/MixinConstructor.ts +0 -0
  489. /package/src/{__mixins → __internal/mixins}/NativeButtonMixin.ts +0 -0
  490. /package/src/{__mixins → __internal/mixins}/NativeHyperlinkMixin.ts +0 -0
  491. /package/src/{__mixins → __internal/mixins}/README.md +0 -0
  492. /package/src/{__utils → __internal/utils}/cache-fetch.ts +0 -0
  493. /package/src/{__utils → __internal/utils}/copy-to-clipboard.ts +0 -0
  494. /package/src/{__utils → __internal/utils}/dispatch-event-utils.ts +0 -0
  495. /package/src/{__utils → __internal/utils}/is-dark-mode.ts +0 -0
  496. /package/src/{__utils → __internal/utils}/is-in-viewport.ts +0 -0
  497. /package/src/{__utils → __internal/utils}/is-link.ts +0 -0
  498. /package/src/{__utils → __internal/utils}/observe-theme-change.ts +0 -0
  499. /package/src/{__utils → __internal/utils}/sanitize-svg.ts +0 -0
  500. /package/src/{__utils → __internal/utils}/throttle.ts +0 -0
  501. /package/src/{fab → button/fab}/index.ts +0 -0
@@ -1,90 +1,90 @@
1
1
  <!doctype html>
2
- <html lang='en-GB'>
3
- <head>
4
- <meta charset='utf-8'>
5
- <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
6
- <link rel='stylesheet' href='/dist/assets/styles.css' />
7
- <style>
8
- body {
9
- background: #fafafa;
10
- padding: 2rem;
11
- display: grid;
12
- gap: 1rem;
13
- }
14
- </style>
15
- </head>
16
- <body>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta
6
+ name="viewport"
7
+ content="width=device-width, initial-scale=1.0, viewport-fit=cover"
8
+ />
9
+ <link rel="stylesheet" href="/dist/assets/styles.css" />
10
+ <style>
11
+ body {
12
+ background: #fafafa;
13
+ padding: 2rem;
14
+ display: grid;
15
+ gap: 1rem;
16
+ }
17
+ </style>
18
+ </head>
19
+ <body>
20
+ <wc-tabs variant="primary">
21
+ <wc-tab icon="home">Home</wc-tab>
22
+ <wc-tab active="true" badge="3">Updates</wc-tab>
23
+ <wc-tab>
24
+ Inbox
25
+ <wc-icon slot="icon" name="mail"></wc-icon>
26
+ <wc-badge slot="badge" value="99+"></wc-badge>
27
+ </wc-tab>
28
+ <wc-tab disabled="true" icon="block" badge="!">Disabled</wc-tab>
29
+ </wc-tabs>
17
30
 
18
- <wc-tabs variant="primary">
19
- <wc-tab icon="home">Home</wc-tab>
20
- <wc-tab active="true" badge="3">Updates</wc-tab>
21
- <wc-tab>
22
- Inbox
23
- <wc-icon slot="icon" name="mail"></wc-icon>
24
- <wc-badge slot="badge" value="99+"></wc-badge>
25
- </wc-tab>
26
- <wc-tab disabled="true" icon="block" badge="!">Disabled</wc-tab>
27
- </wc-tabs>
31
+ <wc-tabs variant="secondary">
32
+ <wc-tab active="true">Overview</wc-tab>
33
+ <wc-tab>
34
+ Activity
35
+ <wc-icon slot="icon" name="timeline"></wc-icon>
36
+ </wc-tab>
37
+ <wc-tab>Settings</wc-tab>
38
+ </wc-tabs>
28
39
 
29
- <wc-tabs variant="secondary">
30
- <wc-tab active="true">Overview</wc-tab>
31
- <wc-tab>
32
- Activity
33
- <wc-icon slot="icon" name="timeline"></wc-icon>
34
- </wc-tab>
35
- <wc-tab>Settings</wc-tab>
36
- </wc-tabs>
40
+ <wc-tabs variant="filled">
41
+ <wc-tab active="true">Daily</wc-tab>
42
+ <wc-tab>Weekly</wc-tab>
43
+ <wc-tab>
44
+ Monthly
45
+ <wc-badge slot="badge" value="3"></wc-badge>
46
+ </wc-tab>
47
+ <wc-tab disabled="true">Archived</wc-tab>
48
+ </wc-tabs>
37
49
 
38
- <wc-tabs variant="filled">
39
- <wc-tab active="true">Daily</wc-tab>
40
- <wc-tab>Weekly</wc-tab>
41
- <wc-tab>
42
- Monthly
43
- <wc-badge slot="badge" value="3"></wc-badge>
44
- </wc-tab>
45
- <wc-tab disabled="true">Archived</wc-tab>
46
- </wc-tabs>
50
+ <wc-tabs variant="contained">
51
+ <wc-tab active="true">Summary</wc-tab>
52
+ <wc-tab>
53
+ Reports
54
+ <wc-icon slot="icon" name="bar_chart"></wc-icon>
55
+ </wc-tab>
56
+ <wc-tab>Exports</wc-tab>
57
+ </wc-tabs>
47
58
 
48
- <wc-tabs variant="contained">
49
- <wc-tab active="true">Summary</wc-tab>
50
- <wc-tab>
51
- Reports
52
- <wc-icon slot="icon" name="bar_chart"></wc-icon>
53
- </wc-tab>
54
- <wc-tab>Exports</wc-tab>
55
- </wc-tabs>
59
+ <wc-tab-group>
60
+ <wc-tabs>
61
+ <wc-tab icon="home">Home</wc-tab>
62
+ <wc-tab active="true" badge="3">Updates</wc-tab>
63
+ <wc-tab>
64
+ Inbox
65
+ <wc-icon slot="icon" name="mail"></wc-icon>
66
+ <wc-badge slot="badge" value="99+"></wc-badge>
67
+ </wc-tab>
68
+ <wc-tab disabled="true" icon="block" badge="!">Disabled</wc-tab>
69
+ </wc-tabs>
56
70
 
71
+ <wc-tab-panel>
72
+ <pc-text type="heading"> Home content </pc-text>
73
+ </wc-tab-panel>
57
74
 
58
- <wc-tab-group>
59
- <wc-tabs>
60
- <wc-tab icon="home">Home</wc-tab>
61
- <wc-tab active="true" badge="3">Updates</wc-tab>
62
- <wc-tab>
63
- Inbox
64
- <wc-icon slot="icon" name="mail"></wc-icon>
65
- <wc-badge slot="badge" value="99+"></wc-badge>
66
- </wc-tab>
67
- <wc-tab disabled="true" icon="block" badge="!">Disabled</wc-tab>
68
- </wc-tabs>
75
+ <wc-tab-panel>
76
+ <pc-text type="heading"> Updates content </pc-text>
77
+ </wc-tab-panel>
69
78
 
70
- <wc-tab-panel>
71
- <pc-text type="heading"> Home content </pc-text>
72
- </wc-tab-panel>
79
+ <wc-tab-panel>
80
+ <pc-text type="heading"> Inbox content </pc-text>
81
+ </wc-tab-panel>
73
82
 
74
- <wc-tab-panel>
75
- <pc-text type="heading"> Updates content </pc-text>
76
- </wc-tab-panel>
83
+ <wc-tab-panel>
84
+ <pc-text type="heading"> Disabled content </pc-text>
85
+ </wc-tab-panel>
86
+ </wc-tab-group>
77
87
 
78
- <wc-tab-panel>
79
- <pc-text type="heading"> Inbox content </pc-text>
80
- </wc-tab-panel>
81
-
82
- <wc-tab-panel>
83
- <pc-text type="heading"> Disabled content </pc-text>
84
- </wc-tab-panel>
85
- </wc-tab-group>
86
-
87
-
88
- <script type='module' src='/dist/peacock-loader.js'></script>
89
- </body>
88
+ <script type="module" src="/dist/loader.js"></script>
89
+ </body>
90
90
  </html>
@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
3
3
  import styles from './tab-group.scss';
4
4
  import { Tabs } from './tabs.js';
5
5
  import { TabPanel } from './tab-panel.js';
6
+ import IndividualComponent from '@/IndividualComponent.js';
6
7
 
7
8
  /**
8
9
  * @label Tab Group
@@ -28,6 +29,7 @@ import { TabPanel } from './tab-panel.js';
28
29
  * ```
29
30
  * @tags navigation
30
31
  */
32
+ @IndividualComponent
31
33
  export class TabGroup extends LitElement {
32
34
  static styles = [styles];
33
35
 
@@ -1,6 +1,7 @@
1
1
  import { html, LitElement } from 'lit';
2
2
  import { property } from 'lit/decorators.js';
3
3
  import styles from './tab-panel.scss';
4
+ import IndividualComponent from '@/IndividualComponent.js';
4
5
 
5
6
  /**
6
7
  * @label Tab Panel
@@ -17,6 +18,7 @@ import styles from './tab-panel.scss';
17
18
  * ```
18
19
  * @tags navigation
19
20
  */
21
+ @IndividualComponent
20
22
  export class TabPanel extends LitElement {
21
23
  static styles = [styles];
22
24
 
package/src/tabs/tab.scss CHANGED
@@ -198,7 +198,7 @@
198
198
  --_container-state-opacity: 0.08;
199
199
  }
200
200
 
201
- &.pressed:not(:where(.disabled)) {
201
+ &:active:not(:where(.disabled)) {
202
202
  --_container-state-opacity: 0.12;
203
203
  }
204
204
 
@@ -260,7 +260,7 @@
260
260
  --_container-state-opacity: 0.08;
261
261
  }
262
262
 
263
- &.pressed:not(:where(.disabled)) {
263
+ &:active:not(:where(.disabled)) {
264
264
  --_container-state-opacity: 0.12;
265
265
  }
266
266
 
@@ -341,7 +341,7 @@
341
341
  --_container-state-opacity: 0.08;
342
342
  }
343
343
 
344
- &.pressed:not(:where(.disabled)) {
344
+ &:active:not(:where(.disabled)) {
345
345
  --_container-state-opacity: 0.12;
346
346
  }
347
347
 
@@ -418,7 +418,7 @@
418
418
  --_container-state-opacity: 0.08;
419
419
  }
420
420
 
421
- &.pressed:not(:where(.disabled)) {
421
+ &:active:not(:where(.disabled)) {
422
422
  --_container-state-opacity: 0.12;
423
423
  }
424
424
 
package/src/tabs/tab.ts CHANGED
@@ -5,14 +5,15 @@ import { classMap } from 'lit/directives/class-map.js';
5
5
  import {
6
6
  dispatchActivationClick,
7
7
  isActivationClick,
8
- } from '@/__utils/dispatch-event-utils.js';
9
- import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
10
- import { throttle } from '@/__utils/throttle.js';
11
- import { isLink } from '@/__utils/is-link.js';
12
- import { spread } from '@/__directive/spread.js';
8
+ } from '@/__internal/utils/dispatch-event-utils.js';
9
+ import { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';
10
+ import { throttle } from '@/__internal/utils/throttle.js';
11
+ import { isLink } from '@/__internal/utils/is-link.js';
12
+ import { spread } from '@/__internal/directive/spread.js';
13
13
 
14
14
  import styles from './tab.scss';
15
15
  import type { Tabs } from './tabs.js';
16
+ import IndividualComponent from '@/IndividualComponent.js';
16
17
 
17
18
  /**
18
19
  * @label Tab
@@ -29,6 +30,7 @@ import type { Tabs } from './tabs.js';
29
30
  * ```
30
31
  * @tags navigation
31
32
  */
33
+ @IndividualComponent
32
34
  export class Tab extends LitElement {
33
35
  #id = crypto.randomUUID();
34
36
 
@@ -53,9 +55,9 @@ export class Tab extends LitElement {
53
55
  @property({ type: String, reflect: true }) href?: string;
54
56
 
55
57
  /**
56
- * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
58
+ * Sets the delay for throttle in milliseconds. When null (default), no throttle is applied.
57
59
  */
58
- @property() throttleDelay = 200;
60
+ @property() throttleDelay?: number;
59
61
 
60
62
  @state() hasFocus = false;
61
63
 
@@ -65,12 +67,6 @@ export class Tab extends LitElement {
65
67
 
66
68
  @state() slotHasBadge = false;
67
69
 
68
- /**
69
- * States
70
- */
71
- @state()
72
- isPressed = false;
73
-
74
70
  private _tabindex = 0;
75
71
 
76
72
  @query('.tab-element') readonly tabElement!: HTMLElement | null;
@@ -86,13 +82,16 @@ export class Tab extends LitElement {
86
82
  constructor() {
87
83
  super();
88
84
  this._tabindex = 0;
85
+ this.addEventListener('click', this.__dispatchClickWithThrottle);
89
86
  }
90
87
 
91
88
  override firstUpdated() {
92
- this.__dispatchClickWithThrottle = throttle(
93
- this.__dispatchClick,
94
- this.throttleDelay,
95
- );
89
+ if (typeof this.throttleDelay === 'number') {
90
+ this.__dispatchClickWithThrottle = throttle(
91
+ this.__dispatchClick,
92
+ this.throttleDelay,
93
+ );
94
+ }
96
95
  observerSlotChangesWithCallback(
97
96
  this.renderRoot.querySelector('slot:not([name])'),
98
97
  hasContent => {
@@ -141,21 +140,6 @@ export class Tab extends LitElement {
141
140
  dispatchActivationClick(this.tabElement);
142
141
  };
143
142
 
144
- __handlePress = (event: KeyboardEvent | MouseEvent) => {
145
- if (this.disabled) return;
146
- if (
147
- event instanceof KeyboardEvent &&
148
- event.type === 'keydown' &&
149
- (event.key === 'Enter' || event.key === ' ')
150
- ) {
151
- this.isPressed = true;
152
- } else if (event.type === 'mousedown') {
153
- this.isPressed = true;
154
- } else {
155
- this.isPressed = false;
156
- }
157
- };
158
-
159
143
  __getParentTabsVariant(): Tabs['variant'] {
160
144
  return (this.closest('wc-tabs') as Tabs | null)?.variant ?? 'primary';
161
145
  }
@@ -176,7 +160,6 @@ export class Tab extends LitElement {
176
160
  tab: true,
177
161
  'tab-element': true,
178
162
  disabled: this.disabled,
179
- pressed: this.isPressed,
180
163
  active: this.active,
181
164
  [`variant-${variant}`]: true,
182
165
  'has-content': this.slotHasContent,
@@ -189,9 +172,6 @@ export class Tab extends LitElement {
189
172
  id="button"
190
173
  class=${classMap(cssClasses)}
191
174
  tabindex="0"
192
- @mousedown=${this.__handlePress}
193
- @keydown=${this.__handlePress}
194
- @keyup=${this.__handlePress}
195
175
  ?aria-describedby=${this.__getDisabledReasonID()}
196
176
  aria-disabled=${`${this.disabled}`}
197
177
  ?disabled=${this.disabled}
@@ -207,9 +187,6 @@ export class Tab extends LitElement {
207
187
  tabindex="0"
208
188
  href=${this.href}
209
189
  target=${this.target}
210
- @mousedown=${this.__handlePress}
211
- @keydown=${this.__handlePress}
212
- @keyup=${this.__handlePress}
213
190
  role="button"
214
191
  ?aria-describedby=${this.__getDisabledReasonID()}
215
192
  aria-disabled=${`${this.disabled}`}
package/src/tabs/tabs.ts CHANGED
@@ -2,6 +2,7 @@ import { html, LitElement } from 'lit';
2
2
  import { property } from 'lit/decorators.js';
3
3
  import styles from './tabs.scss';
4
4
  import { Tab } from './tab.js';
5
+ import IndividualComponent from '@/IndividualComponent.js';
5
6
 
6
7
  /**
7
8
  * @label Tabs
@@ -21,6 +22,7 @@ import { Tab } from './tab.js';
21
22
  * ```
22
23
  * @tags navigation
23
24
  */
25
+ @IndividualComponent
24
26
  export class Tabs extends LitElement {
25
27
  static styles = [styles];
26
28
 
@@ -1,8 +1,8 @@
1
1
  import { html } from 'lit';
2
2
  import { property, query, state } from 'lit/decorators.js';
3
3
 
4
- import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
5
- import { spread } from '@/__directive/spread.js';
4
+ import { redispatchEvent } from '@/__internal/utils/dispatch-event-utils.js';
5
+ import { spread } from '@/__internal/directive/spread.js';
6
6
 
7
7
  import BaseInput from '../input/BaseInput.js';
8
8
  import styles from './textarea.scss';
@@ -1,8 +1,8 @@
1
1
  import { html } from 'lit';
2
2
  import { property, query, state } from 'lit/decorators.js';
3
3
 
4
- import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
5
- import { spread } from '@/__directive/spread.js';
4
+ import { redispatchEvent } from '@/__internal/utils/dispatch-event-utils.js';
5
+ import { spread } from '@/__internal/directive/spread.js';
6
6
 
7
7
  import BaseInput from '../input/BaseInput.js';
8
8
  import styles from './time-picker.scss';
@@ -1,4 +1,4 @@
1
- import { LitElement, html } from 'lit';
1
+ import { LitElement, html } from 'lit';
2
2
  import { property } from 'lit/decorators.js';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
4
  import IndividualComponent from '@/IndividualComponent.js';
@@ -10,9 +10,9 @@ import colorStyles from './toolbar-colors.scss';
10
10
  * @tag wc-toolbar
11
11
  * @rawTag toolbar
12
12
  *
13
- * @summary A Material 3 toolbar / app bar for navigation and actions.
13
+ * @summary A toolbar / app bar for navigation and actions.
14
14
  * @overview
15
- * <p>The toolbar component implements the Material 3 app bar pattern. It supports a
15
+ * <p>The toolbar component implements the app bar pattern. It supports a
16
16
  * docked (attached) variant for bottom-panel navigation and a floating (detached pill-shaped)
17
17
  * variant. The floating variant supports both horizontal and vertical orientations.</p>
18
18
  *
@@ -2,7 +2,8 @@ import { html, LitElement } from 'lit';
2
2
  import { property } from 'lit/decorators.js';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
4
  import styles from './tooltip.scss';
5
- import { FloatingController } from '../__controllers/floating-controller.js';
5
+ import { FloatingController } from '../__internal/controllers/floating-controller.js';
6
+ import IndividualComponent from '@/IndividualComponent.js';
6
7
 
7
8
  // Define a type for valid trigger combinations
8
9
  export type TooltipTrigger = 'hover' | 'focus' | 'click';
@@ -19,6 +20,7 @@ export type TooltipTrigger = 'hover' | 'focus' | 'click';
19
20
  * <wc-tooltip preview>Tooltip</wc-tooltip>
20
21
  * ```
21
22
  */
23
+ @IndividualComponent
22
24
  export class Tooltip extends LitElement {
23
25
  static styles = [styles];
24
26
 
@@ -43,7 +45,12 @@ export class Tooltip extends LitElement {
43
45
 
44
46
  private _floating: FloatingController | null = null;
45
47
 
46
- private resolveTrigger(): 'hover' | 'click' | 'focus' | 'manual' | 'hover-focus' {
48
+ private resolveTrigger():
49
+ | 'hover'
50
+ | 'click'
51
+ | 'focus'
52
+ | 'manual'
53
+ | 'hover-focus' {
47
54
  if (this.preview) return 'manual';
48
55
 
49
56
  const triggerTokens = this.trigger.split(' ');
@@ -77,17 +84,16 @@ export class Tooltip extends LitElement {
77
84
  }
78
85
 
79
86
  __getFocusTarget(): HTMLElement | null {
80
-
81
87
  if (this._focusTarget) {
82
88
  return this._focusTarget;
83
89
  }
84
90
 
85
91
  const focusTarget = document.getElementById(this.for);
86
- if (focusTarget) {
87
- return focusTarget
88
- }
92
+ if (focusTarget) {
93
+ return focusTarget;
94
+ }
89
95
 
90
- return this.parentElement;
96
+ return this.parentElement;
91
97
  }
92
98
 
93
99
  private attachListeners() {
@@ -107,7 +113,7 @@ export class Tooltip extends LitElement {
107
113
  offset: 0,
108
114
  trigger: this.resolveTrigger(),
109
115
  closeOnClickOutside: true,
110
- onOpenChange: (isOpen) => {
116
+ onOpenChange: isOpen => {
111
117
  if (this.open === isOpen) return;
112
118
  this.open = isOpen;
113
119
  },
@@ -1,7 +1,7 @@
1
1
  import { html, nothing } from 'lit';
2
2
  import { property, query, state } from 'lit/decorators.js';
3
3
 
4
- import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
4
+ import { redispatchEvent } from '@/__internal/utils/dispatch-event-utils.js';
5
5
 
6
6
  import BaseInput from '../input/BaseInput.js';
7
7
  import styles from './url-field.scss';
@@ -217,7 +217,6 @@ export class UrlField extends BaseInput {
217
217
  />
218
218
  `
219
219
  : html`<div class="url-display">${this.renderDisplayValue()}</div>`}
220
-
221
220
  ${!this.editing && !this.disabled && !this.readonly
222
221
  ? html`
223
222
  <wc-icon-button
@@ -236,4 +235,4 @@ export class UrlField extends BaseInput {
236
235
  </wc-field>
237
236
  `;
238
237
  }
239
- }
238
+ }
@@ -1,114 +0,0 @@
1
- import { A, _ as __decorate } from './IndividualComponent-DUINtMGK.js';
2
- import { e, i, t } from './directive-ZPhl09Yt.js';
3
- import { n } from './property-1psGvXOq.js';
4
-
5
- /**
6
- * @license
7
- * Copyright 2018 Google LLC
8
- * SPDX-License-Identifier: BSD-3-Clause
9
- */const o=o=>o??A;
10
-
11
- class SpreadDirective extends i {
12
- constructor(partInfo) {
13
- super(partInfo);
14
- if (partInfo.type !== t.ELEMENT) {
15
- throw new Error('spread() can only be used on elements');
16
- }
17
- }
18
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
19
- render(_props) {
20
- return '';
21
- }
22
- update(part, [props]) {
23
- if (!props)
24
- return;
25
- // eslint-disable-next-line guard-for-in,no-restricted-syntax
26
- for (const key in props) {
27
- const value = props[key];
28
- if (value === undefined || value === null) {
29
- part.element.removeAttribute(key);
30
- }
31
- else {
32
- part.element.setAttribute(key, value);
33
- }
34
- }
35
- }
36
- }
37
- const spread = e(SpreadDirective);
38
-
39
- /**
40
- * 2. Apply the type annotation to the variable.
41
- */
42
- const NativeButtonMixin = (superclass) => {
43
- // Naming the class (BaseButtonElement) instead of using 'Mixin' or anonymous
44
- // prevents the "__childPart" visibility error.
45
- class ButtonElement extends superclass {
46
- constructor() {
47
- super(...arguments);
48
- /**
49
- * The type of the underlying `<button>` element. Maps to the native `type` attribute.
50
- * Possible values are `"button"`, `"submit"`, `"reset"`. Defaults to `"button"`.
51
- */
52
- this.htmlType = 'button';
53
- /**
54
- * When `true`, the button is disabled and cannot be interacted with. Reflects to the `disabled` attribute. Defaults to `false`.
55
- */
56
- this.disabled = false;
57
- /**
58
- * When `true`, the button is visually styled as disabled and cannot be interacted with, but remains focusable.
59
- * Use this in combination with `disabledReason` to communicate why the button is unavailable.
60
- * Reflects to the `soft-disabled` attribute. Defaults to `false`.
61
- */
62
- this.softDisabled = false;
63
- /**
64
- * A human-readable explanation of why the button is disabled or soft-disabled.
65
- * Rendered as a visually hidden tooltip and linked via `aria-describedby` for accessibility.
66
- * Maps to the `disabled-reason` attribute.
67
- */
68
- this.disabledReason = '';
69
- /**
70
- * The `id` of the `<form>` element to associate the button with.
71
- * If omitted, the button is associated with its nearest ancestor form.
72
- * Maps to the native `form` attribute.
73
- */
74
- this.form = '';
75
- /**
76
- * The name of the button, submitted as part of a name/value pair when the associated form is submitted.
77
- * Maps to the native `name` attribute.
78
- */
79
- this.name = '';
80
- /**
81
- * The value of the button, submitted as part of a name/value pair when the associated form is submitted.
82
- * Maps to the native `value` attribute.
83
- */
84
- this.value = '';
85
- }
86
- }
87
- __decorate([
88
- n({ type: String })
89
- ], ButtonElement.prototype, "htmlType", void 0);
90
- __decorate([
91
- n({ type: Boolean, reflect: true })
92
- ], ButtonElement.prototype, "disabled", void 0);
93
- __decorate([
94
- n({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
95
- ], ButtonElement.prototype, "softDisabled", void 0);
96
- __decorate([
97
- n({ attribute: 'disabled-reason' })
98
- ], ButtonElement.prototype, "disabledReason", void 0);
99
- __decorate([
100
- n()
101
- ], ButtonElement.prototype, "form", void 0);
102
- __decorate([
103
- n()
104
- ], ButtonElement.prototype, "name", void 0);
105
- __decorate([
106
- n()
107
- ], ButtonElement.prototype, "value", void 0);
108
- return ButtonElement;
109
- };
110
-
111
- const DISABLED_REASON_ID = 'button-disabled-reason';
112
-
113
- export { DISABLED_REASON_ID as D, NativeButtonMixin as N, o, spread as s };
114
- //# sourceMappingURL=ButtonConstants-D06bY4uy.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ButtonConstants-D06bY4uy.js","sources":["../node_modules/lit-html/directives/if-defined.js","../../src/__directive/spread.ts","../../src/__mixins/NativeButtonMixin.ts","../../src/button/ButtonConstants.ts"],"sourcesContent":["import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n","import {\n directive,\n Directive,\n ElementPart,\n PartInfo,\n PartType,\n} from 'lit/directive.js';\n\nclass SpreadDirective extends Directive {\n constructor(partInfo: PartInfo) {\n super(partInfo);\n if (partInfo.type !== PartType.ELEMENT) {\n throw new Error('spread() can only be used on elements');\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n render(_props: { [key: string]: any } | undefined) {\n return '';\n }\n\n update(part: ElementPart, [props]: [{ [key: string]: any } | undefined]) {\n if (!props) return;\n // eslint-disable-next-line guard-for-in,no-restricted-syntax\n for (const key in props) {\n const value = props[key];\n if (value === undefined || value === null) {\n part.element.removeAttribute(key);\n } else {\n part.element.setAttribute(key, value);\n }\n }\n }\n}\n\nexport const spread = directive(SpreadDirective);\n","import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { MixinConstructor } from './MixinConstructor.js';\n\n/**\n * 1. Define an interface for the members the mixin adds.\n * This makes the type annotation much cleaner.\n */\nexport interface NativeButtonInterface {\n htmlType: 'button' | 'submit' | 'reset';\n disabled: boolean;\n softDisabled: boolean;\n disabledReason: string;\n form: string;\n name: string;\n value: string;\n}\n\n/**\n * 2. Apply the type annotation to the variable.\n */\nconst NativeButtonMixin: <T extends MixinConstructor<LitElement>>(\n superclass: T,\n) => T & MixinConstructor<NativeButtonInterface> = <\n T extends MixinConstructor<LitElement>,\n>(\n superclass: T,\n) => {\n // Naming the class (BaseButtonElement) instead of using 'Mixin' or anonymous\n // prevents the \"__childPart\" visibility error.\n class ButtonElement extends superclass implements NativeButtonInterface {\n /**\n * The type of the underlying `<button>` element. Maps to the native `type` attribute.\n * Possible values are `\"button\"`, `\"submit\"`, `\"reset\"`. Defaults to `\"button\"`.\n */\n @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =\n 'button';\n\n /**\n * When `true`, the button is disabled and cannot be interacted with. Reflects to the `disabled` attribute. Defaults to `false`.\n */\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n /**\n * When `true`, the button is visually styled as disabled and cannot be interacted with, but remains focusable.\n * Use this in combination with `disabledReason` to communicate why the button is unavailable.\n * Reflects to the `soft-disabled` attribute. Defaults to `false`.\n */\n @property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })\n softDisabled: boolean = false;\n\n /**\n * A human-readable explanation of why the button is disabled or soft-disabled.\n * Rendered as a visually hidden tooltip and linked via `aria-describedby` for accessibility.\n * Maps to the `disabled-reason` attribute.\n */\n @property({ attribute: 'disabled-reason' })\n disabledReason: string = '';\n\n /**\n * The `id` of the `<form>` element to associate the button with.\n * If omitted, the button is associated with its nearest ancestor form.\n * Maps to the native `form` attribute.\n */\n @property()\n form: string = '';\n\n /**\n * The name of the button, submitted as part of a name/value pair when the associated form is submitted.\n * Maps to the native `name` attribute.\n */\n @property()\n name: string = '';\n\n /**\n * The value of the button, submitted as part of a name/value pair when the associated form is submitted.\n * Maps to the native `value` attribute.\n */\n @property()\n value: string = '';\n }\n\n return ButtonElement as T & MixinConstructor<NativeButtonInterface>;\n};\n\nexport default NativeButtonMixin;\n","export const DISABLED_REASON_ID = 'button-disabled-reason';\n"],"names":["t","Directive","PartType","directive","property"],"mappings":";;;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAEA;;ACGjB,MAAM,eAAgB,SAAQC,CAAS,CAAA;AACrC,IAAA,WAAA,CAAY,QAAkB,EAAA;QAC5B,KAAK,CAAC,QAAQ,CAAC;QACf,IAAI,QAAQ,CAAC,IAAI,KAAKC,CAAQ,CAAC,OAAO,EAAE;AACtC,YAAA,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC;QAC1D;IACF;;AAGA,IAAA,MAAM,CAAC,MAA0C,EAAA;AAC/C,QAAA,OAAO,EAAE;IACX;AAEA,IAAA,MAAM,CAAC,IAAiB,EAAE,CAAC,KAAK,CAAuC,EAAA;AACrE,QAAA,IAAI,CAAC,KAAK;YAAE;;AAEZ,QAAA,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE;AACvB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;YACxB,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;AACzC,gBAAA,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC;YACnC;iBAAO;gBACL,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC;YACvC;QACF;IACF;AACD;MAEY,MAAM,GAAGC,CAAS,CAAC,eAAe;;ACjB/C;;AAEG;AACH,MAAM,iBAAiB,GAE4B,CAGjD,UAAa,KACX;;;IAGF,MAAM,aAAc,SAAQ,UAAU,CAAA;AAAtC,QAAA,WAAA,GAAA;;AACE;;;AAGG;YACyB,IAAA,CAAA,QAAQ,GAClC,QAAQ;AAEV;;AAEG;YAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;AAEzB;;;;AAIG;YAEH,IAAA,CAAA,YAAY,GAAY,KAAK;AAE7B;;;;AAIG;YAEH,IAAA,CAAA,cAAc,GAAW,EAAE;AAE3B;;;;AAIG;YAEH,IAAA,CAAA,IAAI,GAAW,EAAE;AAEjB;;;AAGG;YAEH,IAAA,CAAA,IAAI,GAAW,EAAE;AAEjB;;;AAGG;YAEH,IAAA,CAAA,KAAK,GAAW,EAAE;QACpB;AAAC;AA9C6B,IAAA,UAAA,CAAA;AAA3B,QAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACf,KAAA,EAAA,aAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAMX,IAAA,UAAA,CAAA;QADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,KAAA,EAAA,aAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAQ1B,IAAA,UAAA,CAAA;AADC,QAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE;AACxC,KAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAQ9B,IAAA,UAAA,CAAA;AADC,QAAAA,CAAQ,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE;AACd,KAAA,EAAA,aAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AAQ5B,IAAA,UAAA,CAAA;AADC,QAAAA,CAAQ;AACS,KAAA,EAAA,aAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAOlB,IAAA,UAAA,CAAA;AADC,QAAAA,CAAQ;AACS,KAAA,EAAA,aAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAOlB,IAAA,UAAA,CAAA;AADC,QAAAA,CAAQ;AACU,KAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAGrB,IAAA,OAAO,aAA4D;AACrE;;ACpFO,MAAM,kBAAkB,GAAG;;;;","x_google_ignoreList":[0]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"NativeHyperlinkMixin-DrYXyfMQ.js","sources":["../../src/__utils/throttle.ts","../../src/__utils/is-link.ts","../../src/__mixins/NativeHyperlinkMixin.ts"],"sourcesContent":["export function throttle(\n func: Function,\n delay: number,\n options = { leading: true, trailing: true },\n) {\n let timerId: any;\n let lastExec = 0;\n\n return function (...args: any[]) {\n // @ts-ignore\n const context = this;\n const now = Date.now();\n\n const shouldCallNow = options.leading && now - lastExec >= delay;\n\n if (shouldCallNow) {\n func.apply(context, args);\n lastExec = now;\n } else if (options.trailing && !timerId) {\n timerId = setTimeout(() => {\n func.apply(context, args);\n lastExec = Date.now();\n timerId = null;\n }, delay);\n }\n };\n}","export function isLink(element: any): boolean {\n return element.href !== undefined;\n}\n","import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { MixinConstructor } from './MixinConstructor.js';\n\n/**\n * 1. Define an interface for the members the mixin adds.\n * This makes the type annotation much cleaner.\n */\nexport interface NativeHyperlinkInterface {\n href?: string;\n target: '_self' | '_parent' | '_blank' | '_top' | string;\n rel?: string;\n download?: string;\n}\n\n/**\n * 2. Apply the type annotation to the variable.\n */\nconst NativeHyperlinkMixin: <T extends MixinConstructor<LitElement>>(\n superclass: T,\n) => T & MixinConstructor<NativeHyperlinkInterface> = <\n T extends MixinConstructor<LitElement>,\n>(\n superclass: T,\n) => {\n // Naming the class (BaseHyperlinkElement) instead of using 'Mixin' or anonymous\n // prevents the \"__childPart\" visibility error.\n class BaseHyperlinkElement\n extends superclass\n implements NativeHyperlinkInterface\n {\n /**\n * The URL that the hyperlink points to. When set, the component renders as an `<a>` element.\n * Maps to the native `href` attribute.\n */\n @property({ reflect: true })\n href?: string;\n\n /**\n * Where to display the linked URL. Maps to the native `target` attribute.\n * Possible values are `\"_self\"`, `\"_blank\"`, `\"_parent\"`, `\"_top\"`, or a custom frame name.\n * When using `\"_blank\"`, consider setting `rel=\"noopener noreferrer\"` for security. Defaults to `\"_self\"`.\n */\n @property()\n target: '_self' | '_parent' | '_blank' | '_top' | string = '_self';\n\n /**\n * The relationship between the current document and the linked URL.\n * Maps to the native `rel` attribute on the rendered `<a>` element.\n * When `target=\"_blank\"`, use `\"noopener noreferrer\"` to prevent tab-napping attacks.\n */\n @property()\n rel?: string;\n\n /**\n * Causes the browser to download the linked URL instead of navigating to it.\n * If a string value is provided, it is used as the suggested filename.\n * Omit or leave undefined to preserve normal navigation behaviour.\n * Maps to the native `download` attribute. Only applies when `href` is set.\n */\n @property()\n download?: string;\n }\n\n return BaseHyperlinkElement as T & MixinConstructor<NativeHyperlinkInterface>;\n};\n\nexport default NativeHyperlinkMixin;\n"],"names":["property"],"mappings":";;;SAAgB,QAAQ,CACtB,IAAc,EACd,KAAa,EACb,OAAO,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAA;AAE3C,IAAA,IAAI,OAAY;IAChB,IAAI,QAAQ,GAAG,CAAC;IAEhB,OAAO,UAAU,GAAG,IAAW,EAAA;;QAE7B,MAAM,OAAO,GAAG,IAAI;AACpB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;QAEtB,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,IAAI,GAAG,GAAG,QAAQ,IAAI,KAAK;QAEhE,IAAI,aAAa,EAAE;AACjB,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC;YACzB,QAAQ,GAAG,GAAG;QAChB;AAAO,aAAA,IAAI,OAAO,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE;AACvC,YAAA,OAAO,GAAG,UAAU,CAAC,MAAK;AACxB,gBAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC;AACzB,gBAAA,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE;gBACrB,OAAO,GAAG,IAAI;YAChB,CAAC,EAAE,KAAK,CAAC;QACX;AACF,IAAA,CAAC;AACH;;AC1BM,SAAU,MAAM,CAAC,OAAY,EAAA;AACjC,IAAA,OAAO,OAAO,CAAC,IAAI,KAAK,SAAS;AACnC;;ACaA;;AAEG;AACH,MAAM,oBAAoB,GAE4B,CAGpD,UAAa,KACX;;;IAGF,MAAM,oBACJ,SAAQ,UAAU,CAAA;AADpB,QAAA,WAAA,GAAA;;AAWE;;;;AAIG;YAEH,IAAA,CAAA,MAAM,GAAqD,OAAO;QAkBpE;AAAC;AA1BC,IAAA,UAAA,CAAA;AADC,QAAAA,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACb,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAQd,IAAA,UAAA,CAAA;AADC,QAAAA,CAAQ;AAC0D,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAQnE,IAAA,UAAA,CAAA;AADC,QAAAA,CAAQ;AACI,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;AASb,IAAA,UAAA,CAAA;AADC,QAAAA,CAAQ;AACS,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAGpB,IAAA,OAAO,oBAAsE;AAC/E;;;;"}