@vonage/vivid 4.4.0 → 4.5.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/api-extractor.json +25 -0
- package/custom-elements.json +20 -619
- package/index.cjs +18 -18
- package/index.js +3 -3
- package/lib/fab/fab.d.ts +1 -1
- package/lib/icon/icon.d.ts +1 -1
- package/lib/select/select.d.ts +1 -0
- package/lib/tabs/tabs.d.ts +2 -0
- package/lib/video-player/video-player.d.ts +0 -1
- package/listbox/index.cjs +1 -1
- package/listbox/index.js +1 -1
- package/package.json +6 -1
- package/shared/anchored.js +1 -1
- package/shared/calendar-event.js +1 -1
- package/shared/definition.cjs +2 -2
- package/shared/definition.js +2 -2
- package/shared/definition11.cjs +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition12.cjs +1 -1
- package/shared/definition12.js +1 -1
- package/shared/definition13.js +1 -1
- package/shared/definition15.cjs +7 -8
- package/shared/definition15.js +2 -3
- package/shared/definition16.cjs +10 -6
- package/shared/definition16.js +9 -5
- package/shared/definition17.cjs +2 -2
- package/shared/definition17.js +2 -2
- package/shared/definition18.cjs +3 -4
- package/shared/definition18.js +1 -2
- package/shared/definition19.cjs +3 -4
- package/shared/definition19.js +1 -2
- package/shared/definition20.cjs +2 -4
- package/shared/definition20.js +3 -5
- package/shared/definition21.cjs +6 -5
- package/shared/definition21.js +7 -6
- package/shared/definition23.cjs +1 -1
- package/shared/definition23.js +2 -2
- package/shared/definition24.cjs +2 -2
- package/shared/definition24.js +2 -2
- package/shared/definition25.cjs +6 -7
- package/shared/definition25.js +2 -3
- package/shared/definition26.js +1 -1
- package/shared/definition27.cjs +1 -1
- package/shared/definition27.js +1 -1
- package/shared/definition28.js +1 -1
- package/shared/definition29.cjs +4 -4
- package/shared/definition29.js +4 -4
- package/shared/definition3.cjs +1 -1
- package/shared/definition3.js +2 -2
- package/shared/definition30.cjs +2 -1
- package/shared/definition30.js +2 -1
- package/shared/definition31.cjs +1 -1
- package/shared/definition31.js +2 -2
- package/shared/definition32.cjs +1 -1
- package/shared/definition32.js +1 -1
- package/shared/definition34.cjs +2 -3
- package/shared/definition34.js +2 -3
- package/shared/definition35.cjs +10 -10
- package/shared/definition35.js +5 -5
- package/shared/definition36.cjs +1 -1
- package/shared/definition36.js +1 -1
- package/shared/definition37.js +1 -1
- package/shared/definition38.cjs +1 -1
- package/shared/definition38.js +1 -1
- package/shared/definition4.cjs +5 -3
- package/shared/definition4.js +6 -4
- package/shared/definition41.cjs +1 -1
- package/shared/definition41.js +1 -1
- package/shared/definition42.cjs +5 -6
- package/shared/definition42.js +5 -6
- package/shared/definition43.cjs +18 -11
- package/shared/definition43.js +13 -6
- package/shared/definition44.cjs +1 -1
- package/shared/definition44.js +2 -2
- package/shared/definition45.cjs +3 -2
- package/shared/definition45.js +4 -3
- package/shared/definition46.cjs +2 -4
- package/shared/definition46.js +2 -4
- package/shared/definition47.cjs +2 -3
- package/shared/definition47.js +3 -4
- package/shared/definition48.cjs +1 -1
- package/shared/definition48.js +1 -1
- package/shared/definition5.cjs +4 -5
- package/shared/definition5.js +4 -5
- package/shared/definition50.cjs +1 -1
- package/shared/definition50.js +1 -1
- package/shared/definition51.cjs +56 -10
- package/shared/definition51.js +56 -10
- package/shared/definition52.js +1 -1
- package/shared/definition53.cjs +1 -1
- package/shared/definition53.js +2 -2
- package/shared/definition54.cjs +8 -9
- package/shared/definition54.js +2 -3
- package/shared/definition55.cjs +8 -8
- package/shared/definition55.js +2 -2
- package/shared/definition56.cjs +9 -9
- package/shared/definition56.js +7 -7
- package/shared/definition57.cjs +10 -1
- package/shared/definition57.js +11 -2
- package/shared/definition58.cjs +7 -1
- package/shared/definition58.js +8 -2
- package/shared/definition59.cjs +1 -1
- package/shared/definition59.js +1 -1
- package/shared/definition6.cjs +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition61.cjs +65845 -2
- package/shared/definition61.js +65845 -2
- package/shared/definition62.js +1 -1
- package/shared/definition63.js +1 -1
- package/shared/definition7.cjs +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.cjs +2 -3
- package/shared/definition8.js +3 -4
- package/shared/definition9.cjs +1 -1
- package/shared/definition9.js +1 -1
- package/shared/dialog/index.d.ts +1 -0
- package/shared/form-elements.cjs +236 -0
- package/shared/form-elements.js +229 -0
- package/shared/icon.js +1 -1
- package/shared/index2.cjs +6 -256
- package/shared/index2.js +6 -249
- package/shared/localized.cjs +26 -2
- package/shared/localized.js +25 -2
- package/shared/playbackRates.cjs +13 -0
- package/shared/playbackRates.js +11 -0
- package/shared/presentationDate.cjs +9 -9
- package/shared/presentationDate.js +9 -9
- package/shared/text-anchor.cjs +1 -1
- package/shared/text-anchor.js +1 -1
- package/shared/text-field.cjs +1 -1
- package/shared/text-field.js +1 -1
- package/shared/utils/playbackRates.d.ts +1 -0
- 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/tsdoc-metadata.json +11 -0
- package/vivid.api.json +17 -8
- package/appearance-ui/index.cjs +0 -102
- package/appearance-ui/index.js +0 -100
- package/lib/appearance-ui/appearance-ui.d.ts +0 -12
- package/lib/appearance-ui/appearance-ui.template.d.ts +0 -4
- package/lib/appearance-ui/definition.d.ts +0 -3
- package/shared/video-player.cjs +0 -65860
- package/shared/video-player.js +0 -65857
package/shared/definition29.cjs
CHANGED
|
@@ -4,13 +4,13 @@ const index = require('./index.cjs');
|
|
|
4
4
|
const definition = require('./definition27.cjs');
|
|
5
5
|
const keyCodes$1 = require('./key-codes2.cjs');
|
|
6
6
|
const affix = require('./affix.cjs');
|
|
7
|
-
const
|
|
7
|
+
const applyMixins = require('./apply-mixins.cjs');
|
|
8
8
|
const startEnd = require('./start-end.cjs');
|
|
9
9
|
const direction = require('./direction.cjs');
|
|
10
|
-
const applyMixins = require('./apply-mixins.cjs');
|
|
11
10
|
const keyCodes = require('./key-codes.cjs');
|
|
12
|
-
const dom = require('./dom.cjs');
|
|
13
11
|
const icon = require('./icon.cjs');
|
|
12
|
+
const anchored = require('./anchored.cjs');
|
|
13
|
+
const dom = require('./dom.cjs');
|
|
14
14
|
const slotted = require('./slotted.cjs');
|
|
15
15
|
const when = require('./when.cjs');
|
|
16
16
|
const classNames = require('./class-names.cjs');
|
|
@@ -571,7 +571,7 @@ index.__decorate([
|
|
|
571
571
|
index.observable
|
|
572
572
|
], Menu$1.prototype, "items", void 0);
|
|
573
573
|
|
|
574
|
-
const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{
|
|
574
|
+
const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
|
|
575
575
|
|
|
576
576
|
var __defProp$1 = Object.defineProperty;
|
|
577
577
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition29.js
CHANGED
|
@@ -2,13 +2,13 @@ import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as obse
|
|
|
2
2
|
import { a as iconRegistries } from './definition27.js';
|
|
3
3
|
import { k as keyArrowLeft$1, a as keyArrowRight$1, g as keySpace$1, b as keyEnter$1 } from './key-codes2.js';
|
|
4
4
|
import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
|
|
5
|
-
import {
|
|
5
|
+
import { a as applyMixins } from './apply-mixins.js';
|
|
6
6
|
import { S as StartEnd } from './start-end.js';
|
|
7
7
|
import { D as Direction, g as getDirection } from './direction.js';
|
|
8
|
-
import { a as applyMixins } from './apply-mixins.js';
|
|
9
8
|
import { i as keyArrowLeft, h as keyArrowRight, a as keySpace, k as keyEnter, g as keyHome, d as keyEnd, e as keyArrowUp, f as keyArrowDown } from './key-codes.js';
|
|
10
|
-
import { i as isHTMLElement } from './dom.js';
|
|
11
9
|
import { I as Icon } from './icon.js';
|
|
10
|
+
import { b as anchored } from './anchored.js';
|
|
11
|
+
import { i as isHTMLElement } from './dom.js';
|
|
12
12
|
import { s as slotted, e as elements } from './slotted.js';
|
|
13
13
|
import { w as when } from './when.js';
|
|
14
14
|
import { c as classNames } from './class-names.js';
|
|
@@ -569,7 +569,7 @@ __decorate([
|
|
|
569
569
|
observable
|
|
570
570
|
], Menu$1.prototype, "items", void 0);
|
|
571
571
|
|
|
572
|
-
const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{
|
|
572
|
+
const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
|
|
573
573
|
|
|
574
574
|
var __defProp$1 = Object.defineProperty;
|
|
575
575
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition3.cjs
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const classNames = require('./class-names.cjs');
|
|
5
5
|
|
|
6
|
-
const styles = ":host{display:inline-block}.base{
|
|
6
|
+
const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
|
|
7
7
|
|
|
8
8
|
var __defProp = Object.defineProperty;
|
|
9
9
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition3.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { c as classNames } from './class-names.js';
|
|
3
3
|
|
|
4
|
-
const styles = ":host{display:inline-block}.base{
|
|
4
|
+
const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
|
|
5
5
|
|
|
6
6
|
var __defProp = Object.defineProperty;
|
|
7
7
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition30.cjs
CHANGED
|
@@ -4,6 +4,7 @@ const index = require('./index.cjs');
|
|
|
4
4
|
const definition = require('./definition63.cjs');
|
|
5
5
|
const definition$1 = require('./definition29.cjs');
|
|
6
6
|
const anchored = require('./anchored.cjs');
|
|
7
|
+
const index$1 = require('./index2.cjs');
|
|
7
8
|
const slotted = require('./slotted.cjs');
|
|
8
9
|
const classNames = require('./class-names.cjs');
|
|
9
10
|
|
|
@@ -20,7 +21,7 @@ const getClasses = ({
|
|
|
20
21
|
["hide-body", items && !items.length]
|
|
21
22
|
);
|
|
22
23
|
function handleEscapeKey(menu, event) {
|
|
23
|
-
if (
|
|
24
|
+
if (menu.open && index$1.handleEscapeKeyAndStopPropogation(event)) {
|
|
24
25
|
menu.open = false;
|
|
25
26
|
}
|
|
26
27
|
return true;
|
package/shared/definition30.js
CHANGED
|
@@ -2,6 +2,7 @@ import { h as html, r as registerFactory } from './index.js';
|
|
|
2
2
|
import { P as Popup, p as popupRegistries } from './definition63.js';
|
|
3
3
|
import { b as Menu, a as menuItemRegistries } from './definition29.js';
|
|
4
4
|
import { a as anchorSlotTemplateFactory } from './anchored.js';
|
|
5
|
+
import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
|
|
5
6
|
import { s as slotted } from './slotted.js';
|
|
6
7
|
import { c as classNames } from './class-names.js';
|
|
7
8
|
|
|
@@ -18,7 +19,7 @@ const getClasses = ({
|
|
|
18
19
|
["hide-body", items && !items.length]
|
|
19
20
|
);
|
|
20
21
|
function handleEscapeKey(menu, event) {
|
|
21
|
-
if (
|
|
22
|
+
if (menu.open && handleEscapeKeyAndStopPropogation(event)) {
|
|
22
23
|
menu.open = false;
|
|
23
24
|
}
|
|
24
25
|
return true;
|
package/shared/definition31.cjs
CHANGED
|
@@ -8,7 +8,7 @@ const icon = require('./icon.cjs');
|
|
|
8
8
|
const ref = require('./ref.cjs');
|
|
9
9
|
const classNames = require('./class-names.cjs');
|
|
10
10
|
|
|
11
|
-
const styles = ".control
|
|
11
|
+
const styles = ".control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-disclosure-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-disclosure-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-disclosure-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-disclosure-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-disclosure-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-disclosure-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-disclosure-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-disclosure-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:10px;padding-inline:16px;text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}@supports not (color: color-mix(in srgb,var(--one-color),var(--second-color))){.control[aria-current]{background-color:var(--_connotation-color-primary)}}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:where([aria-current=true][open])) .control,:host(:not([aria-current=true])) .control{--focus-stroke-gap-color: transparent}@supports (user-select: none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{display:flex;flex-direction:column;border-inline-start:1px solid var(--vvd-color-neutral-200);gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}";
|
|
12
12
|
|
|
13
13
|
var __defProp = Object.defineProperty;
|
|
14
14
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition31.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { a as iconRegistries } from './definition27.js';
|
|
3
3
|
import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
4
4
|
import { a as applyMixins } from './apply-mixins.js';
|
|
@@ -6,7 +6,7 @@ import { I as Icon } from './icon.js';
|
|
|
6
6
|
import { r as ref } from './ref.js';
|
|
7
7
|
import { c as classNames } from './class-names.js';
|
|
8
8
|
|
|
9
|
-
const styles = ".control
|
|
9
|
+
const styles = ".control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-disclosure-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-disclosure-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-disclosure-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-disclosure-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-disclosure-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-disclosure-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-disclosure-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-disclosure-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:10px;padding-inline:16px;text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}@supports not (color: color-mix(in srgb,var(--one-color),var(--second-color))){.control[aria-current]{background-color:var(--_connotation-color-primary)}}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:where([aria-current=true][open])) .control,:host(:not([aria-current=true])) .control{--focus-stroke-gap-color: transparent}@supports (user-select: none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{display:flex;flex-direction:column;border-inline-start:1px solid var(--vvd-color-neutral-200);gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}";
|
|
10
10
|
|
|
11
11
|
var __defProp = Object.defineProperty;
|
|
12
12
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition32.cjs
CHANGED
|
@@ -7,7 +7,7 @@ const textAnchor = require('./text-anchor.cjs');
|
|
|
7
7
|
const applyMixins = require('./apply-mixins.cjs');
|
|
8
8
|
const textAnchor_template = require('./text-anchor.template.cjs');
|
|
9
9
|
|
|
10
|
-
const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-item-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-item-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-item-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-item-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}";
|
|
10
|
+
const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}@supports not (color: color-mix(in srgb,var(--one-color),var(--second-color))){.control[aria-current]{background-color:var(--_connotation-color-primary)}}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-item-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-item-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-item-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-item-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}";
|
|
11
11
|
|
|
12
12
|
class NavItem extends textAnchor.TextAnchor {
|
|
13
13
|
getBodyTemplate() {
|
package/shared/definition32.js
CHANGED
|
@@ -5,7 +5,7 @@ import { T as TextAnchor } from './text-anchor.js';
|
|
|
5
5
|
import { a as applyMixins } from './apply-mixins.js';
|
|
6
6
|
import { t as textAnchorTemplate } from './text-anchor.template.js';
|
|
7
7
|
|
|
8
|
-
const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-item-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-item-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-item-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-item-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}";
|
|
8
|
+
const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}@supports not (color: color-mix(in srgb,var(--one-color),var(--second-color))){.control[aria-current]{background-color:var(--_connotation-color-primary)}}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-item-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-item-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-item-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-item-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}";
|
|
9
9
|
|
|
10
10
|
class NavItem extends TextAnchor {
|
|
11
11
|
getBodyTemplate() {
|
package/shared/definition34.cjs
CHANGED
|
@@ -2,13 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition = require('./definition27.cjs');
|
|
5
|
-
const affix = require('./affix.cjs');
|
|
6
|
-
require('./index2.cjs');
|
|
7
5
|
const applyMixins = require('./apply-mixins.cjs');
|
|
6
|
+
const affix = require('./affix.cjs');
|
|
8
7
|
const when = require('./when.cjs');
|
|
9
8
|
const classNames = require('./class-names.cjs');
|
|
10
9
|
|
|
11
|
-
const styles = ".base
|
|
10
|
+
const styles = ".base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-announcement{--_connotation-color-intermediate: var(--vvd-note-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-faint: var(--vvd-note-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce: var(--vvd-note-announcement-fierce, var(--vvd-color-announcement-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";
|
|
12
11
|
|
|
13
12
|
var __defProp = Object.defineProperty;
|
|
14
13
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition34.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { a as iconRegistries } from './definition27.js';
|
|
3
|
-
import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
4
|
-
import './index2.js';
|
|
5
3
|
import { a as applyMixins } from './apply-mixins.js';
|
|
4
|
+
import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
6
5
|
import { w as when } from './when.js';
|
|
7
6
|
import { c as classNames } from './class-names.js';
|
|
8
7
|
|
|
9
|
-
const styles = ".base
|
|
8
|
+
const styles = ".base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-announcement{--_connotation-color-intermediate: var(--vvd-note-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-faint: var(--vvd-note-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce: var(--vvd-note-announcement-fierce, var(--vvd-color-announcement-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";
|
|
10
9
|
|
|
11
10
|
var __defProp = Object.defineProperty;
|
|
12
11
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition35.cjs
CHANGED
|
@@ -3,19 +3,19 @@
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition = require('./definition11.cjs');
|
|
5
5
|
const definition$1 = require('./definition22.cjs');
|
|
6
|
-
const affix = require('./affix.cjs');
|
|
7
|
-
const index$1 = require('./index2.cjs');
|
|
8
|
-
const localized = require('./localized.cjs');
|
|
9
6
|
const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
|
|
10
7
|
const formAssociated = require('./form-associated.cjs');
|
|
11
8
|
const keyCodes = require('./key-codes2.cjs');
|
|
12
9
|
const textField = require('./text-field2.cjs');
|
|
10
|
+
const formElements = require('./form-elements.cjs');
|
|
11
|
+
const affix = require('./affix.cjs');
|
|
12
|
+
const localized = require('./localized.cjs');
|
|
13
13
|
const enums = require('./enums.cjs');
|
|
14
14
|
const when = require('./when.cjs');
|
|
15
15
|
const ref = require('./ref.cjs');
|
|
16
16
|
const classNames = require('./class-names.cjs');
|
|
17
17
|
|
|
18
|
-
const styles = ":host{display:inline-block}.base{--
|
|
18
|
+
const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.shape-pill) .fieldset{border-radius:8px}.base.shape-pill .fieldset{border-radius:24px}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4)}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
|
|
19
19
|
|
|
20
20
|
class _NumberField extends index.FoundationElement {
|
|
21
21
|
}
|
|
@@ -295,16 +295,16 @@ __decorateClass([
|
|
|
295
295
|
index.attr
|
|
296
296
|
], NumberField.prototype, "autoComplete", 2);
|
|
297
297
|
NumberField = __decorateClass([
|
|
298
|
-
|
|
299
|
-
|
|
298
|
+
formElements.errorText,
|
|
299
|
+
formElements.formElements
|
|
300
300
|
], NumberField);
|
|
301
301
|
applyMixinsWithObservables.applyMixinsWithObservables(
|
|
302
302
|
NumberField,
|
|
303
303
|
localized.Localized,
|
|
304
304
|
affix.AffixIcon,
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
305
|
+
formElements.FormElementCharCount,
|
|
306
|
+
formElements.FormElementHelperText,
|
|
307
|
+
formElements.FormElementSuccessText,
|
|
308
308
|
textField.DelegatesARIATextbox
|
|
309
309
|
);
|
|
310
310
|
|
|
@@ -411,7 +411,7 @@ const NumberFieldTemplate = (context) => {
|
|
|
411
411
|
</div>
|
|
412
412
|
${() => numberControlButtons(context)}
|
|
413
413
|
</div>
|
|
414
|
-
${
|
|
414
|
+
${formElements.getFeedbackTemplate(context)}
|
|
415
415
|
</div>
|
|
416
416
|
`;
|
|
417
417
|
};
|
package/shared/definition35.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { F as FoundationElement,
|
|
1
|
+
import { F as FoundationElement, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { B as Button, a as buttonRegistries } from './definition11.js';
|
|
3
3
|
import { D as Divider, a as dividerRegistries } from './definition22.js';
|
|
4
|
-
import { A as AffixIcon } from './affix.js';
|
|
5
|
-
import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './index2.js';
|
|
6
|
-
import { L as Localized } from './localized.js';
|
|
7
4
|
import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
|
|
8
5
|
import { F as FormAssociated } from './form-associated.js';
|
|
9
6
|
import { c as keyArrowDown, d as keyArrowUp } from './key-codes2.js';
|
|
10
7
|
import { D as DelegatesARIATextbox } from './text-field2.js';
|
|
8
|
+
import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './form-elements.js';
|
|
9
|
+
import { A as AffixIcon } from './affix.js';
|
|
10
|
+
import { L as Localized } from './localized.js';
|
|
11
11
|
import { S as Shape } from './enums.js';
|
|
12
12
|
import { w as when } from './when.js';
|
|
13
13
|
import { r as ref } from './ref.js';
|
|
14
14
|
import { c as classNames } from './class-names.js';
|
|
15
15
|
|
|
16
|
-
const styles = ":host{display:inline-block}.base{--
|
|
16
|
+
const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.shape-pill) .fieldset{border-radius:8px}.base.shape-pill .fieldset{border-radius:24px}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4)}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
|
|
17
17
|
|
|
18
18
|
class _NumberField extends FoundationElement {
|
|
19
19
|
}
|
package/shared/definition36.cjs
CHANGED
|
@@ -267,7 +267,7 @@ const ListboxOptionTemplate = (context) => {
|
|
|
267
267
|
`;
|
|
268
268
|
};
|
|
269
269
|
|
|
270
|
-
const styles = ":host([disabled]){cursor:not-allowed}.base{
|
|
270
|
+
const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
|
|
271
271
|
|
|
272
272
|
const listboxOptionDefinition = ListboxOption.compose({
|
|
273
273
|
baseName: "option",
|
package/shared/definition36.js
CHANGED
|
@@ -265,7 +265,7 @@ const ListboxOptionTemplate = (context) => {
|
|
|
265
265
|
`;
|
|
266
266
|
};
|
|
267
267
|
|
|
268
|
-
const styles = ":host([disabled]){cursor:not-allowed}.base{
|
|
268
|
+
const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
|
|
269
269
|
|
|
270
270
|
const listboxOptionDefinition = ListboxOption.compose({
|
|
271
271
|
baseName: "option",
|
package/shared/definition37.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { B as Button, a as buttonRegistries } from './definition11.js';
|
|
2
|
-
import {
|
|
2
|
+
import { F as FoundationElement, a as attr, o as observable, v as volatile, h as html, r as registerFactory } from './index.js';
|
|
3
3
|
import { b as Size, S as Shape } from './enums.js';
|
|
4
4
|
import { e as elements } from './slotted.js';
|
|
5
5
|
import { r as ref } from './ref.js';
|
package/shared/definition38.cjs
CHANGED
|
@@ -5,7 +5,7 @@ const baseProgress = require('./base-progress.cjs');
|
|
|
5
5
|
const when = require('./when.cjs');
|
|
6
6
|
const classNames = require('./class-names.cjs');
|
|
7
7
|
|
|
8
|
-
const styles = ":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base
|
|
8
|
+
const styles = ":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
11
11
|
var __decorateClass = (decorators, target, key, kind) => {
|