@vonage/vivid 5.28.1 → 5.29.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 (86) hide show
  1. package/bundled/definition17.cjs +1 -1
  2. package/bundled/definition17.js +1 -1
  3. package/bundled/definition18.cjs +1 -1
  4. package/bundled/definition18.js +1 -1
  5. package/bundled/definition25.cjs +4 -4
  6. package/bundled/definition25.js +4 -4
  7. package/bundled/definition5.cjs +1 -1
  8. package/bundled/definition5.js +1 -1
  9. package/bundled/numberConverter.cjs +1 -1
  10. package/bundled/numberConverter.js +1 -1
  11. package/bundled/picker-field.template.cjs +5 -3
  12. package/bundled/picker-field.template.js +20 -17
  13. package/bundled/vivid-element.cjs +1 -1
  14. package/bundled/vivid-element.js +1 -1
  15. package/color-picker/index.cjs +1 -1
  16. package/color-picker/index.js +1 -1
  17. package/custom-elements.json +508 -334
  18. package/empty-state/index.cjs +2 -2
  19. package/empty-state/index.js +3 -3
  20. package/lib/date-picker/date-picker.d.ts +4 -0
  21. package/lib/date-range-picker/date-range-picker.d.ts +2 -0
  22. package/lib/date-time-picker/date-time-picker.d.ts +4 -0
  23. package/lib/empty-state/definition.d.ts +1 -1
  24. package/lib/empty-state/empty-state.d.ts +3 -1
  25. package/lib/number-field/definition.d.ts +1 -1
  26. package/lib/number-field/number-field.d.ts +3 -1
  27. package/lib/rich-text-editor/rte/features/suggest.d.ts +7 -1
  28. package/lib/time-picker/time-picker.d.ts +2 -0
  29. package/listbox/index.cjs +1 -1
  30. package/listbox/index.js +1 -1
  31. package/locales/de-DE.cjs +1 -1
  32. package/locales/de-DE.js +1 -1
  33. package/locales/en-GB.cjs +1 -1
  34. package/locales/en-GB.js +1 -1
  35. package/locales/ja-JP.cjs +1 -1
  36. package/locales/ja-JP.js +1 -1
  37. package/locales/zh-CN.cjs +1 -1
  38. package/locales/zh-CN.js +1 -1
  39. package/number-field/index.cjs +16 -14
  40. package/number-field/index.js +49 -31
  41. package/package.json +16 -16
  42. package/rich-text-editor/index.cjs +14 -14
  43. package/rich-text-editor/index.js +1818 -1789
  44. package/shared/picker-field/mixins/calendar-picker.d.ts +1 -0
  45. package/shared/picker-field/mixins/calendar-picker.template.d.ts +1 -0
  46. package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +1 -0
  47. package/shared/picker-field/mixins/single-date-picker.d.ts +1 -0
  48. package/shared/picker-field/mixins/single-value-picker.d.ts +1 -0
  49. package/shared/picker-field/mixins/time-selection-picker.d.ts +1 -0
  50. package/shared/picker-field/mixins/time-selection-picker.template.d.ts +2 -0
  51. package/shared/picker-field/picker-field.d.ts +38 -31
  52. package/tabs/index.cjs +1 -1
  53. package/tabs/index.js +1 -1
  54. package/unbundled/definition16.cjs +1 -1
  55. package/unbundled/definition16.js +1 -1
  56. package/unbundled/definition2.cjs +4 -4
  57. package/unbundled/definition2.js +4 -4
  58. package/unbundled/definition28.cjs +5 -1
  59. package/unbundled/definition28.js +5 -1
  60. package/unbundled/definition29.cjs +1 -1
  61. package/unbundled/definition29.js +1 -1
  62. package/unbundled/definition30.cjs +1 -1
  63. package/unbundled/definition30.js +1 -1
  64. package/unbundled/definition42.cjs +3 -2
  65. package/unbundled/definition42.js +3 -2
  66. package/unbundled/definition50.cjs +1 -1
  67. package/unbundled/definition50.js +1 -1
  68. package/unbundled/definition55.cjs +41 -8
  69. package/unbundled/definition55.js +41 -8
  70. package/unbundled/definition6.cjs +1 -1
  71. package/unbundled/definition6.js +1 -1
  72. package/unbundled/definition63.cjs +43 -19
  73. package/unbundled/definition63.js +38 -14
  74. package/unbundled/definition76.cjs +1 -1
  75. package/unbundled/definition76.js +1 -1
  76. package/unbundled/en-US.cjs +1 -1
  77. package/unbundled/en-US.js +1 -1
  78. package/unbundled/numberConverter.cjs +1 -1
  79. package/unbundled/numberConverter.js +1 -1
  80. package/unbundled/picker-field.template.cjs +6 -1
  81. package/unbundled/picker-field.template.js +6 -1
  82. package/unbundled/vivid-element.cjs +1 -1
  83. package/unbundled/vivid-element.js +1 -1
  84. package/video-player/index.cjs +1 -1
  85. package/video-player/index.js +1 -1
  86. package/vivid.api.json +158 -3
