@redvars/peacock 3.8.1 → 3.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (474) hide show
  1. package/dist/{BaseInput-14YmcfK7.js → BaseInput-CU1zZYKc.js} +3 -3
  2. package/dist/{BaseInput-14YmcfK7.js.map → BaseInput-CU1zZYKc.js.map} +1 -1
  3. package/dist/ButtonConstants-CahP2_NA.js +4 -0
  4. package/dist/ButtonConstants-CahP2_NA.js.map +1 -0
  5. package/dist/{IndividualComponent-DUINtMGK.js → IndividualComponent-Bdwyrvd6.js} +2 -2
  6. package/dist/{IndividualComponent-DUINtMGK.js.map → IndividualComponent-Bdwyrvd6.js.map} +1 -1
  7. package/dist/{NativeHyperlinkMixin-DrYXyfMQ.js → NativeHyperlinkMixin-D9J4aBTy.js} +4 -30
  8. package/dist/NativeHyperlinkMixin-D9J4aBTy.js.map +1 -0
  9. package/dist/accordion-item.js +338 -0
  10. package/dist/accordion-item.js.map +1 -0
  11. package/dist/accordion.js +159 -0
  12. package/dist/accordion.js.map +1 -0
  13. package/dist/alert.js +190 -0
  14. package/dist/alert.js.map +1 -0
  15. package/dist/app-bar.js +324 -0
  16. package/dist/app-bar.js.map +1 -0
  17. package/dist/assets/components.css +1 -1
  18. package/dist/assets/components.css.map +1 -1
  19. package/dist/assets/styles.css +1 -1
  20. package/dist/assets/styles.css.map +1 -1
  21. package/dist/attachable-controller-CAKVrfcG.js +119 -0
  22. package/dist/attachable-controller-CAKVrfcG.js.map +1 -0
  23. package/dist/avatar.js +114 -0
  24. package/dist/avatar.js.map +1 -0
  25. package/dist/badge.js +91 -0
  26. package/dist/badge.js.map +1 -0
  27. package/dist/base-Cl6v8-BZ.js +9 -0
  28. package/dist/base-Cl6v8-BZ.js.map +1 -0
  29. package/dist/bottom-sheet.js +14 -5
  30. package/dist/bottom-sheet.js.map +1 -1
  31. package/dist/breadcrumb-item.js +163 -0
  32. package/dist/breadcrumb-item.js.map +1 -0
  33. package/dist/breadcrumb.js +95 -0
  34. package/dist/breadcrumb.js.map +1 -0
  35. package/dist/button-group.js +87 -137
  36. package/dist/button-group.js.map +1 -1
  37. package/dist/button.js +863 -133
  38. package/dist/button.js.map +1 -1
  39. package/dist/calendar-column-view.js +8 -4
  40. package/dist/calendar-column-view.js.map +1 -1
  41. package/dist/calendar-month-view.js +8 -4
  42. package/dist/calendar-month-view.js.map +1 -1
  43. package/dist/calendar.js +8 -4
  44. package/dist/calendar.js.map +1 -1
  45. package/dist/canvas.js +8 -4
  46. package/dist/canvas.js.map +1 -1
  47. package/dist/card-content.js +1 -1
  48. package/dist/card.js +23 -45
  49. package/dist/card.js.map +1 -1
  50. package/dist/cb-compound-expression.js +6 -2
  51. package/dist/cb-compound-expression.js.map +1 -1
  52. package/dist/cb-divider.js +7 -3
  53. package/dist/cb-divider.js.map +1 -1
  54. package/dist/cb-expression.js +6 -2
  55. package/dist/cb-expression.js.map +1 -1
  56. package/dist/cb-predicate.js +7 -3
  57. package/dist/cb-predicate.js.map +1 -1
  58. package/dist/{chart-bar-cn6rrna-.js → chart-bar-CYoGNXnK.js} +6 -2
  59. package/dist/{chart-bar-cn6rrna-.js.map → chart-bar-CYoGNXnK.js.map} +1 -1
  60. package/dist/chart-bar.js +7 -6
  61. package/dist/chart-bar.js.map +1 -1
  62. package/dist/chart-doughnut.js +8 -3
  63. package/dist/chart-doughnut.js.map +1 -1
  64. package/dist/chart-pie.js +8 -3
  65. package/dist/chart-pie.js.map +1 -1
  66. package/dist/chart-stacked-bar.js +7 -6
  67. package/dist/chart-stacked-bar.js.map +1 -1
  68. package/dist/checkbox.js +526 -0
  69. package/dist/checkbox.js.map +1 -0
  70. package/dist/chip.js +459 -0
  71. package/dist/chip.js.map +1 -0
  72. package/dist/{class-map-YU7g0o3B.js → class-map-DG7CA1et.js} +2 -2
  73. package/dist/{class-map-YU7g0o3B.js.map → class-map-DG7CA1et.js.map} +1 -1
  74. package/dist/clock.js +6 -2
  75. package/dist/clock.js.map +1 -1
  76. package/dist/code-editor.js +45 -30
  77. package/dist/code-editor.js.map +1 -1
  78. package/dist/code-highlighter.js +9 -5
  79. package/dist/code-highlighter.js.map +1 -1
  80. package/dist/condition-builder.js +5 -1
  81. package/dist/condition-builder.js.map +1 -1
  82. package/dist/container.js +141 -0
  83. package/dist/container.js.map +1 -0
  84. package/dist/custom-elements-jsdocs.json +721 -769
  85. package/dist/custom-elements.json +3213 -1979
  86. package/dist/datasource-B2eRh6Or.js +108 -0
  87. package/dist/datasource-B2eRh6Or.js.map +1 -0
  88. package/dist/dispatch-event-utils-CuEqjlPT.js.map +1 -1
  89. package/dist/divider.js +135 -0
  90. package/dist/divider.js.map +1 -0
  91. package/dist/dropdown-button.js +11 -6
  92. package/dist/dropdown-button.js.map +1 -1
  93. package/dist/element-internals-2CMts_0M.js +290 -0
  94. package/dist/element-internals-2CMts_0M.js.map +1 -0
  95. package/dist/elevation.js +94 -0
  96. package/dist/elevation.js.map +1 -0
  97. package/dist/empty-state.js +194 -0
  98. package/dist/empty-state.js.map +1 -0
  99. package/dist/{event-manager-D-QCmUgR.js → event-manager-DTyX2uYD.js} +2 -2
  100. package/dist/{event-manager-D-QCmUgR.js.map → event-manager-DTyX2uYD.js.map} +1 -1
  101. package/dist/fab.js +138 -145
  102. package/dist/fab.js.map +1 -1
  103. package/dist/field.js +461 -0
  104. package/dist/field.js.map +1 -0
  105. package/dist/{popover-DUPmMVWS.js → floating-controller-CnUZnOhK.js} +2 -171
  106. package/dist/floating-controller-CnUZnOhK.js.map +1 -0
  107. package/dist/{flow-designer-node-BWrPuxAR.js → flow-designer-node-DsVwQTac.js} +7 -3
  108. package/dist/{flow-designer-node-BWrPuxAR.js.map → flow-designer-node-DsVwQTac.js.map} +1 -1
  109. package/dist/flow-designer-node.js +3 -3
  110. package/dist/flow-designer.js +19 -12
  111. package/dist/flow-designer.js.map +1 -1
  112. package/dist/focus-ring.js +126 -0
  113. package/dist/focus-ring.js.map +1 -0
  114. package/dist/form-associated-BXADnjOB.js +388 -0
  115. package/dist/form-associated-BXADnjOB.js.map +1 -0
  116. package/dist/html-editor.js +21 -9
  117. package/dist/html-editor.js.map +1 -1
  118. package/dist/hyperlink-DLvb6MXE.js +98 -0
  119. package/dist/hyperlink-DLvb6MXE.js.map +1 -0
  120. package/dist/icon-button.js +1064 -0
  121. package/dist/icon-button.js.map +1 -0
  122. package/dist/icon.js +170 -0
  123. package/dist/icon.js.map +1 -0
  124. package/dist/if-defined-BXZpRQ4P.js +10 -0
  125. package/dist/if-defined-BXZpRQ4P.js.map +1 -0
  126. package/dist/image.js +201 -0
  127. package/dist/image.js.map +1 -0
  128. package/dist/index.js +73 -20
  129. package/dist/index.js.map +1 -1
  130. package/dist/is-dark-mode-DOcaw4Yq.js.map +1 -1
  131. package/dist/is-link-Dk2OV3PM.js +6 -0
  132. package/dist/is-link-Dk2OV3PM.js.map +1 -0
  133. package/dist/item.js +212 -0
  134. package/dist/item.js.map +1 -0
  135. package/dist/link.js +75 -0
  136. package/dist/link.js.map +1 -0
  137. package/dist/list-D6JLh1uh.js +352 -0
  138. package/dist/list-D6JLh1uh.js.map +1 -0
  139. package/dist/list.js +14 -0
  140. package/dist/list.js.map +1 -0
  141. package/dist/{peacock-loader.js → loader.js} +83 -22
  142. package/dist/loader.js.map +1 -0
  143. package/dist/menu-item.js +318 -0
  144. package/dist/menu-item.js.map +1 -0
  145. package/dist/menu.js +534 -0
  146. package/dist/menu.js.map +1 -0
  147. package/dist/modal.js +9 -5
  148. package/dist/modal.js.map +1 -1
  149. package/dist/navigation-rail-item.js +385 -0
  150. package/dist/navigation-rail-item.js.map +1 -0
  151. package/dist/navigation-rail.js +217 -0
  152. package/dist/navigation-rail.js.map +1 -0
  153. package/dist/notification-manager.js +8 -4
  154. package/dist/notification-manager.js.map +1 -1
  155. package/dist/notification.js +8 -4
  156. package/dist/notification.js.map +1 -1
  157. package/dist/number-counter.js +7 -3
  158. package/dist/number-counter.js.map +1 -1
  159. package/dist/{observe-slot-change-D8Xg-kSS.js → observe-slot-change-DPxaZrZF.js} +3 -4
  160. package/dist/observe-slot-change-DPxaZrZF.js.map +1 -0
  161. package/dist/option.js +121 -0
  162. package/dist/option.js.map +1 -0
  163. package/dist/pagination.js +255 -0
  164. package/dist/pagination.js.map +1 -0
  165. package/dist/popover-content.js +7 -3
  166. package/dist/popover-content.js.map +1 -1
  167. package/dist/popover.js +175 -3
  168. package/dist/popover.js.map +1 -1
  169. package/dist/{property-1psGvXOq.js → property-B49QQ8pS.js} +2 -2
  170. package/dist/{property-1psGvXOq.js.map → property-B49QQ8pS.js.map} +1 -1
  171. package/dist/query-CHb9Ft_d.js +10 -0
  172. package/dist/query-CHb9Ft_d.js.map +1 -0
  173. package/dist/query-assigned-elements-BJaGSqM0.js +10 -0
  174. package/dist/query-assigned-elements-BJaGSqM0.js.map +1 -0
  175. package/dist/radio.js +476 -0
  176. package/dist/radio.js.map +1 -0
  177. package/dist/ripple.js +506 -0
  178. package/dist/ripple.js.map +1 -0
  179. package/dist/search.js +12 -7
  180. package/dist/search.js.map +1 -1
  181. package/dist/segmented-button-group.js +137 -0
  182. package/dist/segmented-button-group.js.map +1 -0
  183. package/dist/segmented-button.js +289 -0
  184. package/dist/segmented-button.js.map +1 -0
  185. package/dist/select-Dwtk0RIU.js +3937 -0
  186. package/dist/select-Dwtk0RIU.js.map +1 -0
  187. package/dist/side-sheet.js +8 -4
  188. package/dist/side-sheet.js.map +1 -1
  189. package/dist/skeleton.js +122 -0
  190. package/dist/skeleton.js.map +1 -0
  191. package/dist/slider.js +346 -0
  192. package/dist/slider.js.map +1 -0
  193. package/dist/snackbar.js +335 -0
  194. package/dist/snackbar.js.map +1 -0
  195. package/dist/spinner.js +100 -0
  196. package/dist/spinner.js.map +1 -0
  197. package/dist/split-button.js +10 -5
  198. package/dist/split-button.js.map +1 -1
  199. package/dist/spread-B5cgadZl.js +32 -0
  200. package/dist/spread-B5cgadZl.js.map +1 -0
  201. package/dist/src/__internal/aria/aria.d.ts +98 -0
  202. package/dist/src/__internal/aria/delegate.d.ts +54 -0
  203. package/dist/src/__internal/events/dispatch-hooks.d.ts +80 -0
  204. package/dist/src/__internal/mixins/element-internals.d.ts +40 -0
  205. package/dist/src/__internal/mixins/form-associated.d.ts +174 -0
  206. package/dist/src/__internal/mixins/form-submitter.d.ts +59 -0
  207. package/dist/src/__internal/mixins/hyperlink.d.ts +42 -0
  208. package/dist/src/__internal/mixins/mixin.d.ts +49 -0
  209. package/dist/src/{__utils → __internal/utils}/observe-slot-change.d.ts +1 -0
  210. package/dist/src/accordion/accordion-item.d.ts +3 -1
  211. package/dist/src/accordion/accordion.d.ts +1 -1
  212. package/dist/src/alert/alert.d.ts +43 -0
  213. package/dist/src/alert/index.d.ts +1 -0
  214. package/dist/src/app-bar/app-bar.d.ts +92 -0
  215. package/dist/src/app-bar/index.d.ts +1 -0
  216. package/dist/src/avatar/avatar.d.ts +2 -0
  217. package/dist/src/bottom-sheet/bottom-sheet.d.ts +1 -1
  218. package/dist/src/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +1 -0
  219. package/dist/src/button/ButtonTypes.d.ts +5 -0
  220. package/dist/src/button/base-button/base-button.d.ts +18 -0
  221. package/dist/src/button/button/button.d.ts +29 -37
  222. package/dist/src/button/button-group/button-group.d.ts +17 -18
  223. package/dist/src/{fab → button/fab}/fab.d.ts +8 -26
  224. package/dist/src/button/icon-button/icon-button.d.ts +20 -27
  225. package/dist/src/button/index.d.ts +1 -0
  226. package/dist/src/calendar/calendar.d.ts +1 -1
  227. package/dist/src/canvas/canvas.d.ts +1 -1
  228. package/dist/src/card/card.d.ts +5 -6
  229. package/dist/src/chart-bar/chart-bar.d.ts +1 -1
  230. package/dist/src/chart-bar/chart-stacked-bar.d.ts +1 -1
  231. package/dist/src/checkbox/checkbox.d.ts +5 -1
  232. package/dist/src/chip/chip/chip.d.ts +9 -8
  233. package/dist/src/container/container.d.ts +5 -1
  234. package/dist/src/divider/divider.d.ts +2 -0
  235. package/dist/src/empty-state/empty-state.d.ts +1 -0
  236. package/dist/src/field/field.d.ts +19 -1
  237. package/dist/src/focus-ring/focus-ring.d.ts +3 -7
  238. package/dist/src/html-editor/html-editor.d.ts +1 -1
  239. package/dist/src/icon/icon.d.ts +9 -4
  240. package/dist/src/image/image.d.ts +4 -0
  241. package/dist/src/index.d.ts +7 -6
  242. package/dist/src/item/item.d.ts +20 -29
  243. package/dist/src/link/link.d.ts +1 -1
  244. package/dist/src/list/list-item.d.ts +7 -5
  245. package/dist/src/list/list.d.ts +3 -2
  246. package/dist/src/menu/menu/menu.d.ts +14 -0
  247. package/dist/src/menu/menu-item/menu-item.d.ts +10 -2
  248. package/dist/src/modal/modal.d.ts +1 -1
  249. package/dist/src/navigation-rail/navigation-rail-item.d.ts +5 -4
  250. package/dist/src/navigation-rail/navigation-rail.d.ts +1 -1
  251. package/dist/src/radio/radio.d.ts +5 -0
  252. package/dist/src/ripple/ripple.d.ts +10 -1
  253. package/dist/src/search/search.d.ts +1 -1
  254. package/dist/src/segmented-button/segmented-button-group.d.ts +2 -2
  255. package/dist/src/segmented-button/segmented-button.d.ts +2 -0
  256. package/dist/src/side-sheet/side-sheet.d.ts +1 -1
  257. package/dist/src/skeleton/skeleton.d.ts +1 -0
  258. package/dist/src/slider/slider.d.ts +1 -0
  259. package/dist/src/snackbar/snackbar.d.ts +12 -2
  260. package/dist/src/svg/svg.d.ts +5 -0
  261. package/dist/src/table/table.d.ts +5 -0
  262. package/dist/src/tabs/tab.d.ts +2 -7
  263. package/dist/src/toolbar/toolbar.d.ts +2 -2
  264. package/dist/{state-DwbEjqVk.js → state-DkTK9EGF.js} +2 -2
  265. package/dist/{state-DwbEjqVk.js.map → state-DkTK9EGF.js.map} +1 -1
  266. package/dist/{style-map-DVmWOuYy.js → style-map-BQD5Et1D.js} +2 -2
  267. package/dist/{style-map-DVmWOuYy.js.map → style-map-BQD5Et1D.js.map} +1 -1
  268. package/dist/sub-menu.js +241 -0
  269. package/dist/sub-menu.js.map +1 -0
  270. package/dist/svg.js +273 -0
  271. package/dist/svg.js.map +1 -0
  272. package/dist/tab-group.js +188 -0
  273. package/dist/tab-group.js.map +1 -0
  274. package/dist/tab-panel.js +61 -0
  275. package/dist/tab-panel.js.map +1 -0
  276. package/dist/tab.js +658 -0
  277. package/dist/tab.js.map +1 -0
  278. package/dist/table.js +620 -0
  279. package/dist/table.js.map +1 -0
  280. package/dist/tabs.js +240 -0
  281. package/dist/tabs.js.map +1 -0
  282. package/dist/throttle-C7ZAPqtu.js +24 -0
  283. package/dist/throttle-C7ZAPqtu.js.map +1 -0
  284. package/dist/toolbar.js +9 -5
  285. package/dist/toolbar.js.map +1 -1
  286. package/dist/tooltip.js +270 -0
  287. package/dist/tooltip.js.map +1 -0
  288. package/dist/tsconfig.tsbuildinfo +1 -1
  289. package/dist/{unsafe-html-BsGUjx94.js → unsafe-html-Ct0N2_UU.js} +2 -2
  290. package/dist/{unsafe-html-BsGUjx94.js.map → unsafe-html-Ct0N2_UU.js.map} +1 -1
  291. package/dist/when-DEJm_QN9.js +9 -0
  292. package/dist/when-DEJm_QN9.js.map +1 -0
  293. package/package.json +4 -2
  294. package/readme.md +3 -3
  295. package/scss/mixin.scss +8 -6
  296. package/src/__internal/aria/aria.ts +293 -0
  297. package/src/__internal/aria/delegate.ts +206 -0
  298. package/src/__internal/events/dispatch-hooks.ts +182 -0
  299. package/src/__internal/mixins/element-internals.ts +73 -0
  300. package/src/__internal/mixins/form-associated.ts +295 -0
  301. package/src/__internal/mixins/form-submitter.ts +133 -0
  302. package/src/__internal/mixins/hyperlink.ts +71 -0
  303. package/src/__internal/mixins/mixin.ts +58 -0
  304. package/src/{__utils → __internal/utils}/observe-slot-change.ts +2 -5
  305. package/src/accordion/accordion-item.ts +6 -2
  306. package/src/accordion/accordion.ts +4 -2
  307. package/src/accordion/demo/index.html +95 -90
  308. package/src/alert/alert.scss +82 -0
  309. package/src/{banner/banner.ts → alert/alert.ts} +22 -22
  310. package/src/alert/index.ts +1 -0
  311. package/src/app-bar/app-bar-colors.scss +17 -0
  312. package/src/app-bar/app-bar.scss +165 -0
  313. package/src/app-bar/app-bar.ts +155 -0
  314. package/src/app-bar/index.ts +1 -0
  315. package/src/avatar/avatar.ts +4 -0
  316. package/src/badge/badge.ts +2 -0
  317. package/src/bottom-sheet/bottom-sheet.ts +8 -2
  318. package/src/breadcrumb/breadcrumb/breadcrumb.ts +2 -0
  319. package/src/breadcrumb/breadcrumb-item/breadcrumb-item.ts +3 -0
  320. package/src/button/ButtonTypes.ts +17 -0
  321. package/src/button/base-button/base-button.ts +85 -0
  322. package/src/button/button/button-base.scss +306 -0
  323. package/src/button/button/button-colors.scss +27 -32
  324. package/src/button/button/button-layers.scss +126 -39
  325. package/src/button/button/button-shapes.scss +73 -0
  326. package/src/button/button/button.scss +12 -286
  327. package/src/button/button/button.ts +174 -194
  328. package/src/button/button-group/button-group.scss +43 -36
  329. package/src/button/button-group/button-group.ts +26 -137
  330. package/src/{fab → button/fab}/fab-colors.scss +0 -10
  331. package/src/button/fab/fab-sizes.scss +37 -0
  332. package/src/button/fab/fab.scss +172 -0
  333. package/src/{fab → button/fab}/fab.ts +69 -105
  334. package/src/button/icon-button/icon-button-sizes.scss +18 -3
  335. package/src/button/icon-button/icon-button.scss +5 -0
  336. package/src/button/icon-button/icon-button.ts +111 -141
  337. package/src/button/index.ts +7 -0
  338. package/src/calendar/calendar.ts +2 -2
  339. package/src/canvas/canvas.ts +2 -2
  340. package/src/card/card.scss +3 -3
  341. package/src/card/card.ts +20 -40
  342. package/src/chart-bar/chart-bar.ts +2 -2
  343. package/src/chart-bar/chart-stacked-bar.ts +2 -2
  344. package/src/checkbox/checkbox.ts +12 -4
  345. package/src/chip/chip/chip.scss +1 -1
  346. package/src/chip/chip/chip.ts +35 -55
  347. package/src/chip/demo/index.html +30 -26
  348. package/src/code-editor/code-editor.ts +68 -58
  349. package/src/code-editor/demo/index.html +32 -27
  350. package/src/code-highlighter/code-highlighter.ts +1 -1
  351. package/src/code-highlighter/demo/index.html +24 -21
  352. package/src/container/container.ts +8 -2
  353. package/src/date-picker/date-picker.ts +2 -3
  354. package/src/divider/divider.ts +5 -1
  355. package/src/dropdown-button/demo/index.html +106 -101
  356. package/src/dropdown-button/dropdown-button.ts +1 -1
  357. package/src/elevation/elevation.ts +2 -0
  358. package/src/empty-state/empty-state.ts +3 -0
  359. package/src/field/field.ts +52 -33
  360. package/src/focus-ring/focus-ring.ts +5 -7
  361. package/src/html-editor/html-editor.ts +28 -16
  362. package/src/icon/datasource.ts +1 -1
  363. package/src/icon/icon.ts +27 -15
  364. package/src/image/image.ts +18 -6
  365. package/src/index.ts +24 -6
  366. package/src/input/input.ts +2 -2
  367. package/src/item/item.scss +126 -162
  368. package/src/item/item.ts +70 -323
  369. package/src/link/link.ts +3 -1
  370. package/src/list/list-item.scss +43 -31
  371. package/src/list/list-item.ts +79 -75
  372. package/src/list/list.scss +1 -13
  373. package/src/list/list.ts +6 -3
  374. package/src/{peacock-loader.ts → loader.ts} +91 -79
  375. package/src/menu/menu/menu.scss +14 -11
  376. package/src/menu/menu/menu.ts +20 -8
  377. package/src/menu/menu-item/menu-item.scss +35 -3
  378. package/src/menu/menu-item/menu-item.ts +40 -34
  379. package/src/menu/sub-menu/sub-menu.ts +3 -0
  380. package/src/modal/modal.ts +2 -2
  381. package/src/navigation-rail/navigation-rail-item.ts +21 -36
  382. package/src/navigation-rail/navigation-rail.scss +1 -0
  383. package/src/navigation-rail/navigation-rail.ts +4 -2
  384. package/src/number-field/number-field.ts +2 -2
  385. package/src/pagination/pagination.ts +2 -0
  386. package/src/popover/popover.ts +3 -3
  387. package/src/radio/radio.ts +13 -5
  388. package/src/ripple/ripple.ts +14 -1
  389. package/src/search/search.ts +3 -3
  390. package/src/segmented-button/segmented-button-group.ts +8 -4
  391. package/src/segmented-button/segmented-button.ts +4 -0
  392. package/src/select/option.ts +2 -0
  393. package/src/side-sheet/side-sheet.ts +2 -2
  394. package/src/sidebar-menu/sidebar-menu-item.ts +3 -2
  395. package/src/skeleton/skeleton.ts +3 -0
  396. package/src/slider/slider.ts +4 -1
  397. package/src/snackbar/snackbar.ts +40 -25
  398. package/src/spinner/spinner.ts +2 -0
  399. package/src/svg/svg.ts +27 -9
  400. package/src/switch/switch.ts +1 -1
  401. package/src/table/table.ts +16 -3
  402. package/src/tabs/demo/index.html +79 -79
  403. package/src/tabs/tab-group.ts +2 -0
  404. package/src/tabs/tab-panel.ts +2 -0
  405. package/src/tabs/tab.scss +4 -4
  406. package/src/tabs/tab.ts +16 -39
  407. package/src/tabs/tabs.ts +2 -0
  408. package/src/textarea/textarea.ts +2 -2
  409. package/src/time-picker/time-picker.ts +2 -2
  410. package/src/toolbar/toolbar.ts +3 -3
  411. package/src/tooltip/tooltip.ts +14 -8
  412. package/src/url-field/url-field.ts +2 -3
  413. package/dist/ButtonConstants-D06bY4uy.js +0 -114
  414. package/dist/ButtonConstants-D06bY4uy.js.map +0 -1
  415. package/dist/NativeHyperlinkMixin-DrYXyfMQ.js.map +0 -1
  416. package/dist/banner.js +0 -186
  417. package/dist/banner.js.map +0 -1
  418. package/dist/button-colors-D7sJyPy8.js +0 -586
  419. package/dist/button-colors-D7sJyPy8.js.map +0 -1
  420. package/dist/icon-CueRR7wx.js +0 -260
  421. package/dist/icon-CueRR7wx.js.map +0 -1
  422. package/dist/icon-button-CAzYr_qr.js +0 -318
  423. package/dist/icon-button-CAzYr_qr.js.map +0 -1
  424. package/dist/navigation-rail-CM_svs5_.js +0 -14184
  425. package/dist/navigation-rail-CM_svs5_.js.map +0 -1
  426. package/dist/observe-slot-change-D8Xg-kSS.js.map +0 -1
  427. package/dist/peacock-loader.js.map +0 -1
  428. package/dist/popover-DUPmMVWS.js.map +0 -1
  429. package/dist/query-QBcUV-L_.js +0 -15
  430. package/dist/query-QBcUV-L_.js.map +0 -1
  431. package/dist/src/banner/banner.d.ts +0 -43
  432. package/dist/src/banner/index.d.ts +0 -1
  433. package/dist/src/button/GroupButtonInterface.d.ts +0 -4
  434. package/src/banner/banner.scss +0 -82
  435. package/src/banner/index.ts +0 -1
  436. package/src/button/GroupButtonInterface.ts +0 -4
  437. package/src/button/button/only-button.scss +0 -13
  438. package/src/fab/fab-sizes.scss +0 -37
  439. package/src/fab/fab.scss +0 -143
  440. /package/dist/src/{__controllers → __internal/controllers}/attachable-controller.d.ts +0 -0
  441. /package/dist/src/{__controllers → __internal/controllers}/floating-controller.d.ts +0 -0
  442. /package/dist/src/{__directive → __internal/directive}/spread.d.ts +0 -0
  443. /package/dist/src/{__mixins → __internal/mixins}/MixinConstructor.d.ts +0 -0
  444. /package/dist/src/{__mixins → __internal/mixins}/NativeButtonMixin.d.ts +0 -0
  445. /package/dist/src/{__mixins → __internal/mixins}/NativeHyperlinkMixin.d.ts +0 -0
  446. /package/dist/src/{__utils → __internal/utils}/cache-fetch.d.ts +0 -0
  447. /package/dist/src/{__utils → __internal/utils}/copy-to-clipboard.d.ts +0 -0
  448. /package/dist/src/{__utils → __internal/utils}/dispatch-event-utils.d.ts +0 -0
  449. /package/dist/src/{__utils → __internal/utils}/is-dark-mode.d.ts +0 -0
  450. /package/dist/src/{__utils → __internal/utils}/is-in-viewport.d.ts +0 -0
  451. /package/dist/src/{__utils → __internal/utils}/is-link.d.ts +0 -0
  452. /package/dist/src/{__utils → __internal/utils}/observe-theme-change.d.ts +0 -0
  453. /package/dist/src/{__utils → __internal/utils}/sanitize-svg.d.ts +0 -0
  454. /package/dist/src/{__utils → __internal/utils}/throttle.d.ts +0 -0
  455. /package/dist/src/{fab → button/fab}/index.d.ts +0 -0
  456. /package/dist/src/{peacock-loader.d.ts → loader.d.ts} +0 -0
  457. /package/dist/test/{banner.test.d.ts → alert.test.d.ts} +0 -0
  458. /package/src/{__controllers → __internal/controllers}/attachable-controller.ts +0 -0
  459. /package/src/{__controllers → __internal/controllers}/floating-controller.ts +0 -0
  460. /package/src/{__directive → __internal/directive}/spread.ts +0 -0
  461. /package/src/{__mixins → __internal/mixins}/MixinConstructor.ts +0 -0
  462. /package/src/{__mixins → __internal/mixins}/NativeButtonMixin.ts +0 -0
  463. /package/src/{__mixins → __internal/mixins}/NativeHyperlinkMixin.ts +0 -0
  464. /package/src/{__mixins → __internal/mixins}/README.md +0 -0
  465. /package/src/{__utils → __internal/utils}/cache-fetch.ts +0 -0
  466. /package/src/{__utils → __internal/utils}/copy-to-clipboard.ts +0 -0
  467. /package/src/{__utils → __internal/utils}/dispatch-event-utils.ts +0 -0
  468. /package/src/{__utils → __internal/utils}/is-dark-mode.ts +0 -0
  469. /package/src/{__utils → __internal/utils}/is-in-viewport.ts +0 -0
  470. /package/src/{__utils → __internal/utils}/is-link.ts +0 -0
  471. /package/src/{__utils → __internal/utils}/observe-theme-change.ts +0 -0
  472. /package/src/{__utils → __internal/utils}/sanitize-svg.ts +0 -0
  473. /package/src/{__utils → __internal/utils}/throttle.ts +0 -0
  474. /package/src/{fab → button/fab}/index.ts +0 -0
