@redvars/peacock 3.6.2 → 3.7.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 (200) hide show
  1. package/dist/ButtonConstants-D06bY4uy.js +114 -0
  2. package/dist/ButtonConstants-D06bY4uy.js.map +1 -0
  3. package/dist/{BaseHyperlinkMixin-BNuwbiEf.js → NativeHyperlinkMixin-DrYXyfMQ.js} +8 -10
  4. package/dist/NativeHyperlinkMixin-DrYXyfMQ.js.map +1 -0
  5. package/dist/assets/components.css +1 -1
  6. package/dist/assets/components.css.map +1 -1
  7. package/dist/assets/styles.css +1 -1
  8. package/dist/assets/styles.css.map +1 -1
  9. package/dist/button-colors-Dwnez1tR.js +586 -0
  10. package/dist/button-colors-Dwnez1tR.js.map +1 -0
  11. package/dist/button-group.js +8 -8
  12. package/dist/button-group.js.map +1 -1
  13. package/dist/button.js +236 -133
  14. package/dist/button.js.map +1 -1
  15. package/dist/calendar-column-view.js +0 -1
  16. package/dist/calendar-column-view.js.map +1 -1
  17. package/dist/calendar-month-view.js +0 -1
  18. package/dist/calendar-month-view.js.map +1 -1
  19. package/dist/canvas.js +126 -107
  20. package/dist/canvas.js.map +1 -1
  21. package/dist/card-content.js +0 -1
  22. package/dist/card-content.js.map +1 -1
  23. package/dist/card.js +96 -90
  24. package/dist/card.js.map +1 -1
  25. package/dist/cb-compound-expression.js +4 -1
  26. package/dist/cb-compound-expression.js.map +1 -1
  27. package/dist/cb-divider.js +0 -1
  28. package/dist/cb-divider.js.map +1 -1
  29. package/dist/cb-expression.js +0 -2
  30. package/dist/cb-expression.js.map +1 -1
  31. package/dist/cb-predicate.js +0 -1
  32. package/dist/cb-predicate.js.map +1 -1
  33. package/dist/code-highlighter.js +23 -6
  34. package/dist/code-highlighter.js.map +1 -1
  35. package/dist/custom-elements-jsdocs.json +5079 -17882
  36. package/dist/custom-elements.json +19272 -19314
  37. package/dist/fab.js +181 -117
  38. package/dist/fab.js.map +1 -1
  39. package/dist/flow-designer.js +4 -4
  40. package/dist/icon-button-DJ0kZXYr.js +318 -0
  41. package/dist/icon-button-DJ0kZXYr.js.map +1 -0
  42. package/dist/index.js +7 -7
  43. package/dist/{navigation-rail-CD7IrqbN.js → navigation-rail-CM_svs5_.js} +1311 -730
  44. package/dist/navigation-rail-CM_svs5_.js.map +1 -0
  45. package/dist/observe-slot-change-D8Xg-kSS.js +60 -0
  46. package/dist/observe-slot-change-D8Xg-kSS.js.map +1 -0
  47. package/dist/peacock-loader.js +10 -7
  48. package/dist/peacock-loader.js.map +1 -1
  49. package/dist/popover-content.js +0 -1
  50. package/dist/popover-content.js.map +1 -1
  51. package/dist/search.js +15 -15
  52. package/dist/search.js.map +1 -1
  53. package/dist/src/__controllers/attachable-controller.d.ts +109 -0
  54. package/dist/src/__mixins/{BaseButtonMixin.d.ts → NativeButtonMixin.d.ts} +3 -3
  55. package/dist/src/__mixins/{BaseHyperlinkMixin.d.ts → NativeHyperlinkMixin.d.ts} +3 -4
  56. package/dist/src/__utils/is-link.d.ts +1 -0
  57. package/dist/src/__utils/observe-slot-change.d.ts +1 -1
  58. package/dist/src/accordion/accordion-item.d.ts +0 -1
  59. package/dist/src/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +0 -1
  60. package/dist/src/button/ButtonConstants.d.ts +1 -0
  61. package/dist/src/button/GroupButtonInterface.d.ts +4 -0
  62. package/dist/src/button/button/button.d.ts +32 -7
  63. package/dist/src/button/button-group/button-group.d.ts +2 -1
  64. package/dist/src/button/icon-button/icon-button.d.ts +26 -5
  65. package/dist/src/button/index.d.ts +1 -1
  66. package/dist/src/calendar/calendar-column-view.d.ts +0 -1
  67. package/dist/src/calendar/calendar-month-view.d.ts +0 -1
  68. package/dist/src/canvas/canvas.d.ts +3 -3
  69. package/dist/src/card/card-content.d.ts +0 -1
  70. package/dist/src/card/card.d.ts +9 -6
  71. package/dist/src/chip/chip/chip.d.ts +22 -3
  72. package/dist/src/condition-builder/cb-compound-expression.d.ts +0 -1
  73. package/dist/src/condition-builder/cb-divider.d.ts +0 -1
  74. package/dist/src/condition-builder/cb-expression.d.ts +0 -1
  75. package/dist/src/condition-builder/cb-predicate.d.ts +0 -1
  76. package/dist/src/fab/fab.d.ts +20 -6
  77. package/dist/src/field/field.d.ts +1 -0
  78. package/dist/src/focus-ring/focus-ring.d.ts +26 -20
  79. package/dist/src/image/image.d.ts +2 -2
  80. package/dist/src/index.d.ts +1 -0
  81. package/dist/src/input/input.d.ts +1 -3
  82. package/dist/src/item/index.d.ts +1 -0
  83. package/dist/src/item/item.d.ts +49 -0
  84. package/dist/src/link/link.d.ts +1 -1
  85. package/dist/src/list/list-item.d.ts +1 -2
  86. package/dist/src/menu/menu-item/menu-item.d.ts +9 -11
  87. package/dist/src/menu/sub-menu/sub-menu.d.ts +1 -1
  88. package/dist/src/navigation-rail/navigation-rail-item.d.ts +0 -2
  89. package/dist/src/navigation-rail/navigation-rail.d.ts +2 -6
  90. package/dist/src/popover/popover-content.d.ts +0 -1
  91. package/dist/src/ripple/ripple.d.ts +9 -1
  92. package/dist/src/search/search.d.ts +2 -6
  93. package/dist/src/segmented-button/segmented-button.d.ts +0 -1
  94. package/dist/src/select/option.d.ts +0 -1
  95. package/dist/src/sidebar-menu/sidebar-menu-item.d.ts +0 -1
  96. package/dist/src/sidebar-menu/sidebar-sub-menu.d.ts +0 -1
  97. package/dist/src/tabs/tab-panel.d.ts +0 -1
  98. package/dist/src/tabs/tab.d.ts +4 -6
  99. package/dist/test/item.test.d.ts +1 -0
  100. package/dist/tsconfig.tsbuildinfo +1 -1
  101. package/package.json +4 -2
  102. package/readme.md +2 -2
  103. package/scss/components.scss +0 -1
  104. package/scss/mixin.scss +33 -13
  105. package/scss/styles.scss +1 -3
  106. package/src/__controllers/attachable-controller.ts +198 -0
  107. package/src/__mixins/NativeButtonMixin.ts +87 -0
  108. package/src/__mixins/{BaseHyperlinkMixin.ts → NativeHyperlinkMixin.ts} +15 -15
  109. package/src/__utils/is-link.ts +3 -0
  110. package/src/__utils/observe-slot-change.ts +46 -14
  111. package/src/accordion/accordion-item.scss +1 -1
  112. package/src/accordion/accordion-item.ts +0 -1
  113. package/src/breadcrumb/breadcrumb-item/breadcrumb-item.ts +0 -1
  114. package/src/button/ButtonConstants.ts +1 -0
  115. package/src/button/GroupButtonInterface.ts +4 -0
  116. package/src/button/button/button-colors.scss +2 -2
  117. package/src/button/button/button-layers.scss +124 -0
  118. package/src/button/button/button-sizes.scss +31 -53
  119. package/src/button/button/button.scss +139 -262
  120. package/src/button/button/button.ts +260 -106
  121. package/src/button/button/only-button.scss +13 -0
  122. package/src/button/button-group/button-group.ts +59 -17
  123. package/src/button/icon-button/icon-button-sizes.scss +12 -27
  124. package/src/button/icon-button/icon-button.ts +191 -83
  125. package/src/button/index.ts +1 -1
  126. package/src/calendar/calendar-column-view.ts +0 -1
  127. package/src/calendar/calendar-month-view.ts +0 -1
  128. package/src/canvas/canvas.scss +18 -6
  129. package/src/canvas/canvas.ts +125 -103
  130. package/src/card/card-content.ts +2 -3
  131. package/src/card/card.scss +87 -95
  132. package/src/card/card.ts +62 -60
  133. package/src/chip/chip/chip.scss +66 -71
  134. package/src/chip/chip/chip.ts +155 -56
  135. package/src/code-highlighter/code-highlighter.scss +1 -1
  136. package/src/code-highlighter/code-highlighter.ts +20 -5
  137. package/src/condition-builder/cb-compound-expression.scss +4 -0
  138. package/src/condition-builder/cb-compound-expression.ts +0 -1
  139. package/src/condition-builder/cb-divider.ts +0 -1
  140. package/src/condition-builder/cb-expression.scss +0 -1
  141. package/src/condition-builder/cb-expression.ts +0 -1
  142. package/src/condition-builder/cb-predicate.ts +0 -1
  143. package/src/elevation/elevation.scss +5 -1
  144. package/src/empty-state/empty-state.scss +1 -0
  145. package/src/fab/fab-colors.scss +2 -2
  146. package/src/fab/fab-sizes.scss +24 -34
  147. package/src/fab/fab.scss +77 -71
  148. package/src/fab/fab.ts +141 -65
  149. package/src/field/field.ts +6 -0
  150. package/src/focus-ring/focus-ring.ts +81 -72
  151. package/src/image/image.scss +21 -16
  152. package/src/image/image.ts +13 -14
  153. package/src/index.ts +1 -0
  154. package/src/input/input.ts +16 -25
  155. package/src/item/index.ts +1 -0
  156. package/src/item/item.scss +195 -0
  157. package/src/item/item.ts +362 -0
  158. package/src/link/link.scss +1 -10
  159. package/src/link/link.ts +4 -2
  160. package/src/list/list-item.ts +8 -8
  161. package/src/menu/menu/menu.ts +5 -9
  162. package/src/menu/menu-item/menu-item.scss +30 -108
  163. package/src/menu/menu-item/menu-item.ts +102 -133
  164. package/src/menu/sub-menu/sub-menu.ts +6 -3
  165. package/src/navigation-rail/navigation-rail-item.scss +5 -0
  166. package/src/navigation-rail/navigation-rail-item.ts +10 -15
  167. package/src/navigation-rail/navigation-rail.ts +2 -6
  168. package/src/peacock-loader.ts +5 -1
  169. package/src/popover/popover-content.ts +0 -1
  170. package/src/ripple/ripple.ts +52 -20
  171. package/src/search/search.scss +3 -0
  172. package/src/search/search.ts +11 -16
  173. package/src/segmented-button/segmented-button.ts +0 -1
  174. package/src/select/option.ts +1 -2
  175. package/src/select/select.scss +1 -10
  176. package/src/select/select.ts +2 -0
  177. package/src/sidebar-menu/sidebar-menu-item.ts +0 -1
  178. package/src/sidebar-menu/sidebar-sub-menu.ts +0 -1
  179. package/src/skeleton/skeleton.scss +5 -1
  180. package/src/tabs/tab-panel.ts +0 -1
  181. package/src/tabs/tab.ts +60 -70
  182. package/src/text/text.css-component.scss +3 -21
  183. package/src/tooltip/tooltip.scss +5 -8
  184. package/src/tooltip/tooltip.ts +1 -2
  185. package/dist/BaseButton-BNFAYn-S.js +0 -219
  186. package/dist/BaseButton-BNFAYn-S.js.map +0 -1
  187. package/dist/BaseHyperlinkMixin-BNuwbiEf.js.map +0 -1
  188. package/dist/button-colors-AvGh22Zn.js +0 -561
  189. package/dist/button-colors-AvGh22Zn.js.map +0 -1
  190. package/dist/icon-button-ohxHhy4t.js +0 -247
  191. package/dist/icon-button-ohxHhy4t.js.map +0 -1
  192. package/dist/navigation-rail-CD7IrqbN.js.map +0 -1
  193. package/dist/observe-slot-change-BGJfgg2E.js +0 -31
  194. package/dist/observe-slot-change-BGJfgg2E.js.map +0 -1
  195. package/dist/src/button/BaseButton.d.ts +0 -28
  196. package/dist/src/focus-ring/FocusAttachableController.d.ts +0 -8
  197. package/src/__mixins/BaseButtonMixin.ts +0 -83
  198. package/src/button/BaseButton.ts +0 -113
  199. package/src/focus-ring/FocusAttachableController.ts +0 -28
  200. package/src/popover/tooltip.css-component.scss +0 -19
