@vonage/vivid 5.28.0 → 5.29.0

package/unbundled/definition63.js

@@ -13,6 +13,8 @@ import { n as textFieldDefinition, r as TextField } from "./definition26.js";
 import { n as tooltipDefinition, r as Tooltip } from "./definition27.js";
 import { t as ListboxOption } from "./option.js";
 import { t as listboxOptionDefinition } from "./definition29.js";
+import { t as Optgroup } from "./optgroup.js";
+import { t as optgroupDefinition } from "./definition30.js";
 import { t as dividerDefinition } from "./definition36.js";
 import { a as featureFacade, c as impl, i as contributionPriority, n as removeSymbol, o as getFeatureImpl, r as RteFeatureImpl, s as sortedContributions, t as dispatchSlottableRequest } from "./slottable-request.js";
 import { n as selectDefinition, r as Select } from "./definition64.js";
@@ -627,7 +629,7 @@ var RteInstance = class {
 		const { state, tr, schema, dispatchTransaction } = this[impl];
 		tr.replaceSelection(new Slice(Fragment.fromJSON(schema, content), 0, 0));
 		tr.doc.check();
-		const $from = tr.doc.resolve(tr.mapping.map(state.selection.from));
+		const $from = tr.doc.resolve(tr.mapping.map(state.selection.from, -1));
 		const $to = tr.doc.resolve(tr.selection.to);
 		const [$head, $anchor] = options?.cursorPlacement === "start" ? [$from, $to] : [$to, $from];
 		if (options?.selectContent) tr.setSelection(state.selection instanceof AllSelection ? new AllSelection(tr.doc) : TextSelection.between($anchor, $head));
@@ -2432,6 +2434,7 @@ var RteAlignmentFeatureImpl = class extends RteFeatureImpl {
 					textAlign: align
 				});
 			});
+			if (state.storedMarks) tr.setStoredMarks(state.storedMarks);
 			dispatch?.(tr.scrollIntoView());
 			return true;
 		};
