@vonage/vivid 5.5.0 → 5.7.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/LICENSE.md +201 -0
- package/accordion/definition.cjs +5 -0
- package/accordion/definition.js +5 -0
- package/accordion/index.cjs +1 -1
- package/accordion/index.js +14 -3
- package/accordion-item/definition.cjs +1 -1
- package/accordion-item/definition.js +1 -1
- package/alert/definition.cjs +4 -12
- package/alert/definition.js +5 -13
- package/alert/index.cjs +11 -11
- package/alert/index.js +33 -37
- package/audio-player/definition.cjs +4 -0
- package/audio-player/definition.js +4 -0
- package/audio-player/index.cjs +1 -1
- package/audio-player/index.js +8 -2
- package/avatar/definition.cjs +1 -1
- package/avatar/definition.js +1 -1
- package/avatar/index.cjs +1 -1
- package/avatar/index.js +4 -4
- package/banner/definition.cjs +2 -4
- package/banner/definition.js +2 -4
- package/banner/index.cjs +2 -2
- package/banner/index.js +1 -1
- package/breadcrumb/definition.cjs +1 -0
- package/breadcrumb/definition.js +1 -0
- package/breadcrumb/index.cjs +1 -1
- package/breadcrumb/index.js +1 -0
- package/breadcrumb-item/definition.cjs +1 -1
- package/breadcrumb-item/definition.js +1 -1
- package/breadcrumb-item/index.cjs +4 -4
- package/breadcrumb-item/index.js +4 -4
- package/bundled/affix.js +1 -1
- package/bundled/anchored.cjs +1 -1
- package/bundled/anchored.js +6 -6
- package/bundled/attribute-binding-behaviour.cjs +1 -1
- package/bundled/attribute-binding-behaviour.js +3 -1
- package/bundled/base-color-picker.cjs +1 -1
- package/bundled/base-color-picker.js +9 -3
- package/bundled/base-progress.cjs +1 -1
- package/bundled/base-progress.js +3 -0
- package/bundled/button.cjs +1 -1
- package/bundled/button.js +14 -10
- package/bundled/calendar-picker.template.cjs +1 -1
- package/bundled/calendar-picker.template.js +3 -1
- package/bundled/definition.cjs +1 -1
- package/bundled/definition.js +21 -21
- package/bundled/definition10.cjs +7 -7
- package/bundled/definition10.js +27 -17
- package/bundled/definition11.cjs +2 -2
- package/bundled/definition11.js +5 -5
- package/bundled/definition12.cjs +3 -3
- package/bundled/definition12.js +2 -1
- package/bundled/definition13.cjs +1 -1
- package/bundled/definition13.js +1 -1
- package/bundled/definition17.cjs +1 -1
- package/bundled/definition17.js +4 -1
- package/bundled/definition18.cjs +1 -1
- package/bundled/definition18.js +18 -7
- package/bundled/definition19.cjs +6 -6
- package/bundled/definition19.js +103 -68
- package/bundled/definition2.cjs +8 -9
- package/bundled/definition2.js +67 -75
- package/bundled/definition20.cjs +1 -1
- package/bundled/definition20.js +4 -4
- package/bundled/definition22.cjs +1 -1
- package/bundled/definition22.js +2 -1
- package/bundled/definition3.cjs +2 -2
- package/bundled/definition3.js +2 -1
- package/bundled/definition5.cjs +1 -1
- package/bundled/definition5.js +10 -4
- package/bundled/definition6.cjs +2 -2
- package/bundled/definition6.js +2 -1
- package/bundled/definition7.cjs +1 -1
- package/bundled/definition7.js +8 -5
- package/bundled/definition8.cjs +1 -1
- package/bundled/definition8.js +6 -5
- package/bundled/definition9.cjs +6 -6
- package/bundled/definition9.js +545 -488
- package/bundled/delegates-aria.cjs +1 -1
- package/bundled/delegates-aria.js +3 -1
- package/bundled/form-associated.cjs +1 -1
- package/bundled/form-associated.js +11 -3
- package/bundled/host-semantics.js +4 -4
- package/bundled/listbox.cjs +1 -1
- package/bundled/listbox.js +21 -3
- package/bundled/localized.cjs +1 -1
- package/bundled/localized.js +137 -67
- package/bundled/mixins.cjs +4 -4
- package/bundled/mixins.js +10 -7
- package/bundled/picker-field.template.cjs +1 -1
- package/bundled/picker-field.template.js +1 -0
- package/bundled/scrollIntoView.cjs +1 -1
- package/bundled/scrollIntoView.js +4 -1
- package/bundled/text-field.cjs +1 -1
- package/bundled/text-field.js +1 -1
- package/bundled/time-selection-picker.template.cjs +11 -11
- package/bundled/time-selection-picker.template.js +4 -1
- package/bundled/vivid-element.cjs +4 -4
- package/bundled/vivid-element.js +529 -492
- package/calendar/definition.cjs +2 -0
- package/calendar/definition.js +2 -0
- package/calendar/index.cjs +1 -1
- package/calendar/index.js +2 -0
- package/calendar-event/definition.cjs +1 -1
- package/calendar-event/definition.js +1 -1
- package/calendar-event/index.cjs +2 -2
- package/calendar-event/index.js +5 -5
- package/card/definition.cjs +1 -1
- package/card/definition.js +1 -1
- package/card/index.cjs +1 -1
- package/card/index.js +1 -1
- package/checkbox/definition.cjs +2 -1
- package/checkbox/definition.js +2 -1
- package/color-picker/definition.cjs +6 -1
- package/color-picker/definition.js +6 -1
- package/color-picker/index.cjs +1 -1
- package/color-picker/index.js +6 -1
- package/combobox/definition.cjs +17 -6
- package/combobox/definition.js +17 -6
- package/combobox/index.cjs +14 -9
- package/combobox/index.js +48 -36
- package/contextual-help/definition.cjs +1 -1
- package/contextual-help/definition.js +1 -1
- package/custom-elements.json +6985 -542
- package/data-grid/definition.cjs +106 -8
- package/data-grid/definition.js +106 -8
- package/data-grid/index.cjs +52 -38
- package/data-grid/index.js +313 -242
- package/date-range-picker/definition.cjs +2 -0
- package/date-range-picker/definition.js +2 -0
- package/date-range-picker/index.cjs +1 -1
- package/date-range-picker/index.js +5 -1
- package/dial-pad/definition.cjs +10 -1
- package/dial-pad/definition.js +10 -1
- package/dial-pad/index.cjs +2 -2
- package/dial-pad/index.js +37 -13
- package/dialog/definition.cjs +2 -1
- package/dialog/definition.js +2 -1
- package/dialog/index.cjs +1 -1
- package/dialog/index.js +2 -1
- package/fab/definition.cjs +2 -1
- package/fab/definition.js +2 -1
- package/fab/index.cjs +1 -1
- package/fab/index.js +6 -5
- package/file-picker/definition.cjs +7 -2
- package/file-picker/definition.js +7 -2
- package/file-picker/index.cjs +6 -6
- package/file-picker/index.js +82 -73
- package/icon/definition.cjs +12 -21
- package/icon/definition.js +13 -22
- package/index.cjs +21 -0
- package/index.js +1 -1
- package/lib/data-grid/locale.d.ts +5 -0
- package/lib/date-picker/date-picker.d.ts +38 -38
- package/lib/date-range-picker/date-range-picker.d.ts +20 -20
- package/lib/date-time-picker/date-time-picker.d.ts +40 -40
- package/lib/icon/icon.d.ts +0 -1
- package/lib/menu/menu.d.ts +4 -4
- package/lib/rich-text-editor/definition.d.ts +3 -2
- package/lib/rich-text-editor/locale.d.ts +29 -3
- package/lib/rich-text-editor/popover.d.ts +19 -0
- package/lib/rich-text-editor/rich-text-editor.d.ts +16 -45
- package/lib/rich-text-editor/rich-text-editor.template.d.ts +2 -2
- package/lib/rich-text-editor/rte/config.d.ts +18 -0
- package/lib/rich-text-editor/rte/document.d.ts +28 -0
- package/lib/rich-text-editor/rte/exports.d.ts +23 -0
- package/lib/rich-text-editor/rte/feature.d.ts +46 -0
- package/lib/rich-text-editor/rte/features/internal/basic-text-blocks.d.ts +33 -0
- package/lib/rich-text-editor/rte/features/internal/foreign-html.d.ts +11 -0
- package/lib/rich-text-editor/rte/features/internal/history.d.ts +10 -0
- package/lib/rich-text-editor/rte/features/internal/text-style.d.ts +18 -0
- package/lib/rich-text-editor/rte/html-parser.d.ts +24 -0
- package/lib/rich-text-editor/rte/html-serializer.d.ts +30 -0
- package/lib/rich-text-editor/rte/instance.d.ts +57 -0
- package/lib/rich-text-editor/rte/utils/default-textblock.d.ts +2 -0
- package/lib/rich-text-editor/rte/utils/impl.d.ts +1 -0
- package/lib/rich-text-editor/rte/utils/textblock-attrs.d.ts +29 -0
- package/lib/rich-text-editor/rte/utils/textblock-marks.d.ts +10 -0
- package/lib/rich-text-editor/rte/utils/ui.d.ts +109 -0
- package/lib/simple-color-picker/simple-color-picker.d.ts +4 -4
- package/lib/text-area/text-area.d.ts +1 -1
- package/lib/text-field/text-field.d.ts +1 -1
- package/lib/time-picker/time-picker.d.ts +20 -20
- package/lib/toggletip/toggletip.d.ts +4 -4
- package/lib/tooltip/tooltip.d.ts +4 -4
- package/locales/de-DE.cjs +42 -4
- package/locales/de-DE.js +42 -4
- package/locales/en-GB.cjs +43 -5
- package/locales/en-GB.js +43 -5
- package/locales/en-US.cjs +43 -5
- package/locales/en-US.js +43 -5
- package/locales/ja-JP.cjs +43 -5
- package/locales/ja-JP.js +43 -5
- package/locales/zh-CN.cjs +43 -5
- package/locales/zh-CN.js +43 -5
- package/menu/definition.cjs +2 -1
- package/menu/definition.js +2 -1
- package/nav-disclosure/definition.cjs +1 -1
- package/nav-disclosure/definition.js +1 -1
- package/nav-disclosure/index.cjs +1 -1
- package/nav-disclosure/index.js +1 -1
- package/nav-item/definition.cjs +1 -1
- package/nav-item/definition.js +1 -1
- package/nav-item/index.cjs +1 -1
- package/nav-item/index.js +5 -5
- package/number-field/definition.cjs +5 -3
- package/number-field/definition.js +5 -3
- package/number-field/index.cjs +5 -3
- package/number-field/index.js +34 -32
- package/package.json +76 -62
- package/pagination/definition.cjs +2 -0
- package/pagination/definition.js +2 -0
- package/pagination/index.cjs +1 -1
- package/pagination/index.js +2 -0
- package/radio/definition.cjs +5 -1
- package/radio/definition.js +5 -1
- package/range-slider/definition.cjs +3 -2
- package/range-slider/definition.js +3 -2
- package/range-slider/index.cjs +1 -1
- package/range-slider/index.js +4 -2
- package/rich-text-editor/definition.cjs +17942 -1074
- package/rich-text-editor/definition.js +17926 -1079
- package/rich-text-editor/index.cjs +29 -130
- package/rich-text-editor/index.js +5565 -2474
- package/searchable-select/definition.cjs +7 -3
- package/searchable-select/definition.js +7 -3
- package/searchable-select/index.cjs +5 -5
- package/searchable-select/index.js +11 -7
- package/select/definition.cjs +17 -2
- package/select/definition.js +17 -2
- package/selectable-box/definition.cjs +1 -1
- package/selectable-box/definition.js +1 -1
- package/selectable-box/index.cjs +3 -3
- package/selectable-box/index.js +1 -1
- package/shared/patterns/anchored.d.ts +8 -8
- package/shared/patterns/char-count/char-count.d.ts +1 -1
- package/shared/patterns/localized.d.ts +386 -0
- package/shared/picker-field/mixins/calendar-picker.d.ts +10 -10
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +10 -10
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +20 -20
- package/shared/picker-field/mixins/single-date-picker.d.ts +28 -28
- package/shared/picker-field/mixins/single-value-picker.d.ts +8 -8
- package/shared/picker-field/mixins/time-selection-picker.d.ts +20 -20
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +20 -20
- package/shared/utils/promise.d.ts +7 -0
- package/simple-color-picker/definition.cjs +4 -1
- package/simple-color-picker/definition.js +4 -1
- package/simple-color-picker/index.cjs +3 -3
- package/simple-color-picker/index.js +4 -1
- package/slider/definition.cjs +8 -2
- package/slider/definition.js +8 -2
- package/split-button/definition.cjs +1 -1
- package/split-button/definition.js +1 -1
- package/split-button/index.cjs +1 -1
- package/split-button/index.js +1 -1
- package/styles/core/all.css +5 -1
- package/styles/core/theme.css +5 -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/definition.cjs +2 -1
- package/switch/definition.js +2 -1
- package/switch/index.cjs +2 -2
- package/switch/index.js +11 -10
- package/tab/definition.cjs +1 -1
- package/tab/definition.js +1 -1
- package/tabs/definition.cjs +2 -0
- package/tabs/definition.js +2 -0
- package/tabs/index.cjs +1 -1
- package/tabs/index.js +2 -0
- package/tag/definition.cjs +1 -1
- package/tag/definition.js +1 -1
- package/tag/index.cjs +1 -1
- package/tag/index.js +1 -1
- package/text-area/definition.cjs +13 -7
- package/text-area/definition.js +13 -7
- package/text-area/index.cjs +6 -6
- package/text-area/index.js +20 -14
- package/text-field/definition.cjs +16 -6
- package/text-field/definition.js +16 -6
- package/toggletip/definition.cjs +5 -1
- package/toggletip/definition.js +5 -1
- package/tooltip/definition.cjs +4 -1
- package/tooltip/definition.js +4 -1
- package/tree-view/definition.cjs +28 -6
- package/tree-view/definition.js +28 -6
- package/tree-view/index.cjs +1 -1
- package/tree-view/index.js +28 -6
- package/unbundled/_commonjsHelpers.cjs +0 -26
- package/unbundled/_commonjsHelpers.js +1 -26
- package/unbundled/attribute-binding-behaviour.cjs +1 -0
- package/unbundled/attribute-binding-behaviour.js +1 -0
- package/unbundled/base-color-picker.cjs +9 -3
- package/unbundled/base-color-picker.js +9 -3
- package/unbundled/base-progress.cjs +3 -0
- package/unbundled/base-progress.js +3 -0
- package/unbundled/button.cjs +14 -10
- package/unbundled/button.js +14 -10
- package/unbundled/calendar-picker.template.cjs +3 -1
- package/unbundled/calendar-picker.template.js +3 -1
- package/unbundled/definition.cjs +2 -1
- package/unbundled/definition.js +2 -1
- package/unbundled/definition2.cjs +5 -2
- package/unbundled/definition2.js +5 -2
- package/unbundled/definition3.cjs +2 -1
- package/unbundled/definition3.js +2 -1
- package/unbundled/definition4.cjs +2 -1
- package/unbundled/definition4.js +2 -1
- package/unbundled/definition5.cjs +3 -2
- package/unbundled/definition5.js +4 -3
- package/unbundled/delegates-aria.cjs +1 -0
- package/unbundled/delegates-aria.js +1 -0
- package/unbundled/form-associated.cjs +4 -0
- package/unbundled/form-associated.js +4 -0
- package/unbundled/listbox.cjs +16 -1
- package/unbundled/listbox.js +16 -1
- package/unbundled/localized.cjs +36 -0
- package/unbundled/localized.js +37 -2
- package/unbundled/mixins.cjs +2 -0
- package/unbundled/mixins.js +2 -0
- package/unbundled/picker-field.template.cjs +1 -0
- package/unbundled/picker-field.template.js +1 -0
- package/unbundled/scrollIntoView.cjs +1 -0
- package/unbundled/scrollIntoView.js +1 -0
- package/unbundled/text-field.cjs +1 -1
- package/unbundled/text-field.js +1 -1
- package/unbundled/time-selection-picker.template.cjs +4 -1
- package/unbundled/time-selection-picker.template.js +4 -1
- package/unbundled/vivid-element.cjs +1 -1
- package/unbundled/vivid-element.js +1 -1
- package/video-player/definition.cjs +54 -44
- package/video-player/definition.js +51 -41
- package/video-player/index.cjs +28 -28
- package/video-player/index.js +1449 -1443
- package/vivid.api.json +6463 -6099
- package/lib/rich-text-editor/facades/prose-mirror-vivid.schema.d.ts +0 -4
- package/lib/rich-text-editor/facades/vivid-prose-mirror.facade.d.ts +0 -18
- package/lib/rich-text-editor/image-placeholder/definition.d.ts +0 -2
- package/lib/rich-text-editor/image-placeholder/image-placeholder.d.ts +0 -7
- package/lib/rich-text-editor/image-placeholder/image-placeholder.template.d.ts +0 -4
- package/lib/rich-text-editor/menubar/consts.d.ts +0 -18
- package/lib/rich-text-editor/menubar/definition.d.ts +0 -2
- package/lib/rich-text-editor/menubar/menubar.d.ts +0 -386
- package/lib/rich-text-editor/menubar/menubar.template.d.ts +0 -4
package/bundled/definition10.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { i as T } from "./definition2.js";
|
|
2
|
-
import {
|
|
3
|
-
import { a as L, g as
|
|
2
|
+
import { U as _, w as k, V as E, a, n as h, o as b, h as p, c as H, d as M } from "./vivid-element.js";
|
|
3
|
+
import { a as L, g as w, r as y, f as F } from "./mixins.js";
|
|
4
4
|
import { v as W } from "./definition14.js";
|
|
5
5
|
import { c as D } from "./definition13.js";
|
|
6
6
|
import { D as S, d as B } from "./delegates-aria.js";
|
|
@@ -26,7 +26,7 @@ const K = {
|
|
|
26
26
|
* A text TextField
|
|
27
27
|
*/
|
|
28
28
|
text: "text"
|
|
29
|
-
}, Q = "_vvd-3-text-field-safari-workaround", v = new
|
|
29
|
+
}, Q = "_vvd-3-text-field-safari-workaround", v = new k([
|
|
30
30
|
`
|
|
31
31
|
.${Q}::placeholder {
|
|
32
32
|
opacity: 1 !important;
|
|
@@ -42,73 +42,83 @@ class t extends N(
|
|
|
42
42
|
A(
|
|
43
43
|
z(
|
|
44
44
|
V(
|
|
45
|
-
q(R(S(O(
|
|
45
|
+
q(R(S(O(E))))
|
|
46
46
|
)
|
|
47
47
|
)
|
|
48
48
|
)
|
|
49
49
|
)
|
|
50
50
|
) {
|
|
51
51
|
constructor() {
|
|
52
|
-
super(...arguments), this.proxy = document.createElement("input"), this.type = K.text, this.#e =
|
|
52
|
+
super(...arguments), this.proxy = document.createElement("input"), this.type = K.text, this.#e = w();
|
|
53
53
|
}
|
|
54
54
|
/**
|
|
55
55
|
* @internal
|
|
56
56
|
*/
|
|
57
57
|
readOnlyChanged() {
|
|
58
|
+
/* v8 ignore if -- @preserve */
|
|
58
59
|
this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly, this.validate());
|
|
59
60
|
}
|
|
60
61
|
/**
|
|
61
62
|
* @internal
|
|
62
63
|
*/
|
|
63
64
|
autofocusChanged() {
|
|
65
|
+
/* v8 ignore if -- @preserve */
|
|
64
66
|
this.proxy instanceof HTMLInputElement && (this.proxy.autofocus = this.autofocus, this.validate());
|
|
65
67
|
}
|
|
66
68
|
/**
|
|
67
69
|
* @internal
|
|
68
70
|
*/
|
|
69
71
|
placeholderChanged() {
|
|
72
|
+
/* v8 ignore if -- @preserve */
|
|
70
73
|
this.proxy instanceof HTMLInputElement && (this.proxy.placeholder = this.placeholder);
|
|
71
74
|
}
|
|
72
75
|
/**
|
|
73
76
|
* @internal
|
|
74
77
|
*/
|
|
75
78
|
typeChanged() {
|
|
79
|
+
/* v8 ignore if -- @preserve */
|
|
76
80
|
this.proxy instanceof HTMLInputElement && (this.proxy.type = this.type, this.validate());
|
|
77
81
|
}
|
|
78
82
|
/**
|
|
79
83
|
* @internal
|
|
80
84
|
*/
|
|
81
85
|
listChanged() {
|
|
86
|
+
/* v8 ignore if -- @preserve */
|
|
82
87
|
this.proxy instanceof HTMLInputElement && (this.proxy.setAttribute("list", this.list), this.validate());
|
|
83
88
|
}
|
|
84
89
|
/**
|
|
85
90
|
* @internal
|
|
86
91
|
*/
|
|
87
92
|
maxlengthChanged() {
|
|
93
|
+
/* v8 ignore if -- @preserve */
|
|
88
94
|
this.proxy instanceof HTMLInputElement && (this.proxy.maxLength = this.maxlength, this.validate());
|
|
89
95
|
}
|
|
90
96
|
/**
|
|
91
97
|
* @internal
|
|
92
98
|
*/
|
|
93
99
|
minlengthChanged() {
|
|
100
|
+
/* v8 ignore if -- @preserve */
|
|
94
101
|
this.proxy instanceof HTMLInputElement && (this.proxy.minLength = this.minlength, this.validate());
|
|
95
102
|
}
|
|
96
103
|
/**
|
|
97
104
|
* @internal
|
|
98
105
|
*/
|
|
99
106
|
patternChanged() {
|
|
107
|
+
/* v8 ignore if -- @preserve */
|
|
100
108
|
this.proxy instanceof HTMLInputElement && (this.proxy.pattern = this.pattern, this.validate());
|
|
101
109
|
}
|
|
102
110
|
/**
|
|
103
111
|
* @internal
|
|
104
112
|
*/
|
|
105
113
|
sizeChanged() {
|
|
114
|
+
/* v8 ignore if -- @preserve */
|
|
106
115
|
this.proxy instanceof HTMLInputElement && (this.proxy.size = this.size);
|
|
107
116
|
}
|
|
108
117
|
/**
|
|
109
118
|
* @internal
|
|
110
119
|
*/
|
|
111
120
|
spellcheckChanged() {
|
|
121
|
+
/* v8 ignore if -- @preserve */
|
|
112
122
|
this.proxy instanceof HTMLInputElement && (this.proxy.spellcheck = this.spellcheck);
|
|
113
123
|
}
|
|
114
124
|
/**
|
|
@@ -158,7 +168,7 @@ class t extends N(
|
|
|
158
168
|
super.validate(this.control);
|
|
159
169
|
}
|
|
160
170
|
connectedCallback() {
|
|
161
|
-
super.connectedCallback(), this.proxy.setAttribute("type", this.type), this.validate(), this.autofocus &&
|
|
171
|
+
super.connectedCallback(), this.proxy.setAttribute("type", this.type), this.validate(), this.autofocus && _.enqueue(() => {
|
|
162
172
|
this.focus();
|
|
163
173
|
}), this._updateControlValueIfNeeded(), X(this), this._renderCharCountRemaining();
|
|
164
174
|
}
|
|
@@ -219,10 +229,10 @@ o([
|
|
|
219
229
|
a({ attribute: "inputmode" })
|
|
220
230
|
], t.prototype, "inputMode");
|
|
221
231
|
o([
|
|
222
|
-
|
|
232
|
+
b
|
|
223
233
|
], t.prototype, "actionItemsSlottedContent");
|
|
224
234
|
o([
|
|
225
|
-
|
|
235
|
+
b
|
|
226
236
|
], t.prototype, "leadingActionItemsSlottedContent");
|
|
227
237
|
const x = (i) => `vvd-text-field-control-${i}`, Y = ({
|
|
228
238
|
errorValidationMessage: i,
|
|
@@ -232,7 +242,7 @@ const x = (i) => `vvd-text-field-control-${i}`, Y = ({
|
|
|
232
242
|
placeholder: n,
|
|
233
243
|
appearance: l,
|
|
234
244
|
shape: r,
|
|
235
|
-
label:
|
|
245
|
+
label: C,
|
|
236
246
|
successText: $,
|
|
237
247
|
actionItemsSlottedContent: I,
|
|
238
248
|
leadingActionItemsSlottedContent: u,
|
|
@@ -246,7 +256,7 @@ const x = (i) => `vvd-text-field-control-${i}`, Y = ({
|
|
|
246
256
|
["placeholder", !!n],
|
|
247
257
|
[`appearance-${l}`, !!l],
|
|
248
258
|
[`shape-${r}`, !!r],
|
|
249
|
-
["no-label", !
|
|
259
|
+
["no-label", !C],
|
|
250
260
|
["has-icon", !!m],
|
|
251
261
|
["success", !!$],
|
|
252
262
|
["action-items", !!I?.length],
|
|
@@ -257,20 +267,20 @@ const x = (i) => `vvd-text-field-control-${i}`, Y = ({
|
|
|
257
267
|
const s = P(i);
|
|
258
268
|
return p`
|
|
259
269
|
<div class="base ${Y}">
|
|
260
|
-
|
|
261
|
-
class="label-suffix"
|
|
262
|
-
?hidden=${(e) => !(e.charCount && e.maxlength) && !e._hasContextualHelp}
|
|
263
|
-
>
|
|
264
|
-
${g(
|
|
270
|
+
${g(
|
|
265
271
|
(e) => e.charCount && e.maxlength,
|
|
266
272
|
(e) => e._getCharCountTemplate(i)
|
|
267
273
|
)}
|
|
274
|
+
<div
|
|
275
|
+
class="label-wrapper"
|
|
276
|
+
?hidden=${(e) => !e.label && !e._hasContextualHelp}
|
|
277
|
+
>
|
|
278
|
+
<slot class="label" name="_label"></slot>
|
|
268
279
|
<slot
|
|
269
280
|
name="contextual-help"
|
|
270
281
|
${d("_contextualHelpSlottedContent")}
|
|
271
282
|
></slot>
|
|
272
283
|
</div>
|
|
273
|
-
<slot class="label" name="_label"></slot>
|
|
274
284
|
${y(p`
|
|
275
285
|
${g(
|
|
276
286
|
(e) => e.label,
|
|
@@ -341,7 +351,7 @@ const x = (i) => `vvd-text-field-control-${i}`, Y = ({
|
|
|
341
351
|
Z,
|
|
342
352
|
[
|
|
343
353
|
T,
|
|
344
|
-
|
|
354
|
+
F,
|
|
345
355
|
W,
|
|
346
356
|
D
|
|
347
357
|
],
|
package/bundled/definition11.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const l=require("./definition9.cjs"),s=require("./vivid-element.cjs"),d=require("./anchored.cjs"),u=require("./index.cjs"),v=require("./class-names.cjs")
|
|
1
|
+
"use strict";const l=require("./definition9.cjs"),s=require("./vivid-element.cjs"),d=require("./anchored.cjs"),u=require("./index.cjs"),v=require("./class-names.cjs");var m=Object.defineProperty,p=(n,e,i,t)=>{for(var o=void 0,a=n.length-1,c;a>=0;a--)(c=n[a])&&(o=c(e,i,o)||o);return o&&m(e,i,o),o};class r extends d.Anchored(s.VividElement){constructor(){super(...arguments),this.open=!1,this.#t=()=>{this.open=!0,this.#i()},this.#e=()=>{this.open=!1,this.#i()},this.#n=e=>{/* v8 ignore else -- @preserve */e.key==="Escape"&&this.#e()}}connectedCallback(){super.connectedCallback(),this.#o()}disconnectedCallback(){super.disconnectedCallback(),this.#o()}_anchorElChanged(e,i){e&&this.#r(e),i&&this.#s(i)}#s(e){e.addEventListener("mouseover",this.#t),e.addEventListener("mouseout",this.#e),e.addEventListener("focusin",this.#t),e.addEventListener("focusout",this.#e),e.setAttribute("aria-haspopup","true"),e.setAttribute("aria-expanded",String(this.open))}#r(e){e.removeEventListener("mouseover",this.#t),e.removeEventListener("mouseout",this.#e),e.removeEventListener("focusin",this.#t),e.removeEventListener("focusout",this.#e),e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-expanded")}#t;#e;#i(){this._anchorEl&&this._anchorEl.setAttribute("aria-expanded",String(this.open))}#o(){document.removeEventListener("keydown",this.#n),this.open&&this.isConnected&&document.addEventListener("keydown",this.#n)}#n;openChanged(e){e!==void 0&&this.#o()}}p([s.attr],r.prototype,"text");p([s.attr({mode:"fromView"})],r.prototype,"placement");p([s.attr({mode:"boolean"})],r.prototype,"open");const f=":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);box-sizing:border-box;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size, 30ch)}",E=({open:n})=>v.classNames("control",["open",!!n]),b=n=>{const e=n.tagFor(l.Popup),i=d.anchorSlotTemplateFactory();return s.html`
|
|
2
2
|
${i}
|
|
3
3
|
<${e} class="${E}" arrow alternate
|
|
4
4
|
:placement=${t=>t.placement}
|
|
@@ -9,4 +9,4 @@ ${i}
|
|
|
9
9
|
<div part="vvd-theme-alternate" class="tooltip" role="tooltip">
|
|
10
10
|
${t=>t.text}
|
|
11
11
|
</div>
|
|
12
|
-
</${e}>`},h=s.defineVividComponent("tooltip",r,b,[l.popupDefinition],{styles:
|
|
12
|
+
</${e}>`},h=s.defineVividComponent("tooltip",r,b,[l.popupDefinition],{styles:f}),g=s.createRegisterFunction(h);exports.Tooltip=r;exports.registerTooltip=g;exports.tooltipDefinition=h;
|
package/bundled/definition11.js
CHANGED
|
@@ -3,11 +3,10 @@ import { V as h, a, h as v, c as m, d as u } from "./vivid-element.js";
|
|
|
3
3
|
import { A as f, a as E } from "./anchored.js";
|
|
4
4
|
import { h as b } from "./index.js";
|
|
5
5
|
import { c as x } from "./class-names.js";
|
|
6
|
-
|
|
7
|
-
var g = Object.defineProperty, p = (n, e, s, t) => {
|
|
6
|
+
var y = Object.defineProperty, p = (n, e, s, t) => {
|
|
8
7
|
for (var o = void 0, r = n.length - 1, c; r >= 0; r--)
|
|
9
8
|
(c = n[r]) && (o = c(e, s, o) || o);
|
|
10
|
-
return o &&
|
|
9
|
+
return o && y(e, s, o), o;
|
|
11
10
|
};
|
|
12
11
|
class i extends f(h) {
|
|
13
12
|
constructor() {
|
|
@@ -16,6 +15,7 @@ class i extends f(h) {
|
|
|
16
15
|
}, this.#e = () => {
|
|
17
16
|
this.open = !1, this.#s();
|
|
18
17
|
}, this.#n = (e) => {
|
|
18
|
+
/* v8 ignore else -- @preserve */
|
|
19
19
|
e.key === "Escape" && this.#e();
|
|
20
20
|
};
|
|
21
21
|
}
|
|
@@ -62,7 +62,7 @@ p([
|
|
|
62
62
|
p([
|
|
63
63
|
a({ mode: "boolean" })
|
|
64
64
|
], i.prototype, "open");
|
|
65
|
-
const A = ({ open: n }) => x("control", ["open", !!n]), L = (n) => {
|
|
65
|
+
const g = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);box-sizing:border-box;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size, 30ch)}", A = ({ open: n }) => x("control", ["open", !!n]), L = (n) => {
|
|
66
66
|
const e = n.tagFor(d), s = E();
|
|
67
67
|
return v`
|
|
68
68
|
${s}
|
|
@@ -84,7 +84,7 @@ ${s}
|
|
|
84
84
|
L,
|
|
85
85
|
[l],
|
|
86
86
|
{
|
|
87
|
-
styles:
|
|
87
|
+
styles: g
|
|
88
88
|
}
|
|
89
89
|
), P = m(C);
|
|
90
90
|
export {
|
package/bundled/definition12.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const v=require("./definition2.cjs"),t=require("./vivid-element.cjs"),p=require("./affix.cjs"),h=require("./host-semantics.cjs"),f=require("./dom.cjs"),l=require("./when.cjs"),m=require("./class-names.cjs");var x=Object.defineProperty,_=Object.getOwnPropertyDescriptor,n=(e,o,i,a)=>{for(var c=a>1?void 0:a?_(o,i):o,s=e.length-1,d;s>=0;s--)(d=e[s])&&(c=(a?d(o,i,c):d(c))||c);return a&&c&&x(o,i,c),c};function
|
|
1
|
+
"use strict";const v=require("./definition2.cjs"),t=require("./vivid-element.cjs"),p=require("./affix.cjs"),h=require("./host-semantics.cjs"),f=require("./dom.cjs"),l=require("./when.cjs"),m=require("./class-names.cjs");var x=Object.defineProperty,_=Object.getOwnPropertyDescriptor,n=(e,o,i,a)=>{for(var c=a>1?void 0:a?_(o,i):o,s=e.length-1,d;s>=0;s--)(d=e[s])&&(c=(a?d(o,i,c):d(c))||c);return a&&c&&x(o,i,c),c};function u(e){return f.isHTMLElement(e)&&(e.getAttribute("role")==="option"||e instanceof HTMLOptionElement||e instanceof r)}class r extends h.HostSemantics(p.AffixIconWithTrailing(t.VividElement)){constructor(o,i,a,c){super(),this.defaultSelected=!1,this.dirtySelected=!1,this.value="",this._highlighted=!1,this._displayCheckmark=!1,this._vvdSearchText="",this._isNotMatching=!1,o&&(this.text=o),i&&(this.value=i),a&&(this.defaultSelected=a),c&&(this.selected=c),this.proxy=new Option(this.text,this.value,this.defaultSelected,this.selected),this.proxy.disabled=this.disabled}defaultSelectedChanged(){this.dirtySelected||(this.selected=this.defaultSelected,this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.defaultSelected)),this.proxy instanceof HTMLOptionElement&&(this.proxy.defaultSelected=this.defaultSelected)}disabledChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLOptionElement&&(this.proxy.disabled=this.disabled)}get selectedAttribute(){return this.defaultSelected}set selectedAttribute(o){this.defaultSelected=o}selectedChanged(){this.dirtySelected||(this.dirtySelected=!0),this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.selected)}valueChanged(){if(typeof this.value!="string"){this.value="";return}this.proxy instanceof HTMLOptionElement&&(this.proxy.value=this.value)}get label(){return this._label??this.text}set label(o){this._label=o}set text(o){this._text=o}get text(){return this._text??""}_getAccessibleName(){return this.ariaLabel||`${this.text}${this.textSecondary?` ${this.textSecondary}`:""}`}get form(){return null}get _hasMatchedText(){return!!(this.matchedText??this._vvdSearchText)}get _matchedRange(){const o=this.matchedText??this._vvdSearchText;if(o){const i=this.text.toLowerCase().indexOf(o.toLowerCase());return i===-1?{from:0,to:0}:{from:i,to:i+o.length}}return{from:0,to:0}}connectedCallback(){super.connectedCallback(),this.dirtySelected||(this.selected=this.defaultSelected,this.dirtySelected=!1)}}n([t.attr({converter:{fromView:e=>{if(e===!0||e==="true")return!0;if(e===!1||e==="false")return!1},toView:e=>e}})],r.prototype,"checked",2);n([t.attr({attribute:"selected",mode:"boolean"})],r.prototype,"defaultSelected",2);n([t.attr({mode:"boolean"})],r.prototype,"disabled",2);n([t.attr({attribute:"current-selected",mode:"boolean"})],r.prototype,"selected",2);n([t.attr({attribute:"value"})],r.prototype,"value",2);n([t.attr({attribute:"label"})],r.prototype,"_label",2);n([t.attr({attribute:"text"})],r.prototype,"_text",2);n([t.attr({attribute:"text-secondary"})],r.prototype,"textSecondary",2);n([t.observable],r.prototype,"_highlighted",2);n([t.observable],r.prototype,"_displayCheckmark",2);n([t.attr({attribute:"matched-text"})],r.prototype,"matchedText",2);n([t.observable],r.prototype,"_vvdSearchText",2);n([t.volatile],r.prototype,"_hasMatchedText",1);n([t.observable],r.prototype,"_isNotMatching",2);n([t.volatile],r.prototype,"_matchedRange",1);n([t.attr({attribute:"tag-connotation"})],r.prototype,"tagConnotation",2);const y=e=>m.classNames("base",["disabled",e.disabled],["selected",!!e.selected],["hover",!!e._highlighted],["active",!!e.checked],["icon",!!e.icon],["two-lines",!!e.text?.length&&!!e.textSecondary?.length]);function g(){return t.html`${l.when(e=>e.text||e.textSecondary,t.html`<span class="text">
|
|
2
2
|
${l.when(e=>e.text,t.html`<span class="text-primary">
|
|
3
3
|
${l.when(e=>e._hasMatchedText,t.html`${e=>e.text.slice(0,e._matchedRange.from)}<span class="match"
|
|
4
4
|
>${e=>e.text.slice(e._matchedRange.from,e._matchedRange.to)}</span
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
${h.applyHostSemantics({role:"option",ariaChecked:a=>a.checked,ariaSelected:a=>a.selected,ariaDisabled:a=>a.disabled})}
|
|
11
11
|
style="${a=>a._isNotMatching?"display: none":""}"
|
|
12
12
|
>
|
|
13
|
-
<div class="${
|
|
13
|
+
<div class="${y}">
|
|
14
14
|
${a=>o(a.icon,p.IconWrapper.Slot)} ${g()}
|
|
15
15
|
<slot name="trailing-meta"></slot>
|
|
16
16
|
${l.when(a=>a._displayCheckmark&&a.selected,t.html`<${i} class="checkmark" name="check-line"></${i}>`)}
|
|
17
17
|
</div>
|
|
18
18
|
</template>
|
|
19
|
-
`},w=":host([disabled]){cursor:not-allowed}.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}@media (hover: hover){.base: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.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:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.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:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}",b=t.defineVividComponent("option",r,S,[v.iconDefinition],{styles:w}),k=t.createRegisterFunction(b);exports.ListboxOption=r;exports.isListboxOption=
|
|
19
|
+
`},w=":host([disabled]){cursor:not-allowed}.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}@media (hover: hover){.base: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.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:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.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:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}",b=t.defineVividComponent("option",r,S,[v.iconDefinition],{styles:w}),k=t.createRegisterFunction(b);exports.ListboxOption=r;exports.isListboxOption=u;exports.listboxOptionDefinition=b;exports.registerOption=k;
|
package/bundled/definition12.js
CHANGED
|
@@ -28,6 +28,7 @@ class o extends S(
|
|
|
28
28
|
this.dirtySelected || (this.selected = this.defaultSelected, this.proxy instanceof HTMLOptionElement && (this.proxy.selected = this.defaultSelected)), this.proxy instanceof HTMLOptionElement && (this.proxy.defaultSelected = this.defaultSelected);
|
|
29
29
|
}
|
|
30
30
|
disabledChanged() {
|
|
31
|
+
/* v8 ignore if -- @preserve */
|
|
31
32
|
this.proxy instanceof HTMLOptionElement && (this.proxy.disabled = this.disabled);
|
|
32
33
|
}
|
|
33
34
|
/**
|
|
@@ -208,7 +209,7 @@ const L = (e) => {
|
|
|
208
209
|
</div>
|
|
209
210
|
</template>
|
|
210
211
|
`;
|
|
211
|
-
}, M = ":host([disabled]){cursor:not-allowed}.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}@media (hover: hover){.base: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.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:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.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:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}", H = _(
|
|
212
|
+
}, M = ":host([disabled]){cursor:not-allowed}.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}@media (hover: hover){.base: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.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:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.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:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}", H = _(
|
|
212
213
|
"option",
|
|
213
214
|
o,
|
|
214
215
|
L,
|
package/bundled/definition13.cjs
CHANGED
|
@@ -7,4 +7,4 @@
|
|
|
7
7
|
</button>
|
|
8
8
|
<slot></slot>
|
|
9
9
|
</${r}>
|
|
10
|
-
`},b=".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}",p=n.defineVividComponent("contextual-help",s,_,[l.iconDefinition,i.toggletipDefinition],{styles:b}),m=n.createRegisterFunction(p);exports.contextualHelpDefinition=p;exports.registerContextualHelp=m;
|
|
10
|
+
`},b=".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}",p=n.defineVividComponent("contextual-help",s,_,[l.iconDefinition,i.toggletipDefinition],{styles:b}),m=n.createRegisterFunction(p);exports.contextualHelpDefinition=p;exports.registerContextualHelp=m;
|
package/bundled/definition13.js
CHANGED
|
@@ -27,7 +27,7 @@ const g = (o) => m("control"), h = (o) => {
|
|
|
27
27
|
<slot></slot>
|
|
28
28
|
</${r}>
|
|
29
29
|
`;
|
|
30
|
-
}, y = ".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}", k = _(
|
|
30
|
+
}, y = ".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}", k = _(
|
|
31
31
|
"contextual-help",
|
|
32
32
|
c,
|
|
33
33
|
h,
|
package/bundled/definition17.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const p=require("./definition9.cjs"),n=require("./vivid-element.cjs"),d=require("./anchored.cjs"),u=require("./localized.cjs"),g=require("./index.cjs"),m=require("./when.cjs"),v=require("./class-names.cjs"),f=":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";var b=Object.defineProperty,r=(s,e,i,t)=>{for(var o=void 0,l=s.length-1,c;l>=0;l--)(c=s[l])&&(o=c(e,i,o)||o);return o&&b(e,i,o),o};class a extends u.Localized(d.Anchored(n.VividElement)){constructor(){super(...arguments),this.#e=null,this.alternate=!1,this.placement="right",this.open=!1,this.#t=()=>{this.open||n.Updates.enqueue(()=>this.open=!0)},this.#n=e=>{const i=!this.contains(e.target),t=this._anchorEl?.contains(e.target);(i||t)&&(this.open=!1)},this.#o=e=>{e.key==="Escape"&&(this.open=!1)}}#e;openChanged(e,i){e!==void 0&&(i?this.setAttribute("role","status"):this.removeAttribute("role"),this.#i(),this._anchorEl&&this.#s(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#i()}disconnectedCallback(){super.disconnectedCallback(),this.#i()}_anchorElChanged(e,i){e&&this.#r(e),i&&this.#a(i)}#a(e){e.addEventListener("click",this.#t,!0),this.#e=e.ariaLabel,e.ariaLabel=`${this.locale.toggletip.anchorLabel(e.ariaLabel||"")}`,this.#s(e)}#s(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#r(e){e.removeEventListener("click",this.#t,!0),e.
|
|
1
|
+
"use strict";const p=require("./definition9.cjs"),n=require("./vivid-element.cjs"),d=require("./anchored.cjs"),u=require("./localized.cjs"),g=require("./index.cjs"),m=require("./when.cjs"),v=require("./class-names.cjs"),f=":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";var b=Object.defineProperty,r=(s,e,i,t)=>{for(var o=void 0,l=s.length-1,c;l>=0;l--)(c=s[l])&&(o=c(e,i,o)||o);return o&&b(e,i,o),o};class a extends u.Localized(d.Anchored(n.VividElement)){constructor(){super(...arguments),this.#e=null,this.alternate=!1,this.placement="right",this.open=!1,this.#t=()=>{this.open||n.Updates.enqueue(()=>this.open=!0)},this.#n=e=>{const i=!this.contains(e.target),t=this._anchorEl?.contains(e.target);(i||t)&&(this.open=!1)},this.#o=e=>{/* v8 ignore else -- @preserve */e.key==="Escape"&&(this.open=!1)}}#e;openChanged(e,i){e!==void 0&&(i?this.setAttribute("role","status"):this.removeAttribute("role"),this.#i(),this._anchorEl&&this.#s(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#i()}disconnectedCallback(){super.disconnectedCallback(),this.#i()}_anchorElChanged(e,i){e&&this.#r(e),i&&this.#a(i)}#a(e){e.addEventListener("click",this.#t,!0),this.#e=e.ariaLabel,e.ariaLabel=`${this.locale.toggletip.anchorLabel(e.ariaLabel||"")}`,this.#s(e)}#s(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#r(e){e.removeEventListener("click",this.#t,!0),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded");/* v8 ignore else -- @preserve */e.ariaLabel&&(e.ariaLabel=this.#e)}#t;#i(){document.removeEventListener("click",this.#n),document.removeEventListener("keydown",this.#o),this.open&&this.isConnected&&(document.addEventListener("click",this.#n),document.addEventListener("keydown",this.#o))}#n;#o}r([n.attr],a.prototype,"headline");r([n.attr({mode:"boolean"})],a.prototype,"alternate");r([n.attr({mode:"fromView"})],a.prototype,"placement");r([n.attr({mode:"boolean"})],a.prototype,"open");const y=s=>v.classNames("control"),k=s=>{const e=s.tagFor(p.Popup),i=d.anchorSlotTemplateFactory();return n.html`
|
|
2
2
|
${i}
|
|
3
3
|
<${e}
|
|
4
4
|
@keydown="${(t,{event:o})=>!(t.open&&g.handleEscapeKeyAndStopPropogation(o))}"
|
package/bundled/definition17.js
CHANGED
|
@@ -19,6 +19,7 @@ class s extends y(v(m)) {
|
|
|
19
19
|
const i = !this.contains(e.target), t = this._anchorEl?.contains(e.target);
|
|
20
20
|
(i || t) && (this.open = !1);
|
|
21
21
|
}, this.#n = (e) => {
|
|
22
|
+
/* v8 ignore else -- @preserve */
|
|
22
23
|
e.key === "Escape" && (this.open = !1);
|
|
23
24
|
};
|
|
24
25
|
}
|
|
@@ -45,7 +46,9 @@ class s extends y(v(m)) {
|
|
|
45
46
|
e.setAttribute("aria-expanded", this.open.toString()), e.setAttribute("data-expanded", this.open.toString());
|
|
46
47
|
}
|
|
47
48
|
#r(e) {
|
|
48
|
-
e.removeEventListener("click", this.#t, !0), e.
|
|
49
|
+
e.removeEventListener("click", this.#t, !0), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded");
|
|
50
|
+
/* v8 ignore else -- @preserve */
|
|
51
|
+
e.ariaLabel && (e.ariaLabel = this.#e);
|
|
49
52
|
}
|
|
50
53
|
#t;
|
|
51
54
|
#i() {
|
package/bundled/definition18.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const r=require("./vivid-element.cjs"),v=require("./form-associated.cjs"),p=require("./with-error-text.cjs"),h=require("./form-element.cjs"),u=require("./key-codes.cjs"),b=require("./when.cjs"),m=require("./class-names.cjs"),f=':host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.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(--vvd-color-neutral-500)}@media (hover: hover){.base: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(--vvd-color-neutral-700)}}.base.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(--vvd-color-neutral-700)}.base: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.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)}@media (hover: hover){.base:checked: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.checked.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: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.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.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@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-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';var y=Object.defineProperty,l=(a,e,o,i)=>{for(var t=void 0,c=a.length-1,s;c>=0;c--)(s=a[c])&&(t=s(e,o,t)||t);return t&&y(e,o,t),t};class n extends p.WithErrorText(h.FormElement(v.CheckableFormAssociated(r.VividElement))){constructor(){super(),this.initialValue="on",this.defaultSlottedNodes=[],this.keypressHandler=e=>{switch(e.key){case u.keySpace:!this.checked&&!this.readOnly&&(this.checked=!0);return}return!0},this.proxy=document.createElement("input"),this.#o=()=>{const e=this.#e,o=this.#a;e&&e.length>1&&e.some(t=>t.checked)&&(this.setValidity({valueMissing:!1}),this.errorValidationMessage="",o&&(o.errorValidationMessage=""))},this.#r=()=>{if(this.elementInternals&&!this.validity.valueMissing){const e=this.#e,o=this.#a;e&&e.length>1&&e.forEach(i=>{i.elementInternals.setValidity({valueMissing:!1}),i.errorValidationMessage="",o&&(o.errorValidationMessage="")})}},this.proxy.setAttribute("type","radio"),this.proxy.setAttribute("name",this.name),this.checked=this.defaultChecked,this.dirtyChecked=!1}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}defaultCheckedChanged(){this.$fastController.isConnected&&!this.dirtyChecked
|
|
1
|
+
"use strict";const r=require("./vivid-element.cjs"),v=require("./form-associated.cjs"),p=require("./with-error-text.cjs"),h=require("./form-element.cjs"),u=require("./key-codes.cjs"),b=require("./when.cjs"),m=require("./class-names.cjs"),f=':host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.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(--vvd-color-neutral-500)}@media (hover: hover){.base: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(--vvd-color-neutral-700)}}.base.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(--vvd-color-neutral-700)}.base: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.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)}@media (hover: hover){.base:checked: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.checked.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: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.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.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@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-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';var y=Object.defineProperty,l=(a,e,o,i)=>{for(var t=void 0,c=a.length-1,s;c>=0;c--)(s=a[c])&&(t=s(e,o,t)||t);return t&&y(e,o,t),t};class n extends p.WithErrorText(h.FormElement(v.CheckableFormAssociated(r.VividElement))){constructor(){super(),this.initialValue="on",this.defaultSlottedNodes=[],this.keypressHandler=e=>{switch(e.key){case u.keySpace:!this.checked&&!this.readOnly&&(this.checked=!0);return}return!0},this.proxy=document.createElement("input"),this.#o=()=>{const e=this.#e,o=this.#a;e&&e.length>1&&e.some(t=>t.checked)&&(this.setValidity({valueMissing:!1}),this.errorValidationMessage="",o&&(o.errorValidationMessage=""))},this.#r=()=>{if(this.elementInternals&&!this.validity.valueMissing){const e=this.#e,o=this.#a;e&&e.length>1&&e.forEach(i=>{i.elementInternals.setValidity({valueMissing:!1}),i.errorValidationMessage="",o&&(o.errorValidationMessage="")})}},this.proxy.setAttribute("type","radio"),this.proxy.setAttribute("name",this.name),this.checked=this.defaultChecked,this.dirtyChecked=!1}readOnlyChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}defaultCheckedChanged(){if(this.$fastController.isConnected&&!this.dirtyChecked){/* v8 ignore else -- @preserve */this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1)}}nameChanged(e,o){super.nameChanged(e,o),o!==null?this.proxy.setAttribute("name",this.name):this.proxy.removeAttribute("name"),r.Updates.enqueue(this.validate)}connectedCallback(){if(super.connectedCallback(),r.Updates.enqueue(this.validate),this.parentElement.getAttribute("data-vvd-component")!=="radio-group"&&this.getAttribute("tabindex")===null){/* v8 ignore else -- @preserve */this.disabled||this.setAttribute("tabindex","0")}if(this.defaultChecked){/* v8 ignore else -- @preserve */this.dirtyChecked||this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1)}}isInsideRadioGroup(){return this.closest('[data-vvd-component="radio-group"]')!==null}clickHandler(e){!this.disabled&&!this.readOnly&&!this.checked&&(this.checked=!0)}get#e(){const e=this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);return e?Array.from(e):[]}get#a(){const e=this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);return e||null}#o;#r;validate(e){super.validate(e),this.proxy&&(this.errorValidationMessage=this.validationMessage||"",this.validity.valueMissing?this.#o():this.#r())}}l([r.attr],n.prototype,"connotation");l([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");l([r.observable],n.prototype,"defaultSlottedNodes");const _=({connotation:a,checked:e,readOnly:o,disabled:i})=>m.classNames("base",[`connotation-${a}`,!!a],["checked",!!e],["readonly",!!o],["disabled",!!i]),k=r.html`<template
|
|
2
2
|
aria-checked="${a=>a?.checked}"
|
|
3
3
|
aria-disabled="${a=>a?.disabled}"
|
|
4
4
|
aria-required="${a=>a?.required}"
|
package/bundled/definition18.js
CHANGED
|
@@ -3,9 +3,9 @@ import { C as b } from "./form-associated.js";
|
|
|
3
3
|
import { W as f } from "./with-error-text.js";
|
|
4
4
|
import { F as y } from "./form-element.js";
|
|
5
5
|
import { l as _ } from "./key-codes.js";
|
|
6
|
-
import { w as
|
|
7
|
-
import { c as
|
|
8
|
-
const g = ':host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.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(--vvd-color-neutral-500)}@media (hover: hover){.base: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(--vvd-color-neutral-700)}}.base.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(--vvd-color-neutral-700)}.base: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.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)}@media (hover: hover){.base:checked: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.checked.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: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.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.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@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-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';
|
|
6
|
+
import { w as k } from "./when.js";
|
|
7
|
+
import { c as x } from "./class-names.js";
|
|
8
|
+
const g = ':host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.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(--vvd-color-neutral-500)}@media (hover: hover){.base: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(--vvd-color-neutral-700)}}.base.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(--vvd-color-neutral-700)}.base: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.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)}@media (hover: hover){.base:checked: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.checked.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: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.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.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@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-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';
|
|
9
9
|
var C = Object.defineProperty, c = (a, e, o, t) => {
|
|
10
10
|
for (var r = void 0, n = a.length - 1, l; n >= 0; n--)
|
|
11
11
|
(l = a[n]) && (r = l(e, o, r) || r);
|
|
@@ -39,13 +39,17 @@ class i extends f(
|
|
|
39
39
|
* @internal
|
|
40
40
|
*/
|
|
41
41
|
readOnlyChanged() {
|
|
42
|
+
/* v8 ignore if -- @preserve */
|
|
42
43
|
this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
|
|
43
44
|
}
|
|
44
45
|
/**
|
|
45
46
|
* @internal
|
|
46
47
|
*/
|
|
47
48
|
defaultCheckedChanged() {
|
|
48
|
-
this.$fastController.isConnected && !this.dirtyChecked
|
|
49
|
+
if (this.$fastController.isConnected && !this.dirtyChecked) {
|
|
50
|
+
/* v8 ignore else -- @preserve */
|
|
51
|
+
this.isInsideRadioGroup() || (this.checked = this.defaultChecked, this.dirtyChecked = !1);
|
|
52
|
+
}
|
|
49
53
|
}
|
|
50
54
|
/**
|
|
51
55
|
* @internal
|
|
@@ -57,7 +61,14 @@ class i extends f(
|
|
|
57
61
|
* @internal
|
|
58
62
|
*/
|
|
59
63
|
connectedCallback() {
|
|
60
|
-
super.connectedCallback(), s.enqueue(this.validate), this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null
|
|
64
|
+
if (super.connectedCallback(), s.enqueue(this.validate), this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
|
|
65
|
+
/* v8 ignore else -- @preserve */
|
|
66
|
+
this.disabled || this.setAttribute("tabindex", "0");
|
|
67
|
+
}
|
|
68
|
+
if (this.defaultChecked) {
|
|
69
|
+
/* v8 ignore else -- @preserve */
|
|
70
|
+
this.dirtyChecked || this.isInsideRadioGroup() || (this.checked = this.defaultChecked, this.dirtyChecked = !1);
|
|
71
|
+
}
|
|
61
72
|
}
|
|
62
73
|
isInsideRadioGroup() {
|
|
63
74
|
return this.closest(
|
|
@@ -100,7 +111,7 @@ c([
|
|
|
100
111
|
c([
|
|
101
112
|
h
|
|
102
113
|
], i.prototype, "defaultSlottedNodes");
|
|
103
|
-
const w = ({ connotation: a, checked: e, readOnly: o, disabled: t }) =>
|
|
114
|
+
const w = ({ connotation: a, checked: e, readOnly: o, disabled: t }) => x(
|
|
104
115
|
"base",
|
|
105
116
|
[`connotation-${a}`, !!a],
|
|
106
117
|
["checked", !!e],
|
|
@@ -116,7 +127,7 @@ const w = ({ connotation: a, checked: e, readOnly: o, disabled: t }) => k(
|
|
|
116
127
|
>
|
|
117
128
|
<div class="${w}">
|
|
118
129
|
<div class="control"></div>
|
|
119
|
-
${
|
|
130
|
+
${k(
|
|
120
131
|
(a) => a?.label,
|
|
121
132
|
d`<label class="label">${(a) => a?.label}</label>`
|
|
122
133
|
)}
|