@redvars/peacock 3.3.2 → 3.4.0

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 (160) hide show
  1. package/dist/IndividualComponent-DUINtMGK.js +67 -0
  2. package/dist/IndividualComponent-DUINtMGK.js.map +1 -0
  3. package/dist/assets/images/empty-state/no-document.svg +11 -12
  4. package/dist/assets/images/empty-state/page.svg +15 -9
  5. package/dist/bottom-sheet.js +238 -0
  6. package/dist/bottom-sheet.js.map +1 -0
  7. package/dist/{button-ClzS8JLq.js → button-COYCtuA8.js} +306 -149
  8. package/dist/button-COYCtuA8.js.map +1 -0
  9. package/dist/button-group-DsXquZQn.js +440 -0
  10. package/dist/button-group-DsXquZQn.js.map +1 -0
  11. package/dist/button-group.js +6 -4
  12. package/dist/button-group.js.map +1 -1
  13. package/dist/button.js +5 -3
  14. package/dist/button.js.map +1 -1
  15. package/dist/card-content.js +29 -0
  16. package/dist/card-content.js.map +1 -0
  17. package/dist/card.js +418 -44
  18. package/dist/card.js.map +1 -1
  19. package/dist/{chart-bar-DbnXQgvS.js → chart-bar-cn6rrna-.js} +2 -2
  20. package/dist/{chart-bar-DbnXQgvS.js.map → chart-bar-cn6rrna-.js.map} +1 -1
  21. package/dist/chart-bar.js +4 -3
  22. package/dist/chart-bar.js.map +1 -1
  23. package/dist/chart-doughnut.js +2 -1
  24. package/dist/chart-doughnut.js.map +1 -1
  25. package/dist/chart-pie.js +2 -1
  26. package/dist/chart-pie.js.map +1 -1
  27. package/dist/chart-stacked-bar.js +4 -3
  28. package/dist/chart-stacked-bar.js.map +1 -1
  29. package/dist/{class-map-59YGWLnx.js → class-map-3TAnCMAX.js} +3 -9
  30. package/dist/class-map-3TAnCMAX.js.map +1 -0
  31. package/dist/clock.js +2 -1
  32. package/dist/clock.js.map +1 -1
  33. package/dist/code-editor.js +6 -4
  34. package/dist/code-editor.js.map +1 -1
  35. package/dist/code-highlighter.js +5 -3
  36. package/dist/code-highlighter.js.map +1 -1
  37. package/dist/custom-elements-jsdocs.json +2458 -2753
  38. package/dist/custom-elements.json +3185 -777
  39. package/dist/dispatch-event-utils-B4odODQf.js.map +1 -1
  40. package/dist/index.js +14 -10
  41. package/dist/index.js.map +1 -1
  42. package/dist/number-counter.js +3 -2
  43. package/dist/number-counter.js.map +1 -1
  44. package/dist/{observe-theme-change-pALI5fmV.js → observe-theme-change-DKAIv5BB.js} +3 -2
  45. package/dist/observe-theme-change-DKAIv5BB.js.map +1 -0
  46. package/dist/peacock-loader.js +37 -8
  47. package/dist/peacock-loader.js.map +1 -1
  48. package/dist/property-1psGvXOq.js +10 -0
  49. package/dist/property-1psGvXOq.js.map +1 -0
  50. package/dist/{snackbar-74YCdMPL.js → select-C3XAzenC.js} +2158 -191
  51. package/dist/select-C3XAzenC.js.map +1 -0
  52. package/dist/side-sheet.js +186 -0
  53. package/dist/side-sheet.js.map +1 -0
  54. package/dist/src/bottom-sheet/bottom-sheet.d.ts +42 -0
  55. package/dist/src/bottom-sheet/index.d.ts +1 -0
  56. package/dist/src/button/BaseButton.d.ts +4 -3
  57. package/dist/src/button/button/button.d.ts +4 -0
  58. package/dist/src/button/button-group/button-group.d.ts +32 -3
  59. package/dist/src/button/icon-button/icon-button.d.ts +4 -0
  60. package/dist/src/card/card-content.d.ts +15 -0
  61. package/dist/src/card/card.d.ts +37 -3
  62. package/dist/src/card/index.d.ts +1 -0
  63. package/dist/src/container/container.d.ts +1 -1
  64. package/dist/src/empty-state/empty-state.d.ts +1 -1
  65. package/dist/src/focus-ring/focus-ring.d.ts +4 -1
  66. package/dist/src/index.d.ts +7 -1
  67. package/dist/src/menu/menu/menu.d.ts +1 -0
  68. package/dist/src/menu/menu-item/menu-item.d.ts +0 -1
  69. package/dist/src/radio/index.d.ts +1 -0
  70. package/dist/src/radio/radio.d.ts +73 -0
  71. package/dist/src/ripple/ripple.d.ts +19 -3
  72. package/dist/src/segmented-button/index.d.ts +2 -0
  73. package/dist/src/segmented-button/segmented-button-group.d.ts +46 -0
  74. package/dist/src/segmented-button/segmented-button.d.ts +65 -0
  75. package/dist/src/select/index.d.ts +3 -0
  76. package/dist/src/select/option.d.ts +55 -0
  77. package/dist/src/select/select.d.ts +116 -0
  78. package/dist/src/side-sheet/index.d.ts +1 -0
  79. package/dist/src/side-sheet/side-sheet.d.ts +41 -0
  80. package/dist/src/tabs/tab-group.d.ts +0 -1
  81. package/dist/src/tabs/tab.d.ts +8 -2
  82. package/dist/src/tabs/tabs.d.ts +13 -1
  83. package/dist/state-DwbEjqVk.js +10 -0
  84. package/dist/state-DwbEjqVk.js.map +1 -0
  85. package/dist/{style-map-DcB52w-l.js → style-map-CRFEoCEg.js} +2 -2
  86. package/dist/{style-map-DcB52w-l.js.map → style-map-CRFEoCEg.js.map} +1 -1
  87. package/dist/tsconfig.tsbuildinfo +1 -1
  88. package/dist/{unsafe-html-C2r3PyzF.js → unsafe-html-D3GHRaGQ.js} +2 -2
  89. package/dist/{unsafe-html-C2r3PyzF.js.map → unsafe-html-D3GHRaGQ.js.map} +1 -1
  90. package/package.json +1 -1
  91. package/readme.md +2 -2
  92. package/src/bottom-sheet/bottom-sheet.scss +88 -0
  93. package/src/bottom-sheet/bottom-sheet.ts +135 -0
  94. package/src/bottom-sheet/index.ts +1 -0
  95. package/src/button/BaseButton.ts +16 -7
  96. package/src/button/button/button-colors.scss +76 -5
  97. package/src/button/button/button-sizes.scss +39 -19
  98. package/src/button/button/button.scss +117 -116
  99. package/src/button/button/button.ts +23 -1
  100. package/src/button/button-group/button-group.scss +25 -22
  101. package/src/button/button-group/button-group.ts +121 -4
  102. package/src/button/icon-button/icon-button-sizes.scss +35 -15
  103. package/src/button/icon-button/icon-button.ts +21 -1
  104. package/src/card/card-colors.scss +10 -0
  105. package/src/card/card-content.ts +26 -0
  106. package/src/card/card.scss +221 -41
  107. package/src/card/card.ts +240 -7
  108. package/src/card/index.ts +1 -0
  109. package/src/code-editor/code-editor.ts +1 -1
  110. package/src/container/container.ts +1 -1
  111. package/src/empty-state/empty-state.scss +8 -0
  112. package/src/empty-state/empty-state.ts +2 -2
  113. package/src/focus-ring/focus-ring.ts +37 -19
  114. package/src/index.ts +8 -1
  115. package/src/menu/menu/menu.scss +24 -3
  116. package/src/menu/menu/menu.ts +23 -2
  117. package/src/menu/menu-item/menu-item.scss +1 -0
  118. package/src/menu/menu-item/menu-item.ts +1 -9
  119. package/src/peacock-loader.ts +32 -0
  120. package/src/radio/index.ts +1 -0
  121. package/src/radio/radio.scss +181 -0
  122. package/src/radio/radio.ts +362 -0
  123. package/src/ripple/ripple.ts +19 -3
  124. package/src/segmented-button/index.ts +2 -0
  125. package/src/segmented-button/segmented-button-group.scss +21 -0
  126. package/src/segmented-button/segmented-button-group.ts +110 -0
  127. package/src/segmented-button/segmented-button.scss +115 -0
  128. package/src/segmented-button/segmented-button.ts +175 -0
  129. package/src/select/index.ts +3 -0
  130. package/src/select/option.ts +109 -0
  131. package/src/select/select.scss +120 -0
  132. package/src/select/select.ts +486 -0
  133. package/src/side-sheet/index.ts +1 -0
  134. package/src/side-sheet/side-sheet.scss +79 -0
  135. package/src/side-sheet/side-sheet.ts +100 -0
  136. package/src/slider/slider.scss +0 -1
  137. package/src/tabs/demo/index.html +90 -0
  138. package/src/tabs/tab-group.ts +0 -3
  139. package/src/tabs/tab.scss +237 -25
  140. package/src/tabs/tab.ts +86 -12
  141. package/src/tabs/tabs.scss +37 -3
  142. package/src/tabs/tabs.ts +118 -2
  143. package/src/utils/dispatch-event-utils.ts +1 -0
  144. package/dist/IndividualComponent-Dt5xirYG.js +0 -73
  145. package/dist/IndividualComponent-Dt5xirYG.js.map +0 -1
  146. package/dist/button-ClzS8JLq.js.map +0 -1
  147. package/dist/button-group-BMS5WvaF.js +0 -292
  148. package/dist/button-group-BMS5WvaF.js.map +0 -1
  149. package/dist/chart-donut.js +0 -309
  150. package/dist/chart-donut.js.map +0 -1
  151. package/dist/class-map-59YGWLnx.js.map +0 -1
  152. package/dist/observe-theme-change-pALI5fmV.js.map +0 -1
  153. package/dist/snackbar-74YCdMPL.js.map +0 -1
  154. package/dist/src/chart-donut/chart-donut.d.ts +0 -53
  155. package/dist/src/chart-donut/index.d.ts +0 -1
  156. package/dist/test/card.test.d.ts +0 -1
  157. package/src/chart-donut/chart-donut.scss +0 -37
  158. package/src/chart-donut/chart-donut.ts +0 -287
  159. package/src/chart-donut/demo/index.html +0 -51
  160. package/src/chart-donut/index.ts +0 -1
