@vonage/vivid 4.3.0 → 4.4.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.
Files changed (44) hide show
  1. package/custom-elements.json +392 -41
  2. package/index.cjs +1 -0
  3. package/index.js +1 -1
  4. package/lib/dialog/dialog.d.ts +1 -0
  5. package/lib/empty-state/definition.d.ts +1 -0
  6. package/lib/empty-state/empty-state.d.ts +5 -0
  7. package/lib/enums.d.ts +4 -0
  8. package/lib/popup/popup.d.ts +5 -0
  9. package/lib/range-slider/range-slider.d.ts +2 -0
  10. package/lib/slider/slider.d.ts +5 -0
  11. package/lib/slider/slider.template.d.ts +2 -2
  12. package/package.json +1 -1
  13. package/shared/definition.cjs +1 -1
  14. package/shared/definition.js +1 -1
  15. package/shared/definition21.cjs +67 -30
  16. package/shared/definition21.js +67 -30
  17. package/shared/definition23.cjs +18 -3
  18. package/shared/definition23.js +19 -4
  19. package/shared/definition25.cjs +1 -1
  20. package/shared/definition25.js +1 -1
  21. package/shared/definition30.cjs +1 -1
  22. package/shared/definition30.js +1 -1
  23. package/shared/definition42.cjs +123 -18
  24. package/shared/definition42.js +123 -18
  25. package/shared/definition46.cjs +96 -11
  26. package/shared/definition46.js +97 -12
  27. package/shared/definition56.cjs +1 -1
  28. package/shared/definition56.js +1 -1
  29. package/shared/definition63.cjs +155 -2
  30. package/shared/definition63.js +156 -4
  31. package/shared/enums.cjs +6 -0
  32. package/shared/enums.js +6 -1
  33. package/shared/patterns/anchored.d.ts +4 -4
  34. package/shared/presentationDate.cjs +1 -1
  35. package/shared/presentationDate.js +1 -1
  36. package/shared/slider.template.cjs +27 -4
  37. package/shared/slider.template.js +27 -4
  38. package/styles/core/all.css +1 -1
  39. package/styles/core/theme.css +1 -1
  40. package/styles/core/typography.css +1 -1
  41. package/styles/tokens/theme-dark.css +4 -4
  42. package/styles/tokens/theme-light.css +4 -4
  43. package/styles/tokens/vivid-2-compat.css +1 -1
  44. package/vivid.api.json +211 -0
package/shared/enums.js CHANGED
@@ -32,6 +32,11 @@ var Appearance = /* @__PURE__ */ ((Appearance2) => {
32
32
  Appearance2["Elevated"] = "elevated";
33
33
  return Appearance2;
34
34
  })(Appearance || {});
35
+ var IconDecoration = /* @__PURE__ */ ((IconDecoration2) => {
36
+ IconDecoration2["Filled"] = "filled";
37
+ IconDecoration2["Outlined"] = "outlined";
38
+ return IconDecoration2;
39
+ })(IconDecoration || {});
35
40
  var Size = /* @__PURE__ */ ((Size2) => {
36
41
  Size2["UltraCondensed"] = "ultra-condensed";
37
42
  Size2["SuperCondensed"] = "super-condensed";
@@ -83,4 +88,4 @@ var MediaSkipBy = /* @__PURE__ */ ((MediaSkipBy2) => {
83
88
  return MediaSkipBy2;
84
89
  })(MediaSkipBy || {});
85
90
 
86
- export { Appearance as A, Connotation as C, LayoutSize as L, MediaSkipBy as M, Position as P, Role as R, Shape as S, TabsGutters as T, ConnotationDecorative as a, Size as b, AriaLive as c };
91
+ export { Appearance as A, Connotation as C, IconDecoration as I, LayoutSize as L, MediaSkipBy as M, Position as P, Role as R, Shape as S, TabsGutters as T, ConnotationDecorative as a, Size as b, AriaLive as c };
@@ -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
- "__#5@#updateAnchorEl": () => void;
18
- "__#5@#observer"?: MutationObserver | undefined;
19
- "__#5@#observeMissingAnchor": (anchorId: string) => void;
20
- "__#5@#cleanupObserverIfNeeded": () => void;
17
+ "__#6@#updateAnchorEl": () => void;
18
+ "__#6@#observer"?: MutationObserver | undefined;
19
+ "__#6@#observeMissingAnchor": (anchorId: string) => void;
20
+ "__#6@#cleanupObserverIfNeeded": () => void;
21
21
  connectedCallback(): void;
22
22
  disconnectedCallback(): void;
23
23
  };
@@ -17,7 +17,7 @@ const trappedFocus = require('./trapped-focus.cjs');
17
17
  const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
18
18
  const formAssociated = require('./form-associated.cjs');
19
19
 
20
- const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display:flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:6px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button: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}.button: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}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button: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}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button:focus-visible{--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));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
20
+ const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display:flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button: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}.button: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}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button: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}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button:focus-visible{--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));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
21
21
 
