@vonage/vivid 3.43.0 → 3.45.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/README.md +399 -165
- package/appearance-ui/index.js +94 -0
- package/custom-elements.json +793 -352
- package/index.js +3 -2
- package/lib/alert/alert.d.ts +2 -0
- package/lib/appearance-ui/appearance-ui.d.ts +12 -0
- package/lib/appearance-ui/appearance-ui.template.d.ts +4 -0
- package/lib/appearance-ui/definition.d.ts +3 -0
- package/lib/data-grid/data-grid-cell.d.ts +1 -0
- package/lib/data-grid/data-grid.d.ts +2 -0
- package/lib/dialog/dialog.d.ts +1 -4
- package/lib/enums.d.ts +3 -0
- package/lib/menu/menu.d.ts +6 -5
- package/lib/menu-item/definition.d.ts +1 -0
- package/lib/popup/popup.d.ts +2 -2
- package/lib/select/select.d.ts +0 -3
- package/lib/tabs/tabs.d.ts +3 -1
- package/lib/toggletip/toggletip.d.ts +4 -4
- package/lib/tooltip/tooltip.d.ts +4 -5
- package/listbox/index.js +1 -1
- package/menu/index.js +1 -0
- package/menu-item/index.js +1 -0
- package/package.json +1 -1
- package/shared/anchored.js +76 -0
- package/shared/definition.js +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition12.js +1 -1
- package/shared/definition13.js +1 -1
- package/shared/definition14.js +1 -1
- package/shared/definition15.js +1 -1
- package/shared/definition16.js +1 -1
- package/shared/definition17.js +96 -44
- package/shared/definition2.js +1 -1
- package/shared/definition20.js +16 -2
- package/shared/definition21.js +1 -1
- package/shared/definition22.js +1 -1
- package/shared/definition23.js +1 -1
- package/shared/definition24.js +1 -1
- package/shared/definition25.js +1 -1
- package/shared/definition28.js +42 -47
- package/shared/definition29.js +12 -4
- package/shared/definition3.js +1 -1
- package/shared/definition30.js +1 -1
- package/shared/definition31.js +1 -1
- package/shared/definition33.js +1 -1
- package/shared/definition34.js +3 -3
- package/shared/definition35.js +1 -1
- package/shared/definition36.js +1 -1
- package/shared/definition37.js +1 -1
- package/shared/definition38.js +1 -1
- package/shared/definition39.js +1 -1
- package/shared/definition4.js +10 -6
- package/shared/definition40.js +1 -1
- package/shared/definition41.js +6 -4
- package/shared/definition42.js +1 -1
- package/shared/definition43.js +1 -1
- package/shared/definition44.js +1 -1
- package/shared/definition45.js +10 -6
- package/shared/definition46.js +1 -1
- package/shared/definition48.js +1 -1
- package/shared/definition49.js +8 -3
- package/shared/definition5.js +1 -1
- package/shared/definition51.js +1 -1
- package/shared/definition52.js +3 -3
- package/shared/definition53.js +2 -2
- package/shared/definition54.js +37 -45
- package/shared/definition55.js +42 -58
- package/shared/definition56.js +1 -1
- package/shared/definition58.js +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition60.js +108 -12
- package/shared/definition7.js +1 -1
- package/shared/definition8.js +2 -3
- package/shared/definition9.js +1 -1
- package/shared/enums.js +5 -1
- package/shared/form-associated.js +1 -0
- package/shared/index2.js +1 -1
- package/shared/patterns/anchored.d.ts +22 -0
- package/shared/presentationDate.js +2 -2
- package/shared/text-field.js +1 -1
- package/style.css +835 -144
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/toggletip/index.js +1 -0
- package/tooltip/index.js +1 -0
- package/vivid.api.json +61 -0
package/shared/definition55.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { P as Popup, p as popupRegistries } from './definition60.js';
|
|
3
|
+
import { a as anchored } from './anchored.js';
|
|
3
4
|
import { c as classNames } from './class-names.js';
|
|
4
5
|
|
|
5
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Mon,
|
|
6
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.control {\n pointer-events: none;\n}\n\n.tooltip {\n width: var(--tooltip-inline-size, auto);\n}\n.tooltip-text {\n padding: 8px 12px;\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base-bold);\n}";
|
|
6
7
|
|
|
7
8
|
var __defProp = Object.defineProperty;
|
|
8
9
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -15,23 +16,10 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
15
16
|
__defProp(target, key, result);
|
|
16
17
|
return result;
|
|
17
18
|
};
|
|
18
|
-
|
|
19
|
+
let Tooltip = class extends FoundationElement {
|
|
19
20
|
constructor() {
|
|
20
21
|
super(...arguments);
|
|
21
|
-
this.#anchorEl = null;
|
|
22
22
|
this.open = false;
|
|
23
|
-
this.#observeMissingAnchor = (anchorId) => {
|
|
24
|
-
this.#observer = new MutationObserver(() => {
|
|
25
|
-
const anchor = document.getElementById(anchorId);
|
|
26
|
-
if (anchor) {
|
|
27
|
-
this.#anchorEl = anchor;
|
|
28
|
-
this.#anchorUpdated();
|
|
29
|
-
this.#observer.disconnect();
|
|
30
|
-
this.#observer = void 0;
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
this.#observer.observe(document.body, { childList: true, subtree: true });
|
|
34
|
-
};
|
|
35
23
|
this.#show = () => {
|
|
36
24
|
this.open = true;
|
|
37
25
|
};
|
|
@@ -43,57 +31,53 @@ class Tooltip extends FoundationElement {
|
|
|
43
31
|
this.#hide();
|
|
44
32
|
};
|
|
45
33
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
if (this.#anchorEl)
|
|
50
|
-
this.#removeEventListener();
|
|
51
|
-
this.#observer?.disconnect();
|
|
52
|
-
this.#anchorEl = newValue instanceof HTMLElement ? newValue : document.getElementById(newValue);
|
|
53
|
-
if (this.#anchorEl) {
|
|
54
|
-
this.#anchorUpdated();
|
|
55
|
-
} else {
|
|
56
|
-
this.#observeMissingAnchor(newValue);
|
|
57
|
-
}
|
|
34
|
+
connectedCallback() {
|
|
35
|
+
super.connectedCallback();
|
|
36
|
+
this.#updateListeners();
|
|
58
37
|
}
|
|
59
|
-
#observeMissingAnchor;
|
|
60
38
|
disconnectedCallback() {
|
|
61
39
|
super.disconnectedCallback();
|
|
62
|
-
this.#
|
|
63
|
-
this.#observer?.disconnect();
|
|
64
|
-
document.removeEventListener("keydown", this.#closeOnEscape);
|
|
40
|
+
this.#updateListeners();
|
|
65
41
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
42
|
+
/**
|
|
43
|
+
* @internal
|
|
44
|
+
*/
|
|
45
|
+
_anchorElChanged(oldValue, newValue) {
|
|
46
|
+
if (oldValue)
|
|
47
|
+
this.#cleanupAnchor(oldValue);
|
|
48
|
+
if (newValue)
|
|
49
|
+
this.#setupAnchor(newValue);
|
|
69
50
|
}
|
|
70
|
-
#
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
this.#anchorEl.addEventListener("focusout", this.#hide);
|
|
76
|
-
}
|
|
51
|
+
#setupAnchor(a) {
|
|
52
|
+
a.addEventListener("mouseover", this.#show);
|
|
53
|
+
a.addEventListener("mouseout", this.#hide);
|
|
54
|
+
a.addEventListener("focusin", this.#show);
|
|
55
|
+
a.addEventListener("focusout", this.#hide);
|
|
77
56
|
}
|
|
78
|
-
#
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
57
|
+
#cleanupAnchor(a) {
|
|
58
|
+
a.removeEventListener("mouseover", this.#show);
|
|
59
|
+
a.removeEventListener("mouseout", this.#hide);
|
|
60
|
+
a.removeEventListener("focusin", this.#show);
|
|
61
|
+
a.removeEventListener("focusout", this.#hide);
|
|
83
62
|
}
|
|
84
63
|
#show;
|
|
85
64
|
#hide;
|
|
86
|
-
#
|
|
87
|
-
|
|
88
|
-
if (
|
|
89
|
-
return;
|
|
90
|
-
if (newValue) {
|
|
65
|
+
#updateListeners() {
|
|
66
|
+
document.removeEventListener("keydown", this.#closeOnEscape);
|
|
67
|
+
if (this.open && this.isConnected) {
|
|
91
68
|
document.addEventListener("keydown", this.#closeOnEscape);
|
|
92
|
-
} else {
|
|
93
|
-
document.removeEventListener("keydown", this.#closeOnEscape);
|
|
94
69
|
}
|
|
95
70
|
}
|
|
96
|
-
|
|
71
|
+
#closeOnEscape;
|
|
72
|
+
/**
|
|
73
|
+
* @internal
|
|
74
|
+
*/
|
|
75
|
+
openChanged(oldValue) {
|
|
76
|
+
if (oldValue === void 0)
|
|
77
|
+
return;
|
|
78
|
+
this.#updateListeners();
|
|
79
|
+
}
|
|
80
|
+
};
|
|
97
81
|
__decorateClass([
|
|
98
82
|
attr
|
|
99
83
|
], Tooltip.prototype, "text", 2);
|
|
@@ -103,9 +87,9 @@ __decorateClass([
|
|
|
103
87
|
__decorateClass([
|
|
104
88
|
attr({ mode: "boolean" })
|
|
105
89
|
], Tooltip.prototype, "open", 2);
|
|
106
|
-
__decorateClass([
|
|
107
|
-
|
|
108
|
-
], Tooltip
|
|
90
|
+
Tooltip = __decorateClass([
|
|
91
|
+
anchored
|
|
92
|
+
], Tooltip);
|
|
109
93
|
|
|
110
94
|
const getClasses = ({
|
|
111
95
|
open
|
|
@@ -118,7 +102,7 @@ const TooltipTemplate = (context) => {
|
|
|
118
102
|
return html`
|
|
119
103
|
<${popupTag} class="${getClasses}" arrow alternate
|
|
120
104
|
:placement=${(x) => x.placement}
|
|
121
|
-
:anchor="${(x) => x.
|
|
105
|
+
:anchor="${(x) => x._anchorEl}"
|
|
122
106
|
:open=${(x) => x.open}
|
|
123
107
|
exportparts="vvd-theme-alternate">
|
|
124
108
|
<div class="tooltip" role="tooltip">
|
package/shared/definition56.js
CHANGED
|
@@ -12,7 +12,7 @@ import { w as when } from './when.js';
|
|
|
12
12
|
import { c as classNames } from './class-names.js';
|
|
13
13
|
import { r as ref } from './ref.js';
|
|
14
14
|
|
|
15
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Mon,
|
|
15
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n@supports selector(:focus-visible) {\n :host(:focus-visible) {\n outline: none;\n }\n}\n:host([disabled]) {\n cursor: not-allowed;\n}\n\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n border-radius: 6px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n font: var(--vvd-typography-base);\n gap: 12px;\n hyphens: auto;\n inline-size: 100%;\n min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n padding-inline: 16px;\n text-decoration: none;\n vertical-align: middle;\n word-break: break-word;\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transparent;\n}\n.control {\n /* @cssprop [--vvd-tree-item-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-tree-item-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-tree-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-tree-item-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-tree-item-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n .control:focus-visible {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .control {\n user-select: none;\n }\n}\n.control:not(.disabled) {\n cursor: pointer;\n}\n.control.disabled {\n pointer-events: none;\n}\n.control .text {\n font: var(--vvd-typography-base);\n}\n\n.expandCollapseButton {\n display: flex;\n align-items: center;\n border-radius: 6px;\n font-size: 20px;\n}\n.expandCollapseButton .expandCollapseIcon {\n margin: 4px;\n}\n.expandCollapseButton:hover {\n background-color: var(--vvd-color-neutral-100);\n}\n.selected .expandCollapseButton:hover {\n background-color: var(--vvd-color-neutral-700);\n}\n\n.items {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-block: 4px;\n padding-inline-start: 48px;\n}\n\n:host(:not(:focus-visible)) .focus-indicator {\n display: none;\n}\n\nslot[name=icon] {\n font-size: 20px;\n line-height: 1;\n}\n.control:not(.disabled, .selected) slot[name=icon] {\n color: var(--vvd-color-neutral-600);\n}";
|
|
16
16
|
|
|
17
17
|
var __defProp = Object.defineProperty;
|
|
18
18
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition58.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { F as Focus } from './focus.js';
|
|
3
3
|
|
|
4
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Mon,
|
|
4
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n display: contents;\n border-radius: inherit;\n}\n\n.control {\n position: absolute;\n z-index: 1;\n box-sizing: border-box;\n border-radius: inherit;\n box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n inset: var(--focus-inset, 0);\n outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n outline-offset: -2px;\n}";
|
|
5
5
|
|
|
6
6
|
const focusTemplate = () => html`
|
|
7
7
|
<span class="control"></span>`;
|
package/shared/definition6.js
CHANGED
|
@@ -4,7 +4,7 @@ import { I as Icon } from './icon.js';
|
|
|
4
4
|
import { w as when } from './when.js';
|
|
5
5
|
import { c as classNames } from './class-names.js';
|
|
6
6
|
|
|
7
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Mon,
|
|
7
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.base {\n display: inline-flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_size);\n border-radius: var(--_avatar-border-radius);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n inline-size: var(--_size);\n vertical-align: middle;\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-avatar-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-avatar-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-avatar-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-avatar-cta-fierce=var(--vvd-color-cta-700)] */\n --_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));\n /* @cssprop [--vvd-avatar-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-avatar-cta-soft=var(--vvd-color-cta-100)] */\n --_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));\n /* @cssprop [--vvd-avatar-cta-contrast=var(--vvd-color-cta-800)] */\n --_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800));\n}\n.base:not(.connotation-cta) {\n /* @cssprop [--vvd-avatar-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-avatar-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-avatar-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-avatar-accent-fierce=var(--vvd-color-neutral-700)] */\n --_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));\n /* @cssprop [--vvd-avatar-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-avatar-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));\n /* @cssprop [--vvd-avatar-accent-contrast=var(--vvd-color-neutral-800)] */\n --_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800));\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.base.appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.base.size-condensed {\n --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size-condensed .initials {\n font: var(--vvd-typography-base-condensed-bold);\n}\n.base.size-condensed .icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n line-height: 1;\n}\n.base.size-expanded {\n --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-expanded .initials {\n font: var(--vvd-typography-heading-4);\n}\n.base.size-expanded .icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) / 2);\n line-height: 1;\n}\n.base:not(.size-condensed, .size-expanded) {\n --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.size-condensed, .size-expanded) .initials {\n font: var(--vvd-typography-base-extended-bold);\n}\n.base:not(.size-condensed, .size-expanded) .icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n line-height: 1;\n}\n.base:not(.shape-pill) {\n --_avatar-border-radius: 6px;\n}\n.base:not(.shape-pill).size-condensed {\n --_avatar-border-radius: 4px;\n}\n.base.shape-pill {\n --_avatar-border-radius: 50%;\n}\n.base .initials {\n text-transform: uppercase;\n}\n.base ::slotted(*) {\n block-size: 100%;\n inline-size: 100%;\n object-fit: cover;\n}";
|
|
8
8
|
|
|
9
9
|
var __defProp = Object.defineProperty;
|
|
10
10
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition60.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
|
|
1
|
+
import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { B as Button, a as buttonRegistries } from './definition11.js';
|
|
3
3
|
import { E as Elevation, e as elevationRegistries } from './definition59.js';
|
|
4
4
|
import { r as ref } from './ref.js';
|
|
@@ -818,6 +818,88 @@ const offset = function (options) {
|
|
|
818
818
|
};
|
|
819
819
|
};
|
|
820
820
|
|
|
821
|
+
/**
|
|
822
|
+
* Provides data that allows you to change the size of the floating element —
|
|
823
|
+
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
824
|
+
* width of the reference element.
|
|
825
|
+
* @see https://floating-ui.com/docs/size
|
|
826
|
+
*/
|
|
827
|
+
const size = function (options) {
|
|
828
|
+
if (options === void 0) {
|
|
829
|
+
options = {};
|
|
830
|
+
}
|
|
831
|
+
return {
|
|
832
|
+
name: 'size',
|
|
833
|
+
options,
|
|
834
|
+
async fn(state) {
|
|
835
|
+
const {
|
|
836
|
+
placement,
|
|
837
|
+
rects,
|
|
838
|
+
platform,
|
|
839
|
+
elements
|
|
840
|
+
} = state;
|
|
841
|
+
const {
|
|
842
|
+
apply = () => {},
|
|
843
|
+
...detectOverflowOptions
|
|
844
|
+
} = evaluate(options, state);
|
|
845
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
846
|
+
const side = getSide(placement);
|
|
847
|
+
const alignment = getAlignment(placement);
|
|
848
|
+
const isYAxis = getSideAxis(placement) === 'y';
|
|
849
|
+
const {
|
|
850
|
+
width,
|
|
851
|
+
height
|
|
852
|
+
} = rects.floating;
|
|
853
|
+
let heightSide;
|
|
854
|
+
let widthSide;
|
|
855
|
+
if (side === 'top' || side === 'bottom') {
|
|
856
|
+
heightSide = side;
|
|
857
|
+
widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
|
|
858
|
+
} else {
|
|
859
|
+
widthSide = side;
|
|
860
|
+
heightSide = alignment === 'end' ? 'top' : 'bottom';
|
|
861
|
+
}
|
|
862
|
+
const overflowAvailableHeight = height - overflow[heightSide];
|
|
863
|
+
const overflowAvailableWidth = width - overflow[widthSide];
|
|
864
|
+
const noShift = !state.middlewareData.shift;
|
|
865
|
+
let availableHeight = overflowAvailableHeight;
|
|
866
|
+
let availableWidth = overflowAvailableWidth;
|
|
867
|
+
if (isYAxis) {
|
|
868
|
+
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
869
|
+
availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
|
|
870
|
+
} else {
|
|
871
|
+
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
872
|
+
availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
|
|
873
|
+
}
|
|
874
|
+
if (noShift && !alignment) {
|
|
875
|
+
const xMin = max(overflow.left, 0);
|
|
876
|
+
const xMax = max(overflow.right, 0);
|
|
877
|
+
const yMin = max(overflow.top, 0);
|
|
878
|
+
const yMax = max(overflow.bottom, 0);
|
|
879
|
+
if (isYAxis) {
|
|
880
|
+
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
881
|
+
} else {
|
|
882
|
+
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
883
|
+
}
|
|
884
|
+
}
|
|
885
|
+
await apply({
|
|
886
|
+
...state,
|
|
887
|
+
availableWidth,
|
|
888
|
+
availableHeight
|
|
889
|
+
});
|
|
890
|
+
const nextDimensions = await platform.getDimensions(elements.floating);
|
|
891
|
+
if (width !== nextDimensions.width || height !== nextDimensions.height) {
|
|
892
|
+
return {
|
|
893
|
+
reset: {
|
|
894
|
+
rects: true
|
|
895
|
+
}
|
|
896
|
+
};
|
|
897
|
+
}
|
|
898
|
+
return {};
|
|
899
|
+
}
|
|
900
|
+
};
|
|
901
|
+
};
|
|
902
|
+
|
|
821
903
|
function getNodeName(node) {
|
|
822
904
|
if (isNode(node)) {
|
|
823
905
|
return (node.nodeName || '').toLowerCase();
|
|
@@ -1559,7 +1641,14 @@ class Popup extends FoundationElement {
|
|
|
1559
1641
|
this.strategy = "fixed";
|
|
1560
1642
|
}
|
|
1561
1643
|
get #middleware() {
|
|
1562
|
-
let middleware = [inline(), flip(), hide()
|
|
1644
|
+
let middleware = [inline(), flip(), hide(), size({
|
|
1645
|
+
apply({ availableWidth, availableHeight, elements }) {
|
|
1646
|
+
Object.assign(elements.floating.style, {
|
|
1647
|
+
maxWidth: `${availableWidth}px`,
|
|
1648
|
+
maxHeight: `${availableHeight}px`
|
|
1649
|
+
});
|
|
1650
|
+
}
|
|
1651
|
+
})];
|
|
1563
1652
|
if (this.arrow) {
|
|
1564
1653
|
middleware = [offset(12), ...middleware, arrow({ element: this.arrowEl, padding: 10 })];
|
|
1565
1654
|
}
|
|
@@ -1568,15 +1657,25 @@ class Popup extends FoundationElement {
|
|
|
1568
1657
|
#cleanup;
|
|
1569
1658
|
openChanged(_, newValue) {
|
|
1570
1659
|
newValue ? this.$emit("vwc-popup:open") : this.$emit("vwc-popup:close");
|
|
1660
|
+
this.#updateAutoUpdate();
|
|
1661
|
+
}
|
|
1662
|
+
/**
|
|
1663
|
+
* @internal
|
|
1664
|
+
*/
|
|
1665
|
+
anchorChanged() {
|
|
1666
|
+
this.#updateAutoUpdate();
|
|
1667
|
+
}
|
|
1668
|
+
connectedCallback() {
|
|
1669
|
+
super.connectedCallback();
|
|
1670
|
+
this.#updateAutoUpdate();
|
|
1571
1671
|
}
|
|
1572
1672
|
disconnectedCallback() {
|
|
1573
1673
|
super.disconnectedCallback();
|
|
1574
|
-
this.#
|
|
1674
|
+
this.#updateAutoUpdate();
|
|
1575
1675
|
}
|
|
1576
|
-
|
|
1577
|
-
super.attributeChangedCallback(name, oldValue, newValue);
|
|
1676
|
+
#updateAutoUpdate() {
|
|
1578
1677
|
this.#cleanup?.();
|
|
1579
|
-
if (this.anchorEl && this.popupEl) {
|
|
1678
|
+
if (this.anchorEl && this.open && this.popupEl) {
|
|
1580
1679
|
this.#cleanup = autoUpdate(this.anchorEl, this.popupEl, () => this.updatePosition());
|
|
1581
1680
|
}
|
|
1582
1681
|
}
|
|
@@ -1622,11 +1721,8 @@ class Popup extends FoundationElement {
|
|
|
1622
1721
|
top: arrowY ? `${arrowY}px` : styles[staticAxis]
|
|
1623
1722
|
});
|
|
1624
1723
|
}
|
|
1625
|
-
/**
|
|
1626
|
-
* Gets the anchor element by id
|
|
1627
|
-
*/
|
|
1628
1724
|
get anchorEl() {
|
|
1629
|
-
return this.anchor
|
|
1725
|
+
return this.anchor ?? null;
|
|
1630
1726
|
}
|
|
1631
1727
|
show() {
|
|
1632
1728
|
this.open = true;
|
|
@@ -1662,10 +1758,10 @@ __decorateClass([
|
|
|
1662
1758
|
attr({ mode: "fromView" })
|
|
1663
1759
|
], Popup.prototype, "strategy", 2);
|
|
1664
1760
|
__decorateClass([
|
|
1665
|
-
|
|
1761
|
+
observable
|
|
1666
1762
|
], Popup.prototype, "anchor", 2);
|
|
1667
1763
|
|
|
1668
|
-
const styles = ".control {\n background: var(--vvd-color-surface-4dp);\n border-radius: inherit;\n contain: layout;\n}\n.control:not(.open) {\n display: none;\n}\n\n.popup-wrapper {\n z-index: 10;\n border-radius: 6px;\n inline-size:
|
|
1764
|
+
const styles = ".control {\n background: var(--vvd-color-surface-4dp);\n border-radius: inherit;\n contain: layout;\n}\n.control:not(.open) {\n display: none;\n}\n\n.popup-wrapper {\n z-index: 10;\n border-radius: 6px;\n inline-size: max-content;\n}\n.popup-wrapper:not(.absolute) {\n position: fixed;\n}\n.popup-wrapper.absolute {\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.popup-content {\n display: grid;\n color: var(--vvd-color-canvas-text); /* neutral-100 */\n}\n.dismissible .popup-content {\n align-content: start;\n grid-template-columns: 1fr auto;\n}\n\n.arrow {\n position: absolute;\n z-index: -1;\n width: 8px;\n height: 8px;\n background: var(--vvd-color-surface-4dp);\n transform: rotate(45deg);\n}\n\n.dismissible-button {\n align-self: flex-start;\n margin-block-start: 4px;\n margin-inline-end: 4px;\n}";
|
|
1669
1765
|
|
|
1670
1766
|
const getClasses = ({
|
|
1671
1767
|
open,
|
package/shared/definition7.js
CHANGED
|
@@ -32,7 +32,7 @@ __decorateClass([
|
|
|
32
32
|
], Badge.prototype, "text", 2);
|
|
33
33
|
applyMixins(Badge, AffixIconWithTrailing);
|
|
34
34
|
|
|
35
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Mon, 11 Dec 2023 11:36:24 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_badge-block-size);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n column-gap: 8px;\n font: var(--vvd-typography-base-condensed-bold);\n inline-size: 100%;\n padding-inline: 8px;\n vertical-align: middle;\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-badge-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-badge-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-cta-intermediate=var(--vvd-color-cta-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-badge-cta-soft=var(--vvd-color-cta-100)] */\n --_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));\n /* @cssprop [--vvd-badge-cta-contrast=var(--vvd-color-cta-800)] */\n --_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));\n /* @cssprop [--vvd-badge-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-badge-cta-fierce=var(--vvd-color-cta-700)] */\n --_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));\n /* @cssprop [--vvd-badge-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));\n}\n.base.connotation-success {\n /* @cssprop [--vvd-badge-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-badge-success-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-success-intermediate=var(--vvd-color-success-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));\n /* @cssprop [--vvd-badge-success-soft=var(--vvd-color-success-100)] */\n --_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));\n /* @cssprop [--vvd-badge-success-contrast=var(--vvd-color-success-800)] */\n --_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));\n /* @cssprop [--vvd-badge-success-pale=var(--vvd-color-success-300)] */\n --_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));\n /* @cssprop [--vvd-badge-success-fierce=var(--vvd-color-success-700)] */\n --_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));\n /* @cssprop [--vvd-badge-success-firm=var(--vvd-color-success-600)] */\n --_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));\n}\n.base.connotation-alert {\n /* @cssprop [--vvd-badge-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-badge-alert-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-alert-intermediate=var(--vvd-color-alert-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-badge-alert-soft=var(--vvd-color-alert-100)] */\n --_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));\n /* @cssprop [--vvd-badge-alert-contrast=var(--vvd-color-alert-800)] */\n --_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));\n /* @cssprop [--vvd-badge-alert-pale=var(--vvd-color-alert-300)] */\n --_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));\n /* @cssprop [--vvd-badge-alert-fierce=var(--vvd-color-alert-700)] */\n --_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));\n /* @cssprop [--vvd-badge-alert-firm=var(--vvd-color-alert-600)] */\n --_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));\n}\n.base.connotation-warning {\n /* @cssprop [--vvd-badge-warning-primary=var(--vvd-color-warning-300)] */\n --_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-badge-warning-primary-text=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-badge-warning-intermediate=var(--vvd-color-warning-300)] */\n --_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-badge-warning-soft=var(--vvd-color-warning-100)] */\n --_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));\n /* @cssprop [--vvd-badge-warning-contrast=var(--vvd-color-warning-800)] */\n --_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));\n /* @cssprop [--vvd-badge-warning-pale=var(--vvd-color-warning-300)] */\n --_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-badge-warning-fierce=var(--vvd-color-warning-700)] */\n --_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));\n /* @cssprop [--vvd-badge-warning-firm=var(--vvd-color-warning-600)] */\n --_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));\n}\n.base.connotation-information {\n /* @cssprop [--vvd-badge-information-primary=var(--vvd-color-information-500)] */\n --_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));\n /* @cssprop [--vvd-badge-information-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-information-intermediate=var(--vvd-color-information-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));\n /* @cssprop [--vvd-badge-information-soft=var(--vvd-color-information-100)] */\n --_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));\n /* @cssprop [--vvd-badge-information-contrast=var(--vvd-color-information-800)] */\n --_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));\n /* @cssprop [--vvd-badge-information-pale=var(--vvd-color-information-300)] */\n --_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));\n /* @cssprop [--vvd-badge-information-fierce=var(--vvd-color-information-700)] */\n --_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));\n /* @cssprop [--vvd-badge-information-firm=var(--vvd-color-information-600)] */\n --_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n /* @cssprop [--vvd-badge-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-badge-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-badge-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));\n /* @cssprop [--vvd-badge-accent-contrast=var(--vvd-color-neutral-800)] */\n --_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-badge-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-badge-accent-fierce=var(--vvd-color-neutral-700)] */\n --_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));\n /* @cssprop [--vvd-badge-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.base.appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.base:not(.icon-only) {\n max-inline-size: 100%;\n}\n.base.icon-only {\n contain: size;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .base.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .base.icon-only {\n inline-size: var(--_badge-block-size);\n }\n}\n\n.text {\n overflow: hidden;\n max-inline-size: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n border-radius: 4px;\n}\n\n.base.shape-pill {\n border-radius: 14px;\n}\n\n/* Icon */\nslot[name=icon] {\n flex-shrink: 0;\n font-size: calc(var(--_badge-block-size) / 1.6667);\n line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n display: flex;\n order: 1;\n}";
|
|
35
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_badge-block-size);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n column-gap: 8px;\n font: var(--vvd-typography-base-condensed-bold);\n inline-size: 100%;\n padding-inline: 8px;\n vertical-align: middle;\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-badge-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-badge-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-cta-intermediate=var(--vvd-color-cta-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-badge-cta-soft=var(--vvd-color-cta-100)] */\n --_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));\n /* @cssprop [--vvd-badge-cta-contrast=var(--vvd-color-cta-800)] */\n --_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));\n /* @cssprop [--vvd-badge-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-badge-cta-fierce=var(--vvd-color-cta-700)] */\n --_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));\n /* @cssprop [--vvd-badge-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));\n}\n.base.connotation-success {\n /* @cssprop [--vvd-badge-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-badge-success-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-success-intermediate=var(--vvd-color-success-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));\n /* @cssprop [--vvd-badge-success-soft=var(--vvd-color-success-100)] */\n --_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));\n /* @cssprop [--vvd-badge-success-contrast=var(--vvd-color-success-800)] */\n --_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));\n /* @cssprop [--vvd-badge-success-pale=var(--vvd-color-success-300)] */\n --_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));\n /* @cssprop [--vvd-badge-success-fierce=var(--vvd-color-success-700)] */\n --_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));\n /* @cssprop [--vvd-badge-success-firm=var(--vvd-color-success-600)] */\n --_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));\n}\n.base.connotation-alert {\n /* @cssprop [--vvd-badge-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-badge-alert-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-alert-intermediate=var(--vvd-color-alert-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-badge-alert-soft=var(--vvd-color-alert-100)] */\n --_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));\n /* @cssprop [--vvd-badge-alert-contrast=var(--vvd-color-alert-800)] */\n --_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));\n /* @cssprop [--vvd-badge-alert-pale=var(--vvd-color-alert-300)] */\n --_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));\n /* @cssprop [--vvd-badge-alert-fierce=var(--vvd-color-alert-700)] */\n --_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));\n /* @cssprop [--vvd-badge-alert-firm=var(--vvd-color-alert-600)] */\n --_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));\n}\n.base.connotation-warning {\n /* @cssprop [--vvd-badge-warning-primary=var(--vvd-color-warning-300)] */\n --_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-badge-warning-primary-text=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-badge-warning-intermediate=var(--vvd-color-warning-300)] */\n --_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-badge-warning-soft=var(--vvd-color-warning-100)] */\n --_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));\n /* @cssprop [--vvd-badge-warning-contrast=var(--vvd-color-warning-800)] */\n --_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));\n /* @cssprop [--vvd-badge-warning-pale=var(--vvd-color-warning-300)] */\n --_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-badge-warning-fierce=var(--vvd-color-warning-700)] */\n --_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));\n /* @cssprop [--vvd-badge-warning-firm=var(--vvd-color-warning-600)] */\n --_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));\n}\n.base.connotation-information {\n /* @cssprop [--vvd-badge-information-primary=var(--vvd-color-information-500)] */\n --_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));\n /* @cssprop [--vvd-badge-information-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-information-intermediate=var(--vvd-color-information-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));\n /* @cssprop [--vvd-badge-information-soft=var(--vvd-color-information-100)] */\n --_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));\n /* @cssprop [--vvd-badge-information-contrast=var(--vvd-color-information-800)] */\n --_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));\n /* @cssprop [--vvd-badge-information-pale=var(--vvd-color-information-300)] */\n --_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));\n /* @cssprop [--vvd-badge-information-fierce=var(--vvd-color-information-700)] */\n --_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));\n /* @cssprop [--vvd-badge-information-firm=var(--vvd-color-information-600)] */\n --_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n /* @cssprop [--vvd-badge-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-badge-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-badge-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));\n /* @cssprop [--vvd-badge-accent-contrast=var(--vvd-color-neutral-800)] */\n --_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-badge-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-badge-accent-fierce=var(--vvd-color-neutral-700)] */\n --_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));\n /* @cssprop [--vvd-badge-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.base.appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.base:not(.icon-only) {\n max-inline-size: 100%;\n}\n.base.icon-only {\n contain: size;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .base.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .base.icon-only {\n inline-size: var(--_badge-block-size);\n }\n}\n\n.text {\n overflow: hidden;\n max-inline-size: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n border-radius: 4px;\n}\n\n.base.shape-pill {\n border-radius: 14px;\n}\n\n/* Icon */\nslot[name=icon] {\n flex-shrink: 0;\n font-size: calc(var(--_badge-block-size) / 1.6667);\n line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n display: flex;\n order: 1;\n}";
|
|
36
36
|
|
|
37
37
|
const getClasses = ({
|
|
38
38
|
connotation,
|
package/shared/definition8.js
CHANGED
|
@@ -10,7 +10,7 @@ import { s as slotted } from './slotted.js';
|
|
|
10
10
|
import { w as when } from './when.js';
|
|
11
11
|
import { c as classNames } from './class-names.js';
|
|
12
12
|
|
|
13
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Mon,
|
|
13
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n display: block;\n}\n\n.control {\n overflow: hidden;\n max-height: 160px;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n /* @cssprop [--vvd-banner-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-banner-success-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-alert {\n /* @cssprop [--vvd-banner-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-banner-alert-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-announcement {\n /* @cssprop [--vvd-banner-announcement-primary=var(--vvd-color-announcement-500)] */\n --_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));\n /* @cssprop [--vvd-banner-announcement-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-warning {\n /* @cssprop [--vvd-banner-warning-primary=var(--vvd-color-warning-300)] */\n --_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-banner-warning-primary-text=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n /* @cssprop [--vvd-banner-information-primary=var(--vvd-color-information-500)] */\n --_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));\n /* @cssprop [--vvd-banner-information-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas));\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.control.removing {\n max-height: 0;\n}\n\n.header {\n display: flex;\n min-height: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n align-items: center;\n font: var(--vvd-typography-base-bold);\n inline-size: 100%;\n}\n.header .content {\n display: flex;\n flex-grow: 1;\n align-items: center;\n justify-content: center;\n column-gap: 16px;\n inline-size: 100%;\n padding-inline: 16px;\n}\n.header .content slot[name=icon] {\n flex-shrink: 0;\n font-size: 20px;\n line-height: 1;\n}\n.header .content .action-items {\n flex-shrink: 0;\n}\n.header .dismiss-button {\n flex-shrink: 0;\n margin-inline-end: 8px;\n}";
|
|
14
14
|
|
|
15
15
|
var __defProp = Object.defineProperty;
|
|
16
16
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -119,8 +119,7 @@ const BannerTemplate = (context) => {
|
|
|
119
119
|
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
120
120
|
const buttonTag = context.tagFor(Button);
|
|
121
121
|
return html`
|
|
122
|
-
<div class="${getClasses}"
|
|
123
|
-
tabindex="${(x) => x.removable || x.actionItemsSlottedContent && x.actionItemsSlottedContent.length ? "0" : null}">
|
|
122
|
+
<div class="${getClasses}">
|
|
124
123
|
<header class="header">
|
|
125
124
|
<div class="content">
|
|
126
125
|
${(x) => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}
|
package/shared/definition9.js
CHANGED
|
@@ -7,7 +7,7 @@ import { I as Icon } from './icon.js';
|
|
|
7
7
|
import { w as when } from './when.js';
|
|
8
8
|
import { c as classNames } from './class-names.js';
|
|
9
9
|
|
|
10
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Mon,
|
|
10
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.base {\n display: flex;\n align-items: center;\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base);\n}\n.base .separator {\n margin: 0 16px;\n color: var(--vvd-color-neutral-600);\n font-size: 12px;\n}\n\n.control {\n position: relative;\n font: inherit;\n}\n@supports selector(:focus-visible) {\n .control:focus-visible {\n outline: none;\n }\n}\n.control:any-link {\n color: var(--vvd-color-cta-600);\n text-decoration: none;\n}\n.control:any-link:hover {\n text-decoration: underline;\n}\n\n.focus-indicator {\n --focus-inset: -4px -8px;\n --focus-stroke-gap-color: transparent;\n border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
|
|
11
11
|
|
|
12
12
|
var __defProp = Object.defineProperty;
|
|
13
13
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/enums.js
CHANGED
|
@@ -50,6 +50,10 @@ var LayoutSize = /* @__PURE__ */ ((LayoutSize2) => {
|
|
|
50
50
|
LayoutSize2["Large"] = "large";
|
|
51
51
|
return LayoutSize2;
|
|
52
52
|
})(LayoutSize || {});
|
|
53
|
+
var TabsSize = /* @__PURE__ */ ((TabsSize2) => {
|
|
54
|
+
TabsSize2["Small"] = "small";
|
|
55
|
+
return TabsSize2;
|
|
56
|
+
})(TabsSize || {});
|
|
53
57
|
var Position = /* @__PURE__ */ ((Position2) => {
|
|
54
58
|
Position2["Top"] = "TOP";
|
|
55
59
|
Position2["Bottom"] = "BOTTOM";
|
|
@@ -69,4 +73,4 @@ var AriaLive = /* @__PURE__ */ ((AriaLive2) => {
|
|
|
69
73
|
return AriaLive2;
|
|
70
74
|
})(AriaLive || {});
|
|
71
75
|
|
|
72
|
-
export { Appearance as A, Connotation as C, LayoutSize as L, Position as P, Role as R, Shape as S, ConnotationDecorative as a, Size as b, AriaLive as c };
|
|
76
|
+
export { Appearance as A, Connotation as C, LayoutSize as L, Position as P, Role as R, Shape as S, TabsSize as T, ConnotationDecorative as a, Size as b, AriaLive as c };
|
|
@@ -246,6 +246,7 @@ function FormAssociated(BaseCtor) {
|
|
|
246
246
|
* @internal
|
|
247
247
|
*/
|
|
248
248
|
disconnectedCallback() {
|
|
249
|
+
super.disconnectedCallback();
|
|
249
250
|
this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
|
|
250
251
|
if (!this.elementInternals && this.form) {
|
|
251
252
|
this.form.removeEventListener("reset", this.formResetCallback);
|
package/shared/index2.js
CHANGED
|
@@ -3,7 +3,7 @@ import { a as attr, o as observable, h as html } from './index.js';
|
|
|
3
3
|
import { w as when } from './when.js';
|
|
4
4
|
import enUS from '../locales/en-US.js';
|
|
5
5
|
|
|
6
|
-
const messageStyles = "/**\n * Do not edit directly\n * Generated on Mon,
|
|
6
|
+
const messageStyles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.message {\n display: flex;\n contain: inline-size;\n font: var(--vvd-typography-base-condensed);\n gap: 4px;\n grid-column: 1/-1;\n}\n.message-text {\n color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n color: var(--_low-ink-color);\n}\n.message-icon {\n font-size: 16px;\n}\n.success-message .message-icon {\n color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n color: var(--vvd-color-alert-500);\n}";
|
|
7
7
|
|
|
8
8
|
var __defProp$1 = Object.defineProperty;
|
|
9
9
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
type AnchorType = string | HTMLElement;
|
|
2
|
+
export interface Anchored {
|
|
3
|
+
anchor?: AnchorType;
|
|
4
|
+
_anchorEl?: HTMLElement | null;
|
|
5
|
+
}
|
|
6
|
+
export declare function anchored<T extends {
|
|
7
|
+
new (...args: any[]): Record<string, any>;
|
|
8
|
+
}>(constructor: T): {
|
|
9
|
+
new (...args: any[]): {
|
|
10
|
+
[x: string]: any;
|
|
11
|
+
anchor?: AnchorType | undefined;
|
|
12
|
+
anchorChanged(): void;
|
|
13
|
+
_anchorEl?: HTMLElement | undefined;
|
|
14
|
+
"__#17@#updateAnchorEl": () => void;
|
|
15
|
+
"__#17@#observer"?: MutationObserver | undefined;
|
|
16
|
+
"__#17@#observeMissingAnchor": (anchorId: string) => void;
|
|
17
|
+
"__#17@#cleanupObserverIfNeeded": () => void;
|
|
18
|
+
connectedCallback(): void;
|
|
19
|
+
disconnectedCallback(): void;
|
|
20
|
+
};
|
|
21
|
+
} & T;
|
|
22
|
+
export {};
|
|
@@ -14,7 +14,7 @@ import { L as Localized } from './localized.js';
|
|
|
14
14
|
import { F as FormAssociated } from './form-associated.js';
|
|
15
15
|
import { a as applyMixins } from './apply-mixins.js';
|
|
16
16
|
|
|
17
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Mon,
|
|
17
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n display: inline-block;\n inline-size: 100%;\n}\n\n.control {\n inline-size: 100%;\n}\n\n.dialog {\n display: inline-flex;\n flex-direction: column;\n padding: 12px;\n gap: 12px;\n}\n.dialog .footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: 8px;\n gap: 8px;\n}\n\n.segments {\n display: flex;\n gap: 24px;\n}\n\n.segment {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.segment .header {\n display: flex;\n align-items: center;\n padding-block: 8px;\n}\n.segment .title {\n display: flex;\n flex-grow: 1;\n justify-content: center;\n}\n.segment .title-action {\n block-size: 24px;\n border-radius: 6px;\n font: var(--vvd-typography-base-extended);\n padding-inline: 6px;\n}\n\n.calendar {\n display: flex;\n flex-direction: column;\n margin-top: 8px;\n gap: 4px;\n}\n.calendar .calendar-separator {\n margin-inline: 10px;\n}\n.calendar .calendar-weekdays {\n display: flex;\n justify-content: center;\n}\n.calendar .calendar-weekday {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n block-size: 16px;\n font: var(--vvd-typography-base-condensed);\n inline-size: 40px;\n}\n.calendar .calendar-week {\n display: flex;\n justify-content: center;\n}\n.calendar .calendar-day {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1/1;\n block-size: 28px;\n border-radius: 50%;\n font: var(--vvd-typography-base);\n margin-inline: 6px;\n --focus-inset: -2px;\n}\n.calendar .calendar-day.start, .calendar .calendar-day.end {\n border: 2px solid var(--vvd-color-cta-50);\n background-color: var(--vvd-color-cta-200);\n}\n.calendar .calendar-day::before, .calendar .calendar-day::after {\n position: absolute;\n z-index: -1;\n display: block;\n width: 20px;\n height: 28px;\n}\n.calendar .calendar-day::before {\n right: 50%;\n}\n.calendar .calendar-day::after {\n left: 50%;\n}\n.calendar .calendar-day.range::before, .calendar .calendar-day.range::after {\n background-color: var(--vvd-color-cta-50);\n}\n.calendar .calendar-day.range:not(.start)::before, .calendar .calendar-day.range:not(.end)::after {\n content: \"\";\n}\n.calendar .calendar-day.outside-month, .calendar .calendar-day:disabled {\n color: var(--vvd-color-neutral-400);\n}\n\n.months-separator {\n margin-inline: -12px;\n}\n\n.month-grid {\n display: flex;\n flex-direction: column;\n gap: 34px;\n}\n.month-grid .months-row {\n display: flex;\n justify-content: center;\n gap: 29px;\n}\n.month-grid .month {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1/1;\n block-size: 48px;\n border-radius: 50%;\n font: var(--vvd-typography-base-extended);\n text-transform: uppercase;\n}\n.month-grid .month:disabled {\n color: var(--vvd-color-neutral-400);\n}\n\n.button {\n position: relative;\n padding: 0;\n border: none;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n cursor: pointer;\n}\n.button {\n /* @cssprop [--vvd-date-picker-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-date-picker-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-date-picker-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));\n /* @cssprop [--vvd-date-picker-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));\n /* @cssprop [--vvd-date-picker-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300));\n}\n.button {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.button:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.button:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: transparent;\n}\n.button .focus-indicator {\n color: var(--vvd-color-canvas-text);\n --focus-stroke-gap-color: transparent;\n}\n.button:focus-visible {\n outline: none;\n}\n.button:not(:focus-visible) .focus-indicator {\n display: none;\n}\n.button.current {\n border: 1px solid var(--vvd-color-neutral-200);\n}\n.button:disabled {\n cursor: not-allowed;\n}";
|
|
18
18
|
|
|
19
19
|
function _typeof(obj) {
|
|
20
20
|
"@babel/helpers - typeof";
|
|
@@ -5501,7 +5501,7 @@ const DatePickerBaseTemplate = (context, _) => {
|
|
|
5501
5501
|
</${textFieldTag}>
|
|
5502
5502
|
<${popupTag}
|
|
5503
5503
|
?open="${(x) => x._popupOpen}"
|
|
5504
|
-
anchor="
|
|
5504
|
+
:anchor="${(x) => x._textFieldEl}"
|
|
5505
5505
|
placement="bottom-start"
|
|
5506
5506
|
class="popup">
|
|
5507
5507
|
<div class="dialog" role="dialog" ${ref(
|