@@ -7,7 +7,7 @@ const require_definition$1 = require("./definition74.cjs");
7
7
  let _microsoft_fast_element = require("@microsoft/fast-element");
8
8
  let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
9
9
  //#region src/lib/tabs/tabs.scss?inline
10
- var tabs_default = ":host{display:block}.base{--_tabs-tablist-gutter:8px;--_tabs-active-indicator-stroke-width:2px;box-sizing:border-box;display:grid}.base.orientation-vertical{block-size:inherit;grid-template-rows:1fr;grid-template-columns:auto 1fr;overflow:hidden}.base:not(.orientation-vertical){block-size:var(--tabs-block-size,auto);grid-template-rows:auto 1fr;grid-template-columns:1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{isolation:isolate;position:relative;overflow:hidden}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{content:\"\";opacity:0;inline-size:10px;transition:opacity .1s;position:absolute;inset-block:0}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-start:0}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-end:0}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{box-shadow:1px 0 0 0 var(--vvd-color-neutral-300);flex-direction:column}.base.orientation-horizontal .tabs{border-bottom:1px solid var(--vvd-color-neutral-300);flex-direction:row}.tablist{box-sizing:border-box;color:var(--_appearance-color-text);display:grid;position:relative;overflow:hidden}.base.layout-stretch .tablist{--_tab-justify-content:center;--_tabs-tablist-column:1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column:auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-rows:auto;grid-template-columns:auto 1fr;block-size:fit-content;min-block-size:100%;inline-size:100%}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter);grid-template-rows:auto auto;grid-auto-flow:column}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base:not(.orientation-vertical) .tablist-wrapper{align-self:end;inline-size:100%;overflow:auto hidden}.base.orientation-vertical .tablist-wrapper{block-size:100%;overflow:hidden auto}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{margin-inline:var(--_tabs-tablist-gutter);align-items:center}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;overflow-y:auto}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base.gutters-small .tabpanel{padding:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{block-size:80%;inline-size:var(--_tabs-active-indicator-stroke-width);border-radius:2px;grid-area:1/1;align-self:center}.base:not(.orientation-vertical) .active-indicator{z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);inline-size:calc(var(--_tabs-active-tab-inline-size));border-radius:2px;grid-area:2/1;position:absolute;inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out,inline-size .2s ease-out}@media (prefers-reduced-motion:reduce){.activeIndicatorTransition{transition-duration:.01ms}}";
10
+ var tabs_default = ":host{display:block}.base{--_tabs-tablist-gutter:8px;--_tabs-active-indicator-stroke-width:2px;box-sizing:border-box;display:grid}.base.orientation-vertical{block-size:inherit;grid-template-rows:minmax(0,1fr);grid-template-columns:auto minmax(0,1fr);overflow:hidden}.base:not(.orientation-vertical){block-size:var(--tabs-block-size,auto);grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{isolation:isolate;position:relative;overflow:hidden}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{content:\"\";opacity:0;inline-size:10px;transition:opacity .1s;position:absolute;inset-block:0}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-start:0}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-end:0}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{box-shadow:1px 0 0 0 var(--vvd-color-neutral-300);flex-direction:column}.base.orientation-horizontal .tabs{border-bottom:1px solid var(--vvd-color-neutral-300);flex-direction:row}.tablist{box-sizing:border-box;color:var(--_appearance-color-text);display:grid;position:relative;overflow:hidden}.base.layout-stretch .tablist{--_tab-justify-content:center;--_tabs-tablist-column:1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column:auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-rows:auto;grid-template-columns:auto 1fr;block-size:fit-content;min-block-size:100%;inline-size:100%}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter);grid-template-rows:auto auto;grid-auto-flow:column}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base:not(.orientation-vertical) .tablist-wrapper{align-self:end;inline-size:100%;overflow:auto hidden}.base.orientation-vertical .tablist-wrapper{block-size:100%;overflow:hidden auto}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{margin-inline:var(--_tabs-tablist-gutter);align-items:center}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;overflow-y:auto}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base.gutters-small .tabpanel{padding:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{block-size:80%;inline-size:var(--_tabs-active-indicator-stroke-width);border-radius:2px;grid-area:1/1;align-self:center}.base:not(.orientation-vertical) .active-indicator{z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);inline-size:calc(var(--_tabs-active-tab-inline-size));border-radius:2px;grid-area:2/1;position:absolute;inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out,inline-size .2s ease-out}@media (prefers-reduced-motion:reduce){.activeIndicatorTransition{transition-duration:.01ms}}";
11
11
  //#endregion
