@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.
- package/bundled/definition17.cjs +1 -1
- package/bundled/definition17.js +1 -1
- package/bundled/definition18.cjs +1 -1
- package/bundled/definition18.js +1 -1
- package/bundled/definition25.cjs +4 -4
- package/bundled/definition25.js +4 -4
- package/bundled/definition5.cjs +1 -1
- package/bundled/definition5.js +1 -1
- package/bundled/numberConverter.cjs +1 -1
- package/bundled/numberConverter.js +1 -1
- package/bundled/picker-field.template.cjs +5 -3
- package/bundled/picker-field.template.js +20 -17
- package/bundled/vivid-element.cjs +1 -1
- package/bundled/vivid-element.js +1 -1
- package/color-picker/index.cjs +1 -1
- package/color-picker/index.js +1 -1
- package/custom-elements.json +508 -334
- package/empty-state/index.cjs +2 -2
- package/empty-state/index.js +3 -3
- package/lib/date-picker/date-picker.d.ts +4 -0
- package/lib/date-range-picker/date-range-picker.d.ts +2 -0
- package/lib/date-time-picker/date-time-picker.d.ts +4 -0
- package/lib/empty-state/definition.d.ts +1 -1
- package/lib/empty-state/empty-state.d.ts +3 -1
- package/lib/number-field/definition.d.ts +1 -1
- package/lib/number-field/number-field.d.ts +3 -1
- package/lib/rich-text-editor/rte/features/suggest.d.ts +7 -1
- package/lib/time-picker/time-picker.d.ts +2 -0
- package/listbox/index.cjs +1 -1
- package/listbox/index.js +1 -1
- package/locales/de-DE.cjs +1 -1
- package/locales/de-DE.js +1 -1
- package/locales/en-GB.cjs +1 -1
- package/locales/en-GB.js +1 -1
- package/locales/ja-JP.cjs +1 -1
- package/locales/ja-JP.js +1 -1
- package/locales/zh-CN.cjs +1 -1
- package/locales/zh-CN.js +1 -1
- package/number-field/index.cjs +16 -14
- package/number-field/index.js +49 -31
- package/package.json +16 -16
- package/rich-text-editor/index.cjs +14 -14
- package/rich-text-editor/index.js +1818 -1789
- package/shared/picker-field/mixins/calendar-picker.d.ts +1 -0
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +1 -0
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +1 -0
- package/shared/picker-field/mixins/single-date-picker.d.ts +1 -0
- package/shared/picker-field/mixins/single-value-picker.d.ts +1 -0
- package/shared/picker-field/mixins/time-selection-picker.d.ts +1 -0
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +2 -0
- package/shared/picker-field/picker-field.d.ts +38 -31
- package/tabs/index.cjs +1 -1
- package/tabs/index.js +1 -1
- package/unbundled/definition16.cjs +1 -1
- package/unbundled/definition16.js +1 -1
- package/unbundled/definition2.cjs +4 -4
- package/unbundled/definition2.js +4 -4
- package/unbundled/definition28.cjs +5 -1
- package/unbundled/definition28.js +5 -1
- package/unbundled/definition29.cjs +1 -1
- package/unbundled/definition29.js +1 -1
- package/unbundled/definition30.cjs +1 -1
- package/unbundled/definition30.js +1 -1
- package/unbundled/definition42.cjs +3 -2
- package/unbundled/definition42.js +3 -2
- package/unbundled/definition50.cjs +1 -1
- package/unbundled/definition50.js +1 -1
- package/unbundled/definition55.cjs +41 -8
- package/unbundled/definition55.js +41 -8
- package/unbundled/definition6.cjs +1 -1
- package/unbundled/definition6.js +1 -1
- package/unbundled/definition63.cjs +43 -19
- package/unbundled/definition63.js +38 -14
- package/unbundled/definition76.cjs +1 -1
- package/unbundled/definition76.js +1 -1
- package/unbundled/en-US.cjs +1 -1
- package/unbundled/en-US.js +1 -1
- package/unbundled/numberConverter.cjs +1 -1
- package/unbundled/numberConverter.js +1 -1
- package/unbundled/picker-field.template.cjs +6 -1
- package/unbundled/picker-field.template.js +6 -1
- package/unbundled/vivid-element.cjs +1 -1
- package/unbundled/vivid-element.js +1 -1
- package/video-player/index.cjs +1 -1
- package/video-player/index.js +1 -1
- 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";
|
package/unbundled/en-US.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
//#region ../../node_modules/.pnpm/video.js@8.24.
|
|
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,
|
package/unbundled/en-US.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as __exportAll } from "./rolldown-runtime.js";
|
|
2
|
-
//#region ../../node_modules/.pnpm/video.js@8.24.
|
|
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,
|
|
@@ -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.
|
|
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.
|
|
349
|
+
this.VIVID_VERSION = "5.29.0";
|
|
350
350
|
}
|
|
351
351
|
/**
|
|
352
352
|
* Add data-vvd-component attribute with component name globally,
|