@redvars/peacock 3.8.1 → 3.8.2

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 (474) 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/badge.js +91 -0
  26. package/dist/badge.js.map +1 -0
  27. package/dist/base-Cl6v8-BZ.js +9 -0
  28. package/dist/base-Cl6v8-BZ.js.map +1 -0
  29. package/dist/bottom-sheet.js +14 -5
  30. package/dist/bottom-sheet.js.map +1 -1
  31. package/dist/breadcrumb-item.js +163 -0
  32. package/dist/breadcrumb-item.js.map +1 -0
  33. package/dist/breadcrumb.js +95 -0
  34. package/dist/breadcrumb.js.map +1 -0
  35. package/dist/button-group.js +87 -137
  36. package/dist/button-group.js.map +1 -1
  37. package/dist/button.js +863 -133
  38. package/dist/button.js.map +1 -1
  39. package/dist/calendar-column-view.js +8 -4
  40. package/dist/calendar-column-view.js.map +1 -1
  41. package/dist/calendar-month-view.js +8 -4
  42. package/dist/calendar-month-view.js.map +1 -1
  43. package/dist/calendar.js +8 -4
  44. package/dist/calendar.js.map +1 -1
  45. package/dist/canvas.js +8 -4
  46. package/dist/canvas.js.map +1 -1
  47. package/dist/card-content.js +1 -1
  48. package/dist/card.js +23 -45
  49. package/dist/card.js.map +1 -1
  50. package/dist/cb-compound-expression.js +6 -2
  51. package/dist/cb-compound-expression.js.map +1 -1
  52. package/dist/cb-divider.js +7 -3
  53. package/dist/cb-divider.js.map +1 -1
  54. package/dist/cb-expression.js +6 -2
  55. package/dist/cb-expression.js.map +1 -1
  56. package/dist/cb-predicate.js +7 -3
  57. package/dist/cb-predicate.js.map +1 -1
  58. package/dist/{chart-bar-cn6rrna-.js → chart-bar-CYoGNXnK.js} +6 -2
  59. package/dist/{chart-bar-cn6rrna-.js.map → chart-bar-CYoGNXnK.js.map} +1 -1
  60. package/dist/chart-bar.js +7 -6
  61. package/dist/chart-bar.js.map +1 -1
  62. package/dist/chart-doughnut.js +8 -3
  63. package/dist/chart-doughnut.js.map +1 -1
  64. package/dist/chart-pie.js +8 -3
  65. package/dist/chart-pie.js.map +1 -1
  66. package/dist/chart-stacked-bar.js +7 -6
  67. package/dist/chart-stacked-bar.js.map +1 -1
  68. package/dist/checkbox.js +526 -0
  69. package/dist/checkbox.js.map +1 -0
  70. package/dist/chip.js +459 -0
  71. package/dist/chip.js.map +1 -0
  72. package/dist/{class-map-YU7g0o3B.js → class-map-DG7CA1et.js} +2 -2
  73. package/dist/{class-map-YU7g0o3B.js.map → class-map-DG7CA1et.js.map} +1 -1
  74. package/dist/clock.js +6 -2
  75. package/dist/clock.js.map +1 -1
  76. package/dist/code-editor.js +45 -30
  77. package/dist/code-editor.js.map +1 -1
  78. package/dist/code-highlighter.js +9 -5
  79. package/dist/code-highlighter.js.map +1 -1
  80. package/dist/condition-builder.js +5 -1
  81. package/dist/condition-builder.js.map +1 -1
  82. package/dist/container.js +141 -0
  83. package/dist/container.js.map +1 -0
  84. package/dist/custom-elements-jsdocs.json +721 -769
  85. package/dist/custom-elements.json +3213 -1979
  86. package/dist/datasource-B2eRh6Or.js +108 -0
  87. package/dist/datasource-B2eRh6Or.js.map +1 -0
  88. package/dist/dispatch-event-utils-CuEqjlPT.js.map +1 -1
  89. package/dist/divider.js +135 -0
  90. package/dist/divider.js.map +1 -0
  91. package/dist/dropdown-button.js +11 -6
  92. package/dist/dropdown-button.js.map +1 -1
  93. package/dist/element-internals-2CMts_0M.js +290 -0
  94. package/dist/element-internals-2CMts_0M.js.map +1 -0
  95. package/dist/elevation.js +94 -0
  96. package/dist/elevation.js.map +1 -0
  97. package/dist/empty-state.js +194 -0
  98. package/dist/empty-state.js.map +1 -0
  99. package/dist/{event-manager-D-QCmUgR.js → event-manager-DTyX2uYD.js} +2 -2
  100. package/dist/{event-manager-D-QCmUgR.js.map → event-manager-DTyX2uYD.js.map} +1 -1
  101. package/dist/fab.js +138 -145
  102. package/dist/fab.js.map +1 -1
  103. package/dist/field.js +461 -0
  104. package/dist/field.js.map +1 -0
  105. package/dist/{popover-DUPmMVWS.js → floating-controller-CnUZnOhK.js} +2 -171
  106. package/dist/floating-controller-CnUZnOhK.js.map +1 -0
  107. package/dist/{flow-designer-node-BWrPuxAR.js → flow-designer-node-DsVwQTac.js} +7 -3
  108. package/dist/{flow-designer-node-BWrPuxAR.js.map → flow-designer-node-DsVwQTac.js.map} +1 -1
  109. package/dist/flow-designer-node.js +3 -3
  110. package/dist/flow-designer.js +19 -12
  111. package/dist/flow-designer.js.map +1 -1
  112. package/dist/focus-ring.js +126 -0
  113. package/dist/focus-ring.js.map +1 -0
  114. package/dist/form-associated-BXADnjOB.js +388 -0
  115. package/dist/form-associated-BXADnjOB.js.map +1 -0
  116. package/dist/html-editor.js +21 -9
  117. package/dist/html-editor.js.map +1 -1
  118. package/dist/hyperlink-DLvb6MXE.js +98 -0
  119. package/dist/hyperlink-DLvb6MXE.js.map +1 -0
  120. package/dist/icon-button.js +1064 -0
  121. package/dist/icon-button.js.map +1 -0
  122. package/dist/icon.js +170 -0
  123. package/dist/icon.js.map +1 -0
  124. package/dist/if-defined-BXZpRQ4P.js +10 -0
  125. package/dist/if-defined-BXZpRQ4P.js.map +1 -0
  126. package/dist/image.js +201 -0
  127. package/dist/image.js.map +1 -0
  128. package/dist/index.js +73 -20
  129. package/dist/index.js.map +1 -1
  130. package/dist/is-dark-mode-DOcaw4Yq.js.map +1 -1
  131. package/dist/is-link-Dk2OV3PM.js +6 -0
  132. package/dist/is-link-Dk2OV3PM.js.map +1 -0
  133. package/dist/item.js +212 -0
  134. package/dist/item.js.map +1 -0
  135. package/dist/link.js +75 -0
  136. package/dist/link.js.map +1 -0
  137. package/dist/list-D6JLh1uh.js +352 -0
  138. package/dist/list-D6JLh1uh.js.map +1 -0
  139. package/dist/list.js +14 -0
  140. package/dist/list.js.map +1 -0
  141. package/dist/{peacock-loader.js → loader.js} +83 -22
  142. package/dist/loader.js.map +1 -0
  143. package/dist/menu-item.js +318 -0
  144. package/dist/menu-item.js.map +1 -0
  145. package/dist/menu.js +534 -0
  146. package/dist/menu.js.map +1 -0
  147. package/dist/modal.js +9 -5
  148. package/dist/modal.js.map +1 -1
  149. package/dist/navigation-rail-item.js +385 -0
  150. package/dist/navigation-rail-item.js.map +1 -0
  151. package/dist/navigation-rail.js +217 -0
  152. package/dist/navigation-rail.js.map +1 -0
  153. package/dist/notification-manager.js +8 -4
  154. package/dist/notification-manager.js.map +1 -1
  155. package/dist/notification.js +8 -4
  156. package/dist/notification.js.map +1 -1
  157. package/dist/number-counter.js +7 -3
  158. package/dist/number-counter.js.map +1 -1
  159. package/dist/{observe-slot-change-D8Xg-kSS.js → observe-slot-change-DPxaZrZF.js} +3 -4
  160. package/dist/observe-slot-change-DPxaZrZF.js.map +1 -0
  161. package/dist/option.js +121 -0
  162. package/dist/option.js.map +1 -0
  163. package/dist/pagination.js +255 -0
  164. package/dist/pagination.js.map +1 -0
  165. package/dist/popover-content.js +7 -3
  166. package/dist/popover-content.js.map +1 -1
  167. package/dist/popover.js +175 -3
  168. package/dist/popover.js.map +1 -1
  169. package/dist/{property-1psGvXOq.js → property-B49QQ8pS.js} +2 -2
  170. package/dist/{property-1psGvXOq.js.map → property-B49QQ8pS.js.map} +1 -1
  171. package/dist/query-CHb9Ft_d.js +10 -0
  172. package/dist/query-CHb9Ft_d.js.map +1 -0
  173. package/dist/query-assigned-elements-BJaGSqM0.js +10 -0
  174. package/dist/query-assigned-elements-BJaGSqM0.js.map +1 -0
  175. package/dist/radio.js +476 -0
  176. package/dist/radio.js.map +1 -0
  177. package/dist/ripple.js +506 -0
  178. package/dist/ripple.js.map +1 -0
  179. package/dist/search.js +12 -7
  180. package/dist/search.js.map +1 -1
  181. package/dist/segmented-button-group.js +137 -0
  182. package/dist/segmented-button-group.js.map +1 -0
  183. package/dist/segmented-button.js +289 -0
  184. package/dist/segmented-button.js.map +1 -0
  185. package/dist/select-Dwtk0RIU.js +3937 -0
  186. package/dist/select-Dwtk0RIU.js.map +1 -0
  187. package/dist/side-sheet.js +8 -4
  188. package/dist/side-sheet.js.map +1 -1
  189. package/dist/skeleton.js +122 -0
  190. package/dist/skeleton.js.map +1 -0
  191. package/dist/slider.js +346 -0
  192. package/dist/slider.js.map +1 -0
  193. package/dist/snackbar.js +335 -0
  194. package/dist/snackbar.js.map +1 -0
  195. package/dist/spinner.js +100 -0
  196. package/dist/spinner.js.map +1 -0
  197. package/dist/split-button.js +10 -5
  198. package/dist/split-button.js.map +1 -1
  199. package/dist/spread-B5cgadZl.js +32 -0
  200. package/dist/spread-B5cgadZl.js.map +1 -0
  201. package/dist/src/__internal/aria/aria.d.ts +98 -0
  202. package/dist/src/__internal/aria/delegate.d.ts +54 -0
  203. package/dist/src/__internal/events/dispatch-hooks.d.ts +80 -0
  204. package/dist/src/__internal/mixins/element-internals.d.ts +40 -0
  205. package/dist/src/__internal/mixins/form-associated.d.ts +174 -0
  206. package/dist/src/__internal/mixins/form-submitter.d.ts +59 -0
  207. package/dist/src/__internal/mixins/hyperlink.d.ts +42 -0
  208. package/dist/src/__internal/mixins/mixin.d.ts +49 -0
  209. package/dist/src/{__utils → __internal/utils}/observe-slot-change.d.ts +1 -0
  210. package/dist/src/accordion/accordion-item.d.ts +3 -1
  211. package/dist/src/accordion/accordion.d.ts +1 -1
  212. package/dist/src/alert/alert.d.ts +43 -0
  213. package/dist/src/alert/index.d.ts +1 -0
  214. package/dist/src/app-bar/app-bar.d.ts +92 -0
  215. package/dist/src/app-bar/index.d.ts +1 -0
  216. package/dist/src/avatar/avatar.d.ts +2 -0
  217. package/dist/src/bottom-sheet/bottom-sheet.d.ts +1 -1
  218. package/dist/src/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +1 -0
  219. package/dist/src/button/ButtonTypes.d.ts +5 -0
  220. package/dist/src/button/base-button/base-button.d.ts +18 -0
  221. package/dist/src/button/button/button.d.ts +29 -37
  222. package/dist/src/button/button-group/button-group.d.ts +17 -18
  223. package/dist/src/{fab → button/fab}/fab.d.ts +8 -26
  224. package/dist/src/button/icon-button/icon-button.d.ts +20 -27
  225. package/dist/src/button/index.d.ts +1 -0
  226. package/dist/src/calendar/calendar.d.ts +1 -1
  227. package/dist/src/canvas/canvas.d.ts +1 -1
  228. package/dist/src/card/card.d.ts +5 -6
  229. package/dist/src/chart-bar/chart-bar.d.ts +1 -1
  230. package/dist/src/chart-bar/chart-stacked-bar.d.ts +1 -1
  231. package/dist/src/checkbox/checkbox.d.ts +5 -1
  232. package/dist/src/chip/chip/chip.d.ts +9 -8
  233. package/dist/src/container/container.d.ts +5 -1
  234. package/dist/src/divider/divider.d.ts +2 -0
  235. package/dist/src/empty-state/empty-state.d.ts +1 -0
  236. package/dist/src/field/field.d.ts +19 -1
  237. package/dist/src/focus-ring/focus-ring.d.ts +3 -7
  238. package/dist/src/html-editor/html-editor.d.ts +1 -1
  239. package/dist/src/icon/icon.d.ts +9 -4
  240. package/dist/src/image/image.d.ts +4 -0
  241. package/dist/src/index.d.ts +7 -6
  242. package/dist/src/item/item.d.ts +20 -29
  243. package/dist/src/link/link.d.ts +1 -1
  244. package/dist/src/list/list-item.d.ts +7 -5
  245. package/dist/src/list/list.d.ts +3 -2
  246. package/dist/src/menu/menu/menu.d.ts +14 -0
  247. package/dist/src/menu/menu-item/menu-item.d.ts +10 -2
  248. package/dist/src/modal/modal.d.ts +1 -1
  249. package/dist/src/navigation-rail/navigation-rail-item.d.ts +5 -4
  250. package/dist/src/navigation-rail/navigation-rail.d.ts +1 -1
  251. package/dist/src/radio/radio.d.ts +5 -0
  252. package/dist/src/ripple/ripple.d.ts +10 -1
  253. package/dist/src/search/search.d.ts +1 -1
  254. package/dist/src/segmented-button/segmented-button-group.d.ts +2 -2
  255. package/dist/src/segmented-button/segmented-button.d.ts +2 -0
  256. package/dist/src/side-sheet/side-sheet.d.ts +1 -1
  257. package/dist/src/skeleton/skeleton.d.ts +1 -0
  258. package/dist/src/slider/slider.d.ts +1 -0
  259. package/dist/src/snackbar/snackbar.d.ts +12 -2
  260. package/dist/src/svg/svg.d.ts +5 -0
  261. package/dist/src/table/table.d.ts +5 -0
  262. package/dist/src/tabs/tab.d.ts +2 -7
  263. package/dist/src/toolbar/toolbar.d.ts +2 -2
  264. package/dist/{state-DwbEjqVk.js → state-DkTK9EGF.js} +2 -2
  265. package/dist/{state-DwbEjqVk.js.map → state-DkTK9EGF.js.map} +1 -1
  266. package/dist/{style-map-DVmWOuYy.js → style-map-BQD5Et1D.js} +2 -2
  267. package/dist/{style-map-DVmWOuYy.js.map → style-map-BQD5Et1D.js.map} +1 -1
  268. package/dist/sub-menu.js +241 -0
  269. package/dist/sub-menu.js.map +1 -0
  270. package/dist/svg.js +273 -0
  271. package/dist/svg.js.map +1 -0
  272. package/dist/tab-group.js +188 -0
  273. package/dist/tab-group.js.map +1 -0
  274. package/dist/tab-panel.js +61 -0
  275. package/dist/tab-panel.js.map +1 -0
  276. package/dist/tab.js +658 -0
  277. package/dist/tab.js.map +1 -0
  278. package/dist/table.js +620 -0
  279. package/dist/table.js.map +1 -0
  280. package/dist/tabs.js +240 -0
  281. package/dist/tabs.js.map +1 -0
  282. package/dist/throttle-C7ZAPqtu.js +24 -0
  283. package/dist/throttle-C7ZAPqtu.js.map +1 -0
  284. package/dist/toolbar.js +9 -5
  285. package/dist/toolbar.js.map +1 -1
  286. package/dist/tooltip.js +270 -0
  287. package/dist/tooltip.js.map +1 -0
  288. package/dist/tsconfig.tsbuildinfo +1 -1
  289. package/dist/{unsafe-html-BsGUjx94.js → unsafe-html-Ct0N2_UU.js} +2 -2
  290. package/dist/{unsafe-html-BsGUjx94.js.map → unsafe-html-Ct0N2_UU.js.map} +1 -1
  291. package/dist/when-DEJm_QN9.js +9 -0
  292. package/dist/when-DEJm_QN9.js.map +1 -0
  293. package/package.json +4 -2
  294. package/readme.md +3 -3
  295. package/scss/mixin.scss +8 -6
  296. package/src/__internal/aria/aria.ts +293 -0
  297. package/src/__internal/aria/delegate.ts +206 -0
  298. package/src/__internal/events/dispatch-hooks.ts +182 -0
  299. package/src/__internal/mixins/element-internals.ts +73 -0
  300. package/src/__internal/mixins/form-associated.ts +295 -0
  301. package/src/__internal/mixins/form-submitter.ts +133 -0
  302. package/src/__internal/mixins/hyperlink.ts +71 -0
  303. package/src/__internal/mixins/mixin.ts +58 -0
  304. package/src/{__utils → __internal/utils}/observe-slot-change.ts +2 -5
  305. package/src/accordion/accordion-item.ts +6 -2
  306. package/src/accordion/accordion.ts +4 -2
  307. package/src/accordion/demo/index.html +95 -90
  308. package/src/alert/alert.scss +82 -0
  309. package/src/{banner/banner.ts → alert/alert.ts} +22 -22
  310. package/src/alert/index.ts +1 -0
  311. package/src/app-bar/app-bar-colors.scss +17 -0
  312. package/src/app-bar/app-bar.scss +165 -0
  313. package/src/app-bar/app-bar.ts +155 -0
  314. package/src/app-bar/index.ts +1 -0
  315. package/src/avatar/avatar.ts +4 -0
  316. package/src/badge/badge.ts +2 -0
  317. package/src/bottom-sheet/bottom-sheet.ts +8 -2
  318. package/src/breadcrumb/breadcrumb/breadcrumb.ts +2 -0
  319. package/src/breadcrumb/breadcrumb-item/breadcrumb-item.ts +3 -0
  320. package/src/button/ButtonTypes.ts +17 -0
  321. package/src/button/base-button/base-button.ts +85 -0
  322. package/src/button/button/button-base.scss +306 -0
  323. package/src/button/button/button-colors.scss +27 -32
  324. package/src/button/button/button-layers.scss +126 -39
  325. package/src/button/button/button-shapes.scss +73 -0
  326. package/src/button/button/button.scss +12 -286
  327. package/src/button/button/button.ts +174 -194
  328. package/src/button/button-group/button-group.scss +43 -36
  329. package/src/button/button-group/button-group.ts +26 -137
  330. package/src/{fab → button/fab}/fab-colors.scss +0 -10
  331. package/src/button/fab/fab-sizes.scss +37 -0
  332. package/src/button/fab/fab.scss +172 -0
  333. package/src/{fab → button/fab}/fab.ts +69 -105
  334. package/src/button/icon-button/icon-button-sizes.scss +18 -3
  335. package/src/button/icon-button/icon-button.scss +5 -0
  336. package/src/button/icon-button/icon-button.ts +111 -141
  337. package/src/button/index.ts +7 -0
  338. package/src/calendar/calendar.ts +2 -2
  339. package/src/canvas/canvas.ts +2 -2
  340. package/src/card/card.scss +3 -3
  341. package/src/card/card.ts +20 -40
  342. package/src/chart-bar/chart-bar.ts +2 -2
  343. package/src/chart-bar/chart-stacked-bar.ts +2 -2
  344. package/src/checkbox/checkbox.ts +12 -4
  345. package/src/chip/chip/chip.scss +1 -1
  346. package/src/chip/chip/chip.ts +35 -55
  347. package/src/chip/demo/index.html +30 -26
  348. package/src/code-editor/code-editor.ts +68 -58
  349. package/src/code-editor/demo/index.html +32 -27
  350. package/src/code-highlighter/code-highlighter.ts +1 -1
  351. package/src/code-highlighter/demo/index.html +24 -21
  352. package/src/container/container.ts +8 -2
  353. package/src/date-picker/date-picker.ts +2 -3
  354. package/src/divider/divider.ts +5 -1
  355. package/src/dropdown-button/demo/index.html +106 -101
  356. package/src/dropdown-button/dropdown-button.ts +1 -1
  357. package/src/elevation/elevation.ts +2 -0
  358. package/src/empty-state/empty-state.ts +3 -0
  359. package/src/field/field.ts +52 -33
  360. package/src/focus-ring/focus-ring.ts +5 -7
  361. package/src/html-editor/html-editor.ts +28 -16
  362. package/src/icon/datasource.ts +1 -1
  363. package/src/icon/icon.ts +27 -15
  364. package/src/image/image.ts +18 -6
  365. package/src/index.ts +24 -6
  366. package/src/input/input.ts +2 -2
  367. package/src/item/item.scss +126 -162
  368. package/src/item/item.ts +70 -323
  369. package/src/link/link.ts +3 -1
  370. package/src/list/list-item.scss +43 -31
  371. package/src/list/list-item.ts +79 -75
  372. package/src/list/list.scss +1 -13
  373. package/src/list/list.ts +6 -3
  374. package/src/{peacock-loader.ts → loader.ts} +91 -79
  375. package/src/menu/menu/menu.scss +14 -11
  376. package/src/menu/menu/menu.ts +20 -8
  377. package/src/menu/menu-item/menu-item.scss +35 -3
  378. package/src/menu/menu-item/menu-item.ts +40 -34
  379. package/src/menu/sub-menu/sub-menu.ts +3 -0
  380. package/src/modal/modal.ts +2 -2
  381. package/src/navigation-rail/navigation-rail-item.ts +21 -36
  382. package/src/navigation-rail/navigation-rail.scss +1 -0
  383. package/src/navigation-rail/navigation-rail.ts +4 -2
  384. package/src/number-field/number-field.ts +2 -2
  385. package/src/pagination/pagination.ts +2 -0
  386. package/src/popover/popover.ts +3 -3
  387. package/src/radio/radio.ts +13 -5
  388. package/src/ripple/ripple.ts +14 -1
  389. package/src/search/search.ts +3 -3
  390. package/src/segmented-button/segmented-button-group.ts +8 -4
  391. package/src/segmented-button/segmented-button.ts +4 -0
  392. package/src/select/option.ts +2 -0
  393. package/src/side-sheet/side-sheet.ts +2 -2
  394. package/src/sidebar-menu/sidebar-menu-item.ts +3 -2
  395. package/src/skeleton/skeleton.ts +3 -0
  396. package/src/slider/slider.ts +4 -1
  397. package/src/snackbar/snackbar.ts +40 -25
  398. package/src/spinner/spinner.ts +2 -0
  399. package/src/svg/svg.ts +27 -9
  400. package/src/switch/switch.ts +1 -1
  401. package/src/table/table.ts +16 -3
  402. package/src/tabs/demo/index.html +79 -79
  403. package/src/tabs/tab-group.ts +2 -0
  404. package/src/tabs/tab-panel.ts +2 -0
  405. package/src/tabs/tab.scss +4 -4
  406. package/src/tabs/tab.ts +16 -39
  407. package/src/tabs/tabs.ts +2 -0
  408. package/src/textarea/textarea.ts +2 -2
  409. package/src/time-picker/time-picker.ts +2 -2
  410. package/src/toolbar/toolbar.ts +3 -3
  411. package/src/tooltip/tooltip.ts +14 -8
  412. package/src/url-field/url-field.ts +2 -3
  413. package/dist/ButtonConstants-D06bY4uy.js +0 -114
  414. package/dist/ButtonConstants-D06bY4uy.js.map +0 -1
  415. package/dist/NativeHyperlinkMixin-DrYXyfMQ.js.map +0 -1
  416. package/dist/banner.js +0 -186
  417. package/dist/banner.js.map +0 -1
  418. package/dist/button-colors-D7sJyPy8.js +0 -586
  419. package/dist/button-colors-D7sJyPy8.js.map +0 -1
  420. package/dist/icon-CueRR7wx.js +0 -260
  421. package/dist/icon-CueRR7wx.js.map +0 -1
  422. package/dist/icon-button-CAzYr_qr.js +0 -318
  423. package/dist/icon-button-CAzYr_qr.js.map +0 -1
  424. package/dist/navigation-rail-CM_svs5_.js +0 -14184
  425. package/dist/navigation-rail-CM_svs5_.js.map +0 -1
  426. package/dist/observe-slot-change-D8Xg-kSS.js.map +0 -1
  427. package/dist/peacock-loader.js.map +0 -1
  428. package/dist/popover-DUPmMVWS.js.map +0 -1
  429. package/dist/query-QBcUV-L_.js +0 -15
  430. package/dist/query-QBcUV-L_.js.map +0 -1
  431. package/dist/src/banner/banner.d.ts +0 -43
  432. package/dist/src/banner/index.d.ts +0 -1
  433. package/dist/src/button/GroupButtonInterface.d.ts +0 -4
  434. package/src/banner/banner.scss +0 -82
  435. package/src/banner/index.ts +0 -1
  436. package/src/button/GroupButtonInterface.ts +0 -4
  437. package/src/button/button/only-button.scss +0 -13
  438. package/src/fab/fab-sizes.scss +0 -37
  439. package/src/fab/fab.scss +0 -143
  440. /package/dist/src/{__controllers → __internal/controllers}/attachable-controller.d.ts +0 -0
  441. /package/dist/src/{__controllers → __internal/controllers}/floating-controller.d.ts +0 -0
  442. /package/dist/src/{__directive → __internal/directive}/spread.d.ts +0 -0
  443. /package/dist/src/{__mixins → __internal/mixins}/MixinConstructor.d.ts +0 -0
  444. /package/dist/src/{__mixins → __internal/mixins}/NativeButtonMixin.d.ts +0 -0
  445. /package/dist/src/{__mixins → __internal/mixins}/NativeHyperlinkMixin.d.ts +0 -0
  446. /package/dist/src/{__utils → __internal/utils}/cache-fetch.d.ts +0 -0
  447. /package/dist/src/{__utils → __internal/utils}/copy-to-clipboard.d.ts +0 -0
  448. /package/dist/src/{__utils → __internal/utils}/dispatch-event-utils.d.ts +0 -0
  449. /package/dist/src/{__utils → __internal/utils}/is-dark-mode.d.ts +0 -0
  450. /package/dist/src/{__utils → __internal/utils}/is-in-viewport.d.ts +0 -0
  451. /package/dist/src/{__utils → __internal/utils}/is-link.d.ts +0 -0
  452. /package/dist/src/{__utils → __internal/utils}/observe-theme-change.d.ts +0 -0
  453. /package/dist/src/{__utils → __internal/utils}/sanitize-svg.d.ts +0 -0
  454. /package/dist/src/{__utils → __internal/utils}/throttle.d.ts +0 -0
  455. /package/dist/src/{fab → button/fab}/index.d.ts +0 -0
  456. /package/dist/src/{peacock-loader.d.ts → loader.d.ts} +0 -0
  457. /package/dist/test/{banner.test.d.ts → alert.test.d.ts} +0 -0
  458. /package/src/{__controllers → __internal/controllers}/attachable-controller.ts +0 -0
  459. /package/src/{__controllers → __internal/controllers}/floating-controller.ts +0 -0
  460. /package/src/{__directive → __internal/directive}/spread.ts +0 -0
  461. /package/src/{__mixins → __internal/mixins}/MixinConstructor.ts +0 -0
  462. /package/src/{__mixins → __internal/mixins}/NativeButtonMixin.ts +0 -0
  463. /package/src/{__mixins → __internal/mixins}/NativeHyperlinkMixin.ts +0 -0
  464. /package/src/{__mixins → __internal/mixins}/README.md +0 -0
  465. /package/src/{__utils → __internal/utils}/cache-fetch.ts +0 -0
  466. /package/src/{__utils → __internal/utils}/copy-to-clipboard.ts +0 -0
  467. /package/src/{__utils → __internal/utils}/dispatch-event-utils.ts +0 -0
  468. /package/src/{__utils → __internal/utils}/is-dark-mode.ts +0 -0
  469. /package/src/{__utils → __internal/utils}/is-in-viewport.ts +0 -0
  470. /package/src/{__utils → __internal/utils}/is-link.ts +0 -0
  471. /package/src/{__utils → __internal/utils}/observe-theme-change.ts +0 -0
  472. /package/src/{__utils → __internal/utils}/sanitize-svg.ts +0 -0
  473. /package/src/{__utils → __internal/utils}/throttle.ts +0 -0
  474. /package/src/{fab → button/fab}/index.ts +0 -0