package/src/button/button/button-layers.scss ADDED
@@ -0,0 +1,124 @@
1
+ @use '../../../scss/mixin';
2
+
3
+ // Mixin for the shared transition logic
4
+ @mixin button-transition {
5
+ transition-property: inset, width, height, transform, border-radius, opacity;
6
+ transition-duration: 200ms;
7
+ transition-timing-function: var(--easing-standard);
8
+ will-change: inset, transform, border-radius, opacity;
9
+ }
10
+
11
+ .button {
12
+ @include button-transition;
13
+ }
14
+
15
+ .background {
16
+ display: block;
17
+ position: absolute;
18
+ inset: 0;
19
+ pointer-events: none;
20
+
21
+ background-color: var(--private-button-container-color);
22
+ opacity: var(--private-button-container-opacity, 1);
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));
28
+ corner-shape: var(--private-button-container-shape-variant);
29
+ @include button-transition;
30
+ }
31
+
32
+ .neo-background {
33
+ display: block;
34
+ position: absolute;
35
+ inset: 0;
36
+ pointer-events: none;
37
+
38
+ background: var(--color-inverse-surface);
39
+ transform: translateX(0.25rem) translateY(0.25rem);
40
+
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));
45
+ corner-shape: var(--private-button-container-shape-variant);
46
+ @include button-transition;
47
+ }
48
+
49
+ .focus-ring {
50
+ z-index: 2;
51
+ pointer-events: none;
52
+
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);
58
+ }
59
+
60
+ .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));
65
+ corner-shape: var(--private-button-container-shape-variant);
66
+ pointer-events: none;
67
+
68
+ --ripple-state-opacity: var(--private-button-state-opacity, 0);
69
+ --ripple-pressed-color: var(--private-button-state-color);
70
+ }
71
+
72
+
73
+ .skeleton {
74
+ display: block;
75
+ position: absolute;
76
+ inset: 0;
77
+ pointer-events: none;
78
+
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);
86
+ }
87
+
88
+
89
+ .elevation {
90
+ pointer-events: none;
91
+ 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);
97
+
98
+ --elevation-level: var(--private-button-container-elevation-level);
99
+ }
100
+
101
+
102
+
103
+ .outline {
104
+ display: block;
105
+ position: absolute;
106
+ inset: 0;
107
+ pointer-events: none;
108
+
109
+ z-index: 0;
110
+
111
+ border: var(--private-button-outline-width) solid var(--private-button-outline-color);
112
+ 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));
117
+ corner-shape: var(--private-button-container-shape-variant);
118
+
119
+ @include button-transition;
120
+ }
121
+
122
+ .tooltip {
123
+ z-index: 1;
124
+ }
package/src/button/button/button-sizes.scss CHANGED
@@ -1,84 +1,62 @@
1
1
  @use '../../../scss/mixin';