12
12
  //#region src/lib/tabs/tabs.ts
13
13
  var ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
@@ -7,7 +7,7 @@ import { n as tabDefinition, r as Tab } from "./definition74.js";
7
7
  import { Updates, attr, html, observable, ref, slotted } from "@microsoft/fast-element";
8
8
  import { classNames, keyArrowDown, keyArrowUp, keyEnd, keyHome, limit, uniqueId } from "@microsoft/fast-web-utilities";
9
9
  //#region src/lib/tabs/tabs.scss?inline
10
- var tabs_default = ":host{display:block}.base{--_tabs-tablist-gutter:8px;--_tabs-active-indicator-stroke-width:2px;box-sizing:border-box;display:grid}.base.orientation-vertical{block-size:inherit;grid-template-rows:1fr;grid-template-columns:auto 1fr;overflow:hidden}.base:not(.orientation-vertical){block-size:var(--tabs-block-size,auto);grid-template-rows:auto 1fr;grid-template-columns:1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{isolation:isolate;position:relative;overflow:hidden}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{content:\"\";opacity:0;inline-size:10px;transition:opacity .1s;position:absolute;inset-block:0}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-start:0}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-end:0}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{box-shadow:1px 0 0 0 var(--vvd-color-neutral-300);flex-direction:column}.base.orientation-horizontal .tabs{border-bottom:1px solid var(--vvd-color-neutral-300);flex-direction:row}.tablist{box-sizing:border-box;color:var(--_appearance-color-text);display:grid;position:relative;overflow:hidden}.base.layout-stretch .tablist{--_tab-justify-content:center;--_tabs-tablist-column:1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column:auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-rows:auto;grid-template-columns:auto 1fr;block-size:fit-content;min-block-size:100%;inline-size:100%}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter);grid-template-rows:auto auto;grid-auto-flow:column}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base:not(.orientation-vertical) .tablist-wrapper{align-self:end;inline-size:100%;overflow:auto hidden}.base.orientation-vertical .tablist-wrapper{block-size:100%;overflow:hidden auto}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{margin-inline:var(--_tabs-tablist-gutter);align-items:center}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;overflow-y:auto}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base.gutters-small .tabpanel{padding:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{block-size:80%;inline-size:var(--_tabs-active-indicator-stroke-width);border-radius:2px;grid-area:1/1;align-self:center}.base:not(.orientation-vertical) .active-indicator{z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);inline-size:calc(var(--_tabs-active-tab-inline-size));border-radius:2px;grid-area:2/1;position:absolute;inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out,inline-size .2s ease-out}@media (prefers-reduced-motion:reduce){.activeIndicatorTransition{transition-duration:.01ms}}";
10
+ var tabs_default = ":host{display:block}.base{--_tabs-tablist-gutter:8px;--_tabs-active-indicator-stroke-width:2px;box-sizing:border-box;display:grid}.base.orientation-vertical{block-size:inherit;grid-template-rows:minmax(0,1fr);grid-template-columns:auto minmax(0,1fr);overflow:hidden}.base:not(.orientation-vertical){block-size:var(--tabs-block-size,auto);grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{isolation:isolate;position:relative;overflow:hidden}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{content:\"\";opacity:0;inline-size:10px;transition:opacity .1s;position:absolute;inset-block:0}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-start:0}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-end:0}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{box-shadow:1px 0 0 0 var(--vvd-color-neutral-300);flex-direction:column}.base.orientation-horizontal .tabs{border-bottom:1px solid var(--vvd-color-neutral-300);flex-direction:row}.tablist{box-sizing:border-box;color:var(--_appearance-color-text);display:grid;position:relative;overflow:hidden}.base.layout-stretch .tablist{--_tab-justify-content:center;--_tabs-tablist-column:1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column:auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-rows:auto;grid-template-columns:auto 1fr;block-size:fit-content;min-block-size:100%;inline-size:100%}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter);grid-template-rows:auto auto;grid-auto-flow:column}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base:not(.orientation-vertical) .tablist-wrapper{align-self:end;inline-size:100%;overflow:auto hidden}.base.orientation-vertical .tablist-wrapper{block-size:100%;overflow:hidden auto}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{margin-inline:var(--_tabs-tablist-gutter);align-items:center}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;overflow-y:auto}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base.gutters-small .tabpanel{padding:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{block-size:80%;inline-size:var(--_tabs-active-indicator-stroke-width);border-radius:2px;grid-area:1/1;align-self:center}.base:not(.orientation-vertical) .active-indicator{z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);inline-size:calc(var(--_tabs-active-tab-inline-size));border-radius:2px;grid-area:2/1;position:absolute;inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out,inline-size .2s ease-out}@media (prefers-reduced-motion:reduce){.activeIndicatorTransition{transition-duration:.01ms}}";
11
11
  //#endregion
