@redvars/peacock 3.8.0 → 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 (475) 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 -284
  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/demo/index.html +29 -36
  361. package/src/focus-ring/focus-ring.ts +5 -7
  362. package/src/html-editor/html-editor.ts +28 -16
  363. package/src/icon/datasource.ts +1 -1
  364. package/src/icon/icon.ts +27 -15
  365. package/src/image/image.ts +18 -6
  366. package/src/index.ts +24 -6
  367. package/src/input/input.ts +2 -2
  368. package/src/item/item.scss +126 -162
  369. package/src/item/item.ts +70 -323
  370. package/src/link/link.ts +3 -1
  371. package/src/list/list-item.scss +43 -31
  372. package/src/list/list-item.ts +79 -75
  373. package/src/list/list.scss +1 -13
  374. package/src/list/list.ts +6 -3
  375. package/src/{peacock-loader.ts → loader.ts} +91 -79
  376. package/src/menu/menu/menu.scss +14 -11
  377. package/src/menu/menu/menu.ts +20 -8
  378. package/src/menu/menu-item/menu-item.scss +35 -3
  379. package/src/menu/menu-item/menu-item.ts +40 -34
  380. package/src/menu/sub-menu/sub-menu.ts +3 -0
  381. package/src/modal/modal.ts +2 -2
  382. package/src/navigation-rail/navigation-rail-item.ts +21 -36
  383. package/src/navigation-rail/navigation-rail.scss +1 -0
  384. package/src/navigation-rail/navigation-rail.ts +4 -2
  385. package/src/number-field/number-field.ts +2 -2
  386. package/src/pagination/pagination.ts +2 -0
  387. package/src/popover/popover.ts +3 -3
  388. package/src/radio/radio.ts +13 -5
  389. package/src/ripple/ripple.ts +14 -1
  390. package/src/search/search.ts +3 -3
  391. package/src/segmented-button/segmented-button-group.ts +8 -4
  392. package/src/segmented-button/segmented-button.ts +4 -0
  393. package/src/select/option.ts +2 -0
  394. package/src/side-sheet/side-sheet.ts +2 -2
  395. package/src/sidebar-menu/sidebar-menu-item.ts +3 -2
  396. package/src/skeleton/skeleton.ts +3 -0
  397. package/src/slider/slider.ts +4 -1
  398. package/src/snackbar/snackbar.ts +40 -25
  399. package/src/spinner/spinner.ts +2 -0
  400. package/src/svg/svg.ts +27 -9
  401. package/src/switch/switch.ts +1 -1
  402. package/src/table/table.ts +16 -3
  403. package/src/tabs/demo/index.html +79 -79
  404. package/src/tabs/tab-group.ts +2 -0
  405. package/src/tabs/tab-panel.ts +2 -0
  406. package/src/tabs/tab.scss +4 -4
  407. package/src/tabs/tab.ts +16 -39
  408. package/src/tabs/tabs.ts +2 -0
  409. package/src/textarea/textarea.ts +2 -2
  410. package/src/time-picker/time-picker.ts +2 -2
  411. package/src/toolbar/toolbar.ts +3 -3
  412. package/src/tooltip/tooltip.ts +14 -8
  413. package/src/url-field/url-field.ts +2 -3
  414. package/dist/ButtonConstants-D06bY4uy.js +0 -114
  415. package/dist/ButtonConstants-D06bY4uy.js.map +0 -1
  416. package/dist/NativeHyperlinkMixin-DrYXyfMQ.js.map +0 -1
  417. package/dist/banner.js +0 -186
  418. package/dist/banner.js.map +0 -1
  419. package/dist/button-colors-DSuBHd-i.js +0 -585
  420. package/dist/button-colors-DSuBHd-i.js.map +0 -1
  421. package/dist/icon-CueRR7wx.js +0 -260
  422. package/dist/icon-CueRR7wx.js.map +0 -1
  423. package/dist/icon-button-CYqrnMnF.js +0 -318
  424. package/dist/icon-button-CYqrnMnF.js.map +0 -1
  425. package/dist/navigation-rail-CM_svs5_.js +0 -14184
  426. package/dist/navigation-rail-CM_svs5_.js.map +0 -1
  427. package/dist/observe-slot-change-D8Xg-kSS.js.map +0 -1
  428. package/dist/peacock-loader.js.map +0 -1
  429. package/dist/popover-DUPmMVWS.js.map +0 -1
  430. package/dist/query-QBcUV-L_.js +0 -15
  431. package/dist/query-QBcUV-L_.js.map +0 -1
  432. package/dist/src/banner/banner.d.ts +0 -43
  433. package/dist/src/banner/index.d.ts +0 -1
  434. package/dist/src/button/GroupButtonInterface.d.ts +0 -4
  435. package/src/banner/banner.scss +0 -82
  436. package/src/banner/index.ts +0 -1
  437. package/src/button/GroupButtonInterface.ts +0 -4
  438. package/src/button/button/only-button.scss +0 -13
  439. package/src/fab/fab-sizes.scss +0 -37
  440. package/src/fab/fab.scss +0 -143
  441. /package/dist/src/{__controllers → __internal/controllers}/attachable-controller.d.ts +0 -0
  442. /package/dist/src/{__controllers → __internal/controllers}/floating-controller.d.ts +0 -0
  443. /package/dist/src/{__directive → __internal/directive}/spread.d.ts +0 -0
  444. /package/dist/src/{__mixins → __internal/mixins}/MixinConstructor.d.ts +0 -0
  445. /package/dist/src/{__mixins → __internal/mixins}/NativeButtonMixin.d.ts +0 -0
  446. /package/dist/src/{__mixins → __internal/mixins}/NativeHyperlinkMixin.d.ts +0 -0
  447. /package/dist/src/{__utils → __internal/utils}/cache-fetch.d.ts +0 -0
  448. /package/dist/src/{__utils → __internal/utils}/copy-to-clipboard.d.ts +0 -0
  449. /package/dist/src/{__utils → __internal/utils}/dispatch-event-utils.d.ts +0 -0
  450. /package/dist/src/{__utils → __internal/utils}/is-dark-mode.d.ts +0 -0
  451. /package/dist/src/{__utils → __internal/utils}/is-in-viewport.d.ts +0 -0
  452. /package/dist/src/{__utils → __internal/utils}/is-link.d.ts +0 -0
  453. /package/dist/src/{__utils → __internal/utils}/observe-theme-change.d.ts +0 -0
  454. /package/dist/src/{__utils → __internal/utils}/sanitize-svg.d.ts +0 -0
  455. /package/dist/src/{__utils → __internal/utils}/throttle.d.ts +0 -0
  456. /package/dist/src/{fab → button/fab}/index.d.ts +0 -0
  457. /package/dist/src/{peacock-loader.d.ts → loader.d.ts} +0 -0
  458. /package/dist/test/{banner.test.d.ts → alert.test.d.ts} +0 -0
  459. /package/src/{__controllers → __internal/controllers}/attachable-controller.ts +0 -0
  460. /package/src/{__controllers → __internal/controllers}/floating-controller.ts +0 -0
  461. /package/src/{__directive → __internal/directive}/spread.ts +0 -0
  462. /package/src/{__mixins → __internal/mixins}/MixinConstructor.ts +0 -0
  463. /package/src/{__mixins → __internal/mixins}/NativeButtonMixin.ts +0 -0
  464. /package/src/{__mixins → __internal/mixins}/NativeHyperlinkMixin.ts +0 -0
  465. /package/src/{__mixins → __internal/mixins}/README.md +0 -0
  466. /package/src/{__utils → __internal/utils}/cache-fetch.ts +0 -0
  467. /package/src/{__utils → __internal/utils}/copy-to-clipboard.ts +0 -0
  468. /package/src/{__utils → __internal/utils}/dispatch-event-utils.ts +0 -0
  469. /package/src/{__utils → __internal/utils}/is-dark-mode.ts +0 -0
  470. /package/src/{__utils → __internal/utils}/is-in-viewport.ts +0 -0
  471. /package/src/{__utils → __internal/utils}/is-link.ts +0 -0
  472. /package/src/{__utils → __internal/utils}/observe-theme-change.ts +0 -0
  473. /package/src/{__utils → __internal/utils}/sanitize-svg.ts +0 -0
  474. /package/src/{__utils → __internal/utils}/throttle.ts +0 -0
  475. /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/demo/index.html CHANGED
