@vonage/vivid 3.57.0 → 3.59.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/appearance-ui/index.cjs +1 -1
- package/appearance-ui/index.js +1 -1
- package/custom-elements.json +1264 -328
- package/lib/audio-player/audio-player.d.ts +20 -0
- package/lib/combobox/combobox.d.ts +3 -0
- package/lib/combobox/definition.d.ts +1 -1
- package/lib/number-field/number-field.d.ts +23 -8
- package/lib/number-field/number-field.form-associated.d.ts +10 -0
- package/lib/video-player/video-player.d.ts +1 -0
- package/listbox/index.cjs +1 -1
- package/listbox/index.js +1 -1
- package/package.json +1 -1
- package/shared/definition.cjs +1 -1
- package/shared/definition.js +1 -1
- package/shared/definition11.cjs +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition16.cjs +11 -2
- package/shared/definition16.js +11 -2
- package/shared/definition20.cjs +13 -13
- package/shared/definition20.js +13 -13
- package/shared/definition29.cjs +1 -0
- package/shared/definition29.js +1 -1
- package/shared/definition3.cjs +1 -1
- package/shared/definition3.js +1 -1
- package/shared/definition31.cjs +1 -1
- package/shared/definition31.js +1 -1
- package/shared/definition32.cjs +1 -1
- package/shared/definition32.js +1 -1
- package/shared/definition35.cjs +240 -331
- package/shared/definition35.js +241 -332
- package/shared/definition38.cjs +1 -1
- package/shared/definition38.js +1 -1
- package/shared/definition42.cjs +1 -1
- package/shared/definition42.js +2 -2
- package/shared/definition43.cjs +2 -2
- package/shared/definition43.js +2 -2
- package/shared/definition46.cjs +1 -1
- package/shared/definition46.js +1 -1
- package/shared/definition47.cjs +1 -1
- package/shared/definition47.js +1 -1
- package/shared/definition5.cjs +209 -128
- package/shared/definition5.js +203 -122
- package/shared/definition50.cjs +1 -1
- package/shared/definition50.js +1 -1
- package/shared/definition51.cjs +1 -1
- package/shared/definition51.js +1 -1
- package/shared/definition54.cjs +1 -1
- package/shared/definition54.js +1 -1
- package/shared/definition58.cjs +1 -1
- package/shared/definition58.js +1 -1
- package/shared/definition59.cjs +1 -1
- package/shared/definition59.js +1 -1
- package/shared/definition61.cjs +10 -65853
- package/shared/definition61.js +10 -65853
- package/shared/definition7.cjs +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.cjs +1 -1
- package/shared/definition8.js +1 -1
- package/shared/icon.cjs +1 -1
- package/shared/icon.js +1 -1
- package/shared/key-codes2.js +1 -1
- package/shared/patterns/anchored.d.ts +4 -4
- package/shared/slider.template.cjs +3 -3
- package/shared/slider.template.js +3 -3
- package/shared/text-field.cjs +1 -1
- package/shared/text-field.js +1 -1
- package/shared/video-player.cjs +65864 -0
- package/shared/video-player.js +65861 -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 +5 -5
- package/styles/tokens/theme-light.css +5 -5
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/vivid.api.json +58 -0
package/shared/definition7.cjs
CHANGED
|
@@ -33,7 +33,7 @@ __decorateClass([
|
|
|
33
33
|
], Badge.prototype, "text");
|
|
34
34
|
applyMixins.applyMixins(Badge, affix.AffixIconWithTrailing);
|
|
35
35
|
|
|
36
|
-
const styles = ":host{display:inline-block}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
|
|
36
|
+
const styles = ":host{display:inline-block}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
|
|
37
37
|
|
|
38
38
|
const getClasses = ({
|
|
39
39
|
connotation,
|
package/shared/definition7.js
CHANGED
|
@@ -31,7 +31,7 @@ __decorateClass([
|
|
|
31
31
|
], Badge.prototype, "text");
|
|
32
32
|
applyMixins(Badge, AffixIconWithTrailing);
|
|
33
33
|
|
|
34
|
-
const styles = ":host{display:inline-block}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
|
|
34
|
+
const styles = ":host{display:inline-block}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
|
|
35
35
|
|
|
36
36
|
const getClasses = ({
|
|
37
37
|
connotation,
|
package/shared/definition8.cjs
CHANGED
|
@@ -12,7 +12,7 @@ const slotted = require('./slotted.cjs');
|
|
|
12
12
|
const when = require('./when.cjs');
|
|
13
13
|
const classNames = require('./class-names.cjs');
|
|
14
14
|
|
|
15
|
-
const styles = ":host{display:block}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.removing{max-height:0}.header{display:flex;min-
|
|
15
|
+
const styles = ":host{display:block}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";
|
|
16
16
|
|
|
17
17
|
var __defProp = Object.defineProperty;
|
|
18
18
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition8.js
CHANGED
|
@@ -10,7 +10,7 @@ import { s as slotted } from './slotted.js';
|
|
|
10
10
|
import { w as when } from './when.js';
|
|
11
11
|
import { c as classNames } from './class-names.js';
|
|
12
12
|
|
|
13
|
-
const styles = ":host{display:block}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.removing{max-height:0}.header{display:flex;min-
|
|
13
|
+
const styles = ":host{display:block}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";
|
|
14
14
|
|
|
15
15
|
var __defProp = Object.defineProperty;
|
|
16
16
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/icon.cjs
CHANGED
package/shared/icon.js
CHANGED
package/shared/key-codes2.js
CHANGED
|
@@ -10,4 +10,4 @@ const keyEnter = "Enter";
|
|
|
10
10
|
const keyHome = "Home";
|
|
11
11
|
const keySpace = " ";
|
|
12
12
|
|
|
13
|
-
export { keyArrowRight as a, keyEnter as b,
|
|
13
|
+
export { keyArrowRight as a, keyEnter as b, keyArrowDown as c, keyArrowUp as d, keyHome as e, keyEnd as f, keySpace as g, keyArrowLeft as k };
|
|
@@ -14,10 +14,10 @@ export declare function anchored<T extends {
|
|
|
14
14
|
_slottedAnchor?: HTMLElement[] | undefined;
|
|
15
15
|
_slottedAnchorChanged(): void;
|
|
16
16
|
_anchorEl?: HTMLElement | undefined;
|
|
17
|
-
"__#
|
|
18
|
-
"__#
|
|
19
|
-
"__#
|
|
20
|
-
"__#
|
|
17
|
+
"__#5@#updateAnchorEl": () => void;
|
|
18
|
+
"__#5@#observer"?: MutationObserver | undefined;
|
|
19
|
+
"__#5@#observeMissingAnchor": (anchorId: string) => void;
|
|
20
|
+
"__#5@#cleanupObserverIfNeeded": () => void;
|
|
21
21
|
connectedCallback(): void;
|
|
22
22
|
disconnectedCallback(): void;
|
|
23
23
|
};
|
|
@@ -28,8 +28,8 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
|
|
|
28
28
|
return index.html` <div
|
|
29
29
|
class="mark"
|
|
30
30
|
style="
|
|
31
|
-
background: linear-gradient(to ${placeholder[0]}, currentcolor
|
|
32
|
-
0px ${placeholder[1]} / ${placeholder[2]} calc((100% -
|
|
31
|
+
background: linear-gradient(to ${placeholder[0]}, currentcolor 1px, transparent 0px)
|
|
32
|
+
0px ${placeholder[1]} / ${placeholder[2]} calc((100% - 1px) / ${numMarkers}) ${placeholder[3]}
|
|
33
33
|
"
|
|
34
34
|
></div>`;
|
|
35
35
|
};
|
|
@@ -51,11 +51,11 @@ const SliderTemplate = () => {
|
|
|
51
51
|
>
|
|
52
52
|
<div class="positioning-region">
|
|
53
53
|
<div ${ref.ref("track")} class="track">
|
|
54
|
-
<div class="track-start" style="${(x) => x.position}"></div>
|
|
55
54
|
${(x) => x.markers ? getMarkersTemplate(
|
|
56
55
|
x.orientation === aria.Orientation.horizontal,
|
|
57
56
|
Math.floor((x.max - x.min) / x.step)
|
|
58
57
|
) : void 0}
|
|
58
|
+
<div class="track-start" style="${(x) => x.position}"></div>
|
|
59
59
|
</div>
|
|
60
60
|
<div
|
|
61
61
|
${ref.ref("thumb")}
|
|
@@ -26,8 +26,8 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
|
|
|
26
26
|
return html` <div
|
|
27
27
|
class="mark"
|
|
28
28
|
style="
|
|
29
|
-
background: linear-gradient(to ${placeholder[0]}, currentcolor
|
|
30
|
-
0px ${placeholder[1]} / ${placeholder[2]} calc((100% -
|
|
29
|
+
background: linear-gradient(to ${placeholder[0]}, currentcolor 1px, transparent 0px)
|
|
30
|
+
0px ${placeholder[1]} / ${placeholder[2]} calc((100% - 1px) / ${numMarkers}) ${placeholder[3]}
|
|
31
31
|
"
|
|
32
32
|
></div>`;
|
|
33
33
|
};
|
|
@@ -49,11 +49,11 @@ const SliderTemplate = () => {
|
|
|
49
49
|
>
|
|
50
50
|
<div class="positioning-region">
|
|
51
51
|
<div ${ref("track")} class="track">
|
|
52
|
-
<div class="track-start" style="${(x) => x.position}"></div>
|
|
53
52
|
${(x) => x.markers ? getMarkersTemplate(
|
|
54
53
|
x.orientation === Orientation.horizontal,
|
|
55
54
|
Math.floor((x.max - x.min) / x.step)
|
|
56
55
|
) : void 0}
|
|
56
|
+
<div class="track-start" style="${(x) => x.position}"></div>
|
|
57
57
|
</div>
|
|
58
58
|
<div
|
|
59
59
|
${ref("thumb")}
|
package/shared/text-field.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const styles = ":host{display:inline-block}.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}.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-
|
|
3
|
+
const styles = ":host{display:inline-block}.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}.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))}@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}";
|
|
4
4
|
|
|
5
5
|
exports.styles = styles;
|
package/shared/text-field.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
const styles = ":host{display:inline-block}.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}.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-
|
|
1
|
+
const styles = ":host{display:inline-block}.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}.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))}@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}";
|
|
2
2
|
|
|
3
3
|
export { styles as s };
|