@redvars/peacock 3.4.0 → 3.5.1

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 (258) hide show
  1. package/dist/BaseButton-DuASuVth.js +219 -0
  2. package/dist/BaseButton-DuASuVth.js.map +1 -0
  3. package/dist/BaseHyperlinkMixin-BNuwbiEf.js +65 -0
  4. package/dist/BaseHyperlinkMixin-BNuwbiEf.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/banner.js +187 -0
  10. package/dist/banner.js.map +1 -0
  11. package/dist/bottom-sheet.js +2 -2
  12. package/dist/{button-COYCtuA8.js → button-DouvOfEU.js} +92 -283
  13. package/dist/button-DouvOfEU.js.map +1 -0
  14. package/dist/{button-group-DsXquZQn.js → button-group-CEdMwvJJ.js} +72 -48
  15. package/dist/button-group-CEdMwvJJ.js.map +1 -0
  16. package/dist/button-group.js +8 -5
  17. package/dist/button-group.js.map +1 -1
  18. package/dist/button.js +7 -4
  19. package/dist/button.js.map +1 -1
  20. package/dist/card.js +29 -74
  21. package/dist/card.js.map +1 -1
  22. package/dist/chart-bar.js +2 -2
  23. package/dist/chart-bar.js.map +1 -1
  24. package/dist/chart-doughnut.js +2 -2
  25. package/dist/chart-doughnut.js.map +1 -1
  26. package/dist/chart-pie.js +2 -2
  27. package/dist/chart-pie.js.map +1 -1
  28. package/dist/chart-stacked-bar.js +2 -2
  29. package/dist/chart-stacked-bar.js.map +1 -1
  30. package/dist/{class-map-3TAnCMAX.js → class-map-YU7g0o3B.js} +2 -2
  31. package/dist/{class-map-3TAnCMAX.js.map → class-map-YU7g0o3B.js.map} +1 -1
  32. package/dist/clock.js.map +1 -1
  33. package/dist/code-editor.js +4 -4
  34. package/dist/code-editor.js.map +1 -1
  35. package/dist/code-highlighter.js +5 -4
  36. package/dist/code-highlighter.js.map +1 -1
  37. package/dist/custom-elements-jsdocs.json +6627 -3477
  38. package/dist/custom-elements.json +10954 -7810
  39. package/dist/directive-ZPhl09Yt.js +9 -0
  40. package/dist/directive-ZPhl09Yt.js.map +1 -0
  41. package/dist/dispatch-event-utils-CuEqjlPT.js +127 -0
  42. package/dist/dispatch-event-utils-CuEqjlPT.js.map +1 -0
  43. package/dist/fab.js +423 -0
  44. package/dist/fab.js.map +1 -0
  45. package/dist/index.js +17 -9
  46. package/dist/index.js.map +1 -1
  47. package/dist/{observe-theme-change-DKAIv5BB.js → is-dark-mode-DicqGkCJ.js} +6 -2
  48. package/dist/is-dark-mode-DicqGkCJ.js.map +1 -0
  49. package/dist/{select-C3XAzenC.js → navigation-rail-Lxetd5-Z.js} +2426 -898
  50. package/dist/navigation-rail-Lxetd5-Z.js.map +1 -0
  51. package/dist/notification.js +418 -0
  52. package/dist/notification.js.map +1 -0
  53. package/dist/number-counter.js +2 -2
  54. package/dist/number-counter.js.map +1 -1
  55. package/dist/observe-slot-change-BGJfgg2E.js +31 -0
  56. package/dist/observe-slot-change-BGJfgg2E.js.map +1 -0
  57. package/dist/peacock-loader.js +48 -13
  58. package/dist/peacock-loader.js.map +1 -1
  59. package/dist/search.js +456 -0
  60. package/dist/search.js.map +1 -0
  61. package/dist/side-sheet.js +2 -2
  62. package/dist/src/__mixins/BaseButtonMixin.d.ts +20 -0
  63. package/dist/src/__mixins/BaseHyperlinkMixin.d.ts +18 -0
  64. package/dist/src/__mixins/MixinConstructor.d.ts +1 -0
  65. package/dist/src/__utils/cache-fetch.d.ts +1 -0
  66. package/dist/src/__utils/is-dark-mode.d.ts +1 -0
  67. package/dist/src/__utils/is-in-viewport.d.ts +1 -0
  68. package/dist/src/__utils/observe-slot-change.d.ts +1 -0
  69. package/dist/src/__utils/sanitize-svg.d.ts +1 -0
  70. package/dist/src/__utils/throttle.d.ts +4 -0
  71. package/dist/src/accordion/accordion-item.d.ts +33 -9
  72. package/dist/src/accordion/accordion.d.ts +21 -5
  73. package/dist/src/banner/banner.d.ts +43 -0
  74. package/dist/src/banner/index.d.ts +1 -0
  75. package/dist/src/button/BaseButton.d.ts +7 -57
  76. package/dist/src/button/button/button.d.ts +32 -3
  77. package/dist/src/button/button-group/button-group.d.ts +4 -4
  78. package/dist/src/button/icon-button/icon-button.d.ts +33 -8
  79. package/dist/src/card/card.d.ts +4 -15
  80. package/dist/src/empty-state/empty-state.d.ts +1 -1
  81. package/dist/src/fab/fab.d.ts +80 -0
  82. package/dist/src/fab/index.d.ts +1 -0
  83. package/dist/src/focus-ring/focus-ring.d.ts +11 -5
  84. package/dist/src/index.d.ts +8 -1
  85. package/dist/src/link/link.d.ts +3 -10
  86. package/dist/src/menu/menu/menu.d.ts +3 -2
  87. package/dist/src/menu/sub-menu/sub-menu.d.ts +1 -0
  88. package/dist/src/navigation-rail/index.d.ts +2 -0
  89. package/dist/src/navigation-rail/navigation-rail-item.d.ts +55 -0
  90. package/dist/src/navigation-rail/navigation-rail.d.ts +71 -0
  91. package/dist/src/notification/index.d.ts +1 -0
  92. package/dist/src/notification/notification.d.ts +69 -0
  93. package/dist/src/pagination/pagination.d.ts +8 -1
  94. package/dist/src/search/index.d.ts +1 -0
  95. package/dist/src/search/search.d.ts +76 -0
  96. package/dist/src/select/select.d.ts +3 -5
  97. package/dist/src/sidebar-menu/index.d.ts +3 -0
  98. package/dist/src/sidebar-menu/sidebar-menu-item.d.ts +58 -0
  99. package/dist/src/sidebar-menu/sidebar-menu.d.ts +38 -0
  100. package/dist/src/sidebar-menu/sidebar-sub-menu.d.ts +35 -0
  101. package/dist/src/slider/slider.d.ts +4 -0
  102. package/dist/src/snackbar/snackbar.d.ts +14 -1
  103. package/dist/src/toolbar/index.d.ts +1 -0
  104. package/dist/src/toolbar/toolbar.d.ts +86 -0
  105. package/dist/src/tooltip/tooltip.d.ts +3 -0
  106. package/dist/src/url-field/index.d.ts +1 -0
  107. package/dist/src/url-field/url-field.d.ts +48 -0
  108. package/dist/{style-map-CRFEoCEg.js → style-map-DVmWOuYy.js} +2 -2
  109. package/dist/{style-map-CRFEoCEg.js.map → style-map-DVmWOuYy.js.map} +1 -1
  110. package/dist/test/banner.test.d.ts +1 -0
  111. package/dist/test/search.test.d.ts +1 -0
  112. package/dist/test/sidebar-menu.test.d.ts +1 -0
  113. package/dist/test/toolbar.test.d.ts +1 -0
  114. package/dist/toolbar.js +306 -0
  115. package/dist/toolbar.js.map +1 -0
  116. package/dist/tsconfig.tsbuildinfo +1 -1
  117. package/dist/{unsafe-html-D3GHRaGQ.js → unsafe-html-BsGUjx94.js} +2 -2
  118. package/dist/{unsafe-html-D3GHRaGQ.js.map → unsafe-html-BsGUjx94.js.map} +1 -1
  119. package/package.json +1 -1
  120. package/readme.md +73 -65
  121. package/scss/mixin.scss +16 -0
  122. package/scss/styles.scss +4 -0
  123. package/src/__mixins/BaseButtonMixin.ts +83 -0
  124. package/src/__mixins/BaseHyperlinkMixin.ts +68 -0
  125. package/src/__mixins/MixinConstructor.ts +1 -0
  126. package/src/__mixins/README.md +19 -0
  127. package/src/__utils/cache-fetch.ts +65 -0
  128. package/src/__utils/is-dark-mode.ts +3 -0
  129. package/src/__utils/is-in-viewport.ts +6 -0
  130. package/src/__utils/observe-slot-change.ts +38 -0
  131. package/src/__utils/sanitize-svg.ts +27 -0
  132. package/src/__utils/throttle.ts +27 -0
  133. package/src/accordion/accordion-item.scss +136 -65
  134. package/src/accordion/accordion-item.ts +117 -44
  135. package/src/accordion/accordion.scss +24 -5
  136. package/src/accordion/accordion.ts +29 -23
  137. package/src/accordion/demo/index.html +74 -35
  138. package/src/banner/banner.scss +83 -0
  139. package/src/banner/banner.ts +101 -0
  140. package/src/banner/index.ts +1 -0
  141. package/src/button/BaseButton.ts +13 -115
  142. package/src/button/button/button-colors.scss +14 -14
  143. package/src/button/button/button-sizes.scss +4 -2
  144. package/src/button/button/button.ts +80 -26
  145. package/src/button/button-group/button-group.ts +5 -5
  146. package/src/button/icon-button/icon-button.ts +79 -44
  147. package/src/card/card.ts +50 -100
  148. package/src/chart-bar/chart-bar.ts +10 -15
  149. package/src/chart-bar/chart-stacked-bar.ts +15 -19
  150. package/src/chart-doughnut/chart-doughnut.ts +24 -28
  151. package/src/chart-pie/chart-pie.ts +20 -24
  152. package/src/checkbox/checkbox.scss +17 -34
  153. package/src/checkbox/checkbox.ts +4 -2
  154. package/src/clock/clock.ts +1 -1
  155. package/src/code-editor/code-editor.ts +4 -4
  156. package/src/code-highlighter/code-highlighter.scss +1 -0
  157. package/src/code-highlighter/code-highlighter.ts +3 -3
  158. package/src/date-picker/date-picker.ts +6 -3
  159. package/src/divider/divider.ts +3 -1
  160. package/src/elevation/elevation.scss +5 -5
  161. package/src/empty-state/empty-state.scss +7 -9
  162. package/src/empty-state/empty-state.ts +1 -1
  163. package/src/fab/fab-colors.scss +49 -0
  164. package/src/fab/fab-sizes.scss +47 -0
  165. package/src/fab/fab.scss +137 -0
  166. package/src/fab/fab.ts +214 -0
  167. package/src/fab/index.ts +1 -0
  168. package/src/field/field.ts +3 -1
  169. package/src/focus-ring/focus-ring.ts +47 -40
  170. package/src/icon/datasource.ts +1 -1
  171. package/src/icon/icon.ts +3 -1
  172. package/src/image/image.ts +3 -2
  173. package/src/index.ts +8 -1
  174. package/src/input/input.ts +8 -3
  175. package/src/link/link.ts +2 -15
  176. package/src/menu/menu/menu.scss +7 -0
  177. package/src/menu/menu/menu.ts +7 -4
  178. package/src/menu/menu-item/menu-item.ts +3 -1
  179. package/src/menu/sub-menu/sub-menu.ts +1 -0
  180. package/src/navigation-rail/index.ts +2 -0
  181. package/src/navigation-rail/navigation-rail-item.scss +216 -0
  182. package/src/navigation-rail/navigation-rail-item.ts +223 -0
  183. package/src/navigation-rail/navigation-rail.scss +72 -0
  184. package/src/navigation-rail/navigation-rail.ts +149 -0
  185. package/src/notification/index.ts +1 -0
  186. package/src/notification/notification.scss +201 -0
  187. package/src/notification/notification.ts +207 -0
  188. package/src/number-counter/number-counter.ts +3 -1
  189. package/src/number-field/number-field.ts +10 -6
  190. package/src/pagination/pagination.scss +33 -24
  191. package/src/pagination/pagination.ts +115 -60
  192. package/src/peacock-loader.ts +42 -5
  193. package/src/radio/radio.ts +3 -1
  194. package/src/search/index.ts +1 -0
  195. package/src/search/search-colors.scss +14 -0
  196. package/src/search/search.scss +204 -0
  197. package/src/search/search.ts +244 -0
  198. package/src/select/option.ts +1 -1
  199. package/src/select/select.scss +5 -0
  200. package/src/select/select.ts +71 -37
  201. package/src/sidebar-menu/demo/index.html +68 -0
  202. package/src/sidebar-menu/index.ts +3 -0
  203. package/src/sidebar-menu/sidebar-menu-item.scss +102 -0
  204. package/src/sidebar-menu/sidebar-menu-item.ts +151 -0
  205. package/src/{tree-view/tree-view.scss → sidebar-menu/sidebar-menu.scss} +1 -1
  206. package/src/sidebar-menu/sidebar-menu.ts +182 -0
  207. package/src/sidebar-menu/sidebar-sub-menu.scss +130 -0
  208. package/src/sidebar-menu/sidebar-sub-menu.ts +160 -0
  209. package/src/skeleton/skeleton.scss +18 -24
  210. package/src/slider/slider.scss +19 -0
  211. package/src/slider/slider.ts +30 -19
  212. package/src/snackbar/snackbar.scss +62 -31
  213. package/src/snackbar/snackbar.ts +91 -11
  214. package/src/switch/switch.ts +3 -1
  215. package/src/table/table.ts +3 -1
  216. package/src/tabs/tab.ts +10 -6
  217. package/src/text/text.css-component.scss +7 -1
  218. package/src/textarea/textarea.ts +4 -2
  219. package/src/time-picker/time-picker.ts +5 -3
  220. package/src/toolbar/index.ts +1 -0
  221. package/src/toolbar/toolbar-colors.scss +16 -0
  222. package/src/toolbar/toolbar.scss +165 -0
  223. package/src/toolbar/toolbar.ts +137 -0
  224. package/src/tooltip/tooltip.ts +24 -0
  225. package/src/url-field/index.ts +1 -0
  226. package/src/url-field/url-field.scss +50 -0
  227. package/src/url-field/url-field.ts +239 -0
  228. package/dist/button-COYCtuA8.js.map +0 -1
  229. package/dist/button-group-DsXquZQn.js.map +0 -1
  230. package/dist/directive-Cuw6h7YA.js +0 -9
  231. package/dist/directive-Cuw6h7YA.js.map +0 -1
  232. package/dist/dispatch-event-utils-B4odODQf.js +0 -277
  233. package/dist/dispatch-event-utils-B4odODQf.js.map +0 -1
  234. package/dist/observe-theme-change-DKAIv5BB.js.map +0 -1
  235. package/dist/select-C3XAzenC.js.map +0 -1
  236. package/dist/src/styleMixins.css.d.ts +0 -9
  237. package/dist/src/tree-view/index.d.ts +0 -2
  238. package/dist/src/tree-view/tree-node.d.ts +0 -69
  239. package/dist/src/tree-view/tree-view.d.ts +0 -40
  240. package/dist/src/tree-view/wc-tree-view.d.ts +0 -6
  241. package/dist/src/utils.d.ts +0 -9
  242. package/dist/test/tree-view.test.d.ts +0 -1
  243. package/src/styleMixins.css.ts +0 -55
  244. package/src/tree-view/demo/index.html +0 -57
  245. package/src/tree-view/index.ts +0 -2
  246. package/src/tree-view/tree-node.scss +0 -101
  247. package/src/tree-view/tree-node.ts +0 -268
  248. package/src/tree-view/tree-view.ts +0 -182
  249. package/src/tree-view/wc-tree-view.ts +0 -9
  250. package/src/utils.ts +0 -193
  251. /package/dist/src/{spread.d.ts → __directive/spread.d.ts} +0 -0
  252. /package/dist/src/{utils → __utils}/copy-to-clipboard.d.ts +0 -0
  253. /package/dist/src/{utils → __utils}/dispatch-event-utils.d.ts +0 -0
  254. /package/dist/src/{utils → __utils}/observe-theme-change.d.ts +0 -0
  255. /package/src/{spread.ts → __directive/spread.ts} +0 -0
  256. /package/src/{utils → __utils}/copy-to-clipboard.ts +0 -0
  257. /package/src/{utils → __utils}/dispatch-event-utils.ts +0 -0
  258. /package/src/{utils → __utils}/observe-theme-change.ts +0 -0
