@volverjs/style 0.1.2-beta.9 → 0.1.3

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 (190) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +53 -46
  3. package/dist/components/vv-accordion-group.css +1 -0
  4. package/dist/components/vv-accordion.css +1 -1
  5. package/dist/components/vv-alert.css +1 -0
  6. package/dist/components/vv-avatar.css +1 -0
  7. package/dist/components/vv-badge.css +1 -1
  8. package/dist/components/vv-breadcrumb.css +1 -1
  9. package/dist/components/vv-button-group.css +1 -1
  10. package/dist/components/vv-button.css +1 -1
  11. package/dist/components/vv-card.css +1 -1
  12. package/dist/components/vv-checkbox-group.css +1 -0
  13. package/dist/components/vv-checkbox.css +1 -0
  14. package/dist/components/vv-dialog.css +1 -1
  15. package/dist/components/vv-dropdown.css +1 -1
  16. package/dist/components/vv-input-text.css +1 -1
  17. package/dist/components/vv-nav.css +1 -1
  18. package/dist/components/vv-progress.css +1 -1
  19. package/dist/components/vv-radio-group.css +1 -0
  20. package/dist/components/vv-radio.css +1 -0
  21. package/dist/components/vv-select.css +1 -1
  22. package/dist/components/vv-skeleton.css +1 -0
  23. package/dist/components/vv-tab.css +1 -0
  24. package/dist/components/vv-table.css +1 -1
  25. package/dist/components/vv-text.css +1 -1
  26. package/dist/components/vv-textarea.css +1 -1
  27. package/dist/components/vv-toast.css +1 -0
  28. package/dist/components/vv-tooltip.css +1 -0
  29. package/dist/components.css +1 -1
  30. package/dist/export.css +1 -1
  31. package/dist/props/background.css +1 -1
  32. package/dist/props/breakpoints.css +1 -0
  33. package/dist/props/colors.css +1 -1
  34. package/dist/props/effects.css +1 -1
  35. package/dist/props/filters.css +1 -1
  36. package/dist/props/input.css +1 -1
  37. package/dist/props/layout.css +1 -1
  38. package/dist/props/spacing.css +1 -1
  39. package/dist/props/transitions.css +1 -0
  40. package/dist/props.css +1 -1
  41. package/dist/themes/dark/components.css +1 -1
  42. package/dist/themes/dark/props.css +1 -1
  43. package/dist/themes/dark/volver.css +1 -1
  44. package/dist/utilities/backgrounds.css +1 -1
  45. package/dist/utilities/borders.css +1 -1
  46. package/dist/utilities/colors.css +1 -1
  47. package/dist/utilities/effects.css +1 -1
  48. package/dist/utilities/filters.css +1 -1
  49. package/dist/utilities/flexbox.css +1 -1
  50. package/dist/utilities/interactivity.css +1 -0
  51. package/dist/utilities/layout.css +1 -1
  52. package/dist/utilities/sizing.css +1 -1
  53. package/dist/utilities/spacing.css +1 -1
  54. package/dist/utilities/tables.css +1 -0
  55. package/dist/utilities/transforms.css +1 -0
  56. package/dist/utilities/transitions.css +1 -0
  57. package/dist/utilities/typography.css +1 -1
  58. package/dist/utilities.css +1 -1
  59. package/dist/volver.css +1 -1
  60. package/package.json +62 -36
  61. package/src/_config.scss +18 -11
  62. package/src/_context.scss +3 -3
  63. package/src/_preflight.scss +308 -247
  64. package/src/components/index.scss +26 -19
  65. package/src/components/vv-accordion-group.scss +13 -0
  66. package/src/components/vv-accordion.scss +3 -2
  67. package/src/components/vv-alert.scss +13 -0
  68. package/src/components/vv-avatar.scss +13 -0
  69. package/src/components/vv-badge.scss +3 -2
  70. package/src/components/vv-breadcrumb.scss +3 -2
  71. package/src/components/vv-button-group.scss +11 -10
  72. package/src/components/vv-button.scss +5 -8
  73. package/src/components/vv-card.scss +3 -2
  74. package/src/components/vv-checkbox-group.scss +13 -0
  75. package/src/components/{vv-input-checkbox.scss → vv-checkbox.scss} +7 -6
  76. package/src/components/vv-dialog.scss +3 -2
  77. package/src/components/vv-dropdown.scss +3 -2
  78. package/src/components/vv-input-text.scss +6 -5
  79. package/src/components/vv-nav.scss +3 -2
  80. package/src/components/vv-progress.scss +3 -2
  81. package/src/components/vv-radio-group.scss +13 -0
  82. package/src/components/{vv-input-radio.scss → vv-radio.scss} +6 -5
  83. package/src/components/vv-select.scss +6 -5
  84. package/src/components/vv-skeleton.scss +14 -0
  85. package/src/components/vv-tab.scss +13 -0
  86. package/src/components/vv-table.scss +3 -2
  87. package/src/components/vv-text.scss +3 -2
  88. package/src/components/vv-textarea.scss +6 -5
  89. package/src/components/vv-toast.scss +13 -0
  90. package/src/components/vv-tooltip.scss +33 -0
  91. package/src/export.scss +138 -27
  92. package/src/props/background.scss +1 -1
  93. package/src/props/borders.scss +1 -1
  94. package/src/props/breakpoints.scss +15 -0
  95. package/src/props/colors.scss +1 -1
  96. package/src/props/effects.scss +2 -1
  97. package/src/props/filters.scss +2 -1
  98. package/src/props/index.scss +13 -12
  99. package/src/props/input.scss +1 -1
  100. package/src/props/layout.scss +1 -1
  101. package/src/props/media.scss +1 -1
  102. package/src/props/sizing.scss +1 -1
  103. package/src/props/spacing.scss +2 -2
  104. package/src/props/{animation.scss → transitions.scss} +53 -2
  105. package/src/props/typography.scss +2 -2
  106. package/src/settings/_background.scss +6 -1
  107. package/src/settings/_breakpoints.scss +2 -0
  108. package/src/settings/_colors.scss +23 -4
  109. package/src/settings/_effects.scss +47 -2
  110. package/src/settings/_filters.scss +9 -0
  111. package/src/settings/_index.scss +43 -33
  112. package/src/settings/_input.scss +8 -6
  113. package/src/settings/_interactivity.scss +39 -0
  114. package/src/settings/_layout.scss +30 -10
  115. package/src/settings/_spacing.scss +1 -0
  116. package/src/settings/_tables.scss +11 -0
  117. package/src/settings/_transforms.scss +50 -0
  118. package/src/settings/_transitions.scss +44 -0
  119. package/src/settings/components/_vv-accordion-group.scss +5 -0
  120. package/src/settings/components/_vv-accordion.scss +49 -34
  121. package/src/settings/components/_vv-alert.scss +161 -0
  122. package/src/settings/components/_vv-avatar.scss +55 -0
  123. package/src/settings/components/_vv-badge.scss +43 -11
  124. package/src/settings/components/_vv-breadcrumb.scss +23 -15
  125. package/src/settings/components/_vv-button-group.scss +4 -0
  126. package/src/settings/components/_vv-button.scss +31 -26
  127. package/src/settings/components/_vv-card.scss +2 -2
  128. package/src/settings/components/{_vv-input-checkbox-group.scss → _vv-checkbox-group.scss} +2 -1
  129. package/src/settings/components/{_vv-input-checkbox.scss → _vv-checkbox.scss} +47 -12
  130. package/src/settings/components/_vv-dialog.scss +72 -90
  131. package/src/settings/components/_vv-input-text.scss +89 -43
  132. package/src/settings/components/_vv-nav.scss +98 -13
  133. package/src/settings/components/_vv-progress.scss +1 -1
  134. package/src/settings/components/_vv-radio-group.scss +3 -0
  135. package/src/settings/components/{_vv-input-radio.scss → _vv-radio.scss} +35 -6
  136. package/src/settings/components/_vv-select.scss +39 -48
  137. package/src/settings/components/_vv-skeleton.scss +22 -0
  138. package/src/settings/components/_vv-tab.scss +16 -0
  139. package/src/settings/components/_vv-table.scss +8 -1
  140. package/src/settings/components/_vv-text.scss +20 -0
  141. package/src/settings/components/_vv-textarea.scss +53 -28
  142. package/src/settings/components/_vv-toast.scss +259 -0
  143. package/src/settings/components/_vv-tooltip.scss +74 -0
  144. package/src/themes/dark/_context.scss +7 -4
  145. package/src/themes/dark/components/_vv-button.scss +2 -4
  146. package/src/themes/dark/components/index.scss +1 -2
  147. package/src/themes/dark/props/_background.scss +1 -1
  148. package/src/themes/dark/props/_colors.scss +1 -1
  149. package/src/themes/dark/props/_input.scss +15 -0
  150. package/src/themes/dark/props/index.scss +3 -2
  151. package/src/themes/dark/settings/_background.scss +5 -0
  152. package/src/themes/dark/settings/_colors.scss +22 -2
  153. package/src/themes/dark/settings/_index.scss +4 -4
  154. package/src/themes/dark/settings/_input.scss +8 -0
  155. package/src/themes/dark/settings/components/_vv-button.scss +9 -9
  156. package/src/themes/dark/volver.scss +2 -2
  157. package/src/tools/_breakpoints.scss +7 -7
  158. package/src/tools/_functions.scss +95 -37
  159. package/src/tools/_index.scss +3 -3
  160. package/src/tools/_mixins.scss +166 -35
  161. package/src/utilities/backgrounds.scss +15 -8
  162. package/src/utilities/borders.scss +22 -9
  163. package/src/utilities/colors.scss +9 -5
  164. package/src/utilities/effects.scss +23 -5
  165. package/src/utilities/filters.scss +15 -4
  166. package/src/utilities/flexbox.scss +15 -8
  167. package/src/utilities/grid.scss +17 -9
  168. package/src/utilities/index.scss +15 -12
  169. package/src/utilities/interactivity.scss +10 -0
  170. package/src/utilities/layout.scss +45 -28
  171. package/src/utilities/sizing.scss +23 -26
  172. package/src/utilities/spacing.scss +1 -1
  173. package/src/utilities/tables.scss +15 -0
  174. package/src/utilities/transforms.scss +111 -0
  175. package/src/utilities/transitions.scss +47 -0
  176. package/src/utilities/typography.scss +34 -17
  177. package/src/volver.scss +4 -4
  178. package/dist/components/vv-input-checkbox-group.css +0 -1
  179. package/dist/components/vv-input-checkbox.css +0 -1
  180. package/dist/components/vv-input-radio-group.css +0 -1
  181. package/dist/components/vv-input-radio.css +0 -1
  182. package/dist/props/animation.css +0 -1
  183. package/dist/utilities/animation.css +0 -1
  184. package/src/components/vv-input-checkbox-group.scss +0 -12
  185. package/src/components/vv-input-radio-group.scss +0 -12
  186. package/src/settings/_animation.scss +0 -9
  187. package/src/settings/components/_vv-input-radio-group.scss +0 -1
  188. package/src/themes/dark/components/_vv-input-checkbox.scss +0 -24
  189. package/src/themes/dark/settings/components/_vv-input-checkbox.scss +0 -26
  190. package/src/utilities/animation.scss +0 -8
package/LICENSE CHANGED
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
18
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
19
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
20
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,11 +1,11 @@
1
1
  <div align="center">
