@vonage/vivid 3.0.0-next.134 → 3.0.0-next.135
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/combobox/index.js +1 -0
- package/custom-elements.json +344 -0
- package/index.js +7 -3
- package/lib/components.d.ts +3 -0
- package/lib/menu-item/menu-item.d.ts +1 -0
- package/lib/tab/definition.d.ts +3 -0
- package/lib/tab/index.d.ts +1 -0
- package/lib/tab/tab.d.ts +9 -0
- package/lib/tab/tab.template.d.ts +3 -0
- package/lib/tab-panel/definition.d.ts +3 -0
- package/lib/tab-panel/index.d.ts +1 -0
- package/lib/tab-panel/tab-panel.d.ts +3 -0
- package/lib/tab-panel/tab-panel.template.d.ts +2 -0
- package/lib/tabs/definition.d.ts +3 -0
- package/lib/tabs/index.d.ts +1 -0
- package/lib/tabs/tabs.d.ts +10 -0
- package/lib/tabs/tabs.template.d.ts +2 -0
- package/listbox/index.js +1 -0
- package/number-field/index.js +1 -1
- package/package.json +1 -1
- 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/definition16.js +1 -1
- package/shared/definition17.js +3 -2
- package/shared/definition19.js +1 -1
- package/shared/definition2.js +1 -1
- package/shared/definition20.js +1 -1
- package/shared/definition21.js +1 -1
- package/shared/definition22.js +1 -1
- package/shared/definition23.js +1 -1
- package/shared/definition25.js +1 -1
- package/shared/definition27.js +20 -8
- package/shared/definition29.js +1 -1
- package/shared/definition30.js +1 -1
- package/shared/definition31.js +1 -1
- package/shared/definition32.js +1 -1
- package/shared/definition33.js +1 -1
- package/shared/definition34.js +1 -1
- package/shared/definition35.js +1 -1
- package/shared/definition36.js +1 -1
- package/shared/definition38.js +1 -1
- package/shared/definition39.js +42 -255
- package/shared/definition4.js +1 -1
- package/shared/definition40.js +24 -111
- package/shared/definition41.js +424 -61
- package/shared/definition42.js +280 -0
- package/shared/definition43.js +119 -0
- package/shared/definition44.js +77 -0
- package/shared/definition5.js +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.js +1 -1
- package/shared/definition9.js +1 -1
- package/shared/form-elements.js +1 -1
- package/shared/listbox.js +2 -9
- package/shared/numbers.js +10 -1
- package/shared/patterns/form-elements/form-elements.d.ts +2 -2
- package/shared/strings.js +9 -0
- package/shared/text-field.js +1 -1
- 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/tab/index.js +16 -0
- package/tab-panel/index.js +4 -0
- package/tabs/index.js +24 -0
- package/text-area/index.js +1 -1
- package/text-field/index.js +1 -1
- package/tooltip/index.js +1 -1
- package/vivid.api.json +315 -0
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, a as attr, Z as nullableNumberConverter, N as observable, b as __metadata, h as html, r as registerFactory } from './index.js';
|
|
2
|
+
import { i as iconRegistries } from './definition3.js';
|
|
3
|
+
import { f as focusRegistries } from './definition4.js';
|
|
4
|
+
import './affix.js';
|
|
5
|
+
import './focus.js';
|
|
6
|
+
import { f as formElements, g as getFeedbackTemplate } from './form-elements.js';
|
|
7
|
+
import { D as DelegatesARIATextbox } from './text-field2.js';
|
|
8
|
+
import { a as applyMixins } from './apply-mixins.js';
|
|
9
|
+
import { F as FormAssociated } from './form-associated.js';
|
|
10
|
+
import { f as focusTemplateFactory } from './focus2.js';
|
|
11
|
+
import { w as when } from './when.js';
|
|
12
|
+
import { r as ref } from './ref.js';
|
|
13
|
+
import { c as classNames } from './class-names.js';
|
|
14
|
+
|
|
15
|
+
class _TextArea extends FoundationElement {
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* A form-associated base class for the {@link @microsoft/fast-foundation#(TextArea:class)} component.
|
|
19
|
+
*
|
|
20
|
+
* @internal
|
|
21
|
+
*/
|
|
22
|
+
class FormAssociatedTextArea extends FormAssociated(_TextArea) {
|
|
23
|
+
constructor() {
|
|
24
|
+
super(...arguments);
|
|
25
|
+
this.proxy = document.createElement("textarea");
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Resize mode for a TextArea
|
|
31
|
+
* @public
|
|
32
|
+
*/
|
|
33
|
+
const TextAreaResize = {
|
|
34
|
+
/**
|
|
35
|
+
* No resize.
|
|
36
|
+
*/
|
|
37
|
+
none: "none",
|
|
38
|
+
/**
|
|
39
|
+
* Resize vertically and horizontally.
|
|
40
|
+
*/
|
|
41
|
+
both: "both",
|
|
42
|
+
/**
|
|
43
|
+
* Resize horizontally.
|
|
44
|
+
*/
|
|
45
|
+
horizontal: "horizontal",
|
|
46
|
+
/**
|
|
47
|
+
* Resize vertically.
|
|
48
|
+
*/
|
|
49
|
+
vertical: "vertical",
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* A Text Area Custom HTML Element.
|
|
54
|
+
* Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | <textarea> element }.
|
|
55
|
+
*
|
|
56
|
+
* @slot - The default slot for the label
|
|
57
|
+
* @csspart label - The label
|
|
58
|
+
* @csspart root - The element wrapping the control
|
|
59
|
+
* @csspart control - The textarea element
|
|
60
|
+
* @fires change - Emits a custom 'change' event when the textarea emits a change event
|
|
61
|
+
*
|
|
62
|
+
* @public
|
|
63
|
+
*/
|
|
64
|
+
class TextArea$1 extends FormAssociatedTextArea {
|
|
65
|
+
constructor() {
|
|
66
|
+
super(...arguments);
|
|
67
|
+
/**
|
|
68
|
+
* The resize mode of the element.
|
|
69
|
+
* @public
|
|
70
|
+
* @remarks
|
|
71
|
+
* HTML Attribute: resize
|
|
72
|
+
*/
|
|
73
|
+
this.resize = TextAreaResize.none;
|
|
74
|
+
/**
|
|
75
|
+
* Sizes the element horizontally by a number of character columns.
|
|
76
|
+
*
|
|
77
|
+
* @public
|
|
78
|
+
* @remarks
|
|
79
|
+
* HTML Attribute: cols
|
|
80
|
+
*/
|
|
81
|
+
this.cols = 20;
|
|
82
|
+
/**
|
|
83
|
+
* @internal
|
|
84
|
+
*/
|
|
85
|
+
this.handleTextInput = () => {
|
|
86
|
+
this.value = this.control.value;
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
readOnlyChanged() {
|
|
90
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
91
|
+
this.proxy.readOnly = this.readOnly;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
autofocusChanged() {
|
|
95
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
96
|
+
this.proxy.autofocus = this.autofocus;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
listChanged() {
|
|
100
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
101
|
+
this.proxy.setAttribute("list", this.list);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
maxlengthChanged() {
|
|
105
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
106
|
+
this.proxy.maxLength = this.maxlength;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
minlengthChanged() {
|
|
110
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
111
|
+
this.proxy.minLength = this.minlength;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
spellcheckChanged() {
|
|
115
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
116
|
+
this.proxy.spellcheck = this.spellcheck;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Selects all the text in the text area
|
|
121
|
+
*
|
|
122
|
+
* @public
|
|
123
|
+
*/
|
|
124
|
+
select() {
|
|
125
|
+
this.control.select();
|
|
126
|
+
/**
|
|
127
|
+
* The select event does not permeate the shadow DOM boundary.
|
|
128
|
+
* This fn effectively proxies the select event,
|
|
129
|
+
* emitting a `select` event whenever the internal
|
|
130
|
+
* control emits a `select` event
|
|
131
|
+
*/
|
|
132
|
+
this.$emit("select");
|
|
133
|
+
}
|
|
134
|
+
/**
|
|
135
|
+
* Change event handler for inner control.
|
|
136
|
+
* @remarks
|
|
137
|
+
* "Change" events are not `composable` so they will not
|
|
138
|
+
* permeate the shadow DOM boundary. This fn effectively proxies
|
|
139
|
+
* the change event, emitting a `change` event whenever the internal
|
|
140
|
+
* control emits a `change` event
|
|
141
|
+
* @internal
|
|
142
|
+
*/
|
|
143
|
+
handleChange() {
|
|
144
|
+
this.$emit("change");
|
|
145
|
+
}
|
|
146
|
+
/** {@inheritDoc (FormAssociated:interface).validate} */
|
|
147
|
+
validate() {
|
|
148
|
+
super.validate(this.control);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
__decorate([
|
|
152
|
+
attr({ mode: "boolean" })
|
|
153
|
+
], TextArea$1.prototype, "readOnly", void 0);
|
|
154
|
+
__decorate([
|
|
155
|
+
attr
|
|
156
|
+
], TextArea$1.prototype, "resize", void 0);
|
|
157
|
+
__decorate([
|
|
158
|
+
attr({ mode: "boolean" })
|
|
159
|
+
], TextArea$1.prototype, "autofocus", void 0);
|
|
160
|
+
__decorate([
|
|
161
|
+
attr({ attribute: "form" })
|
|
162
|
+
], TextArea$1.prototype, "formId", void 0);
|
|
163
|
+
__decorate([
|
|
164
|
+
attr
|
|
165
|
+
], TextArea$1.prototype, "list", void 0);
|
|
166
|
+
__decorate([
|
|
167
|
+
attr({ converter: nullableNumberConverter })
|
|
168
|
+
], TextArea$1.prototype, "maxlength", void 0);
|
|
169
|
+
__decorate([
|
|
170
|
+
attr({ converter: nullableNumberConverter })
|
|
171
|
+
], TextArea$1.prototype, "minlength", void 0);
|
|
172
|
+
__decorate([
|
|
173
|
+
attr
|
|
174
|
+
], TextArea$1.prototype, "name", void 0);
|
|
175
|
+
__decorate([
|
|
176
|
+
attr
|
|
177
|
+
], TextArea$1.prototype, "placeholder", void 0);
|
|
178
|
+
__decorate([
|
|
179
|
+
attr({ converter: nullableNumberConverter, mode: "fromView" })
|
|
180
|
+
], TextArea$1.prototype, "cols", void 0);
|
|
181
|
+
__decorate([
|
|
182
|
+
attr({ converter: nullableNumberConverter, mode: "fromView" })
|
|
183
|
+
], TextArea$1.prototype, "rows", void 0);
|
|
184
|
+
__decorate([
|
|
185
|
+
attr({ mode: "boolean" })
|
|
186
|
+
], TextArea$1.prototype, "spellcheck", void 0);
|
|
187
|
+
__decorate([
|
|
188
|
+
observable
|
|
189
|
+
], TextArea$1.prototype, "defaultSlottedNodes", void 0);
|
|
190
|
+
applyMixins(TextArea$1, DelegatesARIATextbox);
|
|
191
|
+
|
|
192
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 16 Jan 2023 13:29:55 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n display: inline-grid;\n width: 100%;\n gap: 4px;\n grid-template-columns: 1fr max-content;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-backdrop: var(--vvd-color-success-50);\n --_connotation-color-intermediate: var(--vvd-color-success-500);\n --_connotation-color-firm: var(--vvd-color-success-600);\n --_connotation-color-faint: var(--vvd-color-success-50);\n --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-backdrop: var(--vvd-color-alert-50);\n --_connotation-color-intermediate: var(--vvd-color-alert-500);\n --_connotation-color-firm: var(--vvd-color-alert-600);\n --_connotation-color-faint: var(--vvd-color-alert-50);\n --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base:not(.connotation-success, .connotation-alert) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-backdrop: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n --_low-ink-color: var(--_appearance-color-text);\n pointer-events: none;\n}\n\n.label {\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-typography-base);\n grid-column: 1/3;\n grid-row: 1;\n line-height: 20px;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n border-radius: 6px;\n grid-column: 1/3;\n}\n\n.control {\n width: 100%;\n padding: 8px 16px;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n border-radius: inherit;\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 min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n}\n.control:disabled {\n cursor: not-allowed;\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n display: none;\n}";
|
|
193
|
+
|
|
194
|
+
let TextArea = class TextArea extends TextArea$1 {};
|
|
195
|
+
__decorate([attr, __metadata("design:type", String)], TextArea.prototype, "wrap", void 0);
|
|
196
|
+
TextArea = __decorate([formElements], TextArea);
|
|
197
|
+
|
|
198
|
+
let _ = t => t,
|
|
199
|
+
_t,
|
|
200
|
+
_t2;
|
|
201
|
+
const getClasses = ({
|
|
202
|
+
value,
|
|
203
|
+
errorValidationMessage,
|
|
204
|
+
disabled,
|
|
205
|
+
placeholder,
|
|
206
|
+
readOnly,
|
|
207
|
+
successText
|
|
208
|
+
}) => classNames('base', ['readonly', readOnly], ['placeholder', Boolean(placeholder)], ['disabled', disabled], ['error connotation-alert', Boolean(errorValidationMessage)], ['has-value', Boolean(value)], ['success connotation-success', !!successText]);
|
|
209
|
+
function renderLabel() {
|
|
210
|
+
return html(_t || (_t = _`
|
|
211
|
+
<label for="control" class="label">
|
|
212
|
+
${0}
|
|
213
|
+
</label>`), x => x.label);
|
|
214
|
+
}
|
|
215
|
+
const TextAreaTemplate = context => {
|
|
216
|
+
const focusTemplate = focusTemplateFactory(context);
|
|
217
|
+
return html(_t2 || (_t2 = _`
|
|
218
|
+
<div class="${0}">
|
|
219
|
+
${0}
|
|
220
|
+
<div class="fieldset">
|
|
221
|
+
<textarea class="control"
|
|
222
|
+
?autofocus="${0}"
|
|
223
|
+
placeholder="${0}"
|
|
224
|
+
name="${0}"
|
|
225
|
+
maxlength="${0}"
|
|
226
|
+
rows="${0}"
|
|
227
|
+
cols="${0}"
|
|
228
|
+
wrap="${0}"
|
|
229
|
+
?readonly="${0}"
|
|
230
|
+
?required="${0}"
|
|
231
|
+
?spellcheck="${0}"
|
|
232
|
+
:value="${0}"
|
|
233
|
+
aria-atomic="${0}"
|
|
234
|
+
aria-busy="${0}"
|
|
235
|
+
aria-controls="${0}"
|
|
236
|
+
aria-current="${0}"
|
|
237
|
+
aria-describedby="${0}"
|
|
238
|
+
aria-details="${0}"
|
|
239
|
+
aria-disabled="${0}"
|
|
240
|
+
aria-errormessage="${0}"
|
|
241
|
+
aria-flowto="${0}"
|
|
242
|
+
aria-haspopup="${0}"
|
|
243
|
+
aria-hidden="${0}"
|
|
244
|
+
aria-invalid="${0}"
|
|
245
|
+
aria-keyshortcuts="${0}"
|
|
246
|
+
aria-label="${0}"
|
|
247
|
+
aria-labelledby="${0}"
|
|
248
|
+
aria-live="${0}"
|
|
249
|
+
aria-owns="${0}"
|
|
250
|
+
aria-relevant="${0}"
|
|
251
|
+
aria-roledescription="${0}"
|
|
252
|
+
@input="${0}"
|
|
253
|
+
@change="${0}"
|
|
254
|
+
${0}
|
|
255
|
+
>
|
|
256
|
+
</textarea>
|
|
257
|
+
${0}
|
|
258
|
+
</div>
|
|
259
|
+
${0}
|
|
260
|
+
${0}
|
|
261
|
+
${0}
|
|
262
|
+
</div>
|
|
263
|
+
`), getClasses, when(x => x.label, renderLabel()), x => x.autofocus, x => x.placeholder ? x.placeholder : null, x => x.name ? x.name : null, x => x.maxlength ? x.maxlength : null, x => x.rows ? x.rows : null, x => x.cols ? x.cols : null, x => x.wrap ? x.wrap : null, x => x.readOnly, x => x.required, x => x.spellcheck, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, x => x.handleTextInput(), x => x.handleChange(), ref('control'), () => focusTemplate, when(x => {
|
|
264
|
+
var _a;
|
|
265
|
+
return !x.successText && !x.errorValidationMessage && ((_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length);
|
|
266
|
+
}, getFeedbackTemplate('helper', context)), when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context)), when(x => x.successText, getFeedbackTemplate('success', context)));
|
|
267
|
+
};
|
|
268
|
+
|
|
269
|
+
const textAreaDefinition = TextArea.compose({
|
|
270
|
+
baseName: 'text-area',
|
|
271
|
+
template: TextAreaTemplate,
|
|
272
|
+
styles: css_248z,
|
|
273
|
+
shadowOptions: {
|
|
274
|
+
delegatesFocus: true
|
|
275
|
+
}
|
|
276
|
+
});
|
|
277
|
+
const textAreaRegistries = [textAreaDefinition(), ...iconRegistries, ...focusRegistries];
|
|
278
|
+
const registerTextArea = registerFactory(textAreaRegistries);
|
|
279
|
+
|
|
280
|
+
export { textAreaRegistries as a, registerTextArea as r, textAreaDefinition as t };
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
|
|
2
|
+
import { f as focusRegistries } from './definition4.js';
|
|
3
|
+
import { i as iconRegistries } from './definition3.js';
|
|
4
|
+
import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
|
|
5
|
+
import './focus.js';
|
|
6
|
+
import { f as formElements, g as getFeedbackTemplate } from './form-elements.js';
|
|
7
|
+
import { T as TextField$1 } from './text-field2.js';
|
|
8
|
+
import { a as applyMixins } from './apply-mixins.js';
|
|
9
|
+
import { c as css_248z } from './text-field.js';
|
|
10
|
+
import { f as focusTemplateFactory } from './focus2.js';
|
|
11
|
+
import { w as when } from './when.js';
|
|
12
|
+
import { r as ref } from './ref.js';
|
|
13
|
+
import { c as classNames } from './class-names.js';
|
|
14
|
+
|
|
15
|
+
let TextField = class TextField extends TextField$1 {};
|
|
16
|
+
__decorate([attr, __metadata("design:type", String)], TextField.prototype, "appearance", void 0);
|
|
17
|
+
__decorate([attr, __metadata("design:type", String)], TextField.prototype, "shape", void 0);
|
|
18
|
+
__decorate([attr, __metadata("design:type", String)], TextField.prototype, "autoComplete", void 0);
|
|
19
|
+
TextField = __decorate([formElements], TextField);
|
|
20
|
+
applyMixins(TextField, AffixIcon);
|
|
21
|
+
|
|
22
|
+
let _ = t => t,
|
|
23
|
+
_t,
|
|
24
|
+
_t2,
|
|
25
|
+
_t3;
|
|
26
|
+
const getStateClasses = ({
|
|
27
|
+
errorValidationMessage,
|
|
28
|
+
disabled,
|
|
29
|
+
value,
|
|
30
|
+
readOnly,
|
|
31
|
+
placeholder,
|
|
32
|
+
appearance,
|
|
33
|
+
shape,
|
|
34
|
+
label,
|
|
35
|
+
successText
|
|
36
|
+
}) => classNames(['error connotation-alert', Boolean(errorValidationMessage)], ['disabled', disabled], ['has-value', Boolean(value)], ['readonly', readOnly], ['placeholder', Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ['no-label', !label], ['success connotation-success', Boolean(successText)]);
|
|
37
|
+
function renderLabel() {
|
|
38
|
+
return html(_t || (_t = _`
|
|
39
|
+
<label for="control" class="label">
|
|
40
|
+
${0}
|
|
41
|
+
</label>`), x => x.label);
|
|
42
|
+
}
|
|
43
|
+
function renderCharCount() {
|
|
44
|
+
return html(_t2 || (_t2 = _`
|
|
45
|
+
<span class="char-count">${0} / ${0}</span>
|
|
46
|
+
`), x => x.value ? x.value.length : 0, x => x.maxlength);
|
|
47
|
+
}
|
|
48
|
+
const TextfieldTemplate = context => {
|
|
49
|
+
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
50
|
+
const focusTemplate = focusTemplateFactory(context);
|
|
51
|
+
return html(_t3 || (_t3 = _`
|
|
52
|
+
<div class="base ${0}">
|
|
53
|
+
${0}
|
|
54
|
+
${0}
|
|
55
|
+
<div class="fieldset">
|
|
56
|
+
${0}
|
|
57
|
+
<input class="control"
|
|
58
|
+
id="control"
|
|
59
|
+
@input="${0}"
|
|
60
|
+
@change="${0}"
|
|
61
|
+
?autofocus="${0}"
|
|
62
|
+
?disabled="${0}"
|
|
63
|
+
list="${0}"
|
|
64
|
+
maxlength="${0}"
|
|
65
|
+
minlength="${0}"
|
|
66
|
+
pattern="${0}"
|
|
67
|
+
placeholder="${0}"
|
|
68
|
+
?readonly="${0}"
|
|
69
|
+
?required="${0}"
|
|
70
|
+
size="${0}"
|
|
71
|
+
autocomplete="${0}"
|
|
72
|
+
name="${0}"
|
|
73
|
+
?spellcheck="${0}"
|
|
74
|
+
:value="${0}"
|
|
75
|
+
type="${0}"
|
|
76
|
+
aria-atomic="${0}"
|
|
77
|
+
aria-busy="${0}"
|
|
78
|
+
aria-controls="${0}"
|
|
79
|
+
aria-current="${0}"
|
|
80
|
+
aria-describedby="${0}"
|
|
81
|
+
aria-details="${0}"
|
|
82
|
+
aria-disabled="${0}"
|
|
83
|
+
aria-errormessage="${0}"
|
|
84
|
+
aria-flowto="${0}"
|
|
85
|
+
aria-haspopup="${0}"
|
|
86
|
+
aria-hidden="${0}"
|
|
87
|
+
aria-invalid="${0}"
|
|
88
|
+
aria-keyshortcuts="${0}"
|
|
89
|
+
aria-label="${0}"
|
|
90
|
+
aria-labelledby="${0}"
|
|
91
|
+
aria-live="${0}"
|
|
92
|
+
aria-owns="${0}"
|
|
93
|
+
aria-relevant="${0}"
|
|
94
|
+
aria-roledescription="${0}"
|
|
95
|
+
${0}
|
|
96
|
+
/>
|
|
97
|
+
${0}
|
|
98
|
+
</div>
|
|
99
|
+
${0}
|
|
100
|
+
${0}
|
|
101
|
+
${0}
|
|
102
|
+
</div>`), getStateClasses, when(x => x.charCount && x.maxlength, renderCharCount()), when(x => x.label, renderLabel()), x => affixIconTemplate(x.icon), x => x.handleTextInput(), x => x.handleChange(), x => x.autofocus, x => x.disabled, x => x.list, x => x.maxlength, x => x.minlength, x => x.pattern, x => x.placeholder, x => x.readOnly, x => x.required, x => x.size, x => x.autoComplete, x => x.name, x => x.spellcheck, x => x.value, x => x.type, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, when(x => {
|
|
103
|
+
var _a;
|
|
104
|
+
return !x.successText && !x.errorValidationMessage && ((_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length);
|
|
105
|
+
}, getFeedbackTemplate('helper', context)), when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context)), when(x => x.successText, getFeedbackTemplate('success', context)));
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
const textFieldDefinition = TextField.compose({
|
|
109
|
+
baseName: 'text-field',
|
|
110
|
+
template: TextfieldTemplate,
|
|
111
|
+
styles: css_248z,
|
|
112
|
+
shadowOptions: {
|
|
113
|
+
delegatesFocus: true
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
const textFieldRegistries = [textFieldDefinition(), ...iconRegistries, ...focusRegistries];
|
|
117
|
+
const registerTextField = registerFactory(textFieldRegistries);
|
|
118
|
+
|
|
119
|
+
export { textFieldRegistries as a, registerTextField as r, textFieldDefinition as t };
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { _ as __decorate, a as attr, b as __metadata, Q as __classPrivateFieldGet, h as html, r as registerFactory } from './index.js';
|
|
2
|
+
import { P as Popup, p as popupRegistries } from './definition18.js';
|
|
3
|
+
import { c as classNames } from './class-names.js';
|
|
4
|
+
|
|
5
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 16 Jan 2023 13:29:55 GMT\n */\n.control {\n pointer-events: none;\n}\n\n.tooltip {\n width: var(--tooltip-inline-size, 240px);\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
|
+
var _Tooltip_instances, _Tooltip_anchorUpdated, _Tooltip_addEventListener, _Tooltip_removeEventListener, _Tooltip_show, _Tooltip_hide;
|
|
8
|
+
class Tooltip extends Popup {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments);
|
|
11
|
+
_Tooltip_instances.add(this);
|
|
12
|
+
_Tooltip_show.set(this, () => {
|
|
13
|
+
this.open = true;
|
|
14
|
+
});
|
|
15
|
+
_Tooltip_hide.set(this, () => {
|
|
16
|
+
this.open = false;
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
connectedCallback() {
|
|
20
|
+
super.connectedCallback();
|
|
21
|
+
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_anchorUpdated).call(this);
|
|
22
|
+
}
|
|
23
|
+
disconnectedCallback() {
|
|
24
|
+
super.disconnectedCallback();
|
|
25
|
+
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListener).call(this);
|
|
26
|
+
}
|
|
27
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
28
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
29
|
+
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_anchorUpdated).call(this);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
_Tooltip_show = new WeakMap(), _Tooltip_hide = new WeakMap(), _Tooltip_instances = new WeakSet(), _Tooltip_anchorUpdated = function _Tooltip_anchorUpdated() {
|
|
33
|
+
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListener).call(this);
|
|
34
|
+
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_addEventListener).call(this);
|
|
35
|
+
}, _Tooltip_addEventListener = function _Tooltip_addEventListener() {
|
|
36
|
+
var _a, _b, _c, _d;
|
|
37
|
+
(_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', __classPrivateFieldGet(this, _Tooltip_show, "f"));
|
|
38
|
+
(_b = this.anchorEl) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
|
|
39
|
+
(_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.addEventListener('focusin', __classPrivateFieldGet(this, _Tooltip_show, "f"));
|
|
40
|
+
(_d = this.anchorEl) === null || _d === void 0 ? void 0 : _d.addEventListener('focusout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
|
|
41
|
+
}, _Tooltip_removeEventListener = function _Tooltip_removeEventListener() {
|
|
42
|
+
var _a, _b, _c, _d;
|
|
43
|
+
(_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', __classPrivateFieldGet(this, _Tooltip_show, "f"));
|
|
44
|
+
(_b = this.anchorEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
|
|
45
|
+
(_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusin', __classPrivateFieldGet(this, _Tooltip_show, "f"));
|
|
46
|
+
(_d = this.anchorEl) === null || _d === void 0 ? void 0 : _d.removeEventListener('focusout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
|
|
47
|
+
};
|
|
48
|
+
__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "text", void 0);
|
|
49
|
+
|
|
50
|
+
let _ = t => t,
|
|
51
|
+
_t;
|
|
52
|
+
const getClasses = ({
|
|
53
|
+
open
|
|
54
|
+
}) => classNames('control', ['open', Boolean(open)]);
|
|
55
|
+
const TooltipTemplate = context => {
|
|
56
|
+
const popupTag = context.tagFor(Popup);
|
|
57
|
+
return html(_t || (_t = _`
|
|
58
|
+
<${0} class="${0}" arrow alternate
|
|
59
|
+
placement=${0} open=${0} anchor=${0}
|
|
60
|
+
exportparts="vvd-theme-alternate">
|
|
61
|
+
<div class="tooltip" role="tooltip">
|
|
62
|
+
<header part="vvd-theme-alternate" class="tooltip-header">
|
|
63
|
+
<div class="tooltip-text">${0}</div>
|
|
64
|
+
</header>
|
|
65
|
+
</div>
|
|
66
|
+
</${0}>`), popupTag, getClasses, x => x.placement, x => x.open, x => x.anchor, x => x.text, popupTag);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
const tooltipDefinition = Tooltip.compose({
|
|
70
|
+
baseName: 'tooltip',
|
|
71
|
+
template: TooltipTemplate,
|
|
72
|
+
styles: css_248z
|
|
73
|
+
});
|
|
74
|
+
const tooltipRegistries = [tooltipDefinition(), ...popupRegistries];
|
|
75
|
+
const registerTooltip = registerFactory(tooltipRegistries);
|
|
76
|
+
|
|
77
|
+
export { tooltipRegistries as a, registerTooltip as r, tooltipDefinition as t };
|
package/shared/definition5.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { c as classNames } from './class-names.js';
|
|
3
3
|
|
|
4
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
4
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 16 Jan 2023 13:29:55 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n inline-size: inherit;\n vertical-align: middle;\n}\n.base {\n --_connotation-color-backdrop: var(--vvd-color-canvas);\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base::before {\n position: absolute;\n z-index: 1;\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n content: \"\";\n inset: 0;\n pointer-events: none;\n}\n.base:not(.tight) {\n padding: 4px;\n column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n border-radius: 6px;\n}\n\n.base.shape-pill {\n border-radius: 24px;\n}\n\n/* Separator */\n::slotted([role=separator]) {\n align-self: stretch;\n margin-block: 4px;\n}";
|
|
5
5
|
|
|
6
6
|
class ActionGroup extends FoundationElement {
|
|
7
7
|
constructor() {
|
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
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
7
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 16 Jan 2023 13:29:55 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 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 --_connotation-color-primary: var(--vvd-color-cta-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-firm: var(--vvd-color-cta-600);\n}\n.base:not(.connotation-cta) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-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-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-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\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 border-radius: 6px;\n}\n.base.shape-pill {\n 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
|
class Avatar extends FoundationElement {}
|
|
10
10
|
__decorate([attr, __metadata("design:type", String)], Avatar.prototype, "connotation", void 0);
|
package/shared/definition7.js
CHANGED
|
@@ -12,7 +12,7 @@ __decorate([attr, __metadata("design:type", String)], Badge.prototype, "appearan
|
|
|
12
12
|
__decorate([attr, __metadata("design:type", String)], Badge.prototype, "text", void 0);
|
|
13
13
|
applyMixins(Badge, AffixIconWithTrailing);
|
|
14
14
|
|
|
15
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
15
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 16 Jan 2023 13:29:55 GMT\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 max-inline-size: 100%;\n padding-inline: 8px;\n vertical-align: middle;\n}\n.base.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-cta-500);\n --_connotation-color-soft: var(--vvd-color-cta-100);\n --_connotation-color-contrast: var(--vvd-color-cta-800);\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-success-500);\n --_connotation-color-soft: var(--vvd-color-success-100);\n --_connotation-color-contrast: var(--vvd-color-success-800);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-alert-500);\n --_connotation-color-soft: var(--vvd-color-alert-100);\n --_connotation-color-contrast: var(--vvd-color-alert-800);\n}\n.base.connotation-warning {\n --_connotation-color-primary: var(--vvd-color-warning-300);\n --_connotation-color-primary-text: var(--vvd-color-canvas-text);\n --_connotation-color-intermediate: var(--vvd-color-warning-300);\n --_connotation-color-soft: var(--vvd-color-warning-100);\n --_connotation-color-contrast: var(--vvd-color-warning-800);\n}\n.base.connotation-information {\n --_connotation-color-primary: var(--vvd-color-information-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-information-500);\n --_connotation-color-soft: var(--vvd-color-information-100);\n --_connotation-color-contrast: var(--vvd-color-information-800);\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n --_connotation-color-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-duotone {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-intermediate);\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.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 */\n.icon {\n font-size: calc(var(--_badge-block-size) / 1.6667);\n line-height: 1;\n}\n.icon-trailing .icon {\n order: 1;\n}";
|
|
16
16
|
|
|
17
17
|
let _ = t => t,
|
|
18
18
|
_t,
|
package/shared/definition8.js
CHANGED
|
@@ -7,7 +7,7 @@ import { a as applyMixins } from './apply-mixins.js';
|
|
|
7
7
|
import { w as when } from './when.js';
|
|
8
8
|
import { c as classNames } from './class-names.js';
|
|
9
9
|
|
|
10
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
10
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 16 Jan 2023 13:29:55 GMT\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 --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-announcement {\n --_connotation-color-primary: var(--vvd-color-announcement-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-warning {\n --_connotation-color-primary: var(--vvd-color-warning-300);\n --_connotation-color-primary-text: var(--vvd-color-canvas-text);\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n --_connotation-color-primary: var(--vvd-color-information-500);\n --_connotation-color-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.control > .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 justify-content: flex-start;\n font: var(--vvd-typography-base-bold);\n}\n.control > .header > .user-content {\n display: flex;\n flex: 1 0;\n align-items: center;\n justify-content: center;\n padding-inline: 16px;\n}\n.control > .header > .user-content > .icon {\n flex: 0 0 auto;\n font-size: 20px;\n line-height: 1;\n margin-inline-end: 15px;\n}\n.control > .header > .user-content > .action-items {\n display: inline-block;\n flex: 0 0 auto;\n padding-inline-start: 15px;\n}\n.control > .header > .user-content > .message {\n padding: 20px 0;\n}\n.control > .header > .dismiss-button {\n --vvd-icon-button-color: inherit;\n flex: 0 0 auto;\n margin-inline-end: 8px;\n}";
|
|
11
11
|
|
|
12
12
|
var _Banner_handleRemoveEnd, _Banner_closeOnKeyDown;
|
|
13
13
|
const connotationIconMap = new Map([[Connotation.Information, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
|
package/shared/definition9.js
CHANGED
|
@@ -25,7 +25,7 @@ __decorate([attr({
|
|
|
25
25
|
__decorate([attr, __metadata("design:type", String)], Button.prototype, "label", void 0);
|
|
26
26
|
applyMixins(Button, AffixIconWithTrailing);
|
|
27
27
|
|
|
28
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
28
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 16 Jan 2023 13:29:55 GMT\n */\n:host {\n display: inline-block;\n}\n\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n border: 0 none;\n margin: 0;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_button-block-size);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n gap: var(--_button-icon-gap);\n vertical-align: middle;\n white-space: nowrap;\n /* Size */\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-cta-600);\n --_connotation-color-contrast: var(--vvd-color-cta-800);\n --_connotation-color-fierce: var(--vvd-color-cta-700);\n --_connotation-color-firm: var(--vvd-color-cta-600);\n --_connotation-color-soft: var(--vvd-color-cta-100);\n --_connotation-color-faint: var(--vvd-color-cta-50);\n}\n.control.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-success-600);\n --_connotation-color-contrast: var(--vvd-color-success-800);\n --_connotation-color-fierce: var(--vvd-color-success-700);\n --_connotation-color-firm: var(--vvd-color-success-600);\n --_connotation-color-soft: var(--vvd-color-success-100);\n --_connotation-color-faint: var(--vvd-color-success-50);\n}\n.control.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-alert-600);\n --_connotation-color-contrast: var(--vvd-color-alert-800);\n --_connotation-color-fierce: var(--vvd-color-alert-700);\n --_connotation-color-firm: var(--vvd-color-alert-600);\n --_connotation-color-soft: var(--vvd-color-alert-100);\n --_connotation-color-faint: var(--vvd-color-alert-50);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n --_connotation-color-contrast: var(--vvd-color-neutral-800);\n --_connotation-color-fierce: var(--vvd-color-neutral-700);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\n}\n.control.appearance-filled {\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.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.control {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\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:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: var(--_connotation-color-firm);\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(:disabled, .disabled).appearance-filled {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: var(--_connotation-color-firm);\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:not(.icon-only) {\n inline-size: 100%;\n}\n@supports selector(:focus-visible) {\n .control:focus {\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 cursor: not-allowed;\n}\n.control.icon-only {\n contain: size;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_button-block-size);\n }\n}\n.control:not(.stacked).size-condensed {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n font: var(--vvd-typography-base-condensed-bold);\n}\n.control:not(.stacked).size-condensed:not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 12px;\n}\n.control:not(.stacked).size-expanded {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n font: var(--vvd-typography-base-extended-bold);\n}\n.control:not(.stacked).size-expanded:not(.icon-only) {\n --_button-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded) {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n font: var(--vvd-typography-base-bold);\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded):not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 16px;\n}\n.control.stacked {\n flex-direction: column;\n justify-content: center;\n --_button-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)));\n font: var(--vvd-typography-base-bold);\n}\n.control.stacked:not(.icon-only) {\n --_button-icon-gap: 10px;\n padding-inline: 16px;\n}\n\n/* Shape */\n.control:not(.shape-pill:not(.stacked)) {\n border-radius: 6px;\n}\n\n.control.shape-pill:not(.stacked):not(.icon-only) {\n border-radius: 24px;\n}\n.control.shape-pill:not(.stacked).icon-only {\n border-radius: 50%;\n}\n\n/* Icon */\n.icon {\n line-height: 1;\n}\n.icon-trailing .icon {\n order: 1;\n}\n.control.stacked > .icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n}\n.control:not(.stacked) > .icon {\n font-size: calc(var(--_button-block-size) / 2);\n}\n\n:not(:focus-visible) > .focus-indicator {\n display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n --focus-stroke-gap-color: transparent;\n}";
|
|
29
29
|
|
|
30
30
|
let _ = t => t,
|
|
31
31
|
_t;
|
package/shared/form-elements.js
CHANGED
|
@@ -2,7 +2,7 @@ import { _ as __decorate, a as attr, b as __metadata, N as observable, a6 as vol
|
|
|
2
2
|
import { I as Icon } from './icon.js';
|
|
3
3
|
import { w as when } from './when.js';
|
|
4
4
|
|
|
5
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
5
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 16 Jan 2023 13:29:55 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}";
|
|
6
6
|
|
|
7
7
|
let _ = t => t,
|
|
8
8
|
_t,
|
package/shared/listbox.js
CHANGED
|
@@ -3,6 +3,7 @@ import { i as isListboxOption } from './definition19.js';
|
|
|
3
3
|
import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
|
|
4
4
|
import { a as applyMixins } from './apply-mixins.js';
|
|
5
5
|
import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
|
|
6
|
+
import { u as uniqueId } from './strings.js';
|
|
6
7
|
import { i as inRange } from './numbers.js';
|
|
7
8
|
|
|
8
9
|
/**
|
|
@@ -21,14 +22,6 @@ function findLastIndex(array, predicate) {
|
|
|
21
22
|
return -1;
|
|
22
23
|
}
|
|
23
24
|
|
|
24
|
-
let uniqueIdCounter = 0;
|
|
25
|
-
/**
|
|
26
|
-
* Generates a unique ID based on incrementing a counter.
|
|
27
|
-
*/
|
|
28
|
-
function uniqueId(prefix = "") {
|
|
29
|
-
return `${prefix}${uniqueIdCounter++}`;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
25
|
/**
|
|
33
26
|
* A Listbox Custom HTML Element.
|
|
34
27
|
* Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#listbox | ARIA listbox }.
|
|
@@ -999,4 +992,4 @@ __decorate([
|
|
|
999
992
|
class Listbox extends ListboxElement {}
|
|
1000
993
|
__decorate([attr, __metadata("design:type", String)], Listbox.prototype, "appearance", void 0);
|
|
1001
994
|
|
|
1002
|
-
export { DelegatesARIAListbox as D, Listbox$1 as L, Listbox as a, ListboxElement as b
|
|
995
|
+
export { DelegatesARIAListbox as D, Listbox$1 as L, Listbox as a, ListboxElement as b };
|