@vonage/vivid 3.0.0-next.83 → 3.0.0-next.84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion/index.js +2 -9
- package/accordion-item/index.js +8 -22
- package/action-group/index.js +2 -8
- package/avatar/index.js +4 -14
- package/badge/index.js +3 -13
- package/banner/index.js +3 -26
- package/breadcrumb/index.js +1 -1
- package/breadcrumb-item/index.js +5 -9
- package/calendar/index.js +12 -49
- package/calendar-event/index.js +4 -7
- package/card/index.js +9 -28
- package/checkbox/index.js +3 -11
- package/dialog/index.js +7 -59
- package/fab/index.js +2 -8
- package/focus/index.js +2 -2
- package/header/index.js +2 -7
- package/icon/index.js +2 -5
- package/index.js +1 -1
- package/layout/index.js +1 -9
- package/lib/badge/badge.d.ts +1 -3
- package/lib/components.d.ts +1 -0
- package/lib/listbox-option/index.d.ts +4 -0
- package/lib/listbox-option/listbox-option.d.ts +7 -0
- package/lib/listbox-option/listbox-option.template.d.ts +4 -0
- package/listbox-option/index.js +248 -0
- package/menu/index.js +1 -7
- package/nav/index.js +1 -1
- package/nav-disclosure/index.js +4 -11
- package/nav-item/index.js +2 -2
- package/note/index.js +4 -12
- package/number-field/index.js +24 -21
- package/package.json +12 -9
- package/popup/index.js +0 -1
- package/progress/index.js +5 -13
- package/progress-ring/index.js +4 -8
- package/radio/index.js +3 -5
- package/radio-group/index.js +3 -4
- package/shared/affix.js +1 -6
- package/shared/apply-mixins.js +5 -4
- package/shared/calendar-event.js +0 -7
- package/shared/enums.js +0 -17
- package/shared/es.object.assign.js +4 -4
- package/shared/export.js +79 -57
- package/shared/focus2.js +1 -1
- package/shared/form-associated.js +1 -1
- package/shared/form-elements.js +5 -27
- package/shared/icon.js +8 -18
- package/shared/index.js +38 -25
- package/shared/index2.js +2 -13
- package/shared/index3.js +1 -5
- package/shared/index4.js +2 -4
- package/shared/index5.js +6 -581
- package/shared/index6.js +6 -10
- package/shared/iterators.js +3 -3
- package/shared/object-keys.js +2 -2
- package/shared/patterns/form-elements/form-elements.d.ts +1 -1
- package/shared/radio.js +0 -1
- package/shared/ref.js +1 -1
- package/shared/slotted.js +1 -1
- package/shared/text-anchor.js +0 -2
- package/shared/text-anchor.template.js +1 -3
- package/shared/web.dom-collections.iterator.js +6 -8
- package/side-drawer/index.js +3 -16
- 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 +29 -23
- package/styles/tokens/theme-light.css +29 -23
- package/text-area/index.js +3 -9
- package/text-field/index.js +4 -14
- package/tooltip/index.js +2 -10
- package/shared/regexp-flags.js +0 -21
package/shared/index.js
CHANGED
|
@@ -67,6 +67,27 @@ if (FAST.getById === void 0) {
|
|
|
67
67
|
* @internal
|
|
68
68
|
*/
|
|
69
69
|
const emptyArray = Object.freeze([]);
|
|
70
|
+
/**
|
|
71
|
+
* Creates a function capable of locating metadata associated with a type.
|
|
72
|
+
* @returns A metadata locator function.
|
|
73
|
+
* @internal
|
|
74
|
+
*/
|
|
75
|
+
function createMetadataLocator() {
|
|
76
|
+
const metadataLookup = new WeakMap();
|
|
77
|
+
return function (target) {
|
|
78
|
+
let metadata = metadataLookup.get(target);
|
|
79
|
+
if (metadata === void 0) {
|
|
80
|
+
let currentTarget = Reflect.getPrototypeOf(target);
|
|
81
|
+
while (metadata === void 0 && currentTarget !== null) {
|
|
82
|
+
metadata = metadataLookup.get(currentTarget);
|
|
83
|
+
currentTarget = Reflect.getPrototypeOf(currentTarget);
|
|
84
|
+
}
|
|
85
|
+
metadata = metadata === void 0 ? [] : metadata.slice(0);
|
|
86
|
+
metadataLookup.set(target, metadata);
|
|
87
|
+
}
|
|
88
|
+
return metadata;
|
|
89
|
+
};
|
|
90
|
+
}
|
|
70
91
|
|
|
71
92
|
const updateQueue = $global.FAST.getById(1 /* updateQueue */, () => {
|
|
72
93
|
const tasks = [];
|
|
@@ -455,7 +476,6 @@ class PropertyChangeNotifier {
|
|
|
455
476
|
const Observable = FAST.getById(2 /* observable */, () => {
|
|
456
477
|
const volatileRegex = /(:|&&|\|\||if)/;
|
|
457
478
|
const notifierLookup = new WeakMap();
|
|
458
|
-
const accessorLookup = new WeakMap();
|
|
459
479
|
const queueUpdate = DOM.queueUpdate;
|
|
460
480
|
let watcher = void 0;
|
|
461
481
|
let createArrayObserver = (array) => {
|
|
@@ -473,24 +493,7 @@ const Observable = FAST.getById(2 /* observable */, () => {
|
|
|
473
493
|
}
|
|
474
494
|
return found;
|
|
475
495
|
}
|
|
476
|
-
|
|
477
|
-
let accessors = accessorLookup.get(target);
|
|
478
|
-
if (accessors === void 0) {
|
|
479
|
-
let currentTarget = Reflect.getPrototypeOf(target);
|
|
480
|
-
while (accessors === void 0 && currentTarget !== null) {
|
|
481
|
-
accessors = accessorLookup.get(currentTarget);
|
|
482
|
-
currentTarget = Reflect.getPrototypeOf(currentTarget);
|
|
483
|
-
}
|
|
484
|
-
if (accessors === void 0) {
|
|
485
|
-
accessors = [];
|
|
486
|
-
}
|
|
487
|
-
else {
|
|
488
|
-
accessors = accessors.slice(0);
|
|
489
|
-
}
|
|
490
|
-
accessorLookup.set(target, accessors);
|
|
491
|
-
}
|
|
492
|
-
return accessors;
|
|
493
|
-
}
|
|
496
|
+
const getAccessors = createMetadataLocator();
|
|
494
497
|
class DefaultObservableAccessor {
|
|
495
498
|
constructor(name) {
|
|
496
499
|
this.name = name;
|
|
@@ -1358,8 +1361,10 @@ class HTMLView {
|
|
|
1358
1361
|
node.parentNode.insertBefore(this.fragment, node);
|
|
1359
1362
|
}
|
|
1360
1363
|
else {
|
|
1361
|
-
const parentNode = node.parentNode;
|
|
1362
1364
|
const end = this.lastChild;
|
|
1365
|
+
if (node.previousSibling === end)
|
|
1366
|
+
return;
|
|
1367
|
+
const parentNode = node.parentNode;
|
|
1363
1368
|
let current = this.firstChild;
|
|
1364
1369
|
let next;
|
|
1365
1370
|
while (current !== end) {
|
|
@@ -1765,6 +1770,16 @@ class StyleElementStyles extends ElementStyles {
|
|
|
1765
1770
|
}
|
|
1766
1771
|
}
|
|
1767
1772
|
|
|
1773
|
+
/**
|
|
1774
|
+
* Metadata used to configure a custom attribute's behavior.
|
|
1775
|
+
* @public
|
|
1776
|
+
*/
|
|
1777
|
+
const AttributeConfiguration = Object.freeze({
|
|
1778
|
+
/**
|
|
1779
|
+
* Locates all attribute configurations associated with a type.
|
|
1780
|
+
*/
|
|
1781
|
+
locate: createMetadataLocator(),
|
|
1782
|
+
});
|
|
1768
1783
|
/**
|
|
1769
1784
|
* A {@link ValueConverter} that converts to and from `boolean` values.
|
|
1770
1785
|
* @remarks
|
|
@@ -1905,7 +1920,7 @@ class AttributeDefinition {
|
|
|
1905
1920
|
*/
|
|
1906
1921
|
static collect(Owner, ...attributeLists) {
|
|
1907
1922
|
const attributes = [];
|
|
1908
|
-
attributeLists.push(Owner
|
|
1923
|
+
attributeLists.push(AttributeConfiguration.locate(Owner));
|
|
1909
1924
|
for (let i = 0, ii = attributeLists.length; i < ii; ++i) {
|
|
1910
1925
|
const list = attributeLists[i];
|
|
1911
1926
|
if (list === void 0) {
|
|
@@ -1935,9 +1950,7 @@ function attr(configOrTarget, prop) {
|
|
|
1935
1950
|
// - @attr({...opts})
|
|
1936
1951
|
config.property = $prop;
|
|
1937
1952
|
}
|
|
1938
|
-
|
|
1939
|
-
($target.constructor.attributes = []);
|
|
1940
|
-
attributes.push(config);
|
|
1953
|
+
AttributeConfiguration.locate($target.constructor).push(config);
|
|
1941
1954
|
}
|
|
1942
1955
|
if (arguments.length > 1) {
|
|
1943
1956
|
// Non invocation:
|
|
@@ -5011,4 +5024,4 @@ function provideVividDesignSystem(element) {
|
|
|
5011
5024
|
}
|
|
5012
5025
|
const designSystem = provideVividDesignSystem();
|
|
5013
5026
|
|
|
5014
|
-
export {
|
|
5027
|
+
export { AttributeConfiguration as A, DOM as D, FoundationElement as F, HTMLDirective as H, Observable as O, SubscriberSet as S, __decorate as _, attr as a, __metadata as b, __classPrivateFieldGet as c, designSystem as d, AttachedBehaviorHTMLDirective as e, booleanConverter as f, emptyArray as g, html as h, HTMLView as i, __classPrivateFieldSet as j, nullableNumberConverter as n, observable as o, provideVividDesignSystem as p, volatile as v };
|
package/shared/index2.js
CHANGED
|
@@ -14,37 +14,27 @@ class Button extends Button$1 {
|
|
|
14
14
|
super(...arguments);
|
|
15
15
|
this.stacked = false;
|
|
16
16
|
}
|
|
17
|
-
|
|
18
17
|
}
|
|
19
|
-
|
|
20
18
|
__decorate([attr, __metadata("design:type", String)], Button.prototype, "connotation", void 0);
|
|
21
|
-
|
|
22
19
|
__decorate([attr, __metadata("design:type", String)], Button.prototype, "shape", void 0);
|
|
23
|
-
|
|
24
20
|
__decorate([attr, __metadata("design:type", String)], Button.prototype, "appearance", void 0);
|
|
25
|
-
|
|
26
21
|
__decorate([attr, __metadata("design:type", String)], Button.prototype, "density", void 0);
|
|
27
|
-
|
|
28
22
|
__decorate([attr({
|
|
29
23
|
mode: 'boolean',
|
|
30
24
|
attribute: 'stacked'
|
|
31
25
|
}), __metadata("design:type", Object)], Button.prototype, "stacked", void 0);
|
|
32
|
-
|
|
33
26
|
__decorate([attr, __metadata("design:type", String)], Button.prototype, "label", void 0);
|
|
34
|
-
|
|
35
27
|
applyMixins(Button, AffixIconWithTrailing);
|
|
36
28
|
|
|
37
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
29
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 31 Oct 2022 12:51:44 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 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)).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)).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)) {\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@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).density-condensed {\n --_button-block-size: 32px;\n font: var(--vvd-typography-base-condensed-bold);\n}\n.control:not(.stacked).density-condensed:not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 12px;\n}\n.control:not(.stacked).density-condensed .icon {\n font-size: 16px;\n}\n.control:not(.stacked).density-extended {\n --_button-block-size: 48px;\n font: var(--vvd-typography-base-extended-bold);\n}\n.control:not(.stacked).density-extended:not(.icon-only) {\n --_button-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:not(.stacked).density-extended .icon {\n font-size: 24px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) {\n --_button-block-size: 40px;\n font: var(--vvd-typography-base-bold);\n}\n.control:not(.stacked):not(.density-condensed, .density-extended):not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 16px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) .icon {\n font-size: 20px;\n}\n.control.stacked {\n flex-direction: column;\n justify-content: center;\n --_button-block-size: 68px;\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.control.stacked .icon {\n font-size: 20px;\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-trailing .icon {\n order: 1;\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}";
|
|
38
30
|
|
|
39
31
|
let _ = t => t,
|
|
40
|
-
|
|
41
|
-
|
|
32
|
+
_t;
|
|
42
33
|
const getAppearanceClassName = (appearance, disabled) => {
|
|
43
34
|
let className = `appearance-${appearance}`;
|
|
44
35
|
disabled && (className += ' disabled');
|
|
45
36
|
return className;
|
|
46
37
|
};
|
|
47
|
-
|
|
48
38
|
const getClasses = ({
|
|
49
39
|
connotation,
|
|
50
40
|
appearance,
|
|
@@ -56,7 +46,6 @@ const getClasses = ({
|
|
|
56
46
|
disabled,
|
|
57
47
|
stacked
|
|
58
48
|
}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`density-${density}`, Boolean(density)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing], ['stacked', Boolean(stacked)]);
|
|
59
|
-
|
|
60
49
|
const buttonTemplate = context => {
|
|
61
50
|
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
62
51
|
const focusTemplate = focusTemplateFactory(context);
|
package/shared/index3.js
CHANGED
|
@@ -2,9 +2,7 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h
|
|
|
2
2
|
import { c as classNames } from './class-names.js';
|
|
3
3
|
|
|
4
4
|
class Elevation extends FoundationElement {}
|
|
5
|
-
|
|
6
5
|
__decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
|
|
7
|
-
|
|
8
6
|
__decorate([attr({
|
|
9
7
|
attribute: 'no-shadow',
|
|
10
8
|
mode: 'boolean'
|
|
@@ -13,13 +11,11 @@ __decorate([attr({
|
|
|
13
11
|
var css_248z = ":host {\n display: contents;\n}\n\n.control {\n display: contents;\n}\n.control.dp-0 {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-4 {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n --_elevation-fill: var(--vvd-color-surface-8dp);\n --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n --_elevation-fill: var(--vvd-color-surface-16dp);\n --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n --_elevation-fill: var(--vvd-color-surface-2dp);\n --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n background: var(--_elevation-fill);\n filter: var(--_elevation-shadow);\n transition: background-color 0.15s linear, filter 0.15s linear;\n}\n.control.no-shadow ::slotted(*) {\n filter: none;\n}";
|
|
14
12
|
|
|
15
13
|
let _ = t => t,
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
_t;
|
|
18
15
|
const getClasses = ({
|
|
19
16
|
dp,
|
|
20
17
|
noShadow
|
|
21
18
|
}) => classNames('control', [`dp-${dp}`, Boolean(dp)], ['no-shadow', Boolean(noShadow)]);
|
|
22
|
-
|
|
23
19
|
const elevationTemplate = () => html(_t || (_t = _`
|
|
24
20
|
<div class="${0}" part="base">
|
|
25
21
|
<slot></slot>
|
package/shared/index4.js
CHANGED
|
@@ -51,17 +51,15 @@ __decorate([
|
|
|
51
51
|
attr
|
|
52
52
|
], Divider$1.prototype, "orientation", void 0);
|
|
53
53
|
|
|
54
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
54
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 31 Oct 2022 12:51:44 GMT\n */\n:host {\n display: block;\n}\n\n.base {\n display: block;\n background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n block-size: 1px;\n inline-size: 100%;\n}\n.base.vertical {\n block-size: 100%;\n inline-size: 1px;\n}";
|
|
55
55
|
|
|
56
56
|
class Divider extends Divider$1 {}
|
|
57
57
|
|
|
58
58
|
let _ = t => t,
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
_t;
|
|
61
60
|
const getClasses = ({
|
|
62
61
|
orientation
|
|
63
62
|
}) => classNames('base', [`${orientation}`, Boolean(orientation)]);
|
|
64
|
-
|
|
65
63
|
const DividerTemplate = () => html(_t || (_t = _`
|
|
66
64
|
<span
|
|
67
65
|
class="${0}"
|