@@ -3379,6 +3382,7 @@ var RteKeyboardShortcutsFeature = featureFacade(RteKeyboardShortcutsFeatureImpl)
 var suggest_style_default = ".suggest-popover{flex-direction:column;gap:2px;max-block-size:408px;min-inline-size:128px;max-inline-size:248px;padding:4px;display:flex}.suggest-loading-widget{vertical-align:middle;white-space:normal;align-items:center;margin-inline-start:2px;display:inline-flex}.suggest-empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}";
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/suggest.ts
+var isSuggestionGroup = (entry) => "suggestions" in entry;
 var isPopoverOpen = (state) => Boolean(state?.suggestions && !state.dismissed);
 var popoverShowsResults = (state) => isPopoverOpen(state) && state.suggestions.items.length > 0;
 function findMatch(state, regex) {
@@ -3417,7 +3421,7 @@ var RteSuggestFeatureImpl = class extends RteFeatureImpl {
 		dispatch({
 			type: "load",
 			generation: gen,
-			suggestions
+			entries: suggestions
 		});
 	}
 	constructor(featureId, options) {
@@ -3459,16 +3463,20 @@ var RteSuggestFeatureImpl = class extends RteFeatureImpl {
 					};
 					const action = tr.getMeta(this.pluginKey);
 					if (prevState && action) switch (action.type) {
-						case "load": return {
-							...prevState,
-							suggestions: {
-								generation: action.generation,
-								items: action.suggestions,
-								selectedIndex: 0,
-								visibleFocus: false
-							},
-							loadingDecoration: loadingDecoration(false)
-						};
+						case "load": {
+							const entries = action.entries.filter((entry) => !isSuggestionGroup(entry) || entry.suggestions.length > 0);
+							return {
+								...prevState,
+								suggestions: {
+									generation: action.generation,
+									entries,
+									items: entries.flatMap((entry) => isSuggestionGroup(entry) ? entry.suggestions : [entry]),
+									selectedIndex: 0,
+									visibleFocus: false
+								},
+								loadingDecoration: loadingDecoration(false)
+							};
+						}
 						case "navigate": {
 							/* v8 ignore next 3 -- defensive: navigate is only dispatched after results are loaded @preserve */
 							if (!prevState.suggestions?.items.length) return prevState;
@@ -3557,15 +3565,17 @@ var RteSuggestFeatureImpl = class extends RteFeatureImpl {
 						}));
 						return;
 					}
-					for (const [index, suggestion] of suggestions.items.entries()) {
+					const createOption = (suggestion, index, scrollTarget) => {
 						const item = rte.createComponent(ListboxOption);
 						item.text = suggestion.text;
 						item.textSecondary = suggestion.textSecondary;
+						item.icon = suggestion.icon;
 						if (index === suggestions.selectedIndex) {
 							item.selected = true;
 							if (suggestions.visibleFocus) item._highlighted = true;
+							const target = scrollTarget ?? item;
 							queueMicrotask(() => {
-								item.scrollIntoView({ block: "nearest" });
+								target.scrollIntoView({ block: "nearest" });
 							});
 						}
 						item.addEventListener("click", (e) => {
@@ -3573,7 +3583,21 @@ var RteSuggestFeatureImpl = class extends RteFeatureImpl {
 							e.stopPropagation();
 							this.selectSuggestion(view, suggestState, suggestion);
 						});
-						content.appendChild(item);
+						return item;
+					};
+					let index = 0;
+					for (const entry of suggestions.entries) {
+						if (!isSuggestionGroup(entry)) {
+							content.appendChild(createOption(entry, index++));
+							continue;
+						}
+						const group = rte.createComponent(Optgroup);
+						const label = document.createElement("span");
+						label.slot = "label";
+						label.textContent = entry.label;
+						group.appendChild(label);
+						for (const [i, suggestion] of entry.suggestions.entries()) group.appendChild(createOption(suggestion, index++, i === 0 ? group : void 0));
+						content.appendChild(group);
 					}
 				};
 				return {
@@ -3671,6 +3695,7 @@ var richTextEditorDefinition = defineVividComponent("rich-text-editor", RichText
 	dividerDefinition,
 	selectDefinition,
 	listboxOptionDefinition,
+	optgroupDefinition,
 	buttonDefinition,
 	tooltipDefinition,
 	menuDefinition,

package/unbundled/definition76.cjs

@@ -7,7 +7,7 @@ const require_definition$1 = require("./definition74.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/tabs/tabs.scss?inline
-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}}";
+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}}";
 //#endregion
 //#region src/lib/tabs/tabs.ts
 var ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";

package/unbundled/definition76.js

@@ -7,7 +7,7 @@ import { n as tabDefinition, r as Tab } from "./definition74.js";
 import { Updates, attr, html, observable, ref, slotted } from "@microsoft/fast-element";
 import { classNames, keyArrowDown, keyArrowUp, keyEnd, keyHome, limit, uniqueId } from "@microsoft/fast-web-utilities";
 //#region src/lib/tabs/tabs.scss?inline
-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}}";
+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}}";
 //#endregion
 //#region src/lib/tabs/tabs.ts
 var ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";

package/unbundled/en-US.cjs