12
12
  //#region src/lib/tabs/tabs.ts
13
13
  var ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
@@ -1,4 +1,4 @@
1
- //#region ../../node_modules/.pnpm/video.js@8.24.0/node_modules/video.js/dist/lang/en.json
1
+ //#region ../../node_modules/.pnpm/video.js@8.24.1/node_modules/video.js/dist/lang/en.json
2
2
  var en_exports = /* @__PURE__ */ require("./rolldown-runtime.cjs").__exportAll({
3
3
  Background: () => Background,
4
4
  Black: () => Black,
@@ -1,5 +1,5 @@
1
1
  import { t as __exportAll } from "./rolldown-runtime.js";
2
- //#region ../../node_modules/.pnpm/video.js@8.24.0/node_modules/video.js/dist/lang/en.json
2
+ //#region ../../node_modules/.pnpm/video.js@8.24.1/node_modules/video.js/dist/lang/en.json
3
3
  var en_exports = /* @__PURE__ */ __exportAll({
4
4
  Background: () => Background,
5
5
  Black: () => Black,
@@ -15,7 +15,7 @@ var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
15
15
  //#region ../icons/dist/index.mjs
16
16
  var e = {
17
17
  name: "@vonage/vivid-icons",
18
- version: "4.12.0",
18
+ version: "4.13.0",
19
19
  type: "module",
20
20
  exports: {
21
21
  ".": {
@@ -15,7 +15,7 @@ var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
15
15
  //#region ../icons/dist/index.mjs
16
16
  var e = {
17
17
  name: "@vonage/vivid-icons",
18
- version: "4.12.0",
18
+ version: "4.13.0",
19
19
  type: "module",
20
20
  exports: {
21
21
  ".": {
@@ -1,5 +1,6 @@
1
1
  const require_vivid_element = require("./vivid-element.cjs");
2
2
  const require_decorate = require("./decorate.cjs");
3
+ const require_component_enum = require("./component-enum.cjs");
3
4
  const require_form_associated = require("./form-associated.cjs");
4
5
  const require_localized = require("./localized.cjs");
5
6
  const require_definition = require("./definition6.cjs");
@@ -14,9 +15,10 @@ const require_trapped_focus = require("./trapped-focus.cjs");
14
15
  let _microsoft_fast_element = require("@microsoft/fast-element");
15
16
  let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
16
17
  //#region src/shared/picker-field/picker-field.scss?inline
17
- var picker_field_default = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
18
+ var picker_field_default = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.picker-button-icon[disabled],.picker-button-icon[readonly]{--_picker-field-disabled-icon-color:var(--vvd-color-neutral-600)}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
18
19
  //#endregion
19
20
  //#region src/shared/picker-field/picker-field.ts
21
+ var pickerFieldAppearance = require_component_enum.componentEnum(["fieldset", "ghost"], "fieldset");
20
22
  /**
21
23
  * Base class for picker fields. Picker fields consist of a text field with a button that opens a popup that allows
22
24
  * picking values.
@@ -138,6 +140,7 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
138
140
  attribute: "readonly",
139
141
  mode: "boolean"
140
142
  })], PickerField.prototype, "readOnly", void 0);
143
+ require_decorate.__decorate([_microsoft_fast_element.attr], PickerField.prototype, "appearance", void 0);
141
144
  require_decorate.__decorate([_microsoft_fast_element.observable], PickerField.prototype, "_popupOpen", void 0);
142
145
  require_decorate.__decorate([_microsoft_fast_element.observable], PickerField.prototype, "_presentationValue", void 0);
143
146
  //#endregion
@@ -151,6 +154,7 @@ var PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padde
151
154
  <${textFieldTag} id='text-field'
152
155
  ${(0, _microsoft_fast_element.ref)("_textFieldEl")}
153
156
  class='control'
157
+ appearance='${(x) => pickerFieldAppearance.parse(x.appearance)}'
154
158
  label='${(x) => x.label}'
155
159
  helper-text='${(x) => x.helperText}'
156
160
  error-text='${(x) => x.errorValidationMessage}'
@@ -175,6 +179,7 @@ var PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padde
175
179
  ></slot>
176
180
  <${buttonTag}
177
181
  id='picker-button'
182
+ class="picker-button-icon"
178
183
  ${(0, _microsoft_fast_element.ref)("_pickerButtonEl")}
179
184
  slot='action-items'
180
185
  size='condensed'
@@ -1,5 +1,6 @@
1
1
  import { t as VividElement } from "./vivid-element.js";
2
2
  import { t as __decorate } from "./decorate.js";
3
+ import { t as componentEnum } from "./component-enum.js";
3
4
  import { n as FormAssociated } from "./form-associated.js";
4
5
  import { t as Localized } from "./localized.js";
5
6
  import { i as Button } from "./definition6.js";
@@ -14,9 +15,10 @@ import { t as TrappedFocus } from "./trapped-focus.js";
14
15
  import { ExecutionContext, Observable, attr, html, observable, ref, slotted } from "@microsoft/fast-element";
15
16
  import { classNames } from "@microsoft/fast-web-utilities";
16
17
  //#region src/shared/picker-field/picker-field.scss?inline
17
- var picker_field_default = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
18
+ var picker_field_default = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.picker-button-icon[disabled],.picker-button-icon[readonly]{--_picker-field-disabled-icon-color:var(--vvd-color-neutral-600)}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
18
19
  //#endregion
19
20
  //#region src/shared/picker-field/picker-field.ts
21
+ var pickerFieldAppearance = componentEnum(["fieldset", "ghost"], "fieldset");
20
22
  /**
21
23
  * Base class for picker fields. Picker fields consist of a text field with a button that opens a popup that allows
22
24
  * picking values.
@@ -138,6 +140,7 @@ __decorate([attr({
138
140
  attribute: "readonly",
139
141
  mode: "boolean"
140
142
  })], PickerField.prototype, "readOnly", void 0);
143
+ __decorate([attr], PickerField.prototype, "appearance", void 0);
141
144
  __decorate([observable], PickerField.prototype, "_popupOpen", void 0);
142
145
  __decorate([observable], PickerField.prototype, "_presentationValue", void 0);
143
146
  //#endregion
@@ -151,6 +154,7 @@ var PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padde
151
154
  <${textFieldTag} id='text-field'
152
155
  ${ref("_textFieldEl")}
153
156
  class='control'
157
+ appearance='${(x) => pickerFieldAppearance.parse(x.appearance)}'
154
158
  label='${(x) => x.label}'
155
159
  helper-text='${(x) => x.helperText}'
156
160
  error-text='${(x) => x.errorValidationMessage}'
@@ -175,6 +179,7 @@ var PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padde
175
179
  ></slot>
176
180
  <${buttonTag}
177
181
  id='picker-button'
182
+ class="picker-button-icon"
178
183
  ${ref("_pickerButtonEl")}
179
184
  slot='action-items'
180
185
  size='condensed'
@@ -346,7 +346,7 @@ var ReplacedPropHandling = (Base) => {
346
346
  */
347
347
  var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(_microsoft_fast_element.FASTElement))) {
348
348
  static {
349
- this.VIVID_VERSION = "5.28.1";
349
+ this.VIVID_VERSION = "5.29.0";
350
350
  }
351
351
  /**
352
352
  * Add data-vvd-component attribute with component name globally,
@@ -346,7 +346,7 @@ var ReplacedPropHandling = (Base) => {
346
346
  */
347
347
  var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(FASTElement))) {
348
348
  static {
349
- this.VIVID_VERSION = "5.28.1";
349
+ this.VIVID_VERSION = "5.29.0";
350
350
  }
351
351
  /**
352
352
  * Add data-vvd-component attribute with component name globally,