2
-
2
+
3
3
  [![volverjs](public/volverjs.svg)](https://volverjs.github.io/style)
4
4
 
5
5
  ## @volverjs/style
6
6
 
7
- `backgrounds` `border` `colors` `aspect ratios` `typography`
8
- `easings` `animations` `sizes` `borders` `z-indexes` `media-queries`
7
+ `backgrounds` `border` `colors` `aspect ratios` `typography`\
8
+ `easings` `animations` `sizes` `borders` `z-indexes` `media-queries`\
9
9
  `layout` `spacing` `flexbox` `grid` `custom properties` `scss`
10
10
 
11
11
  <br>
@@ -22,8 +22,15 @@
22
22
 
23
23
  ## Install
24
24
 
25
- ```
26
- $ npm i -s @volverjs/style
25
+ ```bash
26
+ # pnpm
27
+ pnpm add @volverjs/style
28
+
29
+ # yarn
30
+ yarn add @volverjs/style
31
+
32
+ # npm
33
+ npm install @volverjs/style --save
27
34
  ```
28
35
 
29
36
  ## Usage
@@ -33,7 +40,7 @@ $ npm i -s @volverjs/style
33
40
  @import '@volverjs/style';
34
41
 
35
42
  /* scss */
36
- @import '@volverjs/style/scss';
43
+ @use '@volverjs/style/scss';
37
44
  ```
38
45
 
39
46
  or cherry pick what you want
@@ -46,17 +53,17 @@ or cherry pick what you want
46
53
  @import '@volverjs/style/components/vv-button';
47
54
 
48
55
  /* scss */
49
- @import '@volverjs/style/scss/reset';
50
- @import '@volverjs/style/scss/props/layout';
51
- @import '@volverjs/style/scss/utilities/layout';
52
- @import '@volverjs/style/scss/components/vv-button';
56
+ @use '@volverjs/style/scss/reset';
57
+ @use '@volverjs/style/scss/props/layout';
58
+ @use '@volverjs/style/scss/utilities/layout';
59
+ @use '@volverjs/style/scss/components/vv-button';
53
60
  ```
54
61
 
55
62
  ## Principles
56
63
 
57
64
  ### 👌 Zero Specificity
58
65
 
59
- Everything is defined with _:where()_ so you can override all definitions easily.
66
+ Everything is defined with *:where()* so you can override all definitions easily.
60
67
 
61
68
  ### 🎨 Custom properties
62
69
 
@@ -64,7 +71,7 @@ All attributes have a [custom properties](https://developer.mozilla.org/en-US/do
64
71
 
65
72
  ### 😱 Utility-first + BEM
66
73
 
67
- You can style utility-first (with [tailwindcss](https://tailwindcss.com) syntax) or use components (_vv-\*_ for ex. _vv-button_) written with [BEM](http://getbem.com/introduction/).
74
+ You can style utility-first (with [tailwindcss](https://tailwindcss.com) syntax) or use components (*vv-\** for ex. *vv-button*) written with [BEM](http://getbem.com/introduction/).
68
75
 
69
76
  ## Basic personalization
70
77
 
@@ -75,63 +82,63 @@ You can style utility-first (with [tailwindcss](https://tailwindcss.com) syntax)
75
82
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans');
76
83
 
77
84
  :root {
78
- /* custom color brand */
79
- --color-brand-hue: 149deg;
80
- --color-brand-saturation: 56%;
81
- --color-brand-lightness: 53%;
85
+ /* custom color brand */
86
+ --color-brand-hue: 149deg;
87
+ --color-brand-saturation: 56%;
88
+ --color-brand-lightness: 53%;
82
89
 
83
- /* custom font sans */
84
- --font-sans: 'Open Sans', sans-serif;
90
+ /* custom font sans */
91
+ --font-sans: 'Open Sans', sans-serif;
85
92
  }
86
93
  ```
87
94
 
88
95
  ### SCSS
89
96
 
90
97
  ```scss
91
- /* custom color brand */
92
- $color-brand: #45cb85;
93
-
94
- /* custom font sans */
95
- $font-sans: 'Open Sans', sans-serif;
98
+ @use '@volverjs/style/scss/context' with (
99
+ // custom color brand
100
+ $color-brand: #45cb85,
101
+ //custom font sans
102
+ $font-family-sans: 'Open Sans', sans-serif
103
+ );
104
+ @use '@volverjs/style/scss';
96
105
 
97
- @import '@volverjs/style';
98
106
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans');
99
107
  ```
100
108
 
101
109
  ## Deep override
102
110
 
103
111
  All components are written through SCSS maps.
104
- Root attributes style the component, submaps _state_, _element_, and _modifier_ generates BEM selectors.
112
+ Root attributes style the component, submaps *state*, *element*, and *modifier* generates BEM selectors.
105
113
 
106
114
  ```scss
107
115
  @use 'sass:map';
108
116
  // import volverjs default settings, functions and mixins
109
- @import '@volverjs/style/scss/context';
117
+ @use '@volverjs/style/scss/context';
110
118
 
111
119
  // override vv-button map
112
- $vv-button: map.deep-merge(
113
- $vv-button,
114
- (
115
- // change default button background
116
- background: #ddd,
117
- state: (
118
- hover: (
119
- // change default button background on hover
120
- background: #aaa,
121
- ),
122
- ),
123
- modifier: (
124
- // add a custom modifier
125
- my-error:
126
- (
127
- background: red,
128
- )
129
- )
130
- )
120
+ context.$vv-button: map.deep-merge(
121
+ context.$vv-button,
122
+ (
123
+ // change default button background
124
+ background: #ddd,
125
+ state: (
126
+ hover: (
127
+ // change default button background on hover
128
+ background: #aaa
129
+ )
130
+ ),
131
+ modifier: (
132
+ // add a custom modifier
133
+ my-error: (
134
+ background: red
135
+ )
136
+ )
137
+ )
131
138
  );
132
139
 
133
140
  // import volverjs style
134
- @import '@volverjs/style/scss';
141
+ @use '@volverjs/style/scss';
135
142
  ```
136
143
 
137
144
  ```html
package/dist/components/vv-accordion-group.css ADDED
@@ -0,0 +1 @@
1
+ :where(:host,:root,.theme){--vv-accordion-group-display: flex;--vv-accordion-group-flex-direction: column;--vv-accordion-group-gap: var(--spacing-sm)}:where(.vv-accordion-group){display:var(--vv-accordion-group-display);flex-direction:var(--vv-accordion-group-flex-direction);gap:var(--vv-accordion-group-gap)}
package/dist/components/vv-accordion.css CHANGED
@@ -1 +1 @@
1
- :where(:host,:root,.theme){--vv-accordion-element-summary-position: relative;--vv-accordion-element-summary-cursor: pointer;--vv-accordion-element-summary-line-height: var(--leading-normal);--vv-accordion-element-summary-color: var(--color-word-2);--vv-accordion-element-summary-will-change: background-color;--vv-accordion-element-summary-transition: background-color .3s ease-in-out;--vv-accordion-element-summary-font-size: var(--text-sm);--vv-accordion-element-summary-pseudo-before-display: block;--vv-accordion-element-summary-pseudo-before-position: absolute;--vv-accordion-element-summary-pseudo-before-width: calc(var(--leading-normal) * 1em);--vv-accordion-element-summary-pseudo-before-height: calc(var(--leading-normal) * 1em);--vv-accordion-element-summary-pseudo-before-background-image: var(--bg-chevron);--vv-accordion-element-summary-pseudo-before-background-position: center;--vv-accordion-element-summary-pseudo-before-background-size: 1em;--vv-accordion-element-summary-pseudo-before-background-repeat: no-repeat;--vv-accordion-element-summary-pseudo-before-will-change: transform;--vv-accordion-element-summary-pseudo-before-transition: transform .3s ease-in-out;--vv-accordion-element-summary-pseudo-before-transform: rotate(-90deg);--vv-accordion-element-summary-pseudo-marker-display: none;--vv-accordion-element-summary-pseudo--webkit-details-marker-display: none;--vv-accordion-element-content-padding-block: var(--spacing-sm);--vv-accordion-state-open-element-summary-pseudo-before-transform: rotate(0);--vv-accordion-modifier-marker-right-element-summary-pseudo-before-left: auto;--vv-accordion-modifier-marker-right-element-summary-pseudo-before-transform: rotate(0def);--vv-accordion-modifier-marker-right-state-open-element-summary-pseudo-before-transform: rotate(-180deg);--vv-accordion-modifier-bordered-border-bottom: var(--border) solid var(--color-surface-2);--vv-accordion-modifier-bordered-element-summary-state-hover-background-color: var(--color-surface-1);--vv-accordion-modifier-bordered-state-open-element-summary-background-color: var(--color-surface-2)}:where(.vv-accordion){--accordion-marker-size: calc(var(--spacing-sm) + var(--leading-normal) * 1em);--accordion-padding-top: 0px;--accordion-padding-right: 0px;--accordion-padding-bottom: 0px;--accordion-padding-left: 0px}:where(.vv-accordion__summary,.vv-accordion > summary){position:var(--vv-accordion-element-summary-position);cursor:var(--vv-accordion-element-summary-cursor);padding-top:var(--accordion-padding-top);padding-right:var(--accordion-padding-right);padding-bottom:var(--accordion-padding-bottom);padding-left:calc(var(--accordion-padding-left) + var(--accordion-marker-size));line-height:var(--vv-accordion-element-summary-line-height);color:var(--vv-accordion-element-summary-color);will-change:var(--vv-accordion-element-summary-will-change);transition:var(--vv-accordion-element-summary-transition);font-size:var(--vv-accordion-element-summary-font-size)}:where(.vv-accordion__summary,.vv-accordion > summary):before{content:"";display:var(--vv-accordion-element-summary-pseudo-before-display);position:var(--vv-accordion-element-summary-pseudo-before-position);top:var(--accordion-padding-top);left:var(--accordion-padding-left);width:var(--vv-accordion-element-summary-pseudo-before-width);height:var(--vv-accordion-element-summary-pseudo-before-height);background-image:var(--vv-accordion-element-summary-pseudo-before-background-image);background-position:var(--vv-accordion-element-summary-pseudo-before-background-position);background-size:var(--vv-accordion-element-summary-pseudo-before-background-size);background-repeat:var(--vv-accordion-element-summary-pseudo-before-background-repeat);will-change:var(--vv-accordion-element-summary-pseudo-before-will-change);transition:var(--vv-accordion-element-summary-pseudo-before-transition);transform:var(--vv-accordion-element-summary-pseudo-before-transform)}:where(.vv-accordion__summary,.vv-accordion > summary)::marker{content:"";display:var(--vv-accordion-element-summary-pseudo-marker-display)}:where(.vv-accordion__summary,.vv-accordion > summary)::-webkit-details-marker{content:"";display:var(--vv-accordion-element-summary-pseudo--webkit-details-marker-display)}:where(.vv-accordion__content,.vv-accordion > summary + *){padding-block:var(--vv-accordion-element-content-padding-block);padding-inline:var(--accordion-padding-left) var(--accordion-padding-right)}:where(.vv-accordion--open .vv-accordion__summary,.vv-accordion.open .vv-accordion__summary,.vv-accordion[open] .vv-accordion__summary,.vv-accordion--open > summary,.vv-accordion.open > summary,.vv-accordion[open] > summary):before{content:"";transform:var(--vv-accordion-state-open-element-summary-pseudo-before-transform)}:where(.vv-accordion--marker-right .vv-accordion__summary,.vv-accordion--marker-right > summary){padding-right:calc(var(--accordion-padding-right) + var(--accordion-marker-size));padding-left:var(--accordion-padding-left)}:where(.vv-accordion--marker-right .vv-accordion__summary,.vv-accordion--marker-right > summary):before{content:"";left:var(--vv-accordion-modifier-marker-right-element-summary-pseudo-before-left);right:var(--accordion-padding-right);transform:var(--vv-accordion-modifier-marker-right-element-summary-pseudo-before-transform)}:where(.vv-accordion--marker-right.vv-accordion--open .vv-accordion__summary,.vv-accordion--marker-right.vv-accordion.open .vv-accordion__summary,.vv-accordion--marker-right.vv-accordion[open] .vv-accordion__summary,.vv-accordion--marker-right.vv-accordion--open > summary,.vv-accordion--marker-right.vv-accordion.open > summary,.vv-accordion--marker-right.vv-accordion[open] > summary):before{content:"";transform:var(--vv-accordion-modifier-marker-right-state-open-element-summary-pseudo-before-transform)}:where(.vv-accordion--bordered.vv-accordion){--accordion-padding-top: var(--spacing-sm);--accordion-padding-right: var(--spacing-sm);--accordion-padding-bottom: var(--spacing-sm);--accordion-padding-left: var(--spacing-sm);border-bottom:var(--vv-accordion-modifier-bordered-border-bottom)}:where(.vv-accordion--bordered .vv-accordion__summary--hover,.vv-accordion--bordered .vv-accordion__summary.hover,.vv-accordion--bordered > summary.hover,.vv-accordion--bordered .vv-accordion__summary:not([disabled]):hover,.vv-accordion--bordered > summary:not([disabled]):hover){background-color:var(--vv-accordion-modifier-bordered-element-summary-state-hover-background-color)}:where(.vv-accordion--bordered.vv-accordion--open .vv-accordion__summary,.vv-accordion--bordered.vv-accordion.open .vv-accordion__summary,.vv-accordion--bordered.vv-accordion[open] .vv-accordion__summary,.vv-accordion--bordered.vv-accordion--open > summary,.vv-accordion--bordered.vv-accordion.open > summary,.vv-accordion--bordered.vv-accordion[open] > summary){background-color:var(--vv-accordion-modifier-bordered-state-open-element-summary-background-color)}
1
+ :where(:host,:root,.theme){--vv-accordion-overflow: hidden;--vv-accordion-state-open-element-summary-background-color: var(--color-surface-2);--vv-accordion-state-open-element-summary-pseudo-before-transform: rotate(0);--vv-accordion-state-disabled-element-summary-cursor: not-allowed;--vv-accordion-state-disabled-element-summary-pointer-events: none;--vv-accordion-state-disabled-element-summary-opacity: var(--opacity-50);--vv-accordion-element-summary-position: relative;--vv-accordion-element-summary-cursor: pointer;--vv-accordion-element-summary-line-height: var(--leading-normal);--vv-accordion-element-summary-color: var(--color-word-2);--vv-accordion-element-summary-will-change: background-color;--vv-accordion-element-summary-transition: var(--transition-colors);--vv-accordion-element-summary-font-size: var(--text-sm);--vv-accordion-element-summary-border-radius: var(--rounded-lg);--vv-accordion-element-summary--webkit-tap-highlight-color: transparent;--vv-accordion-element-summary-outline: none;--vv-accordion-element-summary-pseudo-before-display: block;--vv-accordion-element-summary-pseudo-before-position: absolute;--vv-accordion-element-summary-pseudo-before-width: calc(var(--leading-normal) * 1em);--vv-accordion-element-summary-pseudo-before-height: calc(var(--leading-normal) * 1em);--vv-accordion-element-summary-pseudo-before-background-image: var(--bg-chevron);--vv-accordion-element-summary-pseudo-before-background-position: center;--vv-accordion-element-summary-pseudo-before-background-size: 1em;--vv-accordion-element-summary-pseudo-before-background-repeat: no-repeat;--vv-accordion-element-summary-pseudo-before-will-change: transform;--vv-accordion-element-summary-pseudo-before-transition: var(--transition-transform);--vv-accordion-element-summary-pseudo-before-transform: rotate(-90deg);--vv-accordion-element-summary-pseudo-marker-display: none;--vv-accordion-element-summary-pseudo--webkit-details-marker-display: none;--vv-accordion-element-summary-state-hover-background-color: var(--color-surface-1);--vv-accordion-element-summary-state-focus-visible-background-color: var(--color-surface-1);--vv-accordion-element-content-padding-block: var(--spacing-sm);--vv-accordion-modifier-marker-right-element-summary-pseudo-before-left: auto;--vv-accordion-modifier-marker-right-element-summary-pseudo-before-transform: rotate(0def);--vv-accordion-modifier-marker-right-state-open-element-summary-pseudo-before-transform: rotate(-180deg);--vv-accordion-modifier-bordered-border: var(--border) solid var(--color-surface-4);--vv-accordion-modifier-bordered-border-radius: var(--rounded-lg);--vv-accordion-modifier-bordered-state-open-element-summary-border-bottom-right-radius: 0;--vv-accordion-modifier-bordered-state-open-element-summary-border-bottom-left-radius: 0}:where(.vv-accordion){--accordion-marker-size: calc(var(--spacing-sm) + var(--leading-normal) * 1em);--accordion-padding-top: var(--spacing-xs);--accordion-padding-right: var(--spacing-xs);--accordion-padding-bottom: var(--spacing-xs);--accordion-padding-left: var(--spacing-xs);overflow:var(--vv-accordion-overflow)}:where(.vv-accordion__summary,.vv-accordion > summary){position:var(--vv-accordion-element-summary-position);cursor:var(--vv-accordion-element-summary-cursor);padding-top:var(--accordion-padding-top);padding-right:var(--accordion-padding-right);padding-bottom:var(--accordion-padding-bottom);padding-left:calc(var(--accordion-padding-left) + var(--accordion-marker-size));line-height:var(--vv-accordion-element-summary-line-height);color:var(--vv-accordion-element-summary-color);will-change:var(--vv-accordion-element-summary-will-change);transition:var(--vv-accordion-element-summary-transition);font-size:var(--vv-accordion-element-summary-font-size);border-radius:var(--vv-accordion-element-summary-border-radius);-webkit-tap-highlight-color:var(--vv-accordion-element-summary--webkit-tap-highlight-color);outline:var(--vv-accordion-element-summary-outline)}:where(.vv-accordion__summary,.vv-accordion > summary):before{content:"";display:var(--vv-accordion-element-summary-pseudo-before-display);position:var(--vv-accordion-element-summary-pseudo-before-position);top:var(--accordion-padding-top);left:var(--accordion-padding-left);width:var(--vv-accordion-element-summary-pseudo-before-width);height:var(--vv-accordion-element-summary-pseudo-before-height);background-image:var(--vv-accordion-element-summary-pseudo-before-background-image);background-position:var(--vv-accordion-element-summary-pseudo-before-background-position);background-size:var(--vv-accordion-element-summary-pseudo-before-background-size);background-repeat:var(--vv-accordion-element-summary-pseudo-before-background-repeat);will-change:var(--vv-accordion-element-summary-pseudo-before-will-change);transition:var(--vv-accordion-element-summary-pseudo-before-transition);transform:var(--vv-accordion-element-summary-pseudo-before-transform)}:where(.vv-accordion__summary,.vv-accordion > summary)::marker{content:"";display:var(--vv-accordion-element-summary-pseudo-marker-display)}:where(.vv-accordion__summary,.vv-accordion > summary)::-webkit-details-marker{content:"";display:var(--vv-accordion-element-summary-pseudo--webkit-details-marker-display)}:where(.vv-accordion__summary--hover,.vv-accordion__summary.hover,.vv-accordion > summary.hover,.vv-accordion__summary:not([disabled]):hover,.vv-accordion > summary:not([disabled]):hover){background-color:var(--vv-accordion-element-summary-state-hover-background-color)}:where(.vv-accordion__summary--focus-visible,.vv-accordion__summary.focus-visible,.vv-accordion > summary.focus-visible,.vv-accordion__summary:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible,.vv-accordion > summary:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){background-color:var(--vv-accordion-element-summary-state-focus-visible-background-color)}:where(.vv-accordion__content,.vv-accordion > summary + *){padding-block:var(--vv-accordion-element-content-padding-block);padding-inline:var(--accordion-padding-left) var(--accordion-padding-right)}:where(.vv-accordion--open .vv-accordion__summary,.vv-accordion.open .vv-accordion__summary,.vv-accordion[open] .vv-accordion__summary,.vv-accordion--open > summary,.vv-accordion.open > summary,.vv-accordion[open] > summary){background-color:var(--vv-accordion-state-open-element-summary-background-color)}:where(.vv-accordion--open .vv-accordion__summary,.vv-accordion.open .vv-accordion__summary,.vv-accordion[open] .vv-accordion__summary,.vv-accordion--open > summary,.vv-accordion.open > summary,.vv-accordion[open] > summary):before{content:"";transform:var(--vv-accordion-state-open-element-summary-pseudo-before-transform)}:where(.vv-accordion--disabled .vv-accordion__summary,.vv-accordion.disabled .vv-accordion__summary,.vv-accordion[disabled] .vv-accordion__summary,.vv-accordion[aria-disabled=true] .vv-accordion__summary,.vv-accordion--disabled > summary,.vv-accordion.disabled > summary,.vv-accordion[disabled] > summary,.vv-accordion[aria-disabled=true] > summary){cursor:var(--vv-accordion-state-disabled-element-summary-cursor);pointer-events:var(--vv-accordion-state-disabled-element-summary-pointer-events);opacity:var(--vv-accordion-state-disabled-element-summary-opacity)}:where(.vv-accordion--marker-right .vv-accordion__summary,.vv-accordion--marker-right > summary){padding-right:calc(var(--accordion-padding-right) + var(--accordion-marker-size));padding-left:var(--accordion-padding-left)}:where(.vv-accordion--marker-right .vv-accordion__summary,.vv-accordion--marker-right > summary):before{content:"";left:var(--vv-accordion-modifier-marker-right-element-summary-pseudo-before-left);right:var(--accordion-padding-right);transform:var(--vv-accordion-modifier-marker-right-element-summary-pseudo-before-transform)}:where(.vv-accordion--marker-right.vv-accordion--open .vv-accordion__summary,.vv-accordion--marker-right.vv-accordion.open .vv-accordion__summary,.vv-accordion--marker-right.vv-accordion[open] .vv-accordion__summary,.vv-accordion--marker-right.vv-accordion--open > summary,.vv-accordion--marker-right.vv-accordion.open > summary,.vv-accordion--marker-right.vv-accordion[open] > summary):before{content:"";transform:var(--vv-accordion-modifier-marker-right-state-open-element-summary-pseudo-before-transform)}:where(.vv-accordion--bordered.vv-accordion){--accordion-padding-top: var(--spacing-xs);--accordion-padding-right: var(--spacing-xs);--accordion-padding-bottom: var(--spacing-xs);--accordion-padding-left: var(--spacing-xs);border:var(--vv-accordion-modifier-bordered-border);border-radius:var(--vv-accordion-modifier-bordered-border-radius)}:where(.vv-accordion--bordered.vv-accordion--open .vv-accordion__summary,.vv-accordion--bordered.vv-accordion.open .vv-accordion__summary,.vv-accordion--bordered.vv-accordion[open] .vv-accordion__summary,.vv-accordion--bordered.vv-accordion--open > summary,.vv-accordion--bordered.vv-accordion.open > summary,.vv-accordion--bordered.vv-accordion[open] > summary){border-bottom-right-radius:var(--vv-accordion-modifier-bordered-state-open-element-summary-border-bottom-right-radius);border-bottom-left-radius:var(--vv-accordion-modifier-bordered-state-open-element-summary-border-bottom-left-radius)}
package/dist/components/vv-alert.css ADDED
@@ -0,0 +1 @@
1
+ :where(:host,:root,.theme){--vv-alert-display: flex;--vv-alert-min-width: 0;--vv-alert-overflow: hidden;--vv-alert-align-items: center;--vv-alert-padding: var(--spacing-sm) var(--spacing-md);--vv-alert-background-color: var(--color-surface-2);--vv-alert-border-color: var(--color-gray-lighten-4);--vv-alert-border-width: var(--border);--vv-alert-border-style: solid;--vv-alert-border-radius: var(--rounded);--vv-alert-position: relative;--vv-alert-element-icon-position: absolute;--vv-alert-element-icon-left: var(--spacing-md);--vv-alert-element-icon-inline-size: 1.2em;--vv-alert-element-icon-block-size: 1.2em;--vv-alert-element-close-position: absolute;--vv-alert-element-close-right: var(--spacing-md);--vv-alert-element-close-inline-size: 1em;--vv-alert-element-close-block-size: 1em;--vv-alert-element-close-cursor: pointer;--vv-alert-element-close-background-image: var(--bg-close);--vv-alert-element-close-background-position: center;--vv-alert-element-close-background-size: 100% auto;--vv-alert-element-close-background-repeat: no-repeat;--vv-alert-element-title-display: flex;--vv-alert-element-title-margin-right: 1ch;--vv-alert-element-title-line-height: var(--leading-normal);--vv-alert-element-title-font-weight: var(--font-bold);--vv-alert-element-title-color: var(--color-word);--vv-alert-element-content-line-height: var(--leading-normal);--vv-alert-element-content-color: var(--color-word-1);--vv-alert-element-content-text-overflow: ellipsis;--vv-alert-element-content-white-space: nowrap;--vv-alert-element-content-overflow: hidden;--vv-alert-element-separator-height: var(--border);--vv-alert-element-separator-background-color: var(--color-alpha-2);--vv-alert-element-separator-margin-block: var(--spacing-sm);--vv-alert-modifier-fixed-position: fixed;--vv-alert-modifier-fixed-z-index: var(--z-notification-alert);--vv-alert-modifier-top-inset-inline: var(--spacing-lg);--vv-alert-modifier-top-inset-block: var(--spacing-lg) auto;--vv-alert-modifier-bottom-inset-inline: var(--spacing-lg);--vv-alert-modifier-bottom-inset-block: auto var(--spacing-lg);--vv-alert-modifier-success-border-color: var(--color-success-lighten-5);--vv-alert-modifier-success-background-color: var(--color-surface-success);--vv-alert-modifier-success-element-icon-color: var(--color-success);--vv-alert-modifier-success-element-title-color: var(--color-success);--vv-alert-modifier-danger-border-color: var(--color-danger-lighten-5);--vv-alert-modifier-danger-background-color: var(--color-surface-danger);--vv-alert-modifier-danger-element-icon-color: var(--color-danger);--vv-alert-modifier-danger-element-title-color: var(--color-danger);--vv-alert-modifier-warning-border-color: var(--color-warning-lighten-5);--vv-alert-modifier-warning-background-color: var(--color-surface-warning);--vv-alert-modifier-warning-element-icon-color: var(--color-warning-darken-2);--vv-alert-modifier-warning-element-title-color: var(--color-warning-darken-2);--vv-alert-modifier-info-border-color: var(--color-info-lighten-5);--vv-alert-modifier-info-background-color: var(--color-surface-info);--vv-alert-modifier-info-element-icon-color: var(--color-info-darken-2);--vv-alert-modifier-info-element-title-color: var(--color-info-darken-2);--vv-alert-modifier-accent-border-color: var(--color-accent-lighten-5);--vv-alert-modifier-accent-background-color: var(--color-surface-accent);--vv-alert-modifier-accent-element-icon-color: var(--color-accent);--vv-alert-modifier-accent-element-title-color: var(--color-accent);--vv-alert-modifier-brand-border-color: var(--color-brand-lighten-5);--vv-alert-modifier-brand-background-color: var(--color-surface-brand);--vv-alert-modifier-brand-element-icon-color: var(--color-brand);--vv-alert-modifier-brand-element-title-color: var(--color-brand);--vv-alert-modifier-callout-display: block;--vv-alert-modifier-callout-border-radius: var(--rounded-none);--vv-alert-modifier-callout-border-width: 0 0 0 var(--spacing-4);--vv-alert-modifier-callout-element-title-margin-bottom: var(--spacing-sm);--vv-alert-modifier-callout-element-title-margin-right: 0;--vv-alert-modifier-callout-element-title-text-transform: uppercase;--vv-alert-modifier-callout-element-content-line-height: var(--leading-normal);--vv-alert-modifier-callout-element-content-white-space: wrap;--vv-alert-modifier-icon-padding-left: calc(var(--spacing-md) * 2 + 1em);--vv-alert-modifier-close-padding-right: calc(var(--spacing-md) * 2 + 1em)}:where(.vv-alert){display:var(--vv-alert-display);min-width:var(--vv-alert-min-width);overflow:var(--vv-alert-overflow);align-items:var(--vv-alert-align-items);padding:var(--vv-alert-padding);background-color:var(--vv-alert-background-color);border-color:var(--vv-alert-border-color);border-width:var(--vv-alert-border-width);border-style:var(--vv-alert-border-style);border-radius:var(--vv-alert-border-radius);position:var(--vv-alert-position)}:where(.vv-alert__icon,.vv-alert > :where(svg,[data-icon])){position:var(--vv-alert-element-icon-position);left:var(--vv-alert-element-icon-left);inline-size:var(--vv-alert-element-icon-inline-size);block-size:var(--vv-alert-element-icon-block-size)}:where(.vv-alert__close){position:var(--vv-alert-element-close-position);right:var(--vv-alert-element-close-right);inline-size:var(--vv-alert-element-close-inline-size);block-size:var(--vv-alert-element-close-block-size);cursor:var(--vv-alert-element-close-cursor);background-image:var(--vv-alert-element-close-background-image);background-position:var(--vv-alert-element-close-background-position);background-size:var(--vv-alert-element-close-background-size);background-repeat:var(--vv-alert-element-close-background-repeat)}:where(.vv-alert__title){display:var(--vv-alert-element-title-display);margin-right:var(--vv-alert-element-title-margin-right);line-height:var(--vv-alert-element-title-line-height);font-weight:var(--vv-alert-element-title-font-weight);color:var(--vv-alert-element-title-color)}:where(.vv-alert__content){line-height:var(--vv-alert-element-content-line-height);color:var(--vv-alert-element-content-color);text-overflow:var(--vv-alert-element-content-text-overflow);white-space:var(--vv-alert-element-content-white-space);overflow:var(--vv-alert-element-content-overflow)}:where(.vv-alert__separator,.vv-alert > hr){height:var(--vv-alert-element-separator-height);background-color:var(--vv-alert-element-separator-background-color);margin-block:var(--vv-alert-element-separator-margin-block)}:where(.vv-alert--fixed.vv-alert){--vv-alert-position: var(--vv-alert-modifier-fixed-position);z-index:var(--vv-alert-modifier-fixed-z-index)}:where(.vv-alert--top.vv-alert){inset-inline:var(--vv-alert-modifier-top-inset-inline);inset-block:var(--vv-alert-modifier-top-inset-block)}:where(.vv-alert--bottom.vv-alert){inset-inline:var(--vv-alert-modifier-bottom-inset-inline);inset-block:var(--vv-alert-modifier-bottom-inset-block)}:where(.vv-alert--success.vv-alert){--vv-alert-border-color: var(--vv-alert-modifier-success-border-color);--vv-alert-background-color: var(--vv-alert-modifier-success-background-color)}:where(.vv-alert--success .vv-alert__icon,.vv-alert--success > :where(svg,[data-icon])){color:var(--vv-alert-modifier-success-element-icon-color)}.vv-alert--success .vv-alert__title{color:var(--vv-alert-modifier-success-element-title-color)}:where(.vv-alert--danger.vv-alert){--vv-alert-border-color: var(--vv-alert-modifier-danger-border-color);--vv-alert-background-color: var(--vv-alert-modifier-danger-background-color)}:where(.vv-alert--danger .vv-alert__icon,.vv-alert--danger > :where(svg,[data-icon])){color:var(--vv-alert-modifier-danger-element-icon-color)}.vv-alert--danger .vv-alert__title{color:var(--vv-alert-modifier-danger-element-title-color)}:where(.vv-alert--warning.vv-alert){--vv-alert-border-color: var(--vv-alert-modifier-warning-border-color);--vv-alert-background-color: var(--vv-alert-modifier-warning-background-color)}:where(.vv-alert--warning .vv-alert__icon,.vv-alert--warning > :where(svg,[data-icon])){color:var(--vv-alert-modifier-warning-element-icon-color)}.vv-alert--warning .vv-alert__title{color:var(--vv-alert-modifier-warning-element-title-color)}:where(.vv-alert--info.vv-alert){--vv-alert-border-color: var(--vv-alert-modifier-info-border-color);--vv-alert-background-color: var(--vv-alert-modifier-info-background-color)}:where(.vv-alert--info .vv-alert__icon,.vv-alert--info > :where(svg,[data-icon])){color:var(--vv-alert-modifier-info-element-icon-color)}.vv-alert--info .vv-alert__title{color:var(--vv-alert-modifier-info-element-title-color)}:where(.vv-alert--accent.vv-alert){--vv-alert-border-color: var(--vv-alert-modifier-accent-border-color);--vv-alert-background-color: var(--vv-alert-modifier-accent-background-color)}:where(.vv-alert--accent .vv-alert__icon,.vv-alert--accent > :where(svg,[data-icon])){color:var(--vv-alert-modifier-accent-element-icon-color)}.vv-alert--accent .vv-alert__title{color:var(--vv-alert-modifier-accent-element-title-color)}:where(.vv-alert--brand.vv-alert){--vv-alert-border-color: var(--vv-alert-modifier-brand-border-color);--vv-alert-background-color: var(--vv-alert-modifier-brand-background-color)}:where(.vv-alert--brand .vv-alert__icon,.vv-alert--brand > :where(svg,[data-icon])){color:var(--vv-alert-modifier-brand-element-icon-color)}.vv-alert--brand .vv-alert__title{color:var(--vv-alert-modifier-brand-element-title-color)}:where(.vv-alert--callout.vv-alert){--vv-alert-display: var(--vv-alert-modifier-callout-display);--vv-alert-border-radius: var(--vv-alert-modifier-callout-border-radius);--vv-alert-border-width: var(--vv-alert-modifier-callout-border-width)}.vv-alert--callout .vv-alert__title{margin-bottom:var(--vv-alert-modifier-callout-element-title-margin-bottom);margin-right:var(--vv-alert-modifier-callout-element-title-margin-right);text-transform:var(--vv-alert-modifier-callout-element-title-text-transform)}.vv-alert--callout .vv-alert__content{line-height:var(--vv-alert-modifier-callout-element-content-line-height);white-space:var(--vv-alert-modifier-callout-element-content-white-space)}:where(.vv-alert--icon.vv-alert){padding-left:var(--vv-alert-modifier-icon-padding-left)}:where(.vv-alert--close.vv-alert){padding-right:var(--vv-alert-modifier-close-padding-right)}
package/dist/components/vv-avatar.css ADDED
@@ -0,0 +1 @@
1
+ :where(:host,:root,.theme){--vv-avatar-display: inline-flex;--vv-avatar-position: relative;--vv-avatar-justify-content: center;--vv-avatar-align-items: center;--vv-avatar-font-size: var(--text-12);--vv-avatar-line-height: var(--leading-none);--vv-avatar-width: var(--spacing-28);--vv-avatar-height: var(--spacing-28);--vv-avatar-border-radius: var(--rounded);--vv-avatar-background-position: center;--vv-avatar-background-size: contain;--vv-avatar-background-repeat: no-repeat;--vv-avatar-color: var(--color-white);--vv-avatar-object-fit: contain;--vv-avatar-modifier-rounded-border-radius: var(--rounded-full);--vv-avatar-modifier-rounded-overflow: hidden;--vv-avatar-modifier-md-font-size: var(--text-14);--vv-avatar-modifier-md-width: var(--spacing-34);--vv-avatar-modifier-md-height: var(--spacing-34);--vv-avatar-modifier-lg-font-size: var(--text-16);--vv-avatar-modifier-lg-width: var(--spacing-40);--vv-avatar-modifier-lg-height: var(--spacing-40);--vv-avatar-state-focus-outline: var(--spacing-px) solid var(--color-brand);--vv-avatar-state-focus-outline-offset: var(--spacing-0);--vv-avatar-element-badge-position: absolute;--vv-avatar-element-badge-top: 0;--vv-avatar-element-badge-right: 0;--vv-avatar-element-badge-transform: translate(50%, -50%);--vv-avatar-element-badge-box-shadow: var(--shadow-sm);--vv-avatar-element-image-width: 100%;--vv-avatar-element-image-height: 100%;--vv-avatar-element-image-border-radius: inherit;--vv-avatar-element-image-object-fit: inherit}:where(.vv-avatar){display:var(--vv-avatar-display);position:var(--vv-avatar-position);justify-content:var(--vv-avatar-justify-content);align-items:var(--vv-avatar-align-items);font-size:var(--vv-avatar-font-size);line-height:var(--vv-avatar-line-height);width:var(--vv-avatar-width);height:var(--vv-avatar-height);border-radius:var(--vv-avatar-border-radius);background-position:var(--vv-avatar-background-position);background-size:var(--vv-avatar-background-size);background-repeat:var(--vv-avatar-background-repeat);color:var(--vv-avatar-color);-o-object-fit:var(--vv-avatar-object-fit);object-fit:var(--vv-avatar-object-fit)}:where(.vv-avatar__badge,.vv-avatar > sup){position:var(--vv-avatar-element-badge-position);top:var(--vv-avatar-element-badge-top);right:var(--vv-avatar-element-badge-right);transform:var(--vv-avatar-element-badge-transform);box-shadow:var(--vv-avatar-element-badge-box-shadow)}:where(.vv-avatar__image,.vv-avatar > img){width:var(--vv-avatar-element-image-width);height:var(--vv-avatar-element-image-height);border-radius:var(--vv-avatar-element-image-border-radius);-o-object-fit:var(--vv-avatar-element-image-object-fit);object-fit:var(--vv-avatar-element-image-object-fit)}:where(.vv-avatar--focus,.vv-avatar.focus,.vv-avatar:not([disabled]):focus){outline:var(--vv-avatar-state-focus-outline);outline-offset:var(--vv-avatar-state-focus-outline-offset)}:where(.vv-avatar--rounded.vv-avatar){--vv-avatar-border-radius: var(--vv-avatar-modifier-rounded-border-radius);overflow:var(--vv-avatar-modifier-rounded-overflow)}:where(.vv-avatar--md.vv-avatar){--vv-avatar-font-size: var(--vv-avatar-modifier-md-font-size);--vv-avatar-width: var(--vv-avatar-modifier-md-width);--vv-avatar-height: var(--vv-avatar-modifier-md-height)}:where(.vv-avatar--lg.vv-avatar){--vv-avatar-font-size: var(--vv-avatar-modifier-lg-font-size);--vv-avatar-width: var(--vv-avatar-modifier-lg-width);--vv-avatar-height: var(--vv-avatar-modifier-lg-height)}
package/dist/components/vv-badge.css CHANGED
@@ -1 +1 @@
1
- :where(:host,:root,.theme){--vv-badge-border-radius: .5em;--vv-badge-background: var(--color-brand);--vv-badge-color: var(--color-white);--vv-badge-line-height: 2em;--vv-badge-min-height: 2em;--vv-badge-min-width: 2em;--vv-badge-padding: 0 .5em;--vv-badge-display: inline-flex;--vv-badge-justify-content: center;--vv-badge-align-items: center;--vv-badge-gap: .5ch;--vv-badge-white-space: nowrap;--vv-badge-font-family: var(--font-sans);--vv-badge-font-weight: var(--font-normal);--vv-badge-text-shadow: none;--vv-badge-state-empty-font-size: inherit;--vv-badge-state-empty-min-width: 0;--vv-badge-state-empty-min-height: 0;--vv-badge-state-empty-padding: 0;--vv-badge-modifier-rounded-border-radius: 1em;--vv-badge-modifier-white-background: hsla(var(--color-white-hue) var(--color-white-saturation) var(--color-white-lightness)/80%);--vv-badge-modifier-white-color: var(--color-black);--vv-badge-modifier-black-background: hsla(var(--color-black-hue) var(--color-black-saturation) var(--color-black-lightness)/80%);--vv-badge-modifier-black-color: var(--color-white);--vv-badge-modifier-danger-background: var(--color-danger);--vv-badge-modifier-success-background: var(--color-success);--vv-badge-modifier-warning-background: var(--color-warning)}:where(.vv-badge){--badge-font-size: .7rem;font-size:var(--badge-font-size);border-radius:var(--vv-badge-border-radius);background:var(--vv-badge-background);color:var(--vv-badge-color);line-height:var(--vv-badge-line-height);min-height:var(--vv-badge-min-height);min-width:var(--vv-badge-min-width);padding:var(--vv-badge-padding);display:var(--vv-badge-display);justify-content:var(--vv-badge-justify-content);align-items:var(--vv-badge-align-items);gap:var(--vv-badge-gap);white-space:var(--vv-badge-white-space);font-family:var(--vv-badge-font-family);font-weight:var(--vv-badge-font-weight);text-shadow:var(--vv-badge-text-shadow)}:where(.vv-badge--empty,.vv-badge.empty,.vv-badge:not([disabled]):empty){font-size:var(--vv-badge-state-empty-font-size);--vv-badge-min-width: var(--vv-badge-state-empty-min-width);--vv-badge-min-height: var(--vv-badge-state-empty-min-height);width:var(--badge-font-size);height:var(--badge-font-size);border-radius:calc(var(--badge-font-size) * .5);--vv-badge-padding: var(--vv-badge-state-empty-padding)}:where(.vv-badge--small.vv-badge){--badge-font-size: .6rem}:where(.vv-badge--rounded.vv-badge){--vv-badge-border-radius: var(--vv-badge-modifier-rounded-border-radius)}:where(.vv-badge--white.vv-badge){--vv-badge-background: var(--vv-badge-modifier-white-background);--vv-badge-color: var(--vv-badge-modifier-white-color)}:where(.vv-badge--black.vv-badge){--vv-badge-background: var(--vv-badge-modifier-black-background);--vv-badge-color: var(--vv-badge-modifier-black-color)}:where(.vv-badge--danger.vv-badge){--vv-badge-background: var(--vv-badge-modifier-danger-background)}:where(.vv-badge--success.vv-badge){--vv-badge-background: var(--vv-badge-modifier-success-background)}:where(.vv-badge--warning.vv-badge){--vv-badge-background: var(--vv-badge-modifier-warning-background)}
1
+ :where(:host,:root,.theme){--vv-badge-border-style: solid;--vv-badge-border-radius: .5em;--vv-badge-min-height: 2em;--vv-badge-min-width: 2em;--vv-badge-padding: 0 .5em;--vv-badge-display: inline-flex;--vv-badge-justify-content: center;--vv-badge-align-items: center;--vv-badge-gap: .5ch;--vv-badge-white-space: nowrap;--vv-badge-font-family: var(--font-sans);--vv-badge-font-weight: var(--font-normal);--vv-badge-text-shadow: none;--vv-badge-line-height: var(--leading-none);--vv-badge-state-empty-font-size: inherit;--vv-badge-state-empty-min-width: 0;--vv-badge-state-empty-min-height: 0;--vv-badge-state-empty-padding: 0;--vv-badge-modifier-rounded-border-radius: 1em}:where(.vv-badge){--badge-font-size: .7rem;--badge-color: var(--color-white);--badge-background-color: var(--color-brand);--badge-border-width: 0;font-size:var(--badge-font-size);background-color:var(--badge-background-color);color:var(--badge-color);border-width:var(--badge-border-width);border-color:var(--badge-background-color);border-style:var(--vv-badge-border-style);border-radius:var(--vv-badge-border-radius);min-height:var(--vv-badge-min-height);min-width:var(--vv-badge-min-width);padding:var(--vv-badge-padding);display:var(--vv-badge-display);justify-content:var(--vv-badge-justify-content);align-items:var(--vv-badge-align-items);gap:var(--vv-badge-gap);white-space:var(--vv-badge-white-space);font-family:var(--vv-badge-font-family);font-weight:var(--vv-badge-font-weight);text-shadow:var(--vv-badge-text-shadow);line-height:var(--vv-badge-line-height)}:where(.vv-badge--empty,.vv-badge.empty,.vv-badge:not([disabled]):empty){font-size:var(--vv-badge-state-empty-font-size);--vv-badge-min-width: var(--vv-badge-state-empty-min-width);--vv-badge-min-height: var(--vv-badge-state-empty-min-height);width:var(--badge-font-size);height:var(--badge-font-size);border-radius:calc(var(--badge-font-size) * .5);--vv-badge-padding: var(--vv-badge-state-empty-padding)}:where(.vv-badge--sm.vv-badge){--badge-font-size: .6rem}:where(.vv-badge--rounded.vv-badge){--vv-badge-border-radius: var(--vv-badge-modifier-rounded-border-radius)}:where(.vv-badge--outline.vv-badge){--badge-border-width: var(--border);background-color:transparent;color:var(--badge-background-color)}:where(.vv-badge--ghost.vv-badge){background-color:transparent;color:var(--badge-background-color)}:where(.vv-badge--white.vv-badge){--badge-background-color: hsla(var(--color-white-hue) var(--color-white-saturation) var(--color-white-lightness)/80%);--badge-color: var(--color-black)}:where(.vv-badge--black.vv-badge){--badge-background-color: hsla(var(--color-black-hue) var(--color-black-saturation) var(--color-black-lightness)/80%);--badge-color: var(--color-white)}:where(.vv-badge--danger.vv-badge){--badge-background-color: var(--color-danger)}:where(.vv-badge--success.vv-badge){--badge-background-color: var(--color-success)}:where(.vv-badge--warning.vv-badge){--badge-background-color: var(--color-warning)}:where(.vv-badge--info.vv-badge){--badge-background-color: var(--color-info)}:where(.vv-badge--accent.vv-badge){--badge-background-color: var(--color-accent)}:where(.vv-badge--gray.vv-badge){--badge-background-color: var(--color-gray)}
package/dist/components/vv-breadcrumb.css CHANGED
@@ -1 +1 @@
1
- :where(:host,:root,.theme){--vv-breadcrumb-element-list-position: relative;--vv-breadcrumb-element-list-display: flex;--vv-breadcrumb-element-list-flex-wrap: no-wrap;--vv-breadcrumb-element-list-list-style: none;--vv-breadcrumb-element-list-overflow: auto;--vv-breadcrumb-element-list-padding: 0;--vv-breadcrumb-element-list-background: var(--color-surface);--vv-breadcrumb-element-list-pseudo-after-position: absolute;--vv-breadcrumb-element-list-pseudo-after-top: 0;--vv-breadcrumb-element-list-pseudo-after-bottom: 0;--vv-breadcrumb-element-list-pseudo-after-right: 0;--vv-breadcrumb-element-list-pseudo-after-display: block;--vv-breadcrumb-element-list-pseudo-after-width: var(--spacing-sm);--vv-breadcrumb-element-list-pseudo-after-background: linear-gradient(45deg, transparent, var(--color-surface));--vv-breadcrumb-element-item-display: inline-flex;--vv-breadcrumb-element-item-align-items: center;--vv-breadcrumb-element-item-color: var(--color-word-2);--vv-breadcrumb-element-item-pseudo-after-display: block;--vv-breadcrumb-element-item-pseudo-after-margin-inline: 1ch;--vv-breadcrumb-element-item-pseudo-after-width: calc(var(--leading-normal) * 1em);--vv-breadcrumb-element-item-pseudo-after-height: calc(var(--leading-normal) * 1em);--vv-breadcrumb-element-item-pseudo-after-background-image: var(--bg-chevron);--vv-breadcrumb-element-item-pseudo-after-background-position: center;--vv-breadcrumb-element-item-pseudo-after-background-size: 1em;--vv-breadcrumb-element-item-pseudo-after-background-repeat: no-repeat;--vv-breadcrumb-element-item-pseudo-after-transform: rotate(-90deg);--vv-breadcrumb-element-item-active-display: inline-flex;--vv-breadcrumb-element-item-active-align-items: center;--vv-breadcrumb-element-item-active-font-weight: var(--font-bold);--vv-breadcrumb-element-item-active-padding-right: var(--spacing-16);--vv-breadcrumb-element-link-state-hover-text-decoration: underline;--vv-breadcrumb-element-link-state-focus-within-text-decoration: underline;--vv-breadcrumb-element-link-state-active-color: var(--color-brand-darken-2);--vv-breadcrumb-modifier-multiline-element-list-flex-wrap: wrap;--vv-breadcrumb-modifier-multiline-element-item-font-size: var(--text-12);--vv-breadcrumb-modifier-multiline-element-item-active-width: 100%;--vv-breadcrumb-modifier-multiline-element-item-active-font-size: var(--text-18);--vv-breadcrumb-modifier-multiline-element-item-active-line-height: var(--leading-relaxed)}:where(.vv-breadcrumb__list,.vv-breadcrumb > ol){position:var(--vv-breadcrumb-element-list-position);display:var(--vv-breadcrumb-element-list-display);flex-wrap:var(--vv-breadcrumb-element-list-flex-wrap);list-style:var(--vv-breadcrumb-element-list-list-style);overflow:var(--vv-breadcrumb-element-list-overflow);padding:var(--vv-breadcrumb-element-list-padding);background:var(--vv-breadcrumb-element-list-background)}:where(.vv-breadcrumb__list,.vv-breadcrumb > ol):after{content:"";position:var(--vv-breadcrumb-element-list-pseudo-after-position);top:var(--vv-breadcrumb-element-list-pseudo-after-top);bottom:var(--vv-breadcrumb-element-list-pseudo-after-bottom);right:var(--vv-breadcrumb-element-list-pseudo-after-right);display:var(--vv-breadcrumb-element-list-pseudo-after-display);width:var(--vv-breadcrumb-element-list-pseudo-after-width);background:var(--vv-breadcrumb-element-list-pseudo-after-background)}:where(.vv-breadcrumb__item,.vv-breadcrumb > ol > li[\:has\(a\)]){display:var(--vv-breadcrumb-element-item-display);align-items:var(--vv-breadcrumb-element-item-align-items);color:var(--vv-breadcrumb-element-item-color)}:where(.vv-breadcrumb__item,.vv-breadcrumb > ol > li:has(a)){display:var(--vv-breadcrumb-element-item-display);align-items:var(--vv-breadcrumb-element-item-align-items);color:var(--vv-breadcrumb-element-item-color)}:where(.vv-breadcrumb__item,.vv-breadcrumb > ol > li[\:has\(a\)]):after{content:"";display:var(--vv-breadcrumb-element-item-pseudo-after-display);margin-inline:var(--vv-breadcrumb-element-item-pseudo-after-margin-inline);width:var(--vv-breadcrumb-element-item-pseudo-after-width);height:var(--vv-breadcrumb-element-item-pseudo-after-height);background-image:var(--vv-breadcrumb-element-item-pseudo-after-background-image);background-position:var(--vv-breadcrumb-element-item-pseudo-after-background-position);background-size:var(--vv-breadcrumb-element-item-pseudo-after-background-size);background-repeat:var(--vv-breadcrumb-element-item-pseudo-after-background-repeat);transform:var(--vv-breadcrumb-element-item-pseudo-after-transform)}:where(.vv-breadcrumb__item,.vv-breadcrumb > ol > li:has(a)):after{content:"";display:var(--vv-breadcrumb-element-item-pseudo-after-display);margin-inline:var(--vv-breadcrumb-element-item-pseudo-after-margin-inline);width:var(--vv-breadcrumb-element-item-pseudo-after-width);height:var(--vv-breadcrumb-element-item-pseudo-after-height);background-image:var(--vv-breadcrumb-element-item-pseudo-after-background-image);background-position:var(--vv-breadcrumb-element-item-pseudo-after-background-position);background-size:var(--vv-breadcrumb-element-item-pseudo-after-background-size);background-repeat:var(--vv-breadcrumb-element-item-pseudo-after-background-repeat);transform:var(--vv-breadcrumb-element-item-pseudo-after-transform)}:where(.vv-breadcrumb__item-active,.vv-breadcrumb > ol > li[\:not-has\(a\)]){display:var(--vv-breadcrumb-element-item-active-display);align-items:var(--vv-breadcrumb-element-item-active-align-items);font-weight:var(--vv-breadcrumb-element-item-active-font-weight);padding-right:var(--vv-breadcrumb-element-item-active-padding-right)}:where(.vv-breadcrumb__item-active,.vv-breadcrumb > ol > li:not(:has(a))){display:var(--vv-breadcrumb-element-item-active-display);align-items:var(--vv-breadcrumb-element-item-active-align-items);font-weight:var(--vv-breadcrumb-element-item-active-font-weight);padding-right:var(--vv-breadcrumb-element-item-active-padding-right)}:where(.vv-breadcrumb__link--hover,.vv-breadcrumb__link.hover,.vv-breadcrumb > ol > li > a.hover,.vv-breadcrumb__link:not([disabled]):hover,.vv-breadcrumb > ol > li > a:not([disabled]):hover){-webkit-text-decoration:var(--vv-breadcrumb-element-link-state-hover-text-decoration);text-decoration:var(--vv-breadcrumb-element-link-state-hover-text-decoration)}:where(.vv-breadcrumb__link--focus-within,.vv-breadcrumb__link.focus-within,.vv-breadcrumb > ol > li > a.focus-within,.vv-breadcrumb__link:not([disabled]):focus-within,.vv-breadcrumb > ol > li > a:not([disabled]):focus-within){-webkit-text-decoration:var(--vv-breadcrumb-element-link-state-focus-within-text-decoration);text-decoration:var(--vv-breadcrumb-element-link-state-focus-within-text-decoration)}:where(.vv-breadcrumb__link--active,.vv-breadcrumb__link.active,.vv-breadcrumb > ol > li > a.active,.vv-breadcrumb__link:not([disabled]):active,.vv-breadcrumb > ol > li > a:not([disabled]):active){color:var(--vv-breadcrumb-element-link-state-active-color)}:where(.vv-breadcrumb--multiline .vv-breadcrumb__list,.vv-breadcrumb--multiline > ol){flex-wrap:var(--vv-breadcrumb-modifier-multiline-element-list-flex-wrap)}:where(.vv-breadcrumb--multiline .vv-breadcrumb__item,.vv-breadcrumb--multiline > ol > li[\:has\(a\)]){font-size:var(--vv-breadcrumb-modifier-multiline-element-item-font-size)}:where(.vv-breadcrumb--multiline .vv-breadcrumb__item,.vv-breadcrumb--multiline > ol > li:has(a)){font-size:var(--vv-breadcrumb-modifier-multiline-element-item-font-size)}:where(.vv-breadcrumb--multiline .vv-breadcrumb__item-active,.vv-breadcrumb--multiline > ol > li[\:not-has\(a\)]){width:var(--vv-breadcrumb-modifier-multiline-element-item-active-width);font-size:var(--vv-breadcrumb-modifier-multiline-element-item-active-font-size);line-height:var(--vv-breadcrumb-modifier-multiline-element-item-active-line-height)}:where(.vv-breadcrumb--multiline .vv-breadcrumb__item-active,.vv-breadcrumb--multiline > ol > li:not(:has(a))){width:var(--vv-breadcrumb-modifier-multiline-element-item-active-width);font-size:var(--vv-breadcrumb-modifier-multiline-element-item-active-font-size);line-height:var(--vv-breadcrumb-modifier-multiline-element-item-active-line-height)}
1
+ :where(:host,:root,.theme){--vv-breadcrumb-position: relative;--vv-breadcrumb-pseudo-after-position: absolute;--vv-breadcrumb-pseudo-after-top: 0;--vv-breadcrumb-pseudo-after-bottom: 0;--vv-breadcrumb-pseudo-after-right: 0;--vv-breadcrumb-pseudo-after-display: block;--vv-breadcrumb-pseudo-after-width: var(--spacing-sm);--vv-breadcrumb-pseudo-after-background: linear-gradient(45deg, transparent, var(--color-surface));--vv-breadcrumb-element-list-position: relative;--vv-breadcrumb-element-list-overflow: auto hidden;--vv-breadcrumb-element-list-overscroll-behavior-x: contain;--vv-breadcrumb-element-list-scroll-behavior: smooth;--vv-breadcrumb-element-list-scroll-snap-type: x mandatory;--vv-breadcrumb-element-list-scrollbar-width: none;--vv-breadcrumb-element-list-display: flex;--vv-breadcrumb-element-list-flex-wrap: no-wrap;--vv-breadcrumb-element-list-list-style: none;--vv-breadcrumb-element-list-padding: 0;--vv-breadcrumb-element-list-background: var(--color-surface);--vv-breadcrumb-element-list-white-space: nowrap;--vv-breadcrumb-element-list-pseudo--webkit-scrollbar-width: 0;--vv-breadcrumb-element-list-pseudo--webkit-scrollbar-height: 0;--vv-breadcrumb-element-item-display: inline-flex;--vv-breadcrumb-element-item-align-items: center;--vv-breadcrumb-element-item-color: var(--color-word-2);--vv-breadcrumb-element-item-pseudo-after-display: block;--vv-breadcrumb-element-item-pseudo-after-margin-inline: 1ch;--vv-breadcrumb-element-item-pseudo-after-width: calc(var(--leading-normal) * 1em);--vv-breadcrumb-element-item-pseudo-after-height: calc(var(--leading-normal) * 1em);--vv-breadcrumb-element-item-pseudo-after-background-image: var(--bg-chevron);--vv-breadcrumb-element-item-pseudo-after-background-position: center;--vv-breadcrumb-element-item-pseudo-after-background-size: 1em;--vv-breadcrumb-element-item-pseudo-after-background-repeat: no-repeat;--vv-breadcrumb-element-item-pseudo-after-transform: rotate(-90deg);--vv-breadcrumb-element-item-active-display: inline-flex;--vv-breadcrumb-element-item-active-align-items: center;--vv-breadcrumb-element-item-active-font-weight: var(--font-bold);--vv-breadcrumb-element-item-active-padding-right: var(--spacing-16);--vv-breadcrumb-element-link-state-hover-text-decoration: underline;--vv-breadcrumb-element-link-state-focus-within-text-decoration: underline;--vv-breadcrumb-element-link-state-active-color: var(--color-brand-darken-2);--vv-breadcrumb-modifier-multiline-element-list-flex-wrap: wrap;--vv-breadcrumb-modifier-multiline-element-item-font-size: var(--text-12);--vv-breadcrumb-modifier-multiline-element-item-active-width: 100%;--vv-breadcrumb-modifier-multiline-element-item-active-font-size: var(--text-18);--vv-breadcrumb-modifier-multiline-element-item-active-line-height: var(--leading-relaxed)}:where(.vv-breadcrumb){position:var(--vv-breadcrumb-position)}:where(.vv-breadcrumb):after{content:"";position:var(--vv-breadcrumb-pseudo-after-position);top:var(--vv-breadcrumb-pseudo-after-top);bottom:var(--vv-breadcrumb-pseudo-after-bottom);right:var(--vv-breadcrumb-pseudo-after-right);display:var(--vv-breadcrumb-pseudo-after-display);width:var(--vv-breadcrumb-pseudo-after-width);background:var(--vv-breadcrumb-pseudo-after-background)}:where(.vv-breadcrumb__list,.vv-breadcrumb > ol){position:var(--vv-breadcrumb-element-list-position);overflow:var(--vv-breadcrumb-element-list-overflow);overscroll-behavior-x:var(--vv-breadcrumb-element-list-overscroll-behavior-x);scroll-behavior:var(--vv-breadcrumb-element-list-scroll-behavior);scroll-snap-type:var(--vv-breadcrumb-element-list-scroll-snap-type);scrollbar-width:var(--vv-breadcrumb-element-list-scrollbar-width);display:var(--vv-breadcrumb-element-list-display);flex-wrap:var(--vv-breadcrumb-element-list-flex-wrap);list-style:var(--vv-breadcrumb-element-list-list-style);padding:var(--vv-breadcrumb-element-list-padding);background:var(--vv-breadcrumb-element-list-background);white-space:var(--vv-breadcrumb-element-list-white-space)}:where(.vv-breadcrumb__list,.vv-breadcrumb > ol)::-webkit-scrollbar{content:"";width:var(--vv-breadcrumb-element-list-pseudo--webkit-scrollbar-width);height:var(--vv-breadcrumb-element-list-pseudo--webkit-scrollbar-height)}:where(.vv-breadcrumb__item,.vv-breadcrumb > ol > li:has(a)){display:var(--vv-breadcrumb-element-item-display);align-items:var(--vv-breadcrumb-element-item-align-items);color:var(--vv-breadcrumb-element-item-color)}:where(.vv-breadcrumb__item,.vv-breadcrumb > ol > li:has(a)):after{content:"";display:var(--vv-breadcrumb-element-item-pseudo-after-display);margin-inline:var(--vv-breadcrumb-element-item-pseudo-after-margin-inline);width:var(--vv-breadcrumb-element-item-pseudo-after-width);height:var(--vv-breadcrumb-element-item-pseudo-after-height);background-image:var(--vv-breadcrumb-element-item-pseudo-after-background-image);background-position:var(--vv-breadcrumb-element-item-pseudo-after-background-position);background-size:var(--vv-breadcrumb-element-item-pseudo-after-background-size);background-repeat:var(--vv-breadcrumb-element-item-pseudo-after-background-repeat);transform:var(--vv-breadcrumb-element-item-pseudo-after-transform)}:where(.vv-breadcrumb__item-active,.vv-breadcrumb > ol > li:not(:has(a))){display:var(--vv-breadcrumb-element-item-active-display);align-items:var(--vv-breadcrumb-element-item-active-align-items);font-weight:var(--vv-breadcrumb-element-item-active-font-weight);padding-right:var(--vv-breadcrumb-element-item-active-padding-right)}:where(.vv-breadcrumb__link--hover,.vv-breadcrumb__link.hover,.vv-breadcrumb > ol > li > a.hover,.vv-breadcrumb__link:not([disabled]):hover,.vv-breadcrumb > ol > li > a:not([disabled]):hover){-webkit-text-decoration:var(--vv-breadcrumb-element-link-state-hover-text-decoration);text-decoration:var(--vv-breadcrumb-element-link-state-hover-text-decoration)}:where(.vv-breadcrumb__link--focus-within,.vv-breadcrumb__link.focus-within,.vv-breadcrumb > ol > li > a.focus-within,.vv-breadcrumb__link:not([disabled]):focus-within,.vv-breadcrumb > ol > li > a:not([disabled]):focus-within){-webkit-text-decoration:var(--vv-breadcrumb-element-link-state-focus-within-text-decoration);text-decoration:var(--vv-breadcrumb-element-link-state-focus-within-text-decoration)}:where(.vv-breadcrumb__link--active,.vv-breadcrumb__link.active,.vv-breadcrumb > ol > li > a.active,.vv-breadcrumb__link:not([disabled]):active,.vv-breadcrumb > ol > li > a:not([disabled]):active){color:var(--vv-breadcrumb-element-link-state-active-color)}:where(.vv-breadcrumb--multiline .vv-breadcrumb__list,.vv-breadcrumb--multiline > ol){flex-wrap:var(--vv-breadcrumb-modifier-multiline-element-list-flex-wrap)}:where(.vv-breadcrumb--multiline .vv-breadcrumb__item,.vv-breadcrumb--multiline > ol > li:has(a)){font-size:var(--vv-breadcrumb-modifier-multiline-element-item-font-size)}:where(.vv-breadcrumb--multiline .vv-breadcrumb__item-active,.vv-breadcrumb--multiline > ol > li:not(:has(a))){width:var(--vv-breadcrumb-modifier-multiline-element-item-active-width);font-size:var(--vv-breadcrumb-modifier-multiline-element-item-active-font-size);line-height:var(--vv-breadcrumb-modifier-multiline-element-item-active-line-height)}
package/dist/components/vv-button-group.css CHANGED
@@ -1 +1 @@
1
- :where(:host,:root,.theme){--vv-button-group-display: inline-flex;--vv-button-group-align-items: center;--vv-button-group-gap: var(--spacing-4);--vv-button-group-modifier-block-display: flex;--vv-button-group-modifier-block-width: 100%;--vv-button-group-modifier-vertical-display: inline-flex;--vv-button-group-modifier-vertical-flex-direction: column;--vv-button-group-modifier-vertical-align-items: normal;--vv-button-group-modifier-compact-gap: 0;--vv-button-group-modifier-compact-align-items: normal}:where(.vv-button-group){display:var(--vv-button-group-display);align-items:var(--vv-button-group-align-items);gap:var(--vv-button-group-gap)}:where(.vv-button-group--block.vv-button-group){--vv-button-group-display: var(--vv-button-group-modifier-block-display);width:var(--vv-button-group-modifier-block-width)}:where(.vv-button-group--vertical.vv-button-group){--vv-button-group-display: var(--vv-button-group-modifier-vertical-display);flex-direction:var(--vv-button-group-modifier-vertical-flex-direction);--vv-button-group-align-items: var(--vv-button-group-modifier-vertical-align-items)}:where(.vv-button-group--compact.vv-button-group){--vv-button-group-gap: var(--vv-button-group-modifier-compact-gap);--vv-button-group-align-items: var(--vv-button-group-modifier-compact-align-items)}:where(.vv-button-group--block .vv-button:not([disabled]):not([tabindex="-1"]).active,.vv-button-group--block .vv-button:not([disabled]):not([tabindex="-1"]).vv-button--active,.vv-button-group--block .vv-button:not([disabled]):not([tabindex="-1"]):active){z-index:1}.vv-button-group--block :where(.vv-button){flex:1}:where(.vv-button-group--compact.vv-button-group--vertical .vv-button:not(:first-child)){border-top-right-radius:0;border-top-left-radius:0}:where(.vv-button-group--compact.vv-button-group--vertical .vv-button:not(:last-child)){border-bottom-right-radius:0;border-bottom-left-radius:0}:where(.vv-button-group--compact.vv-button-group--vertical .vv-button:not(:last-child):not(:last-child)){margin-block:calc(var(--button-border-width) * -1)}:where(.vv-button-group--compact:not(.vv-button-group--vertical) .vv-button:not(:first-child)){border-top-left-radius:0;border-bottom-left-radius:0}:where(.vv-button-group--compact:not(.vv-button-group--vertical) .vv-button:not(:last-child)){border-top-right-radius:0;border-bottom-right-radius:0}:where(.vv-button-group--compact:not(.vv-button-group--vertical) .vv-button:not(:last-child):not(:last-child)){margin-inline:calc(var(--button-border-width) * -1)}
1
+ :where(:host,:root,.theme){--vv-button-group-display: inline-flex;--vv-button-group-flex-wrap: wrap;--vv-button-group-min-width: 0;--vv-button-group-max-width: 100%;--vv-button-group-align-items: center;--vv-button-group-justify-content: center;--vv-button-group-gap: var(--spacing-4);--vv-button-group-modifier-block-display: flex;--vv-button-group-modifier-block-width: 100%;--vv-button-group-modifier-vertical-display: inline-flex;--vv-button-group-modifier-vertical-flex-direction: column;--vv-button-group-modifier-vertical-align-items: normal;--vv-button-group-modifier-compact-gap: 0;--vv-button-group-modifier-compact-align-items: normal}:where(.vv-button-group){display:var(--vv-button-group-display);flex-wrap:var(--vv-button-group-flex-wrap);min-width:var(--vv-button-group-min-width);max-width:var(--vv-button-group-max-width);align-items:var(--vv-button-group-align-items);justify-content:var(--vv-button-group-justify-content);gap:var(--vv-button-group-gap)}:where(.vv-button-group--block.vv-button-group){--vv-button-group-display: var(--vv-button-group-modifier-block-display);width:var(--vv-button-group-modifier-block-width)}:where(.vv-button-group--vertical.vv-button-group){--vv-button-group-display: var(--vv-button-group-modifier-vertical-display);flex-direction:var(--vv-button-group-modifier-vertical-flex-direction);--vv-button-group-align-items: var(--vv-button-group-modifier-vertical-align-items)}:where(.vv-button-group--compact.vv-button-group){--vv-button-group-gap: var(--vv-button-group-modifier-compact-gap);--vv-button-group-align-items: var(--vv-button-group-modifier-compact-align-items)}:where(.vv-button-group--block .vv-button:not([disabled]):not([tabindex="-1"]).active,.vv-button-group--block .vv-button:not([disabled]):not([tabindex="-1"]).vv-button--active,.vv-button-group--block .vv-button:not([disabled]):not([tabindex="-1"]):active){z-index:1}.vv-button-group--block :where(.vv-button){flex:1}:where(.vv-button-group--compact.vv-button-group--vertical .vv-button:not(:first-child)){border-top-right-radius:0;border-top-left-radius:0}:where(.vv-button-group--compact.vv-button-group--vertical .vv-button:not(:last-child)){border-bottom-right-radius:0;border-bottom-left-radius:0}:where(.vv-button-group--compact.vv-button-group--vertical .vv-button:not(:last-child):not(:last-child)){margin-block:calc(var(--button-border-width) * -1)}:where(.vv-button-group--compact:not(.vv-button-group--vertical) .vv-button:not(:first-child)){border-top-left-radius:0;border-bottom-left-radius:0}:where(.vv-button-group--compact:not(.vv-button-group--vertical) .vv-button:not(:last-child)){border-top-right-radius:0;border-bottom-right-radius:0}:where(.vv-button-group--compact:not(.vv-button-group--vertical) .vv-button:not(:last-child):not(:last-child)){margin-inline:calc(var(--button-border-width) * -1)}
package/dist/components/vv-button.css CHANGED
@@ -1 +1 @@
1
- :where(:host,:root,.theme){--vv-button-position: relative;--vv-button-background: var(--color-brand);--vv-button-border-radius: .5ch;--vv-button-border-style: solid;--vv-button-border-color: var(--color-brand);--vv-button-color: var(--color-white);--vv-button-font-family: var(--font-sans);--vv-button-font-weight: var(--font-semibold);--vv-button-gap: 1ch;--vv-button-line-height: var(--leading-normal);--vv-button-padding-block: .75ch;--vv-button-padding-inline: 1.75ch;--vv-button-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-transition: all .3s ease-in-out;--vv-button-will-change: all;--vv-button-min-width: 0;--vv-button-state-focus-visible-outline-offset: var(--spacing-4);--vv-button-state-focus-visible-outline: var(--spacing-px) solid var(--color-brand);--vv-button-state-hover-background: var(--color-brand-darken-1);--vv-button-state-hover-border-color: var(--color-brand-darken-1);--vv-button-state-active-background: var(--color-brand-darken-2);--vv-button-state-active-border-color: var(--color-brand-darken-2);--vv-button-state-selected-background: var(--color-brand-darken-2);--vv-button-state-selected-border-color: var(--color-brand-darken-2);--vv-button-state-disabled-opacity: .5;--vv-button-state-disabled-cursor: not-allowed;--vv-button-element-icon-block-size: 1.1em;--vv-button-element-icon-inline-size: 1.1em;--vv-button-element-icon-margin: 0;--vv-button-element-icon-stroke: currentcolor;--vv-button-element-icon-fill: none;--vv-button-element-icon-flex-shrink: 0;--vv-button-element-icon-stroke-linecap: round;--vv-button-element-icon-stroke-linejoin: round;--vv-button-element-label-white-space: nowrap;--vv-button-element-label-text-overflow: ellipsis;--vv-button-element-label-min-width: 0;--vv-button-element-label-overflow: hidden;--vv-button-modifier-primary-background: var(--color-gray-darken-3);--vv-button-modifier-primary-border-color: var(--color-gray-darken-3);--vv-button-modifier-primary-color: var(--color-white);--vv-button-modifier-primary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-darken-3);--vv-button-modifier-primary-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-primary-state-hover-border-color: var(--color-gray-darken-4);--vv-button-modifier-primary-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-primary-state-active-border-color: var(--color-gray-darken-5);--vv-button-modifier-primary-state-selected-background: var(--color-gray-darken-5);--vv-button-modifier-primary-state-selected-border-color: var(--color-gray-darken-5);--vv-button-modifier-secondary-background: var(--color-white);--vv-button-modifier-secondary-border-style: solid;--vv-button-modifier-secondary-border-color: var(--color-gray-lighten-4);--vv-button-modifier-secondary-color: var(--color-word);--vv-button-modifier-secondary-text-shadow: 0 1px 0 var(--color-gray-lighten-5);--vv-button-modifier-secondary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-secondary-state-hover-background: var(--color-gray-lighten-4);--vv-button-modifier-secondary-state-active-background: var(--color-gray-lighten-3);--vv-button-modifier-secondary-state-selected-background: var(--color-gray-lighten-3);--vv-button-modifier-danger-background: var(--color-danger);--vv-button-modifier-danger-border-color: var(--color-danger);--vv-button-modifier-danger-color: var(--color-white);--vv-button-modifier-danger-state-focus-visible-outline: var(--spacing-px) solid var(--color-danger);--vv-button-modifier-danger-state-hover-background: var(--color-danger-darken-1);--vv-button-modifier-danger-state-hover-border-color: var(--color-danger-darken-1);--vv-button-modifier-danger-state-active-background: var(--color-danger-darken-2);--vv-button-modifier-danger-state-active-border-color: var(--color-danger-darken-2);--vv-button-modifier-danger-state-selected-background: var(--color-danger-darken-2);--vv-button-modifier-danger-state-selected-border-color: var(--color-danger-darken-2);--vv-button-modifier-ghost-background: transparent;--vv-button-modifier-ghost-border-color: transparent;--vv-button-modifier-ghost-color: var(--color-gray);--vv-button-modifier-ghost-text-shadow: 0 1px 0 var(--color-gray-lighten-5);--vv-button-modifier-ghost-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-ghost-state-focus-visible-outline-offset: 0;--vv-button-modifier-ghost-state-hover-background: var(--color-gray-lighten-5);--vv-button-modifier-ghost-state-active-background: var(--color-gray-lighten-4);--vv-button-modifier-ghost-state-selected-background: var(--color-gray-lighten-4);--vv-button-modifier-link-background: transparent;--vv-button-modifier-link-border-color: var(--color-word);--vv-button-modifier-link-border-width: var(--border-0);--vv-button-modifier-link-border-radius: 0;--vv-button-modifier-link-padding: 0;--vv-button-modifier-link-color: var(--color-word);--vv-button-modifier-link-text-shadow: 0 1px 0 var(--color-gray-lighten-5);--vv-button-modifier-link-state-focus-visible-color: var(--color-brand);--vv-button-modifier-link-state-focus-visible-outline: none;--vv-button-modifier-link-state-hover-text-decoration: underline;--vv-button-modifier-link-state-hover-text-underline-offset: var(--spacing-4);--vv-button-modifier-static-light-background: var(--color-white);--vv-button-modifier-static-light-border-color: var(--color-white);--vv-button-modifier-static-light-color: var(--color-black);--vv-button-modifier-static-light-text-shadow: 0 1px 0 var(--color-gray-lighten-5);--vv-button-modifier-static-light-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-static-light-state-hover-border-color: var(--color-gray-lighten-5);--vv-button-modifier-static-light-state-hover-background: var(--color-gray-lighten-5);--vv-button-modifier-static-light-state-active-border-color: var(--color-gray-lighten-4);--vv-button-modifier-static-light-state-active-background: var(--color-gray-lighten-4);--vv-button-modifier-static-light-state-selected-border-color: var(--color-gray-lighten-4);--vv-button-modifier-static-light-state-selected-background: var(--color-gray-lighten-4);--vv-button-modifier-static-dark-background: var(--color-black);--vv-button-modifier-static-dark-border-color: var(--color-black);--vv-button-modifier-static-dark-color: var(--color-white);--vv-button-modifier-static-dark-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-modifier-static-dark-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-darken-4);--vv-button-modifier-static-dark-state-hover-border-color: var(--color-gray-darken-4);--vv-button-modifier-static-dark-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-static-dark-state-active-border-color: var(--color-gray-darken-3);--vv-button-modifier-static-dark-state-active-background: var(--color-gray-darken-3);--vv-button-modifier-static-dark-state-selected-border-color: var(--color-gray-darken-3);--vv-button-modifier-static-dark-state-selected-background: var(--color-gray-darken-3);--vv-button-modifier-action-font-size: .875em;--vv-button-modifier-action-background: var(--color-surface-1);--vv-button-modifier-action-color: var(--color-word-1);--vv-button-modifier-action-border-color: var(--color-word-5);--vv-button-modifier-action-font-weight: var(--font-normal);--vv-button-modifier-action-padding-inline: .75ch;--vv-button-modifier-action-padding-block: .5ch;--vv-button-modifier-action-line-height: var(--leading-snug);--vv-button-modifier-action-text-shadow: none;--vv-button-modifier-action-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-action-state-hover-background: var(--color-surface-2);--vv-button-modifier-action-state-active-background: var(--color-surface-5);--vv-button-modifier-action-state-selected-color: var(--color-white);--vv-button-modifier-action-state-selected-background: var(--color-gray);--vv-button-modifier-action-state-selected-border-color: var(--color-gray);--vv-button-modifier-action-element-icon-margin-inline: -.125ch;--vv-button-modifier-action-element-icon-block-size: calc(1em * var(--leading-snug));--vv-button-modifier-action-element-icon-inline-size: calc(1em * var(--leading-snug));--vv-button-modifier-action-quiet-font-size: var(--text-14);--vv-button-modifier-action-quiet-background: transparent;--vv-button-modifier-action-quiet-color: var(--color-word-1);--vv-button-modifier-action-quiet-border-color: transparent;--vv-button-modifier-action-quiet-font-weight: var(--font-normal);--vv-button-modifier-action-quiet-padding-inline: .75ch;--vv-button-modifier-action-quiet-padding-block: .5ch;--vv-button-modifier-action-quiet-line-height: var(--leading-snug);--vv-button-modifier-action-quiet-text-shadow: none;--vv-button-modifier-action-quiet-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-action-quiet-state-focus-visible-outline-offset: 0;--vv-button-modifier-action-quiet-state-hover-background: var(--color-surface-2);--vv-button-modifier-action-quiet-state-hover-border-color: var(--color-surface-2);--vv-button-modifier-action-quiet-state-active-background: var(--color-surface-5);--vv-button-modifier-action-quiet-state-active-border-color: var(--color-surface-5);--vv-button-modifier-action-quiet-state-selected-color: var(--color-white);--vv-button-modifier-action-quiet-state-selected-background: var(--color-gray);--vv-button-modifier-action-quiet-state-selected-border-color: var(--color-gray);--vv-button-modifier-action-quiet-element-icon-margin-inline: -.125ch;--vv-button-modifier-action-quiet-element-icon-block-size: calc(1em * var(--leading-snug));--vv-button-modifier-action-quiet-element-icon-inline-size: calc(1em * var(--leading-snug));--vv-button-modifier-rounded-border-radius: var(--rounded-full);--vv-button-modifier-rounded-element-icon-margin: 0 -1ch;--vv-button-modifier-block-display: block;--vv-button-modifier-block-width: 100%;--vv-button-modifier-block-max-width: auto;--vv-button-modifier-reverse-element-label-order: -1;--vv-button-modifier-column-flex-direction: column;--vv-button-modifier-column-gap: .2em;--vv-button-modifier-full-bleed-min-width: 20ch}:where(.vv-button):where(a[href],button,input[type=button],input[type=submit],input[type=reset]),:where(.vv-button)::file-selector-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;cursor:pointer;display:inline-flex;justify-content:center;text-align:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;--button-border-width: var(--border-2);position:var(--vv-button-position);background:var(--vv-button-background);border-radius:var(--vv-button-border-radius);border-width:var(--button-border-width);border-style:var(--vv-button-border-style);border-color:var(--vv-button-border-color);color:var(--vv-button-color);font-family:var(--vv-button-font-family);font-weight:var(--vv-button-font-weight);gap:var(--vv-button-gap);line-height:var(--vv-button-line-height);padding-block:var(--vv-button-padding-block);padding-inline:var(--vv-button-padding-inline);text-shadow:var(--vv-button-text-shadow);transition:var(--vv-button-transition);will-change:var(--vv-button-will-change);min-width:var(--vv-button-min-width)}@media (prefers-reduced-motion: reduce){:where(.vv-button):where(a[href],button,input[type=button],input[type=submit],input[type=reset]),:where(.vv-button)::file-selector-button{transition:none}}:where(.vv-button)::file-selector-button{-webkit-margin-end:var(--vv-button-gap, 1ch);margin-inline-end:var(--vv-button-gap, 1ch)}:where(.vv-button__icon,.vv-button > :where(svg,[data-icon])){block-size:var(--vv-button-element-icon-block-size);inline-size:var(--vv-button-element-icon-inline-size);margin:var(--vv-button-element-icon-margin);stroke:var(--vv-button-element-icon-stroke);fill:var(--vv-button-element-icon-fill);flex-shrink:var(--vv-button-element-icon-flex-shrink);stroke-linecap:var(--vv-button-element-icon-stroke-linecap);stroke-linejoin:var(--vv-button-element-icon-stroke-linejoin)}:where(.vv-button__label){white-space:var(--vv-button-element-label-white-space);text-overflow:var(--vv-button-element-label-text-overflow);min-width:var(--vv-button-element-label-min-width);overflow:var(--vv-button-element-label-overflow)}:where(.vv-button--focus-visible,.vv-button.focus-visible,.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline-offset:var(--vv-button-state-focus-visible-outline-offset);outline:var(--vv-button-state-focus-visible-outline)}:where(.vv-button--hover,.vv-button.hover,.vv-button:not([disabled]):hover){--vv-button-background: var(--vv-button-state-hover-background);--vv-button-border-color: var(--vv-button-state-hover-border-color)}:where(.vv-button--active,.vv-button.active,.vv-button:not([disabled]):active){--vv-button-background: var(--vv-button-state-active-background);--vv-button-border-color: var(--vv-button-state-active-border-color)}:where(.vv-button--selected,.vv-button.selected,.vv-button[aria-selected=true]){--vv-button-background: var(--vv-button-state-selected-background);--vv-button-border-color: var(--vv-button-state-selected-border-color)}:where(.vv-button--disabled,.vv-button.disabled,.vv-button[disabled],.vv-button[aria-disabled=true]){opacity:var(--vv-button-state-disabled-opacity);cursor:var(--vv-button-state-disabled-cursor)}:where(.vv-button--primary.vv-button){--vv-button-background: var(--vv-button-modifier-primary-background);--vv-button-border-color: var(--vv-button-modifier-primary-border-color);--vv-button-color: var(--vv-button-modifier-primary-color)}:where(.vv-button--primary.vv-button--focus-visible,.vv-button--primary.vv-button.focus-visible,.vv-button--primary.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-primary-state-focus-visible-outline)}:where(.vv-button--primary.vv-button--hover,.vv-button--primary.vv-button.hover,.vv-button--primary.vv-button:not([disabled]):hover){--vv-button-modifier-primary-background: var(--vv-button-modifier-primary-state-hover-background);--vv-button-modifier-primary-border-color: var(--vv-button-modifier-primary-state-hover-border-color)}:where(.vv-button--primary.vv-button--active,.vv-button--primary.vv-button.active,.vv-button--primary.vv-button:not([disabled]):active){--vv-button-modifier-primary-background: var(--vv-button-modifier-primary-state-active-background);--vv-button-modifier-primary-border-color: var(--vv-button-modifier-primary-state-active-border-color)}:where(.vv-button--primary.vv-button--selected,.vv-button--primary.vv-button.selected,.vv-button--primary.vv-button[aria-selected=true]){--vv-button-modifier-primary-background: var(--vv-button-modifier-primary-state-selected-background);--vv-button-modifier-primary-border-color: var(--vv-button-modifier-primary-state-selected-border-color)}:where(.vv-button--secondary.vv-button){--vv-button-background: var(--vv-button-modifier-secondary-background);--vv-button-border-style: var(--vv-button-modifier-secondary-border-style);--vv-button-border-color: var(--vv-button-modifier-secondary-border-color);--vv-button-color: var(--vv-button-modifier-secondary-color);--vv-button-text-shadow: var(--vv-button-modifier-secondary-text-shadow)}:where(.vv-button--secondary.vv-button--focus-visible,.vv-button--secondary.vv-button.focus-visible,.vv-button--secondary.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-secondary-state-focus-visible-outline)}:where(.vv-button--secondary.vv-button--hover,.vv-button--secondary.vv-button.hover,.vv-button--secondary.vv-button:not([disabled]):hover){--vv-button-modifier-secondary-background: var(--vv-button-modifier-secondary-state-hover-background)}:where(.vv-button--secondary.vv-button--active,.vv-button--secondary.vv-button.active,.vv-button--secondary.vv-button:not([disabled]):active){--vv-button-modifier-secondary-background: var(--vv-button-modifier-secondary-state-active-background)}:where(.vv-button--secondary.vv-button--selected,.vv-button--secondary.vv-button.selected,.vv-button--secondary.vv-button[aria-selected=true]){--vv-button-modifier-secondary-background: var(--vv-button-modifier-secondary-state-selected-background)}:where(.vv-button--danger.vv-button){--vv-button-background: var(--vv-button-modifier-danger-background);--vv-button-border-color: var(--vv-button-modifier-danger-border-color);--vv-button-color: var(--vv-button-modifier-danger-color)}:where(.vv-button--danger.vv-button--focus-visible,.vv-button--danger.vv-button.focus-visible,.vv-button--danger.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-danger-state-focus-visible-outline)}:where(.vv-button--danger.vv-button--hover,.vv-button--danger.vv-button.hover,.vv-button--danger.vv-button:not([disabled]):hover){--vv-button-modifier-danger-background: var(--vv-button-modifier-danger-state-hover-background);--vv-button-modifier-danger-border-color: var(--vv-button-modifier-danger-state-hover-border-color)}:where(.vv-button--danger.vv-button--active,.vv-button--danger.vv-button.active,.vv-button--danger.vv-button:not([disabled]):active){--vv-button-modifier-danger-background: var(--vv-button-modifier-danger-state-active-background);--vv-button-modifier-danger-border-color: var(--vv-button-modifier-danger-state-active-border-color)}:where(.vv-button--danger.vv-button--selected,.vv-button--danger.vv-button.selected,.vv-button--danger.vv-button[aria-selected=true]){--vv-button-modifier-danger-background: var(--vv-button-modifier-danger-state-selected-background);--vv-button-modifier-danger-border-color: var(--vv-button-modifier-danger-state-selected-border-color)}:where(.vv-button--ghost.vv-button){--vv-button-background: var(--vv-button-modifier-ghost-background);--vv-button-border-color: var(--vv-button-modifier-ghost-border-color);--vv-button-color: var(--vv-button-modifier-ghost-color);--vv-button-text-shadow: var(--vv-button-modifier-ghost-text-shadow)}:where(.vv-button--ghost.vv-button--focus-visible,.vv-button--ghost.vv-button.focus-visible,.vv-button--ghost.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-ghost-state-focus-visible-outline);outline-offset:var(--vv-button-modifier-ghost-state-focus-visible-outline-offset)}:where(.vv-button--ghost.vv-button--hover,.vv-button--ghost.vv-button.hover,.vv-button--ghost.vv-button:not([disabled]):hover){--vv-button-modifier-ghost-background: var(--vv-button-modifier-ghost-state-hover-background)}:where(.vv-button--ghost.vv-button--active,.vv-button--ghost.vv-button.active,.vv-button--ghost.vv-button:not([disabled]):active){--vv-button-modifier-ghost-background: var(--vv-button-modifier-ghost-state-active-background)}:where(.vv-button--ghost.vv-button--selected,.vv-button--ghost.vv-button.selected,.vv-button--ghost.vv-button[aria-selected=true]){--vv-button-modifier-ghost-background: var(--vv-button-modifier-ghost-state-selected-background)}:where(.vv-button--link.vv-button){--vv-button-background: var(--vv-button-modifier-link-background);--vv-button-border-color: var(--vv-button-modifier-link-border-color);border-width:var(--vv-button-modifier-link-border-width);--vv-button-border-radius: var(--vv-button-modifier-link-border-radius);padding:var(--vv-button-modifier-link-padding);--vv-button-color: var(--vv-button-modifier-link-color);--vv-button-text-shadow: var(--vv-button-modifier-link-text-shadow)}:where(.vv-button--link.vv-button--focus-visible,.vv-button--link.vv-button.focus-visible,.vv-button--link.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){--vv-button-modifier-link-color: var(--vv-button-modifier-link-state-focus-visible-color);outline:var(--vv-button-modifier-link-state-focus-visible-outline)}:where(.vv-button--link.vv-button--hover,.vv-button--link.vv-button.hover,.vv-button--link.vv-button:not([disabled]):hover){-webkit-text-decoration:var(--vv-button-modifier-link-state-hover-text-decoration);text-decoration:var(--vv-button-modifier-link-state-hover-text-decoration);text-underline-offset:var(--vv-button-modifier-link-state-hover-text-underline-offset)}:where(.vv-button--static-light.vv-button){--vv-button-background: var(--vv-button-modifier-static-light-background);--vv-button-border-color: var(--vv-button-modifier-static-light-border-color);--vv-button-color: var(--vv-button-modifier-static-light-color);--vv-button-text-shadow: var(--vv-button-modifier-static-light-text-shadow)}:where(.vv-button--static-light.vv-button--focus-visible,.vv-button--static-light.vv-button.focus-visible,.vv-button--static-light.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-static-light-state-focus-visible-outline)}:where(.vv-button--static-light.vv-button--hover,.vv-button--static-light.vv-button.hover,.vv-button--static-light.vv-button:not([disabled]):hover){--vv-button-modifier-static-light-border-color: var(--vv-button-modifier-static-light-state-hover-border-color);--vv-button-modifier-static-light-background: var(--vv-button-modifier-static-light-state-hover-background)}:where(.vv-button--static-light.vv-button--active,.vv-button--static-light.vv-button.active,.vv-button--static-light.vv-button:not([disabled]):active){--vv-button-modifier-static-light-border-color: var(--vv-button-modifier-static-light-state-active-border-color);--vv-button-modifier-static-light-background: var(--vv-button-modifier-static-light-state-active-background)}:where(.vv-button--static-light.vv-button--selected,.vv-button--static-light.vv-button.selected,.vv-button--static-light.vv-button[aria-selected=true]){--vv-button-modifier-static-light-border-color: var(--vv-button-modifier-static-light-state-selected-border-color);--vv-button-modifier-static-light-background: var(--vv-button-modifier-static-light-state-selected-background)}:where(.vv-button--static-dark.vv-button){--vv-button-background: var(--vv-button-modifier-static-dark-background);--vv-button-border-color: var(--vv-button-modifier-static-dark-border-color);--vv-button-color: var(--vv-button-modifier-static-dark-color);--vv-button-text-shadow: var(--vv-button-modifier-static-dark-text-shadow)}:where(.vv-button--static-dark.vv-button--focus-visible,.vv-button--static-dark.vv-button.focus-visible,.vv-button--static-dark.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-static-dark-state-focus-visible-outline)}:where(.vv-button--static-dark.vv-button--hover,.vv-button--static-dark.vv-button.hover,.vv-button--static-dark.vv-button:not([disabled]):hover){--vv-button-modifier-static-dark-border-color: var(--vv-button-modifier-static-dark-state-hover-border-color);--vv-button-modifier-static-dark-background: var(--vv-button-modifier-static-dark-state-hover-background)}:where(.vv-button--static-dark.vv-button--active,.vv-button--static-dark.vv-button.active,.vv-button--static-dark.vv-button:not([disabled]):active){--vv-button-modifier-static-dark-border-color: var(--vv-button-modifier-static-dark-state-active-border-color);--vv-button-modifier-static-dark-background: var(--vv-button-modifier-static-dark-state-active-background)}:where(.vv-button--static-dark.vv-button--selected,.vv-button--static-dark.vv-button.selected,.vv-button--static-dark.vv-button[aria-selected=true]){--vv-button-modifier-static-dark-border-color: var(--vv-button-modifier-static-dark-state-selected-border-color);--vv-button-modifier-static-dark-background: var(--vv-button-modifier-static-dark-state-selected-background)}:where(.vv-button--action.vv-button){--button-border-width: var(--border);font-size:var(--vv-button-modifier-action-font-size);--vv-button-background: var(--vv-button-modifier-action-background);--vv-button-color: var(--vv-button-modifier-action-color);--vv-button-border-color: var(--vv-button-modifier-action-border-color);--vv-button-font-weight: var(--vv-button-modifier-action-font-weight);--vv-button-padding-inline: var(--vv-button-modifier-action-padding-inline);--vv-button-padding-block: var(--vv-button-modifier-action-padding-block);--vv-button-line-height: var(--vv-button-modifier-action-line-height);--vv-button-text-shadow: var(--vv-button-modifier-action-text-shadow)}:where(.vv-button--action .vv-button__icon,.vv-button--action > :where(svg,[data-icon])){margin-inline:var(--vv-button-modifier-action-element-icon-margin-inline);block-size:var(--vv-button-modifier-action-element-icon-block-size);inline-size:var(--vv-button-modifier-action-element-icon-inline-size)}:where(.vv-button--action.vv-button--focus-visible,.vv-button--action.vv-button.focus-visible,.vv-button--action.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-action-state-focus-visible-outline)}:where(.vv-button--action.vv-button--hover,.vv-button--action.vv-button.hover,.vv-button--action.vv-button:not([disabled]):hover){--vv-button-modifier-action-background: var(--vv-button-modifier-action-state-hover-background)}:where(.vv-button--action.vv-button--active,.vv-button--action.vv-button.active,.vv-button--action.vv-button:not([disabled]):active){--vv-button-modifier-action-background: var(--vv-button-modifier-action-state-active-background)}:where(.vv-button--action.vv-button--selected,.vv-button--action.vv-button.selected,.vv-button--action.vv-button[aria-selected=true]){--vv-button-modifier-action-color: var(--vv-button-modifier-action-state-selected-color);--vv-button-modifier-action-background: var(--vv-button-modifier-action-state-selected-background);--vv-button-modifier-action-border-color: var(--vv-button-modifier-action-state-selected-border-color)}:where(.vv-button--action-quiet.vv-button){--button-border-width: var(--border);font-size:var(--vv-button-modifier-action-quiet-font-size);--vv-button-background: var(--vv-button-modifier-action-quiet-background);--vv-button-color: var(--vv-button-modifier-action-quiet-color);--vv-button-border-color: var(--vv-button-modifier-action-quiet-border-color);--vv-button-font-weight: var(--vv-button-modifier-action-quiet-font-weight);--vv-button-padding-inline: var(--vv-button-modifier-action-quiet-padding-inline);--vv-button-padding-block: var(--vv-button-modifier-action-quiet-padding-block);--vv-button-line-height: var(--vv-button-modifier-action-quiet-line-height);--vv-button-text-shadow: var(--vv-button-modifier-action-quiet-text-shadow)}:where(.vv-button--action-quiet .vv-button__icon,.vv-button--action-quiet > :where(svg,[data-icon])){margin-inline:var(--vv-button-modifier-action-quiet-element-icon-margin-inline);block-size:var(--vv-button-modifier-action-quiet-element-icon-block-size);inline-size:var(--vv-button-modifier-action-quiet-element-icon-inline-size)}:where(.vv-button--action-quiet.vv-button--focus-visible,.vv-button--action-quiet.vv-button.focus-visible,.vv-button--action-quiet.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-action-quiet-state-focus-visible-outline);outline-offset:var(--vv-button-modifier-action-quiet-state-focus-visible-outline-offset)}:where(.vv-button--action-quiet.vv-button--hover,.vv-button--action-quiet.vv-button.hover,.vv-button--action-quiet.vv-button:not([disabled]):hover){--vv-button-modifier-action-quiet-background: var(--vv-button-modifier-action-quiet-state-hover-background);--vv-button-modifier-action-quiet-border-color: var(--vv-button-modifier-action-quiet-state-hover-border-color)}:where(.vv-button--action-quiet.vv-button--active,.vv-button--action-quiet.vv-button.active,.vv-button--action-quiet.vv-button:not([disabled]):active){--vv-button-modifier-action-quiet-background: var(--vv-button-modifier-action-quiet-state-active-background);--vv-button-modifier-action-quiet-border-color: var(--vv-button-modifier-action-quiet-state-active-border-color)}:where(.vv-button--action-quiet.vv-button--selected,.vv-button--action-quiet.vv-button.selected,.vv-button--action-quiet.vv-button[aria-selected=true]){--vv-button-modifier-action-quiet-color: var(--vv-button-modifier-action-quiet-state-selected-color);--vv-button-modifier-action-quiet-background: var(--vv-button-modifier-action-quiet-state-selected-background);--vv-button-modifier-action-quiet-border-color: var(--vv-button-modifier-action-quiet-state-selected-border-color)}:where(.vv-button--rounded.vv-button){--vv-button-border-radius: var(--vv-button-modifier-rounded-border-radius)}:where(.vv-button--rounded .vv-button__icon,.vv-button--rounded > :where(svg,[data-icon])){margin:var(--vv-button-modifier-rounded-element-icon-margin)}:where(.vv-button--block.vv-button){display:var(--vv-button-modifier-block-display);width:var(--vv-button-modifier-block-width);max-width:var(--vv-button-modifier-block-max-width)}:where(.vv-button--reverse .vv-button__label){order:var(--vv-button-modifier-reverse-element-label-order)}:where(.vv-button--column.vv-button){flex-direction:var(--vv-button-modifier-column-flex-direction);--vv-button-gap: var(--vv-button-modifier-column-gap)}:where(.vv-button--full-bleed.vv-button){--vv-button-min-width: var(--vv-button-modifier-full-bleed-min-width)}
1
+ :where(:host,:root,.theme){--vv-button-position: relative;--vv-button-background: var(--color-brand);--vv-button-border-radius: .5ch;--vv-button-border-style: solid;--vv-button-border-color: var(--color-brand);--vv-button-color: var(--color-white);--vv-button-font-family: var(--font-sans);--vv-button-font-weight: var(--font-semibold);--vv-button-gap: 1ch;--vv-button-padding-block: .75ch;--vv-button-padding-inline: 1.75ch;--vv-button-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-transition: var(--transition-all);--vv-button-will-change: all;--vv-button-min-width: 0;--vv-button-state-focus-visible-outline-offset: var(--spacing-4);--vv-button-state-focus-visible-outline: var(--spacing-px) solid var(--color-brand);--vv-button-state-hover-background: var(--color-brand-darken-1);--vv-button-state-hover-border-color: var(--color-brand-darken-1);--vv-button-state-hover-text-decoration: none;--vv-button-state-active-background: var(--color-brand-darken-2);--vv-button-state-active-border-color: var(--color-brand-darken-2);--vv-button-state-pressed-background: var(--color-brand-darken-2);--vv-button-state-pressed-border-color: var(--color-brand-darken-2);--vv-button-state-disabled-opacity: var(--opacity-50);--vv-button-state-disabled-cursor: not-allowed;--vv-button-element-icon-block-size: 1.1em;--vv-button-element-icon-inline-size: 1.1em;--vv-button-element-icon-margin: 0;--vv-button-element-icon-stroke: currentcolor;--vv-button-element-icon-fill: none;--vv-button-element-icon-flex-shrink: 0;--vv-button-element-icon-stroke-linecap: round;--vv-button-element-icon-stroke-linejoin: round;--vv-button-element-label-white-space: nowrap;--vv-button-element-label-text-overflow: ellipsis;--vv-button-element-label-min-width: 0;--vv-button-element-label-overflow: hidden;--vv-button-modifier-primary-background: var(--color-gray-darken-3);--vv-button-modifier-primary-border-color: var(--color-gray-darken-3);--vv-button-modifier-primary-color: var(--color-white);--vv-button-modifier-primary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-darken-3);--vv-button-modifier-primary-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-primary-state-hover-border-color: var(--color-gray-darken-4);--vv-button-modifier-primary-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-primary-state-active-border-color: var(--color-gray-darken-5);--vv-button-modifier-primary-state-pressed-background: var(--color-gray-darken-5);--vv-button-modifier-primary-state-pressed-border-color: var(--color-gray-darken-5);--vv-button-modifier-secondary-background: var(--color-white);--vv-button-modifier-secondary-border-style: solid;--vv-button-modifier-secondary-border-color: var(--color-gray-lighten-4);--vv-button-modifier-secondary-color: var(--color-word);--vv-button-modifier-secondary-text-shadow: 0 1px 0 var(--color-gray-lighten-5);--vv-button-modifier-secondary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-secondary-state-hover-background: var(--color-gray-lighten-4);--vv-button-modifier-secondary-state-active-background: var(--color-gray-lighten-3);--vv-button-modifier-secondary-state-pressed-background: var(--color-gray-lighten-4);--vv-button-modifier-danger-background: var(--color-danger);--vv-button-modifier-danger-border-color: var(--color-danger);--vv-button-modifier-danger-color: var(--color-white);--vv-button-modifier-danger-state-focus-visible-outline: var(--spacing-px) solid var(--color-danger);--vv-button-modifier-danger-state-hover-background: var(--color-danger-darken-1);--vv-button-modifier-danger-state-hover-border-color: var(--color-danger-darken-1);--vv-button-modifier-danger-state-active-background: var(--color-danger-darken-2);--vv-button-modifier-danger-state-active-border-color: var(--color-danger-darken-2);--vv-button-modifier-danger-state-pressed-background: var(--color-danger-darken-2);--vv-button-modifier-danger-state-pressed-border-color: var(--color-danger-darken-2);--vv-button-modifier-ghost-background: transparent;--vv-button-modifier-ghost-border-color: transparent;--vv-button-modifier-ghost-color: var(--color-gray-darken-1);--vv-button-modifier-ghost-text-shadow: 0 1px 0 var(--color-gray-lighten-5);--vv-button-modifier-ghost-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-ghost-state-focus-visible-outline-offset: var(--spacing-0);--vv-button-modifier-ghost-state-hover-background: var(--color-gray-lighten-5);--vv-button-modifier-ghost-state-active-background: var(--color-gray-lighten-4);--vv-button-modifier-ghost-state-pressed-background: var(--color-gray-lighten-4);--vv-button-modifier-link-background: transparent;--vv-button-modifier-link-border-width: var(--border-0);--vv-button-modifier-link-padding: 0;--vv-button-modifier-link-color: var(--color-brand-darken-1);--vv-button-modifier-link-font-weight: var(--font-normal);--vv-button-modifier-link-text-shadow: none;--vv-button-modifier-link-state-focus-visible-outline: var(--spacing-px) solid var(--color-brand-lighten-4);--vv-button-modifier-link-state-focus-visible-outline-offset: var(--spacing-4);--vv-button-modifier-link-state-hover-text-decoration: underline;--vv-button-modifier-link-state-hover-text-underline-offset: var(--spacing-4);--vv-button-modifier-link-state-active-color: var(--color-brand-darken-3);--vv-button-modifier-static-light-background: var(--color-white);--vv-button-modifier-static-light-border-color: var(--color-white);--vv-button-modifier-static-light-color: var(--color-black);--vv-button-modifier-static-light-text-shadow: 0 1px 0 var(--color-gray-lighten-5);--vv-button-modifier-static-light-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-static-light-state-hover-border-color: var(--color-gray-lighten-5);--vv-button-modifier-static-light-state-hover-background: var(--color-gray-lighten-5);--vv-button-modifier-static-light-state-active-border-color: var(--color-gray-lighten-4);--vv-button-modifier-static-light-state-active-background: var(--color-gray-lighten-4);--vv-button-modifier-static-light-state-pressed-border-color: var(--color-gray-lighten-4);--vv-button-modifier-static-light-state-pressed-background: var(--color-gray-lighten-4);--vv-button-modifier-static-dark-background: var(--color-black);--vv-button-modifier-static-dark-border-color: var(--color-black);--vv-button-modifier-static-dark-color: var(--color-white);--vv-button-modifier-static-dark-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-modifier-static-dark-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-darken-4);--vv-button-modifier-static-dark-state-hover-border-color: var(--color-gray-darken-4);--vv-button-modifier-static-dark-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-static-dark-state-active-border-color: var(--color-gray-darken-3);--vv-button-modifier-static-dark-state-active-background: var(--color-gray-darken-3);--vv-button-modifier-static-dark-state-pressed-border-color: var(--color-gray-darken-3);--vv-button-modifier-static-dark-state-pressed-background: var(--color-gray-darken-3);--vv-button-modifier-action-font-size: var(--text-14);--vv-button-modifier-action-background: var(--color-surface-1);--vv-button-modifier-action-color: var(--color-word-1);--vv-button-modifier-action-border-color: var(--color-word-5);--vv-button-modifier-action-font-weight: var(--font-normal);--vv-button-modifier-action-padding-inline: .75ch;--vv-button-modifier-action-padding-block: .5ch;--vv-button-modifier-action-text-shadow: none;--vv-button-modifier-action-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-action-state-hover-background: var(--color-surface-2);--vv-button-modifier-action-state-active-background: var(--color-surface-5);--vv-button-modifier-action-state-pressed-color: var(--color-white);--vv-button-modifier-action-state-pressed-background: var(--color-gray);--vv-button-modifier-action-state-pressed-border-color: var(--color-gray);--vv-button-modifier-action-element-icon-margin-inline: -.125ch;--vv-button-modifier-action-element-icon-block-size: calc(1em * var(--leading-snug));--vv-button-modifier-action-element-icon-inline-size: calc(1em * var(--leading-snug));--vv-button-modifier-action-quiet-font-size: var(--text-14);--vv-button-modifier-action-quiet-background: transparent;--vv-button-modifier-action-quiet-color: var(--color-word-1);--vv-button-modifier-action-quiet-border-color: transparent;--vv-button-modifier-action-quiet-font-weight: var(--font-normal);--vv-button-modifier-action-quiet-padding-inline: .75ch;--vv-button-modifier-action-quiet-padding-block: .5ch;--vv-button-modifier-action-quiet-text-shadow: none;--vv-button-modifier-action-quiet-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-action-quiet-state-focus-visible-outline-offset: var(--spacing-0);--vv-button-modifier-action-quiet-state-hover-background: var(--color-surface-2);--vv-button-modifier-action-quiet-state-hover-border-color: var(--color-surface-2);--vv-button-modifier-action-quiet-state-active-background: var(--color-surface-5);--vv-button-modifier-action-quiet-state-active-border-color: var(--color-surface-5);--vv-button-modifier-action-quiet-state-pressed-color: var(--color-white);--vv-button-modifier-action-quiet-state-pressed-background: var(--color-gray);--vv-button-modifier-action-quiet-state-pressed-border-color: var(--color-gray);--vv-button-modifier-action-quiet-element-icon-margin-inline: -.125ch;--vv-button-modifier-action-quiet-element-icon-block-size: calc(1em * var(--leading-snug));--vv-button-modifier-action-quiet-element-icon-inline-size: calc(1em * var(--leading-snug));--vv-button-modifier-rounded-border-radius: var(--rounded-full);--vv-button-modifier-rounded-element-icon-margin: 0 -1ch;--vv-button-modifier-block-display: block;--vv-button-modifier-block-width: 100%;--vv-button-modifier-block-max-width: auto;--vv-button-modifier-reverse-element-label-order: -1;--vv-button-modifier-column-flex-direction: column;--vv-button-modifier-column-gap: .2em;--vv-button-modifier-full-bleed-min-width: 20ch}:where(.vv-button):where(a[href],button,input[type=button],input[type=submit],input[type=reset]),:where(.vv-button)::file-selector-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;cursor:pointer;display:inline-flex;justify-content:center;text-align:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;--button-border-width: var(--border-2);--button-line-height: var(--leading-normal);border-width:var(--button-border-width);line-height:var(--button-line-height);position:var(--vv-button-position);background:var(--vv-button-background);border-radius:var(--vv-button-border-radius);border-style:var(--vv-button-border-style);border-color:var(--vv-button-border-color);color:var(--vv-button-color);font-family:var(--vv-button-font-family);font-weight:var(--vv-button-font-weight);gap:var(--vv-button-gap);padding-block:var(--vv-button-padding-block);padding-inline:var(--vv-button-padding-inline);text-shadow:var(--vv-button-text-shadow);transition:var(--vv-button-transition);will-change:var(--vv-button-will-change);min-width:var(--vv-button-min-width)}:where(.vv-button)::file-selector-button{-webkit-margin-end:var(--vv-button-gap, 1ch);margin-inline-end:var(--vv-button-gap, 1ch)}:where(.vv-button__icon,.vv-button > :where(svg,[data-icon])){block-size:var(--vv-button-element-icon-block-size);inline-size:var(--vv-button-element-icon-inline-size);margin:var(--vv-button-element-icon-margin);stroke:var(--vv-button-element-icon-stroke);fill:var(--vv-button-element-icon-fill);flex-shrink:var(--vv-button-element-icon-flex-shrink);stroke-linecap:var(--vv-button-element-icon-stroke-linecap);stroke-linejoin:var(--vv-button-element-icon-stroke-linejoin)}:where(.vv-button__label){white-space:var(--vv-button-element-label-white-space);text-overflow:var(--vv-button-element-label-text-overflow);min-width:var(--vv-button-element-label-min-width);overflow:var(--vv-button-element-label-overflow)}:where(.vv-button--focus-visible,.vv-button.focus-visible,.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline-offset:var(--vv-button-state-focus-visible-outline-offset);outline:var(--vv-button-state-focus-visible-outline)}:where(.vv-button--hover,.vv-button.hover,.vv-button:not([disabled]):hover){--vv-button-background: var(--vv-button-state-hover-background);--vv-button-border-color: var(--vv-button-state-hover-border-color);-webkit-text-decoration:var(--vv-button-state-hover-text-decoration);text-decoration:var(--vv-button-state-hover-text-decoration)}:where(.vv-button--active,.vv-button.active,.vv-button:not([disabled]):active){--vv-button-background: var(--vv-button-state-active-background);--vv-button-border-color: var(--vv-button-state-active-border-color)}:where(.vv-button--pressed,.vv-button.pressed,.vv-button[aria-pressed=true]){--vv-button-background: var(--vv-button-state-pressed-background);--vv-button-border-color: var(--vv-button-state-pressed-border-color)}:where(.vv-button--disabled,.vv-button.disabled,.vv-button[disabled],.vv-button[aria-disabled=true]){opacity:var(--vv-button-state-disabled-opacity);cursor:var(--vv-button-state-disabled-cursor)}:where(.vv-button--primary.vv-button){--vv-button-background: var(--vv-button-modifier-primary-background);--vv-button-border-color: var(--vv-button-modifier-primary-border-color);--vv-button-color: var(--vv-button-modifier-primary-color)}:where(.vv-button--primary.vv-button--focus-visible,.vv-button--primary.vv-button.focus-visible,.vv-button--primary.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-primary-state-focus-visible-outline)}:where(.vv-button--primary.vv-button--hover,.vv-button--primary.vv-button.hover,.vv-button--primary.vv-button:not([disabled]):hover){--vv-button-modifier-primary-background: var(--vv-button-modifier-primary-state-hover-background);--vv-button-modifier-primary-border-color: var(--vv-button-modifier-primary-state-hover-border-color)}:where(.vv-button--primary.vv-button--active,.vv-button--primary.vv-button.active,.vv-button--primary.vv-button:not([disabled]):active){--vv-button-modifier-primary-background: var(--vv-button-modifier-primary-state-active-background);--vv-button-modifier-primary-border-color: var(--vv-button-modifier-primary-state-active-border-color)}:where(.vv-button--primary.vv-button--pressed,.vv-button--primary.vv-button.pressed,.vv-button--primary.vv-button[aria-pressed=true]){--vv-button-modifier-primary-background: var(--vv-button-modifier-primary-state-pressed-background);--vv-button-modifier-primary-border-color: var(--vv-button-modifier-primary-state-pressed-border-color)}:where(.vv-button--secondary.vv-button){--vv-button-background: var(--vv-button-modifier-secondary-background);--vv-button-border-style: var(--vv-button-modifier-secondary-border-style);--vv-button-border-color: var(--vv-button-modifier-secondary-border-color);--vv-button-color: var(--vv-button-modifier-secondary-color);--vv-button-text-shadow: var(--vv-button-modifier-secondary-text-shadow)}:where(.vv-button--secondary.vv-button--focus-visible,.vv-button--secondary.vv-button.focus-visible,.vv-button--secondary.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-secondary-state-focus-visible-outline)}:where(.vv-button--secondary.vv-button--hover,.vv-button--secondary.vv-button.hover,.vv-button--secondary.vv-button:not([disabled]):hover){--vv-button-modifier-secondary-background: var(--vv-button-modifier-secondary-state-hover-background)}:where(.vv-button--secondary.vv-button--active,.vv-button--secondary.vv-button.active,.vv-button--secondary.vv-button:not([disabled]):active){--vv-button-modifier-secondary-background: var(--vv-button-modifier-secondary-state-active-background)}:where(.vv-button--secondary.vv-button--pressed,.vv-button--secondary.vv-button.pressed,.vv-button--secondary.vv-button[aria-pressed=true]){--vv-button-modifier-secondary-background: var(--vv-button-modifier-secondary-state-pressed-background)}:where(.vv-button--danger.vv-button){--vv-button-background: var(--vv-button-modifier-danger-background);--vv-button-border-color: var(--vv-button-modifier-danger-border-color);--vv-button-color: var(--vv-button-modifier-danger-color)}:where(.vv-button--danger.vv-button--focus-visible,.vv-button--danger.vv-button.focus-visible,.vv-button--danger.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-danger-state-focus-visible-outline)}:where(.vv-button--danger.vv-button--hover,.vv-button--danger.vv-button.hover,.vv-button--danger.vv-button:not([disabled]):hover){--vv-button-modifier-danger-background: var(--vv-button-modifier-danger-state-hover-background);--vv-button-modifier-danger-border-color: var(--vv-button-modifier-danger-state-hover-border-color)}:where(.vv-button--danger.vv-button--active,.vv-button--danger.vv-button.active,.vv-button--danger.vv-button:not([disabled]):active){--vv-button-modifier-danger-background: var(--vv-button-modifier-danger-state-active-background);--vv-button-modifier-danger-border-color: var(--vv-button-modifier-danger-state-active-border-color)}:where(.vv-button--danger.vv-button--pressed,.vv-button--danger.vv-button.pressed,.vv-button--danger.vv-button[aria-pressed=true]){--vv-button-modifier-danger-background: var(--vv-button-modifier-danger-state-pressed-background);--vv-button-modifier-danger-border-color: var(--vv-button-modifier-danger-state-pressed-border-color)}:where(.vv-button--ghost.vv-button){--vv-button-background: var(--vv-button-modifier-ghost-background);--vv-button-border-color: var(--vv-button-modifier-ghost-border-color);--vv-button-color: var(--vv-button-modifier-ghost-color);--vv-button-text-shadow: var(--vv-button-modifier-ghost-text-shadow)}:where(.vv-button--ghost.vv-button--focus-visible,.vv-button--ghost.vv-button.focus-visible,.vv-button--ghost.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-ghost-state-focus-visible-outline);outline-offset:var(--vv-button-modifier-ghost-state-focus-visible-outline-offset)}:where(.vv-button--ghost.vv-button--hover,.vv-button--ghost.vv-button.hover,.vv-button--ghost.vv-button:not([disabled]):hover){--vv-button-modifier-ghost-background: var(--vv-button-modifier-ghost-state-hover-background)}:where(.vv-button--ghost.vv-button--active,.vv-button--ghost.vv-button.active,.vv-button--ghost.vv-button:not([disabled]):active){--vv-button-modifier-ghost-background: var(--vv-button-modifier-ghost-state-active-background)}:where(.vv-button--ghost.vv-button--pressed,.vv-button--ghost.vv-button.pressed,.vv-button--ghost.vv-button[aria-pressed=true]){--vv-button-modifier-ghost-background: var(--vv-button-modifier-ghost-state-pressed-background)}:where(.vv-button--link.vv-button){--vv-button-background: var(--vv-button-modifier-link-background);border-width:var(--vv-button-modifier-link-border-width);padding:var(--vv-button-modifier-link-padding);--vv-button-color: var(--vv-button-modifier-link-color);--vv-button-font-weight: var(--vv-button-modifier-link-font-weight);--vv-button-text-shadow: var(--vv-button-modifier-link-text-shadow)}:where(.vv-button--link.vv-button--focus-visible,.vv-button--link.vv-button.focus-visible,.vv-button--link.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-link-state-focus-visible-outline);outline-offset:var(--vv-button-modifier-link-state-focus-visible-outline-offset)}:where(.vv-button--link.vv-button--hover,.vv-button--link.vv-button.hover,.vv-button--link.vv-button:not([disabled]):hover){-webkit-text-decoration:var(--vv-button-modifier-link-state-hover-text-decoration);text-decoration:var(--vv-button-modifier-link-state-hover-text-decoration);text-underline-offset:var(--vv-button-modifier-link-state-hover-text-underline-offset)}:where(.vv-button--link.vv-button--active,.vv-button--link.vv-button.active,.vv-button--link.vv-button:not([disabled]):active){--vv-button-modifier-link-color: var(--vv-button-modifier-link-state-active-color)}:where(.vv-button--static-light.vv-button){--vv-button-background: var(--vv-button-modifier-static-light-background);--vv-button-border-color: var(--vv-button-modifier-static-light-border-color);--vv-button-color: var(--vv-button-modifier-static-light-color);--vv-button-text-shadow: var(--vv-button-modifier-static-light-text-shadow)}:where(.vv-button--static-light.vv-button--focus-visible,.vv-button--static-light.vv-button.focus-visible,.vv-button--static-light.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-static-light-state-focus-visible-outline)}:where(.vv-button--static-light.vv-button--hover,.vv-button--static-light.vv-button.hover,.vv-button--static-light.vv-button:not([disabled]):hover){--vv-button-modifier-static-light-border-color: var(--vv-button-modifier-static-light-state-hover-border-color);--vv-button-modifier-static-light-background: var(--vv-button-modifier-static-light-state-hover-background)}:where(.vv-button--static-light.vv-button--active,.vv-button--static-light.vv-button.active,.vv-button--static-light.vv-button:not([disabled]):active){--vv-button-modifier-static-light-border-color: var(--vv-button-modifier-static-light-state-active-border-color);--vv-button-modifier-static-light-background: var(--vv-button-modifier-static-light-state-active-background)}:where(.vv-button--static-light.vv-button--pressed,.vv-button--static-light.vv-button.pressed,.vv-button--static-light.vv-button[aria-pressed=true]){--vv-button-modifier-static-light-border-color: var(--vv-button-modifier-static-light-state-pressed-border-color);--vv-button-modifier-static-light-background: var(--vv-button-modifier-static-light-state-pressed-background)}:where(.vv-button--static-dark.vv-button){--vv-button-background: var(--vv-button-modifier-static-dark-background);--vv-button-border-color: var(--vv-button-modifier-static-dark-border-color);--vv-button-color: var(--vv-button-modifier-static-dark-color);--vv-button-text-shadow: var(--vv-button-modifier-static-dark-text-shadow)}:where(.vv-button--static-dark.vv-button--focus-visible,.vv-button--static-dark.vv-button.focus-visible,.vv-button--static-dark.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-static-dark-state-focus-visible-outline)}:where(.vv-button--static-dark.vv-button--hover,.vv-button--static-dark.vv-button.hover,.vv-button--static-dark.vv-button:not([disabled]):hover){--vv-button-modifier-static-dark-border-color: var(--vv-button-modifier-static-dark-state-hover-border-color);--vv-button-modifier-static-dark-background: var(--vv-button-modifier-static-dark-state-hover-background)}:where(.vv-button--static-dark.vv-button--active,.vv-button--static-dark.vv-button.active,.vv-button--static-dark.vv-button:not([disabled]):active){--vv-button-modifier-static-dark-border-color: var(--vv-button-modifier-static-dark-state-active-border-color);--vv-button-modifier-static-dark-background: var(--vv-button-modifier-static-dark-state-active-background)}:where(.vv-button--static-dark.vv-button--pressed,.vv-button--static-dark.vv-button.pressed,.vv-button--static-dark.vv-button[aria-pressed=true]){--vv-button-modifier-static-dark-border-color: var(--vv-button-modifier-static-dark-state-pressed-border-color);--vv-button-modifier-static-dark-background: var(--vv-button-modifier-static-dark-state-pressed-background)}:where(.vv-button--action.vv-button){--button-border-width: var(--border);--button-line-height: var(--leading-snug);font-size:var(--vv-button-modifier-action-font-size);--vv-button-background: var(--vv-button-modifier-action-background);--vv-button-color: var(--vv-button-modifier-action-color);--vv-button-border-color: var(--vv-button-modifier-action-border-color);--vv-button-font-weight: var(--vv-button-modifier-action-font-weight);--vv-button-padding-inline: var(--vv-button-modifier-action-padding-inline);--vv-button-padding-block: var(--vv-button-modifier-action-padding-block);--vv-button-text-shadow: var(--vv-button-modifier-action-text-shadow)}:where(.vv-button--action .vv-button__icon,.vv-button--action > :where(svg,[data-icon])){margin-inline:var(--vv-button-modifier-action-element-icon-margin-inline);block-size:var(--vv-button-modifier-action-element-icon-block-size);inline-size:var(--vv-button-modifier-action-element-icon-inline-size)}:where(.vv-button--action.vv-button--focus-visible,.vv-button--action.vv-button.focus-visible,.vv-button--action.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-action-state-focus-visible-outline)}:where(.vv-button--action.vv-button--hover,.vv-button--action.vv-button.hover,.vv-button--action.vv-button:not([disabled]):hover){--vv-button-modifier-action-background: var(--vv-button-modifier-action-state-hover-background)}:where(.vv-button--action.vv-button--active,.vv-button--action.vv-button.active,.vv-button--action.vv-button:not([disabled]):active){--vv-button-modifier-action-background: var(--vv-button-modifier-action-state-active-background)}:where(.vv-button--action.vv-button--pressed,.vv-button--action.vv-button.pressed,.vv-button--action.vv-button[aria-pressed=true]){--vv-button-modifier-action-color: var(--vv-button-modifier-action-state-pressed-color);--vv-button-modifier-action-background: var(--vv-button-modifier-action-state-pressed-background);--vv-button-modifier-action-border-color: var(--vv-button-modifier-action-state-pressed-border-color)}:where(.vv-button--action-quiet.vv-button){--button-border-width: var(--border);--button-line-height: var(--leading-snug);font-size:var(--vv-button-modifier-action-quiet-font-size);--vv-button-background: var(--vv-button-modifier-action-quiet-background);--vv-button-color: var(--vv-button-modifier-action-quiet-color);--vv-button-border-color: var(--vv-button-modifier-action-quiet-border-color);--vv-button-font-weight: var(--vv-button-modifier-action-quiet-font-weight);--vv-button-padding-inline: var(--vv-button-modifier-action-quiet-padding-inline);--vv-button-padding-block: var(--vv-button-modifier-action-quiet-padding-block);--vv-button-text-shadow: var(--vv-button-modifier-action-quiet-text-shadow)}:where(.vv-button--action-quiet .vv-button__icon,.vv-button--action-quiet > :where(svg,[data-icon])){margin-inline:var(--vv-button-modifier-action-quiet-element-icon-margin-inline);block-size:var(--vv-button-modifier-action-quiet-element-icon-block-size);inline-size:var(--vv-button-modifier-action-quiet-element-icon-inline-size)}:where(.vv-button--action-quiet.vv-button--focus-visible,.vv-button--action-quiet.vv-button.focus-visible,.vv-button--action-quiet.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-action-quiet-state-focus-visible-outline);outline-offset:var(--vv-button-modifier-action-quiet-state-focus-visible-outline-offset)}:where(.vv-button--action-quiet.vv-button--hover,.vv-button--action-quiet.vv-button.hover,.vv-button--action-quiet.vv-button:not([disabled]):hover){--vv-button-modifier-action-quiet-background: var(--vv-button-modifier-action-quiet-state-hover-background);--vv-button-modifier-action-quiet-border-color: var(--vv-button-modifier-action-quiet-state-hover-border-color)}:where(.vv-button--action-quiet.vv-button--active,.vv-button--action-quiet.vv-button.active,.vv-button--action-quiet.vv-button:not([disabled]):active){--vv-button-modifier-action-quiet-background: var(--vv-button-modifier-action-quiet-state-active-background);--vv-button-modifier-action-quiet-border-color: var(--vv-button-modifier-action-quiet-state-active-border-color)}:where(.vv-button--action-quiet.vv-button--pressed,.vv-button--action-quiet.vv-button.pressed,.vv-button--action-quiet.vv-button[aria-pressed=true]){--vv-button-modifier-action-quiet-color: var(--vv-button-modifier-action-quiet-state-pressed-color);--vv-button-modifier-action-quiet-background: var(--vv-button-modifier-action-quiet-state-pressed-background);--vv-button-modifier-action-quiet-border-color: var(--vv-button-modifier-action-quiet-state-pressed-border-color)}:where(.vv-button--rounded.vv-button){--vv-button-border-radius: var(--vv-button-modifier-rounded-border-radius)}:where(.vv-button--rounded .vv-button__icon,.vv-button--rounded > :where(svg,[data-icon])){margin:var(--vv-button-modifier-rounded-element-icon-margin)}:where(.vv-button--block.vv-button){display:var(--vv-button-modifier-block-display);width:var(--vv-button-modifier-block-width);max-width:var(--vv-button-modifier-block-max-width)}.vv-button--reverse .vv-button__label{order:var(--vv-button-modifier-reverse-element-label-order)}:where(.vv-button--column.vv-button){flex-direction:var(--vv-button-modifier-column-flex-direction);--vv-button-gap: var(--vv-button-modifier-column-gap)}:where(.vv-button--full-bleed.vv-button){--vv-button-min-width: var(--vv-button-modifier-full-bleed-min-width)}
package/dist/components/vv-card.css CHANGED
@@ -1 +1 @@
1
- :where(:host,:root,.theme){--vv-card-position: relative;--vv-card-display: flex;--vv-card-flex-direction: column;--vv-card-overflow: hidden;--vv-card-border-color: var(--color-surface-4);--vv-card-border-top-width: var(--border);--vv-card-border-right-width: var(--border);--vv-card-border-bottom-width: var(--border);--vv-card-border-left-width: var(--border);--vv-card-border-style: none;--vv-card-border-radius: var(--border-8);--vv-card-margin: var(--spacing-0);--vv-card-background-color: var(--color-surface);--vv-card-box-shadow: var(--shadow-md);--vv-card-color: var(--color-word-2);--vv-card-backdrop-filter: none;--vv-card-element-header-overflow: hidden;--vv-card-element-header-font-size: var(--text-md);--vv-card-element-header-padding: var(--spacing-md);--vv-card-element-header-background-color: var(--color-surface-1);--vv-card-element-header-border-bottom: var(--border) solid var(--color-surface-4);--vv-card-element-picture-display: block;--vv-card-element-picture-width: 100%;--vv-card-element-picture-height: auto;--vv-card-element-picture-object-fit: cover;--vv-card-element-picture-object-position: center;--vv-card-element-content-padding: var(--spacing-md);--vv-card-element-content-flex-grow: 1;--vv-card-element-content-min-height: 0;--vv-card-element-content-overflow: auto;--vv-card-element-footer-border-top: var(--border) solid var(--color-surface-4);--vv-card-element-footer-padding: var(--spacing-md);--vv-card-modifier-glass-background-color: hsla(var(--color-surface-hue) var(--color-surface-saturation) var(--color-surface-lightness)/60%);--vv-card-modifier-glass-backdrop-filter: var(--blur-md);--vv-card-modifier-glass-element-header-background-color: hsla(var(--color-surface-hue) var(--color-surface-saturation) var(--color-surface-lightness)/30%);--vv-card-modifier-glass-element-footer-background-color: hsla(var(--color-surface-hue) var(--color-surface-saturation) var(--color-surface-lightness)/30%)}:where(.vv-card){position:var(--vv-card-position);display:var(--vv-card-display);flex-direction:var(--vv-card-flex-direction);overflow:var(--vv-card-overflow);border-color:var(--vv-card-border-color);border-top-width:var(--vv-card-border-top-width);border-right-width:var(--vv-card-border-right-width);border-bottom-width:var(--vv-card-border-bottom-width);border-left-width:var(--vv-card-border-left-width);border-style:var(--vv-card-border-style);border-radius:var(--vv-card-border-radius);margin:var(--vv-card-margin);background-color:var(--vv-card-background-color);box-shadow:var(--vv-card-box-shadow);color:var(--vv-card-color);-webkit-backdrop-filter:var(--vv-card-backdrop-filter);backdrop-filter:var(--vv-card-backdrop-filter)}:where(.vv-card__header,.vv-card > header){overflow:var(--vv-card-element-header-overflow);font-size:var(--vv-card-element-header-font-size);padding:var(--vv-card-element-header-padding);background-color:var(--vv-card-element-header-background-color);border-bottom:var(--vv-card-element-header-border-bottom)}:where(.vv-card__picture,.vv-card > picture > img){display:var(--vv-card-element-picture-display);width:var(--vv-card-element-picture-width);height:var(--vv-card-element-picture-height);-o-object-fit:var(--vv-card-element-picture-object-fit);object-fit:var(--vv-card-element-picture-object-fit);-o-object-position:var(--vv-card-element-picture-object-position);object-position:var(--vv-card-element-picture-object-position)}:where(.vv-card__content){padding:var(--vv-card-element-content-padding);flex-grow:var(--vv-card-element-content-flex-grow);min-height:var(--vv-card-element-content-min-height);overflow:var(--vv-card-element-content-overflow)}:where(.vv-card__footer,.vv-card > footer){border-top:var(--vv-card-element-footer-border-top);padding:var(--vv-card-element-footer-padding)}:where(.vv-card--glass.vv-card){--vv-card-background-color: var(--vv-card-modifier-glass-background-color);--vv-card-backdrop-filter: var(--vv-card-modifier-glass-backdrop-filter)}:where(.vv-card--glass .vv-card__header,.vv-card--glass > header){background-color:var(--vv-card-modifier-glass-element-header-background-color)}:where(.vv-card--glass .vv-card__footer,.vv-card--glass > footer){background-color:var(--vv-card-modifier-glass-element-footer-background-color)}
1
+ :where(:host,:root,.theme){--vv-card-position: relative;--vv-card-display: flex;--vv-card-flex-direction: column;--vv-card-overflow: hidden;--vv-card-border-color: var(--color-surface-4);--vv-card-border-top-width: var(--border);--vv-card-border-right-width: var(--border);--vv-card-border-bottom-width: var(--border);--vv-card-border-left-width: var(--border);--vv-card-border-style: none;--vv-card-border-radius: var(--rounded-lg);--vv-card-margin: var(--spacing-0);--vv-card-background-color: var(--color-surface);--vv-card-box-shadow: var(--shadow-md);--vv-card-color: var(--color-word-2);--vv-card-backdrop-filter: none;--vv-card-element-header-overflow: hidden;--vv-card-element-header-padding: var(--spacing-md);--vv-card-element-header-background-color: var(--color-surface-1);--vv-card-element-header-border-bottom: var(--border) solid var(--color-surface-4);--vv-card-element-picture-display: block;--vv-card-element-picture-width: 100%;--vv-card-element-picture-height: auto;--vv-card-element-picture-object-fit: cover;--vv-card-element-picture-object-position: center;--vv-card-element-content-padding: var(--spacing-md);--vv-card-element-content-line-height: var(--leading-normal);--vv-card-element-content-flex-grow: 1;--vv-card-element-content-min-height: 0;--vv-card-element-content-overflow: auto;--vv-card-element-footer-border-top: var(--border) solid var(--color-surface-4);--vv-card-element-footer-padding: var(--spacing-md);--vv-card-modifier-glass-background-color: hsla(var(--color-surface-hue) var(--color-surface-saturation) var(--color-surface-lightness)/60%);--vv-card-modifier-glass-backdrop-filter: var(--blur-md);--vv-card-modifier-glass-element-header-background-color: hsla(var(--color-surface-hue) var(--color-surface-saturation) var(--color-surface-lightness)/30%);--vv-card-modifier-glass-element-footer-background-color: hsla(var(--color-surface-hue) var(--color-surface-saturation) var(--color-surface-lightness)/30%)}:where(.vv-card){position:var(--vv-card-position);display:var(--vv-card-display);flex-direction:var(--vv-card-flex-direction);overflow:var(--vv-card-overflow);border-color:var(--vv-card-border-color);border-top-width:var(--vv-card-border-top-width);border-right-width:var(--vv-card-border-right-width);border-bottom-width:var(--vv-card-border-bottom-width);border-left-width:var(--vv-card-border-left-width);border-style:var(--vv-card-border-style);border-radius:var(--vv-card-border-radius);margin:var(--vv-card-margin);background-color:var(--vv-card-background-color);box-shadow:var(--vv-card-box-shadow);color:var(--vv-card-color);-webkit-backdrop-filter:var(--vv-card-backdrop-filter);backdrop-filter:var(--vv-card-backdrop-filter)}:where(.vv-card__header,.vv-card > header){overflow:var(--vv-card-element-header-overflow);padding:var(--vv-card-element-header-padding);background-color:var(--vv-card-element-header-background-color);border-bottom:var(--vv-card-element-header-border-bottom)}:where(.vv-card__picture,.vv-card > picture > img){display:var(--vv-card-element-picture-display);width:var(--vv-card-element-picture-width);height:var(--vv-card-element-picture-height);-o-object-fit:var(--vv-card-element-picture-object-fit);object-fit:var(--vv-card-element-picture-object-fit);-o-object-position:var(--vv-card-element-picture-object-position);object-position:var(--vv-card-element-picture-object-position)}:where(.vv-card__content){padding:var(--vv-card-element-content-padding);line-height:var(--vv-card-element-content-line-height);flex-grow:var(--vv-card-element-content-flex-grow);min-height:var(--vv-card-element-content-min-height);overflow:var(--vv-card-element-content-overflow)}:where(.vv-card__footer,.vv-card > footer){border-top:var(--vv-card-element-footer-border-top);padding:var(--vv-card-element-footer-padding)}:where(.vv-card--glass.vv-card){--vv-card-background-color: var(--vv-card-modifier-glass-background-color);--vv-card-backdrop-filter: var(--vv-card-modifier-glass-backdrop-filter)}:where(.vv-card--glass .vv-card__header,.vv-card--glass > header){background-color:var(--vv-card-modifier-glass-element-header-background-color)}:where(.vv-card--glass .vv-card__footer,.vv-card--glass > footer){background-color:var(--vv-card-modifier-glass-element-footer-background-color)}
package/dist/components/vv-checkbox-group.css ADDED
@@ -0,0 +1 @@
1
+ :where(:host,:root,.theme){--vv-checkbox-group-display: var(--input-display);--vv-checkbox-group-flex: var(--input-flex);--vv-checkbox-group-flex-direction: var(--input-flex-direction);--vv-checkbox-group-min-width: var(--input-min-width);--vv-checkbox-group-element-legend-display: var(--input-label-display);--vv-checkbox-group-element-legend-font-size: var(--input-label-font-size);--vv-checkbox-group-element-legend-color: var(--input-label-color);--vv-checkbox-group-element-legend-margin: 0 0 var(--input-label-gap) 0;--vv-checkbox-group-element-legend-white-space: var(--input-label-white-space);--vv-checkbox-group-element-legend-text-overflow: var(--input-label-text-overflow);--vv-checkbox-group-element-legend-overflow: var(--input-label-overflow);--vv-checkbox-group-element-legend-max-width: var(--input-label-max-width);--vv-checkbox-group-element-wrapper-position: relative;--vv-checkbox-group-element-wrapper-display: flex;--vv-checkbox-group-element-wrapper-flex-direction: column;--vv-checkbox-group-element-wrapper-flex-wrap: wrap;--vv-checkbox-group-element-hint-display: var(--input-hint-display);--vv-checkbox-group-element-hint-font-size: var(--input-hint-font-size);--vv-checkbox-group-element-hint-color: var(--input-hint-color);--vv-checkbox-group-element-hint-padding-top: var(--input-hint-gap);--vv-checkbox-group-element-hint-white-space: var(--input-hint-white-space);--vv-checkbox-group-element-hint-text-overflow: var(--input-hint-text-overflow);--vv-checkbox-group-element-hint-overflow: var(--input-hint-overflow);--vv-checkbox-group-element-hint-max-width: var(--input-hint-max-width);--vv-checkbox-group-element-hint-margin-top: calc(var(--input-gap) * -1);--vv-checkbox-group-element-hint-margin-bottom: var(--input-gap);--vv-checkbox-group-modifier-horizontal-element-wrapper-flex-direction: row;--vv-checkbox-group-modifier-valid-element-hint-color: var(--input-valid-color);--vv-checkbox-group-modifier-invalid-element-hint-color: var(--input-invalid-color)}:where(.vv-checkbox-group){display:var(--vv-checkbox-group-display);flex:var(--vv-checkbox-group-flex);flex-direction:var(--vv-checkbox-group-flex-direction);min-width:var(--vv-checkbox-group-min-width)}:where(.vv-checkbox-group__legend,.vv-checkbox-group > legend){display:var(--vv-checkbox-group-element-legend-display);font-size:var(--vv-checkbox-group-element-legend-font-size);color:var(--vv-checkbox-group-element-legend-color);margin:var(--vv-checkbox-group-element-legend-margin);white-space:var(--vv-checkbox-group-element-legend-white-space);text-overflow:var(--vv-checkbox-group-element-legend-text-overflow);overflow:var(--vv-checkbox-group-element-legend-overflow);max-width:var(--vv-checkbox-group-element-legend-max-width)}:where(.vv-checkbox-group__wrapper){position:var(--vv-checkbox-group-element-wrapper-position);display:var(--vv-checkbox-group-element-wrapper-display);flex-direction:var(--vv-checkbox-group-element-wrapper-flex-direction);flex-wrap:var(--vv-checkbox-group-element-wrapper-flex-wrap)}:where(.vv-checkbox-group__hint,.vv-checkbox-group > small){display:var(--vv-checkbox-group-element-hint-display);font-size:var(--vv-checkbox-group-element-hint-font-size);color:var(--vv-checkbox-group-element-hint-color);padding-top:var(--vv-checkbox-group-element-hint-padding-top);white-space:var(--vv-checkbox-group-element-hint-white-space);text-overflow:var(--vv-checkbox-group-element-hint-text-overflow);overflow:var(--vv-checkbox-group-element-hint-overflow);max-width:var(--vv-checkbox-group-element-hint-max-width);margin-top:var(--vv-checkbox-group-element-hint-margin-top);margin-bottom:var(--vv-checkbox-group-element-hint-margin-bottom)}.vv-checkbox-group--horizontal .vv-checkbox-group__wrapper{flex-direction:var(--vv-checkbox-group-modifier-horizontal-element-wrapper-flex-direction)}:where(.vv-checkbox-group--valid .vv-checkbox-group__hint,.vv-checkbox-group--valid > small){color:var(--vv-checkbox-group-modifier-valid-element-hint-color)}:where(.vv-checkbox-group--invalid .vv-checkbox-group__hint,.vv-checkbox-group--invalid > small){color:var(--vv-checkbox-group-modifier-invalid-element-hint-color)}
package/dist/components/vv-checkbox.css ADDED
@@ -0,0 +1 @@
1
+ :where(:host,:root,.theme){--vv-checkbox-display: inline-flex;--vv-checkbox-flex-wrap: wrap;--vv-checkbox-align-items: center;--vv-checkbox-cursor: pointer;--vv-checkbox-user-select: none;--vv-checkbox-margin: 0 var(--input-gap) var(--input-gap) 0;--vv-checkbox-color: var(--input-color);--vv-checkbox-font-size: var(--input-font-size);--vv-checkbox-line-height: var(--input-line-height);--vv-checkbox-min-width: var(--input-min-width);--vv-checkbox-state-disabled-opacity: var(--opacity-30);--vv-checkbox-state-disabled-cursor: not-allowed;--vv-checkbox-element-input-border: var(--spacing-2) solid var(--input-color);--vv-checkbox-element-input-min-width: var(--spacing-20);--vv-checkbox-element-input-height: var(--spacing-20);--vv-checkbox-element-input-margin: 0 var(--input-label-gap) 0 0;--vv-checkbox-element-input-background-position: center;--vv-checkbox-element-input-background-size: var(--text-12) auto;--vv-checkbox-element-input-background-repeat: no-repeat;--vv-checkbox-element-input-cursor: pointer;--vv-checkbox-element-input-position: relative;--vv-checkbox-element-input-state-checked-background-image: var(--bg-check);--vv-checkbox-element-input-state-indeterminate-background-image: var(--bg-minus);--vv-checkbox-element-input-state-focus-visible-outline: var(--spacing-px) solid var(--color-brand);--vv-checkbox-element-input-state-focus-visible-outline-offset: var(--spacing-2);--vv-checkbox-element-hint-flex-basis: 100%;--vv-checkbox-element-hint-display: var(--input-hint-display);--vv-checkbox-element-hint-font-size: var(--input-hint-font-size);--vv-checkbox-element-hint-color: var(--input-hint-color);--vv-checkbox-element-hint-padding-top: var(--input-hint-gap);--vv-checkbox-element-hint-white-space: var(--input-hint-white-space);--vv-checkbox-element-hint-text-overflow: var(--input-hint-text-overflow);--vv-checkbox-element-hint-overflow: var(--input-hint-overflow);--vv-checkbox-element-hint-max-width: var(--input-hint-max-width);--vv-checkbox-modifier-readonly-opacity: var(--opacity-100);--vv-checkbox-modifier-readonly-cursor: default;--vv-checkbox-modifier-readonly-pointer-events: none;--vv-checkbox-modifier-switch-element-input-border: 0;--vv-checkbox-modifier-switch-element-input-min-width: var(--spacing-44);--vv-checkbox-modifier-switch-element-input-height: var(--spacing-24);--vv-checkbox-modifier-switch-element-input-border-radius: var(--spacing-12);--vv-checkbox-modifier-switch-element-input-background-color: var(--color-word-5);--vv-checkbox-modifier-switch-element-input-position: relative;--vv-checkbox-modifier-switch-element-input-will-change: background-color;--vv-checkbox-modifier-switch-element-input-transition: var(--transition-colors);--vv-checkbox-modifier-switch-element-input-pseudo-after-width: var(--spacing-20);--vv-checkbox-modifier-switch-element-input-pseudo-after-height: var(--spacing-20);--vv-checkbox-modifier-switch-element-input-pseudo-after-border-radius: 50%;--vv-checkbox-modifier-switch-element-input-pseudo-after-position: absolute;--vv-checkbox-modifier-switch-element-input-pseudo-after-inset: var(--spacing-2) 0 0 var(--spacing-2);--vv-checkbox-modifier-switch-element-input-pseudo-after-background: var(--color-white);--vv-checkbox-modifier-switch-element-input-pseudo-after-will-change: transform;--vv-checkbox-modifier-switch-element-input-pseudo-after-transition: var(--transition-transform);--vv-checkbox-modifier-switch-element-input-state-hover-background-color: var(--color-word-4);--vv-checkbox-modifier-switch-element-input-state-active-background-color: var(--color-word-3);--vv-checkbox-modifier-switch-element-input-state-indeterminate-background-image: none;--vv-checkbox-modifier-switch-element-input-state-indeterminate-pseudo-after-transform: translateX(50%);--vv-checkbox-modifier-switch-element-input-state-checked-background-image: none;--vv-checkbox-modifier-switch-element-input-state-checked-background-color: var(--color-brand);--vv-checkbox-modifier-switch-element-input-state-checked-pseudo-after-transform: translateX(100%);--vv-checkbox-modifier-valid-element-hint-color: var(--input-valid-color);--vv-checkbox-modifier-invalid-element-hint-color: var(--input-invalid-color)}:where(.vv-checkbox){display:var(--vv-checkbox-display);flex-wrap:var(--vv-checkbox-flex-wrap);align-items:var(--vv-checkbox-align-items);cursor:var(--vv-checkbox-cursor);-webkit-user-select:var(--vv-checkbox-user-select);-moz-user-select:var(--vv-checkbox-user-select);user-select:var(--vv-checkbox-user-select);margin:var(--vv-checkbox-margin);color:var(--vv-checkbox-color);font-size:var(--vv-checkbox-font-size);line-height:var(--vv-checkbox-line-height);min-width:var(--vv-checkbox-min-width)}:where(.vv-checkbox__input,.vv-checkbox > input[type=checkbox]){border:var(--vv-checkbox-element-input-border);min-width:var(--vv-checkbox-element-input-min-width);height:var(--vv-checkbox-element-input-height);margin:var(--vv-checkbox-element-input-margin);background-position:var(--vv-checkbox-element-input-background-position);background-size:var(--vv-checkbox-element-input-background-size);background-repeat:var(--vv-checkbox-element-input-background-repeat);cursor:var(--vv-checkbox-element-input-cursor);position:var(--vv-checkbox-element-input-position)}:where(.vv-checkbox__input--checked,.vv-checkbox__input.checked,.vv-checkbox > input[type=checkbox].checked,.vv-checkbox__input:checked,.vv-checkbox > input[type=checkbox]:checked){background-image:var(--vv-checkbox-element-input-state-checked-background-image)}:where(.vv-checkbox__input--indeterminate,.vv-checkbox__input.indeterminate,.vv-checkbox > input[type=checkbox].indeterminate,.vv-checkbox__input:not([disabled]):indeterminate,.vv-checkbox > input[type=checkbox]:not([disabled]):indeterminate){background-image:var(--vv-checkbox-element-input-state-indeterminate-background-image)}:where(.vv-checkbox__input--focus-visible,.vv-checkbox__input.focus-visible,.vv-checkbox > input[type=checkbox].focus-visible,.vv-checkbox__input:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible,.vv-checkbox > input[type=checkbox]:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-checkbox-element-input-state-focus-visible-outline);outline-offset:var(--vv-checkbox-element-input-state-focus-visible-outline-offset)}:where(.vv-checkbox__hint,.vv-checkbox > small){flex-basis:var(--vv-checkbox-element-hint-flex-basis);display:var(--vv-checkbox-element-hint-display);font-size:var(--vv-checkbox-element-hint-font-size);color:var(--vv-checkbox-element-hint-color);padding-top:var(--vv-checkbox-element-hint-padding-top);white-space:var(--vv-checkbox-element-hint-white-space);text-overflow:var(--vv-checkbox-element-hint-text-overflow);overflow:var(--vv-checkbox-element-hint-overflow);max-width:var(--vv-checkbox-element-hint-max-width)}:where(.vv-checkbox:has(> input[type=checkbox]:disabled)),:where(.vv-checkbox--disabled,.vv-checkbox.disabled,.vv-checkbox[disabled],.vv-checkbox[aria-disabled=true]){opacity:var(--vv-checkbox-state-disabled-opacity);--vv-checkbox-cursor: var(--vv-checkbox-state-disabled-cursor)}:where(.vv-checkbox--readonly.vv-checkbox){opacity:var(--vv-checkbox-modifier-readonly-opacity);--vv-checkbox-cursor: var(--vv-checkbox-modifier-readonly-cursor);pointer-events:var(--vv-checkbox-modifier-readonly-pointer-events)}:where(.vv-checkbox--switch .vv-checkbox__input,.vv-checkbox--switch > input[type=checkbox]){border:var(--vv-checkbox-modifier-switch-element-input-border);min-width:var(--vv-checkbox-modifier-switch-element-input-min-width);height:var(--vv-checkbox-modifier-switch-element-input-height);border-radius:var(--vv-checkbox-modifier-switch-element-input-border-radius);background-color:var(--vv-checkbox-modifier-switch-element-input-background-color);position:var(--vv-checkbox-modifier-switch-element-input-position);will-change:var(--vv-checkbox-modifier-switch-element-input-will-change);transition:var(--vv-checkbox-modifier-switch-element-input-transition)}:where(.vv-checkbox--switch .vv-checkbox__input,.vv-checkbox--switch > input[type=checkbox]):after{content:"";width:var(--vv-checkbox-modifier-switch-element-input-pseudo-after-width);height:var(--vv-checkbox-modifier-switch-element-input-pseudo-after-height);border-radius:var(--vv-checkbox-modifier-switch-element-input-pseudo-after-border-radius);position:var(--vv-checkbox-modifier-switch-element-input-pseudo-after-position);inset:var(--vv-checkbox-modifier-switch-element-input-pseudo-after-inset);background:var(--vv-checkbox-modifier-switch-element-input-pseudo-after-background);will-change:var(--vv-checkbox-modifier-switch-element-input-pseudo-after-will-change);transition:var(--vv-checkbox-modifier-switch-element-input-pseudo-after-transition)}:where(.vv-checkbox--switch .vv-checkbox__input--hover,.vv-checkbox--switch .vv-checkbox__input.hover,.vv-checkbox--switch > input[type=checkbox].hover,.vv-checkbox--switch .vv-checkbox__input:not([disabled]):hover,.vv-checkbox--switch > input[type=checkbox]:not([disabled]):hover){--vv-checkbox-modifier-switch-element-input-background-color: var(--vv-checkbox-modifier-switch-element-input-state-hover-background-color)}:where(.vv-checkbox--switch .vv-checkbox__input--active,.vv-checkbox--switch .vv-checkbox__input.active,.vv-checkbox--switch > input[type=checkbox].active,.vv-checkbox--switch .vv-checkbox__input:not([disabled]):active,.vv-checkbox--switch > input[type=checkbox]:not([disabled]):active){--vv-checkbox-modifier-switch-element-input-background-color: var(--vv-checkbox-modifier-switch-element-input-state-active-background-color)}:where(.vv-checkbox--switch .vv-checkbox__input--indeterminate,.vv-checkbox--switch .vv-checkbox__input.indeterminate,.vv-checkbox--switch > input[type=checkbox].indeterminate,.vv-checkbox--switch .vv-checkbox__input:not([disabled]):indeterminate,.vv-checkbox--switch > input[type=checkbox]:not([disabled]):indeterminate){background-image:var(--vv-checkbox-modifier-switch-element-input-state-indeterminate-background-image)}:where(.vv-checkbox--switch .vv-checkbox__input--indeterminate,.vv-checkbox--switch .vv-checkbox__input.indeterminate,.vv-checkbox--switch > input[type=checkbox].indeterminate,.vv-checkbox--switch .vv-checkbox__input:not([disabled]):indeterminate,.vv-checkbox--switch > input[type=checkbox]:not([disabled]):indeterminate):after{transform:var(--vv-checkbox-modifier-switch-element-input-state-indeterminate-pseudo-after-transform)}:where(.vv-checkbox--switch .vv-checkbox__input--checked,.vv-checkbox--switch .vv-checkbox__input.checked,.vv-checkbox--switch > input[type=checkbox].checked,.vv-checkbox--switch .vv-checkbox__input:checked,.vv-checkbox--switch > input[type=checkbox]:checked){background-image:var(--vv-checkbox-modifier-switch-element-input-state-checked-background-image);--vv-checkbox-modifier-switch-element-input-background-color: var(--vv-checkbox-modifier-switch-element-input-state-checked-background-color)}:where(.vv-checkbox--switch .vv-checkbox__input--checked,.vv-checkbox--switch .vv-checkbox__input.checked,.vv-checkbox--switch > input[type=checkbox].checked,.vv-checkbox--switch .vv-checkbox__input:checked,.vv-checkbox--switch > input[type=checkbox]:checked):after{transform:var(--vv-checkbox-modifier-switch-element-input-state-checked-pseudo-after-transform)}:where(.vv-checkbox--valid .vv-checkbox__hint,.vv-checkbox--valid > small){color:var(--vv-checkbox-modifier-valid-element-hint-color)}:where(.vv-checkbox--invalid .vv-checkbox__hint,.vv-checkbox--invalid > small){color:var(--vv-checkbox-modifier-invalid-element-hint-color)}
package/dist/components/vv-dialog.css CHANGED
@@ -1 +1 @@
1
- :where(:host,:root,.theme){--vv-dialog-display: flex;--vv-dialog-z-index: var(--z-modal-backdrop);--vv-dialog-position: fixed;--vv-dialog-inset: 0;--vv-dialog-align-items: center;--vv-dialog-justify-content: center;--vv-dialog-width: inherit;--vv-dialog-min-width: 100%;--vv-dialog-height: inherit;--vv-dialog-min-height: 100%;--vv-dialog-padding: var(--spacing-md);--vv-dialog-border: 0;--vv-dialog-background-color: var(--color-backdrop);--vv-dialog-backdrop-filter: var(--blur-sm);--vv-dialog-opacity: 1;--vv-dialog-state-close-display: none;--vv-dialog-element-wrapper-display: flex;--vv-dialog-element-wrapper-flex-direction: column;--vv-dialog-element-wrapper-position: relative;--vv-dialog-element-wrapper-box-shadow: var(--shadow-lg);--vv-dialog-element-wrapper-max-width: max(30vw, min(40rem, 50vw));--vv-dialog-element-wrapper-max-height: 90vh;--vv-dialog-element-wrapper-z-index: var(--z-modal);--vv-dialog-element-wrapper-background: var(--color-surface);--vv-dialog-element-wrapper-border-radius: var(--rounded-md);--vv-dialog-element-wrapper-overflow: hidden;--vv-dialog-element-header-display: flex;--vv-dialog-element-header-flex-wrap: no-wrap;--vv-dialog-element-header-justify-content: space-between;--vv-dialog-element-header-align-items: center;--vv-dialog-element-header-font-size: var(--text-md);--vv-dialog-element-header-padding: var(--spacing-md);--vv-dialog-element-header-background: var(--color-surface-1);--vv-dialog-element-header-border-bottom: var(--border) solid var(--color-surface-4);--vv-dialog-element-close-display: flex;--vv-dialog-element-close-cursor: pointer;--vv-dialog-element-content-padding: var(--spacing-md);--vv-dialog-element-content-flex: 1;--vv-dialog-element-content-min-height: 0;--vv-dialog-element-content-overflow: auto;--vv-dialog-element-footer-display: flex;--vv-dialog-element-footer-justify-content: flex-end;--vv-dialog-element-footer-padding: var(--spacing-md);--vv-dialog-element-footer-background: var(--color-surface-1);--vv-dialog-element-footer-border-top: var(--border) solid var(--color-surface-4);--vv-dialog-modifier-small-element-wrapper-max-width: max(10vw, min(25rem, 30vw));--vv-dialog-modifier-fullscreen-padding: 0;--vv-dialog-modifier-fullscreen-element-wrapper-border-radius: var(--rounded-0);--vv-dialog-modifier-fullscreen-element-wrapper-max-width: auto;--vv-dialog-modifier-fullscreen-element-wrapper-max-height: auto;--vv-dialog-modifier-fullscreen-element-wrapper-width: 100%;--vv-dialog-modifier-fullscreen-element-wrapper-height: 100%;--vv-dialog-modifier-fade-block-enter-active-transition: opacity .3s ease-in-out;--vv-dialog-modifier-fade-block-enter-active-element-wrapper-transition: transform .3s ease-in-out;--vv-dialog-modifier-fade-block-leave-active-transition: opacity .3s ease-in-out;--vv-dialog-modifier-fade-block-leave-active-element-wrapper-transition: transform .3s ease-in-out;--vv-dialog-modifier-fade-block-enter-from-opacity: 0;--vv-dialog-modifier-fade-block-enter-from-element-wrapper-transform: translateY(100%);--vv-dialog-modifier-fade-block-leave-to-opacity: 0;--vv-dialog-modifier-fade-block-leave-to-element-wrapper-transform: translateY(-100%);--vv-dialog-modifier-fade-inline-enter-active-transition: opacity .3s ease-in-out;--vv-dialog-modifier-fade-inline-enter-active-element-wrapper-transition: transform .3s ease-in-out;--vv-dialog-modifier-fade-inline-leave-active-transition: opacity .3s ease-in-out;--vv-dialog-modifier-fade-inline-leave-active-element-wrapper-transition: transform .3s ease-in-out;--vv-dialog-modifier-fade-inline-enter-from-opacity: 0;--vv-dialog-modifier-fade-inline-enter-from-element-wrapper-transform: translateX(-100%);--vv-dialog-modifier-fade-inline-leave-to-opacity: 0;--vv-dialog-modifier-fade-inline-leave-to-element-wrapper-transform: translateX(100%);--vv-dialog-modifier-scale-enter-active-transition: opacity .3s ease-in-out;--vv-dialog-modifier-scale-enter-active-element-wrapper-transition: transform .3s ease-in-out;--vv-dialog-modifier-scale-leave-active-transition: opacity .3s ease-in-out;--vv-dialog-modifier-scale-leave-active-element-wrapper-transition: transform .3s ease-in-out;--vv-dialog-modifier-scale-enter-from-opacity: 0;--vv-dialog-modifier-scale-enter-from-element-wrapper-transform: scale(0%);--vv-dialog-modifier-scale-leave-to-opacity: 0;--vv-dialog-modifier-scale-leave-to-element-wrapper-transform: scale(0%)}:where(.vv-dialog){display:var(--vv-dialog-display);z-index:var(--vv-dialog-z-index);position:var(--vv-dialog-position);inset:var(--vv-dialog-inset);align-items:var(--vv-dialog-align-items);justify-content:var(--vv-dialog-justify-content);width:var(--vv-dialog-width);min-width:var(--vv-dialog-min-width);height:var(--vv-dialog-height);min-height:var(--vv-dialog-min-height);padding:var(--vv-dialog-padding);border:var(--vv-dialog-border);background-color:var(--vv-dialog-background-color);-webkit-backdrop-filter:var(--vv-dialog-backdrop-filter);backdrop-filter:var(--vv-dialog-backdrop-filter);opacity:var(--vv-dialog-opacity)}:where(.vv-dialog__wrapper,.vv-dialog > article){display:var(--vv-dialog-element-wrapper-display);flex-direction:var(--vv-dialog-element-wrapper-flex-direction);position:var(--vv-dialog-element-wrapper-position);box-shadow:var(--vv-dialog-element-wrapper-box-shadow);max-width:var(--vv-dialog-element-wrapper-max-width);max-height:var(--vv-dialog-element-wrapper-max-height);z-index:var(--vv-dialog-element-wrapper-z-index);background:var(--vv-dialog-element-wrapper-background);border-radius:var(--vv-dialog-element-wrapper-border-radius);overflow:var(--vv-dialog-element-wrapper-overflow)}:where(.vv-dialog__header,.vv-dialog > article > header){display:var(--vv-dialog-element-header-display);flex-wrap:var(--vv-dialog-element-header-flex-wrap);justify-content:var(--vv-dialog-element-header-justify-content);align-items:var(--vv-dialog-element-header-align-items);font-size:var(--vv-dialog-element-header-font-size);padding:var(--vv-dialog-element-header-padding);background:var(--vv-dialog-element-header-background);border-bottom:var(--vv-dialog-element-header-border-bottom)}:where(.vv-dialog__close){display:var(--vv-dialog-element-close-display);cursor:var(--vv-dialog-element-close-cursor)}:where(.vv-dialog__content){padding:var(--vv-dialog-element-content-padding);flex:var(--vv-dialog-element-content-flex);min-height:var(--vv-dialog-element-content-min-height);overflow:var(--vv-dialog-element-content-overflow)}:where(.vv-dialog__footer,.vv-dialog > article > footer){display:var(--vv-dialog-element-footer-display);justify-content:var(--vv-dialog-element-footer-justify-content);padding:var(--vv-dialog-element-footer-padding);background:var(--vv-dialog-element-footer-background);border-top:var(--vv-dialog-element-footer-border-top)}:where(.vv-dialog--close,.vv-dialog.close,.vv-dialog:not([open])){--vv-dialog-display: var(--vv-dialog-state-close-display)}:where(.vv-dialog--small .vv-dialog__wrapper,.vv-dialog--small > article){max-width:var(--vv-dialog-modifier-small-element-wrapper-max-width)}:where(.vv-dialog--fullscreen.vv-dialog){--vv-dialog-padding: var(--vv-dialog-modifier-fullscreen-padding)}:where(.vv-dialog--fullscreen .vv-dialog__wrapper,.vv-dialog--fullscreen > article){border-radius:var(--vv-dialog-modifier-fullscreen-element-wrapper-border-radius);max-width:var(--vv-dialog-modifier-fullscreen-element-wrapper-max-width);max-height:var(--vv-dialog-modifier-fullscreen-element-wrapper-max-height);width:var(--vv-dialog-modifier-fullscreen-element-wrapper-width);height:var(--vv-dialog-modifier-fullscreen-element-wrapper-height)}:where(.vv-dialog--fade-block-enter-active.vv-dialog){transition:var(--vv-dialog-modifier-fade-block-enter-active-transition)}:where(.vv-dialog--fade-block-enter-active .vv-dialog__wrapper,.vv-dialog--fade-block-enter-active > article){transition:var(--vv-dialog-modifier-fade-block-enter-active-element-wrapper-transition)}:where(.vv-dialog--fade-block-leave-active.vv-dialog){transition:var(--vv-dialog-modifier-fade-block-leave-active-transition)}:where(.vv-dialog--fade-block-leave-active .vv-dialog__wrapper,.vv-dialog--fade-block-leave-active > article){transition:var(--vv-dialog-modifier-fade-block-leave-active-element-wrapper-transition)}:where(.vv-dialog--fade-block-enter-from.vv-dialog){--vv-dialog-opacity: var(--vv-dialog-modifier-fade-block-enter-from-opacity)}:where(.vv-dialog--fade-block-enter-from .vv-dialog__wrapper,.vv-dialog--fade-block-enter-from > article){transform:var(--vv-dialog-modifier-fade-block-enter-from-element-wrapper-transform)}:where(.vv-dialog--fade-block-leave-to.vv-dialog){--vv-dialog-opacity: var(--vv-dialog-modifier-fade-block-leave-to-opacity)}:where(.vv-dialog--fade-block-leave-to .vv-dialog__wrapper,.vv-dialog--fade-block-leave-to > article){transform:var(--vv-dialog-modifier-fade-block-leave-to-element-wrapper-transform)}:where(.vv-dialog--fade-inline-enter-active.vv-dialog){transition:var(--vv-dialog-modifier-fade-inline-enter-active-transition)}:where(.vv-dialog--fade-inline-enter-active .vv-dialog__wrapper,.vv-dialog--fade-inline-enter-active > article){transition:var(--vv-dialog-modifier-fade-inline-enter-active-element-wrapper-transition)}:where(.vv-dialog--fade-inline-leave-active.vv-dialog){transition:var(--vv-dialog-modifier-fade-inline-leave-active-transition)}:where(.vv-dialog--fade-inline-leave-active .vv-dialog__wrapper,.vv-dialog--fade-inline-leave-active > article){transition:var(--vv-dialog-modifier-fade-inline-leave-active-element-wrapper-transition)}:where(.vv-dialog--fade-inline-enter-from.vv-dialog){--vv-dialog-opacity: var(--vv-dialog-modifier-fade-inline-enter-from-opacity)}:where(.vv-dialog--fade-inline-enter-from .vv-dialog__wrapper,.vv-dialog--fade-inline-enter-from > article){transform:var(--vv-dialog-modifier-fade-inline-enter-from-element-wrapper-transform)}:where(.vv-dialog--fade-inline-leave-to.vv-dialog){--vv-dialog-opacity: var(--vv-dialog-modifier-fade-inline-leave-to-opacity)}:where(.vv-dialog--fade-inline-leave-to .vv-dialog__wrapper,.vv-dialog--fade-inline-leave-to > article){transform:var(--vv-dialog-modifier-fade-inline-leave-to-element-wrapper-transform)}:where(.vv-dialog--scale-enter-active.vv-dialog){transition:var(--vv-dialog-modifier-scale-enter-active-transition)}:where(.vv-dialog--scale-enter-active .vv-dialog__wrapper,.vv-dialog--scale-enter-active > article){transition:var(--vv-dialog-modifier-scale-enter-active-element-wrapper-transition)}:where(.vv-dialog--scale-leave-active.vv-dialog){transition:var(--vv-dialog-modifier-scale-leave-active-transition)}:where(.vv-dialog--scale-leave-active .vv-dialog__wrapper,.vv-dialog--scale-leave-active > article){transition:var(--vv-dialog-modifier-scale-leave-active-element-wrapper-transition)}:where(.vv-dialog--scale-enter-from.vv-dialog){--vv-dialog-opacity: var(--vv-dialog-modifier-scale-enter-from-opacity)}:where(.vv-dialog--scale-enter-from .vv-dialog__wrapper,.vv-dialog--scale-enter-from > article){transform:var(--vv-dialog-modifier-scale-enter-from-element-wrapper-transform)}:where(.vv-dialog--scale-leave-to.vv-dialog){--vv-dialog-opacity: var(--vv-dialog-modifier-scale-leave-to-opacity)}:where(.vv-dialog--scale-leave-to .vv-dialog__wrapper,.vv-dialog--scale-leave-to > article){transform:var(--vv-dialog-modifier-scale-leave-to-element-wrapper-transform)}
1
+ :where(:host,:root,.theme){--vv-dialog-display: flex;--vv-dialog-z-index: var(--z-modal-backdrop);--vv-dialog-position: fixed;--vv-dialog-inset: 0;--vv-dialog-align-items: center;--vv-dialog-justify-content: center;--vv-dialog-width: inherit;--vv-dialog-min-width: 100%;--vv-dialog-height: inherit;--vv-dialog-min-height: 100%;--vv-dialog-padding: var(--spacing-md);--vv-dialog-border: 0;--vv-dialog-background-color: var(--color-backdrop);--vv-dialog-backdrop-filter: var(--blur-sm);--vv-dialog-opacity: var(--opacity-100);--vv-dialog-state-close-display: none;--vv-dialog-element-wrapper-display: flex;--vv-dialog-element-wrapper-flex-direction: column;--vv-dialog-element-wrapper-position: relative;--vv-dialog-element-wrapper-box-shadow: var(--shadow-lg);--vv-dialog-element-wrapper-width: max(30vw, min(40rem, 90vw));--vv-dialog-element-wrapper-max-height: 90vh;--vv-dialog-element-wrapper-z-index: var(--z-modal);--vv-dialog-element-wrapper-background: var(--color-surface);--vv-dialog-element-wrapper-border-radius: var(--rounded-md);--vv-dialog-element-wrapper-overflow: hidden;--vv-dialog-element-header-display: flex;--vv-dialog-element-header-flex-wrap: no-wrap;--vv-dialog-element-header-justify-content: space-between;--vv-dialog-element-header-align-items: center;--vv-dialog-element-header-font-size: var(--text-md);--vv-dialog-element-header-padding: var(--spacing-md);--vv-dialog-element-header-background: var(--color-surface-1);--vv-dialog-element-header-border-bottom: var(--border) solid var(--color-surface-4);--vv-dialog-element-close-inline-size: 1em;--vv-dialog-element-close-block-size: 1em;--vv-dialog-element-close-cursor: pointer;--vv-dialog-element-close-background-image: var(--bg-close);--vv-dialog-element-close-background-position: center;--vv-dialog-element-close-background-size: 100% auto;--vv-dialog-element-close-background-repeat: no-repeat;--vv-dialog-element-content-padding: var(--spacing-md);--vv-dialog-element-content-line-height: var(--leading-normal);--vv-dialog-element-content-flex: 1;--vv-dialog-element-content-min-height: 0;--vv-dialog-element-content-overflow: auto;--vv-dialog-element-footer-display: flex;--vv-dialog-element-footer-justify-content: flex-end;--vv-dialog-element-footer-padding: var(--spacing-md);--vv-dialog-element-footer-background: var(--color-surface-1);--vv-dialog-element-footer-border-top: var(--border) solid var(--color-surface-4);--vv-dialog-transition-fade-block-active-transition: var(--transition-opacity);--vv-dialog-transition-fade-block-active-element-wrapper-transition: var(--transition-transform);--vv-dialog-transition-fade-block-enter-from-opacity: var(--opacity-0);--vv-dialog-transition-fade-block-enter-from-element-wrapper-transform: translateY(100%);--vv-dialog-transition-fade-block-leave-to-opacity: var(--opacity-0);--vv-dialog-transition-fade-block-leave-to-element-wrapper-transform: translateY(-100%);--vv-dialog-transition-fade-inline-active-transition: var(--transition-opacity);--vv-dialog-transition-fade-inline-active-element-wrapper-transition: var(--transition-transform);--vv-dialog-transition-fade-inline-enter-from-opacity: var(--opacity-0);--vv-dialog-transition-fade-inline-enter-from-element-wrapper-transform: translateX(-100%);--vv-dialog-transition-fade-inline-leave-to-opacity: var(--opacity-0);--vv-dialog-transition-fade-inline-leave-to-element-wrapper-transform: translateX(100%);--vv-dialog-transition-scale-active-transition: var(--transition-opacity);--vv-dialog-transition-scale-active-element-wrapper-transition: var(--transition-transform);--vv-dialog-transition-scale-inert-opacity: var(--opacity-0);--vv-dialog-transition-scale-inert-element-wrapper-transform: scale(0%);--vv-dialog-modifier-small-element-wrapper-width: max(10vw, min(25rem, 90vw));--vv-dialog-modifier-fullscreen-padding: 0;--vv-dialog-modifier-fullscreen-element-wrapper-border-radius: var(--rounded-0);--vv-dialog-modifier-fullscreen-element-wrapper-max-width: auto;--vv-dialog-modifier-fullscreen-element-wrapper-max-height: auto;--vv-dialog-modifier-fullscreen-element-wrapper-width: 100%;--vv-dialog-modifier-fullscreen-element-wrapper-height: 100%}:where(.vv-dialog){display:var(--vv-dialog-display);z-index:var(--vv-dialog-z-index);position:var(--vv-dialog-position);inset:var(--vv-dialog-inset);align-items:var(--vv-dialog-align-items);justify-content:var(--vv-dialog-justify-content);width:var(--vv-dialog-width);min-width:var(--vv-dialog-min-width);height:var(--vv-dialog-height);min-height:var(--vv-dialog-min-height);padding:var(--vv-dialog-padding);border:var(--vv-dialog-border);background-color:var(--vv-dialog-background-color);-webkit-backdrop-filter:var(--vv-dialog-backdrop-filter);backdrop-filter:var(--vv-dialog-backdrop-filter);opacity:var(--vv-dialog-opacity)}:where(.vv-dialog__wrapper,.vv-dialog > article){display:var(--vv-dialog-element-wrapper-display);flex-direction:var(--vv-dialog-element-wrapper-flex-direction);position:var(--vv-dialog-element-wrapper-position);box-shadow:var(--vv-dialog-element-wrapper-box-shadow);width:var(--vv-dialog-element-wrapper-width);max-height:var(--vv-dialog-element-wrapper-max-height);z-index:var(--vv-dialog-element-wrapper-z-index);background:var(--vv-dialog-element-wrapper-background);border-radius:var(--vv-dialog-element-wrapper-border-radius);overflow:var(--vv-dialog-element-wrapper-overflow)}:where(.vv-dialog__header,.vv-dialog > article > header){display:var(--vv-dialog-element-header-display);flex-wrap:var(--vv-dialog-element-header-flex-wrap);justify-content:var(--vv-dialog-element-header-justify-content);align-items:var(--vv-dialog-element-header-align-items);font-size:var(--vv-dialog-element-header-font-size);padding:var(--vv-dialog-element-header-padding);background:var(--vv-dialog-element-header-background);border-bottom:var(--vv-dialog-element-header-border-bottom)}:where(.vv-dialog__close){inline-size:var(--vv-dialog-element-close-inline-size);block-size:var(--vv-dialog-element-close-block-size);cursor:var(--vv-dialog-element-close-cursor);background-image:var(--vv-dialog-element-close-background-image);background-position:var(--vv-dialog-element-close-background-position);background-size:var(--vv-dialog-element-close-background-size);background-repeat:var(--vv-dialog-element-close-background-repeat)}:where(.vv-dialog__content){padding:var(--vv-dialog-element-content-padding);line-height:var(--vv-dialog-element-content-line-height);flex:var(--vv-dialog-element-content-flex);min-height:var(--vv-dialog-element-content-min-height);overflow:var(--vv-dialog-element-content-overflow)}:where(.vv-dialog__footer,.vv-dialog > article > footer){display:var(--vv-dialog-element-footer-display);justify-content:var(--vv-dialog-element-footer-justify-content);padding:var(--vv-dialog-element-footer-padding);background:var(--vv-dialog-element-footer-background);border-top:var(--vv-dialog-element-footer-border-top)}:where(.vv-dialog--close,.vv-dialog.close,.vv-dialog:not([open])){--vv-dialog-display: var(--vv-dialog-state-close-display)}:where(.vv-dialog--small .vv-dialog__wrapper,.vv-dialog--small > article){width:var(--vv-dialog-modifier-small-element-wrapper-width)}:where(.vv-dialog--fullscreen.vv-dialog){--vv-dialog-padding: var(--vv-dialog-modifier-fullscreen-padding)}:where(.vv-dialog--fullscreen .vv-dialog__wrapper,.vv-dialog--fullscreen > article){border-radius:var(--vv-dialog-modifier-fullscreen-element-wrapper-border-radius);max-width:var(--vv-dialog-modifier-fullscreen-element-wrapper-max-width);max-height:var(--vv-dialog-modifier-fullscreen-element-wrapper-max-height);width:var(--vv-dialog-modifier-fullscreen-element-wrapper-width);height:var(--vv-dialog-modifier-fullscreen-element-wrapper-height)}.vv-dialog--fade-block-enter-active,.vv-dialog--fade-block-leave-active{transition:var(--vv-dialog-transition-fade-block-active-transition)}:where(.vv-dialog--fade-block-enter-active .vv-dialog__wrapper,.vv-dialog--fade-block-leave-active .vv-dialog__wrapper,.vv-dialog--fade-block-enter-active > article,.vv-dialog--fade-block-leave-active > article){transition:var(--vv-dialog-transition-fade-block-active-element-wrapper-transition)}:where(.vv-dialog--fade-block-enter-from){opacity:var(--vv-dialog-transition-fade-block-enter-from-opacity)}:where(.vv-dialog--fade-block-enter-from .vv-dialog__wrapper,.vv-dialog--fade-block-enter-from > article){transform:var(--vv-dialog-transition-fade-block-enter-from-element-wrapper-transform)}:where(.vv-dialog--fade-block-leave-to){opacity:var(--vv-dialog-transition-fade-block-leave-to-opacity)}:where(.vv-dialog--fade-block-leave-to .vv-dialog__wrapper,.vv-dialog--fade-block-leave-to > article){transform:var(--vv-dialog-transition-fade-block-leave-to-element-wrapper-transform)}.vv-dialog--fade-inline-enter-active,.vv-dialog--fade-inline-leave-active{transition:var(--vv-dialog-transition-fade-inline-active-transition)}:where(.vv-dialog--fade-inline-enter-active .vv-dialog__wrapper,.vv-dialog--fade-inline-leave-active .vv-dialog__wrapper,.vv-dialog--fade-inline-enter-active > article,.vv-dialog--fade-inline-leave-active > article){transition:var(--vv-dialog-transition-fade-inline-active-element-wrapper-transition)}:where(.vv-dialog--fade-inline-enter-from){opacity:var(--vv-dialog-transition-fade-inline-enter-from-opacity)}:where(.vv-dialog--fade-inline-enter-from .vv-dialog__wrapper,.vv-dialog--fade-inline-enter-from > article){transform:var(--vv-dialog-transition-fade-inline-enter-from-element-wrapper-transform)}:where(.vv-dialog--fade-inline-leave-to){opacity:var(--vv-dialog-transition-fade-inline-leave-to-opacity)}:where(.vv-dialog--fade-inline-leave-to .vv-dialog__wrapper,.vv-dialog--fade-inline-leave-to > article){transform:var(--vv-dialog-transition-fade-inline-leave-to-element-wrapper-transform)}.vv-dialog--scale-enter-active,.vv-dialog--scale-leave-active{transition:var(--vv-dialog-transition-scale-active-transition)}:where(.vv-dialog--scale-enter-active .vv-dialog__wrapper,.vv-dialog--scale-leave-active .vv-dialog__wrapper,.vv-dialog--scale-enter-active > article,.vv-dialog--scale-leave-active > article){transition:var(--vv-dialog-transition-scale-active-element-wrapper-transition)}.vv-dialog--scale-enter-from,.vv-dialog--scale-leave-to{opacity:var(--vv-dialog-transition-scale-inert-opacity)}:where(.vv-dialog--scale-enter-from .vv-dialog__wrapper,.vv-dialog--scale-leave-to .vv-dialog__wrapper,.vv-dialog--scale-enter-from > article,.vv-dialog--scale-leave-to > article){transform:var(--vv-dialog-transition-scale-inert-element-wrapper-transform)}