2
2
 
3
-
4
3
  :host([size='xs']),
5
4
  :host([size='extra-small']) {
6
5
  --button-height: 2rem;
7
- }
8
-
9
- :host([size='xs']) .button,
10
- :host([size='extra-small']) .button {
11
- --_button-icon-size: 1rem;
12
- --_button_container-padding: 0.75rem;
6
+ --private-button-icon-size: 1rem;
7
+ --private-button-container-padding: 0.75rem;
13
8
 
14
- font-size: 0.875rem !important;
15
- font-weight: var(--font-weight-medium) !important;
16
- line-height: 1.25rem !important;
17
- letter-spacing: 0.1px !important;
9
+ --private-button-font-size: 0.875rem !important;
10
+ --private-button-font-weight: var(--font-weight-medium) !important;
11
+ --private-button-line-height: 1.25rem !important;
12
+ --private-button-letter-spacing: 0.1px !important;
18
13
  }
19
14
 
20
-
21
15
  :host([size='sm']),
22
16
  :host([size='small']) {
23
17
  --button-height: 2.5rem;
24
- }
25
-
26
- :host([size='sm']) .button,
27
- :host([size='small']) .button {
28
- --_button-icon-size: 1.25rem;
29
- --_button_container-padding: 1rem;
30
- --_button-icon-label-spacing: 0.5rem;
18
+ --private-button-icon-size: 1.25rem;
19
+ --private-button-container-padding: 1rem;
20
+ --private-button-icon-label-spacing: 0.5rem;
31
21
 
32
- font-size: 0.875rem !important;
33
- font-weight: var(--font-weight-medium) !important;
34
- line-height: 1.25rem !important;
35
- letter-spacing: 0.1px !important;
22
+ --private-button-font-size: 0.875rem !important;
23
+ --private-button-font-weight: var(--font-weight-medium) !important;
24
+ --private-button-line-height: 1.25rem !important;
25
+ --private-button-letter-spacing: 0.1px !important;
36
26
  }