package/src/button/button/button-base.scss ADDED
@@ -0,0 +1,306 @@
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
+ z-index: 0;
55
+
56
+ .label {
57
+ font-family: var(--font-family-sans) !important;
58
+ font-size: var(--private-button-font-size);
59
+ font-weight: var(--private-button-font-weight);
60
+ line-height: var(--private-button-line-height);
61
+ letter-spacing: var(--private-button-letter-spacing);
62
+ color: var(--private-button-label-text-color);
63
+
64
+ --icon-size: var(--button-icon-size, var(--private-button-icon-size));
65
+ --icon-color: var(--private-button-label-text-color);
66
+
67
+ pointer-events: none;
68
+ }
69
+
70
+ .touch {
71
+ position: absolute;
72
+ min-height: 2.5rem;
73
+ min-width: 2.5rem;
74
+ height: 100%;
75
+ width: 100%;
76
+
77
+ top: 50%;
78
+ left: 50%;
79
+ transform: translate(-50%, -50%);
80
+ cursor: var(--private-button-cursor, pointer);
81
+ }
82
+
83
+ /* make the icon slot itself collapsible so removal animates smoothly */
84
+ .icon-slot {
85
+ display: inline-flex;
86
+ align-items: center;
87
+ overflow: hidden;
88
+ pointer-events: none;
89
+ }
90
+
91
+ .icon-slot::slotted(*) {
92
+ --icon-size: var(--button-icon-size, var(--private-button-icon-size));
93
+ --icon-color: var(--private-button-label-text-color);
94
+ opacity: var(--private-button-label-text-opacity, 1);
95
+ }
96
+ }
97
+
98
+ :host(:not([skeleton])) {
99
+ .skeleton {
100
+ display: none;
101
+ }
102
+ }
103
+
104
+ :host([skeleton]) {
105
+ .background {
106
+ display: none;
107
+ }
108
+ .ripple {
109
+ display: none;
110
+ }
111
+ }
112
+
113
+ /**
114
+ * Button variant definitions
115
+ */
116
+ :host([variant='elevated']) {
117
+ --private-button-container-color: var(--elevated-button-container-color);
118
+ --private-button-label-text-color: var(--elevated-button-label-text-color);
119
+ --private-button-container-elevation-level: 1;
120
+
121
+ --private-button-state-color: var(--private-button-label-text-color);
122
+
123
+ &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
124
+ --private-button-container-elevation-level: 2;
125
+ --private-button-state-opacity: 0.08;
126
+ }
127
+
128
+ &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
129
+ --private-button-container-elevation-level: 1;
130
+ --private-button-state-opacity: 0.12;
131
+ }
132
+
133
+ &:host([disabled]),
134
+ &:host([soft-disabled]) {
135
+ --private-button-cursor: not-allowed;
136
+ --private-button-container-color: var(--color-on-surface);
137
+ --private-button-container-opacity: 0.1;
138
+ --private-button-label-text-color: var(--color-on-surface);
139
+ --private-button-label-text-opacity: 0.38;
140
+
141
+ .ripple {
142
+ display: none;
143
+ }
144
+ }
145
+ }
146
+
147
+ :host([variant='filled']) {
148
+ --private-button-container-color: var(--filled-button-container-color);
149
+ --private-button-label-text-color: var(--filled-button-label-text-color);
150
+ --private-button-state-color: var(--private-button-label-text-color);
151
+
152
+ &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
153
+ --private-button-container-elevation-level: 1;
154
+ --private-button-state-opacity: 0.08;
155
+ }
156
+
157
+ &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
158
+ --private-button-container-elevation-level: 0;
159
+ --private-button-state-opacity: 0.1;
160
+ }
161
+
162
+ &:host([disabled]),
163
+ &:host([soft-disabled]) {
164
+ --private-button-cursor: not-allowed;
165
+ --private-button-container-color: var(--color-on-surface);
166
+ --private-button-container-opacity: 0.1;
167
+ --private-button-label-text-color: var(--color-on-surface);
168
+ --private-button-label-text-opacity: 0.38;
169
+
170
+ .ripple {
171
+ display: none;
172
+ }
173
+ }
174
+ }
175
+
176
+ :host([variant='tonal']) {
177
+ --private-button-container-color: var(--tonal-button-container-color);
178
+ --private-button-label-text-color: var(--tonal-button-label-text-color);
179
+
180
+ --private-button-state-color: var(--private-button-label-text-color);
181
+
182
+ &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
183
+ --private-button-container-elevation-level: 1;
184
+ --private-button-state-opacity: 0.08;
185
+ }
186
+
187
+ &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
188
+ --private-button-container-elevation-level: 0;
189
+ --private-button-state-opacity: 0.12;
190
+ }
191
+
192
+ &:host([disabled]),
193
+ &:host([soft-disabled]) {
194
+ --private-button-cursor: not-allowed;
195
+ --private-button-container-color: var(--color-on-surface);
196
+ --private-button-container-opacity: 0.1;
197
+ --private-button-label-text-color: var(--color-on-surface);
198
+ --private-button-label-text-opacity: 0.38;
199
+
200
+ .ripple {
201
+ display: none;
202
+ }
203
+ }
204
+ }
205
+
206
+ :host([variant='outlined']) {
207
+ --private-button-outline-width: var(
208
+ --outlined-button-outline-width,
209
+ 0.0675rem
210
+ );
211
+ --private-button-container-color: var(--outlined-button-container-color);
212
+ --private-button-outline-color: var(--outlined-button-outline-color);
213
+ --private-button-label-text-color: var(--outlined-button-label-text-color);
214
+
215
+ --private-button-state-color: var(--private-button-label-text-color);
216
+
217
+ &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
218
+ --private-button-state-opacity: 0.08;
219
+ }
220
+
221
+ &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
222
+ --private-button-state-opacity: 0.12;
223
+ }
224
+
225
+ &:host([disabled]),
226
+ &:host([soft-disabled]) {
227
+ --private-button-cursor: not-allowed;
228
+ --private-button-outline-color: var(--color-on-surface);
229
+ --private-button-label-text-color: var(--color-on-surface);
230
+ --private-button-label-text-opacity: 0.38;
231
+ --private-button-outline-opacity: 0.12;
232
+
233
+ .ripple {
234
+ display: none;
235
+ }
236
+ }
237
+ }
238
+
239
+ :host([variant='text']) {
240
+ --private-button-label-text-color: var(--text-button-label-text-color);
241
+ --private-button-state-color: var(--private-button-label-text-color);
242
+
243
+ &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
244
+ --private-button-state-opacity: 0.08;
245
+ }
246
+
247
+ &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
248
+ --private-button-state-opacity: 0.12;
249
+ }
250
+
251
+ &:host([disabled]),
252
+ &:host([soft-disabled]) {
253
+ --private-button-cursor: not-allowed;
254
+ --private-button-label-text-color: var(--color-on-surface);
255
+ --private-button-label-text-opacity: 0.38;
256
+
257
+ .ripple {
258
+ display: none;
259
+ }
260
+ }
261
+ }
262
+
263
+ :host([variant='neo']) {
264
+ --private-button-container-color: var(--neo-button-container-color);
265
+ --private-button-label-text-color: var(--neo-button-label-text-color);
266
+
267
+ --private-button-outline-width: var(
268
+ --outlined-button-outline-width,
269
+ 0.125rem
270
+ );
271
+ --private-button-outline-color: var(--color-inverse-surface);
272
+
273
+ .focus-ring {
274
+ --focus-ring-color: var(--color-primary-container);
275
+ --focus-ring-inset: -2px;
276
+ }
277
+
278
+ .ripple {
279
+ display: none;
280
+ }
281
+
282
+ &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
283
+ .background,
284
+ .button,
285
+ .outline,
286
+ .focus-ring {
287
+ transform: translateX(0.25rem) translateY(0.25rem);
288
+ }
289
+ }
290
+
291
+ &:host([disabled]) {
292
+ --private-button-container-color: var(--color-on-surface);
293
+ --private-button-container-opacity: 0.1;
294
+ --private-button-label-text-color: var(--color-on-surface);
295
+ --private-button-label-text-opacity: 0.38;
296
+ --private-button-outline-opacity: 0.12;
297
+
298
+ .ripple {
299
+ display: none;
300
+ }
301
+ }
302
+ }
303
+
304
+ :host([block]) {
305
+ width: 100%;
306
+ }
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,10 +50,22 @@
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
  }