@@ -1,4 +1,4 @@
-//#region ../../node_modules/.pnpm/video.js@8.24.0/node_modules/video.js/dist/lang/en.json
+//#region ../../node_modules/.pnpm/video.js@8.24.1/node_modules/video.js/dist/lang/en.json
 var en_exports = /* @__PURE__ */ require("./rolldown-runtime.cjs").__exportAll({
 	Background: () => Background,
 	Black: () => Black,

package/unbundled/en-US.js

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime.js";
-//#region ../../node_modules/.pnpm/video.js@8.24.0/node_modules/video.js/dist/lang/en.json
+//#region ../../node_modules/.pnpm/video.js@8.24.1/node_modules/video.js/dist/lang/en.json
 var en_exports = /* @__PURE__ */ __exportAll({
 	Background: () => Background,
 	Black: () => Black,

package/unbundled/numberConverter.cjs

@@ -15,7 +15,7 @@ var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
 //#region ../icons/dist/index.mjs
 var e = {
 	name: "@vonage/vivid-icons",
-	version: "4.12.0",
+	version: "4.13.0",
 	type: "module",
 	exports: {
 		".": {

package/unbundled/numberConverter.js

@@ -15,7 +15,7 @@ var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
 //#region ../icons/dist/index.mjs
 var e = {
 	name: "@vonage/vivid-icons",
-	version: "4.12.0",
+	version: "4.13.0",
 	type: "module",
 	exports: {
 		".": {

package/unbundled/picker-field.template.cjs

@@ -1,5 +1,6 @@
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_component_enum = require("./component-enum.cjs");
 const require_form_associated = require("./form-associated.cjs");
 const require_localized = require("./localized.cjs");
 const require_definition = require("./definition6.cjs");
@@ -14,9 +15,10 @@ const require_trapped_focus = require("./trapped-focus.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/shared/picker-field/picker-field.scss?inline
-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)}";
+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)}";
 //#endregion
 //#region src/shared/picker-field/picker-field.ts
+var pickerFieldAppearance = require_component_enum.componentEnum(["fieldset", "ghost"], "fieldset");
 /**
 * Base class for picker fields. Picker fields consist of a text field with a button that opens a popup that allows
 * picking values.
@@ -138,6 +140,7 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	attribute: "readonly",
 	mode: "boolean"
 })], PickerField.prototype, "readOnly", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], PickerField.prototype, "appearance", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], PickerField.prototype, "_popupOpen", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], PickerField.prototype, "_presentationValue", void 0);
 //#endregion
@@ -151,6 +154,7 @@ var PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padde
 			<${textFieldTag} id='text-field'
 				${(0, _microsoft_fast_element.ref)("_textFieldEl")}
 				class='control'
+				appearance='${(x) => pickerFieldAppearance.parse(x.appearance)}'
 				label='${(x) => x.label}'
 				helper-text='${(x) => x.helperText}'
 				error-text='${(x) => x.errorValidationMessage}'
@@ -175,6 +179,7 @@ var PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padde
 				></slot>
 				<${buttonTag}
 					id='picker-button'
+					class="picker-button-icon"
 					${(0, _microsoft_fast_element.ref)("_pickerButtonEl")}
 					slot='action-items'
 					size='condensed'

package/unbundled/picker-field.template.js

@@ -1,5 +1,6 @@
 import { t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
+import { t as componentEnum } from "./component-enum.js";
 import { n as FormAssociated } from "./form-associated.js";
 import { t as Localized } from "./localized.js";
 import { i as Button } from "./definition6.js";
@@ -14,9 +15,10 @@ import { t as TrappedFocus } from "./trapped-focus.js";
 import { ExecutionContext, Observable, attr, html, observable, ref, slotted } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/shared/picker-field/picker-field.scss?inline
-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)}";
+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)}";
 //#endregion
 //#region src/shared/picker-field/picker-field.ts
+var pickerFieldAppearance = componentEnum(["fieldset", "ghost"], "fieldset");
 /**
 * Base class for picker fields. Picker fields consist of a text field with a button that opens a popup that allows
 * picking values.
@@ -138,6 +140,7 @@ __decorate([attr({
 	attribute: "readonly",
 	mode: "boolean"
 })], PickerField.prototype, "readOnly", void 0);
+__decorate([attr], PickerField.prototype, "appearance", void 0);
 __decorate([observable], PickerField.prototype, "_popupOpen", void 0);
 __decorate([observable], PickerField.prototype, "_presentationValue", void 0);
 //#endregion
@@ -151,6 +154,7 @@ var PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padde
 			<${textFieldTag} id='text-field'
 				${ref("_textFieldEl")}
 				class='control'
+				appearance='${(x) => pickerFieldAppearance.parse(x.appearance)}'
 				label='${(x) => x.label}'
 				helper-text='${(x) => x.helperText}'
 				error-text='${(x) => x.errorValidationMessage}'
@@ -175,6 +179,7 @@ var PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padde
 				></slot>
 				<${buttonTag}
 					id='picker-button'
+					class="picker-button-icon"
 					${ref("_pickerButtonEl")}
 					slot='action-items'
 					size='condensed'

package/unbundled/vivid-element.cjs

@@ -346,7 +346,7 @@ var ReplacedPropHandling = (Base) => {
 */
 var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(_microsoft_fast_element.FASTElement))) {
 	static {
-		this.VIVID_VERSION = "5.28.0";
+		this.VIVID_VERSION = "5.29.0";
 	}
 	/**
 	* Add data-vvd-component attribute with component name globally,

package/unbundled/vivid-element.js

@@ -346,7 +346,7 @@ var ReplacedPropHandling = (Base) => {
 */
 var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(FASTElement))) {
 	static {
-		this.VIVID_VERSION = "5.28.0";
+		this.VIVID_VERSION = "5.29.0";
 	}
 	/**
 	* Add data-vvd-component attribute with component name globally,