@vonage/vivid 3.0.0-next.8 → 3.0.0-next.80

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 (176) hide show
  1. package/README.md +141 -4
  2. package/accordion/index.js +2 -4
  3. package/accordion-item/index.js +26 -20
  4. package/action-group/index.js +47 -0
  5. package/avatar/index.js +70 -0
  6. package/badge/index.js +17 -21
  7. package/banner/index.js +23 -87
  8. package/breadcrumb/index.js +21 -18
  9. package/breadcrumb-item/index.js +19 -12
  10. package/button/index.js +19 -757
  11. package/calendar/index.js +67 -25
  12. package/calendar-event/index.js +115 -0
  13. package/card/index.js +132 -0
  14. package/checkbox/index.js +184 -0
  15. package/dialog/index.js +281 -0
  16. package/divider/index.js +3 -0
  17. package/elevation/index.js +3 -31
  18. package/fab/index.js +105 -0
  19. package/focus/index.js +18 -3
  20. package/header/index.js +66 -0
  21. package/icon/index.js +9 -5
  22. package/index.js +53 -20
  23. package/layout/index.js +4 -6
  24. package/lib/accordion-item/accordion-item.d.ts +2 -2
  25. package/lib/accordion-item/index.d.ts +2 -1
  26. package/lib/action-group/action-group.d.ts +10 -0
  27. package/lib/{sidenav-item/sidenav-item.template.d.ts → action-group/action-group.template.d.ts} +2 -2
  28. package/lib/{sidenav-item → action-group}/index.d.ts +1 -2
  29. package/lib/avatar/avatar.d.ts +15 -0
  30. package/lib/avatar/avatar.template.d.ts +4 -0
  31. package/lib/avatar/index.d.ts +3 -0
  32. package/lib/badge/badge.d.ts +5 -5
  33. package/lib/badge/index.d.ts +1 -1
  34. package/lib/banner/banner.d.ts +1 -1
  35. package/lib/banner/banner.template.d.ts +0 -2
  36. package/lib/banner/index.d.ts +1 -0
  37. package/lib/breadcrumb/breadcrumb.template.d.ts +4 -0
  38. package/lib/breadcrumb-item/breadcrumb-item.d.ts +1 -1
  39. package/lib/breadcrumb-item/index.d.ts +1 -0
  40. package/lib/button/button.d.ts +6 -5
  41. package/lib/button/index.d.ts +2 -19
  42. package/lib/calendar/calendar.d.ts +3 -1
  43. package/lib/calendar/index.d.ts +0 -1
  44. package/lib/calendar-event/calendar-event.d.ts +14 -0
  45. package/lib/calendar-event/calendar-event.template.d.ts +4 -0
  46. package/lib/calendar-event/index.d.ts +2 -0
  47. package/lib/card/card.d.ts +10 -0
  48. package/lib/{text/text.template.d.ts → card/card.template.d.ts} +2 -2
  49. package/lib/card/index.d.ts +4 -0
  50. package/lib/checkbox/checkbox.d.ts +5 -0
  51. package/lib/checkbox/checkbox.template.d.ts +4 -0
  52. package/lib/checkbox/index.d.ts +4 -0
  53. package/lib/components.d.ts +27 -10
  54. package/lib/dialog/dialog.d.ts +20 -0
  55. package/lib/dialog/dialog.template.d.ts +4 -0
  56. package/lib/dialog/index.d.ts +5 -0
  57. package/lib/divider/divider.d.ts +3 -0
  58. package/lib/divider/divider.template.d.ts +4 -0
  59. package/lib/divider/index.d.ts +2 -0
  60. package/lib/elevation/elevation.d.ts +1 -0
  61. package/lib/elevation/index.d.ts +1 -1
  62. package/lib/enums.d.ts +11 -6
  63. package/lib/fab/fab.d.ts +13 -0
  64. package/lib/fab/fab.template.d.ts +4 -0
  65. package/lib/fab/index.d.ts +4 -0
  66. package/lib/focus/index.d.ts +1 -1
  67. package/lib/header/header.d.ts +5 -0
  68. package/lib/header/header.template.d.ts +4 -0
  69. package/lib/header/index.d.ts +3 -0
  70. package/lib/icon/icon.d.ts +4 -3
  71. package/lib/layout/index.d.ts +1 -1
  72. package/lib/layout/layout.d.ts +3 -3
  73. package/lib/menu/index.d.ts +12 -0
  74. package/lib/menu/menu.d.ts +10 -0
  75. package/lib/menu/menu.template.d.ts +3 -0
  76. package/lib/menu-item/index.d.ts +3 -0
  77. package/lib/menu-item/menu-item.d.ts +7 -0
  78. package/lib/menu-item/menu-item.template.d.ts +5 -0
  79. package/lib/nav/index.d.ts +2 -0
  80. package/lib/nav/nav.d.ts +3 -0
  81. package/lib/nav/nav.template.d.ts +4 -0
  82. package/lib/nav-disclosure/index.d.ts +4 -0
  83. package/lib/nav-disclosure/nav-disclosure.d.ts +10 -0
  84. package/lib/nav-disclosure/nav-disclosure.template.d.ts +4 -0
  85. package/lib/nav-item/index.d.ts +4 -0
  86. package/lib/{sidenav-item/sidenav-item.d.ts → nav-item/nav-item.d.ts} +2 -2
  87. package/lib/nav-item/nav-item.template.d.ts +4 -0
  88. package/lib/{text → note}/index.d.ts +1 -1
  89. package/lib/note/note.d.ts +10 -0
  90. package/lib/note/note.template.d.ts +5 -0
  91. package/lib/number-field/index.d.ts +4 -0
  92. package/lib/number-field/number-field.d.ts +16 -0
  93. package/lib/number-field/number-field.template.d.ts +4 -0
  94. package/lib/popup/index.d.ts +1 -1
  95. package/lib/popup/popup.d.ts +2 -1
  96. package/lib/progress/progress.d.ts +1 -1
  97. package/lib/progress-ring/progress-ring.d.ts +2 -1
  98. package/lib/radio/index.d.ts +3 -0
  99. package/lib/radio/radio.d.ts +4 -0
  100. package/lib/radio/radio.template.d.ts +4 -0
  101. package/lib/side-drawer/index.d.ts +1 -1
  102. package/lib/side-drawer/side-drawer.d.ts +3 -2
  103. package/lib/text-anchor/text-anchor.d.ts +1 -1
  104. package/lib/text-area/index.d.ts +3 -0
  105. package/lib/text-area/text-area.d.ts +9 -0
  106. package/lib/text-area/text-area.template.d.ts +4 -0
  107. package/lib/text-field/index.d.ts +4 -0
  108. package/lib/text-field/text-field.d.ts +16 -0
  109. package/lib/text-field/text-field.template.d.ts +5 -0
  110. package/lib/tooltip/tooltip.d.ts +2 -2
  111. package/menu/index.js +381 -0
  112. package/menu-item/index.js +19 -0
  113. package/nav/index.js +17 -0
  114. package/nav-disclosure/index.js +88 -0
  115. package/nav-item/index.js +45 -0
  116. package/note/index.js +66 -0
  117. package/number-field/index.js +529 -0
  118. package/package.json +51 -7
  119. package/popup/index.js +23 -2061
  120. package/progress/index.js +35 -28
  121. package/progress-ring/index.js +9 -5
  122. package/radio/index.js +174 -0
  123. package/shared/anchor.js +10 -2
  124. package/shared/aria-global.js +2 -86
  125. package/shared/base-progress.js +5 -0
  126. package/shared/breadcrumb-item.js +1 -1
  127. package/shared/button.js +200 -0
  128. package/shared/calendar-event.js +26 -0
  129. package/shared/dialog-polyfill.esm.js +858 -0
  130. package/shared/enums.js +79 -0
  131. package/shared/es.object.assign.js +7 -6
  132. package/shared/export.js +995 -0
  133. package/shared/focus.js +5 -0
  134. package/shared/focus2.js +11 -0
  135. package/shared/form-associated.js +466 -0
  136. package/shared/form-elements.js +299 -0
  137. package/shared/icon.js +533 -520
  138. package/shared/index.js +71 -55
  139. package/shared/index2.js +110 -13
  140. package/shared/index3.js +35 -0
  141. package/shared/index4.js +86 -0
  142. package/shared/index5.js +2100 -0
  143. package/shared/index6.js +371 -0
  144. package/shared/iterators.js +61 -0
  145. package/shared/key-codes.js +90 -0
  146. package/shared/object-keys.js +13 -0
  147. package/shared/patterns/focus.d.ts +3 -0
  148. package/shared/patterns/form-elements.d.ts +22 -0
  149. package/shared/patterns/index.d.ts +1 -0
  150. package/shared/ref.js +41 -0
  151. package/shared/regexp-flags.js +21 -0
  152. package/shared/start-end.js +50 -0
  153. package/shared/text-anchor.js +2 -11
  154. package/shared/text-anchor.template.js +5 -2
  155. package/shared/to-string.js +51 -0
  156. package/shared/web.dom-collections.iterator.js +78 -1083
  157. package/side-drawer/index.js +44 -23
  158. package/styles/core/all.css +75 -0
  159. package/styles/core/theme.css +11 -0
  160. package/styles/core/typography.css +69 -0
  161. package/styles/fonts/SpeziaCompleteVariableItalicWeb.woff2 +0 -0
  162. package/styles/fonts/SpeziaCompleteVariableUprightWeb.woff2 +0 -0
  163. package/styles/fonts/SpeziaMonoCompleteVariableWeb.woff2 +0 -0
  164. package/styles/fonts/spezia.css +9 -12
  165. package/styles/tokens/theme-dark.css +211 -0
  166. package/styles/tokens/theme-light.css +211 -0
  167. package/text-anchor/index.js +9 -1
  168. package/text-area/index.js +304 -0
  169. package/text-field/index.js +152 -0
  170. package/tooltip/index.js +23 -16
  171. package/lib/text/text.d.ts +0 -10
  172. package/shared/style-inject.es.js +0 -28
  173. package/sidenav-item/index.js +0 -38
  174. package/styles/themes/dark.css +0 -205
  175. package/styles/themes/light.css +0 -205
  176. package/text/index.js +0 -45
