@vonage/vivid 3.34.0 → 3.36.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 +39 -2
- package/lib/avatar/avatar.d.ts +1 -1
- package/lib/menu-item/menu-item.d.ts +2 -0
- package/lib/menu-item/menu-item.template.d.ts +1 -1
- package/lib/progress-ring/progress-ring.d.ts +1 -1
- package/listbox/index.js +1 -1
- package/menu/index.js +2 -2
- package/menu-item/index.js +2 -1
- package/package.json +1 -1
- package/shared/affix.js +12 -5
- 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/definition13.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 +1 -1
- package/shared/definition23.js +1 -1
- package/shared/definition26.js +476 -54
- package/shared/definition27.js +7 -400
- package/shared/definition28.js +3 -3
- package/shared/definition29.js +1 -1
- package/shared/definition3.js +1 -1
- package/shared/definition31.js +1 -1
- package/shared/definition32.js +1 -1
- package/shared/definition33.js +4 -6
- 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 +5 -7
- package/shared/definition4.js +1 -1
- package/shared/definition40.js +1 -1
- package/shared/definition42.js +1 -1
- package/shared/definition43.js +1 -1
- package/shared/definition45.js +3 -3
- package/shared/definition46.js +1 -1
- package/shared/definition48.js +3 -3
- package/shared/definition49.js +1 -1
- package/shared/definition5.js +1 -1
- package/shared/definition51.js +1 -1
- package/shared/definition52.js +1 -1
- package/shared/definition53.js +1 -1
- package/shared/definition55.js +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.js +1 -1
- package/shared/icon.js +1 -1
- package/shared/index2.js +66 -73
- package/shared/patterns/affix.d.ts +5 -1
- package/shared/patterns/form-elements/form-elements.d.ts +9 -7
- package/shared/text-field.js +1 -1
- package/style.css +285 -267
- 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/styles/tokens/vivid-2-compat.css +1 -1
- package/vivid.api.json +10 -1
package/shared/definition21.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
|
-
const styles = "/**\n * Do not edit directly\n * Generated on
|
|
11
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 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-visible {\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}\n.control:not(.connotation-accent, .connotation-cta) .focus-indicator {\n --focus-stroke-gap-color: transparent;\n}";
|
|
12
12
|
|
|
13
13
|
var __defProp = Object.defineProperty;
|
|
14
14
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition22.js
CHANGED
|
@@ -9,7 +9,7 @@ import { f as focusTemplateFactory } from './focus2.js';
|
|
|
9
9
|
import { w as when } from './when.js';
|
|
10
10
|
import { c as classNames } from './class-names.js';
|
|
11
11
|
|
|
12
|
-
const styles = "/**\n * Do not edit directly\n * Generated on
|
|
12
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 GMT\n */\n:host {\n display: block;\n max-inline-size: 400px;\n}\n\n.base {\n display: flex;\n flex-direction: column;\n}\n\n.control {\n position: relative;\n display: flex;\n box-sizing: border-box;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n padding: 16px;\n border: 1px dashed var(--vvd-color-neutral-400);\n background-color: var(--vvd-color-cta-50);\n border-radius: 6px;\n color: var(--vvd-color-neutral-600);\n cursor: pointer;\n font: var(--vvd-typography-base);\n gap: 8px;\n inline-size: 100%;\n min-block-size: 52px;\n outline: none;\n}\n@supports selector(:focus-visible) {\n .control:focus-visible {\n outline: none;\n }\n}\n.control:not(.size-expanded) {\n min-block-size: 52px;\n}\n.control.size-expanded {\n min-block-size: 120px;\n}\n\n.main {\n pointer-events: none;\n}\n\n.dz-preview {\n display: grid;\n box-sizing: border-box;\n padding: 6px 12px;\n border-radius: 6px;\n grid-template-columns: 1fr auto;\n grid-template-rows: auto auto;\n inline-size: 100%;\n}\n.dz-preview .dz-details {\n display: flex;\n min-width: 0;\n flex-direction: column;\n max-inline-size: 100%;\n}\n.dz-preview .dz-details .dz-filename {\n overflow: hidden;\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dz-preview .dz-details .dz-size {\n color: var(--vvd-color-neutral-600);\n font: var(--vvd-typography-base-condensed);\n}\n.dz-preview .dz-error-message {\n color: var(--vvd-color-alert-500);\n font: var(--vvd-typography-base-condensed);\n margin-block-start: 4px;\n}\n.dz-preview:not(.dz-error) .dz-error-message {\n display: none;\n}\n.dz-preview.dz-error {\n border: 1px solid var(--vvd-color-alert-500);\n}\n.dz-preview.dz-error .dz-details .dz-size,\n.dz-preview.dz-error .dz-progress {\n display: none;\n}\n.dz-preview .remove-btn {\n display: inline;\n align-self: center;\n grid-column: 2/-1;\n grid-row: 1/-1;\n}\n\n.message {\n margin-block-start: 4px;\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n\n.preview-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-block-start: 12px;\n overflow-y: auto;\n}\n.preview-list:empty {\n display: none;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n display: none;\n}";
|
|
13
13
|
|
|
14
14
|
var objectExtend = extend;
|
|
15
15
|
|
package/shared/definition23.js
CHANGED
|
@@ -2,7 +2,7 @@ import { a as attr, F as FoundationElement, h as html, r as registerFactory } fr
|
|
|
2
2
|
import { E as Elevation, e as elevationRegistries } from './definition56.js';
|
|
3
3
|
import { c as classNames } from './class-names.js';
|
|
4
4
|
|
|
5
|
-
const styles = "/**\n * Do not edit directly\n * Generated on
|
|
5
|
+
const styles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 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
|
var __defProp = Object.defineProperty;
|
|
8
8
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|