22
22
  function _typeof(obj) {
23
23
  "@babel/helpers - typeof";
@@ -15,7 +15,7 @@ import { T as TrappedFocus } from './trapped-focus.js';
15
15
  import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
16
16
  import { F as FormAssociated } from './form-associated.js';
17
17
 
18
- const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display:flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:6px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button: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}.button: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}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button: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}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button:focus-visible{--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));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
18
+ const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display:flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button: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}.button: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}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button: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}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button:focus-visible{--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));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
19
19
 
20
20
  function _typeof(obj) {
21
21
  "@babel/helpers - typeof";
@@ -1,8 +1,10 @@
1
1
  'use strict';
2
2
 
3
+ const definition = require('./definition63.cjs');
3
4
  const aria = require('./aria.cjs');
4
5
  const index = require('./index.cjs');
5
6
  const ref = require('./ref.cjs');
7
+ const when = require('./when.cjs');
6
8
  const classNames = require('./class-names.cjs');
7
9
 
8
10
  /**
@@ -23,6 +25,7 @@ const getClasses = ({ disabled, connotation }) => classNames.classNames(
23
25
  ["disabled", Boolean(disabled)],
24
26
  [`connotation-${connotation}`, Boolean(connotation)]
25
27
  );
28
+ const getThumbClasses = ({ _focusVisible }) => classNames.classNames("thumb-container", ["focus-visible", _focusVisible]);
26
29
  const getMarkersTemplate = (isHorizontal, numMarkers) => {
27
30
  const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
28
31
  return index.html` <div
@@ -33,9 +36,12 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
33
36
  "
34
37
  ></div>`;
35
38
  };
36
- const SliderTemplate = () => {
39
+ const SliderTemplate = (context) => {
40
+ const popupTag = context.tagFor(definition.Popup);
37
41
  return index.html`<template
38
42
  role="${(x) => x.ariaLabel ? "presentation" : null}"
43
+ @focusin="${(x) => x._onFocusIn()}"
44
+ @focusout="${(x) => x._onFocusOut()}"
39
45
  >
40
46
  <div
41
47
  role="slider"
@@ -59,11 +65,28 @@ const SliderTemplate = () => {
59
65
  </div>
60
66
  <div
61
67
  ${ref.ref("thumb")}
62
- class="thumb-container"
68
+ class="${(x) => getThumbClasses(x)}"
63
69
  style="${(x) => x.position}"
64
70
  ></div>
65
- </div></div
66
- ></template>`;
71
+ ${when.when(
72
+ (x) => x.pin,
73
+ index.html`<${popupTag}
74
+ class="popup"
75
+ arrow
76
+ alternate
77
+ :anchor="${(x) => x.thumb}"
78
+ :open=${(x) => x._isThumbPopupOpen}
79
+ :placementStrategy=${(x) => x.orientation === aria.Orientation.horizontal ? definition.PlacementStrategy.AutoPlacementHorizontal : definition.PlacementStrategy.AutoPlacementVertical}
80
+ animation-frame
81
+ exportparts="vvd-theme-alternate"
82
+ aria-hidden="true"
83
+ >
84
+ <div class="tooltip">${(x) => x.ariaValuetext || x.valueTextFormatter(x.value)}</div>
85
+ </${popupTag}>`
86
+ )}
87
+ </div>
88
+ </div></template
89
+ >`;
67
90
  };
68
91
 
69
92
  exports.SliderTemplate = SliderTemplate;
@@ -1,6 +1,8 @@
1
+ import { P as Popup, a as PlacementStrategy } from './definition63.js';
1
2
  import { O as Orientation } from './aria.js';
2
3
  import { h as html } from './index.js';
3
4
  import { r as ref } from './ref.js';
5
+ import { w as when } from './when.js';
4
6
  import { c as classNames } from './class-names.js';
5
7
 
6
8
  /**
@@ -21,6 +23,7 @@ const getClasses = ({ disabled, connotation }) => classNames(
21
23
  ["disabled", Boolean(disabled)],
22
24
  [`connotation-${connotation}`, Boolean(connotation)]
23
25
  );
26
+ const getThumbClasses = ({ _focusVisible }) => classNames("thumb-container", ["focus-visible", _focusVisible]);
24
27
  const getMarkersTemplate = (isHorizontal, numMarkers) => {
25
28
  const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
26
29
  return html` <div
@@ -31,9 +34,12 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
31
34
  "
32
35
  ></div>`;
33
36
  };
34
- const SliderTemplate = () => {
37
+ const SliderTemplate = (context) => {
38
+ const popupTag = context.tagFor(Popup);
35
39
  return html`<template
36
40
  role="${(x) => x.ariaLabel ? "presentation" : null}"
41
+ @focusin="${(x) => x._onFocusIn()}"
42
+ @focusout="${(x) => x._onFocusOut()}"
37
43
  >
38
44
  <div
39
45
  role="slider"
@@ -57,11 +63,28 @@ const SliderTemplate = () => {
57
63
  </div>
58
64
  <div
59
65
  ${ref("thumb")}
60
- class="thumb-container"
66
+ class="${(x) => getThumbClasses(x)}"
61
67
  style="${(x) => x.position}"
62
68
  ></div>
63
- </div></div
64
- ></template>`;
69
+ ${when(
70
+ (x) => x.pin,
71
+ html`<${popupTag}
72
+ class="popup"
73
+ arrow
74
+ alternate
75
+ :anchor="${(x) => x.thumb}"
76
+ :open=${(x) => x._isThumbPopupOpen}
77
+ :placementStrategy=${(x) => x.orientation === Orientation.horizontal ? PlacementStrategy.AutoPlacementHorizontal : PlacementStrategy.AutoPlacementVertical}
78
+ animation-frame
79
+ exportparts="vvd-theme-alternate"
80
+ aria-hidden="true"
81
+ >
82
+ <div class="tooltip">${(x) => x.ariaValuetext || x.valueTextFormatter(x.value)}</div>
83
+ </${popupTag}>`
84
+ )}
85
+ </div>
86
+ </div></template
87
+ >`;
65
88
  };
66
89
 
67
90
  export { SliderTemplate as S, getMarkersTemplate as g, limit as l };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Jul 2024 13:50:42 GMT
3
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
4
4
  */
5
5
  .vvd-root {
6
6
  color-scheme: var(--vvd-color-scheme);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Jul 2024 13:50:42 GMT
3
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
4
4
  */
5
5
  .vvd-root {
6
6
  color-scheme: var(--vvd-color-scheme);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Jul 2024 13:50:42 GMT
3
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
4
4
  */
5
5
  .vvd-root:root {
6
6
  --vvd-size-font-scale-base: 1rem;
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Jul 2024 13:50:42 GMT
3
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Thu, 18 Jul 2024 13:50:42 GMT
7
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Thu, 18 Jul 2024 13:50:42 GMT
11
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Thu, 18 Jul 2024 13:50:42 GMT
15
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Jul 2024 13:50:42 GMT
3
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Thu, 18 Jul 2024 13:50:42 GMT
7
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Thu, 18 Jul 2024 13:50:42 GMT
11
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Thu, 18 Jul 2024 13:50:42 GMT
15
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Jul 2024 13:50:42 GMT
3
+ * Generated on Thu, 01 Aug 2024 12:52:05 GMT
4
4
  */
5
5
  .vvd-root, ::part(vvd-root),
6
6
  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
package/vivid.api.json CHANGED
@@ -3047,6 +3047,100 @@
3047
3047
  ],
3048
3048
  "name": "dialPadDefinition"
3049
3049
  },
3050
+ {
3051
+ "kind": "TypeAlias",
3052
+ "canonicalReference": "@vonage/vivid!EmptyStateConnotation:type",
3053
+ "docComment": "",
3054
+ "excerptTokens": [
3055
+ {
3056
+ "kind": "Content",
3057
+ "text": "export type EmptyStateConnotation = "
3058
+ },
3059
+ {
3060
+ "kind": "Reference",
3061
+ "text": "Extract",
3062
+ "canonicalReference": "!Extract:type"
3063
+ },
3064
+ {
3065
+ "kind": "Content",
3066
+ "text": "<"
3067
+ },
3068
+ {
3069
+ "kind": "Reference",
3070
+ "text": "Connotation",
3071
+ "canonicalReference": "@vonage/vivid!Connotation:enum"
3072
+ },
3073
+ {
3074
+ "kind": "Content",
3075
+ "text": ", "
3076
+ },
3077
+ {
3078
+ "kind": "Reference",
3079
+ "text": "Connotation.Accent",
3080
+ "canonicalReference": "@vonage/vivid!Connotation.Accent:member"
3081
+ },
3082
+ {
3083
+ "kind": "Content",
3084
+ "text": " | "
3085
+ },
3086
+ {
3087
+ "kind": "Reference",
3088
+ "text": "Connotation.CTA",
3089
+ "canonicalReference": "@vonage/vivid!Connotation.CTA:member"
3090
+ },
3091
+ {
3092
+ "kind": "Content",
3093
+ "text": " | "
3094
+ },
3095
+ {
3096
+ "kind": "Reference",
3097
+ "text": "Connotation.Success",
3098
+ "canonicalReference": "@vonage/vivid!Connotation.Success:member"
3099
+ },
3100
+ {
3101
+ "kind": "Content",
3102
+ "text": " | "
3103
+ },
3104
+ {
3105
+ "kind": "Reference",
3106
+ "text": "Connotation.Alert",
3107
+ "canonicalReference": "@vonage/vivid!Connotation.Alert:member"
3108
+ },
3109
+ {
3110
+ "kind": "Content",
3111
+ "text": " | "
3112
+ },
3113
+ {
3114
+ "kind": "Reference",
3115
+ "text": "Connotation.Warning",
3116
+ "canonicalReference": "@vonage/vivid!Connotation.Warning:member"
3117
+ },
3118
+ {
3119
+ "kind": "Content",
3120
+ "text": " | "
3121
+ },
3122
+ {
3123
+ "kind": "Reference",
3124
+ "text": "Connotation.Information",
3125
+ "canonicalReference": "@vonage/vivid!Connotation.Information:member"
3126
+ },
3127
+ {
3128
+ "kind": "Content",
3129
+ "text": ">"
3130
+ },
3131
+ {
3132
+ "kind": "Content",
3133
+ "text": ";"
3134
+ }
3135
+ ],
3136
+ "fileUrlPath": "../../dist/libs/components/lib/empty-state/empty-state.d.ts",
3137
+ "releaseTag": "Public",
3138
+ "name": "EmptyStateConnotation",
3139
+ "typeTokenRange": {
3140
+ "startIndex": 1,
3141
+ "endIndex": 17
3142
+ }
3143
+ },
3050
3144
  {
3051
3145
  "kind": "Function",
3052
3146
  "canonicalReference": "@vonage/vivid!emptyStateDefinition:function(1)",
@@ -3142,6 +3236,64 @@
3142
3236
  ],
3143
3237
  "name": "emptyStateDefinition"
3144
3238
  },
3239
+ {
3240
+ "kind": "TypeAlias",
3241
+ "canonicalReference": "@vonage/vivid!EmptyStateIconDecoration:type",
3242
+ "docComment": "",
3243
+ "excerptTokens": [
3244
+ {
3245
+ "kind": "Content",
3246
+ "text": "export type EmptyStateIconDecoration = "
3247
+ },
3248
+ {
3249
+ "kind": "Reference",
3250
+ "text": "Extract",
3251
+ "canonicalReference": "!Extract:type"
3252
+ },
3253
+ {
3254
+ "kind": "Content",
3255
+ "text": "<"
3256
+ },
3257
+ {
3258
+ "kind": "Reference",
3259
+ "text": "IconDecoration",
3260
+ "canonicalReference": "@vonage/vivid!IconDecoration:enum"
3261
+ },
3262
+ {
3263
+ "kind": "Content",
3264
+ "text": ", "
3265
+ },
3266
+ {
3267
+ "kind": "Reference",
3268
+ "text": "IconDecoration.Filled",
3269
+ "canonicalReference": "@vonage/vivid!IconDecoration.Filled:member"
3270
+ },
3271
+ {
3272
+ "kind": "Content",
3273
+ "text": " | "
3274
+ },
3275
+ {
3276
+ "kind": "Reference",
3277
+ "text": "IconDecoration.Outlined",
3278
+ "canonicalReference": "@vonage/vivid!IconDecoration.Outlined:member"
3279
+ },
3280
+ {
3281
+ "kind": "Content",
3282
+ "text": ">"
3283
+ },
3284
+ {
3285
+ "kind": "Content",
3286
+ "text": ";"
3287
+ }
3288
+ ],
3289
+ "fileUrlPath": "../../dist/libs/components/lib/empty-state/empty-state.d.ts",
3290
+ "releaseTag": "Public",
3291
+ "name": "EmptyStateIconDecoration",
3292
+ "typeTokenRange": {
3293
+ "startIndex": 1,
3294
+ "endIndex": 9
3295
+ }
3296
+ },
3145
3297
  {
3146
3298
  "kind": "TypeAlias",
3147
3299
  "canonicalReference": "@vonage/vivid!FabConnotation:type",
@@ -3713,6 +3865,65 @@
3713
3865
  "endIndex": 17
3714
3866
  }
3715
3867
  },
