@vonage/vivid 3.25.0 → 3.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/accordion/index.js +0 -1
- package/accordion-item/index.js +0 -1
- package/alert/index.js +0 -1
- package/avatar/index.js +0 -1
- package/badge/index.js +0 -1
- package/banner/index.js +0 -1
- package/breadcrumb-item/index.js +0 -1
- package/button/index.js +0 -1
- package/card/index.js +0 -1
- package/checkbox/index.js +0 -1
- package/combobox/index.js +0 -1
- package/custom-elements.json +335 -1
- package/data-grid/index.js +7 -2
- package/dialog/index.js +0 -1
- package/empty-state/index.js +0 -1
- package/fab/index.js +0 -1
- package/file-picker/index.js +26 -0
- package/header/index.js +1 -1
- package/icon/index.js +0 -1
- package/index.js +5 -6
- package/layout/index.js +1 -1
- package/lib/components.d.ts +1 -3
- package/lib/data-grid/data-grid-cell.d.ts +14 -1
- package/lib/data-grid/data-grid.options.d.ts +7 -0
- package/lib/file-picker/definition.d.ts +3 -0
- package/lib/file-picker/file-picker.d.ts +22 -0
- package/lib/file-picker/file-picker.template.d.ts +4 -0
- package/lib/file-picker/index.d.ts +1 -0
- package/lib/menu/menu.d.ts +1 -0
- package/listbox/index.js +56 -11
- package/menu/index.js +0 -1
- package/menu-item/index.js +0 -1
- package/nav-disclosure/index.js +0 -1
- package/nav-item/index.js +0 -1
- package/note/index.js +0 -1
- package/number-field/index.js +0 -1
- package/option/index.js +0 -1
- package/package.json +2 -1
- package/pagination/index.js +0 -1
- package/popup/index.js +0 -1
- package/select/index.js +0 -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 +2 -2
- 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/definition20.js +1 -1
- package/shared/definition21.js +1 -1
- package/shared/definition22.js +68 -21
- package/shared/definition23.js +1 -1
- package/shared/definition24.js +1 -1
- package/shared/definition25.js +1 -1
- package/shared/definition26.js +1 -1
- package/shared/definition27.js +2285 -45
- package/shared/definition28.js +46 -36
- package/shared/definition29.js +39 -49
- package/shared/definition30.js +16 -3
- package/shared/definition31.js +5 -6
- package/shared/definition33.js +1 -1
- package/shared/definition34.js +1 -1
- package/shared/definition35.js +1 -1
- package/shared/definition36.js +1 -1
- package/shared/definition37.js +2 -2
- package/shared/definition38.js +2 -2
- 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/definition43.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 +5 -7
- package/shared/definition52.js +2 -2
- package/shared/definition53.js +1 -1
- package/shared/definition54.js +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition7.js +4 -3
- package/shared/definition8.js +1 -1
- package/shared/definition9.js +1 -1
- package/shared/es.object.assign.js +1 -1
- package/shared/es.regexp.to-string.js +1 -1
- package/shared/es.string.includes.js +1 -1
- package/shared/form-elements.js +1 -1
- package/shared/icon.js +17 -13
- package/shared/index.js +1 -1
- package/shared/patterns/form-elements/form-elements.d.ts +4 -4
- package/shared/string-trim.js +1 -1
- package/shared/text-field.js +1 -1
- package/shared/to-string.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/switch/index.js +0 -1
- package/tab/index.js +0 -1
- package/tabs/index.js +0 -1
- package/tag/index.js +0 -1
- package/text-anchor/index.js +0 -1
- package/text-area/index.js +0 -1
- package/text-field/index.js +0 -1
- package/toggletip/index.js +0 -1
- package/tooltip/index.js +0 -1
- package/tree-item/index.js +0 -1
- package/vivid.api.json +135 -928
- package/shared/engine-is-node.js +0 -8
package/shared/definition2.js
CHANGED
|
@@ -76,7 +76,7 @@ __decorate([
|
|
|
76
76
|
], AccordionItem$1.prototype, "id", void 0);
|
|
77
77
|
applyMixins(AccordionItem$1, StartEnd);
|
|
78
78
|
|
|
79
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
79
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n:host {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n}\n\n.heading-container {\n margin: 0;\n}\n\n.heading-button {\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n padding: 16px;\n border: none;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n cursor: pointer;\n text-align: left;\n}\n.heading-button {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.heading-button:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.heading-button:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.heading-button {\n /* @cssprop [--vvd-accordion-item-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-accordion-item-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-accordion-item-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n .heading-button:focus {\n outline: none;\n }\n}\n.heading-button.size-condensed {\n font: var(--vvd-typography-base-bold);\n gap: 12px;\n}\n.heading-button:not(.size-condensed) {\n font: var(--vvd-typography-heading-4);\n gap: 16px;\n}\n\n.heading-content {\n flex: auto;\n}\n\n.meta {\n overflow: hidden;\n max-width: 20%;\n flex-shrink: 0;\n color: var(--vvd-color-neutral-600);\n text-align: end;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.heading-button:not(.size-condensed) .meta {\n font: var(--vvd-typography-base-bold);\n}\n.heading-button.size-condensed .meta {\n font: var(--vvd-typography-base-condensed-bold);\n}\n\n.region {\n display: none;\n padding: 8px 32px 24px 16px;\n}\n.region:not(.size-condensed).padded {\n padding-inline-start: 52px;\n}\n:host([expanded]) .region {\n display: block;\n}\n.region.size-condensed.padded {\n padding-inline-start: 44px;\n}\n\n.icon {\n color: var(--vvd-color-neutral-600);\n}\n.heading-button:not(.size-condensed) .icon {\n font: inherit;\n}\n.heading-button.size-condensed .icon {\n font: var(--vvd-typography-base-extended);\n}\n:host(:not([icon-trailing])) .icon:last-of-type {\n color: var(--_appearance-color-text);\n}\n\nbutton:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
|
|
80
80
|
|
|
81
81
|
class AccordionItem extends AccordionItem$1 {
|
|
82
82
|
constructor() {
|
package/shared/definition20.js
CHANGED
|
@@ -1570,4 +1570,4 @@ const popupDefinition = Popup.compose({
|
|
|
1570
1570
|
const popupRegistries = [popupDefinition(), ...elevationRegistries, ...buttonRegistries];
|
|
1571
1571
|
const registerPopup = registerFactory(popupRegistries);
|
|
1572
1572
|
|
|
1573
|
-
export { Popup as P,
|
|
1573
|
+
export { Popup as P, popupRegistries as p, registerPopup as r };
|
package/shared/definition21.js
CHANGED
|
@@ -261,7 +261,7 @@ const ListboxOptionTemplate = context => {
|
|
|
261
261
|
`), x => x.ariaChecked, x => x.ariaDisabled, x => x.ariaPosInSet, x => x.ariaSelected, x => x.ariaSetSize, getClasses, () => focusTemplate, when(x => x.icon, html(_t2 || (_t2 = _`${0}`), x => affixIconTemplate(x.icon))), when(x => x.text, html(_t3 || (_t3 = _`<div class="text">${0}</div>`), x => x.text)));
|
|
262
262
|
};
|
|
263
263
|
|
|
264
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
264
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n.base {\n position: relative; /* this is needed for the focus */\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(--_option-appearance-color-text, var(--_appearance-color-text));\n font: var(--vvd-typography-base);\n gap: 12px;\n hyphens: auto;\n inline-size: 100%;\n min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n padding-inline: 16px;\n vertical-align: middle;\n word-break: break-word;\n}\n.base {\n /* @cssprop [--vvd-option-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-option-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-option-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-option-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-option-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));\n /* @cssprop [--vvd-option-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-option-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-option-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(: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@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.base .text {\n font: var(--vvd-typography-base);\n}\n\nslot[name=icon] {\n font-size: 20px;\n line-height: 1;\n}\n.base:not(.disabled, .selected) slot[name=icon] {\n color: var(--vvd-color-neutral-600);\n}\n\n.focus-indicator {\n --focus-stroke-color: var(--vvd-color-neutral-500);\n --focus-stroke-gap-color: transparent;\n}\n:host(:not([aria-checked=true])) .focus-indicator {\n display: none;\n}";
|
|
265
265
|
|
|
266
266
|
const listboxOptionDefinition = ListboxOption.compose({
|
|
267
267
|
baseName: 'option',
|
package/shared/definition22.js
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { F as FoundationElement, _ as __decorate, a as attr, o as observable, Y as DOM, h as html,
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, a as attr, o as observable, Y as DOM, h as html, v as aCallable$1, a2 as toObject$1, a3 as indexedObject, Q as lengthOfArrayLike$1, l as fails$1, G as _export, E as engineV8Version, V as __classPrivateFieldGet, b as __metadata, r as registerFactory } from './index.js';
|
|
2
|
+
import { i as iconRegistries } from './definition3.js';
|
|
2
3
|
import './es.string.includes.js';
|
|
3
4
|
import './es.regexp.to-string.js';
|
|
4
|
-
import { e as engineIsNode } from './
|
|
5
|
+
import { e as engineIsNode, I as Icon } from './icon.js';
|
|
5
6
|
import { k as keyEnd, a as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, b as keyArrowDown, c as keyArrowUp, f as keyEscape, m as keyFunction2, d as keyEnter } from './key-codes.js';
|
|
6
7
|
import { R as RepeatDirective } from './repeat.js';
|
|
7
8
|
import { e as elements } from './node-observation.js';
|
|
8
9
|
import { c as children } from './children.js';
|
|
9
10
|
import { s as slotted } from './slotted.js';
|
|
10
11
|
import { f as focusTemplateFactory } from './focus2.js';
|
|
12
|
+
import { w as when } from './when.js';
|
|
11
13
|
|
|
12
14
|
/**
|
|
13
15
|
* This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
|
|
@@ -910,9 +912,9 @@ __decorate([
|
|
|
910
912
|
|
|
911
913
|
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
914
|
|
|
913
|
-
var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
915
|
+
var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 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([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}\n:host(:is([aria-selected]):not([row-type=header])) .base {\n background-color: var(--_appearance-color-fill);\n}";
|
|
914
916
|
|
|
915
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu,
|
|
917
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 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([cell-type=columnheader]) .base {\n border-color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base-bold);\n}\n:host(:is([aria-selected]):not([cell-type=columnheader])) .base {\n background-color: var(--_appearance-color-fill);\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}\n\n.header-icon {\n margin-inline-start: auto;\n}";
|
|
916
918
|
|
|
917
919
|
var aCallable = aCallable$1;
|
|
918
920
|
var toObject = toObject$1;
|
|
@@ -1132,6 +1134,12 @@ __decorate([attr({
|
|
|
1132
1134
|
attribute: 'aria-selected'
|
|
1133
1135
|
}), __metadata("design:type", Object)], DataGridRow.prototype, "ariaSelected", void 0);
|
|
1134
1136
|
|
|
1137
|
+
const DataGridCellSortStates = {
|
|
1138
|
+
none: 'none',
|
|
1139
|
+
ascending: 'ascending',
|
|
1140
|
+
descending: 'descending',
|
|
1141
|
+
other: 'other'
|
|
1142
|
+
};
|
|
1135
1143
|
const GenerateHeaderOptions = {
|
|
1136
1144
|
none: 'none',
|
|
1137
1145
|
default: 'default',
|
|
@@ -1148,12 +1156,12 @@ const DataGridCellRole = {
|
|
|
1148
1156
|
default: 'gridcell'
|
|
1149
1157
|
};
|
|
1150
1158
|
|
|
1151
|
-
let _2$
|
|
1159
|
+
let _2$2 = t => t,
|
|
1152
1160
|
_t$2,
|
|
1153
|
-
_t2$
|
|
1161
|
+
_t2$2;
|
|
1154
1162
|
function createRowItemTemplate(context) {
|
|
1155
1163
|
const rowTag = context.tagFor(DataGridRow);
|
|
1156
|
-
return html(_t$2 || (_t$2 = _2$
|
|
1164
|
+
return html(_t$2 || (_t$2 = _2$2`
|
|
1157
1165
|
<${0}
|
|
1158
1166
|
:rowData="${0}"
|
|
1159
1167
|
:cellItemTemplate="${0}"
|
|
@@ -1174,14 +1182,20 @@ function setHeaderRow(x) {
|
|
|
1174
1182
|
}
|
|
1175
1183
|
}
|
|
1176
1184
|
}
|
|
1185
|
+
function handleColumnSort(_, {
|
|
1186
|
+
event
|
|
1187
|
+
}) {
|
|
1188
|
+
event.stopPropagation();
|
|
1189
|
+
}
|
|
1177
1190
|
const DataGridTemplate = context => {
|
|
1178
1191
|
const rowItemTemplate = createRowItemTemplate(context);
|
|
1179
1192
|
const rowTag = context.tagFor(DataGridRow);
|
|
1180
|
-
return html(_t2$
|
|
1193
|
+
return html(_t2$2 || (_t2$2 = _2$2`
|
|
1181
1194
|
<template
|
|
1182
1195
|
aria-multiselectable="${0}"
|
|
1183
1196
|
role="grid"
|
|
1184
1197
|
tabindex="0"
|
|
1198
|
+
@sort="${0}"
|
|
1185
1199
|
:rowElementTag="${0}"
|
|
1186
1200
|
:defaultRowItemTemplate="${0}"
|
|
1187
1201
|
${0}
|
|
@@ -1191,7 +1205,7 @@ const DataGridTemplate = context => {
|
|
|
1191
1205
|
<slot></slot>
|
|
1192
1206
|
</div>
|
|
1193
1207
|
</template>
|
|
1194
|
-
`), getMultiSelectAriaState, () => rowTag, rowItemTemplate, children({
|
|
1208
|
+
`), getMultiSelectAriaState, handleColumnSort, () => rowTag, rowItemTemplate, children({
|
|
1195
1209
|
property: 'rowElements',
|
|
1196
1210
|
filter: elements('[role=row]')
|
|
1197
1211
|
}), setHeaderRow);
|
|
@@ -1201,6 +1215,7 @@ class DataGridCell extends DataGridCell$1 {
|
|
|
1201
1215
|
constructor() {
|
|
1202
1216
|
super();
|
|
1203
1217
|
this.ariaSelected = null;
|
|
1218
|
+
this.ariaSort = null;
|
|
1204
1219
|
this.updateCellStyle = () => {
|
|
1205
1220
|
if (this.gridColumn && !this.gridColumn.includes('undefined')) {
|
|
1206
1221
|
this.style.gridColumn = this.gridColumn;
|
|
@@ -1230,14 +1245,17 @@ __decorate([attr({
|
|
|
1230
1245
|
attribute: 'aria-selected',
|
|
1231
1246
|
mode: 'fromView'
|
|
1232
1247
|
}), __metadata("design:type", Object)], DataGridCell.prototype, "ariaSelected", void 0);
|
|
1248
|
+
__decorate([attr({
|
|
1249
|
+
attribute: 'aria-sort'
|
|
1250
|
+
}), __metadata("design:type", Object)], DataGridCell.prototype, "ariaSort", void 0);
|
|
1233
1251
|
|
|
1234
|
-
let _2 = t => t,
|
|
1252
|
+
let _2$1 = t => t,
|
|
1235
1253
|
_t$1,
|
|
1236
|
-
_t2,
|
|
1237
|
-
_t3;
|
|
1254
|
+
_t2$1,
|
|
1255
|
+
_t3$1;
|
|
1238
1256
|
function createCellItemTemplate(context) {
|
|
1239
1257
|
const cellTag = context.tagFor(DataGridCell);
|
|
1240
|
-
return html(_t$1 || (_t$1 = _2`
|
|
1258
|
+
return html(_t$1 || (_t$1 = _2$1`
|
|
1241
1259
|
<${0}
|
|
1242
1260
|
cell-type="${0}"
|
|
1243
1261
|
grid-column="${0}"
|
|
@@ -1249,7 +1267,7 @@ function createCellItemTemplate(context) {
|
|
|
1249
1267
|
}
|
|
1250
1268
|
function createHeaderCellItemTemplate(context) {
|
|
1251
1269
|
const cellTag = context.tagFor(DataGridCell);
|
|
1252
|
-
return html(_t2 || (_t2 = _2`
|
|
1270
|
+
return html(_t2$1 || (_t2$1 = _2$1`
|
|
1253
1271
|
<${0}
|
|
1254
1272
|
cell-type="columnheader"
|
|
1255
1273
|
grid-column="${0}"
|
|
@@ -1260,7 +1278,7 @@ function createHeaderCellItemTemplate(context) {
|
|
|
1260
1278
|
const DataGridRowTemplate = context => {
|
|
1261
1279
|
const cellItemTemplate = createCellItemTemplate(context);
|
|
1262
1280
|
const headerCellItemTemplate = createHeaderCellItemTemplate(context);
|
|
1263
|
-
return html(_t3 || (_t3 = _2`
|
|
1281
|
+
return html(_t3$1 || (_t3$1 = _2$1`
|
|
1264
1282
|
<template
|
|
1265
1283
|
role="row"
|
|
1266
1284
|
class="${0}"
|
|
@@ -1280,25 +1298,54 @@ const DataGridRowTemplate = context => {
|
|
|
1280
1298
|
}), x => x.ariaSelected === 'true' ? 'selected' : '', x => x.gridTemplateColumns, slotted('slottedCellElements'));
|
|
1281
1299
|
};
|
|
1282
1300
|
|
|
1283
|
-
let
|
|
1284
|
-
_t
|
|
1301
|
+
let _2 = t => t,
|
|
1302
|
+
_t,
|
|
1303
|
+
_t2,
|
|
1304
|
+
_t3;
|
|
1305
|
+
function shouldShowSortIcons(x) {
|
|
1306
|
+
if (x.columnDefinition) {
|
|
1307
|
+
x.ariaSort = !x.columnDefinition.sortable ? null : x.columnDefinition.sortDirection ? x.columnDefinition.sortDirection : DataGridCellSortStates.none;
|
|
1308
|
+
}
|
|
1309
|
+
return x.cellType === 'columnheader' && x.ariaSort !== null && x.ariaSort !== DataGridCellSortStates.other;
|
|
1310
|
+
}
|
|
1311
|
+
function getSortIcon(x) {
|
|
1312
|
+
return x.ariaSort === DataGridCellSortStates.ascending ? 'sort-asc-solid' : x.ariaSort === DataGridCellSortStates.descending ? 'sort-desc-solid' : 'sort-solid';
|
|
1313
|
+
}
|
|
1314
|
+
function renderSortIcons(c) {
|
|
1315
|
+
const iconTag = c.tagFor(Icon);
|
|
1316
|
+
return html(_t || (_t = _2`
|
|
1317
|
+
${0}
|
|
1318
|
+
`), when(shouldShowSortIcons, html(_t2 || (_t2 = _2`
|
|
1319
|
+
<${0} class="header-icon" name="${0}"></${0}>
|
|
1320
|
+
`), iconTag, getSortIcon, iconTag)));
|
|
1321
|
+
}
|
|
1322
|
+
function handleClick(x) {
|
|
1323
|
+
if (x.cellType === 'columnheader' && x.ariaSort !== null) {
|
|
1324
|
+
x.$emit('sort', {
|
|
1325
|
+
columnDataKey: x.columnDefinition && x.columnDefinition.columnDataKey ? x.columnDefinition.columnDataKey : x.textContent.trim(),
|
|
1326
|
+
sortDirection: x.ariaSort
|
|
1327
|
+
});
|
|
1328
|
+
}
|
|
1329
|
+
}
|
|
1285
1330
|
function DataGridCellTemplate(context) {
|
|
1286
1331
|
const focusTemplate = focusTemplateFactory(context);
|
|
1287
|
-
return html(
|
|
1332
|
+
return html(_t3 || (_t3 = _2`
|
|
1288
1333
|
<template
|
|
1289
1334
|
tabindex="-1"
|
|
1290
1335
|
role="${0}"
|
|
1336
|
+
@click="${0}"
|
|
1291
1337
|
>
|
|
1292
1338
|
<div class="base">
|
|
1293
1339
|
<slot></slot>
|
|
1294
|
-
|
|
1340
|
+
${0}
|
|
1341
|
+
${0}
|
|
1295
1342
|
</div>
|
|
1296
1343
|
|
|
1297
1344
|
</template>
|
|
1298
1345
|
`), x => {
|
|
1299
1346
|
var _a;
|
|
1300
1347
|
return (_a = DataGridCellRole[x.cellType]) !== null && _a !== void 0 ? _a : DataGridCellRole.default;
|
|
1301
|
-
}, () => focusTemplate);
|
|
1348
|
+
}, handleClick, () => focusTemplate, _ => renderSortIcons(context));
|
|
1302
1349
|
}
|
|
1303
1350
|
|
|
1304
1351
|
const dataGrid = DataGrid.compose({
|
|
@@ -1316,7 +1363,7 @@ const dataGridCell = DataGridCell.compose({
|
|
|
1316
1363
|
template: DataGridCellTemplate,
|
|
1317
1364
|
styles: css_248z
|
|
1318
1365
|
})();
|
|
1319
|
-
const dataGridElements = [dataGridCell, dataGridRow, dataGrid];
|
|
1366
|
+
const dataGridElements = [dataGridCell, dataGridRow, dataGrid, ...iconRegistries];
|
|
1320
1367
|
const registerDataGrid = registerFactory(dataGridElements);
|
|
1321
1368
|
|
|
1322
1369
|
export { dataGridRow as a, dataGridCell as b, dataGridElements as c, dataGrid as d, registerDataGrid as r };
|
package/shared/definition23.js
CHANGED
|
@@ -9,7 +9,7 @@ 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, 03 Aug 2023 09:40:18 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
15
|
const isDialogSupported = Boolean(HTMLDialogElement && HTMLDialogElement.prototype.showModal);
|
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, 03 Aug 2023 09:40:18 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, 03 Aug 2023 09:40:18 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, 03 Aug 2023 09:40:18 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);
|