@@ -50,18 +74,44 @@
50
74
  z-index: 2;
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,7 +119,6 @@
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;
@@ -78,28 +127,53 @@
78
127
 
79
128
  z-index: 2;
80
129
 
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);
130
+ --skeleton-container-shape-start-start: var(
131
+ --private-button-container-shape-start-start,
132
+ var(--private-button-container-shape)
133
+ );
134
+ --skeleton-container-shape-start-end: var(
135
+ --private-button-container-shape-start-end,
136
+ var(--private-button-container-shape)
137
+ );
138
+ --skeleton-container-shape-end-start: var(
139
+ --private-button-container-shape-end-start,
140
+ var(--private-button-container-shape)
141
+ );
142
+ --skeleton-container-shape-end-end: var(
143
+ --private-button-container-shape-end-end,
144
+ var(--private-button-container-shape)
145
+ );
146
+ --skeleton-container-shape-variant: var(
147
+ --private-button-container-shape-variant
148
+ );
86
149
  }
87
150
 
88
-
89
151
  .elevation {
90
152
  pointer-events: none;
91
153
  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);
154
+ --elevation-container-shape-start-start: var(
155
+ --private-button-container-shape-start-start,
156
+ var(--private-button-container-shape)
157
+ );
158
+ --elevation-container-shape-start-end: var(
159
+ --private-button-container-shape-start-end,
160
+ var(--private-button-container-shape)
161
+ );
162
+ --elevation-container-shape-end-start: var(
163
+ --private-button-container-shape-end-start,
164
+ var(--private-button-container-shape)
165
+ );
166
+ --elevation-container-shape-end-end: var(
167
+ --private-button-container-shape-end-end,
168
+ var(--private-button-container-shape)
169
+ );
170
+ --elevation-container-shape-variant: var(
171
+ --private-button-container-shape-variant
172
+ );
97
173
 