3868
+ {
3869
+ "kind": "Enum",
3870
+ "canonicalReference": "@vonage/vivid!IconDecoration:enum",
3871
+ "docComment": "",
3872
+ "excerptTokens": [
3873
+ {
3874
+ "kind": "Content",
3875
+ "text": "export declare enum IconDecoration "
3876
+ }
3877
+ ],
3878
+ "fileUrlPath": "../../dist/libs/components/lib/enums.d.ts",
3879
+ "releaseTag": "Public",
3880
+ "name": "IconDecoration",
3881
+ "preserveMemberOrder": false,
3882
+ "members": [
3883
+ {
3884
+ "kind": "EnumMember",
3885
+ "canonicalReference": "@vonage/vivid!IconDecoration.Filled:member",
3886
+ "docComment": "",
3887
+ "excerptTokens": [
3888
+ {
3889
+ "kind": "Content",
3890
+ "text": "Filled = "
3891
+ },
3892
+ {
3893
+ "kind": "Content",
3894
+ "text": "\"filled\""
3895
+ }
3896
+ ],
3897
+ "initializerTokenRange": {
3898
+ "startIndex": 1,
3899
+ "endIndex": 2
3900
+ },
3901
+ "releaseTag": "Public",
3902
+ "name": "Filled"
3903
+ },
3904
+ {
3905
+ "kind": "EnumMember",
3906
+ "canonicalReference": "@vonage/vivid!IconDecoration.Outlined:member",
3907
+ "docComment": "",
3908
+ "excerptTokens": [
3909
+ {
3910
+ "kind": "Content",
3911
+ "text": "Outlined = "
3912
+ },
3913
+ {
3914
+ "kind": "Content",
3915
+ "text": "\"outlined\""
3916
+ }
3917
+ ],
3918
+ "initializerTokenRange": {
3919
+ "startIndex": 1,
3920
+ "endIndex": 2
3921
+ },
3922
+ "releaseTag": "Public",
3923
+ "name": "Outlined"
3924
+ }
3925
+ ]
3926
+ },
3716
3927
  {
3717
3928
  "kind": "Function",
3718
3929
  "canonicalReference": "@vonage/vivid!iconDefinition:function(1)",