@getvitops/core 0.1.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/patterns/carousel.css +3 -3
- package/css/patterns/code.css +2 -2
- package/css/patterns/combobox.css +3 -3
- package/css/patterns/comment.css +1 -1
- package/css/patterns/copy.css +3 -3
- package/css/patterns/dialog.css +2 -2
- package/css/patterns/drawer.css +2 -2
- package/css/patterns/forms.css +10 -10
- package/css/patterns/icon.css +2 -2
- package/css/patterns/list.css +6 -6
- package/css/patterns/media.css +1 -1
- package/css/patterns/nav.css +5 -5
- package/css/patterns/notification.css +3 -3
- package/css/patterns/scroll-based.css +1 -1
- package/css/patterns/scroll-target.css +3 -3
- package/css/patterns/sitenav.css +14 -14
- package/css/patterns/split-link.css +4 -4
- package/css/patterns/tag.css +1 -1
- package/css/patterns/text-effects.css +1 -1
- package/css/patterns/tooltip.css +2 -2
- package/css/patterns/tree.css +3 -3
- package/dist/elements.js +10 -10
- package/package.json +3 -2
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
border: none;
|
|
65
65
|
border-radius: 50%;
|
|
66
66
|
color: var(--carousel-button-color, currentColor);
|
|
67
|
-
background: var(--
|
|
67
|
+
background: var(--surface-bg-muted);
|
|
68
68
|
opacity: 0.9;
|
|
69
69
|
transition:
|
|
70
70
|
opacity 0.2s ease,
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
|
|
74
74
|
&::scroll-button(*):hover {
|
|
75
75
|
opacity: 1;
|
|
76
|
-
background: var(--color-surface-
|
|
76
|
+
background: var(--color-surface-muted);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
&::scroll-button(*):focus-visible {
|
|
@@ -211,7 +211,7 @@
|
|
|
211
211
|
block-size: 2rem;
|
|
212
212
|
border: none;
|
|
213
213
|
border-radius: 50%;
|
|
214
|
-
background: var(--
|
|
214
|
+
background: var(--surface-bg-muted);
|
|
215
215
|
color: var(--carousel-button-color, currentColor);
|
|
216
216
|
opacity: 0.7;
|
|
217
217
|
cursor: pointer;
|
package/css/patterns/code.css
CHANGED
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
:where(:not(pre) > code) {
|
|
11
11
|
font-family: var(--font-mono);
|
|
12
12
|
font-size: 0.85em;
|
|
13
|
-
background: var(--
|
|
14
|
-
color: var(--
|
|
13
|
+
background: var(--neutral-border);
|
|
14
|
+
color: var(--neutral-text);
|
|
15
15
|
padding: 0.1em 0.4em;
|
|
16
16
|
border-radius: var(--br-default);
|
|
17
17
|
}
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
border-radius: var(--_br);
|
|
21
21
|
|
|
22
22
|
&:focus {
|
|
23
|
-
outline: 2px solid var(--combobox-focus-color, var(--color-brand-primary-
|
|
23
|
+
outline: 2px solid var(--combobox-focus-color, var(--color-brand-primary-muted));
|
|
24
24
|
outline-offset: 2px;
|
|
25
25
|
}
|
|
26
26
|
}
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
border: var(--_b);
|
|
36
36
|
border-radius: var(--_br);
|
|
37
37
|
box-shadow: var(--_ds);
|
|
38
|
-
background: var(--
|
|
38
|
+
background: var(--surface-bg);
|
|
39
39
|
max-block-size: 15rem;
|
|
40
40
|
overflow-y: auto;
|
|
41
41
|
list-style: none;
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
|
|
56
56
|
&:hover,
|
|
57
57
|
&[aria-selected='true'] {
|
|
58
|
-
background: var(--color-surface-
|
|
58
|
+
background: var(--color-surface-muted);
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
&[aria-disabled='true'] {
|
package/css/patterns/comment.css
CHANGED
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
grid-column: 1 / -1;
|
|
63
63
|
margin-inline-start: var(--comment-indent, 2rem);
|
|
64
64
|
padding-inline-start: var(--comment-indent, 2rem);
|
|
65
|
-
border-inline-start: 2px solid var(--color-surface-
|
|
65
|
+
border-inline-start: 2px solid var(--color-surface-muted);
|
|
66
66
|
display: flex;
|
|
67
67
|
flex-direction: column;
|
|
68
68
|
gap: 1rem;
|
package/css/patterns/copy.css
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
&:focus-visible {
|
|
41
|
-
outline: 2px solid var(--copy-focus-color, var(--color-brand-primary-
|
|
41
|
+
outline: 2px solid var(--copy-focus-color, var(--color-brand-primary-muted));
|
|
42
42
|
outline-offset: 2px;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
@@ -66,8 +66,8 @@
|
|
|
66
66
|
font-size: 0.75rem;
|
|
67
67
|
border-radius: 0.25rem;
|
|
68
68
|
white-space: nowrap;
|
|
69
|
-
background: var(--
|
|
70
|
-
color: var(--
|
|
69
|
+
background: var(--surface-text);
|
|
70
|
+
color: var(--surface-bg);
|
|
71
71
|
opacity: 0;
|
|
72
72
|
visibility: hidden;
|
|
73
73
|
transition:
|
package/css/patterns/dialog.css
CHANGED
|
@@ -25,8 +25,8 @@ dialog.dialog {
|
|
|
25
25
|
border: var(--_b);
|
|
26
26
|
border-radius: var(--_br);
|
|
27
27
|
box-shadow: var(--_ds);
|
|
28
|
-
background: var(--
|
|
29
|
-
color: var(--
|
|
28
|
+
background: var(--surface-bg);
|
|
29
|
+
color: var(--surface-text);
|
|
30
30
|
max-block-size: calc(100vh - 2rem);
|
|
31
31
|
|
|
32
32
|
&::backdrop {
|
package/css/patterns/drawer.css
CHANGED
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
padding: var(--_p);
|
|
16
16
|
border: var(--_b);
|
|
17
17
|
box-shadow: var(--_ds);
|
|
18
|
-
background: var(--
|
|
19
|
-
color: var(--
|
|
18
|
+
background: var(--surface-bg);
|
|
19
|
+
color: var(--surface-text);
|
|
20
20
|
max-inline-size: none;
|
|
21
21
|
max-block-size: none;
|
|
22
22
|
|
package/css/patterns/forms.css
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
|
|
33
33
|
.form-group__error {
|
|
34
34
|
font-size: var(--form-error-size, 0.75rem);
|
|
35
|
-
color: var(--color-danger-
|
|
35
|
+
color: var(--color-danger-bold);
|
|
36
36
|
display: flex;
|
|
37
37
|
align-items: center;
|
|
38
38
|
gap: 0.25rem;
|
|
@@ -87,7 +87,7 @@ fieldset.fieldset,
|
|
|
87
87
|
border: var(--_b);
|
|
88
88
|
border-radius: var(--_br);
|
|
89
89
|
padding: var(--_p);
|
|
90
|
-
background: var(--
|
|
90
|
+
background: var(--surface-bg);
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
/* ── Input group — input flanked by icons/addons ───────────────────────────── */
|
|
@@ -171,7 +171,7 @@ fieldset.fieldset,
|
|
|
171
171
|
block-size: var(--_check-size);
|
|
172
172
|
border: var(--_b);
|
|
173
173
|
border-radius: var(--_br);
|
|
174
|
-
background: var(--
|
|
174
|
+
background: var(--surface-bg);
|
|
175
175
|
color: #fff;
|
|
176
176
|
display: flex;
|
|
177
177
|
align-items: center;
|
|
@@ -194,8 +194,8 @@ fieldset.fieldset,
|
|
|
194
194
|
}
|
|
195
195
|
|
|
196
196
|
input:checked + .custom-check__box {
|
|
197
|
-
background: var(--
|
|
198
|
-
border-color: var(--
|
|
197
|
+
background: var(--brand-primary-solid);
|
|
198
|
+
border-color: var(--brand-primary-solid);
|
|
199
199
|
|
|
200
200
|
.custom-check__indicator {
|
|
201
201
|
opacity: 1;
|
|
@@ -204,7 +204,7 @@ fieldset.fieldset,
|
|
|
204
204
|
}
|
|
205
205
|
|
|
206
206
|
input:focus-visible + .custom-check__box {
|
|
207
|
-
outline: 2px solid var(--check-focus-color, var(--color-brand-primary-
|
|
207
|
+
outline: 2px solid var(--check-focus-color, var(--color-brand-primary-muted));
|
|
208
208
|
outline-offset: 2px;
|
|
209
209
|
}
|
|
210
210
|
|
|
@@ -257,7 +257,7 @@ fieldset.fieldset,
|
|
|
257
257
|
inline-size: var(--_switch-width);
|
|
258
258
|
block-size: var(--_switch-height);
|
|
259
259
|
border-radius: var(--br-switch-track, var(--br-pill, 999px));
|
|
260
|
-
background: var(--color-surface-
|
|
260
|
+
background: var(--color-surface-muted);
|
|
261
261
|
transition: background-color 0.2s ease;
|
|
262
262
|
}
|
|
263
263
|
|
|
@@ -275,7 +275,7 @@ fieldset.fieldset,
|
|
|
275
275
|
}
|
|
276
276
|
|
|
277
277
|
input:checked + .switch__track {
|
|
278
|
-
background: var(--
|
|
278
|
+
background: var(--brand-primary-solid);
|
|
279
279
|
|
|
280
280
|
.switch__thumb {
|
|
281
281
|
inset-inline-start: calc(100% - var(--_switch-thumb-size) - 2px);
|
|
@@ -283,7 +283,7 @@ fieldset.fieldset,
|
|
|
283
283
|
}
|
|
284
284
|
|
|
285
285
|
input:focus-visible + .switch__track {
|
|
286
|
-
outline: 2px solid var(--switch-focus-color, var(--color-brand-primary-
|
|
286
|
+
outline: 2px solid var(--switch-focus-color, var(--color-brand-primary-muted));
|
|
287
287
|
outline-offset: 2px;
|
|
288
288
|
}
|
|
289
289
|
|
|
@@ -329,7 +329,7 @@ select.custom-select {
|
|
|
329
329
|
cursor: pointer;
|
|
330
330
|
|
|
331
331
|
&:focus-visible {
|
|
332
|
-
outline: 2px solid var(--select-focus-color, var(--color-brand-primary-
|
|
332
|
+
outline: 2px solid var(--select-focus-color, var(--color-brand-primary-muted));
|
|
333
333
|
outline-offset: 2px;
|
|
334
334
|
}
|
|
335
335
|
}
|
package/css/patterns/icon.css
CHANGED
|
@@ -57,11 +57,11 @@
|
|
|
57
57
|
transition: background-color 0.15s ease;
|
|
58
58
|
|
|
59
59
|
&:hover {
|
|
60
|
-
background: var(--color-surface-
|
|
60
|
+
background: var(--color-surface-muted);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
&:focus-visible {
|
|
64
|
-
outline: 2px solid var(--icon-button-focus-color, var(--color-brand-primary-
|
|
64
|
+
outline: 2px solid var(--icon-button-focus-color, var(--color-brand-primary-muted));
|
|
65
65
|
outline-offset: 2px;
|
|
66
66
|
}
|
|
67
67
|
|
package/css/patterns/list.css
CHANGED
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
&.list--divided .list__item + .list__item {
|
|
65
|
-
border-block-start: 1px solid var(--list-divider-color, var(--color-surface-
|
|
65
|
+
border-block-start: 1px solid var(--list-divider-color, var(--color-surface-muted));
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
&.list--bordered {
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
font-size: 0.75em;
|
|
111
111
|
padding: 0.125rem 0.375rem;
|
|
112
112
|
border-radius: var(--br-count, var(--br-pill, 999px));
|
|
113
|
-
background: var(--color-surface-
|
|
113
|
+
background: var(--color-surface-muted);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
.facet-list__item--active .facet-list__name {
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
border-radius: var(--_br);
|
|
141
141
|
|
|
142
142
|
&:focus {
|
|
143
|
-
outline: 2px solid var(--filter-focus-color, var(--color-brand-primary-
|
|
143
|
+
outline: 2px solid var(--filter-focus-color, var(--color-brand-primary-muted));
|
|
144
144
|
outline-offset: 2px;
|
|
145
145
|
}
|
|
146
146
|
}
|
|
@@ -185,7 +185,7 @@
|
|
|
185
185
|
.filtered-list__match {
|
|
186
186
|
padding-inline: 0.125rem;
|
|
187
187
|
border-radius: 0.125rem;
|
|
188
|
-
background: var(--color-warning-
|
|
188
|
+
background: var(--color-warning-muted);
|
|
189
189
|
}
|
|
190
190
|
}
|
|
191
191
|
|
|
@@ -239,7 +239,7 @@
|
|
|
239
239
|
padding: 0.25rem 0.5rem;
|
|
240
240
|
border-radius: var(--br-chip, var(--br-tag, 0.25rem));
|
|
241
241
|
font-size: 0.875rem;
|
|
242
|
-
background: var(--color-surface-
|
|
242
|
+
background: var(--color-surface-muted);
|
|
243
243
|
}
|
|
244
244
|
|
|
245
245
|
.chip-list__chip-remove {
|
|
@@ -266,7 +266,7 @@
|
|
|
266
266
|
}
|
|
267
267
|
|
|
268
268
|
&:focus-within {
|
|
269
|
-
outline: 2px solid var(--chip-list-focus-color, var(--color-brand-primary-
|
|
269
|
+
outline: 2px solid var(--chip-list-focus-color, var(--color-brand-primary-muted));
|
|
270
270
|
outline-offset: 2px;
|
|
271
271
|
}
|
|
272
272
|
}
|
package/css/patterns/media.css
CHANGED
package/css/patterns/nav.css
CHANGED
|
@@ -13,7 +13,7 @@ nav:has(> .nav-items) {
|
|
|
13
13
|
|
|
14
14
|
.nav-header {
|
|
15
15
|
padding-bottom: 1rem;
|
|
16
|
-
border-bottom: 1px solid var(--nav-border-color, var(--color-surface-
|
|
16
|
+
border-bottom: 1px solid var(--nav-border-color, var(--color-surface-muted));
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
.nav-items {
|
|
@@ -49,7 +49,7 @@ nav:has(> .nav-items) {
|
|
|
49
49
|
flex-direction: column;
|
|
50
50
|
gap: 1rem;
|
|
51
51
|
padding-top: 1rem;
|
|
52
|
-
border-top: 1px solid var(--nav-border-color, var(--color-surface-
|
|
52
|
+
border-top: 1px solid var(--nav-border-color, var(--color-surface-muted));
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
/* ── Dropdown submenu ─────────────────────────────────────────────────────── */
|
|
@@ -106,7 +106,7 @@ nav:has(> .nav-items) {
|
|
|
106
106
|
border-radius: 0.375rem;
|
|
107
107
|
|
|
108
108
|
&:hover {
|
|
109
|
-
background-color: var(--color-surface-
|
|
109
|
+
background-color: var(--color-surface-muted);
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
}
|
|
@@ -131,8 +131,8 @@ nav:has(> .nav-items) {
|
|
|
131
131
|
inset: 0;
|
|
132
132
|
height: 100dvh;
|
|
133
133
|
width: 100%;
|
|
134
|
-
background: var(--
|
|
135
|
-
color: var(--
|
|
134
|
+
background: var(--surface-bg);
|
|
135
|
+
color: var(--surface-text);
|
|
136
136
|
opacity: 0;
|
|
137
137
|
translate: -100%;
|
|
138
138
|
transition-timing-function: var(--interact-easing, ease);
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
border: var(--_b);
|
|
19
19
|
border-radius: var(--_br);
|
|
20
20
|
box-shadow: var(--_ds);
|
|
21
|
-
background: var(--
|
|
22
|
-
color: var(--
|
|
21
|
+
background: var(--surface-bg);
|
|
22
|
+
color: var(--surface-text);
|
|
23
23
|
animation: notification-enter 0.3s ease;
|
|
24
24
|
|
|
25
25
|
&.notification--exiting {
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
inset-block-end: 0;
|
|
78
78
|
inset-inline: 0;
|
|
79
79
|
block-size: 3px;
|
|
80
|
-
background: var(--
|
|
80
|
+
background: var(--brand-primary-solid);
|
|
81
81
|
border-radius: 0 0 var(--_br) var(--_br);
|
|
82
82
|
transform-origin: left;
|
|
83
83
|
animation: notification-progress var(--notification-duration, 5s) linear forwards;
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
|
|
124
124
|
.scroll-progress__bar {
|
|
125
125
|
block-size: 100%;
|
|
126
|
-
background: var(--scroll-progress-color, var(--
|
|
126
|
+
background: var(--scroll-progress-color, var(--brand-primary-solid));
|
|
127
127
|
transform-origin: left;
|
|
128
128
|
animation: scroll-progress-grow linear;
|
|
129
129
|
animation-timeline: scroll(root);
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
(deferred.ts) on engines without `scroll-target-group` support. */
|
|
19
19
|
.scroll-target-group a:target-current,
|
|
20
20
|
.scroll-target-group a.is-current {
|
|
21
|
-
color: var(--scroll-target-active-color, var(--
|
|
21
|
+
color: var(--scroll-target-active-color, var(--brand-primary-solid));
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.scroll-target-group--indicator a {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
.scroll-target-group--bar a:target-current::before,
|
|
48
48
|
.scroll-target-group--indicator a.is-current::before,
|
|
49
49
|
.scroll-target-group--bar a.is-current::before {
|
|
50
|
-
background-color: var(--scroll-target-active-color, var(--
|
|
50
|
+
background-color: var(--scroll-target-active-color, var(--brand-primary-solid));
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.scroll-target-group--bar a {
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
|
|
108
108
|
.toc-sidebar a:target-current,
|
|
109
109
|
.toc-sidebar a.is-current {
|
|
110
|
-
color: var(--scroll-target-active-color, var(--
|
|
110
|
+
color: var(--scroll-target-active-color, var(--brand-primary-solid));
|
|
111
111
|
font-weight: 500;
|
|
112
112
|
}
|
|
113
113
|
|
package/css/patterns/sitenav.css
CHANGED
|
@@ -47,11 +47,11 @@
|
|
|
47
47
|
border-radius: var(--br-control, 0.375rem);
|
|
48
48
|
|
|
49
49
|
&:hover {
|
|
50
|
-
background: var(--color-surface-
|
|
50
|
+
background: var(--color-surface-muted);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
&:focus-visible {
|
|
54
|
-
outline: 2px solid var(--sitenav-focus-color, var(--color-brand-primary-
|
|
54
|
+
outline: 2px solid var(--sitenav-focus-color, var(--color-brand-primary-muted));
|
|
55
55
|
outline-offset: 2px;
|
|
56
56
|
}
|
|
57
57
|
}
|
|
@@ -73,8 +73,8 @@
|
|
|
73
73
|
max-inline-size: 100dvw;
|
|
74
74
|
padding: 1.5rem;
|
|
75
75
|
padding-block-start: 3.5rem; /* clearance for the close button */
|
|
76
|
-
background: var(--
|
|
77
|
-
color: var(--
|
|
76
|
+
background: var(--surface-bg);
|
|
77
|
+
color: var(--surface-text);
|
|
78
78
|
border: none;
|
|
79
79
|
box-shadow: var(--ds-panel);
|
|
80
80
|
overflow-y: auto;
|
|
@@ -149,11 +149,11 @@
|
|
|
149
149
|
border-radius: var(--br-control, 0.375rem);
|
|
150
150
|
|
|
151
151
|
&:hover {
|
|
152
|
-
background: var(--color-surface-
|
|
152
|
+
background: var(--color-surface-muted);
|
|
153
153
|
}
|
|
154
154
|
|
|
155
155
|
&:focus-visible {
|
|
156
|
-
outline: 2px solid var(--sitenav-focus-color, var(--color-brand-primary-
|
|
156
|
+
outline: 2px solid var(--sitenav-focus-color, var(--color-brand-primary-muted));
|
|
157
157
|
outline-offset: 2px;
|
|
158
158
|
}
|
|
159
159
|
}
|
|
@@ -280,8 +280,8 @@
|
|
|
280
280
|
min-inline-size: 13rem;
|
|
281
281
|
padding: 0.5rem;
|
|
282
282
|
overflow: visible;
|
|
283
|
-
background: var(--
|
|
284
|
-
color: var(--
|
|
283
|
+
background: var(--surface-bg);
|
|
284
|
+
color: var(--surface-text);
|
|
285
285
|
border: var(--b-panel);
|
|
286
286
|
border-radius: var(--br-panel);
|
|
287
287
|
box-shadow: var(--ds-panel);
|
|
@@ -366,8 +366,8 @@
|
|
|
366
366
|
min-inline-size: 13rem;
|
|
367
367
|
padding: 0.5rem;
|
|
368
368
|
overflow: visible;
|
|
369
|
-
background: var(--
|
|
370
|
-
color: var(--
|
|
369
|
+
background: var(--surface-bg);
|
|
370
|
+
color: var(--surface-text);
|
|
371
371
|
border: var(--b-panel);
|
|
372
372
|
border-radius: var(--br-panel);
|
|
373
373
|
box-shadow: var(--ds-panel);
|
|
@@ -453,8 +453,8 @@
|
|
|
453
453
|
min-inline-size: 13rem;
|
|
454
454
|
padding: 0.5rem;
|
|
455
455
|
overflow: visible;
|
|
456
|
-
background: var(--
|
|
457
|
-
color: var(--
|
|
456
|
+
background: var(--surface-bg);
|
|
457
|
+
color: var(--surface-text);
|
|
458
458
|
border: var(--b-panel);
|
|
459
459
|
border-radius: var(--br-panel);
|
|
460
460
|
box-shadow: var(--ds-panel);
|
|
@@ -540,8 +540,8 @@
|
|
|
540
540
|
min-inline-size: 13rem;
|
|
541
541
|
padding: 0.5rem;
|
|
542
542
|
overflow: visible;
|
|
543
|
-
background: var(--
|
|
544
|
-
color: var(--
|
|
543
|
+
background: var(--surface-bg);
|
|
544
|
+
color: var(--surface-text);
|
|
545
545
|
border: var(--b-panel);
|
|
546
546
|
border-radius: var(--br-panel);
|
|
547
547
|
box-shadow: var(--ds-panel);
|
|
@@ -38,11 +38,11 @@
|
|
|
38
38
|
transition: background-color 0.15s ease;
|
|
39
39
|
|
|
40
40
|
&:hover {
|
|
41
|
-
background: var(--color-surface-
|
|
41
|
+
background: var(--color-surface-muted);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
&:focus-visible {
|
|
45
|
-
outline: 2px solid var(--split-link-focus-color, var(--color-brand-primary-
|
|
45
|
+
outline: 2px solid var(--split-link-focus-color, var(--color-brand-primary-muted));
|
|
46
46
|
outline-offset: 2px;
|
|
47
47
|
}
|
|
48
48
|
|
|
@@ -71,8 +71,8 @@
|
|
|
71
71
|
border: var(--_b);
|
|
72
72
|
border-radius: var(--_br);
|
|
73
73
|
box-shadow: var(--_ds);
|
|
74
|
-
background: var(--
|
|
75
|
-
color: var(--
|
|
74
|
+
background: var(--surface-bg);
|
|
75
|
+
color: var(--surface-text);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
/* Top-layer popover: anchored + placed via position-area. */
|
package/css/patterns/tag.css
CHANGED
|
@@ -225,7 +225,7 @@
|
|
|
225
225
|
|
|
226
226
|
/* ── Highlight sweep ──────────────────────────────────────────────────────── */
|
|
227
227
|
.text-highlight {
|
|
228
|
-
--_highlight-color: var(--text-highlight-color, var(--color-warning-
|
|
228
|
+
--_highlight-color: var(--text-highlight-color, var(--color-warning-muted));
|
|
229
229
|
--_highlight-duration: var(--text-highlight-duration, 0.5s);
|
|
230
230
|
--_highlight-pad-block: var(--text-highlight-pad-block, 0.1em);
|
|
231
231
|
--_highlight-pad-inline: var(--text-highlight-pad-inline, 0);
|
package/css/patterns/tooltip.css
CHANGED
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
padding: var(--_p);
|
|
45
45
|
border-radius: var(--_br);
|
|
46
46
|
box-shadow: var(--_ds);
|
|
47
|
-
background: var(--
|
|
48
|
-
color: var(--
|
|
47
|
+
background: var(--surface-text);
|
|
48
|
+
color: var(--surface-bg);
|
|
49
49
|
font-size: var(--_fs);
|
|
50
50
|
white-space: nowrap;
|
|
51
51
|
max-inline-size: 20rem;
|
package/css/patterns/tree.css
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
.tree__item > .tree {
|
|
19
19
|
margin-inline-start: var(--tree-indent, 1.5rem);
|
|
20
20
|
padding-inline-start: var(--tree-indent, 1.5rem);
|
|
21
|
-
border-inline-start: 1px solid var(--color-surface-
|
|
21
|
+
border-inline-start: 1px solid var(--color-surface-muted);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.tree__content,
|
|
@@ -115,8 +115,8 @@
|
|
|
115
115
|
inset-block-start: 0;
|
|
116
116
|
block-size: 1rem;
|
|
117
117
|
inline-size: calc(var(--tree-indent, 1.5rem) - 0.5rem);
|
|
118
|
-
border-inline-start: 1px solid var(--color-surface-
|
|
119
|
-
border-block-end: 1px solid var(--color-surface-
|
|
118
|
+
border-inline-start: 1px solid var(--color-surface-muted);
|
|
119
|
+
border-block-end: 1px solid var(--color-surface-muted);
|
|
120
120
|
}
|
|
121
121
|
}
|
|
122
122
|
|
package/dist/elements.js
CHANGED
|
@@ -118,7 +118,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
118
118
|
* Copyright 2023 Google LLC
|
|
119
119
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
120
120
|
*/
|
|
121
|
-
;Y.State,Y.Computed;const Ot=mt(P);var $=class extends Ot{static
|
|
121
|
+
;Y.State,Y.Computed;const Ot=mt(P);var $=class extends Ot{static{this.styles=[]}getSlottedNodes(e=[]){let t=this.shadowRoot?.querySelector(`slot`);if(!t)return[];let n=t.assignedNodes({flatten:!0});return e.length===0?n:n.filter(t=>e.includes(t.tagName.toLowerCase()))}},kt=class{constructor(e,t){this.handleEl=null,this.isDragging=!1,this.rafId=null,this.pendingPosition=null,this.containerRect=null,this.currentPosition=.5,this.prefersReducedMotion=!1,this.onPointerDown=e=>{if(e.button!==0)return;e.preventDefault(),this.isDragging=!0,this.handleEl?.setPointerCapture(e.pointerId);let t=this.handleEl?.parentElement;this.containerRect=t?.getBoundingClientRect()??null,document.addEventListener(`pointermove`,this.onPointerMove),document.addEventListener(`pointerup`,this.onPointerUp),document.addEventListener(`pointercancel`,this.onPointerUp),this.handleEl?.classList.add(`dragging`),this.options.onDragStart(),this.processPointerEvent(e)},this.onPointerMove=e=>{this.isDragging&&this.processPointerEvent(e)},this.flushPosition=()=>{this.rafId=null,this.pendingPosition!==null&&this.isDragging&&(this.currentPosition=this.pendingPosition,this.updateAriaValue(this.currentPosition),this.options.onDrag(this.currentPosition))},this.onPointerUp=e=>{if(!this.isDragging)return;this.isDragging=!1,this.handleEl?.releasePointerCapture(e.pointerId),this.containerRect=null,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null);let t=this.pendingPosition??this.currentPosition;this.currentPosition=t,this.pendingPosition=null,this.updateAriaValue(t),this.options.onDragEnd(t),document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp),this.handleEl?.classList.remove(`dragging`)},this.onKeyDown=e=>{let{orientation:t,keyboardStep:n,keyboardLargeStep:r}=this.options,i=e.shiftKey?r:n,a=0;if(t===`horizontal`?e.key===`ArrowLeft`?a=-i:e.key===`ArrowRight`&&(a=i):e.key===`ArrowUp`?a=-i:e.key===`ArrowDown`&&(a=i),e.key===`Home`){e.preventDefault(),this.currentPosition=0,this.updateAriaValue(0),this.options.onDrag(0),this.options.onDragEnd(0);return}if(e.key===`End`){e.preventDefault(),this.currentPosition=1,this.updateAriaValue(1),this.options.onDrag(1),this.options.onDragEnd(1);return}if(a!==0){e.preventDefault();let t=Math.max(0,Math.min(1,this.currentPosition+a));this.currentPosition=t,this.updateAriaValue(t),this.options.onDrag(t),this.options.onDragEnd(t)}},this.host=e,this.options={handleSelector:t.handleSelector,orientation:t.orientation??`horizontal`,smooth:t.smooth??!0,onDrag:t.onDrag??(()=>{}),onDragStart:t.onDragStart??(()=>{}),onDragEnd:t.onDragEnd??(()=>{}),keyboardStep:t.keyboardStep??.01,keyboardLargeStep:t.keyboardLargeStep??.1},e.addController(this)}hostConnected(){this.prefersReducedMotion=window.matchMedia(`(prefers-reduced-motion: reduce)`).matches}hostUpdated(){this.setupHandle()}hostDisconnected(){this.cleanup()}get shouldSmooth(){return this.options.smooth&&!this.prefersReducedMotion}setupHandle(){let e=this.host.renderRoot.querySelector(this.options.handleSelector);e!==this.handleEl&&(this.handleEl&&(this.handleEl.removeEventListener(`pointerdown`,this.onPointerDown),this.handleEl.removeEventListener(`keydown`,this.onKeyDown)),this.handleEl=e,this.handleEl&&(this.handleEl.addEventListener(`pointerdown`,this.onPointerDown),this.handleEl.addEventListener(`keydown`,this.onKeyDown),this.handleEl.hasAttribute(`tabindex`)||this.handleEl.setAttribute(`tabindex`,`0`),this.handleEl.hasAttribute(`role`)||this.handleEl.setAttribute(`role`,`separator`),this.handleEl.setAttribute(`aria-valuemin`,`0`),this.handleEl.setAttribute(`aria-valuemax`,`100`),this.updateAriaValue(this.currentPosition)))}processPointerEvent(e){if(!this.containerRect)return;let{orientation:t}=this.options,n=this.containerRect,r;if(t===`horizontal`){let t=e.clientX-n.left;r=Math.max(0,Math.min(1,t/n.width))}else{let t=e.clientY-n.top;r=Math.max(0,Math.min(1,t/n.height))}this.pendingPosition=r,this.shouldSmooth&&this.rafId===null&&(this.rafId=requestAnimationFrame(this.flushPosition))}updateAriaValue(e){let t=Math.round(e*100);this.handleEl?.setAttribute(`aria-valuenow`,String(t))}cleanup(){this.handleEl&&(this.handleEl.removeEventListener(`pointerdown`,this.onPointerDown),this.handleEl.removeEventListener(`keydown`,this.onKeyDown)),document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp),this.rafId!==null&&cancelAnimationFrame(this.rafId)}setPosition(e){this.currentPosition=Math.max(0,Math.min(1,e)),this.updateAriaValue(this.currentPosition)}getPosition(){return this.currentPosition}updateOptions(e){Object.assign(this.options,e)}},At=class extends ${static{this.styles=[$.styles,o`
|
|
122
122
|
:host {
|
|
123
123
|
--_offset: var(--offset, 0.5);
|
|
124
124
|
--_handle-size: var(--handle-size, 8px);
|
|
@@ -245,7 +245,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
245
245
|
transition: none;
|
|
246
246
|
}
|
|
247
247
|
}
|
|
248
|
-
`]
|
|
248
|
+
`]}static{this.properties={position:{type:Number},vertical:{type:Boolean,reflect:!0},discrete:{type:Boolean,reflect:!0},minSize:{type:Number,attribute:`min-size`},maxSize:{type:Number,attribute:`max-size`},keyboardStep:{type:Number,attribute:`keyboard-step`},collapseThreshold:{type:Number,attribute:`collapse-threshold`},snapPoints:{type:String,attribute:`snap-points`},snapDistance:{type:Number,attribute:`snap-distance`},_offset:{state:!0}}}constructor(){super(),this.containerSize=0,this.position=50,this.vertical=!1,this.discrete=!1,this.minSize=100,this.maxSize=0,this.keyboardStep=1,this.collapseThreshold=0,this.snapPoints=``,this.snapDistance=10,this._offset=.5,this.initDragController()}initDragController(){this.dragController=new kt(this,{handleSelector:`[part="handle"]`,orientation:this.vertical?`vertical`:`horizontal`,smooth:!this.discrete,onDragStart:()=>this.handleDragStart(),onDrag:e=>this.handleDrag(e),onDragEnd:e=>this.handleDragEnd(e),keyboardStep:this.keyboardStep/100,keyboardLargeStep:this.keyboardStep/10})}willUpdate(e){e.has(`position`)&&!e.has(`_offset`)&&(this._offset=this.position/100,this.dragController.setPosition(this._offset)),(e.has(`vertical`)||e.has(`discrete`)||e.has(`keyboardStep`))&&this.dragController.updateOptions({orientation:this.vertical?`vertical`:`horizontal`,smooth:!this.discrete,keyboardStep:this.keyboardStep/100,keyboardLargeStep:this.keyboardStep/10})}handleDragStart(){let e=this.renderRoot.querySelector(`.splitter`);if(e){let t=e.getBoundingClientRect();this.containerSize=this.vertical?t.height:t.width}}applyConstraints(e){let t=e;if(this.containerSize>0){let e=this.minSize/this.containerSize,n=this.maxSize>0?this.maxSize/this.containerSize:1-e;t=Math.max(e,Math.min(1-e,t)),t=Math.min(n,t)}if(this.snapPoints&&this.containerSize>0){let e=this.snapPoints.split(`,`).map(e=>parseFloat(e.trim())/100),n=this.snapDistance/this.containerSize;for(let r of e)if(Math.abs(t-r)<n){t=r;break}}if(this.collapseThreshold>0){let e=this.collapseThreshold/100;t<e?t=0:t>1-e&&(t=1)}return t}handleDrag(e){let t=this.applyConstraints(e);this._offset=t,this.style.setProperty(`--_offset`,String(this._offset))}handleDragEnd(e){let t=this.applyConstraints(e);this._offset=t,this.style.setProperty(`--_offset`,String(this._offset)),this.dispatchEvent(new CustomEvent(`split-change`,{detail:{position:this._offset*100},bubbles:!0,composed:!0}))}render(){return T`
|
|
249
249
|
<div class="splitter" part="container" style="--_offset: ${this._offset}">
|
|
250
250
|
<div class="panel panel--start" part="panel-start">
|
|
251
251
|
<slot name="start"></slot>
|
|
@@ -261,7 +261,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
261
261
|
<slot name="end"></slot>
|
|
262
262
|
</div>
|
|
263
263
|
</div>
|
|
264
|
-
`}};customElements.get(`wc-split-panel`)||customElements.define(`wc-split-panel`,At);var jt=class extends ${static
|
|
264
|
+
`}};customElements.get(`wc-split-panel`)||customElements.define(`wc-split-panel`,At);var jt=class extends ${static{this.styles=[$.styles,o`
|
|
265
265
|
:host {
|
|
266
266
|
--_offset: var(--offset, 0.5);
|
|
267
267
|
--_handle-size: var(--handle-size, 40px);
|
|
@@ -455,7 +455,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
455
455
|
white-space: nowrap;
|
|
456
456
|
border: 0;
|
|
457
457
|
}
|
|
458
|
-
`]
|
|
458
|
+
`]}static{this.properties={position:{type:Number},vertical:{type:Boolean,reflect:!0},discrete:{type:Boolean,reflect:!0},keyboardStep:{type:Number,attribute:`keyboard-step`},beforeLabel:{type:String,attribute:`before-label`},afterLabel:{type:String,attribute:`after-label`},_offset:{type:Number,state:!0}}}constructor(){super(),this.init(),this.initDragController()}init(){this.position=50,this.vertical=!1,this.discrete=!1,this.keyboardStep=1,this.beforeLabel=`Before`,this.afterLabel=`After`,this._offset=.5}initDragController(){this.dragController=new kt(this,{handleSelector:`[part="handle"]`,orientation:this.vertical?`vertical`:`horizontal`,smooth:!this.discrete,onDrag:e=>this.handleDrag(e),onDragEnd:e=>this.handleDragEnd(e),keyboardStep:this.keyboardStep/100,keyboardLargeStep:this.keyboardStep/10})}willUpdate(e){e.has(`position`)&&!e.has(`_offset`)&&(this._offset=this.position/100,this.dragController.setPosition(this._offset)),(e.has(`vertical`)||e.has(`discrete`)||e.has(`keyboardStep`))&&this.dragController.updateOptions({orientation:this.vertical?`vertical`:`horizontal`,smooth:!this.discrete,keyboardStep:this.keyboardStep/100,keyboardLargeStep:this.keyboardStep/10})}handleDrag(e){this._offset=e,this.style.setProperty(`--_offset`,String(this._offset))}handleDragEnd(e){this._offset=e,this.style.setProperty(`--_offset`,String(this._offset)),this.dispatchEvent(new CustomEvent(`compare-change`,{detail:{position:this._offset*100},bubbles:!0,composed:!0}))}render(){return T`
|
|
459
459
|
<div class="container" part="container" style="--_offset: ${this._offset}">
|
|
460
460
|
<div class="after" part="after" aria-label="${this.afterLabel}">
|
|
461
461
|
<slot name="after"></slot>
|
|
@@ -475,7 +475,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
475
475
|
</div>
|
|
476
476
|
</div>
|
|
477
477
|
</div>
|
|
478
|
-
`}};customElements.get(`wc-image-compare`)||customElements.define(`wc-image-compare`,jt);var Mt=class extends ${static
|
|
478
|
+
`}};customElements.get(`wc-image-compare`)||customElements.define(`wc-image-compare`,jt);var Mt=class extends ${static{this.properties={duration:{type:Number,reflect:!0},exit:{type:Number}}}createRenderRoot(){return this}render(){return E}#e;constructor(){super(),this.duration=0,this.exit=200}connectedCallback(){super.connectedCallback(),this.addEventListener(`click`,this.#t),this.duration>0&&(this.#e=setTimeout(()=>this.dismiss(),this.duration))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`click`,this.#t),this.#e&&clearTimeout(this.#e)}#t=e=>{e.target?.closest(`[data-dismiss]`)&&(e.preventDefault(),this.dismiss())};dismiss(){this.#e&&=(clearTimeout(this.#e),void 0);let e=new CustomEvent(`dismiss`,{bubbles:!0,cancelable:!0});if(!this.dispatchEvent(e))return;let t=matchMedia(`(prefers-reduced-motion: reduce)`).matches;if(this.exit<=0||t){this.remove();return}this.style.transition=`opacity ${this.exit}ms ease, scale ${this.exit}ms ease`,this.style.opacity=`0`,this.style.scale=`0.97`;let n=!1,r=()=>{n||(n=!0,this.remove())};this.addEventListener(`transitionend`,r,{once:!0}),setTimeout(r,this.exit+50)}};customElements.get(`wc-dismissable`)||customElements.define(`wc-dismissable`,Mt);var Nt=class extends ${static{this.styles=[$.styles,o`
|
|
479
479
|
:host {
|
|
480
480
|
display: inline-flex;
|
|
481
481
|
align-items: center;
|
|
@@ -532,7 +532,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
532
532
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
|
|
533
533
|
color: var(--copy-success-color, oklch(0.6 0.2 145));
|
|
534
534
|
}
|
|
535
|
-
`]
|
|
535
|
+
`]}static{this.properties={value:{type:String},label:{type:String},_copied:{type:Boolean,state:!0}}}constructor(){super(),this._handleCopy=async()=>{let e=this.value??this.getSlottedNodes().map(e=>e.textContent).join(``).trim();if(!(e==null||e===``)){console.log(`copying value:`,e);try{await navigator.clipboard.writeText(e),this._copied=!0,this._timeoutId=setTimeout(()=>{this._copied=!1},2e3),this.dispatchEvent(new CustomEvent(`copy`,{detail:{value:this.value},bubbles:!0,composed:!0}))}catch(e){console.error(`Failed to copy:`,e),this.dispatchEvent(new CustomEvent(`copy-error`,{detail:{error:e},bubbles:!0,composed:!0}))}}},this.init()}init(){this.value=void 0,this.label=`Copy to clipboard`,this._copied=!1}disconnectedCallback(){super.disconnectedCallback(),this._timeoutId&&clearTimeout(this._timeoutId)}render(){let e=this._copied?`copy__icon copy__icon--success`:`copy__icon copy__icon--copy`;return Q`
|
|
536
536
|
<slot></slot>
|
|
537
537
|
<button
|
|
538
538
|
class="copy__button"
|
|
@@ -543,7 +543,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
543
543
|
>
|
|
544
544
|
<span class=${e} part="icon" aria-hidden="true"></span>
|
|
545
545
|
</button>
|
|
546
|
-
`}};customElements.get(`copy-button`)||customElements.define(`copy-button`,Nt);var Pt=class extends ${static
|
|
546
|
+
`}};customElements.get(`copy-button`)||customElements.define(`copy-button`,Nt);var Pt=class extends ${static{this.properties={autoplay:{type:Number,reflect:!0}}}createRenderRoot(){return this}#e=[];#t=[];#n=!1;#r=!1;#i=null;#a=!1;#o=null;#s=!1;init(){this.autoplay=0}constructor(){super(),this.init()}connectedCallback(){super.connectedCallback(),this.hasAttribute(`role`)||this.setAttribute(`role`,`region`),this.hasAttribute(`aria-roledescription`)||this.setAttribute(`aria-roledescription`,`carousel`),this.#e=[...this.children].filter(e=>!e.hasAttribute(`slot`)),!(this.#e.length<2)&&(this.#n=this.classList.contains(`carousel--auto-pages`),this.#n||(this.#c(),this.#d(),this.addEventListener(`scrollsnapchange`,this.#p)),!this.autoplay&&this.hasAttribute(`autoplay`)&&(this.autoplay=Number(this.getAttribute(`autoplay`))||0),this.#s=matchMedia(`(prefers-reduced-motion: reduce)`).matches,this.autoplay>0&&(this.#y(),this.#s?(this.#a=!0,this.setAttribute(`aria-live`,`polite`),this.#b()):this.#m(),this.addEventListener(`pointerenter`,this.#g),this.addEventListener(`pointerleave`,this.#_),this.addEventListener(`focusin`,this.#g),this.addEventListener(`focusout`,this.#_)))}disconnectedCallback(){super.disconnectedCallback(),this.#n||(this.removeEventListener(`scrollsnapchange`,this.#p),this.#u()),this.removeEventListener(`pointerenter`,this.#g),this.removeEventListener(`pointerleave`,this.#_),this.removeEventListener(`focusin`,this.#g),this.removeEventListener(`focusout`,this.#_),this.#h(),this.#o&&=(this.#o.removeEventListener(`click`,this.#v),this.#o.hasAttribute(`slot`)||this.#o.remove(),null),this.removeAttribute(`aria-live`)}#c(){let e=[],t=[];for(let n=0;n<this.#e.length;n++){let r=this.#e[n];e.push(this.#l(r,n)),t.push(this.#l(r,n))}for(let t=e.length-1;t>=0;t--)this.prepend(e[t]);for(let e of t)this.append(e);this.#t=[...e,...t]}#l(e,t){let n=e.cloneNode(!0);n.setAttribute(`data-carousel-clone`,String(t)),n.setAttribute(`aria-hidden`,`true`);for(let e of[n,...n.querySelectorAll(`[tabindex], a, button, input, select, textarea`)])e.tabIndex=-1;return n}#u(){for(let e of this.#t)e.remove();this.#t=[]}#d(){requestAnimationFrame(()=>{let e=this.#e[0];e&&(this.style.scrollBehavior=`auto`,this.scrollLeft=e.offsetLeft-this.offsetLeft-(parseFloat(getComputedStyle(this).scrollPaddingLeft)||0)+(parseFloat(getComputedStyle(this).paddingLeft)||0),requestAnimationFrame(()=>{this.style.scrollBehavior=``}))})}#f(){this.scrollBy({left:this.clientWidth,behavior:`smooth`})}#p=e=>{if(this.#r){this.#r=!1;return}let t=e.snapTargetInline;if(!t||!t.hasAttribute(`data-carousel-clone`))return;let n=Number(t.getAttribute(`data-carousel-clone`)),r=this.#e[n];if(!r)return;let i=r.offsetLeft-t.offsetLeft;this.#r=!0,this.style.scrollBehavior=`auto`,this.scrollLeft+=i,requestAnimationFrame(()=>{this.style.scrollBehavior=``})};#m(){this.#i||this.autoplay<=0||(this.#a=!1,this.#i=setInterval(()=>this.#f(),this.autoplay),this.setAttribute(`aria-live`,`off`),this.#b())}#h(){this.#i&&=(clearInterval(this.#i),null)}#g=()=>{this.#h(),this.#a=!0,this.setAttribute(`aria-live`,`polite`),this.#b()};#_=()=>{this.#s||this.#m()};#v=()=>{this.#a?(this.#s=!1,this.#m()):this.#g()};#y(){let e=this.querySelector(`[slot="autoplay"]`);if(e)this.#o=e;else{let e=document.createElement(`button`);e.type=`button`,this.append(e),this.#o=e}this.#o.setAttribute(`part`,`autoplay`),this.#o.addEventListener(`click`,this.#v),this.#b()}#b(){this.#o&&(this.#o.setAttribute(`aria-label`,this.#a?`Play`:`Pause`),this.#o.setAttribute(`aria-pressed`,String(!this.#a)),this.#o.hasAttribute(`slot`)||(this.#o.textContent=this.#a?`▶`:`⏸`))}};customElements.get(`wc-carousel`)||customElements.define(`wc-carousel`,Pt);var Ft=class extends ${static{this.properties={breakpoint:{type:String,reflect:!0},projection:{type:Boolean,reflect:!0},singular:{type:Boolean,reflect:!0}}}createRenderRoot(){return this}#e=[];#t=[];#n=[];#r=null;#i=null;#a=null;#o=[];#s=[];#c=0;#l=!1;#u=null;#d=0;init(){this.breakpoint=`40rem`,this.projection=!1,this.singular=!1}constructor(){super(),this.init()}connectedCallback(){super.connectedCallback(),this.#f(),this.#e.length!==0&&(this.#m(),this.projection&&(this.#p(),this.#h(),this.#g(),this.singular&&(this.classList.add(`entries--singular`),this.#v(0))),this.#d=this.#b(),this.#x())}disconnectedCallback(){super.disconnectedCallback(),this.#u?.disconnect(),this.#u=null,this.#a?.remove(),this.#a=null,this.#o=[],this.#i?this.#i.remove():this.#r?.remove(),this.#r=null,this.#i=null,this.#s=[],this.classList.remove(`entries--wide`,`entries--projection`,`entries--singular`)}#f(){this.#e=[];let e=new Set,t=new Map,n=null;for(let r of this.children){let i=r.tagName.toLowerCase();if(/^h[1-6]$/.test(i))n=r;else if(i===`dl`&&n){let i=new Map,a=r.querySelectorAll(`dt`),o=r.querySelectorAll(`dd`);for(let n=0;n<a.length;n++){let r=a[n],s=r.textContent?.trim()??``,c=o[n]?.innerHTML??``;if(s){i.set(s,c),e.add(s);let n=r.getAttribute(`data-label`);n&&!t.has(s)&&t.set(s,n)}}this.#e.push({title:n.innerHTML,heading:n,dl:r,properties:i}),n=null}}this.#t=[...e],this.#n=this.#t.map(e=>t.get(e)??e)}#p(){this.classList.add(`entries--projection`)}#m(){let e=document.createElement(`table`);e.classList.add(`entries__table`),e.setAttribute(`aria-hidden`,`true`);let t=document.createElement(`thead`),n=document.createElement(`tr`),r=document.createElement(`th`);r.textContent=``,n.appendChild(r),this.#s=[];for(let e of this.#t){let t=document.createElement(`th`);t.textContent=e,n.appendChild(t),this.#s.push(t)}t.appendChild(n),e.appendChild(t);let i=document.createElement(`tbody`);for(let e of this.#e){let t=document.createElement(`tr`),n=document.createElement(`td`);n.innerHTML=e.title,n.style.fontWeight=`600`,t.appendChild(n);for(let n of this.#t){let r=document.createElement(`td`);r.innerHTML=e.properties.get(n)??``,t.appendChild(r)}i.appendChild(t)}e.appendChild(i),this.appendChild(e),this.#r=e}#h(){if(!this.#r)return;let e=document.createElement(`div`);e.classList.add(`entries__scroll`),this.#r.replaceWith(e),e.appendChild(this.#r),this.#i=e}#g(){let e=document.createElement(`nav`);e.classList.add(`entries__nav`),e.setAttribute(`aria-label`,`Column selector`),e.setAttribute(`aria-hidden`,`true`),this.#o=this.#t.map((t,n)=>{let r=document.createElement(`button`);return r.type=`button`,r.classList.add(`entries__nav-btn`),r.textContent=this.#n[n]??t,r.setAttribute(`aria-pressed`,String(n===0)),r.addEventListener(`click`,()=>this.#_(n)),e.appendChild(r),r}),this.#i.before(e),this.#a=e}#_(e){this.#c=e;for(let t=0;t<this.#o.length;t++)this.#o[t]?.setAttribute(`aria-pressed`,String(t===e));if(this.singular)this.#v(e);else{let t=this.#s[e];t&&this.#i&&t.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`start`})}this.dispatchEvent(new CustomEvent(`entries-column-change`,{detail:{column:e,header:this.#t[e]},bubbles:!0,composed:!0}))}#v(e){if(!this.#r)return;let t=e+1;for(let e of this.#r.rows)for(let n=1;n<e.cells.length;n++){let r=e.cells[n];r&&(r.hidden=n!==t)}}#y(){if(this.#r)for(let e of this.#r.rows)for(let t=1;t<e.cells.length;t++){let n=e.cells[t];n&&(n.hidden=!1)}}#b(){let e=this.breakpoint||`40rem`,t=document.createElement(`div`);t.style.width=e,t.style.position=`absolute`,t.style.visibility=`hidden`,this.appendChild(t);let n=t.offsetWidth;return t.remove(),n}#x(){this.#u=new ResizeObserver(this.#S),this.#u.observe(this)}#S=e=>{let t=e[0];if(!t)return;let n=t.contentBoxSize?.[0]?.inlineSize??t.contentRect.width;this.#l=n>=this.#d,this.#l?(this.classList.add(`entries--wide`),this.singular&&this.projection&&this.#y()):(this.classList.remove(`entries--wide`),this.singular&&this.projection&&this.#v(this.#c))}};customElements.get(`wc-entries`)||customElements.define(`wc-entries`,Ft);var It=class extends ${static{this.styles=[$.styles,o`
|
|
547
547
|
:host {
|
|
548
548
|
display: none;
|
|
549
549
|
}
|
|
@@ -641,7 +641,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
641
641
|
transition: none;
|
|
642
642
|
}
|
|
643
643
|
}
|
|
644
|
-
`]
|
|
644
|
+
`]}static{this.properties={scheme:{type:String,reflect:!0}}}constructor(){super(),this._mediaQuery=null,this._boundMediaHandler=null,this.init()}init(){this.scheme=`system`}connectedCallback(){super.connectedCallback(),this._mediaQuery=window.matchMedia(`(prefers-color-scheme: dark)`),this._boundMediaHandler=this._handleMediaChange.bind(this),this._mediaQuery.addEventListener(`change`,this._boundMediaHandler),this._applyColorScheme()}disconnectedCallback(){super.disconnectedCallback(),this._mediaQuery&&this._boundMediaHandler&&this._mediaQuery.removeEventListener(`change`,this._boundMediaHandler),document.documentElement.style.removeProperty(`color-scheme`),delete document.documentElement.dataset.theme}_handleMediaChange(e){this.scheme===`system`&&this.requestUpdate()}_applyColorScheme(){let e=document.documentElement;this.scheme===`system`?(e.style.removeProperty(`color-scheme`),delete e.dataset.theme):(e.style.colorScheme=`${this.scheme} only`,e.dataset.theme=this.scheme)}_handleSegmentClick(e){this.scheme!==e&&(this.scheme=e,this._applyColorScheme(),this.dispatchEvent(new CustomEvent(`scheme-change`,{detail:{scheme:this.scheme},bubbles:!0,composed:!0})))}updated(e){e.has(`scheme`)&&this._applyColorScheme()}_getEffectiveScheme(){return this.scheme===`system`?this._mediaQuery?.matches?`dark`:`light`:this.scheme}render(){return this._getEffectiveScheme(),Q`
|
|
645
645
|
<div class="toggle__group" role="group" aria-label="Color scheme" part="group">
|
|
646
646
|
<button
|
|
647
647
|
class="toggle__segment"
|
|
@@ -674,7 +674,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
674
674
|
<span class="toggle__label">Dark</span>
|
|
675
675
|
</button>
|
|
676
676
|
</div>
|
|
677
|
-
`}};customElements.get(`color-scheme-toggle`)||customElements.define(`color-scheme-toggle`,It);var Lt=class extends ${static
|
|
677
|
+
`}};customElements.get(`color-scheme-toggle`)||customElements.define(`color-scheme-toggle`,It);var Lt=class extends ${static{this.styles=[$.styles,o`
|
|
678
678
|
:host {
|
|
679
679
|
--_gap: var(--multi-field-gap, 0.5rem);
|
|
680
680
|
--_input-padding: var(--multi-field-input-padding, 0.5rem 0.75rem);
|
|
@@ -828,7 +828,7 @@ let Tt=!1;const Et=new Y.subtle.Watcher(async()=>{Tt||(Tt=!0,queueMicrotask(()=>
|
|
|
828
828
|
transition: none;
|
|
829
829
|
}
|
|
830
830
|
}
|
|
831
|
-
`]
|
|
831
|
+
`]}static{this.properties={name:{type:String},type:{type:String},placeholder:{type:String},protectDefaults:{type:Boolean,attribute:`protect-defaults`},min:{type:Number},max:{type:Number},addLabel:{type:String,attribute:`add-label`},clearLabel:{type:String,attribute:`clear-label`},deleteLabel:{type:String,attribute:`delete-label`},_entries:{type:Array,state:!0},_initialized:{type:Boolean,state:!0}}}constructor(){super(),this._handleAdd=()=>{if(this.max>0&&this._entries.length>=this.max)return;let e={id:this._generateId(),value:``,isDefault:!1};this._entries=[...this._entries,e],this.dispatchEvent(new CustomEvent(`multi-field-add`,{bubbles:!0,composed:!0})),this._dispatchChange(),this.updateComplete.then(()=>{let e=this.renderRoot.querySelectorAll(`.entry__input`);e[e.length-1]?.focus()})},this._handleClear=()=>{let e;for(e=this.protectDefaults?this._entries.filter(e=>e.isDefault):[];e.length<this.min;)e.push({id:this._generateId(),value:``,isDefault:!1});this._entries=e,this.dispatchEvent(new CustomEvent(`multi-field-clear`,{bubbles:!0,composed:!0})),this._dispatchChange()},this.init()}init(){this.name=void 0,this.type=`text`,this.placeholder=``,this.protectDefaults=!1,this.min=1,this.max=0,this.addLabel=`Add`,this.clearLabel=`Clear`,this.deleteLabel=`Delete`,this._entries=[],this._initialized=!1,this._idCounter=0}_generateId(){return`entry-${++this._idCounter}`}_initializeFromSlot(){if(this._initialized)return;let e=this.getSlottedNodes([`input`]),t=[];for(let n of e){let e=n,r=e.value||e.getAttribute(`value`)||``;t.push({id:this._generateId(),value:r,isDefault:!0})}for(;t.length<this.min;)t.push({id:this._generateId(),value:``,isDefault:!1});t.length===0&&t.push({id:this._generateId(),value:``,isDefault:!1}),this._entries=t,this._initialized=!0}firstUpdated(){this._initializeFromSlot()}willUpdate(e){if(e.has(`min`)&&this._initialized)for(;this._entries.length<this.min;)this._entries=[...this._entries,{id:this._generateId(),value:``,isDefault:!1}]}_getValues(){return this._entries.map(e=>e.value)}_dispatchChange(){this.dispatchEvent(new CustomEvent(`multi-field-change`,{detail:{values:this._getValues()},bubbles:!0,composed:!0}))}_handleInput(e,t){let n=t.target;this._entries=this._entries.map(t=>t.id===e?{...t,value:n.value}:t),this._dispatchChange()}_handleDelete(e){let t=this._entries.find(t=>t.id===e);if(!t||this.protectDefaults&&t.isDefault||this._entries.length<=this.min)return;let n=t.value;this._entries=this._entries.filter(t=>t.id!==e),this.dispatchEvent(new CustomEvent(`multi-field-delete`,{detail:{value:n},bubbles:!0,composed:!0})),this._dispatchChange()}_canDelete(e){return!(this._entries.length<=this.min||this.protectDefaults&&e.isDefault)}_canAdd(){return!(this.max>0&&this._entries.length>=this.max)}_canClear(){return this.protectDefaults?this._entries.some(e=>!e.isDefault):this._entries.length>this.min}render(){return Q`
|
|
832
832
|
<div class="container" part="container">
|
|
833
833
|
<div class="initial-slot">
|
|
834
834
|
<slot @slotchange=${this._initializeFromSlot}></slot>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getvitops/core",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "The Vitops design-system framework — CSS partials, Lit web components, and browser polyfills.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
"construct-style-sheets-polyfill": "^3.1.0",
|
|
29
29
|
"lit": "^3.3.3",
|
|
30
30
|
"scroll-timeline-polyfill": "^1.1.0",
|
|
31
|
-
"temporal-polyfill": "^1.0.1"
|
|
31
|
+
"temporal-polyfill": "^1.0.1",
|
|
32
|
+
"@getvitops/utils": "0.2.1"
|
|
32
33
|
}
|
|
33
34
|
}
|