package/src/button/button/button.scss CHANGED
@@ -5,17 +5,17 @@
5
5
 
6
6
  :host {
7
7
  display: inline-flex;
8
- --z-index-button: 0;
9
8
 
10
9
 
11
10
  --button-height: unset;
12
11
  --button-icon-size: unset;
13
- --button-container-shape: unset;
12
+ --button-container-padding: unset;
13
+ --button-container-shape: var(--shape-corner-medium);
14
14
  --button-container-shape-start-start: unset;
15
15
  --button-container-shape-start-end: unset;
16
16
  --button-container-shape-end-start: unset;
17
17
  --button-container-shape-end-end: unset;
18
- --button-container-shape-variant: unset;
18
+ --button-container-shape-variant: squircle;
19
19
  }
20
20
 
21
21
  /**
@@ -24,7 +24,7 @@
24
24
  */
25
25
  slot::slotted(*) {
26
26
  --icon-size: var(--button-icon-size, var(--_button-icon-size));
27
- --icon-color: var(--_label-text-color);
27
+ --icon-color: var(--_button_label-text-color);
28
28
  }
29
29
 
30
30
  /*
@@ -45,32 +45,33 @@ slot::slotted(*) {
45
45
  flex-direction: column;
46
46
  align-items: center;
47
47
  justify-content: center;
48
- height: var(--button-height, var(--_button-height));
49
- padding: 0 var(--_container-padding);
48
+ height: var(--button-height);
49
+ padding: 0 var(--button-container-padding, var(--_button_container-padding));
50
50
  width: 100%;
51
51
  font-family: var(--font-family-sans) !important;
52
52
  cursor: pointer;
53
53
 
54
- --_container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-medium)));
55
- --_container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-medium)));
56
- --_container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-medium)));
57
- --_container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-medium)));
58
- --_container-corner-shape-variant: var(--button-container-shape-variant, squircle);
54
+ --_button_container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape));
55
+ --_button_container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape));
56
+ --_button_container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape));
57
+ --_button_container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape));
58
+ --_button_container-corner-shape-variant: var(--button-container-shape-variant);
59
59
 
60
60
 
61
61
  .button-content {
62
62
  display: flex;
63
63
  align-items: center;
64
64
  justify-content: center;
65
+ pointer-events: none;
65
66
  gap: var(--_button-icon-label-spacing);
66
67
  width: 100%;
67
68
  height: 100%;
68
69
  z-index: 0;
69
70
 
70
- color: var(--_label-text-color);
71
- opacity: var(--_label-text-opacity, 1);
71
+ color: var(--_button_label-text-color);
72
+ opacity: var(--_button_label-text-opacity, 1);
72
73
  --icon-size: var(--button-icon-size, var(--_button-icon-size));
73
- --icon-color: var(--_label-text-color);
74
+ --icon-color: var(--_button_label-text-color);
74
75
 
75
76
  .slot-container {
76
77
  display: none;
@@ -87,21 +88,21 @@ slot::slotted(*) {
87
88
  */
