@vonage/vivid 3.23.0 → 3.25.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/custom-elements.json +47 -9
- package/lib/action-group/action-group.d.ts +1 -1
- package/lib/avatar/avatar.d.ts +1 -1
- package/lib/checkbox/checkbox.d.ts +0 -1
- package/lib/data-grid/data-grid.d.ts +4 -0
- package/lib/dialog/dialog.d.ts +1 -0
- package/lib/listbox/listbox.d.ts +1 -1
- package/lib/menu/menu.d.ts +0 -1
- package/lib/menu-item/menu-item.d.ts +6 -0
- package/lib/menu-item/menu-item.template.d.ts +2 -3
- package/lib/number-field/number-field.d.ts +1 -1
- package/lib/select/select.d.ts +1 -1
- package/lib/text-field/text-field.d.ts +1 -1
- package/menu-item/index.js +1 -0
- package/package.json +1 -1
- package/shared/definition.js +1 -1
- package/shared/definition10.js +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition12.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 +1 -1
- package/shared/definition18.js +1 -1
- package/shared/definition19.js +1 -1
- package/shared/definition2.js +1 -1
- package/shared/definition21.js +1 -1
- package/shared/definition22.js +49 -20
- package/shared/definition23.js +5 -4
- package/shared/definition24.js +1 -1
- package/shared/definition25.js +1 -1
- package/shared/definition26.js +1 -1
- package/shared/definition27.js +1 -1
- package/shared/definition29.js +1 -1
- package/shared/definition30.js +6 -8
- package/shared/definition31.js +21 -11
- package/shared/definition33.js +4 -2
- package/shared/definition34.js +1 -1
- 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 +1 -1
- package/shared/definition40.js +1 -1
- package/shared/definition41.js +1 -1
- package/shared/definition42.js +1 -1
- package/shared/definition44.js +1 -1
- package/shared/definition45.js +1 -1
- package/shared/definition47.js +1 -1
- package/shared/definition48.js +1 -1
- package/shared/definition5.js +1 -1
- package/shared/definition50.js +1 -1
- package/shared/definition51.js +15 -4
- package/shared/definition52.js +1 -1
- package/shared/definition53.js +1 -1
- package/shared/definition54.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/patterns/form-elements/form-elements.d.ts +4 -4
- 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/text-field/index.js +2 -0
- package/vivid.api.json +21 -21
package/shared/definition22.js
CHANGED
|
@@ -24,7 +24,7 @@ const eventKeyDown = "keydown";
|
|
|
24
24
|
*
|
|
25
25
|
* @public
|
|
26
26
|
*/
|
|
27
|
-
const GenerateHeaderOptions = {
|
|
27
|
+
const GenerateHeaderOptions$1 = {
|
|
28
28
|
none: "none",
|
|
29
29
|
default: "default",
|
|
30
30
|
sticky: "sticky",
|
|
@@ -44,7 +44,7 @@ const DataGridCellTypes = {
|
|
|
44
44
|
*
|
|
45
45
|
* @public
|
|
46
46
|
*/
|
|
47
|
-
const DataGridRowTypes = {
|
|
47
|
+
const DataGridRowTypes$1 = {
|
|
48
48
|
default: "default",
|
|
49
49
|
header: "header",
|
|
50
50
|
stickyHeader: "sticky-header",
|
|
@@ -67,7 +67,7 @@ class DataGridRow$1 extends FoundationElement {
|
|
|
67
67
|
* @remarks
|
|
68
68
|
* HTML Attribute: row-type
|
|
69
69
|
*/
|
|
70
|
-
this.rowType = DataGridRowTypes.default;
|
|
70
|
+
this.rowType = DataGridRowTypes$1.default;
|
|
71
71
|
/**
|
|
72
72
|
* The base data for this row
|
|
73
73
|
*
|
|
@@ -201,10 +201,10 @@ class DataGridRow$1 extends FoundationElement {
|
|
|
201
201
|
}
|
|
202
202
|
updateItemTemplate() {
|
|
203
203
|
this.activeCellItemTemplate =
|
|
204
|
-
this.rowType === DataGridRowTypes.default &&
|
|
204
|
+
this.rowType === DataGridRowTypes$1.default &&
|
|
205
205
|
this.cellItemTemplate !== undefined
|
|
206
206
|
? this.cellItemTemplate
|
|
207
|
-
: this.rowType === DataGridRowTypes.default &&
|
|
207
|
+
: this.rowType === DataGridRowTypes$1.default &&
|
|
208
208
|
this.cellItemTemplate === undefined
|
|
209
209
|
? this.defaultCellItemTemplate
|
|
210
210
|
: this.headerCellItemTemplate !== undefined
|
|
@@ -274,7 +274,7 @@ class DataGrid$1 extends FoundationElement {
|
|
|
274
274
|
* @remarks
|
|
275
275
|
* HTML Attribute: generate-header
|
|
276
276
|
*/
|
|
277
|
-
this.generateHeader = GenerateHeaderOptions.default;
|
|
277
|
+
this.generateHeader = GenerateHeaderOptions$1.default;
|
|
278
278
|
/**
|
|
279
279
|
* The data being displayed in the grid
|
|
280
280
|
*
|
|
@@ -571,7 +571,7 @@ class DataGrid$1 extends FoundationElement {
|
|
|
571
571
|
const thisRow = this.rowElements[newFocusRowIndex];
|
|
572
572
|
if (thisRow.offsetTop + thisRow.offsetHeight > currentGridBottom) {
|
|
573
573
|
let stickyHeaderOffset = 0;
|
|
574
|
-
if (this.generateHeader === GenerateHeaderOptions.sticky &&
|
|
574
|
+
if (this.generateHeader === GenerateHeaderOptions$1.sticky &&
|
|
575
575
|
this.generatedHeader !== null) {
|
|
576
576
|
stickyHeaderOffset = this.generatedHeader.clientHeight;
|
|
577
577
|
}
|
|
@@ -616,16 +616,16 @@ class DataGrid$1 extends FoundationElement {
|
|
|
616
616
|
this.removeChild(this.generatedHeader);
|
|
617
617
|
this.generatedHeader = null;
|
|
618
618
|
}
|
|
619
|
-
if (this.generateHeader !== GenerateHeaderOptions.none &&
|
|
619
|
+
if (this.generateHeader !== GenerateHeaderOptions$1.none &&
|
|
620
620
|
this.rowsData.length > 0) {
|
|
621
621
|
const generatedHeaderElement = document.createElement(this.rowElementTag);
|
|
622
622
|
this.generatedHeader = generatedHeaderElement;
|
|
623
623
|
this.generatedHeader.columnDefinitions = this.columnDefinitions;
|
|
624
624
|
this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
|
|
625
625
|
this.generatedHeader.rowType =
|
|
626
|
-
this.generateHeader === GenerateHeaderOptions.sticky
|
|
627
|
-
? DataGridRowTypes.stickyHeader
|
|
628
|
-
: DataGridRowTypes.header;
|
|
626
|
+
this.generateHeader === GenerateHeaderOptions$1.sticky
|
|
627
|
+
? DataGridRowTypes$1.stickyHeader
|
|
628
|
+
: DataGridRowTypes$1.header;
|
|
629
629
|
if (this.firstChild !== null || this.rowsPlaceholder !== null) {
|
|
630
630
|
this.insertBefore(generatedHeaderElement, this.firstChild !== null ? this.firstChild : this.rowsPlaceholder);
|
|
631
631
|
}
|
|
@@ -910,9 +910,9 @@ __decorate([
|
|
|
910
910
|
|
|
911
911
|
var css_248z$2 = ":host {\n display: block;\n}\n\n:host([generate-header=sticky]) {\n max-block-size: 400px;\n}\n\n.base {\n position: relative;\n overflow: auto;\n block-size: inherit;\n inline-size: 100%;\n max-block-size: inherit;\n}\n.base::-webkit-scrollbar {\n display: none;\n}";
|
|
912
912
|
|
|
913
|
-
var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
913
|
+
var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 GMT\n */\n.base {\n display: grid;\n width: 100%;\n box-sizing: border-box;\n color: var(--vvd-color-canvas-text);\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-data-grid-row-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-data-grid-row-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-row-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-data-grid-row-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-data-grid-row-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-data-grid-row-cta-dim=var(--vvd-color-cta-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n /* @cssprop [--vvd-data-grid-row-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-data-grid-row-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-row-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-data-grid-row-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-data-grid-row-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-data-grid-row-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\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(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n:host(:is([aria-selected]):not([row-type=header])) .base {\n background-color: var(--_appearance-color-fill);\n}\n:host([row-type=sticky-header]) .base {\n position: sticky;\n z-index: 9;\n top: 0;\n background: var(--data-grid-row-background, var(--vvd-color-canvas));\n}\n:host([row-type=hidden-header]) .base {\n display: none;\n}";
|
|
914
914
|
|
|
915
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
915
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 GMT\n */\n:host {\n min-inline-size: 80px;\n}\n\n.base {\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--vvd-color-neutral-400);\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n color: var(--_appearance-color-text);\n font: var(--vvd-typography-base);\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-data-grid-cell-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-data-grid-cell-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-cell-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-data-grid-cell-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-data-grid-cell-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-data-grid-cell-cta-dim=var(--vvd-color-cta-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n /* @cssprop [--vvd-data-grid-cell-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-data-grid-cell-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-cell-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-data-grid-cell-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-data-grid-cell-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-data-grid-cell-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\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(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n:host(:is([aria-selected]):not([cell-type=columnheader])) .base {\n background-color: var(--_appearance-color-fill);\n}\n:host([cell-type=columnheader]) .base {\n border-color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base-bold);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.base:not(.active) > .focus-indicator {\n display: none;\n}\n\nslot {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}";
|
|
916
916
|
|
|
917
917
|
var aCallable = aCallable$1;
|
|
918
918
|
var toObject = toObject$1;
|
|
@@ -1100,6 +1100,14 @@ class DataGrid extends DataGrid$1 {
|
|
|
1100
1100
|
}
|
|
1101
1101
|
__classPrivateFieldGet(this, _DataGrid_resetSelection, "f").call(this);
|
|
1102
1102
|
}
|
|
1103
|
+
static generateColumns(rowData) {
|
|
1104
|
+
return Object.keys(rowData).map((property, index) => {
|
|
1105
|
+
return {
|
|
1106
|
+
columnDataKey: property,
|
|
1107
|
+
gridColumn: `${index}`
|
|
1108
|
+
};
|
|
1109
|
+
});
|
|
1110
|
+
}
|
|
1103
1111
|
}
|
|
1104
1112
|
_DataGrid_handleKeypress = new WeakMap(), _DataGrid_handleClick = new WeakMap(), _DataGrid_handleCellSelection = new WeakMap(), _DataGrid_handleRowSelection = new WeakMap(), _DataGrid_setSelectedState = new WeakMap(), _DataGrid_resetSelection = new WeakMap(), _DataGrid_initSelections = new WeakMap(), _DataGrid_instances = new WeakSet(), _DataGrid_selectedRows_get = function _DataGrid_selectedRows_get() {
|
|
1105
1113
|
return this.rowElements.filter(row => row.getAttribute('aria-selected') === 'true');
|
|
@@ -1124,6 +1132,22 @@ __decorate([attr({
|
|
|
1124
1132
|
attribute: 'aria-selected'
|
|
1125
1133
|
}), __metadata("design:type", Object)], DataGridRow.prototype, "ariaSelected", void 0);
|
|
1126
1134
|
|
|
1135
|
+
const GenerateHeaderOptions = {
|
|
1136
|
+
none: 'none',
|
|
1137
|
+
default: 'default',
|
|
1138
|
+
sticky: 'sticky'
|
|
1139
|
+
};
|
|
1140
|
+
const DataGridRowTypes = {
|
|
1141
|
+
default: 'default',
|
|
1142
|
+
header: 'header',
|
|
1143
|
+
stickyHeader: 'sticky-header'
|
|
1144
|
+
};
|
|
1145
|
+
const DataGridCellRole = {
|
|
1146
|
+
columnheader: 'columnheader',
|
|
1147
|
+
rowheader: 'rowheader',
|
|
1148
|
+
default: 'gridcell'
|
|
1149
|
+
};
|
|
1150
|
+
|
|
1127
1151
|
let _2$1 = t => t,
|
|
1128
1152
|
_t$2,
|
|
1129
1153
|
_t2$1;
|
|
@@ -1140,6 +1164,16 @@ function createRowItemTemplate(context) {
|
|
|
1140
1164
|
function getMultiSelectAriaState(x) {
|
|
1141
1165
|
return x.selectionMode === undefined || x.selectionMode === DataGridSelectionMode.none ? null : x.selectionMode.includes('multi') ? 'true' : 'false';
|
|
1142
1166
|
}
|
|
1167
|
+
function setHeaderRow(x) {
|
|
1168
|
+
var _a;
|
|
1169
|
+
if (x.columnDefinitions === null) {
|
|
1170
|
+
const headerRow = (_a = x.querySelector('[cell-type="columnheader"]')) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
1171
|
+
if (headerRow) {
|
|
1172
|
+
const rowType = x.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : x.generateHeader === GenerateHeaderOptions.default ? DataGridRowTypes.header : 'hidden-header';
|
|
1173
|
+
headerRow.setAttribute('row-type', rowType);
|
|
1174
|
+
}
|
|
1175
|
+
}
|
|
1176
|
+
}
|
|
1143
1177
|
const DataGridTemplate = context => {
|
|
1144
1178
|
const rowItemTemplate = createRowItemTemplate(context);
|
|
1145
1179
|
const rowTag = context.tagFor(DataGridRow);
|
|
@@ -1153,13 +1187,14 @@ const DataGridTemplate = context => {
|
|
|
1153
1187
|
${0}
|
|
1154
1188
|
>
|
|
1155
1189
|
<div class="base">
|
|
1190
|
+
${0}
|
|
1156
1191
|
<slot></slot>
|
|
1157
1192
|
</div>
|
|
1158
1193
|
</template>
|
|
1159
1194
|
`), getMultiSelectAriaState, () => rowTag, rowItemTemplate, children({
|
|
1160
1195
|
property: 'rowElements',
|
|
1161
1196
|
filter: elements('[role=row]')
|
|
1162
|
-
}));
|
|
1197
|
+
}), setHeaderRow);
|
|
1163
1198
|
};
|
|
1164
1199
|
|
|
1165
1200
|
class DataGridCell extends DataGridCell$1 {
|
|
@@ -1245,12 +1280,6 @@ const DataGridRowTemplate = context => {
|
|
|
1245
1280
|
}), x => x.ariaSelected === 'true' ? 'selected' : '', x => x.gridTemplateColumns, slotted('slottedCellElements'));
|
|
1246
1281
|
};
|
|
1247
1282
|
|
|
1248
|
-
const DataGridCellRole = {
|
|
1249
|
-
columnheader: 'columnheader',
|
|
1250
|
-
rowheader: 'rowheader',
|
|
1251
|
-
default: 'gridcell'
|
|
1252
|
-
};
|
|
1253
|
-
|
|
1254
1283
|
let _ = t => t,
|
|
1255
1284
|
_t;
|
|
1256
1285
|
function DataGridCellTemplate(context) {
|
package/shared/definition23.js
CHANGED
|
@@ -9,12 +9,13 @@ import { c as classNames } from './class-names.js';
|
|
|
9
9
|
|
|
10
10
|
var css_248z$1 = "dialog {\n position: absolute;\n left: 0; right: 0;\n width: -moz-fit-content;\n width: -webkit-fit-content;\n width: fit-content;\n height: -moz-fit-content;\n height: -webkit-fit-content;\n height: fit-content;\n margin: auto;\n border: solid;\n padding: 1em;\n background: white;\n color: black;\n display: block;\n}\n\ndialog:not([open]) {\n display: none;\n}\n\ndialog + .backdrop {\n position: fixed;\n top: 0; right: 0; bottom: 0; left: 0;\n background: rgba(0,0,0,0.1);\n}\n\n._dialog_overlay {\n position: fixed;\n top: 0; right: 0; bottom: 0; left: 0;\n}\n\ndialog.fixed {\n position: fixed;\n top: 50%;\n transform: translate(0, -50%);\n}";
|
|
11
11
|
|
|
12
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
12
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 GMT\n */\n.base {\n box-sizing: border-box;\n padding: 0;\n border: none;\n background-color: transparent;\n border-radius: 6px;\n color: var(--vvd-color-canvas-text);\n max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n max-inline-size: var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));\n min-inline-size: var(--dialog-min-inline-size, 280px);\n}\n@media not all and (min-width: 600px) {\n .base {\n --_dialog-default-max-inline-size: 90vw;\n }\n}\n@media (min-width: 600px) {\n .base {\n --_dialog-default-max-inline-size: 560px;\n }\n}\n.base:not(.modal) {\n z-index: var(--dialog-z-index, 1);\n}\n.base.modal {\n position: fixed;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);\n}\n.base.modal::backdrop {\n background-color: var(--vvd-color-canvas-text, currentColor);\n opacity: 0.5;\n}\n\n.main-wrapper {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n gap: 24px;\n padding-block: 24px;\n}\n.main-wrapper > * {\n box-sizing: border-box;\n}\n\n.header {\n display: grid;\n align-items: flex-start;\n justify-content: space-between;\n inline-size: 100%;\n padding-inline: 24px;\n}\n.base:not(.icon-placement-side) .header {\n grid-template-columns: 1fr auto;\n grid-template-rows: auto auto auto;\n}\n.base:not(.icon-placement-side) .header .icon {\n font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n grid-column: 1/2;\n grid-row: 1/2;\n line-height: 1;\n margin-block-end: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.icon-placement-side .header {\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto;\n}\n.base.icon-placement-side .header .icon {\n font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.icon-placement-side .header ::slotted(*),\n.base.icon-placement-side .header .icon {\n grid-column: 1/2;\n grid-row: 1/-1;\n margin-inline-end: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n}\n.header.border {\n position: relative;\n}\n.header.border::after {\n position: absolute;\n bottom: -24px;\n left: 0;\n background-color: var(--vvd-color-neutral-200);\n block-size: 1px;\n content: \"\";\n inline-size: 100%;\n}\n.base.hide-body .header.border::after {\n content: none;\n}\n\n.body:not(.full-width) {\n padding-inline: 24px;\n}\n.hide-body .body {\n display: none;\n}\n\n.footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding-inline: 24px;\n}\n.hide-footer .footer {\n display: none;\n}\n.footer .actions {\n display: flex;\n align-self: flex-end;\n gap: 8px;\n}\n\n.dismiss-button {\n flex-shrink: 0;\n grid-column: -2/-1;\n grid-row: 1/-1;\n margin-block-start: -8px;\n margin-inline-end: -8px;\n margin-inline-start: 4px;\n}\n\n.headline {\n font: var(--vvd-typography-heading-4);\n}\n\n.subtitle {\n font: var(--vvd-typography-base);\n}\n\nslot[name=main] {\n display: block;\n overflow: hidden auto;\n max-width: inherit;\n max-height: inherit;\n border-radius: inherit;\n}";
|
|
13
13
|
|
|
14
14
|
var _Dialog_instances, _Dialog_modal, _Dialog_dialogElement, _Dialog_dialog_get, _Dialog_handleScrimClick, _Dialog_handleInternalFormSubmit, _Dialog_handleModal;
|
|
15
|
+
const isDialogSupported = Boolean(HTMLDialogElement && HTMLDialogElement.prototype.showModal);
|
|
15
16
|
let dialogPolyfill;
|
|
16
17
|
(async () => {
|
|
17
|
-
if (!
|
|
18
|
+
if (!isDialogSupported) {
|
|
18
19
|
delete window.HTMLDialogElement;
|
|
19
20
|
dialogPolyfill = await import('./dialog-polyfill.esm.js');
|
|
20
21
|
}
|
|
@@ -82,9 +83,9 @@ class Dialog extends FoundationElement {
|
|
|
82
83
|
this.open = true;
|
|
83
84
|
}
|
|
84
85
|
showModal() {
|
|
86
|
+
__classPrivateFieldGet(this, _Dialog_instances, "m", _Dialog_handleModal).call(this, true);
|
|
85
87
|
__classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).showModal();
|
|
86
88
|
this.open = true;
|
|
87
|
-
__classPrivateFieldGet(this, _Dialog_instances, "m", _Dialog_handleModal).call(this, true);
|
|
88
89
|
}
|
|
89
90
|
connectedCallback() {
|
|
90
91
|
super.connectedCallback();
|
|
@@ -230,7 +231,7 @@ const DialogTemplate = context => {
|
|
|
230
231
|
const dialogDefinition = Dialog.compose({
|
|
231
232
|
baseName: 'dialog',
|
|
232
233
|
template: DialogTemplate,
|
|
233
|
-
styles: [css_248z, css_248z$1]
|
|
234
|
+
styles: isDialogSupported ? [css_248z] : [css_248z, css_248z$1]
|
|
234
235
|
});
|
|
235
236
|
const dialogRegistries = [dialogDefinition(), ...iconRegistries, ...buttonRegistries, ...elevationRegistries];
|
|
236
237
|
const registerDialog = registerFactory(dialogRegistries);
|
package/shared/definition24.js
CHANGED
|
@@ -51,7 +51,7 @@ __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 Thu,
|
|
54
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 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
|
|
package/shared/definition25.js
CHANGED
|
@@ -5,7 +5,7 @@ import { s as slotted } from './slotted.js';
|
|
|
5
5
|
import { w as when } from './when.js';
|
|
6
6
|
import { c as classNames } from './class-names.js';
|
|
7
7
|
|
|
8
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
8
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 GMT\n */\n:host {\n display: block;\n}\n\n.base {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n block-size: 100%;\n gap: 24px;\n}\n\n.icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--vvd-color-neutral-100);\n block-size: 120px;\n border-radius: 50%;\n inline-size: 120px;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n font: var(--vvd-typography-base);\n gap: 8px;\n text-align: center;\n}\n\nheader {\n font: var(--vvd-typography-base-bold);\n}\n\n.actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n.base.no-actions .actions {\n display: none;\n}";
|
|
9
9
|
|
|
10
10
|
class EmptyState extends FoundationElement {}
|
|
11
11
|
__decorate([attr, __metadata("design:type", String)], EmptyState.prototype, "headline", void 0);
|
package/shared/definition26.js
CHANGED
|
@@ -8,7 +8,7 @@ import { f as focusTemplateFactory } from './focus2.js';
|
|
|
8
8
|
import { r as ref } from './ref.js';
|
|
9
9
|
import { c as classNames } from './class-names.js';
|
|
10
10
|
|
|
11
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
11
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 GMT\n */\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background: var(--_appearance-color-fill, var(--_elevation-fill));\n block-size: var(--_fab-block-size);\n border-radius: var(--_fab-border-radius);\n color: var(--_appearance-color-text, var(--vvd-color-canvas-text));\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n font: var(--vvd-typography-base-bold);\n transition: background-color 0.15s linear, filter 0.15s linear;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-accent {\n /* @cssprop [--vvd-fab-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-fab-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-fab-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-fab-accent-contrast=var(--vvd-color-neutral-800)] */\n --_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-fab-accent-fierce=var(--vvd-color-neutral-700)] */\n --_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));\n /* @cssprop [--vvd-fab-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text));\n}\n.control.connotation-cta {\n /* @cssprop [--vvd-fab-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-fab-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-fab-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-fab-cta-contrast=var(--vvd-color-cta-800)] */\n --_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));\n /* @cssprop [--vvd-fab-cta-fierce=var(--vvd-color-cta-700)] */\n --_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));\n /* @cssprop [--vvd-fab-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600));\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: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:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-fierce);\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.size-expanded {\n --_fab-border-radius: 30px;\n --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control:not(.size-expanded) {\n --_fab-border-radius: 24px;\n --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.icon-only {\n border-radius: 50%;\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(--_fab-block-size);\n }\n}\n.control:not(.icon-only) {\n --fab-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:disabled {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n cursor: not-allowed;\n}\n.control:not(:disabled) {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n cursor: pointer;\n}\n.control:not(:disabled):hover {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon {\n line-height: 1;\n}\n.icon-trailing .icon {\n order: 1;\n}\n.control.size-extended .icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16)) / 2.3333);\n}\n.control:not(.size-extended) .icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n}\n\n:not(:focus-visible) .focus-indicator {\n display: none;\n}";
|
|
12
12
|
|
|
13
13
|
class Fab extends Button {}
|
|
14
14
|
__decorate([attr, __metadata("design:type", String)], Fab.prototype, "connotation", void 0);
|
package/shared/definition27.js
CHANGED
|
@@ -2,7 +2,7 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h
|
|
|
2
2
|
import { E as Elevation, e as elevationRegistries } from './definition8.js';
|
|
3
3
|
import { c as classNames } from './class-names.js';
|
|
4
4
|
|
|
5
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
5
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 GMT\n */\n.base {\n z-index: 1;\n block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n font: var(--vvd-typography-heading-4);\n inline-size: 100%;\n}\n.base .header-content {\n display: inline-flex;\n align-items: center;\n column-gap: 4px;\n}\n\n.container {\n display: flex;\n box-sizing: border-box;\n justify-content: space-between;\n background-color: var(--header-bg-color, var(--vvd-color-canvas));\n block-size: inherit;\n color: var(--vvd-color-canvas-text);\n column-gap: 12px;\n padding-block: 8px;\n padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n --vvd-header-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}";
|
|
6
6
|
|
|
7
7
|
class Header extends FoundationElement {
|
|
8
8
|
constructor() {
|
package/shared/definition29.js
CHANGED
|
@@ -45,7 +45,7 @@ const ListboxTemplate = context => {
|
|
|
45
45
|
}));
|
|
46
46
|
};
|
|
47
47
|
|
|
48
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
48
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 GMT\n */\n:host {\n display: block;\n inline-size: fit-content;\n}\n\n:host(:focus-within) {\n outline: none;\n}\n\n.base {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: 4px;\n background-color: var(--_appearance-color-fill);\n border-radius: 6px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n contain: paint;\n gap: 4px;\n}\n.base {\n /* @cssprop [--vvd-listbox-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-listbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-listbox-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-listbox-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100));\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(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n\n.focus-indicator {\n pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n display: none;\n}\n\n.base.disabled ::slotted([role=option]) {\n --_option-appearance-color-text: var(--_appearance-color-outline);\n cursor: not-allowed;\n pointer-events: none;\n}";
|
|
49
49
|
|
|
50
50
|
const listboxDefinition = Listbox.compose({
|
|
51
51
|
baseName: 'listbox',
|
package/shared/definition30.js
CHANGED
|
@@ -292,7 +292,7 @@ __decorate([
|
|
|
292
292
|
observable
|
|
293
293
|
], Menu$1.prototype, "items", void 0);
|
|
294
294
|
|
|
295
|
-
var css_248z = ".base {\n max-block-size: var(--menu-block-size, 408px);\n max-inline-size: var(--menu-max-inline-size, 100%);\n min-inline-size: var(--menu-min-inline-size);\n overflow-x: hidden;\n overflow-y: auto;\n padding-block: 8px;\n}";
|
|
295
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 GMT\n */\n.base {\n max-block-size: var(--menu-block-size, 408px);\n max-inline-size: var(--menu-max-inline-size, 100%);\n min-inline-size: var(--menu-min-inline-size);\n overflow-x: hidden;\n overflow-y: auto;\n padding-block: 8px;\n}\n\n::slotted(a) {\n color: var(--vvd-color-canvas-text);\n text-decoration: none;\n}\n\n::slotted(a[role=menuitem]:focus) {\n display: block;\n border-radius: 6px;\n box-shadow: inset 0 0 0 3px currentColor;\n outline: 2px solid currentColor;\n outline-offset: -2px;\n}";
|
|
296
296
|
|
|
297
297
|
var _Menu_dismissOnClickOutside;
|
|
298
298
|
class Menu extends Menu$1 {
|
|
@@ -306,9 +306,6 @@ class Menu extends Menu$1 {
|
|
|
306
306
|
});
|
|
307
307
|
this.open = false;
|
|
308
308
|
this.autoDismiss = false;
|
|
309
|
-
this.popupOpenChanged = () => {
|
|
310
|
-
this.open = this._popup.open;
|
|
311
|
-
};
|
|
312
309
|
}
|
|
313
310
|
anchorChanged(prevAnchor, newAnchor) {
|
|
314
311
|
const prevAnchorEl = document.getElementById(prevAnchor);
|
|
@@ -345,10 +342,11 @@ let _ = t => t,
|
|
|
345
342
|
_t;
|
|
346
343
|
const MenuTemplate = context => {
|
|
347
344
|
const popupTag = context.tagFor(Popup);
|
|
345
|
+
function handlePopupEvents(x, state) {
|
|
346
|
+
x.open = state;
|
|
347
|
+
}
|
|
348
348
|
return html(_t || (_t = _`
|
|
349
|
-
<template
|
|
350
|
-
slot="${0}"
|
|
351
|
-
>
|
|
349
|
+
<template>
|
|
352
350
|
<${0}
|
|
353
351
|
:placement=${0}
|
|
354
352
|
:open=${0}
|
|
@@ -366,7 +364,7 @@ const MenuTemplate = context => {
|
|
|
366
364
|
<slot ${0}></slot>
|
|
367
365
|
</div>
|
|
368
366
|
</${0}>
|
|
369
|
-
</template>`),
|
|
367
|
+
</template>`), popupTag, x => x.placement, x => x.open, x => x.anchor, x => handlePopupEvents(x, true), x => handlePopupEvents(x, false), ref('_popup'), (x, c) => x.handleMenuKeyDown(c.event), (x, c) => x.handleFocusOut(c.event), slotted('items'), popupTag);
|
|
370
368
|
};
|
|
371
369
|
|
|
372
370
|
const menuDefinition = Menu.compose({
|
package/shared/definition31.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { F as FoundationElement, Y as DOM, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { i as iconRegistries } from './definition3.js';
|
|
3
3
|
import { f as focusRegistries } from './definition4.js';
|
|
4
|
+
import './es.object.assign.js';
|
|
4
5
|
import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
|
|
5
6
|
import { S as StartEnd } from './start-end.js';
|
|
6
7
|
import { D as Direction, g as getDirection } from './direction.js';
|
|
@@ -15,7 +16,7 @@ import { c as classNames } from './class-names.js';
|
|
|
15
16
|
* Menu items roles.
|
|
16
17
|
* @public
|
|
17
18
|
*/
|
|
18
|
-
const MenuItemRole = {
|
|
19
|
+
const MenuItemRole$1 = {
|
|
19
20
|
/**
|
|
20
21
|
* The menu item has a "menuitem" role
|
|
21
22
|
*/
|
|
@@ -33,9 +34,9 @@ const MenuItemRole = {
|
|
|
33
34
|
* @internal
|
|
34
35
|
*/
|
|
35
36
|
const roleForMenuItem = {
|
|
36
|
-
[MenuItemRole.menuitem]: "menuitem",
|
|
37
|
-
[MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
|
|
38
|
-
[MenuItemRole.menuitemradio]: "menuitemradio",
|
|
37
|
+
[MenuItemRole$1.menuitem]: "menuitem",
|
|
38
|
+
[MenuItemRole$1.menuitemcheckbox]: "menuitemcheckbox",
|
|
39
|
+
[MenuItemRole$1.menuitemradio]: "menuitemradio",
|
|
39
40
|
};
|
|
40
41
|
|
|
41
42
|
/**
|
|
@@ -71,7 +72,7 @@ class MenuItem$1 extends FoundationElement {
|
|
|
71
72
|
* @remarks
|
|
72
73
|
* HTML Attribute: role
|
|
73
74
|
*/
|
|
74
|
-
this.role = MenuItemRole.menuitem;
|
|
75
|
+
this.role = MenuItemRole$1.menuitem;
|
|
75
76
|
/**
|
|
76
77
|
* @internal
|
|
77
78
|
*/
|
|
@@ -170,10 +171,10 @@ class MenuItem$1 extends FoundationElement {
|
|
|
170
171
|
return;
|
|
171
172
|
}
|
|
172
173
|
switch (this.role) {
|
|
173
|
-
case MenuItemRole.menuitemcheckbox:
|
|
174
|
+
case MenuItemRole$1.menuitemcheckbox:
|
|
174
175
|
this.checked = !this.checked;
|
|
175
176
|
break;
|
|
176
|
-
case MenuItemRole.menuitem:
|
|
177
|
+
case MenuItemRole$1.menuitem:
|
|
177
178
|
// update submenu
|
|
178
179
|
this.updateSubmenu();
|
|
179
180
|
if (this.hasSubmenu) {
|
|
@@ -183,7 +184,7 @@ class MenuItem$1 extends FoundationElement {
|
|
|
183
184
|
this.$emit("change");
|
|
184
185
|
}
|
|
185
186
|
break;
|
|
186
|
-
case MenuItemRole.menuitemradio:
|
|
187
|
+
case MenuItemRole$1.menuitemradio:
|
|
187
188
|
if (!this.checked) {
|
|
188
189
|
this.checked = true;
|
|
189
190
|
}
|
|
@@ -281,8 +282,11 @@ __decorate([
|
|
|
281
282
|
], MenuItem$1.prototype, "submenu", void 0);
|
|
282
283
|
applyMixins(MenuItem$1, StartEnd);
|
|
283
284
|
|
|
284
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
285
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 GMT\n */\n@supports selector(:focus-visible) {\n :host(:focus) {\n outline: none;\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 box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n gap: 12px;\n inline-size: 100%;\n padding-block: 2px;\n padding-inline: 16px;\n}\n.base {\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(--_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-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base: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.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base {\n /* @cssprop [--vvd-menu-item-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-menu-item-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-menu-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-menu-item-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-menu-item-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));\n /* @cssprop [--vvd-menu-item-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-menu-item-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200));\n}\n.base:not(.two-lines) {\n min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base.two-lines {\n min-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n cursor: pointer;\n}\n.base.disabled {\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.focus-indicator {\n border-radius: 6px;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n display: none;\n}\n\n.icon {\n flex-shrink: 0;\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n line-height: 1;\n}\n\n.action,\n.decorative {\n display: flex;\n place-content: center;\n}\n\n.action {\n color: var(--_appearance-color-text);\n}\n.base.trailing .action {\n order: 1;\n margin-inline-start: auto;\n}\n\n.base:not(.disabled) .decorative {\n color: var(--vvd-color-neutral-600);\n}\n.base.disabled .decorative {\n color: var(--vvd-color-neutral-200);\n}\n.base.has-meta .decorative {\n order: 1;\n margin-inline-start: auto;\n}\n\n.text {\n display: flex;\n overflow: hidden;\n flex-direction: column;\n}\n\n.text-primary,\n.text-secondary {\n /* stylelint-disable value-no-vendor-prefix */\n display: -webkit-box;\n /* stylelint-enable value-no-vendor-prefix */\n overflow: hidden;\n -webkit-box-orient: vertical;\n color: var(--_appearance-color-text);\n font: var(--vvd-typography-base);\n}\n\n.text-primary {\n -webkit-line-clamp: var(--text-primary-line-clamp, 1);\n}\n.base.two-lines .text-primary {\n font: var(--vvd-typography-base-bold);\n}\n\n.text-secondary {\n -webkit-line-clamp: var(--text-secondary-line-clamp, 1);\n}\n.base.two-lines .text-secondary {\n color: var(--vvd-color-neutral-600);\n}";
|
|
285
286
|
|
|
287
|
+
const MenuItemRole = Object.assign(Object.assign({}, MenuItemRole$1), {
|
|
288
|
+
'presentation': 'presentation'
|
|
289
|
+
});
|
|
286
290
|
class MenuItem extends MenuItem$1 {}
|
|
287
291
|
__decorate([attr, __metadata("design:type", String)], MenuItem.prototype, "text", void 0);
|
|
288
292
|
__decorate([attr({
|
|
@@ -316,6 +320,12 @@ const getClasses = ({
|
|
|
316
320
|
icon,
|
|
317
321
|
metaSlottedContent
|
|
318
322
|
}) => classNames('base', ['disabled', Boolean(disabled)], ['selected', role !== MenuItemRole.menuitem && Boolean(checked)], ['trailing', role !== MenuItemRole.menuitem && Boolean(icon)], ['expanded', Boolean(expanded)], ['item-checkbox', role === MenuItemRole.menuitemcheckbox], ['item-radio', role === MenuItemRole.menuitemradio], ['two-lines', Boolean(text === null || text === void 0 ? void 0 : text.length) && Boolean(textSecondary === null || textSecondary === void 0 ? void 0 : textSecondary.length)], ['has-meta', Boolean(metaSlottedContent === null || metaSlottedContent === void 0 ? void 0 : metaSlottedContent.length)]);
|
|
323
|
+
function handleClick(x, {
|
|
324
|
+
event
|
|
325
|
+
}) {
|
|
326
|
+
x.handleMenuItemClick(event);
|
|
327
|
+
return x.role === MenuItemRole.presentation;
|
|
328
|
+
}
|
|
319
329
|
const MenuItemTemplate = (context, definition) => {
|
|
320
330
|
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
321
331
|
const focusTemplate = focusTemplateFactory(context);
|
|
@@ -346,7 +356,7 @@ const MenuItemTemplate = (context, definition) => {
|
|
|
346
356
|
|
|
347
357
|
</div>
|
|
348
358
|
</template>
|
|
349
|
-
`), x => x.role !== MenuItemRole.menuitem ? x.checked : void 0, x => x.disabled, x => x.expanded, (x, c) => x.handleMenuItemKeyDown(c.event),
|
|
359
|
+
`), x => x.role !== MenuItemRole.menuitem ? x.checked : void 0, x => x.disabled, x => x.expanded, (x, c) => x.handleMenuItemKeyDown(c.event), handleClick, (x, c) => x.handleMouseOver(c.event), (x, c) => x.handleMouseOut(c.event), getClasses, when(x => x.hasSubmenu, html(_t2 || (_t2 = _`
|
|
350
360
|
<div
|
|
351
361
|
class="expand-collapse-glyph-container"
|
|
352
362
|
>
|
|
@@ -370,4 +380,4 @@ const menuItemDefinition = MenuItem.compose({
|
|
|
370
380
|
const menuItemRegistries = [menuItemDefinition(), ...iconRegistries, ...focusRegistries];
|
|
371
381
|
const registerMenuItem = registerFactory(menuItemRegistries);
|
|
372
382
|
|
|
373
|
-
export { MenuItem$1 as M, MenuItemRole as a, registerMenuItem as b, menuItemDefinition as c, menuItemRegistries as m, roleForMenuItem as r };
|
|
383
|
+
export { MenuItem$1 as M, MenuItemRole$1 as a, registerMenuItem as b, menuItemDefinition as c, menuItemRegistries as m, roleForMenuItem as r };
|
package/shared/definition33.js
CHANGED
|
@@ -8,7 +8,7 @@ import { f as focusTemplateFactory } from './focus2.js';
|
|
|
8
8
|
import { w as when } from './when.js';
|
|
9
9
|
import { r as ref } from './ref.js';
|
|
10
10
|
|
|
11
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
11
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 GMT\n */\n.control {\n position: relative;\n display: 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 cursor: pointer;\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(: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, :hover, .hover)) {\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 {\n /* @cssprop [--vvd-nav-disclosure-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-nav-disclosure-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-nav-disclosure-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-nav-disclosure-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-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 .toggleIcon {\n margin-inline-start: auto;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n display: none;\n}\n\n.icon {\n font-size: 20px;\n line-height: 1;\n}\n.control:not(.icon-only) .icon {\n color: var(--vvd-color-neutral-600);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n border-inline-start: 1px solid var(--vvd-color-neutral-200);\n gap: 4px;\n margin-block: 4px;\n margin-inline-start: 20px;\n padding-inline-start: 12px;\n}\n\ndetails > summary {\n list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n display: none;\n}";
|
|
12
12
|
|
|
13
13
|
var _NavDisclosure_onToggle;
|
|
14
14
|
class NavDisclosure extends FoundationElement {
|
|
@@ -17,7 +17,9 @@ class NavDisclosure extends FoundationElement {
|
|
|
17
17
|
this.open = false;
|
|
18
18
|
_NavDisclosure_onToggle.set(this, () => {
|
|
19
19
|
this.open = this.details.open;
|
|
20
|
-
this.$emit('toggle'
|
|
20
|
+
this.$emit('toggle', undefined, {
|
|
21
|
+
bubbles: false
|
|
22
|
+
});
|
|
21
23
|
});
|
|
22
24
|
}
|
|
23
25
|
connectedCallback() {
|
package/shared/definition34.js
CHANGED
|
@@ -6,7 +6,7 @@ import { T as TextAnchor } from './text-anchor.js';
|
|
|
6
6
|
import { a as applyMixins } from './apply-mixins.js';
|
|
7
7
|
import { t as textAnchorTemplate } from './text-anchor.template.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
9
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 GMT\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 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(: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, :hover, .hover)) {\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) {\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-nav-item-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-nav-item-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-nav-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-nav-item-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-nav-item-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control.icon-only {\n display: flex;\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n place-content: center;\n}\n.control:not(.icon-only) {\n padding-inline: 16px;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n display: none;\n}\n\n.icon {\n font-size: 20px;\n line-height: 1;\n}";
|
|
10
10
|
|
|
11
11
|
let _$1 = t => t,
|
|
12
12
|
_t$1;
|
package/shared/definition35.js
CHANGED
|
@@ -8,7 +8,7 @@ import { I as Icon } from './icon.js';
|
|
|
8
8
|
import { w as when } from './when.js';
|
|
9
9
|
import { c as classNames } from './class-names.js';
|
|
10
10
|
|
|
11
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
11
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 20 Jul 2023 11:19:49 GMT\n */\n.base {\n display: flex;\n align-items: flex-start;\n padding: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\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 column-gap: 16px;\n}\n.base.connotation-success {\n /* @cssprop [--vvd-note-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-note-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-note-success-intermediate=var(--vvd-color-success-500)] */\n --_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));\n /* @cssprop [--vvd-note-success-backdrop=var(--vvd-color-success-50)] */\n --_connotation-color-backdrop: var(--vvd-note-success-backdrop, var(--vvd-color-success-50));\n}\n.base.connotation-information {\n /* @cssprop [--vvd-note-information-primary=var(--vvd-color-information-500)] */\n --_connotation-color-primary: var(--vvd-note-information-primary, var(--vvd-color-information-500));\n /* @cssprop [--vvd-note-information-intermediate=var(--vvd-color-information-500)] */\n --_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));\n /* @cssprop [--vvd-note-information-backdrop=var(--vvd-color-information-50)] */\n --_connotation-color-backdrop: var(--vvd-note-information-backdrop, var(--vvd-color-information-50));\n}\n.base.connotation-alert {\n /* @cssprop [--vvd-note-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-note-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-note-alert-intermediate=var(--vvd-color-alert-500)] */\n --_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-note-alert-backdrop=var(--vvd-color-alert-50)] */\n --_connotation-color-backdrop: var(--vvd-note-alert-backdrop, var(--vvd-color-alert-50));\n}\n.base.connotation-warning {\n /* @cssprop [--vvd-note-warning-primary=var(--vvd-color-warning-300)] */\n --_connotation-color-primary: var(--vvd-note-warning-primary, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-note-warning-intermediate=var(--vvd-color-warning-300)] */\n --_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-note-warning-backdrop=var(--vvd-color-warning-50)] */\n --_connotation-color-backdrop: var(--vvd-note-warning-backdrop, var(--vvd-color-warning-50));\n}\n.base:not(.connotation-success, .connotation-information, .connotation-alert, .connotation-warning) {\n /* @cssprop [--vvd-note-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-note-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-note-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-note-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-note-accent-backdrop, var(--vvd-color-canvas));\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@supports (contain: content) {\n .base {\n contain: content;\n }\n}\n@supports not (contain: content) {\n .base {\n overflow: hidden;\n }\n}\n\n.icon {\n color: var(--_appearance-color-outline);\n font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n\n.text {\n display: flex;\n min-height: 24px;\n flex-direction: column;\n flex-grow: 1;\n align-items: flex-start;\n justify-content: center;\n gap: 4px;\n text-align: start;\n}\n.text .headline {\n font: var(--vvd-typography-base-bold);\n}\n.text .message {\n font: var(--vvd-typography-base);\n}";
|
|
12
12
|
|
|
13
13
|
class Note extends FoundationElement {}
|
|
14
14
|
__decorate([attr, __metadata("design:type", String)], Note.prototype, "headline", void 0);
|