37
27
 
38
28
  :host([size='md']),
39
29
  :host([size='medium']) {
40
30
  --button-height: 3.5rem;
41
- }
42
-
43
- :host([size='md']) .button,
44
- :host([size='medium']) .button {
45
- --_button-icon-size: 1.5rem;
46
- --_button_container-padding: 1.5rem;
31
+ --private-button-icon-size: 1.5rem;
32
+ --private-button-container-padding: 1.5rem;
47
33
 
48
- font-size: 1rem !important;
49
- font-weight: var(--font-weight-medium) !important;
50
- line-height: 1.5rem !important;
51
- letter-spacing: 0.15px !important;
34
+ --private-button-font-size: 1rem !important;
35
+ --private-button-font-weight: var(--font-weight-medium) !important;
36
+ --private-button-line-height: 1.5rem !important;
37
+ --private-button-letter-spacing: 0.15px !important;
52
38
  }
53
39
 
54
40
  :host([size='lg']),
55
41
  :host([size='large']) {
56
42
  --button-height: 6rem;
57
- }
43
+ --private-button-icon-size: 2rem;
44
+ --private-button-container-padding: 3rem;
58
45
 
59
- :host([size='lg']) .button,
60
- :host([size='large']) .button {
61
- --_button-icon-size: 2rem;
62
- --_button_container-padding: 3rem;
63
-
64
- font-size: 1.5rem !important;
65
- font-weight: var(--font-weight-regular) !important;
66
- line-height: 2rem !important;
67
- letter-spacing: 0 !important;
46
+ --private-button-font-size: 1.5rem !important;
47
+ --private-button-font-weight: var(--font-weight-regular) !important;
48
+ --private-button-line-height: 2rem !important;
49
+ --private-button-letter-spacing: 0 !important;
68
50
  }
69
51
 
70
52
  :host([size='xl']),
71
53
  :host([size='extra-large']) {
72
54
  --button-height: 8.5rem;
73
- }
74
-
75
- :host([size='xl']) .button,
76
- :host([size='extra-large']) .button {
77
- --_button-icon-size: 2.5rem;
78
- --_button_container-padding: 4rem;
55
+ --private-button-icon-size: 2.5rem;
56
+ --private-button-container-padding: 4rem;
79
57
 
80
- font-size: 2rem !important;
81
- font-weight: var(--font-weight-regular) !important;
82
- line-height: 2.5rem !important;
83
- letter-spacing: 0 !important;
58
+ --private-button-font-size: 2rem !important;
59
+ --private-button-font-weight: var(--font-weight-regular) !important;
60
+ --private-button-line-height: 2.5rem !important;
61
+ --private-button-letter-spacing: 0 !important;
84
62
  }