88
89
  .focus-ring {
89
90
  z-index: 2;
90
- --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
91
- --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
92
- --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
93
- --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
94
- --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
91
+ --focus-ring-container-shape-start-start: var(--_button_container-shape-start-start);
92
+ --focus-ring-container-shape-start-end: var(--_button_container-shape-start-end);
93
+ --focus-ring-container-shape-end-start: var(--_button_container-shape-end-start);
94
+ --focus-ring-container-shape-end-end: var(--_button_container-shape-end-end);
95
+ --focus-ring-container-shape-variant: var(--_button_container-corner-shape-variant);
95
96
  }
96
97
 
97
98
  .ripple {
98
- border-start-start-radius: var(--_container-shape-start-start);
99
- border-start-end-radius: var(--_container-shape-start-end);
100
- border-end-start-radius: var(--_container-shape-end-start);
101
- border-end-end-radius: var(--_container-shape-end-end);
102
- corner-shape: var(--_container-corner-shape-variant);
103
- --ripple-state-opacity: var(--_container-state-opacity, 0);
104
- --ripple-pressed-color: var(--_container-state-color);
99
+ border-start-start-radius: var(--_button_container-shape-start-start);
100
+ border-start-end-radius: var(--_button_container-shape-start-end);
101
+ border-end-start-radius: var(--_button_container-shape-end-start);
102
+ border-end-end-radius: var(--_button_container-shape-end-end);
103
+ corner-shape: var(--_button_container-corner-shape-variant);
104
+ --ripple-state-opacity: var(--_button_container-state-opacity, 0);
105
+ --ripple-pressed-color: var(--_button_container-state-color);
105
106
  }
