@vonage/vivid 3.58.0 → 3.60.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/appearance-ui/index.cjs +1 -1
- package/appearance-ui/index.js +1 -1
- package/custom-elements.json +866 -68
- package/lib/appearance-ui/appearance-ui.d.ts +1 -1
- package/lib/audio-player/audio-player.d.ts +3 -0
- package/lib/button/button.d.ts +1 -1
- package/lib/combobox/combobox.d.ts +3 -0
- package/lib/combobox/definition.d.ts +1 -1
- package/lib/enums.d.ts +1 -0
- package/lib/number-field/number-field.d.ts +23 -8
- package/lib/number-field/number-field.form-associated.d.ts +10 -0
- package/lib/video-player/video-player.d.ts +1 -0
- package/listbox/index.cjs +1 -1
- package/listbox/index.js +1 -1
- package/package.json +1 -1
- package/shared/definition.cjs +1 -1
- package/shared/definition.js +1 -1
- package/shared/definition11.cjs +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition16.cjs +11 -2
- package/shared/definition16.js +11 -2
- package/shared/definition20.cjs +13 -13
- package/shared/definition20.js +13 -13
- package/shared/definition29.cjs +1 -0
- package/shared/definition29.js +1 -1
- package/shared/definition3.cjs +1 -1
- package/shared/definition3.js +1 -1
- package/shared/definition31.cjs +1 -1
- package/shared/definition31.js +1 -1
- package/shared/definition32.cjs +1 -1
- package/shared/definition32.js +1 -1
- package/shared/definition35.cjs +242 -331
- package/shared/definition35.js +243 -332
- package/shared/definition38.cjs +1 -1
- package/shared/definition38.js +1 -1
- package/shared/definition42.js +1 -1
- package/shared/definition43.cjs +9 -1
- package/shared/definition43.js +9 -1
- package/shared/definition47.cjs +1 -1
- package/shared/definition47.js +1 -1
- package/shared/definition5.cjs +100 -39
- package/shared/definition5.js +93 -32
- package/shared/definition50.cjs +1 -1
- package/shared/definition50.js +1 -1
- package/shared/definition51.cjs +1 -1
- package/shared/definition51.js +1 -1
- package/shared/definition54.cjs +1 -1
- package/shared/definition54.js +1 -1
- package/shared/definition59.cjs +1 -1
- package/shared/definition59.js +1 -1
- package/shared/definition61.cjs +2 -65859
- package/shared/definition61.js +2 -65859
- package/shared/definition8.cjs +1 -1
- package/shared/definition8.js +1 -1
- package/shared/enums.cjs +1 -0
- package/shared/enums.js +1 -0
- package/shared/key-codes2.js +1 -1
- package/shared/patterns/anchored.d.ts +4 -4
- package/shared/text-field.cjs +1 -1
- package/shared/text-field.js +1 -1
- package/shared/video-player.cjs +65864 -0
- package/shared/video-player.js +65861 -0
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +5 -5
- package/styles/tokens/theme-light.css +5 -5
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/vivid.api.json +89 -1
package/shared/definition5.js
CHANGED
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import { a as attr, F as FoundationElement, O as Observable, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { B as Button, a as buttonRegistries } from './definition11.js';
|
|
3
3
|
import { S as Slider, a as sliderRegistries } from './definition46.js';
|
|
4
|
+
import { a as menuRegistries } from './definition30.js';
|
|
4
5
|
import { M as MediaSkipBy } from './enums.js';
|
|
5
6
|
import './affix.js';
|
|
6
7
|
import './index2.js';
|
|
7
8
|
import { L as Localized } from './localized.js';
|
|
8
9
|
import { a as applyMixins } from './apply-mixins.js';
|
|
10
|
+
import { g as getPlaybackRatesArray } from './video-player.js';
|
|
11
|
+
import { b as Menu, c as MenuItem } from './definition29.js';
|
|
9
12
|
import { w as when } from './when.js';
|
|
13
|
+
import { r as repeat } from './repeat.js';
|
|
10
14
|
import { c as classNames } from './class-names.js';
|
|
11
15
|
|
|
12
|
-
const styles = ":host{display:block;max-inline-size:350px}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:16px;inline-size:100%;user-select:none}.base .slider{flex:1;grid-area:slider;min-inline-size:var(--audio-player-min-inline-size, 200px)}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
|
|
16
|
+
const styles = ":host{display:block;max-inline-size:350px}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:16px;inline-size:100%;user-select:none}.base .slider{flex:1;grid-area:slider;min-inline-size:var(--audio-player-min-inline-size, 200px)}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
|
|
13
17
|
|
|
14
18
|
var __defProp = Object.defineProperty;
|
|
15
19
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -53,9 +57,11 @@ class AudioPlayer extends FoundationElement {
|
|
|
53
57
|
this.skipBackwardButtonAriaLabel = null;
|
|
54
58
|
this.disabled = false;
|
|
55
59
|
this.notime = false;
|
|
60
|
+
this.playbackRates = null;
|
|
56
61
|
this.#playerEl = new Audio();
|
|
57
62
|
this.#pausedChanged = (pausing) => {
|
|
58
63
|
if (pausing === this.paused) {
|
|
64
|
+
this.#setPausedState();
|
|
59
65
|
return;
|
|
60
66
|
}
|
|
61
67
|
if (!this.paused) {
|
|
@@ -66,9 +72,12 @@ class AudioPlayer extends FoundationElement {
|
|
|
66
72
|
}
|
|
67
73
|
this.#setPausedState();
|
|
68
74
|
};
|
|
75
|
+
this.#currentTimeChanged = false;
|
|
69
76
|
this.#updateProgress = () => {
|
|
77
|
+
this.#currentTimeChanged = true;
|
|
70
78
|
Observable.notify(this, "currentTime");
|
|
71
79
|
const percent = this.currentTime / this.duration * 100;
|
|
80
|
+
this.#sliderEl.currentValue = percent.toString();
|
|
72
81
|
if (percent === 100) {
|
|
73
82
|
this.pause();
|
|
74
83
|
}
|
|
@@ -76,17 +85,20 @@ class AudioPlayer extends FoundationElement {
|
|
|
76
85
|
this.#updateTotalTime = () => {
|
|
77
86
|
Observable.notify(this, "duration");
|
|
78
87
|
};
|
|
79
|
-
this.#
|
|
80
|
-
if (this.#
|
|
81
|
-
this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
|
|
82
|
-
}
|
|
83
|
-
};
|
|
84
|
-
this.#handleSliderEvent = (event) => {
|
|
85
|
-
if (event.target === this.#sliderEl) {
|
|
88
|
+
this.#updateCurrentTimeOnSliderChange = () => {
|
|
89
|
+
if (!this.paused && this.#sliderEl.isDragging) {
|
|
86
90
|
this.pause();
|
|
87
|
-
this.#
|
|
91
|
+
this.#dragInterval = window.setInterval(() => {
|
|
92
|
+
if (!this.#sliderEl.isDragging) {
|
|
93
|
+
clearInterval(this.#dragInterval);
|
|
94
|
+
this.play();
|
|
95
|
+
}
|
|
96
|
+
}, 0);
|
|
97
|
+
}
|
|
98
|
+
if (!this.#currentTimeChanged && this.#playerEl) {
|
|
99
|
+
this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
|
|
88
100
|
}
|
|
89
|
-
|
|
101
|
+
this.#currentTimeChanged = false;
|
|
90
102
|
};
|
|
91
103
|
this.#setPausedState = () => {
|
|
92
104
|
Observable.notify(this, "paused");
|
|
@@ -94,6 +106,14 @@ class AudioPlayer extends FoundationElement {
|
|
|
94
106
|
this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
|
|
95
107
|
this.#playerEl.addEventListener("loadedmetadata", this.#updateTotalTime);
|
|
96
108
|
}
|
|
109
|
+
get playbackRate() {
|
|
110
|
+
Observable.track(this, "playbackRate");
|
|
111
|
+
return this.#playerEl.playbackRate;
|
|
112
|
+
}
|
|
113
|
+
set playbackRate(value) {
|
|
114
|
+
this.#playerEl.playbackRate = value;
|
|
115
|
+
Observable.notify(this, "playbackRate");
|
|
116
|
+
}
|
|
97
117
|
srcChanged() {
|
|
98
118
|
if (this.src === void 0) {
|
|
99
119
|
this.#playerEl.removeAttribute("src");
|
|
@@ -124,19 +144,14 @@ class AudioPlayer extends FoundationElement {
|
|
|
124
144
|
return this.shadowRoot.querySelector(".slider");
|
|
125
145
|
}
|
|
126
146
|
#playerEl;
|
|
127
|
-
get #baseElement() {
|
|
128
|
-
return this.shadowRoot.querySelector(".base");
|
|
129
|
-
}
|
|
130
147
|
connectedCallback() {
|
|
131
148
|
super.connectedCallback();
|
|
132
|
-
|
|
133
|
-
this.#setInteractionListeners();
|
|
149
|
+
this.#setSliderInteractionListeners();
|
|
134
150
|
this.#setPausedState();
|
|
135
151
|
}
|
|
136
152
|
disconnectedCallback() {
|
|
137
153
|
super.disconnectedCallback();
|
|
138
|
-
|
|
139
|
-
this.#setInteractionListeners(false);
|
|
154
|
+
this.#setSliderInteractionListeners(false);
|
|
140
155
|
}
|
|
141
156
|
play() {
|
|
142
157
|
this.#pausedChanged(PLAY);
|
|
@@ -144,17 +159,18 @@ class AudioPlayer extends FoundationElement {
|
|
|
144
159
|
pause() {
|
|
145
160
|
this.#pausedChanged(PAUSE);
|
|
146
161
|
}
|
|
147
|
-
#
|
|
162
|
+
#setSliderInteractionListeners(add = true) {
|
|
148
163
|
const action = add ? "addEventListener" : "removeEventListener";
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
164
|
+
if (this.#sliderEl) {
|
|
165
|
+
this.#sliderEl[action]("change", this.#updateCurrentTimeOnSliderChange);
|
|
166
|
+
}
|
|
152
167
|
}
|
|
153
168
|
#pausedChanged;
|
|
169
|
+
#currentTimeChanged;
|
|
154
170
|
#updateProgress;
|
|
155
171
|
#updateTotalTime;
|
|
156
|
-
#
|
|
157
|
-
#
|
|
172
|
+
#dragInterval;
|
|
173
|
+
#updateCurrentTimeOnSliderChange;
|
|
158
174
|
#setPausedState;
|
|
159
175
|
}
|
|
160
176
|
__decorateClass([
|
|
@@ -190,14 +206,11 @@ __decorateClass([
|
|
|
190
206
|
converter: validSkipByConverter
|
|
191
207
|
})
|
|
192
208
|
], AudioPlayer.prototype, "skipBy");
|
|
209
|
+
__decorateClass([
|
|
210
|
+
attr({ attribute: "playback-rates" })
|
|
211
|
+
], AudioPlayer.prototype, "playbackRates");
|
|
193
212
|
applyMixins(AudioPlayer, Localized);
|
|
194
213
|
|
|
195
|
-
function getCurrentTimePercentage(x) {
|
|
196
|
-
if (Number.isNaN(x.currentTime) || Number.isNaN(x.duration)) {
|
|
197
|
-
return 0;
|
|
198
|
-
}
|
|
199
|
-
return x.currentTime / x.duration * 100;
|
|
200
|
-
}
|
|
201
214
|
function skip(audioElement, skipDirection) {
|
|
202
215
|
const currentTime = audioElement.currentTime;
|
|
203
216
|
const skipValue = parseInt(audioElement.skipBy) * skipDirection;
|
|
@@ -207,7 +220,23 @@ function skip(audioElement, skipDirection) {
|
|
|
207
220
|
Math.min(audioElement.duration, newTime)
|
|
208
221
|
);
|
|
209
222
|
}
|
|
210
|
-
const getClasses = ({
|
|
223
|
+
const getClasses = ({
|
|
224
|
+
notime,
|
|
225
|
+
disabled,
|
|
226
|
+
duration,
|
|
227
|
+
skipBy,
|
|
228
|
+
playbackRates
|
|
229
|
+
}) => classNames(
|
|
230
|
+
["disabled", Boolean(disabled) || !duration],
|
|
231
|
+
[
|
|
232
|
+
"two-lines",
|
|
233
|
+
!notime && (Boolean(Number(skipBy)) || Boolean(playbackRates))
|
|
234
|
+
],
|
|
235
|
+
["playback", Boolean(playbackRates)]
|
|
236
|
+
);
|
|
237
|
+
const isMenuItemChekced = (playbackRate, { parent }) => {
|
|
238
|
+
return playbackRate === parent.playbackRate;
|
|
239
|
+
};
|
|
211
240
|
function renderButton(context) {
|
|
212
241
|
const buttonTag = context.tagFor(Button);
|
|
213
242
|
return html`<${buttonTag} class="pause" @click="${(x) => x.paused ? x.play() : x.pause()}"
|
|
@@ -249,8 +278,9 @@ function renderSlider(context) {
|
|
|
249
278
|
return html`
|
|
250
279
|
<${sliderTag}
|
|
251
280
|
class="slider"
|
|
281
|
+
value="0"
|
|
252
282
|
aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
|
|
253
|
-
|
|
283
|
+
max="100"
|
|
254
284
|
ariaValuetext="${(x) => formatTime(x.currentTime)}"
|
|
255
285
|
connotation="${(x) => x.connotation}"
|
|
256
286
|
?disabled="${(x) => x.disabled || !x.duration}">
|
|
@@ -263,7 +293,14 @@ function renderTimestamp() {
|
|
|
263
293
|
<span class="total-time">${(x) => formatTime(x.duration)}</span>
|
|
264
294
|
</div>`;
|
|
265
295
|
}
|
|
296
|
+
function handlePlaybackRateClick(playbackRate, context) {
|
|
297
|
+
context.parent.playbackRate = playbackRate;
|
|
298
|
+
return true;
|
|
299
|
+
}
|
|
266
300
|
const AudioPlayerTemplate = (context) => {
|
|
301
|
+
const menuTag = context.tagFor(Menu);
|
|
302
|
+
const buttonTag = context.tagFor(Button);
|
|
303
|
+
const menuItemTag = context.tagFor(MenuItem);
|
|
267
304
|
return html` <div class="wrapper">
|
|
268
305
|
<div class="base ${getClasses}">
|
|
269
306
|
<div class="controls">
|
|
@@ -279,6 +316,29 @@ const AudioPlayerTemplate = (context) => {
|
|
|
279
316
|
${when((x) => !x.notime, renderTimestamp())}
|
|
280
317
|
</div>
|
|
281
318
|
${renderSlider(context)}
|
|
319
|
+
<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss>
|
|
320
|
+
${when(
|
|
321
|
+
(x) => Boolean(x.playbackRates),
|
|
322
|
+
html`<${buttonTag} id="playback-open-button"
|
|
323
|
+
class="playback-button"
|
|
324
|
+
slot="anchor"
|
|
325
|
+
icon="playback-speed-line"
|
|
326
|
+
aria-label="play back rates"
|
|
327
|
+
size='condensed'
|
|
328
|
+
connotation="${(x) => x.connotation}"
|
|
329
|
+
?disabled="${(x) => x.disabled || !x.duration}"
|
|
330
|
+
></${buttonTag}>`
|
|
331
|
+
)}
|
|
332
|
+
${repeat(
|
|
333
|
+
(x) => x.playbackRates ? getPlaybackRatesArray(x.playbackRates) : [],
|
|
334
|
+
html`<${menuItemTag} @click="${handlePlaybackRateClick}"
|
|
335
|
+
role="menuitemradio"
|
|
336
|
+
class="playback-rate"
|
|
337
|
+
text="${(x) => x}"
|
|
338
|
+
check-appearance="tick-only"
|
|
339
|
+
?checked="${isMenuItemChekced}"></${menuItemTag}>`
|
|
340
|
+
)}
|
|
341
|
+
</${menuTag}>
|
|
282
342
|
</div>
|
|
283
343
|
</div>`;
|
|
284
344
|
};
|
|
@@ -291,7 +351,8 @@ const audioPlayerDefinition = AudioPlayer.compose({
|
|
|
291
351
|
const audioPlayerRegistries = [
|
|
292
352
|
audioPlayerDefinition(),
|
|
293
353
|
...buttonRegistries,
|
|
294
|
-
...sliderRegistries
|
|
354
|
+
...sliderRegistries,
|
|
355
|
+
...menuRegistries
|
|
295
356
|
];
|
|
296
357
|
const registerAudioPlayer = registerFactory(audioPlayerRegistries);
|
|
297
358
|
|
package/shared/definition50.cjs
CHANGED
|
@@ -19,7 +19,7 @@ index.__decorate([
|
|
|
19
19
|
index.attr({ mode: "boolean" })
|
|
20
20
|
], Tab$1.prototype, "disabled", void 0);
|
|
21
21
|
|
|
22
|
-
const styles = ":host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-
|
|
22
|
+
const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;border-radius:2px;background:currentColor;block-size:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}";
|
|
23
23
|
|
|
24
24
|
var __defProp = Object.defineProperty;
|
|
25
25
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition50.js
CHANGED
|
@@ -17,7 +17,7 @@ __decorate([
|
|
|
17
17
|
attr({ mode: "boolean" })
|
|
18
18
|
], Tab$1.prototype, "disabled", void 0);
|
|
19
19
|
|
|
20
|
-
const styles = ":host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-
|
|
20
|
+
const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;border-radius:2px;background:currentColor;block-size:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}";
|
|
21
21
|
|
|
22
22
|
var __defProp = Object.defineProperty;
|
|
23
23
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition51.cjs
CHANGED
|
@@ -383,7 +383,7 @@ index.__decorate([
|
|
|
383
383
|
], Tabs$1.prototype, "showActiveIndicator", void 0);
|
|
384
384
|
applyMixins.applyMixins(Tabs$1, startEnd.StartEnd);
|
|
385
385
|
|
|
386
|
-
const styles = ":host{display:block}.base{display:grid;box-sizing:border-box}.base{--_appearance-color-text: var(--_connotation-color-
|
|
386
|
+
const styles = ":host{display:block}.base{display:grid;box-sizing:border-box}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.tablist{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;position:relative;display:grid;box-sizing:border-box;color:var(--_appearance-color-text)}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-flow:column;grid-template-columns:auto;grid-template-rows:auto auto;inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;border-bottom:1px solid var(--vvd-color-neutral-300);inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.tablist-wrapper::-webkit-scrollbar{display:none}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1/auto/auto;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);grid-column:1/auto;inline-size:calc(var(--_tabs-active-tab-inline-size) - 32px);inset-block-end:0;inset-inline-start:8px;justify-self:center;padding-inline:var(--_tabs-tablist-gutter)}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}.base:not(.orientation-vertical) .active-indicator:not(.activeIndicatorTransition){opacity:0}";
|
|
387
387
|
|
|
388
388
|
var __defProp = Object.defineProperty;
|
|
389
389
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition51.js
CHANGED
|
@@ -381,7 +381,7 @@ __decorate([
|
|
|
381
381
|
], Tabs$1.prototype, "showActiveIndicator", void 0);
|
|
382
382
|
applyMixins(Tabs$1, StartEnd);
|
|
383
383
|
|
|
384
|
-
const styles = ":host{display:block}.base{display:grid;box-sizing:border-box}.base{--_appearance-color-text: var(--_connotation-color-
|
|
384
|
+
const styles = ":host{display:block}.base{display:grid;box-sizing:border-box}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.tablist{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;position:relative;display:grid;box-sizing:border-box;color:var(--_appearance-color-text)}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-flow:column;grid-template-columns:auto;grid-template-rows:auto auto;inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;border-bottom:1px solid var(--vvd-color-neutral-300);inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.tablist-wrapper::-webkit-scrollbar{display:none}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1/auto/auto;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);grid-column:1/auto;inline-size:calc(var(--_tabs-active-tab-inline-size) - 32px);inset-block-end:0;inset-inline-start:8px;justify-self:center;padding-inline:var(--_tabs-tablist-gutter)}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}.base:not(.orientation-vertical) .active-indicator:not(.activeIndicatorTransition){opacity:0}";
|
|
385
385
|
|
|
386
386
|
var __defProp = Object.defineProperty;
|
|
387
387
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition54.cjs
CHANGED
|
@@ -190,7 +190,7 @@ index.__decorate([
|
|
|
190
190
|
], TextArea$1.prototype, "defaultSlottedNodes", void 0);
|
|
191
191
|
applyMixins.applyMixins(TextArea$1, textField.DelegatesARIATextbox);
|
|
192
192
|
|
|
193
|
-
const styles = ":host{display:inline-block}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-
|
|
193
|
+
const styles = ":host{display:inline-block}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}";
|
|
194
194
|
|
|
195
195
|
var __defProp = Object.defineProperty;
|
|
196
196
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition54.js
CHANGED
|
@@ -188,7 +188,7 @@ __decorate([
|
|
|
188
188
|
], TextArea$1.prototype, "defaultSlottedNodes", void 0);
|
|
189
189
|
applyMixins(TextArea$1, DelegatesARIATextbox);
|
|
190
190
|
|
|
191
|
-
const styles = ":host{display:inline-block}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-
|
|
191
|
+
const styles = ":host{display:inline-block}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}";
|
|
192
192
|
|
|
193
193
|
var __defProp = Object.defineProperty;
|
|
194
194
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition59.cjs
CHANGED
|
@@ -12,7 +12,7 @@ const when = require('./when.cjs');
|
|
|
12
12
|
const classNames = require('./class-names.cjs');
|
|
13
13
|
const ref = require('./ref.cjs');
|
|
14
14
|
|
|
15
|
-
const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-
|
|
15
|
+
const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-tree-item-accent-firm, var(--vvd-color-canvas-text))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
|
|
16
16
|
|
|
17
17
|
var __defProp = Object.defineProperty;
|
|
18
18
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition59.js
CHANGED
|
@@ -10,7 +10,7 @@ import { w as when } from './when.js';
|
|
|
10
10
|
import { c as classNames } from './class-names.js';
|
|
11
11
|
import { r as ref } from './ref.js';
|
|
12
12
|
|
|
13
|
-
const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-
|
|
13
|
+
const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-tree-item-accent-firm, var(--vvd-color-canvas-text))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
|
|
14
14
|
|
|
15
15
|
var __defProp = Object.defineProperty;
|
|
16
16
|
var __decorateClass = (decorators, target, key, kind) => {
|