@@ -1,205 +0,0 @@
1
- :root, .vvd-theme-main, ::part(vvd-theme-main) {
2
- --vvd-sizing-4px-scale-3xs: 8px;
3
- --vvd-sizing-4px-scale-2xs: 12px;
4
- --vvd-sizing-4px-scale-xs: 16px;
5
- --vvd-sizing-4px-scale-sm: 20px;
6
- --vvd-sizing-4px-scale-md: 24px;
7
- --vvd-sizing-4px-scale-lg: 28px;
8
- --vvd-sizing-4px-scale-xl: 32px;
9
- --vvd-sizing-4px-scale-2xl: 36px;
10
- --vvd-sizing-4px-scale-3xl: 40px;
11
- --vvd-sizing-8px-scale-3xs: 8px;
12
- --vvd-sizing-8px-scale-2xs: 16px;
13
- --vvd-sizing-8px-scale-xs: 24px;
14
- --vvd-sizing-8px-scale-sm: 32px;
15
- --vvd-sizing-8px-scale-md: 40px;
16
- --vvd-sizing-8px-scale-lg: 48px;
17
- --vvd-sizing-8px-scale-xl: 56px;
18
- --vvd-sizing-8px-scale-2xl: 64px;
19
- --vvd-sizing-8px-scale-3xl: 72px;
20
- --vvd-color-surface-0dp: rgba(255, 255, 255, 1);
21
- --vvd-color-surface-2dp: rgba(255, 255, 255, 1);
22
- --vvd-color-surface-4dp: rgba(255, 255, 255, 1);
23
- --vvd-color-surface-8dp: rgba(255, 255, 255, 1);
24
- --vvd-color-surface-12dp: rgba(255, 255, 255, 1);
25
- --vvd-color-surface-16dp: rgba(255, 255, 255, 1);
26
- --vvd-color-surface-24dp: rgba(255, 255, 255, 1);
27
- --vvd-color-canvas: rgb(255,255,255);
28
- --vvd-color-on-canvas: rgb(0,0,0);
29
- --vvd-color-primary: rgb(0,0,0);
30
- --vvd-color-on-primary: rgb(255,255,255);
31
- --vvd-color-neutral: rgb(117,117,117);
32
- --vvd-color-on-neutral: rgb(255,255,255);
33
- --vvd-color-neutral-10: rgb(242,242,242);
34
- --vvd-color-neutral-20: rgb(230,230,230);
35
- --vvd-color-neutral-30: rgb(204,204,204);
36
- --vvd-color-neutral-40: rgb(179,179,179);
37
- --vvd-color-neutral-50: rgb(146,146,146);
38
- --vvd-color-neutral-70: rgb(102,102,102);
39
- --vvd-color-neutral-80: rgb(77,77,77);
40
- --vvd-color-neutral-90: rgb(51,51,51);
41
- --vvd-color-cta: rgb(153,65,255);
42
- --vvd-color-on-cta: rgb(255,255,255);
43
- --vvd-color-cta-10: rgb(245,240,253);
44
- --vvd-color-cta-20: rgb(236,226,250);
45
- --vvd-color-cta-30: rgb(220,193,252);
46
- --vvd-color-cta-70: rgb(135,30,255);
47
- --vvd-color-cta-80: rgb(100,5,209);
48
- --vvd-color-cta-90: rgb(68,2,145);
49
- --vvd-color-success: rgb(28,135,49);
50
- --vvd-color-on-success: rgb(255,255,255);
51
- --vvd-color-success-10: rgb(225,248,229);
52
- --vvd-color-success-20: rgb(207,238,212);
53
- --vvd-color-success-30: rgb(134,224,144);
54
- --vvd-color-success-70: rgb(22,118,41);
55
- --vvd-color-success-80: rgb(21,89,35);
56
- --vvd-color-success-90: rgb(24,58,30);
57
- --vvd-color-alert: rgb(230,29,29);
58
- --vvd-color-on-alert: rgb(255,255,255);
59
- --vvd-color-alert-10: rgb(255,238,242);
60
- --vvd-color-alert-20: rgb(254,223,223);
61
- --vvd-color-alert-30: rgb(255,187,187);
62
- --vvd-color-alert-70: rgb(205,13,13);
63
- --vvd-color-alert-80: rgb(159,2,2);
64
- --vvd-color-alert-90: rgb(110,0,0);
65
- --vvd-color-warning: rgb(250,159,0);
66
- --vvd-color-on-warning: rgb(0,0,0);
67
- --vvd-color-warning-10: rgb(252,245,167);
68
- --vvd-color-warning-20: rgb(253,231,109);
69
- --vvd-color-warning-30: rgb(255,195,33);
70
- --vvd-color-warning-70: rgb(166,76,3);
71
- --vvd-color-warning-80: rgb(128,56,7);
72
- --vvd-color-warning-90: rgb(82,40,1);
73
- --vvd-color-info: rgb(2,118,213);
74
- --vvd-color-on-info: rgb(255,255,255);
75
- --vvd-color-info-10: rgb(232,244,251);
76
- --vvd-color-info-20: rgb(211,233,252);
77
- --vvd-color-info-30: rgb(157,210,254);
78
- --vvd-color-info-70: rgb(14,101,194);
79
- --vvd-color-info-80: rgb(9,74,158);
80
- --vvd-color-info-90: rgb(14,48,109);
81
- --vvd-color-announcement: rgb(214,33,156);
82
- --vvd-color-on-announcement: rgb(255,255,255);
83
- --vvd-color-announcement-10: rgb(255,237,251);
84
- --vvd-color-announcement-20: rgb(255,220,247);
85
- --vvd-color-announcement-30: rgb(248,185,231);
86
- --vvd-color-announcement-70: rgb(187,30,137);
87
- --vvd-color-announcement-80: rgb(143,22,105);
88
- --vvd-color-announcement-90: rgb(98,2,86);
89
- --vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(204, 204, 204, 1)) drop-shadow(0 1px 0 rgba(204, 204, 204, 1)) drop-shadow(0 -1px 0 rgba(204, 204, 204, 1)) drop-shadow(-1px 0 0 rgba(204, 204, 204, 1));
90
- --vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.05));
91
- --vvd-shadow-surface-4dp: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)) drop-shadow(0 4px 2px rgba(0, 0, 0, 0.05));
92
- --vvd-shadow-surface-8dp: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.1)) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.05)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.05));
93
- --vvd-shadow-surface-12dp: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.1)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.05)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.05));
94
- --vvd-shadow-surface-16dp: drop-shadow(0 6px 32px rgba(0, 0, 0, 0.1)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.05)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.05));
95
- --vvd-shadow-surface-24dp: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.2)) drop-shadow(0 24px 32px rgba(0, 0, 0, 0.05)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.05));
96
- }
97
- @supports (color-scheme: light) {
98
- :root, .vvd-theme-main, ::part(vvd-theme-main) {
99
- color-scheme: light;
100
- }
101
- }
102
-
103
- .vvd-theme-alternate, ::part(vvd-theme-alternate) {
104
- --vvd-sizing-4px-scale-3xs: 8px;
105
- --vvd-sizing-4px-scale-2xs: 12px;
106
- --vvd-sizing-4px-scale-xs: 16px;
107
- --vvd-sizing-4px-scale-sm: 20px;
108
- --vvd-sizing-4px-scale-md: 24px;
109
- --vvd-sizing-4px-scale-lg: 28px;
110
- --vvd-sizing-4px-scale-xl: 32px;
111
- --vvd-sizing-4px-scale-2xl: 36px;
112
- --vvd-sizing-4px-scale-3xl: 40px;
113
- --vvd-sizing-8px-scale-3xs: 8px;
114
- --vvd-sizing-8px-scale-2xs: 16px;
115
- --vvd-sizing-8px-scale-xs: 24px;
116
- --vvd-sizing-8px-scale-sm: 32px;
117
- --vvd-sizing-8px-scale-md: 40px;
118
- --vvd-sizing-8px-scale-lg: 48px;
119
- --vvd-sizing-8px-scale-xl: 56px;
120
- --vvd-sizing-8px-scale-2xl: 64px;
121
- --vvd-sizing-8px-scale-3xl: 72px;
122
- --vvd-color-surface-0dp: rgba(13, 13, 13, 1);
123
- --vvd-color-surface-2dp: rgba(28, 28, 28, 1);
124
- --vvd-color-surface-4dp: rgba(32, 32, 32, 1);
125
- --vvd-color-surface-8dp: rgba(37, 37, 37, 1);
126
- --vvd-color-surface-12dp: rgba(42, 42, 42, 1);
127
- --vvd-color-surface-16dp: rgba(47, 47, 47, 1);
128
- --vvd-color-surface-24dp: rgba(52, 52, 52, 1);
129
- --vvd-color-canvas: rgb(13,13,13);
130
- --vvd-color-on-canvas: rgb(255,255,255);
131
- --vvd-color-primary: rgb(255,255,255);
132
- --vvd-color-on-primary: rgb(0,0,0);
133
- --vvd-color-neutral: rgb(146,146,146);
134
- --vvd-color-on-neutral: rgb(0,0,0);
135
- --vvd-color-neutral-10: rgb(26,26,26);
136
- --vvd-color-neutral-20: rgb(51,51,51);
137
- --vvd-color-neutral-30: rgb(77,77,77);
138
- --vvd-color-neutral-40: rgb(102,102,102);
139
- --vvd-color-neutral-50: rgb(117,117,117);
140
- --vvd-color-neutral-70: rgb(179,179,179);
141
- --vvd-color-neutral-80: rgb(204,204,204);
142
- --vvd-color-neutral-90: rgb(230,230,230);
143
- --vvd-color-cta: rgb(178,123,242);
144
- --vvd-color-on-cta: rgb(0,0,0);
145
- --vvd-color-cta-10: rgb(38,4,77);
146
- --vvd-color-cta-20: rgb(68,2,145);
147
- --vvd-color-cta-30: rgb(100,5,209);
148
- --vvd-color-cta-70: rgb(203,161,250);
149
- --vvd-color-cta-80: rgb(220,193,252);
150
- --vvd-color-cta-90: rgb(236,226,250);
151
- --vvd-color-success: rgb(48,168,73);
152
- --vvd-color-on-success: rgb(0,0,0);
153
- --vvd-color-success-10: rgb(10,30,17);
154
- --vvd-color-success-20: rgb(24,58,30);
155
- --vvd-color-success-30: rgb(21,89,35);
156
- --vvd-color-success-70: rgb(83,202,106);
157
- --vvd-color-success-80: rgb(134,224,144);
158
- --vvd-color-success-90: rgb(207,238,212);
159
- --vvd-color-alert: rgb(247,89,89);
160
- --vvd-color-on-alert: rgb(0,0,0);
161
- --vvd-color-alert-10: rgb(62,0,4);
162
- --vvd-color-alert-20: rgb(110,0,0);
163
- --vvd-color-alert-30: rgb(159,2,2);
164
- --vvd-color-alert-70: rgb(254,150,150);
165
- --vvd-color-alert-80: rgb(255,187,187);
166
- --vvd-color-alert-90: rgb(254,223,223);
167
- --vvd-color-warning: rgb(224,121,2);
168
- --vvd-color-on-warning: rgb(0,0,0);
169
- --vvd-color-warning-10: rgb(42,21,2);
170
- --vvd-color-warning-20: rgb(82,40,1);
171
- --vvd-color-warning-30: rgb(128,56,7);
172
- --vvd-color-warning-70: rgb(250,159,0);
173
- --vvd-color-warning-80: rgb(255,195,33);
174
- --vvd-color-warning-90: rgb(253,231,109);
175
- --vvd-color-info: rgb(41,151,240);
176
- --vvd-color-on-info: rgb(0,0,0);
177
- --vvd-color-info-10: rgb(7,25,57);
178
- --vvd-color-info-20: rgb(14,48,109);
179
- --vvd-color-info-30: rgb(9,74,158);
180
- --vvd-color-info-70: rgb(101,186,255);
181
- --vvd-color-info-80: rgb(157,210,254);
182
- --vvd-color-info-90: rgb(211,233,252);
183
- --vvd-color-announcement: rgb(229,96,187);
184
- --vvd-color-on-announcement: rgb(0,0,0);
185
- --vvd-color-announcement-10: rgb(50,8,44);
186
- --vvd-color-announcement-20: rgb(98,2,86);
187
- --vvd-color-announcement-30: rgb(143,22,105);
188
- --vvd-color-announcement-70: rgb(251,143,216);
189
- --vvd-color-announcement-80: rgb(248,185,231);
190
- --vvd-color-announcement-90: rgb(255,220,247);
191
- --vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(77, 77, 77, 1)) drop-shadow(0 1px 0 rgba(77, 77, 77, 1)) drop-shadow(0 -1px 0 rgba(77, 77, 77, 1)) drop-shadow(-1px 0 0 rgba(77, 77, 77, 1));
192
- --vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
193
- --vvd-shadow-surface-4dp: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
194
- --vvd-shadow-surface-8dp: drop-shadow(0 2px 16px rgba(19, 20, 21, 0.25)) drop-shadow(0 8px 8px rgba(19, 20, 21, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
195
- --vvd-shadow-surface-12dp: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.25)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.25)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25));
196
- --vvd-shadow-surface-16dp: drop-shadow(0 6px 32px rgba(0, 0, 0, 0.25)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
197
- --vvd-shadow-surface-24dp: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.25)) drop-shadow(0 24px 32px rgba(0, 0, 0, 0.25)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.25));
198
- }
199
- @supports (color-scheme: dark) {
200
- .vvd-theme-alternate, ::part(vvd-theme-alternate) {
201
- color-scheme: dark;
202
- }
203
- }
204
-
205
- /*# sourceMappingURL=light.css.map */
package/text/index.js DELETED
@@ -1,45 +0,0 @@
1
- import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
2
- import { s as styleInject } from '../shared/style-inject.es.js';
3
- import '../shared/web.dom-collections.iterator.js';
4
- import { c as classNames } from '../shared/class-names.js';
5
-
6
- var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control:not(.tight):not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1:not(.tight), .control.font-face-body-1-bold:not(.tight), .control.font-face-body-1-code:not(.tight), .control.font-face-body-1-link:not(.tight), .control.font-face-body-2:not(.tight), .control.font-face-body-2-bold:not(.tight), .control.font-face-body-2-code:not(.tight), .control.font-face-body-2-link:not(.tight), .control.font-face-subtitle-1:not(.tight), .control.font-face-subtitle-2:not(.tight), .control.font-face-title-1:not(.tight), .control.font-face-title-2:not(.tight), .control.font-face-headline-1:not(.tight), .control.font-face-headline-2:not(.tight) {\n display: block;\n margin: var(--font-face-margin, 0);\n}\n\n.control {\n color: var(--connotation);\n}\n.control.font-face-body-1 {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-bold {\n font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-code {\n font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-link {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-body-2 {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-bold {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-code {\n font: 400 ultra-condensed 14px / 20px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-link {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-button {\n font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-button-dense {\n font: 600 ultra-condensed 12px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-button-enlarge {\n font: 600 ultra-condensed 16px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-bold {\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-code {\n font: 400 ultra-condensed 12px / 16px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-link {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-headline-1 {\n font: 500 condensed 66px / 88px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-headline-2 {\n font: 500 condensed 52px / 68px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-subtitle-1 {\n font: 500 condensed 26px / 36px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-subtitle-2 {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-title-1 {\n font: 500 condensed 40px / 52px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-title-2 {\n font: 500 condensed 32px / 44px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2) {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.connotation-primary {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n}\n\n.control.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n}\n\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n}\n\n.control.connotation-announcement {\n --connotation: var(--vvd-color-announcement);\n --on-connotation: var(--vvd-color-on-announcement);\n}\n\n.control.connotation-info {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n}\n\n.control.font-face-headline-1, .control.font-face-headline-2 {\n --font-face-margin: 2.5rem 0;\n}\n.control.font-face-title-1, .control.font-face-title-2 {\n --font-face-margin: 2rem 0;\n}\n.control.font-face-subtitle-1, .control.font-face-subtitle-2 {\n --font-face-margin: 1.5rem 0;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1, .control.font-face-body-1-bold, .control.font-face-body-1-code, .control.font-face-body-1-link, .control.font-face-body-2, .control.font-face-body-2-bold, .control.font-face-body-2-code, .control.font-face-body-2-link {\n --font-face-margin: 1rem 0;\n}\n\n::slotted(:where(h1, h2, h3, h4, h5, h6, p)) {\n margin: initial;\n}\n\n::slotted(*) {\n color: inherit;\n font: inherit;\n}";
7
- styleInject(css_248z);
8
-
9
- class Text extends FoundationElement {
10
- constructor() {
11
- super(...arguments);
12
- this.tight = false;
13
- }
14
-
15
- }
16
-
17
- __decorate([attr, __metadata("design:type", String)], Text.prototype, "connotation", void 0);
18
-
19
- __decorate([attr({
20
- attribute: 'font-face'
21
- }), __metadata("design:type", String)], Text.prototype, "fontFace", void 0);
22
-
23
- __decorate([attr({
24
- mode: 'boolean'
25
- }), __metadata("design:type", Object)], Text.prototype, "tight", void 0);
26
-
27
- let _ = t => t,
28
- _t;
29
-
30
- const getClasses = ({
31
- connotation,
32
- fontFace,
33
- tight
34
- }) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`font-face-${fontFace}`, Boolean(fontFace)], ['tight', tight]);
35
-
36
- const TextTemplate = () => html(_t || (_t = _`<slot class="${0}"></slot>`), getClasses);
37
-
38
- const vividText = Text.compose({
39
- baseName: 'text',
40
- template: TextTemplate,
41
- styles: css_248z
42
- });
43
- designSystem.register(vividText());
44
-
45
- export { vividText };