@everymatrix/general-registration 1.21.13 → 1.21.15

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.
@@ -1,469 +1,6 @@
1
- import { f as defineCustomElement, J as addGlobalThemeStyles, i, r as registerStyles, R as TabindexMixin, l as FocusMixin, E as ElementMixin, g as ThemableMixin, H as ControllerMixin, P as PolymerElement, T as TooltipController, h as html } from './field-mixin.js';
1
+ import { i, r as registerStyles, Q as TabindexMixin, l as FocusMixin, E as ElementMixin, g as ThemableMixin, H as ControllerMixin, P as PolymerElement, T as TooltipController, f as defineCustomElement, h as html } from './field-mixin.js';
2
2
  import { A as ActiveMixin } from './active-mixin.js';
3
3
 
4
- /**
5
- * @license
6
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
7
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
8
- */
9
-
10
- /**
11
- * Dummy custom element used for collecting
12
- * development time usage statistics.
13
- *
14
- * @private
15
- */
16
- class Lumo extends HTMLElement {
17
- static get is() {
18
- return 'vaadin-lumo-styles';
19
- }
20
-
21
- static get version() {
22
- return '24.2.5';
23
- }
24
- }
25
-
26
- defineCustomElement(Lumo);
27
-
28
- const addLumoGlobalStyles = (id, ...styles) => {
29
- addGlobalThemeStyles(`lumo-${id}`, styles);
30
- };
31
-
32
- /**
33
- * @license
34
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
35
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
36
- */
37
-
38
- const colorBase = i`
39
- :host {
40
- /* Base (background) */
41
- --lumo-base-color: #fff;
42
-
43
- /* Tint */
44
- --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
45
- --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
46
- --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
47
- --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
48
- --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
49
- --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
50
- --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
51
- --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
52
- --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
53
- --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
54
- --lumo-tint: #fff;
55
-
56
- /* Shade */
57
- --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
58
- --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
59
- --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
60
- --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
61
- --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
62
- --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
63
- --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
64
- --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
65
- --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
66
- --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
67
- --lumo-shade: hsl(214, 35%, 15%);
68
-
69
- /* Contrast */
70
- --lumo-contrast-5pct: var(--lumo-shade-5pct);
71
- --lumo-contrast-10pct: var(--lumo-shade-10pct);
72
- --lumo-contrast-20pct: var(--lumo-shade-20pct);
73
- --lumo-contrast-30pct: var(--lumo-shade-30pct);
74
- --lumo-contrast-40pct: var(--lumo-shade-40pct);
75
- --lumo-contrast-50pct: var(--lumo-shade-50pct);
76
- --lumo-contrast-60pct: var(--lumo-shade-60pct);
77
- --lumo-contrast-70pct: var(--lumo-shade-70pct);
78
- --lumo-contrast-80pct: var(--lumo-shade-80pct);
79
- --lumo-contrast-90pct: var(--lumo-shade-90pct);
80
- --lumo-contrast: var(--lumo-shade);
81
-
82
- /* Text */
83
- --lumo-header-text-color: var(--lumo-contrast);
84
- --lumo-body-text-color: var(--lumo-contrast-90pct);
85
- --lumo-secondary-text-color: var(--lumo-contrast-70pct);
86
- --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
87
- --lumo-disabled-text-color: var(--lumo-contrast-30pct);
88
-
89
- /* Primary */
90
- --lumo-primary-color: hsl(214, 100%, 48%);
91
- --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
92
- --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
93
- --lumo-primary-text-color: hsl(214, 100%, 43%);
94
- --lumo-primary-contrast-color: #fff;
95
-
96
- /* Error */
97
- --lumo-error-color: hsl(3, 85%, 48%);
98
- --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
99
- --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
100
- --lumo-error-text-color: hsl(3, 89%, 42%);
101
- --lumo-error-contrast-color: #fff;
102
-
103
- /* Success */
104
- --lumo-success-color: hsl(145, 72%, 30%);
105
- --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
106
- --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
107
- --lumo-success-text-color: hsl(145, 85%, 25%);
108
- --lumo-success-contrast-color: #fff;
109
-
110
- /* Warning */
111
- --lumo-warning-color: hsl(48, 100%, 50%);
112
- --lumo-warning-color-10pct: hsla(48, 100%, 50%, 0.25);
113
- --lumo-warning-text-color: hsl(32, 100%, 30%);
114
- --lumo-warning-contrast-color: var(--lumo-shade-90pct);
115
- }
116
-
117
- /* forced-colors mode adjustments */
118
- @media (forced-colors: active) {
119
- html {
120
- --lumo-disabled-text-color: GrayText;
121
- }
122
- }
123
- `;
124
-
125
- addLumoGlobalStyles('color-props', colorBase);
126
-
127
- const color = i`
128
- [theme~='dark'] {
129
- /* Base (background) */
130
- --lumo-base-color: hsl(214, 35%, 21%);
131
-
132
- /* Tint */
133
- --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
134
- --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
135
- --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
136
- --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
137
- --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
138
- --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
139
- --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
140
- --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
141
- --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
142
- --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
143
- --lumo-tint: hsl(214, 100%, 98%);
144
-
145
- /* Shade */
146
- --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
147
- --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
148
- --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
149
- --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
150
- --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
151
- --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
152
- --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
153
- --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
154
- --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
155
- --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
156
- --lumo-shade: hsl(214, 33%, 13%);
157
-
158
- /* Contrast */
159
- --lumo-contrast-5pct: var(--lumo-tint-5pct);
160
- --lumo-contrast-10pct: var(--lumo-tint-10pct);
161
- --lumo-contrast-20pct: var(--lumo-tint-20pct);
162
- --lumo-contrast-30pct: var(--lumo-tint-30pct);
163
- --lumo-contrast-40pct: var(--lumo-tint-40pct);
164
- --lumo-contrast-50pct: var(--lumo-tint-50pct);
165
- --lumo-contrast-60pct: var(--lumo-tint-60pct);
166
- --lumo-contrast-70pct: var(--lumo-tint-70pct);
167
- --lumo-contrast-80pct: var(--lumo-tint-80pct);
168
- --lumo-contrast-90pct: var(--lumo-tint-90pct);
169
- --lumo-contrast: var(--lumo-tint);
170
-
171
- /* Text */
172
- --lumo-header-text-color: var(--lumo-contrast);
173
- --lumo-body-text-color: var(--lumo-contrast-90pct);
174
- --lumo-secondary-text-color: var(--lumo-contrast-70pct);
175
- --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
176
- --lumo-disabled-text-color: var(--lumo-contrast-30pct);
177
-
178
- /* Primary */
179
- --lumo-primary-color: hsl(214, 90%, 48%);
180
- --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
181
- --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
182
- --lumo-primary-text-color: hsl(214, 90%, 77%);
183
- --lumo-primary-contrast-color: #fff;
184
-
185
- /* Error */
186
- --lumo-error-color: hsl(3, 79%, 49%);
187
- --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
188
- --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
189
- --lumo-error-text-color: hsl(3, 100%, 80%);
190
-
191
- /* Success */
192
- --lumo-success-color: hsl(145, 72%, 30%);
193
- --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
194
- --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
195
- --lumo-success-text-color: hsl(145, 85%, 46%);
196
-
197
- /* Warning */
198
- --lumo-warning-color: hsl(43, 100%, 48%);
199
- --lumo-warning-color-10pct: hsla(40, 100%, 50%, 0.2);
200
- --lumo-warning-text-color: hsl(45, 100%, 60%);
201
- --lumo-warning-contrast-color: var(--lumo-shade-90pct);
202
- }
203
-
204
- html {
205
- color: var(--lumo-body-text-color);
206
- background-color: var(--lumo-base-color);
207
- color-scheme: light;
208
- }
209
-
210
- [theme~='dark'] {
211
- color: var(--lumo-body-text-color);
212
- background-color: var(--lumo-base-color);
213
- color-scheme: dark;
214
- }
215
-
216
- h1,
217
- h2,
218
- h3,
219
- h4,
220
- h5,
221
- h6 {
222
- color: var(--lumo-header-text-color);
223
- }
224
-
225
- a:where(:any-link) {
226
- color: var(--lumo-primary-text-color);
227
- }
228
-
229
- a:not(:any-link) {
230
- color: var(--lumo-disabled-text-color);
231
- }
232
-
233
- blockquote {
234
- color: var(--lumo-secondary-text-color);
235
- }
236
-
237
- code,
238
- pre {
239
- background-color: var(--lumo-contrast-10pct);
240
- border-radius: var(--lumo-border-radius-m);
241
- }
242
- `;
243
-
244
- registerStyles('', color, { moduleId: 'lumo-color' });
245
-
246
- /**
247
- * @license
248
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
249
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
250
- */
251
-
252
- const sizing = i`
253
- :host {
254
- --lumo-size-xs: 1.625rem;
255
- --lumo-size-s: 1.875rem;
256
- --lumo-size-m: 2.25rem;
257
- --lumo-size-l: 2.75rem;
258
- --lumo-size-xl: 3.5rem;
259
-
260
- /* Icons */
261
- --lumo-icon-size-s: 1.25em;
262
- --lumo-icon-size-m: 1.5em;
263
- --lumo-icon-size-l: 2.25em;
264
- /* For backwards compatibility */
265
- --lumo-icon-size: var(--lumo-icon-size-m);
266
- }
267
- `;
268
-
269
- addLumoGlobalStyles('sizing-props', sizing);
270
-
271
- /**
272
- * @license
273
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
274
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
275
- */
276
-
277
- const spacing = i`
278
- :host {
279
- /* Square */
280
- --lumo-space-xs: 0.25rem;
281
- --lumo-space-s: 0.5rem;
282
- --lumo-space-m: 1rem;
283
- --lumo-space-l: 1.5rem;
284
- --lumo-space-xl: 2.5rem;
285
-
286
- /* Wide */
287
- --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);
288
- --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);
289
- --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);
290
- --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);
291
- --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);
292
-
293
- /* Tall */
294
- --lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);
295
- --lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);
296
- --lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);
297
- --lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);
298
- --lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);
299
- }
300
- `;
301
-
302
- addLumoGlobalStyles('spacing-props', spacing);
303
-
304
- /**
305
- * @license
306
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
307
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
308
- */
309
-
310
- const style = i`
311
- :host {
312
- /* Border radius */
313
- --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
314
- --lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */
315
- --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */
316
-
317
- /* Shadow */
318
- --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);
319
- --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
320
- --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
321
- --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
322
- --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
323
-
324
- /* Clickable element cursor */
325
- --lumo-clickable-cursor: default;
326
- }
327
- `;
328
-
329
- /**
330
- * Default values for component-specific custom properties.
331
- */
332
- i`
333
- html {
334
- --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
335
- --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
336
- --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
337
- }
338
- `;
339
-
340
- addLumoGlobalStyles('style-props', style);
341
-
342
- /**
343
- * @license
344
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
345
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
346
- */
347
-
348
- const font = i`
349
- :host {
350
- /* prettier-ignore */
351
- --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
352
-
353
- /* Font sizes */
354
- --lumo-font-size-xxs: 0.75rem;
355
- --lumo-font-size-xs: 0.8125rem;
356
- --lumo-font-size-s: 0.875rem;
357
- --lumo-font-size-m: 1rem;
358
- --lumo-font-size-l: 1.125rem;
359
- --lumo-font-size-xl: 1.375rem;
360
- --lumo-font-size-xxl: 1.75rem;
361
- --lumo-font-size-xxxl: 2.5rem;
362
-
363
- /* Line heights */
364
- --lumo-line-height-xs: 1.25;
365
- --lumo-line-height-s: 1.375;
366
- --lumo-line-height-m: 1.625;
367
- }
368
- `;
369
-
370
- const typography = i`
371
- body,
372
- :host {
373
- font-family: var(--lumo-font-family);
374
- font-size: var(--lumo-font-size-m);
375
- line-height: var(--lumo-line-height-m);
376
- -webkit-text-size-adjust: 100%;
377
- -webkit-font-smoothing: antialiased;
378
- -moz-osx-font-smoothing: grayscale;
379
- }
380
-
381
- small,
382
- [theme~='font-size-s'] {
383
- font-size: var(--lumo-font-size-s);
384
- line-height: var(--lumo-line-height-s);
385
- }
386
-
387
- [theme~='font-size-xs'] {
388
- font-size: var(--lumo-font-size-xs);
389
- line-height: var(--lumo-line-height-xs);
390
- }
391
-
392
- :where(h1, h2, h3, h4, h5, h6) {
393
- font-weight: 600;
394
- line-height: var(--lumo-line-height-xs);
395
- margin-block: 0;
396
- }
397
-
398
- :where(h1) {
399
- font-size: var(--lumo-font-size-xxxl);
400
- }
401
-
402
- :where(h2) {
403
- font-size: var(--lumo-font-size-xxl);
404
- }
405
-
406
- :where(h3) {
407
- font-size: var(--lumo-font-size-xl);
408
- }
409
-
410
- :where(h4) {
411
- font-size: var(--lumo-font-size-l);
412
- }
413
-
414
- :where(h5) {
415
- font-size: var(--lumo-font-size-m);
416
- }
417
-
418
- :where(h6) {
419
- font-size: var(--lumo-font-size-xs);
420
- text-transform: uppercase;
421
- letter-spacing: 0.03em;
422
- }
423
-
424
- p,
425
- blockquote {
426
- margin-top: 0.5em;
427
- margin-bottom: 0.75em;
428
- }
429
-
430
- a {
431
- text-decoration: none;
432
- }
433
-
434
- a:where(:any-link):hover {
435
- text-decoration: underline;
436
- }
437
-
438
- hr {
439
- display: block;
440
- align-self: stretch;
441
- height: 1px;
442
- border: 0;
443
- padding: 0;
444
- margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
445
- background-color: var(--lumo-contrast-10pct);
446
- }
447
-
448
- blockquote {
449
- border-left: 2px solid var(--lumo-contrast-30pct);
450
- }
451
-
452
- b,
453
- strong {
454
- font-weight: 600;
455
- }
456
-
457
- /* RTL specific styles */
458
- blockquote[dir='rtl'] {
459
- border-left: none;
460
- border-right: 2px solid var(--lumo-contrast-30pct);
461
- }
462
- `;
463
-
464
- registerStyles('', typography, { moduleId: 'lumo-typography' });
465
- addLumoGlobalStyles('typography-props', font);
466
-
467
4
  const button = i`
468
5
  :host {
469
6
  /* Sizing */