@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
package/src/button/button/button-base.scss ADDED
@@ -0,0 +1,307 @@
1
+ @use '../../../scss/mixin';
2
+
3
+ @include mixin.base-styles;
4
+
5
+ :host {
6
+ --button-icon-size: unset;
7
+ --button-container-padding: unset;
8
+ }
9
+
10
+ :host {
11
+ position: relative;
12
+ display: inline-flex;
13
+ min-height: var(--button-height);
14
+
15
+ --private-button-container-shape-start-start: var(
16
+ --button-container-shape-start-start,
17
+ var(--button-container-shape)
18
+ );
19
+ --private-button-container-shape-start-end: var(
20
+ --button-container-shape-start-end,
21
+ var(--button-container-shape)
22
+ );
23
+ --private-button-container-shape-end-start: var(
24
+ --button-container-shape-end-start,
25
+ var(--button-container-shape)
26
+ );
27
+ --private-button-container-shape-end-end: var(
28
+ --button-container-shape-end-end,
29
+ var(--button-container-shape)
30
+ );
31
+ --private-button-container-shape-variant: var(
32
+ --button-container-shape-variant
33
+ );
34
+ }
35
+
36
+ /*
37
+ * Reset native button/link styles
38
+ */
39
+ .native-button {
40
+ @include mixin.reset-button-styles;
41
+ }
42
+ .native-link {
43
+ @include mixin.reset-link-styles;
44
+ }
45
+
46
+ .button {
47
+ display: flex;
48
+ align-items: center;
49
+ justify-content: center;
50
+ height: var(--button-height);
51
+ padding: 0
52
+ var(--button-container-padding, var(--private-button-container-padding));
53
+ width: 100%;
54
+
55
+ .label {
56
+ font-family: var(--font-family-sans) !important;
57
+ font-size: var(--private-button-font-size);
58
+ font-weight: var(--private-button-font-weight);
59
+ line-height: var(--private-button-line-height);
60
+ letter-spacing: var(--private-button-letter-spacing);
61
+ color: var(--private-button-label-text-color);
62
+
63
+ --icon-size: var(--button-icon-size, var(--private-button-icon-size));
64
+ --icon-color: var(--private-button-label-text-color);
65
+ opacity: var(--private-button-label-text-opacity, 1);
66
+ display: inline-flex;
67
+
68
+ pointer-events: none;
69
+ }
70
+
71
+ .touch {
72
+ position: absolute;
73
+ min-height: 2.5rem;
74
+ min-width: 2.5rem;
75
+ height: 100%;
76
+ width: 100%;
77
+
78
+ top: 50%;
79
+ left: 50%;
80
+ transform: translate(-50%, -50%);
81
+ cursor: var(--private-button-cursor, pointer);
82
+ }
83
+
84
+ /* make the icon slot itself collapsible so removal animates smoothly */
85
+ .icon-slot {
86
+ display: inline-flex;
87
+ align-items: center;
88
+ overflow: hidden;
89
+ pointer-events: none;
90
+ }
91
+
92
+ .icon-slot::slotted(*) {
93
+ --icon-size: var(--button-icon-size, var(--private-button-icon-size));
94
+ --icon-color: var(--private-button-label-text-color);
95
+ opacity: var(--private-button-label-text-opacity, 1);
96
+ }
97
+ }
98
+
99
+ :host(:not([skeleton])) {
100
+ .skeleton {
101
+ display: none;
102
+ }
103
+ }
104
+
105
+ :host([skeleton]) {
106
+ .background {
107
+ display: none;
108
+ }
109
+ .ripple {
110
+ display: none;
111
+ }
112
+ }
113
+
114
+ /**
115
+ * Button variant definitions
116
+ */
117
+ :host([variant='elevated']) {
118
+ --private-button-container-color: var(--elevated-button-container-color);
119
+ --private-button-label-text-color: var(--elevated-button-label-text-color);
120
+ --private-button-container-elevation-level: 1;
121
+
122
+ --private-button-state-color: var(--private-button-label-text-color);
123
+
124
+ &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
125
+ --private-button-container-elevation-level: 2;
126
+ --private-button-state-opacity: 0.08;
127
+ }
128
+
129
+ &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
130
+ --private-button-container-elevation-level: 1;
131
+ --private-button-state-opacity: 0.12;
132
+ }
133
+
134
+ &:host([disabled]),
135
+ &:host([soft-disabled]) {
136
+ --private-button-cursor: not-allowed;
137
+ --private-button-container-color: var(--color-on-surface);
138
+ --private-button-container-opacity: 0.1;
139
+ --private-button-label-text-color: var(--color-on-surface);
140
+ --private-button-label-text-opacity: 0.38;
141
+
142
+ .ripple {
143
+ display: none;
144
+ }
145
+ }
146
+ }
147
+
148
+ :host([variant='filled']) {
149
+ --private-button-container-color: var(--filled-button-container-color);
150
+ --private-button-label-text-color: var(--filled-button-label-text-color);
151
+ --private-button-state-color: var(--private-button-label-text-color);
152
+
153
+ &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
154
+ --private-button-container-elevation-level: 1;
155
+ --private-button-state-opacity: 0.08;
156
+ }
157
+
158
+ &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
159
+ --private-button-container-elevation-level: 0;
160
+ --private-button-state-opacity: 0.1;
161
+ }
162
+
163
+ &:host([disabled]),
164
+ &:host([soft-disabled]) {
165
+ --private-button-cursor: not-allowed;
166
+ --private-button-container-color: var(--color-on-surface);
167
+ --private-button-container-opacity: 0.1;
168
+ --private-button-label-text-color: var(--color-on-surface);
169
+ --private-button-label-text-opacity: 0.38;
170
+
171
+ .ripple {
172
+ display: none;
173
+ }
174
+ }
175
+ }
176
+
177
+ :host([variant='tonal']) {
178
+ --private-button-container-color: var(--tonal-button-container-color);
179
+ --private-button-label-text-color: var(--tonal-button-label-text-color);
180
+
181
+ --private-button-state-color: var(--private-button-label-text-color);
182
+
183
+ &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
184
+ --private-button-container-elevation-level: 1;
185
+ --private-button-state-opacity: 0.08;
186
+ }
187
+
188
+ &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
189
+ --private-button-container-elevation-level: 0;
190
+ --private-button-state-opacity: 0.12;
191
+ }
192
+
193
+ &:host([disabled]),
194
+ &:host([soft-disabled]) {
195
+ --private-button-cursor: not-allowed;
196
+ --private-button-container-color: var(--color-on-surface);
197
+ --private-button-container-opacity: 0.1;
198
+ --private-button-label-text-color: var(--color-on-surface);
199
+ --private-button-label-text-opacity: 0.38;
200
+
201
+ .ripple {
202
+ display: none;
203
+ }
204
+ }
205
+ }
206
+
207
+ :host([variant='outlined']) {
208
+ --private-button-outline-width: var(
209
+ --outlined-button-outline-width,
210
+ 0.0675rem
211
+ );
212
+ --private-button-container-color: var(--outlined-button-container-color);
213
+ --private-button-outline-color: var(--outlined-button-outline-color);
214
+ --private-button-label-text-color: var(--outlined-button-label-text-color);
215
+
216
+ --private-button-state-color: var(--private-button-label-text-color);
217
+
218
+ &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
219
+ --private-button-state-opacity: 0.08;
220
+ }
221
+
222
+ &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
223
+ --private-button-state-opacity: 0.12;
224
+ }
225
+
226
+ &:host([disabled]),
227
+ &:host([soft-disabled]) {
228
+ --private-button-cursor: not-allowed;
229
+ --private-button-outline-color: var(--color-on-surface);
230
+ --private-button-label-text-color: var(--color-on-surface);
231
+ --private-button-label-text-opacity: 0.38;
232
+ --private-button-outline-opacity: 0.12;
233
+
234
+ .ripple {
235
+ display: none;
236
+ }
237
+ }
238
+ }
239
+
240
+ :host([variant='text']) {
241
+ --private-button-label-text-color: var(--text-button-label-text-color);
242
+ --private-button-state-color: var(--private-button-label-text-color);
243
+
244
+ &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
245
+ --private-button-state-opacity: 0.08;
246
+ }
247
+
248
+ &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
249
+ --private-button-state-opacity: 0.12;
250
+ }
251
+
252
+ &:host([disabled]),
253
+ &:host([soft-disabled]) {
254
+ --private-button-cursor: not-allowed;
255
+ --private-button-label-text-color: var(--color-on-surface);
256
+ --private-button-label-text-opacity: 0.38;
257
+
258
+ .ripple {
259
+ display: none;
260
+ }
261
+ }
262
+ }
263
+
264
+ :host([variant='neo']) {
265
+ --private-button-container-color: var(--neo-button-container-color);
266
+ --private-button-label-text-color: var(--neo-button-label-text-color);
267
+
268
+ --private-button-outline-width: var(
269
+ --outlined-button-outline-width,
270
+ 0.125rem
271
+ );
272
+ --private-button-outline-color: var(--color-inverse-surface);
273
+
274
+ .focus-ring {
275
+ --focus-ring-color: var(--color-primary-container);
276
+ --focus-ring-inset: -2px;
277
+ }
278
+
279
+ .ripple {
280
+ display: none;
281
+ }
282
+
283
+ &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
284
+ .background,
285
+ .button,
286
+ .outline,
287
+ .focus-ring {
288
+ transform: translateX(0.25rem) translateY(0.25rem);
289
+ }
290
+ }
291
+
292
+ &:host([disabled]) {
293
+ --private-button-container-color: var(--color-on-surface);
294
+ --private-button-container-opacity: 0.1;
295
+ --private-button-label-text-color: var(--color-on-surface);
296
+ --private-button-label-text-opacity: 0.38;
297
+ --private-button-outline-opacity: 0.12;
298
+
299
+ .ripple {
300
+ display: none;
301
+ }
302
+ }
303
+ }
304
+
305
+ :host([block]) {
306
+ width: 100%;
307
+ }
package/src/button/button/button-colors.scss CHANGED
@@ -1,4 +1,6 @@
1
1
  @mixin _button-color($color) {
2
+ --elevated-button-container-color: var(--color-surface-container-low);
3
+ --elevated-button-label-text-color: var(--color-#{$color});
2
4
 
3
5
  --filled-button-container-color: var(--color-#{$color});
4
6
  --filled-button-label-text-color: var(--color-on-#{$color});
@@ -6,11 +8,8 @@
6
8
  --tonal-button-container-color: var(--color-#{$color}-container);
7
9
  --tonal-button-label-text-color: var(--color-on-#{$color}-container);
8
10
 
9
- --elevated-button-container-color: var(--color-surface-container-low);
10
- --elevated-button-label-text-color: var(--color-#{$color});
11
-
12
- --outlined-button-outline-color: var(--color-#{$color});
13
- --outlined-button-label-text-color: var(--color-#{$color});
11
+ --outlined-button-outline-color: var(--color-outline-variant);
12
+ --outlined-button-label-text-color: var(--color-on-surface-variant);
14
13
 
15
14
  --text-button-label-text-color: var(--color-#{$color});
16
15
 
@@ -19,7 +18,6 @@
19
18
  }
20
19
 
21
20
  @mixin _button-color-toggle-unselected($color) {
22
-
23
21
  --filled-button-container-color: var(--color-surface-container-high);
24
22
  --filled-button-label-text-color: var(--color-on-surface);
25
23
 
@@ -29,88 +27,86 @@
29
27
  --elevated-button-container-color: var(--color-surface-container-low);
30
28
  --elevated-button-label-text-color: var(--color-#{$color});
31
29
 
32
- --outlined-button-outline-color: var(--color-#{$color});
33
- --outlined-button-label-text-color: var(--color-#{$color});
30
+ --outlined-button-outline-color: var(--color-outline-variant);
31
+ --outlined-button-label-text-color: var(--color-on-surface-variant);
34
32
  }
35
33
 
36
34
  @mixin _button-color-toggle-selected($color) {
37
-
38
35
  --filled-button-container-color: var(--color-#{$color});
39
36
  --filled-button-label-text-color: var(--color-on-#{$color});
40
37
 
41
- --tonal-button-container-color: var(--color-#{$color});
42
- --tonal-button-label-text-color: var(--color-on-#{$color});
38
+ --tonal-button-container-color: var(--color-secondary);
39
+ --tonal-button-label-text-color: var(--color-on-secondary);
43
40
 
44
41
  --elevated-button-container-color: var(--color-#{$color});
45
42
  --elevated-button-label-text-color: var(--color-on-#{$color});
46
43
 
47
44
  --outlined-button-outline-color: var(--color-inverse-surface);
48
- --outlined-button-label-text-color: var(--color-inverse-on-surface);
45
+ --outlined-button-container-color: var(--color-inverse-surface);
46
+ --outlined-button-label-text-color: var(--color-inverse-on-surface);
49
47
  }
50
48
 
51
- :host([color=primary]:not([toggle])) {
49
+ :host([color='primary']:not([toggle])) {
52
50
  @include _button-color(primary);
53
51
  }
54
52
 
55
- :host([color=primary][toggle][selected]) {
53
+ :host([color='primary'][toggle][selected]) {
56
54
  @include _button-color-toggle-selected(primary);
57
55
  }
58
56
 
59
- :host([color=primary][toggle]:not([selected])) {
57
+ :host([color='primary'][toggle]:not([selected])) {
60
58
  @include _button-color-toggle-unselected(primary);
61
59
  }
62
60
 
63
- :host([color=secondary]:not([toggle])) {
61
+ :host([color='secondary']:not([toggle])) {
64
62
  @include _button-color(secondary);
65
63
  }
66
64
 
67
- :host([color=secondary][toggle][selected]) {
65
+ :host([color='secondary'][toggle][selected]) {
68
66
  @include _button-color-toggle-selected(secondary);
69
67
  }
70
68
 
71
- :host([color=secondary][toggle]:not([selected])) {
69
+ :host([color='secondary'][toggle]:not([selected])) {
72
70
  @include _button-color-toggle-unselected(secondary);
73
71
  }
74
72
 
75
- :host([color=tertiary]:not([toggle])) {
73
+ :host([color='tertiary']:not([toggle])) {
76
74
  @include _button-color(tertiary);
77
75
  }
78
76
 
79
- :host([color=tertiary][toggle][selected]) {
77
+ :host([color='tertiary'][toggle][selected]) {
80
78
  @include _button-color-toggle-selected(tertiary);
81
79
  }
82
80
 
83
- :host([color=tertiary][toggle]:not([selected])) {
81
+ :host([color='tertiary'][toggle]:not([selected])) {
84
82
  @include _button-color-toggle-unselected(tertiary);
85
83
  }
86
84
 
87
- :host([color=success]:not([toggle])) {
85
+ :host([color='success']:not([toggle])) {
88
86
  @include _button-color(success);
89
87
  }
90
88
 
91
- :host([color=success][toggle][selected]) {
89
+ :host([color='success'][toggle][selected]) {
92
90
  @include _button-color-toggle-selected(success);
93
91
  }
94
92
 
95
- :host([color=success][toggle]:not([selected])) {
93
+ :host([color='success'][toggle]:not([selected])) {
96
94
  @include _button-color-toggle-unselected(success);
97
95
  }
98
96
 
99
-
100
- :host([color=danger]:not([toggle])) {
97
+ :host([color='danger']:not([toggle])) {
101
98
  @include _button-color(error);
102
99
  }
103
100
 
104
- :host([color=danger][toggle][selected]) {
101
+ :host([color='danger'][toggle][selected]) {
105
102
  @include _button-color-toggle-selected(error);
106
103
  }
107
104
 
108
- :host([color=danger][toggle]:not([selected])) {
105
+ :host([color='danger'][toggle]:not([selected])) {
109
106
  @include _button-color-toggle-unselected(error);
110
107
  }
111
108
 
112
-
113
- :host([color=on-surface]) {
109
+ :host([color='on-surface']) {
114
110
  --filled-button-container-color: var(--color-on-surface);
115
111
  --filled-button-label-text-color: var(--color-surface);
116
112
 
@@ -129,7 +125,7 @@
129
125
  --neo-button-label-text-color: var(--color-surface);
130
126
  }
131
127
 
132
- :host([color=surface]) {
128
+ :host([color='surface']) {
133
129
  --filled-button-container-color: var(--color-surface-container-high);
134
130
  --filled-button-label-text-color: var(--color-on-surface);
135
131
 
@@ -147,4 +143,3 @@
147
143
  --neo-button-container-color: var(--color-surface);
148
144
  --neo-button-label-text-color: var(--color-on-surface);
149
145
  }
150
-
package/src/button/button/button-layers.scss CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  // Mixin for the shared transition logic
4
4
  @mixin button-transition {
5
- transition-property: inset, width, height, transform, border-radius, opacity;
5
+ transition-property: inset, width, height, transform, opacity;
6
6
  transition-duration: 200ms;
7
7
  transition-timing-function: var(--easing-standard);
8
- will-change: inset, transform, border-radius, opacity;
8
+ will-change: inset, transform, opacity;
9
9
  }
10
10
 
11
11
  .button {
@@ -21,10 +21,22 @@
21
21
  background-color: var(--private-button-container-color);
22
22
  opacity: var(--private-button-container-opacity, 1);
23
23
 
24
- border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
25
- border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
26
- border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
27
- border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
24
+ border-start-start-radius: var(
25
+ --private-button-container-shape-start-start,
26
+ var(--private-button-container-shape)
27
+ );
28
+ border-start-end-radius: var(
29
+ --private-button-container-shape-start-end,
30
+ var(--private-button-container-shape)
31
+ );
32
+ border-end-start-radius: var(
33
+ --private-button-container-shape-end-start,
34
+ var(--private-button-container-shape)
35
+ );
36
+ border-end-end-radius: var(
37
+ --private-button-container-shape-end-end,
38
+ var(--private-button-container-shape)
39
+ );
28
40
  corner-shape: var(--private-button-container-shape-variant);
29
41
  @include button-transition;
30
42
  }
@@ -38,30 +50,68 @@
38
50
  background: var(--color-inverse-surface);
39
51
  transform: translateX(0.25rem) translateY(0.25rem);
40
52
 
41
- border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
42
- border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
43
- border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
44
- border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
53
+ border-start-start-radius: var(
54
+ --private-button-container-shape-start-start,
55
+ var(--private-button-container-shape)
56
+ );
57
+ border-start-end-radius: var(
58
+ --private-button-container-shape-start-end,
59
+ var(--private-button-container-shape)
60
+ );
61
+ border-end-start-radius: var(
62
+ --private-button-container-shape-end-start,
63
+ var(--private-button-container-shape)
64
+ );
65
+ border-end-end-radius: var(
66
+ --private-button-container-shape-end-end,
67
+ var(--private-button-container-shape)
68
+ );
45
69
  corner-shape: var(--private-button-container-shape-variant);
46
70
  @include button-transition;
47
71
  }
48
72
 
49
73
  .focus-ring {
50
- z-index: 2;
74
+ z-index: 1;
51
75
  pointer-events: none;
52
76
 
53
- --focus-ring-container-shape-start-start: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
54
- --focus-ring-container-shape-start-end: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
55
- --focus-ring-container-shape-end-start: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
56
- --focus-ring-container-shape-end-end: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
57
- --focus-ring-container-shape-variant: var(--private-button-container-shape-variant);
77
+ --focus-ring-container-shape-start-start: var(
78
+ --private-button-container-shape-start-start,
79
+ var(--private-button-container-shape)
80
+ );
81
+ --focus-ring-container-shape-start-end: var(
82
+ --private-button-container-shape-start-end,
83
+ var(--private-button-container-shape)
84
+ );
85
+ --focus-ring-container-shape-end-start: var(
86
+ --private-button-container-shape-end-start,
87
+ var(--private-button-container-shape)
88
+ );
89
+ --focus-ring-container-shape-end-end: var(
90
+ --private-button-container-shape-end-end,
91
+ var(--private-button-container-shape)
92
+ );
93
+ --focus-ring-container-shape-variant: var(
94
+ --private-button-container-shape-variant
95
+ );
58
96
  }
59
97
 
60
98
  .ripple {
61
- border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
62
- border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
63
- border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
64
- border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
99
+ border-start-start-radius: var(
100
+ --private-button-container-shape-start-start,
101
+ var(--private-button-container-shape)
102
+ );
103
+ border-start-end-radius: var(
104
+ --private-button-container-shape-start-end,
105
+ var(--private-button-container-shape)
106
+ );
107
+ border-end-start-radius: var(
108
+ --private-button-container-shape-end-start,
109
+ var(--private-button-container-shape)
110
+ );
111
+ border-end-end-radius: var(
112
+ --private-button-container-shape-end-end,
113
+ var(--private-button-container-shape)
114
+ );
65
115
  corner-shape: var(--private-button-container-shape-variant);
66
116
  pointer-events: none;
67
117
 
@@ -69,51 +119,84 @@
69
119
  --ripple-pressed-color: var(--private-button-state-color);
70
120
  }
71
121
 
72
-
73
122
  .skeleton {
74
123
  display: block;
75
124
  position: absolute;
76
125
  inset: 0;
77
126
  pointer-events: none;
78
127
 
79
- z-index: 2;
80
-
81
- --skeleton-container-shape-start-start: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
82
- --skeleton-container-shape-start-end: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
83
- --skeleton-container-shape-end-start: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
84
- --skeleton-container-shape-end-end: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
85
- --skeleton-container-shape-variant: var(--private-button-container-shape-variant);
128
+ --skeleton-container-shape-start-start: var(
129
+ --private-button-container-shape-start-start,
130
+ var(--private-button-container-shape)
131
+ );
132
+ --skeleton-container-shape-start-end: var(
133
+ --private-button-container-shape-start-end,
134
+ var(--private-button-container-shape)
135
+ );
136
+ --skeleton-container-shape-end-start: var(
137
+ --private-button-container-shape-end-start,
138
+ var(--private-button-container-shape)
139
+ );
140
+ --skeleton-container-shape-end-end: var(
141
+ --private-button-container-shape-end-end,
142
+ var(--private-button-container-shape)
143
+ );
144
+ --skeleton-container-shape-variant: var(
145
+ --private-button-container-shape-variant
146
+ );
86
147
  }
87
148
 
88
-
89
149
  .elevation {
90
150
  pointer-events: none;
91
151
  transition-duration: 280ms;
92
- --elevation-container-shape-start-start: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
93
- --elevation-container-shape-start-end: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
94
- --elevation-container-shape-end-start: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
95
- --elevation-container-shape-end-end: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
96
- --elevation-container-shape-variant: var(--private-button-container-shape-variant);
152
+ --elevation-container-shape-start-start: var(
153
+ --private-button-container-shape-start-start,
154
+ var(--private-button-container-shape)
155
+ );
156
+ --elevation-container-shape-start-end: var(
157
+ --private-button-container-shape-start-end,
158
+ var(--private-button-container-shape)
159
+ );
160
+ --elevation-container-shape-end-start: var(
161
+ --private-button-container-shape-end-start,
162
+ var(--private-button-container-shape)
163
+ );
164
+ --elevation-container-shape-end-end: var(
165
+ --private-button-container-shape-end-end,
166
+ var(--private-button-container-shape)
167
+ );
168
+ --elevation-container-shape-variant: var(
169
+ --private-button-container-shape-variant
170
+ );
97
171
 
98
172
  --elevation-level: var(--private-button-container-elevation-level);
99
173
  }
100
174
 
101
-
102
-
103
175
  .outline {
104
176
  display: block;
105
177
  position: absolute;
106
178
  inset: 0;
107
179
  pointer-events: none;
108
180
 
109
- z-index: 0;
110
-
111
- border: var(--private-button-outline-width) solid var(--private-button-outline-color);
181
+ border: var(--private-button-outline-width) solid
182
+ var(--private-button-outline-color);
112
183
  opacity: var(--private-button-outline-opacity, 1);
113
- border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
114
- border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
115
- border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
116
- border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
184
+ border-start-start-radius: var(
185
+ --private-button-container-shape-start-start,
186
+ var(--private-button-container-shape)
187
+ );
188
+ border-start-end-radius: var(
189
+ --private-button-container-shape-start-end,
190
+ var(--private-button-container-shape)
191
+ );
192
+ border-end-start-radius: var(
193
+ --private-button-container-shape-end-start,
194
+ var(--private-button-container-shape)
195
+ );
196
+ border-end-end-radius: var(
197
+ --private-button-container-shape-end-end,
198
+ var(--private-button-container-shape)
199
+ );
117
200
  corner-shape: var(--private-button-container-shape-variant);
118
201
 
119
202
  @include button-transition;