package/src/accordion/demo/index.html CHANGED
@@ -9,50 +9,89 @@
9
9
  <style>
10
10
  body {
11
11
  background: #fafafa;
12
+ padding: 2rem;
13
+ max-width: 640px;
14
+ margin: 0 auto;
12
15
  }
13
- .text-body {
14
- padding: 0;
15
- margin: 0 !important;
16
+ h3 {
17
+ margin: 1.5rem 0 0.5rem;
18
+ font-family: sans-serif;
19
+ font-size: 0.875rem;
20
+ color: #666;
16
21
  }
17
22
  </style>
18
23
  </head>
19
24
  <body>
20
25
 
21
- <p-accordion>
22
- <p-accordion-item heading="Title 1">
23
- <p class='text-body'>
24
- The accordion component delivers large amounts of content in a small space through progressive
25
- disclosure.
26
- The user gets key details about the underlying content and can choose to expand that content
27
- within the
28
- constraints of the accordion.
29
- Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
30
- </p>
31
- </p-accordion-item>
26
+ <h3>Default</h3>
27
+ <wc-accordion>
28
+ <wc-accordion-item>
29
+ <span slot="heading">Personal information</span>
30
+ <span slot="description">Fill in your personal details</span>
31
+ <p>Type in your name and address below.</p>
32
+ </wc-accordion-item>
33
+ <wc-accordion-item>
34
+ <span slot="heading">Shipping address</span>
35
+ <span slot="description">Where should we send your order?</span>
36
+ <p>Add your shipping address to continue.</p>
37
+ </wc-accordion-item>
38
+ <wc-accordion-item disabled>
39
+ <span slot="heading">Billing address</span>
40
+ <p>This section is unavailable.</p>
41
+ </wc-accordion-item>
42
+ </wc-accordion>
32
43
 
33
- <p-accordion-item heading="Title 1">
34
- <p class='text-body'>
35
- The accordion component delivers large amounts of content in a small space through progressive
36
- disclosure.
37
- The user gets key details about the underlying content and can choose to expand that content
38
- within the
39
- constraints of the accordion.
40
- Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
41
- </p>
42
- </p-accordion-item>
44
+ <h3>Multi (allow multiple panels open)</h3>
45
+ <wc-accordion multi>
46
+ <wc-accordion-item>
47
+ <span slot="heading">Panel A</span>
48
+ <p>Content for panel A.</p>
49
+ </wc-accordion-item>
50
+ <wc-accordion-item open>
51
+ <span slot="heading">Panel B</span>
52
+ <p>Content for panel B (initially open).</p>
53
+ </wc-accordion-item>
54
+ <wc-accordion-item>
55
+ <span slot="heading">Panel C</span>
56
+ <p>Content for panel C.</p>
57
+ </wc-accordion-item>
58
+ </wc-accordion>
43
59
 
44
- <p-accordion-item heading="Title 1" disabled>
45
- <p class='text-body'>
46
- The accordion component delivers large amounts of content in a small space through progressive
47
- disclosure.
48
- The user gets key details about the underlying content and can choose to expand that content
49
- within the
50
- constraints of the accordion.
51
- Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
52
- </p>
53
- </p-accordion-item>
54
- </p-accordion>
60
+ <h3>Toggle position: before</h3>
61
+ <wc-accordion>
62
+ <wc-accordion-item toggle-position="before">
63
+ <span slot="heading">Panel 1</span>
64
+ <p>Icon appears at the leading start.</p>
65
+ </wc-accordion-item>
66
+ <wc-accordion-item toggle-position="before">
67
+ <span slot="heading">Panel 2</span>
68
+ <p>Icon appears at the leading start.</p>
69
+ </wc-accordion-item>
70
+ </wc-accordion>
55
71
 
72
+ <h3>Hide toggle</h3>
73
+ <wc-accordion>
74
+ <wc-accordion-item hide-toggle>
75
+ <span slot="heading">No toggle icon</span>
76
+ <p>The expand indicator is hidden.</p>
77
+ </wc-accordion-item>
78
+ <wc-accordion-item hide-toggle>
79
+ <span slot="heading">Another panel</span>
80
+ <p>Click the header to toggle.</p>
81
+ </wc-accordion-item>
82
+ </wc-accordion>
83
+
84
+ <h3>Flat display mode</h3>
85
+ <wc-accordion display-mode="flat">
86
+ <wc-accordion-item>
87
+ <span slot="heading">Flat Panel 1</span>
88
+ <p>No borders between panels. Suitable inside cards.</p>
89
+ </wc-accordion-item>
90
+ <wc-accordion-item>
91
+ <span slot="heading">Flat Panel 2</span>
92
+ <p>Content here.</p>
93
+ </wc-accordion-item>
94
+ </wc-accordion>
56
95
 
57
96
  <script type='module' src='/dist/peacock-loader.js'></script>
58
97
  </body>
package/src/banner/banner.scss ADDED
@@ -0,0 +1,83 @@
1
+ @use '../../scss/mixin';
2
+
3
+ @include mixin.base-styles;
4
+
5
+ :host {
6
+ display: block;
7
+ }
8
+
9
+ .banner {
10
+ align-items: flex-start;
11
+ background: var(--banner-container-color);
12
+ border-radius: var(--banner-border-radius);
13
+ display: grid;
14
+ gap: var(--spacing-200);
15
+ grid-template-columns: auto 1fr;
16
+ padding: var(--spacing-200);
17
+ }
18
+
19
+ .banner-icon {
20
+ align-items: center;
21
+ color: var(--banner-icon-color);
22
+ display: inline-flex;
23
+ justify-content: center;
24
+ min-width: 1.5rem;
25
+ padding-top: 0.1rem;
26
+ }
27
+
28
+ .banner-content {
29
+ .banner-label {
30
+ display: inline;
31
+ @include mixin.get-typography(label-large);
32
+ color: var(--banner-label-text-color);
33
+ margin-inline-end: var(--spacing-050);
34
+ }
35
+
36
+ .banner-description {
37
+ display: inline;
38
+ @include mixin.get-typography(body-medium);
39
+ color: var(--banner-description-text-color);
40
+ }
41
+ }
42
+
43
+
44
+ // Default styles for the banner and content. These will be overridden by the variant-specific styles below.
45
+ :host {
46
+ --banner-container-color: var(--color-tertiary-container);
47
+ --banner-label-text-color: var(--color-on-tertiary-container);
48
+ --banner-description-text-color: var(--color-on-tertiary-container);
49
+ --banner-icon-color: var(--color-on-tertiary-container);
50
+ --banner-border-radius: var(--shape-corner-small);
51
+ }
52
+
53
+ .banner.info,
54
+ .banner-content.info {
55
+ --banner-container-color: var(--color-primary-container);
56
+ --banner-label-text-color: var(--color-on-primary-container);
57
+ --banner-description-text-color: var(--color-on-primary-container);
58
+ --banner-icon-color: var(--color-on-primary-container);
59
+ }
60
+
61
+ .banner.success,
62
+ .banner-content.success {
63
+ --banner-container-color: var(--color-success-container);
64
+ --banner-label-text-color: var(--color-on-success-container);
65
+ --banner-description-text-color: var(--color-on-success-container);
66
+ --banner-icon-color: var(--color-on-success-container);
67
+ }
68
+
69
+ .banner.warning,
70
+ .banner-content.warning {
71
+ --banner-container-color: var(--color-warning-container);
72
+ --banner-label-text-color: var(--color-on-warning-container);
73
+ --banner-description-text-color: var(--color-on-warning-container);
74
+ --banner-icon-color: var(--color-on-warning-container);
75
+ }
76
+
77
+ .banner.error,
78
+ .banner-content.error {
79
+ --banner-container-color: var(--color-error-container);
80
+ --banner-label-text-color: var(--color-on-error-container);
81
+ --banner-description-text-color: var(--color-on-error-container);
82
+ --banner-icon-color: var(--color-on-error-container);
83
+ }
package/src/banner/banner.ts ADDED
@@ -0,0 +1,101 @@
1
+ import { LitElement, html, nothing } from 'lit';
2
+ import { property } from 'lit/decorators.js';
3
+ import { classMap } from 'lit/directives/class-map.js';
4
+
5
+ import IndividualComponent from '@/IndividualComponent.js';
6
+ import styles from './banner.scss';
7
+
8
+ type BannerVariant = 'note' | 'info' | 'success' | 'warning' | 'error';
9
+
10
+ const VARIANT_LABELS: Record<BannerVariant, string> = {
11
+ note: 'Note',
12
+ info: 'Info',
13
+ success: 'Success',
14
+ warning: 'Warning',
15
+ error: 'Error',
16
+ };
17
+
18
+ const VARIANT_ICONS: Record<BannerVariant, string> = {
19
+ note: 'star',
20
+ info: 'info',
21
+ success: 'check_circle',
22
+ warning: 'warning',
23
+ error: 'error',
24
+ };
25
+
26
+ /**
27
+ * @label Banner
28
+ * @tag wc-banner
29
+ * @rawTag banner
30
+ * @summary Banners show short, prominent contextual messages with optional icon and description.
31
+ *
32
+ * @cssprop --banner-container-color - Background color of the banner container.
33
+ * @cssprop --banner-label-text-color - Label text color.
34
+ * @cssprop --banner-description-text-color - Description text color.
35
+ * @cssprop --banner-icon-color - Icon color.
36
+ * @cssprop --banner-border-radius - Border radius of the banner surface.
37
+ *
38
+ * @example
39
+ * ```html
40
+ * <wc-banner variant="note" description="Use semantic roles that preserve a 3:1 contrast ratio."></wc-banner>
41
+ * ```
42
+ * @tags display, feedback
43
+ */
44
+ @IndividualComponent
45
+ export class Banner extends LitElement {
46
+ static styles = [styles];
47
+
48
+ /**
49
+ * Visual intent of the banner.
50
+ */
51
+ @property({ type: String, reflect: true })
52
+ variant: BannerVariant = 'note';
53
+
54
+ /**
55
+ * Optional explicit label text. Falls back to a variant-based label.
56
+ */
57
+ @property({ type: String })
58
+ label?: string;
59
+
60
+ /**
61
+ * Optional explicit icon name. Falls back to a variant-based icon.
62
+ */
63
+ @property({ type: String })
64
+ icon?: string;
65
+
66
+ /**
67
+ * Optional description text when a default slot is not provided.
68
+ */
69
+ @property({ type: String })
70
+ description = '';
71
+
72
+ private get resolvedLabel() {
73
+ return this.label || VARIANT_LABELS[this.variant];
74
+ }
75
+
76
+ private get resolvedIcon() {
77
+ return this.icon || VARIANT_ICONS[this.variant];
78
+ }
79
+
80
+ render() {
81
+ return html`
82
+ <div class=${classMap({ 'banner': true, [this.variant]: true })} role="status" aria-live="polite">
83
+ <div class="banner-icon" aria-hidden="true">
84
+ <slot name="icon">
85
+ <wc-icon name=${this.resolvedIcon}></wc-icon>
86
+ </slot>
87
+ </div>
88
+
89
+ <div class=${classMap({ 'banner-content': true, [this.variant]: true })}>
90
+ <div class="banner-label">
91
+ <slot name="label">${this.resolvedLabel}:</slot>
92
+ </div>
93
+
94
+ <div class="banner-description">
95
+ <slot>${this.description || nothing}</slot>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ `;
100
+ }
101
+ }
package/src/banner/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { Banner } from './banner.js';
package/src/button/BaseButton.ts CHANGED
@@ -1,90 +1,21 @@
1
1
  import { html, LitElement, nothing } from 'lit';
2
2
  import { property, query, state } from 'lit/decorators.js';
3
- import { dispatchActivationClick, isActivationClick } from '../utils/dispatch-event-utils.js';
3
+ import { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.js';
4
+ import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
5
+ import BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
4
6
 
5
- export class BaseButton extends LitElement {
6
- #id = crypto.randomUUID();
7
7
 
8
- @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =
9
- 'button';
10
8
 
11
- /**
12
- * Type is preset of color and variant. Type will be only applied.
13
- *
14
- */
15
- @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';
16
-
17
- /**
18
- * The visual style of the button.
19
- *
20
- * Possible variant values:
21
- * `"filled"` is a filled button.
22
- * `"outlined"` is an outlined button.
23
- * `"text"` is a transparent button.
24
- * `"tonal"` is a light color button.
25
- * `"elevated"` is elevated button
26
- */
27
- @property() variant:
28
- | 'elevated'
29
- | 'filled'
30
- | 'tonal'
31
- | 'outlined'
32
- | 'text'
33
- | 'neo' = 'filled';
34
-
35
- /**
36
- * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
37
- */
38
- @property({ reflect: true }) color:
39
- | 'primary'
40
- | 'success'
41
- | 'danger'
42
- | 'warning'
43
- | 'light'
44
- | 'dark' = 'primary';
45
-
46
- /**
47
- * Button size.
48
- * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
49
- */
50
- @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
51
-
52
- /**
53
- * If true, the user cannot interact with the button. Defaults to `false`.
54
- */
55
- @property({ type: Boolean, reflect: true })
56
- disabled: boolean = false;
57
-
58
- @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
59
-
60
- /**
61
- * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
62
- */
63
- @property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
64
- softDisabled: boolean = false;
65
-
66
- /**
67
- * If button is disabled, the reason why it is disabled.
68
- */
69
- @property({ attribute: 'disabled-reason' })
70
- disabledReason: string = '';
71
-
72
- /**
73
- * Hyperlink to navigate to on click.
74
- */
75
- @property({ reflect: true }) href?: string;
9
+ export class BaseButton extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
10
+ protected static readonly DISABLED_REASON_ID = 'disabled-reason';
76
11
 
77
- /**
78
- * Sets or retrieves the window or frame at which to target content.
79
- */
80
- @property() target: string = '_self';
81
12
 
13
+ color?: string;
82
14
 
83
- @property({ reflect: true })
84
- configAria?: { [key: string]: any };
15
+ variant?: string;
85
16
 
17
+ @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
86
18
 
87
-
88
19
  @property({ type: Boolean, reflect: true }) toggle: boolean = false;
89
20
 
90
21
  @property({ type: Boolean, reflect: true }) selected: boolean = false;
@@ -104,14 +35,6 @@ export class BaseButton extends LitElement {
104
35
 
105
36
  @query('.button') readonly buttonElement!: HTMLElement | null;
106
37
 
107
- override focus() {
108
- this.buttonElement?.focus();
109
- }
110
-
111
- override blur() {
112
- this.buttonElement?.blur();
113
- }
114
-
115
38
  override connectedCallback() {
116
39
  super.connectedCallback();
117
40
  this.addEventListener('click', this.__dispatchClickWithThrottle);
@@ -139,10 +62,6 @@ export class BaseButton extends LitElement {
139
62
  }
140
63
  };
141
64
 
142
- __isLink() {
143
- return !!this.href;
144
- }
145
-
146
65
  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
147
66
  event => {
148
67
  this.__dispatchClick(event);
@@ -170,38 +89,17 @@ export class BaseButton extends LitElement {
170
89
  dispatchActivationClick(this.buttonElement);
171
90
  };
172
91
 
173
- __convertTypeToVariantAndColor() {
174
- if (this.type === 'primary') {
175
- this.color = 'primary';
176
- this.variant = 'filled';
177
- } else if (this.type === 'secondary') {
178
- this.color = 'dark';
179
- this.variant = 'outlined';
180
- } else if (this.type === 'tertiary') {
181
- this.color = 'primary';
182
- this.variant = 'text';
183
- } else if (this.type === 'danger') {
184
- this.color = 'danger';
185
- this.variant = 'filled';
186
- }
187
- }
188
-
189
- __getDisabledReasonID() {
190
- return this.disabled && this.disabledReason
191
- ? `disabled-reason-${this.#id}`
192
- : nothing;
193
- }
92
+
194
93
 
195
- __renderDisabledReason() {
196
- const disabledReasonID = this.__getDisabledReasonID();
197
- if (disabledReasonID)
94
+ __renderDisabledReason(softDisabled: boolean) {
95
+ if (softDisabled)
198
96
  return html`<div
199
- id="disabled-reason-${this.#id}"
97
+ id=${BaseButton.DISABLED_REASON_ID}
200
98
  role="tooltip"
201
99
  aria-label=${this.disabledReason}
202
100
  class="screen-reader-only"
203
101
  >
204
- {this.disabledReason}
102
+ ${this.disabledReason}
205
103
  </div>`;
206
104
  return nothing;
207
105
  }
package/src/button/button/button-colors.scss CHANGED
@@ -110,15 +110,15 @@
110
110
  }
111
111
 
112
112
 
113
- :host([color=dark]) {
113
+ :host([color=on-surface]) {
114
114
  --filled-button-container-color: var(--color-on-surface);
115
115
  --filled-button-label-text-color: var(--color-surface);
116
116
 
117
- --tonal-button-container-color: var(--color-surface-container);
118
- --tonal-button-label-text-color: var(--color-on-surface-container);
117
+ --tonal-button-container-color: var(--color-on-surface-container);
118
+ --tonal-button-label-text-color: var(--color-surface-container-high);
119
119
 
120
- --elevated-button-container-color: var(--color-surface-container-low);
121
- --elevated-button-label-text-color: var(--color-on-surface);
120
+ --elevated-button-container-color: var(--color-on-surface);
121
+ --elevated-button-label-text-color: var(--color-surface);
122
122
 
123
123
  --outlined-button-outline-color: var(--color-on-surface);
124
124
  --outlined-button-label-text-color: var(--color-on-surface);
@@ -129,20 +129,20 @@
129
129
  --neo-button-label-text-color: var(--color-surface);
130
130
  }
131
131
 
132
- :host([color=light]) {
133
- --filled-button-container-color: var(--color-surface);
132
+ :host([color=surface]) {
133
+ --filled-button-container-color: var(--color-surface-container-high);
134
134
  --filled-button-label-text-color: var(--color-on-surface);
135
135
 
136
- --tonal-button-container-color: var(--color-on-surface-container);
137
- --tonal-button-label-text-color: var(--color-surface-container);
136
+ --tonal-button-container-color: var(--color-surface-container-high);
137
+ --tonal-button-label-text-color: var(--color-on-surface-container);
138
138
 
139
- --elevated-button-container-color: var(--color-surface-container-low);
140
- --elevated-button-label-text-color: var(--color-white);
139
+ --elevated-button-container-color: var(--color-surface);
140
+ --elevated-button-label-text-color: var(--color-on-surface);
141
141
 
142
- --outlined-button-outline-color: var(--color-surface);
143
- --outlined-button-label-text-color: var(--color-surface);
142
+ --outlined-button-outline-color: var(--color-on-surface);
143
+ --outlined-button-label-text-color: var(--color-on-surface);
144
144
 
145
- --text-button-label-text-color: var(--color-surface);
145
+ --text-button-label-text-color: var(--color-on-surface);
146
146
 
147
147
  --neo-button-container-color: var(--color-surface);
148
148
  --neo-button-label-text-color: var(--color-on-surface);
package/src/button/button/button-sizes.scss CHANGED
@@ -67,11 +67,13 @@
67
67
  letter-spacing: 0 !important;
68
68
  }
69
69
 
70
- :host([size='xl']) {
70
+ :host([size='xl']),
71
+ :host([size='extra-large']) {
71
72
  --button-height: 8.5rem;
72
73
  }
73
74
 
74
- :host([size='xl']) .button {
75
+ :host([size='xl']) .button,
76
+ :host([size='extra-large']) .button {
75
77
  --_button-icon-size: 2.5rem;
76
78
  --_button_container-padding: 4rem;
77
79