@@ -9,50 +9,43 @@
9
9
  <style>
10
10
  body {
11
11
  background: #fafafa;
12
+ padding: 40px;
13
+ display: flex;
14
+ gap: 24px;
15
+ flex-wrap: wrap;
16
+ align-items: center;
17
+ font-family: 'Noto Sans', sans-serif;
18
+ }
19
+
20
+ .focus-surface {
21
+ position: relative;
22
+ display: inline-flex;
23
+ align-items: center;
24
+ justify-content: center;
25
+ padding: 12px 24px;
26
+ border-radius: 8px;
27
+ background: #e0e0e0;
28
+ cursor: pointer;
29
+ border: none;
30
+ font: inherit;
12
31
  }
13
32
  </style>
14
33
  </head>
15
34
  <body>
16
35
 
17
- <style>
18
- .elevated-element {
19
- position: relative;
20
- border-radius: 4px;
21
- padding: var(--spacing-200);
22
- }
23
- </style>
24
-
25
- <div class="elevated-element">
26
- <p-elevation style="--elevation-level: 1"></p-elevation>
27
- Level 1
28
- </div>
29
-
30
- <div class="elevated-element">
31
- <p-elevation style="--elevation-level: 2"></p-elevation>
32
- Level 2
33
- </div>
34
-
35
-
36
- <div class="elevated-element">
37
- <p-elevation style="--elevation-level: 3"></p-elevation>
38
- Level 3
39
- </div>
40
-
41
- <div class="elevated-element">
42
- <p-elevation style="--elevation-level: 4"></p-elevation>
43
- Level 4
44
- </div>
45
-
46
- <div class="elevated-element">
47
- <p-elevation style="--elevation-level: 5"></p-elevation>
48
- Level 5
49
- </div>
50
-
36
+ <button class="focus-surface">
37
+ Outward (default)
38
+ <p-focus-ring></p-focus-ring>
39
+ </button>
51
40
 
41
+ <button class="focus-surface">
42
+ Inward
43
+ <p-focus-ring inward></p-focus-ring>
44
+ </button>
52
45
 
53
46
  <script type='module'>
54
- import { Elevation } from '/dist/index.js';
55
- window.customElements.define('p-elevation', Elevation);
47
+ import { FocusRing } from '/dist/index.js';
48
+ window.customElements.define('p-focus-ring', FocusRing);
56
49
  </script>
57
50
  </body>
58
51
  </html>
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() {