package/src/divider/divider.ts CHANGED
@@ -2,9 +2,10 @@ import { html, LitElement } from 'lit';
2
2
  import { property, state } from 'lit/decorators.js';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
4
 
5
- import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
5
+ import { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';
6
6
 
7
7
  import styles from './divider.scss';
8
+ import IndividualComponent from '@/IndividualComponent.js';
8
9
 
9
10
  /**
10
11
  * @label Divider
@@ -25,11 +26,14 @@ import styles from './divider.scss';
25
26
  * ```
26
27
  * @tags display
27
28
  */
29
+ @IndividualComponent
28
30
  export class Divider extends LitElement {
29
31
  static styles = [styles];
30
32
 
33
+ /** When true, renders the divider vertically. Defaults to horizontal. */
31
34
  @property({ type: Boolean, reflect: true }) vertical = false;
32
35
 
36
+ /** True when the default slot contains content, used to show the label variant. */
33
37
  @state()
34
38
  slotHasContent = false;
35
39
 
package/src/dropdown-button/demo/index.html CHANGED
@@ -1,110 +1,115 @@
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/tokens.css' />
7
- <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
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/tokens.css" />
10
+ <link
11
+ href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
12
+ rel="stylesheet"
13
+ />
8
14
 
9
- <style>
10
- body {
11
- background: var(--color-surface);
12
- padding: 2rem;
13
- display: flex;
14
- flex-wrap: wrap;
15
- gap: 1rem;
16
- align-items: flex-start;
17
- font-family: var(--font-family-sans);
18
- }
19
- </style>
20
- </head>
21
- <body>
15
+ <style>
16
+ body {
17
+ background: var(--color-surface);
18
+ padding: 2rem;
19
+ display: flex;
20
+ flex-wrap: wrap;
21
+ gap: 1rem;
22
+ align-items: flex-start;
23
+ font-family: var(--font-family-sans);
24
+ }
25
+ </style>
26
+ </head>
27
+ <body>
28
+ <!-- Basic usage -->
29
+ <wc-dropdown-button>
30
+ Actions
31
+ <wc-menu-item slot="menu">Edit</wc-menu-item>
32
+ <wc-menu-item slot="menu">Duplicate</wc-menu-item>
33
+ <wc-menu-item slot="menu">Delete</wc-menu-item>
34
+ </wc-dropdown-button>
22
35
 
23
- <!-- Basic usage -->
24
- <wc-dropdown-button>
25
- Actions
26
- <wc-menu-item slot="menu">Edit</wc-menu-item>
27
- <wc-menu-item slot="menu">Duplicate</wc-menu-item>
28
- <wc-menu-item slot="menu">Delete</wc-menu-item>
29
- </wc-dropdown-button>
36
+ <!-- Variants -->
37
+ <wc-dropdown-button variant="filled">
38
+ Filled
39
+ <wc-menu-item slot="menu">Option A</wc-menu-item>
40
+ <wc-menu-item slot="menu">Option B</wc-menu-item>
41
+ </wc-dropdown-button>
42
+ <wc-dropdown-button variant="tonal">
43
+ Tonal
44
+ <wc-menu-item slot="menu">Option A</wc-menu-item>
45
+ <wc-menu-item slot="menu">Option B</wc-menu-item>
46
+ </wc-dropdown-button>
47
+ <wc-dropdown-button variant="outlined">
48
+ Outlined
49
+ <wc-menu-item slot="menu">Option A</wc-menu-item>
50
+ <wc-menu-item slot="menu">Option B</wc-menu-item>
51
+ </wc-dropdown-button>
52
+ <wc-dropdown-button variant="text">
53
+ Text
54
+ <wc-menu-item slot="menu">Option A</wc-menu-item>
55
+ <wc-menu-item slot="menu">Option B</wc-menu-item>
56
+ </wc-dropdown-button>
57
+ <wc-dropdown-button variant="elevated">
58
+ Elevated
59
+ <wc-menu-item slot="menu">Option A</wc-menu-item>
60
+ <wc-menu-item slot="menu">Option B</wc-menu-item>
61
+ </wc-dropdown-button>
30
62
 
31
- <!-- Variants -->
32
- <wc-dropdown-button variant="filled">
33
- Filled
34
- <wc-menu-item slot="menu">Option A</wc-menu-item>
35
- <wc-menu-item slot="menu">Option B</wc-menu-item>
36
- </wc-dropdown-button>
37
- <wc-dropdown-button variant="tonal">
38
- Tonal
39
- <wc-menu-item slot="menu">Option A</wc-menu-item>
40
- <wc-menu-item slot="menu">Option B</wc-menu-item>
41
- </wc-dropdown-button>
42
- <wc-dropdown-button variant="outlined">
43
- Outlined
44
- <wc-menu-item slot="menu">Option A</wc-menu-item>
45
- <wc-menu-item slot="menu">Option B</wc-menu-item>
46
- </wc-dropdown-button>
47
- <wc-dropdown-button variant="text">
48
- Text
49
- <wc-menu-item slot="menu">Option A</wc-menu-item>
50
- <wc-menu-item slot="menu">Option B</wc-menu-item>
51
- </wc-dropdown-button>
52
- <wc-dropdown-button variant="elevated">
53
- Elevated
54
- <wc-menu-item slot="menu">Option A</wc-menu-item>
55
- <wc-menu-item slot="menu">Option B</wc-menu-item>
56
- </wc-dropdown-button>
63
+ <!-- Colors -->
64
+ <wc-dropdown-button color="primary">
65
+ Primary
66
+ <wc-menu-item slot="menu">Option A</wc-menu-item>
67
+ <wc-menu-item slot="menu">Option B</wc-menu-item>
68
+ </wc-dropdown-button>
69
+ <wc-dropdown-button color="success">
70
+ Success
71
+ <wc-menu-item slot="menu">Option A</wc-menu-item>
72
+ <wc-menu-item slot="menu">Option B</wc-menu-item>
73
+ </wc-dropdown-button>
74
+ <wc-dropdown-button color="danger">
75
+ Danger
76
+ <wc-menu-item slot="menu">Option A</wc-menu-item>
77
+ <wc-menu-item slot="menu">Option B</wc-menu-item>
78
+ </wc-dropdown-button>
57
79
 
58
- <!-- Colors -->
59
- <wc-dropdown-button color="primary">
60
- Primary
61
- <wc-menu-item slot="menu">Option A</wc-menu-item>
62
- <wc-menu-item slot="menu">Option B</wc-menu-item>
63
- </wc-dropdown-button>
64
- <wc-dropdown-button color="success">
65
- Success
66
- <wc-menu-item slot="menu">Option A</wc-menu-item>
67
- <wc-menu-item slot="menu">Option B</wc-menu-item>
68
- </wc-dropdown-button>
69
- <wc-dropdown-button color="danger">
70
- Danger
71
- <wc-menu-item slot="menu">Option A</wc-menu-item>
72
- <wc-menu-item slot="menu">Option B</wc-menu-item>
73
- </wc-dropdown-button>
80
+ <!-- Sizes -->
81
+ <wc-dropdown-button size="xs">
82
+ Extra small
83
+ <wc-menu-item slot="menu">Option A</wc-menu-item>
84
+ <wc-menu-item slot="menu">Option B</wc-menu-item>
85
+ </wc-dropdown-button>
86
+ <wc-dropdown-button size="sm">
87
+ Small
88
+ <wc-menu-item slot="menu">Option A</wc-menu-item>
89
+ <wc-menu-item slot="menu">Option B</wc-menu-item>
90
+ </wc-dropdown-button>
91
+ <wc-dropdown-button size="md">
92
+ Medium
93
+ <wc-menu-item slot="menu">Option A</wc-menu-item>
94
+ <wc-menu-item slot="menu">Option B</wc-menu-item>
95
+ </wc-dropdown-button>
74
96
 
75
- <!-- Sizes -->
76
- <wc-dropdown-button size="xs">
77
- Extra small
78
- <wc-menu-item slot="menu">Option A</wc-menu-item>
79
- <wc-menu-item slot="menu">Option B</wc-menu-item>
80
- </wc-dropdown-button>
81
- <wc-dropdown-button size="sm">
82
- Small
83
- <wc-menu-item slot="menu">Option A</wc-menu-item>
84
- <wc-menu-item slot="menu">Option B</wc-menu-item>
85
- </wc-dropdown-button>
86
- <wc-dropdown-button size="md">
87
- Medium
88
- <wc-menu-item slot="menu">Option A</wc-menu-item>
89
- <wc-menu-item slot="menu">Option B</wc-menu-item>
90
- </wc-dropdown-button>
97
+ <!-- Disabled -->
98
+ <wc-dropdown-button disabled>
99
+ Disabled
100
+ <wc-menu-item slot="menu">Option A</wc-menu-item>
101
+ <wc-menu-item slot="menu">Option B</wc-menu-item>
102
+ </wc-dropdown-button>
91
103
 
92
- <!-- Disabled -->
93
- <wc-dropdown-button disabled>
94
- Disabled
95
- <wc-menu-item slot="menu">Option A</wc-menu-item>
96
- <wc-menu-item slot="menu">Option B</wc-menu-item>
97
- </wc-dropdown-button>
104
+ <!-- Placement -->
105
+ <wc-dropdown-button placement="bottom-end">
106
+ Bottom End
107
+ <wc-menu-item slot="menu">Option 1</wc-menu-item>
108
+ <wc-menu-item slot="menu">Option 2</wc-menu-item>
109
+ </wc-dropdown-button>
98
110
 
99
- <!-- Placement -->
100
- <wc-dropdown-button placement="bottom-end">
101
- Bottom End
102
- <wc-menu-item slot="menu">Option 1</wc-menu-item>
103
- <wc-menu-item slot="menu">Option 2</wc-menu-item>
104
- </wc-dropdown-button>
105
-
106
- <script type='module'>
107
- import '/dist/peacock-loader.js';
108
- </script>
109
- </body>
111
+ <script type="module">
112
+ import '/dist/loader.js';
113
+ </script>
114
+ </body>
110
115
  </html>
package/src/dropdown-button/dropdown-button.ts CHANGED
@@ -175,7 +175,7 @@ export class DropdownButton extends LitElement {
175
175
  size=${this.size}
176
176
  variant=${this.variant}
177
177
  color=${this.color}
178
- icon-align="end"
178
+ trailing-icon
179
179
  ?disabled=${this.disabled}
180
180
  .configAria=${{
181
181
  'aria-haspopup': 'menu',
package/src/elevation/elevation.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { html, LitElement } from 'lit';
2
2
  import styles from './elevation.scss';
3
+ import IndividualComponent from '@/IndividualComponent.js';
3
4
 
4
5
  /**
5
6
  * @label Elevation
@@ -23,6 +24,7 @@ import styles from './elevation.scss';
23
24
  * ```
24
25
  * @tags display
25
26
  */
27
+ @IndividualComponent
26
28
  export class Elevation extends LitElement {
27
29
  static styles = [styles];
28
30
 
package/src/empty-state/empty-state.ts CHANGED
@@ -2,6 +2,7 @@ import { html, LitElement, nothing } from 'lit';
2
2
  import { property, state } from 'lit/decorators.js';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
4
  import styles from './empty-state.scss';
5
+ import IndividualComponent from '@/IndividualComponent.js';
5
6
 
6
7
  /**
7
8
  * @label Empty State
@@ -15,6 +16,7 @@ import styles from './empty-state.scss';
15
16
  * <wc-empty-state style="width:100%" headline="No items found"></wc-empty-state>
16
17
  * ```
17
18
  */
19
+ @IndividualComponent
18
20
  export class EmptyState extends LitElement {
19
21
  // Lit handles styles in a static property for better performance
20
22
  static styles = [styles];
@@ -28,6 +30,7 @@ export class EmptyState extends LitElement {
28
30
  @property({ type: String, reflect: true })
29
31
  description = '';
30
32
 
33
+ /** True when the component width is below 768px; triggers a stacked layout. */
31
34
  @state()
32
35
  private vertical = false;
33
36
 
package/src/field/field.ts CHANGED
@@ -2,9 +2,10 @@ import { html, LitElement, nothing } from 'lit';
2
2
  import { property, state } from 'lit/decorators.js';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
4
 
5
- import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
5
+ import { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';
6
6
 
7
7
  import styles from './field.scss';
8
+ import IndividualComponent from '@/IndividualComponent.js';
8
9
 
9
10
  /**
10
11
  * @label Field
@@ -23,66 +24,84 @@ import styles from './field.scss';
23
24
  * ```
24
25
  * @tags form
25
26
  */
27
+ @IndividualComponent
26
28
  export class Field extends LitElement {
27
-
28
29
  static shadowRootOptions: ShadowRootInit = {
29
- ...LitElement.shadowRootOptions,
30
- delegatesFocus: true,
31
- };
32
-
30
+ ...LitElement.shadowRootOptions,
31
+ delegatesFocus: true,
32
+ };
33
+
33
34
  static styles = [styles];
34
35
 
36
+ /** Label text shown above the field input. */
35
37
  @property({ type: String })
36
38
  label: string = '';
37
39
 
40
+ /** Help text (deprecated — prefer `helperText`). */
38
41
  @property({ type: String })
39
42
  help: string = '';
40
43
 
44
+ /** When true, marks the field as required and shows a required indicator. */
41
45
  @property({ type: Boolean })
42
46
  required: boolean = false;
43
47
 
48
+ /** When true, the field and its slotted input are disabled. */
44
49
  @property({ type: Boolean, reflect: true })
45
50
  disabled: boolean = false;
46
51
 
52
+ /** When true, the field and its slotted input are read-only. */
47
53
  @property({ type: Boolean, reflect: true })
48
54
  readonly: boolean = false;
49
55
 
56
+ /** When true, renders the field in a loading skeleton state. */
50
57
  @property({ type: Boolean })
51
58
  skeleton: boolean = false;
52
59
 
60
+ /** Helper/hint text shown in the field footer. */
53
61
  @property({ type: String, attribute: 'helper-text' })
54
62
  helperText: string = '';
55
63
 
64
+ /** When true, the field is in an error state and `errorText` is shown. */
56
65
  @property({ type: Boolean })
57
66
  error: boolean = false;
58
67
 
68
+ /** Error message displayed when `error` is true. */
59
69
  @property({ type: String, attribute: 'error-text' })
60
70
  errorText: string = '';
61
71
 
72
+ /** When true, the field is in a warning state and `warningText` is shown. */
62
73
  @property({ type: Boolean })
63
74
  warning: boolean = false;
64
75
 
76
+ /** Warning message displayed when `warning` is true. */
65
77
  @property({ type: String, attribute: 'warning-text' })
66
78
  warningText: string = '';
67
79
 
80
+ /** Character / word count string displayed at the trailing end of the footer. */
68
81
  @property({ type: String, attribute: 'text-count' })
69
82
  textCount: string = '';
70
83
 
84
+ /** When true, applies focused styling (controlled externally by the slotted input). */
71
85
  @property({ type: Boolean })
72
86
  focused: boolean = false;
73
87
 
88
+ /** When true, applies populated styling (controlled externally by the slotted input). */
74
89
  @property({ type: Boolean })
75
90
  populated: boolean = false;
76
91
 
92
+ /** Visual variant of the field container. */
77
93
  @property({ type: String })
78
94
  variant: 'filled' | 'outlined' | 'default' = 'default';
79
95
 
96
+ /** Reference to the host input element; used to forward click-on-label focus. */
80
97
  @property({ type: Object })
81
98
  host?: HTMLElement;
82
99
 
100
+ /** True when the `field-start` slot contains at least one node. */
83
101
  @state()
84
102
  slotStartHasContent: boolean = false;
85
103
 
104
+ /** True when the `field-end` slot contains at least one node. */
86
105
  @state()
87
106
  slotEndHasContent: boolean = false;
88
107
 
@@ -136,6 +155,33 @@ export class Field extends LitElement {
136
155
  </div>`;
137
156
  }
138
157
 
158
+ __renderFieldFooter() {
159
+ if (
160
+ !this.textCount &&
161
+ !this.helperText &&
162
+ !this.errorText &&
163
+ !this.warningText
164
+ )
165
+ return nothing;
166
+ return html`<div class="field-footer">
167
+ ${this.__renderHelperText()} ${this.__renderWordCount()}
168
+ </div>`;
169
+ }
170
+
171
+ __renderHelperText() {
172
+ if (this.error) return html`<div class="helper">${this.errorText}</div>`;
173
+ if (this.warning)
174
+ return html`<div class="helper">${this.warningText}</div>`;
175
+ if (this.helperText || this.helperText === '')
176
+ return html`<div class="helper">${this.helperText}</div>`;
177
+ return nothing;
178
+ }
179
+
180
+ __renderWordCount() {
181
+ if (!this.textCount) return nothing;
182
+ return html`<div class="text-count">${this.textCount}</div>`;
183
+ }
184
+
139
185
  render() {
140
186
  const classes = {
141
187
  field: true,
@@ -186,31 +232,4 @@ export class Field extends LitElement {
186
232
  </div>
187
233
  `;
188
234
  }
189
-
190
- __renderFieldFooter() {
191
- if (
192
- !this.textCount &&
193
- !this.helperText &&
194
- !this.errorText &&
195
- !this.warningText
196
- )
197
- return nothing;
198
- return html`<div class="field-footer">
199
- ${this.__renderHelperText()} ${this.__renderWordCount()}
200
- </div>`;
201
- }
202
-
203
- __renderHelperText() {
204
- if (this.error) return html`<div class="helper">${this.errorText}</div>`;
205
- if (this.warning)
206
- return html`<div class="helper">${this.warningText}</div>`;
207
- if (this.helperText || this.helperText === '')
208
- return html`<div class="helper">${this.helperText}</div>`;
209
- return nothing;
210
- }
211
-
212
- __renderWordCount() {
213
- if (!this.textCount) return nothing;
214
- return html`<div class="text-count">${this.textCount}</div>`;
215
- }
216
235
  }
package/src/focus-ring/focus-ring.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { isServer, LitElement, PropertyValues } from 'lit';
2
2
  import { property } from 'lit/decorators.js';
3
3
  import styles from './focus-ring.scss';
4
+ import IndividualComponent from '@/IndividualComponent.js';
4
5
  import {
5
6
  Attachable,
6
7
  AttachableController,
7
- } from '@/__controllers/attachable-controller.js';
8
+ } from '@/__internal/controllers/attachable-controller.js';
8
9
 
9
10
  /**
10
11
  * Events that the focus ring listens to.
@@ -29,18 +30,15 @@ interface FocusRingEvent extends Event {
29
30
  *
30
31
  * @fires visibility-changed {Event} Fired whenever `visible` changes.
31
32
  */
33
+ @IndividualComponent
32
34
  export class FocusRing extends LitElement implements Attachable {
33
35
  static styles = [styles];
34
36
 
35
- /**
36
- * Makes the focus ring visible.
37
- */
37
+ /** When true, the focus ring is visible. Toggled automatically based on `:focus-visible` state. */
38
38
  @property({ type: Boolean, reflect: true })
39
39
  visible = false;
40
40
 
41
- /**
42
- * Makes the focus ring animate inwards instead of outwards.
43
- */
41
+ /** When true, the ring animates inward instead of outward (for use inside containers). */
44
42
  @property({ type: Boolean, reflect: true }) inward = false;
45
43
 
46
44
  get htmlFor() {
package/src/html-editor/html-editor.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { html, nothing } from 'lit';
1
+ import { html, nothing } from 'lit';
2
2
  import { property, query, state } from 'lit/decorators.js';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
4
  import { Editor, mergeAttributes } from '@tiptap/core';
@@ -10,7 +10,7 @@ import { html as beautifyHtml } from 'js-beautify';
10
10
 
11
11
  import IndividualComponent from '@/IndividualComponent.js';
12
12
  import BaseInput from '../input/BaseInput.js';
13
- import { redispatchEvent } from '../__utils/dispatch-event-utils.js';
13
+ import { redispatchEvent } from '../__internal/utils/dispatch-event-utils.js';
14
14
 
15
15
  import styles from './html-editor.scss';
16
16
 
@@ -22,7 +22,7 @@ import styles from './html-editor.scss';
22
22
  * @summary A Tiptap-powered HTML editor with visual and source editing modes.
23
23
  * @overview
24
24
  * <p>The HTML Editor provides a rich-text editing experience built on Tiptap.
25
- * It wraps the editable area in a Material 3 styled <code>wc-field</code>,
25
+ * It wraps the editable area in A styled <code>wc-field</code>,
26
26
  * exposes common formatting actions, and includes a segmented switch between
27
27
  * <strong>Visual</strong> and <strong>HTML</strong> source modes.</p>
28
28
  *
@@ -170,7 +170,10 @@ export class HtmlEditor extends BaseInput {
170
170
 
171
171
  private _destroyEditor() {
172
172
  if (!this._editor) return;
173
- this._editorEl?.removeEventListener('click', this._focusEditorOnContainerClick);
173
+ this._editorEl?.removeEventListener(
174
+ 'click',
175
+ this._focusEditorOnContainerClick,
176
+ );
174
177
  this._editor.destroy();
175
178
  this._editor = undefined;
176
179
  }
@@ -194,7 +197,10 @@ export class HtmlEditor extends BaseInput {
194
197
  const item = this._getMentionItem(node.attrs.id);
195
198
  return [
196
199
  'a',
197
- mergeAttributes({ contenteditable: false }, options.HTMLAttributes),
200
+ mergeAttributes(
201
+ { contenteditable: false },
202
+ options.HTMLAttributes,
203
+ ),
198
204
  `${this.showSuggestionCharacter ? options.suggestion.char : ''}${
199
205
  item ? item.label : node.attrs.id
200
206
  }`,
@@ -210,7 +216,9 @@ export class HtmlEditor extends BaseInput {
210
216
 
211
217
  return this.mentions
212
218
  .filter(item =>
213
- item.label.toLowerCase().startsWith(mentionQuery.toLowerCase()),
219
+ item.label
220
+ .toLowerCase()
221
+ .startsWith(mentionQuery.toLowerCase()),
214
222
  )
215
223
  .map(item => item.value)
216
224
  .slice(0, 5);
@@ -254,7 +262,10 @@ export class HtmlEditor extends BaseInput {
254
262
  }
255
263
 
256
264
  this._changeTimeout = window.setTimeout(() => {
257
- redispatchEvent(this, new Event('change', { bubbles: true, composed: true }));
265
+ redispatchEvent(
266
+ this,
267
+ new Event('change', { bubbles: true, composed: true }),
268
+ );
258
269
  }, this.debounce);
259
270
  }
260
271
 
@@ -351,15 +362,11 @@ export class HtmlEditor extends BaseInput {
351
362
  role="toolbar"
352
363
  aria-label="Formatting toolbar"
353
364
  >
354
- ${this._toolbarButton(
355
- 'undo',
356
- 'Undo',
357
- () => this._editor?.commands.undo(),
365
+ ${this._toolbarButton('undo', 'Undo', () =>
366
+ this._editor?.commands.undo(),
358
367
  )}
359
- ${this._toolbarButton(
360
- 'redo',
361
- 'Redo',
362
- () => this._editor?.commands.redo(),
368
+ ${this._toolbarButton('redo', 'Redo', () =>
369
+ this._editor?.commands.redo(),
363
370
  )}
364
371
 
365
372
  <span class="toolbar-divider"></span>
@@ -474,7 +481,12 @@ export class HtmlEditor extends BaseInput {
474
481
  <div class="tiptap-root"></div>
475
482
  </div>
476
483
 
477
- <div class=${classMap({ 'html-source': true, hidden: this._mode !== 'html' })}>
484
+ <div
485
+ class=${classMap({
486
+ 'html-source': true,
487
+ hidden: this._mode !== 'html',
488
+ })}
489
+ >
478
490
  <wc-code-editor
479
491
  language="html"
480
492
  .value=${this.value}
package/src/icon/datasource.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { createCacheFetch } from '@/__utils/cache-fetch.js';
1
+ import { createCacheFetch } from '@/__internal/utils/cache-fetch.js';
2
2
 
3
3
  const PROVIDERS: Record<string, (name: string) => string> = {
4
4
  'material-symbols': (name: string) =>