@vonage/vivid 3.54.0 → 3.55.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/accordion/index.cjs +0 -14
- package/accordion/index.js +0 -14
- package/accordion-item/index.cjs +0 -11
- package/accordion-item/index.js +0 -11
- package/action-group/index.cjs +0 -2
- package/action-group/index.js +0 -2
- package/alert/index.cjs +0 -23
- package/alert/index.js +0 -23
- package/appearance-ui/index.cjs +11 -12
- package/appearance-ui/index.js +11 -12
- package/audio-player/index.cjs +0 -28
- package/audio-player/index.js +0 -28
- package/avatar/index.cjs +0 -6
- package/avatar/index.js +0 -6
- package/badge/index.cjs +0 -9
- package/badge/index.js +0 -9
- package/banner/index.cjs +0 -22
- package/banner/index.js +0 -22
- package/breadcrumb/index.cjs +0 -8
- package/breadcrumb/index.js +0 -8
- package/breadcrumb-item/index.cjs +0 -15
- package/breadcrumb-item/index.js +0 -15
- package/button/index.cjs +0 -18
- package/button/index.js +0 -18
- package/calendar/index.cjs +0 -4
- package/calendar/index.js +0 -4
- package/calendar-event/index.cjs +0 -4
- package/calendar-event/index.js +0 -4
- package/card/index.cjs +0 -9
- package/card/index.js +0 -9
- package/checkbox/index.cjs +0 -14
- package/checkbox/index.js +0 -14
- package/combobox/index.cjs +0 -31
- package/combobox/index.js +0 -31
- package/custom-elements.json +132 -141
- package/data-grid/index.cjs +0 -11
- package/data-grid/index.js +0 -11
- package/date-picker/index.cjs +0 -34
- package/date-picker/index.js +0 -34
- package/date-range-picker/index.cjs +0 -34
- package/date-range-picker/index.js +0 -34
- package/dial-pad/index.cjs +0 -28
- package/dial-pad/index.js +0 -28
- package/dialog/index.cjs +0 -23
- package/dialog/index.js +0 -23
- package/divider/index.cjs +0 -3
- package/divider/index.js +0 -3
- package/elevation/index.cjs +0 -2
- package/elevation/index.js +0 -2
- package/empty-state/index.cjs +0 -7
- package/empty-state/index.js +0 -7
- package/fab/index.cjs +0 -15
- package/fab/index.js +0 -15
- package/file-picker/index.cjs +0 -23
- package/file-picker/index.js +0 -23
- package/header/index.cjs +0 -3
- package/header/index.js +0 -3
- package/icon/index.cjs +0 -5
- package/icon/index.js +0 -5
- package/index.cjs +0 -44
- package/index.js +0 -44
- package/layout/index.cjs +0 -2
- package/layout/index.js +0 -2
- package/lib/combobox/combobox.d.ts +1 -0
- package/lib/dial-pad/dial-pad.d.ts +1 -0
- package/lib/menu/menu.d.ts +1 -3
- package/listbox/index.cjs +1 -15
- package/listbox/index.js +1 -15
- package/menu/index.cjs +0 -25
- package/menu/index.js +0 -25
- package/menu-item/index.cjs +0 -15
- package/menu-item/index.js +0 -15
- package/nav/index.cjs +0 -1
- package/nav/index.js +0 -1
- package/nav-disclosure/index.cjs +0 -10
- package/nav-disclosure/index.js +0 -10
- package/nav-item/index.cjs +0 -15
- package/nav-item/index.js +0 -15
- package/note/index.cjs +0 -11
- package/note/index.js +0 -11
- package/number-field/index.cjs +0 -26
- package/number-field/index.js +0 -26
- package/option/index.cjs +0 -13
- package/option/index.js +0 -13
- package/package.json +1 -1
- package/pagination/index.cjs +0 -21
- package/pagination/index.js +0 -21
- package/popup/index.cjs +0 -20
- package/popup/index.js +0 -20
- package/progress/index.cjs +0 -4
- package/progress/index.js +0 -4
- package/progress-ring/index.cjs +0 -4
- package/progress-ring/index.js +0 -4
- package/radio/index.cjs +0 -6
- package/radio/index.js +0 -6
- package/radio-group/index.cjs +0 -9
- package/radio-group/index.js +0 -9
- package/range-slider/index.cjs +0 -17
- package/range-slider/index.js +0 -17
- package/select/index.cjs +0 -31
- package/select/index.js +0 -31
- package/selectable-box/index.cjs +0 -18
- package/selectable-box/index.js +0 -18
- package/shared/affix.cjs +6 -7
- package/shared/affix.js +6 -7
- package/shared/anchored.cjs +39 -46
- package/shared/anchored.js +39 -46
- package/shared/calendar-event.cjs +10 -11
- package/shared/calendar-event.js +10 -11
- package/shared/definition.cjs +8 -9
- package/shared/definition.js +8 -9
- package/shared/definition10.cjs +1 -1
- package/shared/definition10.js +1 -1
- package/shared/definition11.cjs +20 -21
- package/shared/definition11.js +20 -21
- package/shared/definition12.cjs +1 -1
- package/shared/definition12.js +1 -1
- package/shared/definition13.cjs +9 -14
- package/shared/definition13.js +9 -14
- package/shared/definition14.cjs +13 -14
- package/shared/definition14.js +13 -14
- package/shared/definition15.cjs +1 -1
- package/shared/definition15.js +1 -1
- package/shared/definition16.cjs +16 -3
- package/shared/definition16.js +16 -3
- package/shared/definition17.cjs +155 -166
- package/shared/definition17.js +155 -166
- package/shared/definition19.cjs +2 -2
- package/shared/definition19.js +2 -2
- package/shared/definition2.cjs +1 -1
- package/shared/definition2.js +1 -1
- package/shared/definition20.cjs +22 -19
- package/shared/definition20.js +22 -19
- package/shared/definition21.cjs +17 -18
- package/shared/definition21.js +17 -18
- package/shared/definition22.cjs +2 -2
- package/shared/definition22.js +2 -2
- package/shared/definition23.cjs +7 -8
- package/shared/definition23.js +7 -8
- package/shared/definition24.cjs +7 -8
- package/shared/definition24.js +7 -8
- package/shared/definition25.cjs +2 -2
- package/shared/definition25.js +2 -2
- package/shared/definition26.cjs +6 -7
- package/shared/definition26.js +6 -7
- package/shared/definition27.cjs +2 -2
- package/shared/definition27.js +2 -2
- package/shared/definition28.cjs +9 -10
- package/shared/definition28.js +9 -10
- package/shared/definition29.cjs +23 -49
- package/shared/definition29.js +23 -49
- package/shared/definition3.cjs +9 -10
- package/shared/definition3.js +9 -10
- package/shared/definition30.cjs +4 -2
- package/shared/definition30.js +4 -2
- package/shared/definition31.cjs +9 -10
- package/shared/definition31.js +9 -10
- package/shared/definition32.cjs +1 -1
- package/shared/definition32.js +1 -1
- package/shared/definition33.cjs +1 -1
- package/shared/definition33.js +1 -1
- package/shared/definition34.cjs +6 -7
- package/shared/definition34.js +6 -7
- package/shared/definition35.cjs +1 -1
- package/shared/definition35.js +1 -1
- package/shared/definition36.cjs +6 -7
- package/shared/definition36.js +6 -7
- package/shared/definition37.cjs +1 -1
- package/shared/definition37.js +1 -1
- package/shared/definition38.cjs +7 -8
- package/shared/definition38.js +7 -8
- package/shared/definition39.cjs +8 -9
- package/shared/definition39.js +8 -9
- package/shared/definition4.cjs +14 -15
- package/shared/definition4.js +14 -15
- package/shared/definition40.cjs +7 -8
- package/shared/definition40.js +7 -8
- package/shared/definition41.cjs +1 -1
- package/shared/definition41.js +1 -1
- package/shared/definition42.cjs +3 -3
- package/shared/definition42.js +3 -3
- package/shared/definition43.cjs +1 -1
- package/shared/definition43.js +1 -1
- package/shared/definition44.cjs +11 -12
- package/shared/definition44.js +11 -12
- package/shared/definition45.cjs +8 -9
- package/shared/definition45.js +8 -9
- package/shared/definition46.cjs +9 -10
- package/shared/definition46.js +9 -10
- package/shared/definition47.cjs +15 -16
- package/shared/definition47.js +15 -16
- package/shared/definition48.cjs +6 -7
- package/shared/definition48.js +6 -7
- package/shared/definition5.cjs +17 -18
- package/shared/definition5.js +17 -18
- package/shared/definition50.cjs +9 -10
- package/shared/definition50.js +9 -10
- package/shared/definition51.cjs +8 -9
- package/shared/definition51.js +8 -9
- package/shared/definition52.cjs +5 -6
- package/shared/definition52.js +5 -6
- package/shared/definition53.cjs +12 -13
- package/shared/definition53.js +12 -13
- package/shared/definition54.cjs +2 -2
- package/shared/definition54.js +2 -2
- package/shared/definition55.cjs +1 -11
- package/shared/definition55.js +1 -11
- package/shared/definition56.cjs +1 -1
- package/shared/definition56.js +1 -1
- package/shared/definition57.cjs +1 -1
- package/shared/definition57.js +1 -1
- package/shared/definition58.cjs +1 -1
- package/shared/definition58.js +1 -1
- package/shared/definition59.cjs +5 -6
- package/shared/definition59.js +5 -6
- package/shared/definition6.cjs +10 -11
- package/shared/definition6.js +10 -11
- package/shared/definition60.cjs +1 -1
- package/shared/definition60.js +1 -1
- package/shared/definition61.cjs +11 -15
- package/shared/definition61.js +11 -15
- package/shared/definition62.cjs +6 -7
- package/shared/definition62.js +6 -7
- package/shared/definition63.cjs +11 -15
- package/shared/definition63.js +11 -15
- package/shared/definition7.cjs +8 -9
- package/shared/definition7.js +8 -9
- package/shared/definition8.cjs +13 -14
- package/shared/definition8.js +13 -14
- package/shared/definition9.cjs +5 -6
- package/shared/definition9.js +5 -6
- package/shared/icon.cjs +3 -7
- package/shared/icon.js +3 -7
- package/shared/index.cjs +38 -19
- package/shared/index.js +38 -19
- package/shared/index2.cjs +16 -19
- package/shared/index2.js +16 -19
- package/shared/listbox.cjs +6 -7
- package/shared/listbox.js +6 -7
- package/shared/presentationDate.cjs +40 -50
- package/shared/presentationDate.js +40 -50
- package/shared/radio.cjs +6 -7
- package/shared/radio.js +6 -7
- package/shared/slider.template.cjs +1 -1
- package/shared/slider.template.js +1 -1
- package/shared/text-anchor.cjs +6 -7
- package/shared/text-anchor.js +6 -7
- package/shared/text-field.cjs +1 -1
- package/shared/text-field.js +1 -1
- package/side-drawer/index.cjs +0 -3
- package/side-drawer/index.js +0 -3
- package/slider/index.cjs +0 -10
- package/slider/index.js +0 -10
- package/split-button/index.cjs +0 -13
- package/split-button/index.js +0 -13
- 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 +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/switch/index.cjs +0 -8
- package/switch/index.js +0 -8
- package/tab/index.cjs +0 -9
- package/tab/index.js +0 -9
- package/tab-panel/index.cjs +0 -1
- package/tab-panel/index.js +0 -1
- package/tabs/index.cjs +0 -16
- package/tabs/index.js +0 -16
- package/tag/index.cjs +0 -9
- package/tag/index.js +0 -9
- package/tag-group/index.cjs +0 -2
- package/tag-group/index.js +0 -2
- package/text-anchor/index.cjs +0 -10
- package/text-anchor/index.js +0 -10
- package/text-area/index.cjs +0 -19
- package/text-area/index.js +0 -19
- package/text-field/index.cjs +0 -20
- package/text-field/index.js +0 -20
- package/time-picker/index.cjs +0 -31
- package/time-picker/index.js +0 -31
- package/toggletip/index.cjs +0 -22
- package/toggletip/index.js +0 -22
- package/tooltip/index.cjs +0 -22
- package/tooltip/index.js +0 -22
- package/tree-item/index.cjs +0 -14
- package/tree-item/index.js +0 -14
- package/tree-view/index.cjs +0 -9
- package/tree-view/index.js +0 -9
- package/video-player/index.cjs +0 -12
- package/video-player/index.js +0 -12
package/shared/definition36.js
CHANGED
|
@@ -203,13 +203,12 @@ applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
|
|
|
203
203
|
applyMixins(ListboxOption$1, StartEnd, DelegatesARIAListboxOption);
|
|
204
204
|
|
|
205
205
|
var __defProp = Object.defineProperty;
|
|
206
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
207
206
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
208
|
-
var result =
|
|
207
|
+
var result = void 0 ;
|
|
209
208
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
210
209
|
if (decorator = decorators[i])
|
|
211
|
-
result = (
|
|
212
|
-
if (
|
|
210
|
+
result = (decorator(target, key, result) ) || result;
|
|
211
|
+
if (result)
|
|
213
212
|
__defProp(target, key, result);
|
|
214
213
|
return result;
|
|
215
214
|
};
|
|
@@ -233,12 +232,12 @@ __decorateClass([
|
|
|
233
232
|
attr({
|
|
234
233
|
attribute: "text"
|
|
235
234
|
})
|
|
236
|
-
], ListboxOption.prototype, "_text"
|
|
235
|
+
], ListboxOption.prototype, "_text");
|
|
237
236
|
__decorateClass([
|
|
238
237
|
attr({
|
|
239
238
|
attribute: "label"
|
|
240
239
|
})
|
|
241
|
-
], ListboxOption.prototype, "_label"
|
|
240
|
+
], ListboxOption.prototype, "_label");
|
|
242
241
|
applyMixins(ListboxOption, AffixIconWithTrailing);
|
|
243
242
|
|
|
244
243
|
const getClasses = ({ icon, disabled, selected, checked }) => classNames(
|
|
@@ -267,7 +266,7 @@ const ListboxOptionTemplate = (context) => {
|
|
|
267
266
|
`;
|
|
268
267
|
};
|
|
269
268
|
|
|
270
|
-
const styles = ":host([disabled]){cursor:not-allowed}.base{display: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(--_option-appearance-color-text, 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;vertical-align:middle;word-break:break-word}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.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:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--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))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}
|
|
269
|
+
const styles = ":host([disabled]){cursor:not-allowed}.base{display: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(--_option-appearance-color-text, 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;vertical-align:middle;word-break:break-word}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.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:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--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))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
|
|
271
270
|
|
|
272
271
|
const listboxOptionDefinition = ListboxOption.compose({
|
|
273
272
|
baseName: "option",
|
package/shared/definition37.cjs
CHANGED
|
@@ -10,7 +10,7 @@ const repeat = require('./repeat.cjs');
|
|
|
10
10
|
const classNames = require('./class-names.cjs');
|
|
11
11
|
const when = require('./when.cjs');
|
|
12
12
|
|
|
13
|
-
const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button[size=normal]{--base-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}
|
|
13
|
+
const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
|
|
14
14
|
|
|
15
15
|
var __defProp = Object.defineProperty;
|
|
16
16
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition37.js
CHANGED
|
@@ -8,7 +8,7 @@ import { r as repeat } from './repeat.js';
|
|
|
8
8
|
import { c as classNames } from './class-names.js';
|
|
9
9
|
import { w as when } from './when.js';
|
|
10
10
|
|
|
11
|
-
const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button[size=normal]{--base-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}
|
|
11
|
+
const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
|
|
12
12
|
|
|
13
13
|
var __defProp = Object.defineProperty;
|
|
14
14
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition38.cjs
CHANGED
|
@@ -5,16 +5,15 @@ const baseProgress = require('./base-progress.cjs');
|
|
|
5
5
|
const when = require('./when.cjs');
|
|
6
6
|
const classNames = require('./class-names.cjs');
|
|
7
7
|
|
|
8
|
-
const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_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.size--6{--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.base.size--5{--_size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--4{--_size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--3{--_size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--2{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--1{--_size:calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-1{--_size:calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-2{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-3{--_size:calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-4{--_size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-5{--_size:calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}
|
|
8
|
+
const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_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.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
11
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
12
11
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
13
|
-
var result =
|
|
12
|
+
var result = void 0 ;
|
|
14
13
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
15
14
|
if (decorator = decorators[i])
|
|
16
|
-
result = (
|
|
17
|
-
if (
|
|
15
|
+
result = (decorator(target, key, result) ) || result;
|
|
16
|
+
if (result)
|
|
18
17
|
__defProp(target, key, result);
|
|
19
18
|
return result;
|
|
20
19
|
};
|
|
@@ -26,13 +25,13 @@ class ProgressRing extends baseProgress.BaseProgress {
|
|
|
26
25
|
}
|
|
27
26
|
__decorateClass([
|
|
28
27
|
index.attr({ attribute: "aria-label" })
|
|
29
|
-
], ProgressRing.prototype, "ariaLabel"
|
|
28
|
+
], ProgressRing.prototype, "ariaLabel");
|
|
30
29
|
__decorateClass([
|
|
31
30
|
index.attr
|
|
32
|
-
], ProgressRing.prototype, "connotation"
|
|
31
|
+
], ProgressRing.prototype, "connotation");
|
|
33
32
|
__decorateClass([
|
|
34
33
|
index.attr
|
|
35
|
-
], ProgressRing.prototype, "size"
|
|
34
|
+
], ProgressRing.prototype, "size");
|
|
36
35
|
|
|
37
36
|
const getClasses = ({ connotation, size, paused }) => classNames.classNames(
|
|
38
37
|
"base",
|
package/shared/definition38.js
CHANGED
|
@@ -3,16 +3,15 @@ import { B as BaseProgress } from './base-progress.js';
|
|
|
3
3
|
import { w as when } from './when.js';
|
|
4
4
|
import { c as classNames } from './class-names.js';
|
|
5
5
|
|
|
6
|
-
const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_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.size--6{--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.base.size--5{--_size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--4{--_size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--3{--_size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--2{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--1{--_size:calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-1{--_size:calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-2{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-3{--_size:calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-4{--_size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-5{--_size:calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}
|
|
6
|
+
const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_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.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
|
|
7
7
|
|
|
8
8
|
var __defProp = Object.defineProperty;
|
|
9
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
10
9
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
11
|
-
var result =
|
|
10
|
+
var result = void 0 ;
|
|
12
11
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
13
12
|
if (decorator = decorators[i])
|
|
14
|
-
result = (
|
|
15
|
-
if (
|
|
13
|
+
result = (decorator(target, key, result) ) || result;
|
|
14
|
+
if (result)
|
|
16
15
|
__defProp(target, key, result);
|
|
17
16
|
return result;
|
|
18
17
|
};
|
|
@@ -24,13 +23,13 @@ class ProgressRing extends BaseProgress {
|
|
|
24
23
|
}
|
|
25
24
|
__decorateClass([
|
|
26
25
|
attr({ attribute: "aria-label" })
|
|
27
|
-
], ProgressRing.prototype, "ariaLabel"
|
|
26
|
+
], ProgressRing.prototype, "ariaLabel");
|
|
28
27
|
__decorateClass([
|
|
29
28
|
attr
|
|
30
|
-
], ProgressRing.prototype, "connotation"
|
|
29
|
+
], ProgressRing.prototype, "connotation");
|
|
31
30
|
__decorateClass([
|
|
32
31
|
attr
|
|
33
|
-
], ProgressRing.prototype, "size"
|
|
32
|
+
], ProgressRing.prototype, "size");
|
|
34
33
|
|
|
35
34
|
const getClasses = ({ connotation, size, paused }) => classNames(
|
|
36
35
|
"base",
|
package/shared/definition39.cjs
CHANGED
|
@@ -5,16 +5,15 @@ const baseProgress = require('./base-progress.cjs');
|
|
|
5
5
|
const when = require('./when.cjs');
|
|
6
6
|
const classNames = require('./class-names.cjs');
|
|
7
7
|
|
|
8
|
-
const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}
|
|
8
|
+
const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
11
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
12
11
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
13
|
-
var result =
|
|
12
|
+
var result = void 0 ;
|
|
14
13
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
15
14
|
if (decorator = decorators[i])
|
|
16
|
-
result = (
|
|
17
|
-
if (
|
|
15
|
+
result = (decorator(target, key, result) ) || result;
|
|
16
|
+
if (result)
|
|
18
17
|
__defProp(target, key, result);
|
|
19
18
|
return result;
|
|
20
19
|
};
|
|
@@ -27,16 +26,16 @@ class Progress extends baseProgress.BaseProgress {
|
|
|
27
26
|
}
|
|
28
27
|
__decorateClass([
|
|
29
28
|
index.attr({ attribute: "aria-label" })
|
|
30
|
-
], Progress.prototype, "ariaLabel"
|
|
29
|
+
], Progress.prototype, "ariaLabel");
|
|
31
30
|
__decorateClass([
|
|
32
31
|
index.attr()
|
|
33
|
-
], Progress.prototype, "shape"
|
|
32
|
+
], Progress.prototype, "shape");
|
|
34
33
|
__decorateClass([
|
|
35
34
|
index.attr()
|
|
36
|
-
], Progress.prototype, "connotation"
|
|
35
|
+
], Progress.prototype, "connotation");
|
|
37
36
|
__decorateClass([
|
|
38
37
|
index.attr({ mode: "boolean" })
|
|
39
|
-
], Progress.prototype, "reverse"
|
|
38
|
+
], Progress.prototype, "reverse");
|
|
40
39
|
|
|
41
40
|
const getClasses = ({ connotation, shape, reverse, paused }) => classNames.classNames(
|
|
42
41
|
"base",
|
package/shared/definition39.js
CHANGED
|
@@ -3,16 +3,15 @@ import { B as BaseProgress } from './base-progress.js';
|
|
|
3
3
|
import { w as when } from './when.js';
|
|
4
4
|
import { c as classNames } from './class-names.js';
|
|
5
5
|
|
|
6
|
-
const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}
|
|
6
|
+
const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
|
|
7
7
|
|
|
8
8
|
var __defProp = Object.defineProperty;
|
|
9
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
10
9
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
11
|
-
var result =
|
|
10
|
+
var result = void 0 ;
|
|
12
11
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
13
12
|
if (decorator = decorators[i])
|
|
14
|
-
result = (
|
|
15
|
-
if (
|
|
13
|
+
result = (decorator(target, key, result) ) || result;
|
|
14
|
+
if (result)
|
|
16
15
|
__defProp(target, key, result);
|
|
17
16
|
return result;
|
|
18
17
|
};
|
|
@@ -25,16 +24,16 @@ class Progress extends BaseProgress {
|
|
|
25
24
|
}
|
|
26
25
|
__decorateClass([
|
|
27
26
|
attr({ attribute: "aria-label" })
|
|
28
|
-
], Progress.prototype, "ariaLabel"
|
|
27
|
+
], Progress.prototype, "ariaLabel");
|
|
29
28
|
__decorateClass([
|
|
30
29
|
attr()
|
|
31
|
-
], Progress.prototype, "shape"
|
|
30
|
+
], Progress.prototype, "shape");
|
|
32
31
|
__decorateClass([
|
|
33
32
|
attr()
|
|
34
|
-
], Progress.prototype, "connotation"
|
|
33
|
+
], Progress.prototype, "connotation");
|
|
35
34
|
__decorateClass([
|
|
36
35
|
attr({ mode: "boolean" })
|
|
37
|
-
], Progress.prototype, "reverse"
|
|
36
|
+
], Progress.prototype, "reverse");
|
|
38
37
|
|
|
39
38
|
const getClasses = ({ connotation, shape, reverse, paused }) => classNames(
|
|
40
39
|
"base",
|
package/shared/definition4.cjs
CHANGED
|
@@ -13,16 +13,15 @@ const button = require('./button.cjs');
|
|
|
13
13
|
const when = require('./when.cjs');
|
|
14
14
|
const classNames = require('./class-names.cjs');
|
|
15
15
|
|
|
16
|
-
const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}
|
|
16
|
+
const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
|
|
17
17
|
|
|
18
18
|
var __defProp = Object.defineProperty;
|
|
19
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
20
19
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
21
|
-
var result =
|
|
20
|
+
var result = void 0 ;
|
|
22
21
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
23
22
|
if (decorator = decorators[i])
|
|
24
|
-
result = (
|
|
25
|
-
if (
|
|
23
|
+
result = (decorator(target, key, result) ) || result;
|
|
24
|
+
if (result)
|
|
26
25
|
__defProp(target, key, result);
|
|
27
26
|
return result;
|
|
28
27
|
};
|
|
@@ -110,37 +109,37 @@ class Alert extends index.FoundationElement {
|
|
|
110
109
|
}
|
|
111
110
|
__decorateClass([
|
|
112
111
|
index.attr({ attribute: "dismiss-button-aria-label" })
|
|
113
|
-
], Alert.prototype, "dismissButtonAriaLabel"
|
|
112
|
+
], Alert.prototype, "dismissButtonAriaLabel");
|
|
114
113
|
__decorateClass([
|
|
115
114
|
index.attr({ mode: "boolean" })
|
|
116
|
-
], Alert.prototype, "removable"
|
|
115
|
+
], Alert.prototype, "removable");
|
|
117
116
|
__decorateClass([
|
|
118
117
|
index.attr({ mode: "fromView" })
|
|
119
|
-
], Alert.prototype, "placement"
|
|
118
|
+
], Alert.prototype, "placement");
|
|
120
119
|
__decorateClass([
|
|
121
120
|
index.attr
|
|
122
|
-
], Alert.prototype, "headline"
|
|
121
|
+
], Alert.prototype, "headline");
|
|
123
122
|
__decorateClass([
|
|
124
123
|
index.attr
|
|
125
|
-
], Alert.prototype, "text"
|
|
124
|
+
], Alert.prototype, "text");
|
|
126
125
|
__decorateClass([
|
|
127
126
|
index.attr
|
|
128
|
-
], Alert.prototype, "icon"
|
|
127
|
+
], Alert.prototype, "icon");
|
|
129
128
|
__decorateClass([
|
|
130
129
|
index.attr({
|
|
131
130
|
mode: "fromView",
|
|
132
131
|
converter: index.nullableNumberConverter
|
|
133
132
|
})
|
|
134
|
-
], Alert.prototype, "timeoutms"
|
|
133
|
+
], Alert.prototype, "timeoutms");
|
|
135
134
|
__decorateClass([
|
|
136
135
|
index.attr
|
|
137
|
-
], Alert.prototype, "connotation"
|
|
136
|
+
], Alert.prototype, "connotation");
|
|
138
137
|
__decorateClass([
|
|
139
138
|
index.attr
|
|
140
|
-
], Alert.prototype, "strategy"
|
|
139
|
+
], Alert.prototype, "strategy");
|
|
141
140
|
__decorateClass([
|
|
142
141
|
index.attr({ mode: "boolean" })
|
|
143
|
-
], Alert.prototype, "open"
|
|
142
|
+
], Alert.prototype, "open");
|
|
144
143
|
applyMixins.applyMixins(Alert, affix.AffixIcon);
|
|
145
144
|
applyMixins.applyMixins(Alert, localized.Localized);
|
|
146
145
|
|
package/shared/definition4.js
CHANGED
|
@@ -11,16 +11,15 @@ import { B as Button$1 } from './button.js';
|
|
|
11
11
|
import { w as when } from './when.js';
|
|
12
12
|
import { c as classNames } from './class-names.js';
|
|
13
13
|
|
|
14
|
-
const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}
|
|
14
|
+
const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
|
|
15
15
|
|
|
16
16
|
var __defProp = Object.defineProperty;
|
|
17
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
18
17
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
19
|
-
var result =
|
|
18
|
+
var result = void 0 ;
|
|
20
19
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
21
20
|
if (decorator = decorators[i])
|
|
22
|
-
result = (
|
|
23
|
-
if (
|
|
21
|
+
result = (decorator(target, key, result) ) || result;
|
|
22
|
+
if (result)
|
|
24
23
|
__defProp(target, key, result);
|
|
25
24
|
return result;
|
|
26
25
|
};
|
|
@@ -108,37 +107,37 @@ class Alert extends FoundationElement {
|
|
|
108
107
|
}
|
|
109
108
|
__decorateClass([
|
|
110
109
|
attr({ attribute: "dismiss-button-aria-label" })
|
|
111
|
-
], Alert.prototype, "dismissButtonAriaLabel"
|
|
110
|
+
], Alert.prototype, "dismissButtonAriaLabel");
|
|
112
111
|
__decorateClass([
|
|
113
112
|
attr({ mode: "boolean" })
|
|
114
|
-
], Alert.prototype, "removable"
|
|
113
|
+
], Alert.prototype, "removable");
|
|
115
114
|
__decorateClass([
|
|
116
115
|
attr({ mode: "fromView" })
|
|
117
|
-
], Alert.prototype, "placement"
|
|
116
|
+
], Alert.prototype, "placement");
|
|
118
117
|
__decorateClass([
|
|
119
118
|
attr
|
|
120
|
-
], Alert.prototype, "headline"
|
|
119
|
+
], Alert.prototype, "headline");
|
|
121
120
|
__decorateClass([
|
|
122
121
|
attr
|
|
123
|
-
], Alert.prototype, "text"
|
|
122
|
+
], Alert.prototype, "text");
|
|
124
123
|
__decorateClass([
|
|
125
124
|
attr
|
|
126
|
-
], Alert.prototype, "icon"
|
|
125
|
+
], Alert.prototype, "icon");
|
|
127
126
|
__decorateClass([
|
|
128
127
|
attr({
|
|
129
128
|
mode: "fromView",
|
|
130
129
|
converter: nullableNumberConverter
|
|
131
130
|
})
|
|
132
|
-
], Alert.prototype, "timeoutms"
|
|
131
|
+
], Alert.prototype, "timeoutms");
|
|
133
132
|
__decorateClass([
|
|
134
133
|
attr
|
|
135
|
-
], Alert.prototype, "connotation"
|
|
134
|
+
], Alert.prototype, "connotation");
|
|
136
135
|
__decorateClass([
|
|
137
136
|
attr
|
|
138
|
-
], Alert.prototype, "strategy"
|
|
137
|
+
], Alert.prototype, "strategy");
|
|
139
138
|
__decorateClass([
|
|
140
139
|
attr({ mode: "boolean" })
|
|
141
|
-
], Alert.prototype, "open"
|
|
140
|
+
], Alert.prototype, "open");
|
|
142
141
|
applyMixins(Alert, AffixIcon);
|
|
143
142
|
applyMixins(Alert, Localized);
|
|
144
143
|
|
package/shared/definition40.cjs
CHANGED
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const direction = require('./direction.cjs');
|
|
5
5
|
const keyCodes = require('./key-codes.cjs');
|
|
6
|
-
const aria = require('./
|
|
6
|
+
const aria = require('./aria2.cjs');
|
|
7
7
|
const radio = require('./radio.cjs');
|
|
8
8
|
const slotted = require('./slotted.cjs');
|
|
9
9
|
const when = require('./when.cjs');
|
|
10
|
-
const aria$1 = require('./
|
|
10
|
+
const aria$1 = require('./aria.cjs');
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* An Radio Group Custom HTML Element.
|
|
@@ -395,16 +395,15 @@ index.__decorate([
|
|
|
395
395
|
index.observable
|
|
396
396
|
], RadioGroup$1.prototype, "slottedRadioButtons", void 0);
|
|
397
397
|
|
|
398
|
-
const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}
|
|
398
|
+
const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
|
|
399
399
|
|
|
400
400
|
var __defProp = Object.defineProperty;
|
|
401
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
402
401
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
403
|
-
var result =
|
|
402
|
+
var result = void 0 ;
|
|
404
403
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
405
404
|
if (decorator = decorators[i])
|
|
406
|
-
result = (
|
|
407
|
-
if (
|
|
405
|
+
result = (decorator(target, key, result) ) || result;
|
|
406
|
+
if (result)
|
|
408
407
|
__defProp(target, key, result);
|
|
409
408
|
return result;
|
|
410
409
|
};
|
|
@@ -412,7 +411,7 @@ class RadioGroup extends RadioGroup$1 {
|
|
|
412
411
|
}
|
|
413
412
|
__decorateClass([
|
|
414
413
|
index.attr
|
|
415
|
-
], RadioGroup.prototype, "label"
|
|
414
|
+
], RadioGroup.prototype, "label");
|
|
416
415
|
|
|
417
416
|
const RadioGroupTemplate = (context) => {
|
|
418
417
|
return index.html`
|
package/shared/definition40.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { D as Direction, g as getDirection } from './direction.js';
|
|
3
3
|
import { h as keyArrowRight, i as keyArrowLeft, A as ArrowKeys, e as keyArrowUp, f as keyArrowDown, k as keyEnter } from './key-codes.js';
|
|
4
|
-
import { O as Orientation } from './
|
|
4
|
+
import { O as Orientation } from './aria2.js';
|
|
5
5
|
import { R as Radio } from './radio.js';
|
|
6
6
|
import { s as slotted, e as elements } from './slotted.js';
|
|
7
7
|
import { w as when } from './when.js';
|
|
8
|
-
import { O as Orientation$1 } from './
|
|
8
|
+
import { O as Orientation$1 } from './aria.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* An Radio Group Custom HTML Element.
|
|
@@ -393,16 +393,15 @@ __decorate([
|
|
|
393
393
|
observable
|
|
394
394
|
], RadioGroup$1.prototype, "slottedRadioButtons", void 0);
|
|
395
395
|
|
|
396
|
-
const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}
|
|
396
|
+
const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
|
|
397
397
|
|
|
398
398
|
var __defProp = Object.defineProperty;
|
|
399
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
400
399
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
401
|
-
var result =
|
|
400
|
+
var result = void 0 ;
|
|
402
401
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
403
402
|
if (decorator = decorators[i])
|
|
404
|
-
result = (
|
|
405
|
-
if (
|
|
403
|
+
result = (decorator(target, key, result) ) || result;
|
|
404
|
+
if (result)
|
|
406
405
|
__defProp(target, key, result);
|
|
407
406
|
return result;
|
|
408
407
|
};
|
|
@@ -410,7 +409,7 @@ class RadioGroup extends RadioGroup$1 {
|
|
|
410
409
|
}
|
|
411
410
|
__decorateClass([
|
|
412
411
|
attr
|
|
413
|
-
], RadioGroup.prototype, "label"
|
|
412
|
+
], RadioGroup.prototype, "label");
|
|
414
413
|
|
|
415
414
|
const RadioGroupTemplate = (context) => {
|
|
416
415
|
return html`
|
package/shared/definition41.cjs
CHANGED
|
@@ -5,7 +5,7 @@ const radio = require('./radio.cjs');
|
|
|
5
5
|
const when = require('./when.cjs');
|
|
6
6
|
const classNames = require('./class-names.cjs');
|
|
7
7
|
|
|
8
|
-
const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.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(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):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: var(--_connotation-color-primary-increment)}.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(.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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{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));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}
|
|
8
|
+
const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.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(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):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: var(--_connotation-color-primary-increment)}.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(.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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{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));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}";
|
|
9
9
|
|
|
10
10
|
const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.classNames(
|
|
11
11
|
"base",
|
package/shared/definition41.js
CHANGED
|
@@ -3,7 +3,7 @@ import { R as Radio } from './radio.js';
|
|
|
3
3
|
import { w as when } from './when.js';
|
|
4
4
|
import { c as classNames } from './class-names.js';
|
|
5
5
|
|
|
6
|
-
const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.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(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):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: var(--_connotation-color-primary-increment)}.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(.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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{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));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}
|
|
6
|
+
const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.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(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):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: var(--_connotation-color-primary-increment)}.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(.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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{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));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}";
|
|
7
7
|
|
|
8
8
|
const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames(
|
|
9
9
|
"base",
|