106
107
 
107
108
  .background {
@@ -110,14 +111,14 @@ slot::slotted(*) {
110
111
  left: 0;
111
112
  width: 100%;
112
113
  height: 100%;
113
- background-color: var(--_container-color);
114
- opacity: var(--_container-opacity, 1);
115
-
116
- border-start-start-radius: var(--_container-shape-start-start);
117
- border-start-end-radius: var(--_container-shape-start-end);
118
- border-end-start-radius: var(--_container-shape-end-start);
119
- border-end-end-radius: var(--_container-shape-end-end);
120
- corner-shape: var(--_container-corner-shape-variant);
114
+ background-color: var(--_button_container-color);
115
+ opacity: var(--_button_container-opacity, 1);
116
+
117
+ border-start-start-radius: var(--_button_container-shape-start-start);
118
+ border-start-end-radius: var(--_button_container-shape-start-end);
119
+ border-end-start-radius: var(--_button_container-shape-end-start);
120
+ border-end-end-radius: var(--_button_container-shape-end-end);
121
+ corner-shape: var(--_button_container-corner-shape-variant);
121
122
  pointer-events: none;
122
123
  }
123
124
 
@@ -129,32 +130,32 @@ slot::slotted(*) {
129
130
  position: absolute;
130
131
  top: 0;
131
132
  left: 0;
132
- --skeleton-container-shape-start-start: var(--_container-shape-start-start);
133
- --skeleton-container-shape-start-end: var(--_container-shape-start-end);
134
- --skeleton-container-shape-end-start: var(--_container-shape-end-start);
135
- --skeleton-container-shape-end-end: var(--_container-shape-end-end);
136
- --skeleton-container-shape-variant: var(--_container-corner-shape-variant);
133
+ --skeleton-container-shape-start-start: var(--_button_container-shape-start-start);
134
+ --skeleton-container-shape-start-end: var(--_button_container-shape-start-end);
135
+ --skeleton-container-shape-end-start: var(--_button_container-shape-end-start);
136
+ --skeleton-container-shape-end-end: var(--_button_container-shape-end-end);
137
+ --skeleton-container-shape-variant: var(--_button_container-corner-shape-variant);
137
138
  }
138
139
 
139
140
  .elevation {
140
- --elevation-level: var(--_container-elevation-level);
141
+ --elevation-level: var(--_button_container-elevation-level);
141
142
  transition-duration: 280ms;
142
- --elevation-container-shape-start-start: var(--_container-shape-start-start);
143
- --elevation-container-shape-start-end: var(--_container-shape-start-end);
144
- --elevation-container-shape-end-start: var(--_container-shape-end-start);
145
- --elevation-container-shape-end-end: var(--_container-shape-end-end);
146
- --elevation-container-shape-variant: var(--_container-corner-shape-variant);
143
+ --elevation-container-shape-start-start: var(--_button_container-shape-start-start);
144
+ --elevation-container-shape-start-end: var(--_button_container-shape-start-end);
145
+ --elevation-container-shape-end-start: var(--_button_container-shape-end-start);
146
+ --elevation-container-shape-end-end: var(--_button_container-shape-end-end);
147
+ --elevation-container-shape-variant: var(--_button_container-corner-shape-variant);
147
148
  }
148
149
 
149
150
  .neo-background {
150
151
  display: none;
151
152
  position: absolute;
152
153
  background: var(--color-inverse-surface);
153
- border-start-start-radius: var(--_container-shape-start-start);
154
- border-start-end-radius: var(--_container-shape-start-end);
155
- border-end-start-radius: var(--_container-shape-end-start);
156
- border-end-end-radius: var(--_container-shape-end-end);
157
- corner-shape: var(--_container-corner-shape-variant);
154
+ border-start-start-radius: var(--_button_container-shape-start-start);
155
+ border-start-end-radius: var(--_button_container-shape-start-end);
156
+ border-end-start-radius: var(--_button_container-shape-end-start);
157
+ border-end-end-radius: var(--_button_container-shape-end-end);
158
+ corner-shape: var(--_button_container-corner-shape-variant);
158
159
  width: 100%;
159
160
  height: 100%;
160
161
  pointer-events: none;
@@ -169,13 +170,13 @@ slot::slotted(*) {
169
170
  width: 100%;
170
171
  height: 100%;
171
172
  pointer-events: none;
172
- border: var(--_outline-width) solid var(--_outline-color);
173
- opacity: var(--_outline-opacity, 1);
174
- border-start-start-radius: var(--_container-shape-start-start);
175
- border-start-end-radius: var(--_container-shape-start-end);
176
- border-end-start-radius: var(--_container-shape-end-start);
177
- border-end-end-radius: var(--_container-shape-end-end);
178
- corner-shape: var(--_container-corner-shape-variant);
173
+ border: var(--_button_outline-width) solid var(--_button_outline-color);
174
+ opacity: var(--_button_outline-opacity, 1);
175
+ border-start-start-radius: var(--_button_container-shape-start-start);
176
+ border-start-end-radius: var(--_button_container-shape-start-end);
177
+ border-end-start-radius: var(--_button_container-shape-end-start);
178
+ border-end-end-radius: var(--_button_container-shape-end-end);
179
+ corner-shape: var(--_button_container-corner-shape-variant);
179
180
  }
180
181
 
181
182
 
@@ -221,27 +222,27 @@ slot::slotted(*) {
221
222
  */
222
223
 
223
224
  .button.variant-elevated {
224
- --_container-color: var(--elevated-button-container-color);
225
- --_label-text-color: var(--elevated-button-label-text-color);
226
- --_container-elevation-level: 1;
225
+ --_button_container-color: var(--elevated-button-container-color);
226
+ --_button_label-text-color: var(--elevated-button-label-text-color);
227
+ --_button_container-elevation-level: 1;
227
228
 
228
- --_container-state-color: var(--_label-text-color);
229
+ --_button_container-state-color: var(--_button_label-text-color);
229
230
 
230
231
  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
231
- --_container-elevation-level: 2;
232
- --_container-state-opacity: 0.08;
232
+ --_button_container-elevation-level: 2;
233
+ --_button_container-state-opacity: 0.08;
233
234
  }
234
235
 
235
236
  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
236
- --_container-elevation-level: 1;
237
- --_container-state-opacity: 0.12;
237
+ --_button_container-elevation-level: 1;
238
+ --_button_container-state-opacity: 0.12;
238
239
  }
239
240
 
240
241
  &.disabled {
241
- --_container-color: var(--color-on-surface);
242
- --_container-opacity: 0.1;
243
- --_label-text-color: var(--color-on-surface);
244
- --_label-text-opacity: 0.38;
242
+ --_button_container-color: var(--color-on-surface);
243
+ --_button_container-opacity: 0.1;
244
+ --_button_label-text-color: var(--color-on-surface);
245
+ --_button_label-text-opacity: 0.38;
245
246
 
246
247
  .ripple {
247
248
  display: none;
@@ -251,26 +252,26 @@ slot::slotted(*) {
251
252
 
252
253
 
253
254
  .button.variant-filled {
254
- --_container-color: var(--filled-button-container-color);
255
- --_label-text-color: var(--filled-button-label-text-color);
256
- --_container-state-color: var(--_label-text-color);
255
+ --_button_container-color: var(--filled-button-container-color);
256
+ --_button_label-text-color: var(--filled-button-label-text-color);
257
+ --_button_container-state-color: var(--_button_label-text-color);
257
258
 
258
259
 
259
260
  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
260
- --_container-elevation-level: 1;
261
- --_container-state-opacity: 0.08;
261
+ --_button_container-elevation-level: 1;
262
+ --_button_container-state-opacity: 0.08;
262
263
  }
263
264
 
264
265
  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
265
- --_container-elevation-level: 0;
266
- --_container-state-opacity: 0.1;
266
+ --_button_container-elevation-level: 0;
267
+ --_button_container-state-opacity: 0.1;
267
268
  }
268
269
 
269
270
  &.disabled {
270
- --_container-color: var(--color-on-surface);
271
- --_container-opacity: 0.1;
272
- --_label-text-color: var(--color-on-surface);
273
- --_label-text-opacity: 0.38;
271
+ --_button_container-color: var(--color-on-surface);
272
+ --_button_container-opacity: 0.1;
273
+ --_button_label-text-color: var(--color-on-surface);
274
+ --_button_label-text-opacity: 0.38;
274
275
 
275
276
  .ripple {
276
277
  display: none;
@@ -280,26 +281,26 @@ slot::slotted(*) {
280
281
 
281
282
 
282
283
  .button.variant-tonal {
283
- --_container-color: var(--tonal-button-container-color);
284
- --_label-text-color: var(--tonal-button-label-text-color);
284
+ --_button_container-color: var(--tonal-button-container-color);
285
+ --_button_label-text-color: var(--tonal-button-label-text-color);
285
286
 
286
- --_container-state-color: var(--_label-text-color);
287
+ --_button_container-state-color: var(--_button_label-text-color);
287
288
 
288
289
  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
289
- --_container-elevation-level: 1;
290
- --_container-state-opacity: 0.08;
290
+ --_button_container-elevation-level: 1;
291
+ --_button_container-state-opacity: 0.08;
291
292
  }
292
293
 
293
294
  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
294
- --_container-elevation-level: 0;
295
- --_container-state-opacity: 0.12;
295
+ --_button_container-elevation-level: 0;
296
+ --_button_container-state-opacity: 0.12;
296
297
  }
297
298
 
298
299
  &.disabled {
299
- --_container-color: var(--color-on-surface);
300
- --_container-opacity: 0.1;
301
- --_label-text-color: var(--color-on-surface);
302
- --_label-text-opacity: 0.38;
300
+ --_button_container-color: var(--color-on-surface);
301
+ --_button_container-opacity: 0.1;
302
+ --_button_label-text-color: var(--color-on-surface);
303
+ --_button_label-text-opacity: 0.38;
303
304
 
304
305
  .ripple {
305
306
  display: none;
@@ -309,29 +310,29 @@ slot::slotted(*) {
309
310
 
310
311
 
311
312
  .button.variant-outlined {
312
- --_outline-width: var(--outlined-button-outline-width, 0.0675rem);
313
- --_outline-color: var(--outlined-button-outline-color);
314
- --_label-text-color: var(--outlined-button-label-text-color);
313
+ --_button_outline-width: var(--outlined-button-outline-width, 0.0675rem);
314
+ --_button_outline-color: var(--outlined-button-outline-color);
315
+ --_button_label-text-color: var(--outlined-button-label-text-color);
315
316
 
316
- --_container-state-color: var(--_label-text-color);
317
+ --_button_container-state-color: var(--_button_label-text-color);
317
318
 
318
319
  .outline {
319
320
  display: block;
320
321
  }
321
322
 
322
323
  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
323
- --_container-state-opacity: 0.08;
324
+ --_button_container-state-opacity: 0.08;
324
325
  }
325
326
 
326
327
  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
327
- --_container-state-opacity: 0.12;
328
+ --_button_container-state-opacity: 0.12;
328
329
  }
329
330
 
330
331
  &.disabled {
331
- --_outline-color: var(--color-on-surface);
332
- --_label-text-color: var(--color-on-surface);
333
- --_label-text-opacity: 0.38;
334
- --_outline-opacity: 0.12;
332
+ --_button_outline-color: var(--color-on-surface);
333
+ --_button_label-text-color: var(--color-on-surface);
334
+ --_button_label-text-opacity: 0.38;
335
+ --_button_outline-opacity: 0.12;
335
336
 
336
337
  .ripple {
337
338
  display: none;
@@ -342,20 +343,20 @@ slot::slotted(*) {
342
343
 
343
344
  .button.variant-text {
344
345
 
345
- --_label-text-color: var(--text-button-label-text-color);
346
- --_container-state-color: var(--_label-text-color);
346
+ --_button_label-text-color: var(--text-button-label-text-color);
347
+ --_button_container-state-color: var(--_button_label-text-color);
347
348
 
348
349
  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
349
- --_container-state-opacity: 0.08;
350
+ --_button_container-state-opacity: 0.08;
350
351
  }
351
352
 
352
353
  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
353
- --_container-state-opacity: 0.12;
354
+ --_button_container-state-opacity: 0.12;
354
355
  }
355
356
 
356
357
  &.disabled {
357
- --_label-text-color: var(--color-on-surface);
358
- --_label-text-opacity: 0.38;
358
+ --_button_label-text-color: var(--color-on-surface);
359
+ --_button_label-text-opacity: 0.38;
359
360
 
360
361
  .ripple {
361
362
  display: none;
@@ -365,11 +366,11 @@ slot::slotted(*) {
365
366
 
366
367
  .button.variant-neo {
367
368
 
368
- --_container-color: var(--neo-button-container-color);
369
- --_label-text-color: var(--neo-button-label-text-color);
369
+ --_button_container-color: var(--neo-button-container-color);
370
+ --_button_label-text-color: var(--neo-button-label-text-color);
370
371
 
371
- --_outline-width: var(--outlined-button-outline-width, 0.125rem);
372
- --_outline-color: var(--color-inverse-surface);
372
+ --_button_outline-width: var(--outlined-button-outline-width, 0.125rem);
373
+ --_button_outline-color: var(--color-inverse-surface);
373
374
 
374
375
  .outline {
375
376
  display: block;
@@ -395,11 +396,11 @@ slot::slotted(*) {
395
396
  }
396
397
 
397
398
  &.disabled {
398
- --_container-color: var(--color-on-surface);
399
- --_container-opacity: 0.1;
400
- --_label-text-color: var(--color-on-surface);
401
- --_label-text-opacity: 0.38;
402
- --_outline-opacity: 0.12;
399
+ --_button_container-color: var(--color-on-surface);
400
+ --_button_container-opacity: 0.1;
401
+ --_button_label-text-color: var(--color-on-surface);
402
+ --_button_label-text-opacity: 0.38;
403
+ --_button_outline-opacity: 0.12;
403
404
 
404
405
 
405
406
  .ripple {
package/src/button/button/button.ts CHANGED
@@ -67,6 +67,26 @@ export class Button extends BaseButton {
67
67
  @state()
68
68
  private slotHasContent = false;
69
69
 
70
+ override focus() {
71
+ this.buttonElement?.focus();
72
+ }
73
+
74
+ override blur() {
75
+ this.buttonElement?.blur();
76
+ }
77
+
78
+ override connectedCallback() {
79
+ super.connectedCallback();
80
+ this.addEventListener('click', this.__dispatchClickWithThrottle);
81
+ window.addEventListener('mouseup', this.__handlePress);
82
+ }
83
+
84
+ override disconnectedCallback() {
85
+ window.removeEventListener('mouseup', this.__handlePress);
86
+ this.removeEventListener('click', this.__dispatchClickWithThrottle);
87
+ super.disconnectedCallback();
88
+ }
89
+
70
90
  override firstUpdated() {
71
91
  this.__dispatchClickWithThrottle = throttle(
72
92
  this.__dispatchClick,
@@ -105,6 +125,7 @@ export class Button extends BaseButton {
105
125
  id="button"
106
126
  tabindex=${this.#tabindex}
107
127
  type=${this.htmlType}
128
+ @click=${this.__dispatchClickWithThrottle}
108
129
  @mousedown=${this.__handlePress}
109
130
  @keydown=${this.__handlePress}
110
131
  @keyup=${this.__handlePress}
@@ -123,6 +144,7 @@ export class Button extends BaseButton {
123
144
  tabindex=${this.#tabindex}
124
145
  href=${this.href}
125
146
  target=${this.target}
147
+ @click=${this.__dispatchClickWithThrottle}
126
148
  @mousedown=${this.__handlePress}
127
149
  @keydown=${this.__handlePress}
128
150
  @keyup=${this.__handlePress}
@@ -138,7 +160,7 @@ export class Button extends BaseButton {
138
160
 
139
161
  renderButtonContent() {
140
162
  return html`
141
- <wc-focus-ring class="focus-ring" .control=${this} element="buttonElement"></wc-focus-ring>
163
+ <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
142
164
  <wc-elevation class="elevation"></wc-elevation>
143
165
  <div class="neo-background"></div>
144
166
  <div class="background"></div>
package/src/button/button-group/button-group.scss CHANGED
@@ -7,31 +7,10 @@ $border-width: 0.0625rem;
7
7
  .button-group {
8
8
  display: flex;
9
9
  gap: var(--_button-group-gap);
10
-
11
-
12
- slot::slotted(:first-child) {
13
- --button-container-shape-start-start: 50%;
14
- --button-container-shape-end-start: 50%;
15
- --button-container-shape-start-end: var(--shape-corner-medium);
16
- --button-container-shape-end-end: var(--shape-corner-medium);
17
- --button-container-shape-variant: unset;
18
- }
19
-
20
- slot::slotted(:last-child) {
21
- --button-container-shape-end-end: 50%;
22
- --button-container-shape-start-end: 50%;
23
-
24
- --button-container-shape-end-start: var(--shape-corner-medium);
25
- --button-container-shape-start-start: var(--shape-corner-medium);
26
- --button-container-shape-variant: unset;
27
- }
28
-
29
- slot::slotted(:only-child) {
30
- --button-container-shape: 50%;
31
- }
32
10
  }
33
11
 
34
12
 
13
+ // Size-specific rules (can be overridden by variant rules below)
35
14
  .button-group.size-xs,
36
15
  .button-group.size-extra-small {
37
16
  --_button-group-gap: 0.125rem;
@@ -41,6 +20,7 @@ $border-width: 0.0625rem;
41
20
  .button-group.size-sm,
42
21
  .button-group.size-small {
43
22
  --_button-group-gap: 0.125rem;
23
+ --button-container-padding: 1.5rem;
44
24
  }
45
25
 
46
26
  .button-group.size-md,
@@ -58,4 +38,27 @@ $border-width: 0.0625rem;
58
38
  }
59
39
 
60
40
 
41
+ // Standard variant: buttons with a visible gap, each keeping their own shape
42
+ .button-group.variant-standard {
43
+ --_button-group-gap: 0.5rem;
44
+ }
45
+
46
+
47
+ // Connected variant: buttons with a 2px gap; outer buttons have fully rounded outer
48
+ // corners while middle buttons keep standard rounded corners (handled via JS for
49
+ // per-position corner overrides, including vertical orientation).
50
+ .button-group.variant-connected {
51
+ --_button-group-gap: 0.125rem;
52
+ }
53
+
54
+
55
+ // Orientation
56
+ .button-group.orientation-horizontal {
57
+ flex-direction: row;
58
+ }
59
+
60
+ .button-group.orientation-vertical {
61
+ flex-direction: column;
62
+ }
63
+
61
64