98
174
  --elevation-level: var(--private-button-container-elevation-level);
99
175
  }
100
176
 
101
-
102
-
103
177
  .outline {
104
178
  display: block;
105
179
  position: absolute;
@@ -108,17 +182,30 @@
108
182
 
109
183
  z-index: 0;
110
184
 
111
- border: var(--private-button-outline-width) solid var(--private-button-outline-color);
185
+ border: var(--private-button-outline-width) solid
186
+ var(--private-button-outline-color);
112
187
  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));
188
+ border-start-start-radius: var(
189
+ --private-button-container-shape-start-start,
190
+ var(--private-button-container-shape)
191
+ );
192
+ border-start-end-radius: var(
193
+ --private-button-container-shape-start-end,
194
+ var(--private-button-container-shape)
195
+ );
196
+ border-end-start-radius: var(
197
+ --private-button-container-shape-end-start,
198
+ var(--private-button-container-shape)
199
+ );
200
+ border-end-end-radius: var(
201
+ --private-button-container-shape-end-end,
202
+ var(--private-button-container-shape)
203
+ );
117
204
  corner-shape: var(--private-button-container-shape-variant);
118
205
 
119
206
  @include button-transition;
120
207
  }
121
208
 
122
209
  .tooltip {
123
- z-index: 1;
210
+ z-index: 3;
124
211
  }