@vonage/vivid 5.28.1 → 5.29.0

package/shared/picker-field/mixins/calendar-picker.d.ts

@@ -51,6 +51,7 @@ export declare const CalendarPicker: <T extends AbstractConstructor<PickerField>
     scale?: import('../../../lib/text-field/text-field').TextFieldSize;
     readOnly: boolean;
     readOnlyChanged(): void;
+    appearance?: import('../picker-field').PickerFieldAppearance;
     _textFieldEl: import('../../..').VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import('../../..').VwcButtonElement;

package/shared/picker-field/mixins/calendar-picker.template.d.ts

@@ -49,6 +49,7 @@ export declare const CalendarPickerTemplate: (context: VividElementDefinitionCon
     scale?: import('../../../lib/text-field/text-field').TextFieldSize;
     readOnly: boolean;
     readOnlyChanged(): void;
+    appearance?: import('../picker-field').PickerFieldAppearance;
     _textFieldEl: import('../../..').VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: Button;

package/shared/picker-field/mixins/min-max-calendar-picker.d.ts

@@ -55,6 +55,7 @@ export declare const MinMaxCalendarPicker: <T extends AbstractConstructor<Calend
     scale?: import('../../../lib/text-field/text-field').TextFieldSize;
     readOnly: boolean;
     readOnlyChanged(): void;
+    appearance?: import('../picker-field').PickerFieldAppearance;
     _textFieldEl: import('../../..').VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import('../../..').VwcButtonElement;

package/shared/picker-field/mixins/single-date-picker.d.ts

@@ -53,6 +53,7 @@ export declare const SingleDatePickerMixin: <T extends AbstractConstructor<Calen
     scale?: import('../../../lib/text-field/text-field').TextFieldSize;
     readOnly: boolean;
     readOnlyChanged(): void;
+    appearance?: import('../picker-field').PickerFieldAppearance;
     _textFieldEl: import('../../..').VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import('../../..').VwcButtonElement;

package/shared/picker-field/mixins/single-value-picker.d.ts

@@ -15,6 +15,7 @@ export declare const SingleValuePicker: <T extends AbstractConstructor<PickerFie
     scale?: import('../../../lib/text-field/text-field').TextFieldSize;
     readOnly: boolean;
     readOnlyChanged(): void;
+    appearance?: import('../picker-field').PickerFieldAppearance;
     _textFieldEl: import('../../..').VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import('../../..').VwcButtonElement;

package/shared/picker-field/mixins/time-selection-picker.d.ts

@@ -41,6 +41,7 @@ export declare const TimeSelectionPicker: <T extends AbstractConstructor<SingleV
     scale?: import('../../../lib/text-field/text-field').TextFieldSize;
     readOnly: boolean;
     readOnlyChanged(): void;
+    appearance?: import('../picker-field').PickerFieldAppearance;
     _textFieldEl: import('../../..').VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import('../../..').VwcButtonElement;

package/shared/picker-field/mixins/time-selection-picker.template.d.ts

@@ -37,6 +37,7 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     scale?: import('../../../lib/text-field/text-field').TextFieldSize;
     readOnly: boolean;
     readOnlyChanged(): void;
+    appearance?: import('../picker-field').PickerFieldAppearance;
     _textFieldEl: import('../../..').VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import('../../..').VwcButtonElement;
@@ -986,6 +987,7 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     scale?: import('../../../lib/text-field/text-field').TextFieldSize;
     readOnly: boolean;
     readOnlyChanged(): void;
+    appearance?: import('../picker-field').PickerFieldAppearance;
     _textFieldEl: import('../../..').VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import('../../..').VwcButtonElement;

package/shared/picker-field/picker-field.d.ts

@@ -1,5 +1,11 @@
 import { TextFieldSize } from '../../lib/text-field/text-field';
 import { VividElement } from '../foundation/vivid-element/vivid-element';
+import { ComponentEnum } from '../utils/component-enum.ts';
+export declare const pickerFieldAppearance: {
+    parse: (value: unknown) => "fieldset" | "ghost";
+    defaultValue: "fieldset" | "ghost";
+};
+export type PickerFieldAppearance = ComponentEnum<typeof pickerFieldAppearance>;
 declare const PickerField_base: {
     new (...args: any[]): {
         _contextualHelpSlottedContent?: HTMLElement[];
@@ -47,7 +53,7 @@ declare const PickerField_base: {
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
@@ -462,9 +468,9 @@ declare const PickerField_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
@@ -472,14 +478,14 @@ declare const PickerField_base: {
         _helperTextSlottedContent?: HTMLElement[];
         get _feedbackDescribedBy(): string;
         _internalFeedback(): {
-            type: import('../feedback/feedback-message').FeedbackType;
+            type: import('../feedback/feedback-message.ts').FeedbackType;
             message: string;
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
-        _getFeedbackTemplate(ctx: import('../design-system/defineVividComponent').VividElementDefinitionContext): import('@microsoft/fast-element').ViewTemplate<any, any>;
+        _getFeedbackTemplate(ctx: import('../design-system/defineVividComponent.ts').VividElementDefinitionContext): import('@microsoft/fast-element').ViewTemplate<any, any>;
         connectedCallback(): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -895,9 +901,9 @@ declare const PickerField_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
@@ -949,7 +955,7 @@ declare const PickerField_base: {
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
@@ -1364,9 +1370,9 @@ declare const PickerField_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
@@ -1412,7 +1418,7 @@ declare const PickerField_base: {
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
@@ -1827,16 +1833,16 @@ declare const PickerField_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
         _trappedFocus(event: KeyboardEvent, getFocusableEls: () => NodeListOf<HTMLElement>): boolean;
         connectedCallback(): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -2252,16 +2258,16 @@ declare const PickerField_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
-        get locale(): import('../localization/Locale').Locale;
+        get locale(): import('../localization/Locale.ts').Locale;
         connectedCallback(): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -2677,9 +2683,9 @@ declare const PickerField_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
@@ -2720,7 +2726,7 @@ declare const PickerField_base: {
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
@@ -3135,9 +3141,9 @@ declare const PickerField_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller.ts').ReactiveController): void;
     };
     get formAssociated(): boolean;
 } & typeof VividElement;
@@ -3145,6 +3151,7 @@ export declare abstract class PickerField extends PickerField_base {
     #private;
     scale?: TextFieldSize;
     readOnly: boolean;
+    appearance?: PickerFieldAppearance;
     constructor();
 }
 export {};

package/tabs/index.cjs

@@ -1,4 +1,4 @@
-const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/slotted.cjs"),n=require("../bundled/ref.cjs"),r=require("../bundled/decorate.cjs"),i=require("../bundled/class-names.cjs"),a=require("../bundled/key-codes.cjs"),o=require("../bundled/numbers.cjs"),s=require("../bundled/aria-binding-directive.cjs"),c=require("../bundled/component-enum.cjs"),l=require("../bundled/definition12.cjs"),u=require("../bundled/definition13.cjs");var d=`: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}}`,f=`--_tabs-active-tab-inline-size`,p=c.t([`accent`,`cta`],`accent`),m={vertical:`vertical`,horizontal:`horizontal`},h=e=>e===m.horizontal?m.vertical:m.horizontal,g=e=>e===m.horizontal?`gridColumn`:`gridRow`,_=e=>e===m.horizontal?`translateX`:`translateY`,v=e=>e===m.horizontal?`offsetLeft`:`offsetTop`,y=e=>e.getAttribute(`aria-disabled`)!==`true`&&!e.disabled&&!e.hasAttribute(`hidden`),b=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]),x=class extends e.t{constructor(...e){super(...e),this.orientation=m.horizontal,this.tabs=[],this.tabpanels=[],this.#n=!1,this.#r=void 0,this.#o=e=>{let t=e.currentTarget;this._validTabs.includes(t)&&this.#t(t)},this.#s=e=>{let t=this._validTabs,n=this.activetab;if(!n)return;let[r,i]=this.orientation===m.horizontal?[a.n,a.r]:[a.i,a.t],o={[r]:()=>t[(t.indexOf(n)-1+t.length)%t.length],[i]:()=>t[(t.indexOf(n)+1)%t.length],[a.s]:()=>t[0],End:()=>t[t.length-1]};o[e.key]&&(e.preventDefault(),this.#t(o[e.key]()))},this.#c=!1,this.scrollablePanel=!1,this._actionItemsSlottedContent=[],this.activeindicator=!0}orientationChanged(){this._registerTabsChange(),this.$fastController.isConnected&&e.M.enqueue(()=>this.#u(!1))}tabsChanged(){for(let e of this.tabs)e.id||=`tab-${s.r()}`,e.addEventListener(`click`,this.#o),e.addEventListener(`keydown`,this.#s);this._registerTabsChange()}tabpanelsChanged(){for(let e of this.tabpanels)e.id||=`panel-${s.r()}`;this._registerTabsChange()}#e(){return b(this.tabs,this._tabsSlot.assignedNodes())&&b(this.tabpanels,this._tabPanelsSlot.assignedNodes())}get _pairedTabs(){return this.tabs.slice(0,Math.min(this.tabs.length,this.tabpanels.length))}get _validTabs(){return this._pairedTabs.filter(y)}activeidChanged(){this._registerTabsChange()}get activetab(){return this._validTabs.find(e=>e.id===this.activeid)??null}#t(e){this.activeid=e.id,e.focus(),this.$emit(`change`,e)}#n;_registerTabsChange(){this.#n||(this.#n=!0,window.queueMicrotask(()=>{this.$fastController.isConnected&&this.#e()&&this.#i(),this.#n=!1}))}#r;#i(){let e=this._validTabs,t=this.activeid;if((!e.length||t&&!e.find(e=>e.id===t))&&(t=void 0),!t&&e.length&&(t=e[0].id),this.activeid!==t&&(this.activeid=t,this.$emit(`change`,this.activetab)),this.#a(),this.activeid!==this.#r){if(this.activetab){let e=this.#r!==void 0;this.#h(this.activetab,e),this.#u(e)}this.#r=this.activeid}else this.#u(this.#c)}#a(){for(let[e,t]of this._pairedTabs.entries()){let n=this.tabpanels[e],r=t.id===this.activeid;t instanceof l.r&&(t.active=r),t.setAttribute(`aria-controls`,n.id),t.setAttribute(`tabindex`,r?`0`:`-1`),r&&this.connotation?t.setAttribute(`connotation`,this.connotation):t.removeAttribute(`connotation`),t.classList.toggle(`vertical`,this.orientation===m.vertical),t.style[g(h(this.orientation))]=``,t.style[g(this.orientation)]=`${e+1}`,n.setAttribute(`aria-labelledby`,t.id),n.hidden=!r}}#o;#s;adjust(e){let t=this._validTabs,n=t.findIndex(e=>e.id===this.activeid);if(n===-1)return;let r=o.n(0,t.length-1,n+e);this.#t(t[r])}#c;_onActiveIndicatorTransitionend(e){e.propertyName===`transform`&&(this.#c=!1)}#l(){this.#c=!1,this.activeIndicatorRef.classList.remove(`activeIndicatorTransition`)}#u(e){let t=this._pairedTabs.findIndex(e=>e.id===this.activeid);if(t===-1)return;let n=this.activeIndicatorRef,r=n[v(this.orientation)];n.style[g(this.orientation)]=`${t+1}`;let i=n[v(this.orientation)];n.style[g(this.orientation)]=``;let a=i-r,o=n.style.transform,s=`${_(this.orientation)}(${a}px)`;e?(n.classList.add(`activeIndicatorTransition`),o!==s&&(this.#c=!0)):this.#l(),n.style.transform=s,n.style.setProperty(f,`${this.tabs[t].getBoundingClientRect().width}px`)}connotationChanged(){this._registerTabsChange()}#d(){this.#m.dispatchEvent(new Event(`scroll`))}#f;connectedCallback(){super.connectedCallback(),this._registerTabsChange(),requestAnimationFrame(()=>this.#d()),this.#f=new ResizeObserver(()=>{this.#u(this.#c),this.#d()}),this.#f.observe(this.#m),this.#f.observe(this.tablist)}disconnectedCallback(){super.disconnectedCallback(),this.#f.disconnect()}get#p(){return this.shadowRoot.querySelector(`.tablist-wrapper`)}get#m(){return this.tablist.parentElement}#h(e,t=!0){let n=this.tabs.findIndex(t=>t===e),r=0,i=0;this.orientation===m.vertical?(n===this.tabs.length-1&&(i=this.#p.scrollHeight),n>0&&n<this.tabs.length-1&&(i=e.offsetTop-this.#p.offsetHeight/2+e.offsetHeight/2)):(n===this.tabs.length-1&&(r=this.#p.scrollWidth),n>0&&n<this.tabs.length-1&&(r=e.offsetLeft-this.#p.offsetWidth/2+e.offsetWidth/2)),this.#p.scrollTo({top:i,left:r,behavior:t?`smooth`:`instant`})}};r.t([e.m],x.prototype,`orientation`,void 0),r.t([e.A],x.prototype,`tabs`,void 0),r.t([e.A],x.prototype,`tabpanels`,void 0),r.t([e.m],x.prototype,`activeid`,void 0),r.t([e.A],x.prototype,`activeIndicatorRef`,void 0),r.t([e.A],x.prototype,`tablist`,void 0),r.t([e.m],x.prototype,`connotation`,void 0),r.t([e.m],x.prototype,`gutters`,void 0),r.t([e.m({mode:`boolean`,attribute:`scrollable-panel`})],x.prototype,`scrollablePanel`,void 0),r.t([e.m({attribute:`tabs-layout`})],x.prototype,`tabsLayout`,void 0),r.t([e.A],x.prototype,`_actionItemsSlottedContent`,void 0),r.t([e.m({mode:`boolean`})],x.prototype,`activeindicator`,void 0);function S(e,t){return t.scrollWidth<=t.clientWidth&&(e.classList.toggle(`start-scroll`,!1),e.classList.toggle(`end-scroll`,!1),!0)}function C(e,t){e.classList.toggle(`start-scroll`,t.scrollLeft>0)}function w(e,t){e.classList.toggle(`end-scroll`,t.scrollLeft+1<t.scrollWidth-t.clientWidth)}function T(e,{event:t}){let n=t.currentTarget,r=n.parentElement;S(r,n)||(C(r,n),w(r,n))}var E=e.p`
+const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/slotted.cjs"),n=require("../bundled/ref.cjs"),r=require("../bundled/decorate.cjs"),i=require("../bundled/class-names.cjs"),a=require("../bundled/key-codes.cjs"),o=require("../bundled/numbers.cjs"),s=require("../bundled/aria-binding-directive.cjs"),c=require("../bundled/component-enum.cjs"),l=require("../bundled/definition12.cjs"),u=require("../bundled/definition13.cjs");var d=`: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}}`,f=`--_tabs-active-tab-inline-size`,p=c.t([`accent`,`cta`],`accent`),m={vertical:`vertical`,horizontal:`horizontal`},h=e=>e===m.horizontal?m.vertical:m.horizontal,g=e=>e===m.horizontal?`gridColumn`:`gridRow`,_=e=>e===m.horizontal?`translateX`:`translateY`,v=e=>e===m.horizontal?`offsetLeft`:`offsetTop`,y=e=>e.getAttribute(`aria-disabled`)!==`true`&&!e.disabled&&!e.hasAttribute(`hidden`),b=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]),x=class extends e.t{constructor(...e){super(...e),this.orientation=m.horizontal,this.tabs=[],this.tabpanels=[],this.#n=!1,this.#r=void 0,this.#o=e=>{let t=e.currentTarget;this._validTabs.includes(t)&&this.#t(t)},this.#s=e=>{let t=this._validTabs,n=this.activetab;if(!n)return;let[r,i]=this.orientation===m.horizontal?[a.n,a.r]:[a.i,a.t],o={[r]:()=>t[(t.indexOf(n)-1+t.length)%t.length],[i]:()=>t[(t.indexOf(n)+1)%t.length],[a.s]:()=>t[0],End:()=>t[t.length-1]};o[e.key]&&(e.preventDefault(),this.#t(o[e.key]()))},this.#c=!1,this.scrollablePanel=!1,this._actionItemsSlottedContent=[],this.activeindicator=!0}orientationChanged(){this._registerTabsChange(),this.$fastController.isConnected&&e.M.enqueue(()=>this.#u(!1))}tabsChanged(){for(let e of this.tabs)e.id||=`tab-${s.r()}`,e.addEventListener(`click`,this.#o),e.addEventListener(`keydown`,this.#s);this._registerTabsChange()}tabpanelsChanged(){for(let e of this.tabpanels)e.id||=`panel-${s.r()}`;this._registerTabsChange()}#e(){return b(this.tabs,this._tabsSlot.assignedNodes())&&b(this.tabpanels,this._tabPanelsSlot.assignedNodes())}get _pairedTabs(){return this.tabs.slice(0,Math.min(this.tabs.length,this.tabpanels.length))}get _validTabs(){return this._pairedTabs.filter(y)}activeidChanged(){this._registerTabsChange()}get activetab(){return this._validTabs.find(e=>e.id===this.activeid)??null}#t(e){this.activeid=e.id,e.focus(),this.$emit(`change`,e)}#n;_registerTabsChange(){this.#n||(this.#n=!0,window.queueMicrotask(()=>{this.$fastController.isConnected&&this.#e()&&this.#i(),this.#n=!1}))}#r;#i(){let e=this._validTabs,t=this.activeid;if((!e.length||t&&!e.find(e=>e.id===t))&&(t=void 0),!t&&e.length&&(t=e[0].id),this.activeid!==t&&(this.activeid=t,this.$emit(`change`,this.activetab)),this.#a(),this.activeid!==this.#r){if(this.activetab){let e=this.#r!==void 0;this.#h(this.activetab,e),this.#u(e)}this.#r=this.activeid}else this.#u(this.#c)}#a(){for(let[e,t]of this._pairedTabs.entries()){let n=this.tabpanels[e],r=t.id===this.activeid;t instanceof l.r&&(t.active=r),t.setAttribute(`aria-controls`,n.id),t.setAttribute(`tabindex`,r?`0`:`-1`),r&&this.connotation?t.setAttribute(`connotation`,this.connotation):t.removeAttribute(`connotation`),t.classList.toggle(`vertical`,this.orientation===m.vertical),t.style[g(h(this.orientation))]=``,t.style[g(this.orientation)]=`${e+1}`,n.setAttribute(`aria-labelledby`,t.id),n.hidden=!r}}#o;#s;adjust(e){let t=this._validTabs,n=t.findIndex(e=>e.id===this.activeid);if(n===-1)return;let r=o.n(0,t.length-1,n+e);this.#t(t[r])}#c;_onActiveIndicatorTransitionend(e){e.propertyName===`transform`&&(this.#c=!1)}#l(){this.#c=!1,this.activeIndicatorRef.classList.remove(`activeIndicatorTransition`)}#u(e){let t=this._pairedTabs.findIndex(e=>e.id===this.activeid);if(t===-1)return;let n=this.activeIndicatorRef,r=n[v(this.orientation)];n.style[g(this.orientation)]=`${t+1}`;let i=n[v(this.orientation)];n.style[g(this.orientation)]=``;let a=i-r,o=n.style.transform,s=`${_(this.orientation)}(${a}px)`;e?(n.classList.add(`activeIndicatorTransition`),o!==s&&(this.#c=!0)):this.#l(),n.style.transform=s,n.style.setProperty(f,`${this.tabs[t].getBoundingClientRect().width}px`)}connotationChanged(){this._registerTabsChange()}#d(){this.#m.dispatchEvent(new Event(`scroll`))}#f;connectedCallback(){super.connectedCallback(),this._registerTabsChange(),requestAnimationFrame(()=>this.#d()),this.#f=new ResizeObserver(()=>{this.#u(this.#c),this.#d()}),this.#f.observe(this.#m),this.#f.observe(this.tablist)}disconnectedCallback(){super.disconnectedCallback(),this.#f.disconnect()}get#p(){return this.shadowRoot.querySelector(`.tablist-wrapper`)}get#m(){return this.tablist.parentElement}#h(e,t=!0){let n=this.tabs.findIndex(t=>t===e),r=0,i=0;this.orientation===m.vertical?(n===this.tabs.length-1&&(i=this.#p.scrollHeight),n>0&&n<this.tabs.length-1&&(i=e.offsetTop-this.#p.offsetHeight/2+e.offsetHeight/2)):(n===this.tabs.length-1&&(r=this.#p.scrollWidth),n>0&&n<this.tabs.length-1&&(r=e.offsetLeft-this.#p.offsetWidth/2+e.offsetWidth/2)),this.#p.scrollTo({top:i,left:r,behavior:t?`smooth`:`instant`})}};r.t([e.m],x.prototype,`orientation`,void 0),r.t([e.A],x.prototype,`tabs`,void 0),r.t([e.A],x.prototype,`tabpanels`,void 0),r.t([e.m],x.prototype,`activeid`,void 0),r.t([e.A],x.prototype,`activeIndicatorRef`,void 0),r.t([e.A],x.prototype,`tablist`,void 0),r.t([e.m],x.prototype,`connotation`,void 0),r.t([e.m],x.prototype,`gutters`,void 0),r.t([e.m({mode:`boolean`,attribute:`scrollable-panel`})],x.prototype,`scrollablePanel`,void 0),r.t([e.m({attribute:`tabs-layout`})],x.prototype,`tabsLayout`,void 0),r.t([e.A],x.prototype,`_actionItemsSlottedContent`,void 0),r.t([e.m({mode:`boolean`})],x.prototype,`activeindicator`,void 0);function S(e,t){return t.scrollWidth<=t.clientWidth&&(e.classList.toggle(`start-scroll`,!1),e.classList.toggle(`end-scroll`,!1),!0)}function C(e,t){e.classList.toggle(`start-scroll`,t.scrollLeft>0)}function w(e,t){e.classList.toggle(`end-scroll`,t.scrollLeft+1<t.scrollWidth-t.clientWidth)}function T(e,{event:t}){let n=t.currentTarget,r=n.parentElement;S(r,n)||(C(r,n),w(r,n))}var E=e.p`
 	<template>
 		<div
 			class="${e=>i.t(`base`,`layout-${e.tabsLayout??`align-start`}`,`connotation-${p.parse(e.connotation)}`,`appearance-ghost`,`with-idle`,[`orientation-${e.orientation}`,!!e.orientation],`gutters-${e.gutters??`small`}`,[`scroll`,e.scrollablePanel],[`has-action-items`,!!e._actionItemsSlottedContent.length])}"

package/tabs/index.js

@@ -10,7 +10,7 @@ import { t as v } from "../bundled/component-enum.js";
 import { n as y, r as b } from "../bundled/definition12.js";
 import { n as x } from "../bundled/definition13.js";
 //#region src/lib/tabs/tabs.scss?inline
-var S = ":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}}", C = "--_tabs-active-tab-inline-size", w = v(["accent", "cta"], "accent"), T = {
+var S = ":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}}", C = "--_tabs-active-tab-inline-size", w = v(["accent", "cta"], "accent"), T = {
 	vertical: "vertical",
 	horizontal: "horizontal"
 }, E = (e) => e === T.horizontal ? T.vertical : T.horizontal, D = (e) => e === T.horizontal ? "gridColumn" : "gridRow", O = (e) => e === T.horizontal ? "translateX" : "translateY", k = (e) => e === T.horizontal ? "offsetLeft" : "offsetTop", A = (e) => e.getAttribute("aria-disabled") !== "true" && !e.disabled && !e.hasAttribute("hidden"), j = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), M = class extends a {

package/unbundled/definition16.cjs

@@ -29,7 +29,7 @@ var CONNOTATION_ICON_MAP = {
 /**
 * @public
 * @component banner
-* @slot action-items - Add action items to banner using this slot.
+* @slot action-items - Add action items to the banner using this slot.
 * @slot icon - The preferred way to add an icon to the component.
 * @testSelector byText byText
 * @testAction dismiss clickButton #dismissButton

package/unbundled/definition16.js

@@ -29,7 +29,7 @@ var CONNOTATION_ICON_MAP = {
 /**
 * @public
 * @component banner
-* @slot action-items - Add action items to banner using this slot.
+* @slot action-items - Add action items to the banner using this slot.
 * @slot icon - The preferred way to add an icon to the component.
 * @testSelector byText byText
 * @testAction dismiss clickButton #dismissButton

package/unbundled/definition2.cjs

@@ -95,10 +95,10 @@ var header = (context, hTagName) => {
 						>`)}
 				</span>
 
-				<span class="meta">
-					<slot name="meta" ${(0, _microsoft_fast_element.slotted)("_metaSlottedContent")}></slot>
-					${(0, _microsoft_fast_element.when)((x) => x.meta && !x._metaSlottedContent?.length, _microsoft_fast_element.html`${(x) => x.meta}`)}
-				</span>
+				${(0, _microsoft_fast_element.when)((x) => x.meta || x._metaSlottedContent?.length, _microsoft_fast_element.html`<span class="meta">
+						<slot name="meta" ${(0, _microsoft_fast_element.slotted)("_metaSlottedContent")}></slot>
+						${(0, _microsoft_fast_element.when)((x) => x.meta && !x._metaSlottedContent?.length, _microsoft_fast_element.html`${(x) => x.meta}`)}
+					</span>`)}
 
 				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
 				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(x.expanded ? "chevron-up-line" : "chevron-down-line") : null}

package/unbundled/definition2.js

@@ -95,10 +95,10 @@ var header = (context, hTagName) => {
 						>`)}
 				</span>
 
-				<span class="meta">
-					<slot name="meta" ${slotted("_metaSlottedContent")}></slot>
-					${when((x) => x.meta && !x._metaSlottedContent?.length, html`${(x) => x.meta}`)}
-				</span>
+				${when((x) => x.meta || x._metaSlottedContent?.length, html`<span class="meta">
+						<slot name="meta" ${slotted("_metaSlottedContent")}></slot>
+						${when((x) => x.meta && !x._metaSlottedContent?.length, html`${(x) => x.meta}`)}
+					</span>`)}
 
 				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
 				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(x.expanded ? "chevron-up-line" : "chevron-down-line") : null}

package/unbundled/definition28.cjs

@@ -175,7 +175,11 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 	}
 	/** @internal */
 	_onPickerColorChanged(e) {
-		if (typeof e.detail.value === "string") this.value = e.detail.value;
+		if (typeof e.detail.value === "string") {
+			this.value = e.detail.value;
+			this.$emit("change");
+			this.$emit("input");
+		}
 	}
 	/** @internal */
 	valueChanged(_oldVal, newVal) {

package/unbundled/definition28.js

@@ -175,7 +175,11 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 	}
 	/** @internal */
 	_onPickerColorChanged(e) {
-		if (typeof e.detail.value === "string") this.value = e.detail.value;
+		if (typeof e.detail.value === "string") {
+			this.value = e.detail.value;
+			this.$emit("change");
+			this.$emit("input");
+		}
 	}
 	/** @internal */
 	valueChanged(_oldVal, newVal) {

package/unbundled/definition29.cjs

@@ -43,7 +43,7 @@ var ListboxOptionTemplate = (context) => {
 //#endregion
 //#region src/lib/option/definition.ts
 /** @internal */
-var listboxOptionDefinition = require_vivid_element.defineVividComponent("option", require_option.ListboxOption, ListboxOptionTemplate, [require_definition.iconDefinition], { styles: ":host([disabled]){cursor:not-allowed}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-shadow,0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor));outline:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}" });
+var listboxOptionDefinition = require_vivid_element.defineVividComponent("option", require_option.ListboxOption, ListboxOptionTemplate, [require_definition.iconDefinition], { styles: ":host([disabled]){cursor:not-allowed}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-shadow,0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor));outline:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.text-primary{-webkit-line-clamp:var(--option-text-line-clamp,initial)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--option-text-secondary-line-clamp,initial)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}" });
 /**
 * Registers the listbox-option elements with the design system.
 *

package/unbundled/definition29.js

@@ -43,7 +43,7 @@ var ListboxOptionTemplate = (context) => {
 //#endregion
 //#region src/lib/option/definition.ts
 /** @internal */
-var listboxOptionDefinition = defineVividComponent("option", ListboxOption, ListboxOptionTemplate, [iconDefinition], { styles: ":host([disabled]){cursor:not-allowed}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-shadow,0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor));outline:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}" });
+var listboxOptionDefinition = defineVividComponent("option", ListboxOption, ListboxOptionTemplate, [iconDefinition], { styles: ":host([disabled]){cursor:not-allowed}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-shadow,0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor));outline:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.text-primary{-webkit-line-clamp:var(--option-text-line-clamp,initial)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--option-text-secondary-line-clamp,initial)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}" });
 /**
 * Registers the listbox-option elements with the design system.
 *

package/unbundled/definition30.cjs

@@ -27,7 +27,7 @@ var OptgroupTemplate = () => {
 //#endregion
 //#region src/lib/optgroup/definition.ts
 /** @internal */
-var optgroupDefinition = require_vivid_element.defineVividComponent("optgroup", require_optgroup.Optgroup, OptgroupTemplate, [], { styles: ":host{display:block}.base{flex-direction:column;display:flex}slot[name=label]{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed-bold);user-select:none;padding-block:8px 4px;padding-inline:8px;display:flex}.options{flex-direction:column;gap:2px;display:flex}" });
+var optgroupDefinition = require_vivid_element.defineVividComponent("optgroup", require_optgroup.Optgroup, OptgroupTemplate, [], { styles: ":host{display:block}.base{flex-direction:column;display:flex}slot[name=label]{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed-bold);user-select:none;padding-block:8px 4px;padding-inline:16px 8px;display:flex}.options{flex-direction:column;gap:2px;display:flex}" });
 /**
 * Registers the optgroup element with the design system.
 *

package/unbundled/definition30.js

@@ -27,7 +27,7 @@ var OptgroupTemplate = () => {
 //#endregion
 //#region src/lib/optgroup/definition.ts
 /** @internal */
-var optgroupDefinition = defineVividComponent("optgroup", Optgroup, OptgroupTemplate, [], { styles: ":host{display:block}.base{flex-direction:column;display:flex}slot[name=label]{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed-bold);user-select:none;padding-block:8px 4px;padding-inline:8px;display:flex}.options{flex-direction:column;gap:2px;display:flex}" });
+var optgroupDefinition = defineVividComponent("optgroup", Optgroup, OptgroupTemplate, [], { styles: ":host{display:block}.base{flex-direction:column;display:flex}slot[name=label]{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed-bold);user-select:none;padding-block:8px 4px;padding-inline:16px 8px;display:flex}.options{flex-direction:column;gap:2px;display:flex}" });
 /**
 * Registers the optgroup element with the design system.
 *

package/unbundled/definition42.cjs

@@ -6,7 +6,7 @@ const require_component_enum = require("./component-enum.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/empty-state/empty-state.scss?inline
-var empty_state_default = ":host{display:block}.base{--_empty-state-icon-container:120px;--_empty-state-icon-background:var(--_connotation-color-faint);--_empty-state-icon-font-size:52px;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:24px;block-size:100%;display:flex}.icon-container{background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background:transparent;--_empty-state-icon-font-size:40px;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-container .icon{border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all);padding:19px}.content{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-align:center;flex-direction:column;gap:8px;display:flex}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.base.no-actions .actions{display:none}";
+var empty_state_default = ":host{display:block}.base{--_empty-state-icon-container:120px;--_empty-state-icon-font-size:40px;--_empty-state-box-shadow:20px;--_empty-state-icon-padding:20px;--_empty-state-border-width:1px;--_empty-state-gap:24px;box-sizing:border-box;justify-content:center;align-items:center;gap:var(--_empty-state-gap);flex-direction:column;block-size:100%;display:flex}.base.size-condensed{--_empty-state-icon-container:80px;--_empty-state-icon-font-size:28px;--_empty-state-box-shadow:14px;--_empty-state-icon-padding:12px;--_empty-state-border-width:1px;--_empty-state-gap:16px}.base.size-expanded{--_empty-state-icon-container:240px;--_empty-state-icon-font-size:80px;--_empty-state-box-shadow:40px;--_empty-state-icon-padding:38px;--_empty-state-border-width:2px;--_empty-state-gap:24px}.icon-container{block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 var(--_empty-state-box-shadow) color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-container .icon{padding:var(--_empty-state-icon-padding);border:var(--_empty-state-border-width) solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all)}.content{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-align:center;flex-direction:column;gap:8px;display:flex}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.base.no-actions .actions{display:none}";
 //#endregion
 //#region src/lib/empty-state/empty-state.ts
 var emptyStateConnotation = require_component_enum.componentEnum([
@@ -29,6 +29,7 @@ var emptyStateConnotation = require_component_enum.componentEnum([
 var EmptyState = class extends require_vivid_element.VividElement {};
 require_decorate.__decorate([_microsoft_fast_element.attr], EmptyState.prototype, "connotation", void 0);
 require_decorate.__decorate([_microsoft_fast_element.attr], EmptyState.prototype, "headline", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], EmptyState.prototype, "size", void 0);
 require_decorate.__decorate([_microsoft_fast_element.attr], EmptyState.prototype, "icon", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "icon-decoration" })], EmptyState.prototype, "iconDecoration", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], EmptyState.prototype, "slottedActionItems", void 0);
@@ -37,7 +38,7 @@ require_decorate.__decorate([_microsoft_fast_element.observable], EmptyState.pro
 var EmptyStateTemplate = (context) => {
 	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html` <div
-		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${emptyStateConnotation.parse(x.connotation)}`, ["no-actions", x.slottedActionItems?.length === 0])}"
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${emptyStateConnotation.parse(x.connotation)}`, ["no-actions", x.slottedActionItems?.length === 0], [`size-${x.size}`, Boolean(x.size)])}"
 		aria-labelledby="${(x) => x.headline ? "empty-state-headline" : null}"
 	>
 		<slot name="graphic">

package/unbundled/definition42.js

@@ -6,7 +6,7 @@ import { t as componentEnum } from "./component-enum.js";
 import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/empty-state/empty-state.scss?inline
-var empty_state_default = ":host{display:block}.base{--_empty-state-icon-container:120px;--_empty-state-icon-background:var(--_connotation-color-faint);--_empty-state-icon-font-size:52px;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:24px;block-size:100%;display:flex}.icon-container{background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background:transparent;--_empty-state-icon-font-size:40px;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-container .icon{border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all);padding:19px}.content{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-align:center;flex-direction:column;gap:8px;display:flex}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.base.no-actions .actions{display:none}";
+var empty_state_default = ":host{display:block}.base{--_empty-state-icon-container:120px;--_empty-state-icon-font-size:40px;--_empty-state-box-shadow:20px;--_empty-state-icon-padding:20px;--_empty-state-border-width:1px;--_empty-state-gap:24px;box-sizing:border-box;justify-content:center;align-items:center;gap:var(--_empty-state-gap);flex-direction:column;block-size:100%;display:flex}.base.size-condensed{--_empty-state-icon-container:80px;--_empty-state-icon-font-size:28px;--_empty-state-box-shadow:14px;--_empty-state-icon-padding:12px;--_empty-state-border-width:1px;--_empty-state-gap:16px}.base.size-expanded{--_empty-state-icon-container:240px;--_empty-state-icon-font-size:80px;--_empty-state-box-shadow:40px;--_empty-state-icon-padding:38px;--_empty-state-border-width:2px;--_empty-state-gap:24px}.icon-container{block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 var(--_empty-state-box-shadow) color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-container .icon{padding:var(--_empty-state-icon-padding);border:var(--_empty-state-border-width) solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all)}.content{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-align:center;flex-direction:column;gap:8px;display:flex}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.base.no-actions .actions{display:none}";
 //#endregion
 //#region src/lib/empty-state/empty-state.ts
 var emptyStateConnotation = componentEnum([
@@ -29,6 +29,7 @@ var emptyStateConnotation = componentEnum([
 var EmptyState = class extends VividElement {};
 __decorate([attr], EmptyState.prototype, "connotation", void 0);
 __decorate([attr], EmptyState.prototype, "headline", void 0);
+__decorate([attr], EmptyState.prototype, "size", void 0);
 __decorate([attr], EmptyState.prototype, "icon", void 0);
 __decorate([attr({ attribute: "icon-decoration" })], EmptyState.prototype, "iconDecoration", void 0);
 __decorate([observable], EmptyState.prototype, "slottedActionItems", void 0);
@@ -37,7 +38,7 @@ __decorate([observable], EmptyState.prototype, "slottedActionItems", void 0);
 var EmptyStateTemplate = (context) => {
 	const iconTag = context.tagFor(Icon);
 	return html` <div
-		class="${(x) => classNames("base", `connotation-${emptyStateConnotation.parse(x.connotation)}`, ["no-actions", x.slottedActionItems?.length === 0])}"
+		class="${(x) => classNames("base", `connotation-${emptyStateConnotation.parse(x.connotation)}`, ["no-actions", x.slottedActionItems?.length === 0], [`size-${x.size}`, Boolean(x.size)])}"
 		aria-labelledby="${(x) => x.headline ? "empty-state-headline" : null}"
 	>
 		<slot name="graphic">

package/unbundled/definition50.cjs

@@ -600,7 +600,7 @@ require_decorate.__decorate([_microsoft_fast_element.observable], Listbox.protot
 require_decorate.__decorate([_microsoft_fast_element.observable], Listbox.prototype, "values", void 0);
 //#endregion
 //#region src/lib/listbox/listbox.scss?inline
-var listbox_default = ":host{outline:none;flex-direction:column;gap:2px;display:flex}:host(:not(:focus-visible)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}.no-matches{padding:8px 16px}";
+var listbox_default = ":host{--option-text-line-clamp:1;--option-text-secondary-line-clamp:1;outline:none;flex-direction:column;gap:2px;display:flex}:host(:not(:focus-visible)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}.no-matches{padding:8px 16px}";
 //#endregion
 //#region src/lib/listbox/listbox.template.ts
 var hasNoMatches = (x) => x._hasNoMatches;

package/unbundled/definition50.js

@@ -598,7 +598,7 @@ __decorate([observable], Listbox.prototype, "_activeDescendantId", void 0);
 __decorate([observable], Listbox.prototype, "values", void 0);
 //#endregion
 //#region src/lib/listbox/listbox.scss?inline
-var listbox_default = ":host{outline:none;flex-direction:column;gap:2px;display:flex}:host(:not(:focus-visible)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}.no-matches{padding:8px 16px}";
+var listbox_default = ":host{--option-text-line-clamp:1;--option-text-secondary-line-clamp:1;outline:none;flex-direction:column;gap:2px;display:flex}:host(:not(:focus-visible)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}.no-matches{padding:8px 16px}";
 //#endregion
 //#region src/lib/listbox/listbox.template.ts
 var hasNoMatches = (x) => x._hasNoMatches;