@vonage/vivid 4.21.1 → 4.23.0

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

@@ -22,20 +22,20 @@ export declare const TimeSelectionPicker: <T_4 extends AbstractConstructor<{
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#17@#onFocusIn": () => void;
-    "__#17@#onFocusOut": () => void;
+    "__#16@#onFocusIn": () => void;
+    "__#16@#onFocusOut": () => void;
     errorValidationMessage: string;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#17@#localeChangeHandler": {
+    "__#16@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#17@#localeChangeObserver": BindingObserver<any, any, any>;
-    "__#17@#startObservingLocaleChanges"(): void;
-    "__#17@#stopObservingLocaleChanges"(): void;
+    "__#16@#localeChangeObserver": BindingObserver<any, any, any>;
+    "__#16@#startObservingLocaleChanges"(): void;
+    "__#16@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#17@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#17@#openPopupIfPossible"(): void;
+    "__#16@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#16@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -50,6 +50,11 @@ export declare const TimeSelectionPicker: <T_4 extends AbstractConstructor<{
     _onPickerButtonClick(): void;
     _onOkClick(): void;
     _trappedFocus(event: KeyboardEvent, getFocusableEls: () => NodeListOf<HTMLElement>): boolean;
+    specialHandling: boolean;
+    _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
+    readonly $fastController: import("@microsoft/fast-element").Controller;
+    $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
@@ -366,9 +371,10 @@ export declare const TimeSelectionPicker: <T_4 extends AbstractConstructor<{
     tabIndex: number;
     blur(): void;
     focus(options?: FocusOptions | undefined): void;
-    readonly $fastController: import("@microsoft/fast-element").Controller;
-    $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    ariaColIndexText: string | null;
+    ariaDescription: string | null;
+    ariaRowIndexText: string | null;
+    ariaRelevant: string | null;
     readonly locale: import("../../localization/Locale").Locale;
     proxy: HTMLInputElement;
     dirtyValue: boolean;
@@ -410,12 +416,12 @@ export declare const TimeSelectionPicker: <T_4 extends AbstractConstructor<{
     readonly _displaySeconds: boolean;
     readonly _use12hClock: boolean;
     readonly _timePlaceholder: string;
-    "__#20@#clockChangeHandler": {
+    "__#19@#clockChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#clockChangeObserver": BindingObserver;
-    "__#20@#startObservingClockChanges"(): void;
-    "__#20@#stopObservingClockChanges"(): void;
+    "__#19@#clockChangeObserver": BindingObserver;
+    "__#19@#startObservingClockChanges"(): void;
+    "__#19@#stopObservingClockChanges"(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     _onPickerButtonClick(): void;
@@ -438,20 +444,20 @@ export declare const TimeSelectionPicker: <T_4 extends AbstractConstructor<{
     _textFieldEl: import("../../..").VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import("../../..").VwcButtonElement;
-    "__#17@#onFocusIn": () => void;
-    "__#17@#onFocusOut": () => void;
+    "__#16@#onFocusIn": () => void;
+    "__#16@#onFocusOut": () => void;
     errorValidationMessage: string;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#17@#localeChangeHandler": {
+    "__#16@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#17@#localeChangeObserver": BindingObserver<any, any, any>;
-    "__#17@#startObservingLocaleChanges"(): void;
-    "__#17@#stopObservingLocaleChanges"(): void;
+    "__#16@#localeChangeObserver": BindingObserver<any, any, any>;
+    "__#16@#startObservingLocaleChanges"(): void;
+    "__#16@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#17@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#17@#openPopupIfPossible"(): void;
+    "__#16@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#16@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -465,6 +471,11 @@ export declare const TimeSelectionPicker: <T_4 extends AbstractConstructor<{
     readonly _pickerButtonIcon: string;
     _onOkClick(): void;
     _trappedFocus(event: KeyboardEvent, getFocusableEls: () => NodeListOf<HTMLElement>): boolean;
+    specialHandling: boolean;
+    _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
+    readonly $fastController: import("@microsoft/fast-element").Controller;
+    $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
@@ -781,9 +792,10 @@ export declare const TimeSelectionPicker: <T_4 extends AbstractConstructor<{
     tabIndex: number;
     blur(): void;
     focus(options?: FocusOptions | undefined): void;
-    readonly $fastController: import("@microsoft/fast-element").Controller;
-    $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    ariaColIndexText: string | null;
+    ariaDescription: string | null;
+    ariaRowIndexText: string | null;
+    ariaRelevant: string | null;
     readonly locale: import("../../localization/Locale").Locale;
     proxy: HTMLInputElement;
     dirtyValue: boolean;

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

@@ -12,12 +12,12 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     readonly _displaySeconds: boolean;
     readonly _use12hClock: boolean;
     readonly _timePlaceholder: string;
-    "__#20@#clockChangeHandler": {
+    "__#19@#clockChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#clockChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
-    "__#20@#startObservingClockChanges"(): void;
-    "__#20@#stopObservingClockChanges"(): void;
+    "__#19@#clockChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
+    "__#19@#startObservingClockChanges"(): void;
+    "__#19@#stopObservingClockChanges"(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     _onPickerButtonClick(): void;
@@ -40,20 +40,20 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _textFieldEl: import("../../..").VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import("../../..").VwcButtonElement;
-    "__#17@#onFocusIn": () => void;
-    "__#17@#onFocusOut": () => void;
+    "__#16@#onFocusIn": () => void;
+    "__#16@#onFocusOut": () => void;
     errorValidationMessage: string;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#17@#localeChangeHandler": {
+    "__#16@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#17@#localeChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
-    "__#17@#startObservingLocaleChanges"(): void;
-    "__#17@#stopObservingLocaleChanges"(): void;
+    "__#16@#localeChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
+    "__#16@#startObservingLocaleChanges"(): void;
+    "__#16@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#17@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#17@#openPopupIfPossible"(): void;
+    "__#16@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#16@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -67,6 +67,11 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     readonly _pickerButtonIcon: string;
     _onOkClick(): void;
     _trappedFocus(event: KeyboardEvent, getFocusableEls: () => NodeListOf<HTMLElement>): boolean;
+    specialHandling: boolean;
+    _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
+    readonly $fastController: import("@microsoft/fast-element").Controller;
+    $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
@@ -383,9 +388,10 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     tabIndex: number;
     blur(): void;
     focus(options?: FocusOptions | undefined): void;
-    readonly $fastController: import("@microsoft/fast-element").Controller;
-    $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    ariaColIndexText: string | null;
+    ariaDescription: string | null;
+    ariaRowIndexText: string | null;
+    ariaRelevant: string | null;
     readonly locale: import("../../localization/Locale").Locale;
     proxy: HTMLInputElement;
     dirtyValue: boolean;
@@ -435,20 +441,20 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#17@#onFocusIn": () => void;
-    "__#17@#onFocusOut": () => void;
+    "__#16@#onFocusIn": () => void;
+    "__#16@#onFocusOut": () => void;
     errorValidationMessage: string;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#17@#localeChangeHandler": {
+    "__#16@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#17@#localeChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
-    "__#17@#startObservingLocaleChanges"(): void;
-    "__#17@#stopObservingLocaleChanges"(): void;
+    "__#16@#localeChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
+    "__#16@#startObservingLocaleChanges"(): void;
+    "__#16@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#17@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#17@#openPopupIfPossible"(): void;
+    "__#16@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#16@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -463,6 +469,11 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _onPickerButtonClick(): void;
     _onOkClick(): void;
     _trappedFocus(event: KeyboardEvent, getFocusableEls: () => NodeListOf<HTMLElement>): boolean;
+    specialHandling: boolean;
+    _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
+    readonly $fastController: import("@microsoft/fast-element").Controller;
+    $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
@@ -779,9 +790,10 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     tabIndex: number;
     blur(): void;
     focus(options?: FocusOptions | undefined): void;
-    readonly $fastController: import("@microsoft/fast-element").Controller;
-    $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    ariaColIndexText: string | null;
+    ariaDescription: string | null;
+    ariaRowIndexText: string | null;
+    ariaRelevant: string | null;
     readonly locale: import("../../localization/Locale").Locale;
     proxy: HTMLInputElement;
     dirtyValue: boolean;

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

@@ -3,6 +3,13 @@ import { FormAssociatedPickerField } from './picker-field.form-associated';
 declare const PickerField_base: {
     new (...args: any[]): {
         _trappedFocus(event: KeyboardEvent, getFocusableEls: () => NodeListOf<HTMLElement>): boolean;
+        specialHandling: boolean;
+        _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
+        readonly $fastController: import("@microsoft/fast-element").Controller;
+        $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -319,15 +326,21 @@ declare const PickerField_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions | undefined): void;
+        ariaColIndexText: string | null;
+        ariaDescription: string | null;
+        ariaRowIndexText: string | null;
+        ariaRelevant: string | null;
+    };
+} & {
+    new (...args: any[]): {
+        readonly locale: import("../localization/Locale").Locale;
+        specialHandling: boolean;
+        _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    };
-} & {
-    new (...args: any[]): {
-        readonly locale: import("../localization/Locale").Locale;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -644,11 +657,10 @@ declare const PickerField_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions | undefined): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
-        $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
-        disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        ariaColIndexText: string | null;
+        ariaDescription: string | null;
+        ariaRowIndexText: string | null;
+        ariaRelevant: string | null;
     };
 } & typeof FormAssociatedPickerField;
 export declare abstract class PickerField extends PickerField_base {

package/shared/picker-field.template.js

@@ -1,7 +1,7 @@
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement, a as attr, o as observable, O as Observable, i as defaultExecutionContext, h as html } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, O as Observable, k as defaultExecutionContext, h as html } from './vivid-element.js';
 import { a as FormElementHelperText } from './form-elements.js';
 import { L as Localized } from './localized.js';
 import { P as Popup } from './definition65.js';

package/shared/repeat.js

@@ -1,4 +1,4 @@
-import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, g as HTMLView } from './vivid-element.js';
+import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, j as HTMLView } from './vivid-element.js';
 
 /** @internal */
 function newSplice(index, removed, addedCount) {

package/shared/single-value-picker.cjs

@@ -46,6 +46,9 @@ const SingleValuePicker = (Base) => {
           this._parsePresentationValue(this._presentationValue)
         );
       } catch (_) {
+        const invalidPresentationValue = this._presentationValue;
+        this._updateValueDueToUserInteraction("");
+        this._presentationValue = invalidPresentationValue;
         return;
       }
     }

package/shared/single-value-picker.js

@@ -44,6 +44,9 @@ const SingleValuePicker = (Base) => {
           this._parsePresentationValue(this._presentationValue)
         );
       } catch (_) {
+        const invalidPresentationValue = this._presentationValue;
+        this._updateValueDueToUserInteraction("");
+        this._presentationValue = invalidPresentationValue;
         return;
       }
     }

package/shared/slider.template.cjs

@@ -2,6 +2,7 @@
 
 const numbers = require('./numbers.cjs');
 const definition = require('./definition65.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 const classNames = require('./class-names.cjs');
 const ref = require('./ref.cjs');
 const when = require('./when.cjs');
@@ -56,21 +57,21 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
 const SliderTemplate = (context) => {
   const popupTag = context.tagFor(definition.Popup);
   return vividElement.html`<template
-		role="${(x) => x.ariaLabel ? "presentation" : null}"
 		@focusin="${(x) => x._onFocusIn()}"
 		@focusout="${(x) => x._onFocusOut()}"
 	>
 		<div
-			role="slider"
 			tabindex="${(x) => x.disabled ? null : 0}"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-valuetext="${(x) => x.ariaValueText || x.valueTextFormatter(x.value)}"
-			aria-valuenow="${(x) => x.value}"
-			aria-valuemin="${(x) => x.min}"
-			aria-valuemax="${(x) => x.max}"
-			aria-disabled="${(x) => x.disabled ? true : void 0}"
-			aria-orientation="${(x) => x.orientation}"
 			class="${getClasses} ${(x) => x.orientation}"
+			${delegatesAria.delegateAria({
+    role: "slider",
+    ariaValueText: (x) => x.ariaValueText || x.valueTextFormatter(x.value),
+    ariaValueNow: (x) => x.value,
+    ariaValueMin: (x) => x.min,
+    ariaValueMax: (x) => x.max,
+    ariaDisabled: (x) => x.disabled ? "true" : null,
+    ariaOrientation: (x) => x.orientation
+  })}
 		>
 			<div class="positioning-region">
 				<div ${ref.ref("track")} class="track">

package/shared/slider.template.js

@@ -1,5 +1,6 @@
 import { l as limit } from './numbers.js';
 import { P as Popup, a as PlacementStrategy } from './definition65.js';
+import { d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';
 import { w as when } from './when.js';
@@ -54,21 +55,21 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
 const SliderTemplate = (context) => {
   const popupTag = context.tagFor(Popup);
   return html`<template
-		role="${(x) => x.ariaLabel ? "presentation" : null}"
 		@focusin="${(x) => x._onFocusIn()}"
 		@focusout="${(x) => x._onFocusOut()}"
 	>
 		<div
-			role="slider"
 			tabindex="${(x) => x.disabled ? null : 0}"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-valuetext="${(x) => x.ariaValueText || x.valueTextFormatter(x.value)}"
-			aria-valuenow="${(x) => x.value}"
-			aria-valuemin="${(x) => x.min}"
-			aria-valuemax="${(x) => x.max}"
-			aria-disabled="${(x) => x.disabled ? true : void 0}"
-			aria-orientation="${(x) => x.orientation}"
 			class="${getClasses} ${(x) => x.orientation}"
+			${delegateAria({
+    role: "slider",
+    ariaValueText: (x) => x.ariaValueText || x.valueTextFormatter(x.value),
+    ariaValueNow: (x) => x.value,
+    ariaValueMin: (x) => x.min,
+    ariaValueMax: (x) => x.max,
+    ariaDisabled: (x) => x.disabled ? "true" : null,
+    ariaOrientation: (x) => x.orientation
+  })}
 		>
 			<div class="positioning-region">
 				<div ${ref("track")} class="track">

package/shared/templating/attribute-binding-behaviour.d.ts

@@ -0,0 +1,15 @@
+import { type Behavior, type Binding, type ExecutionContext, type Subscriber } from '@microsoft/fast-element';
+export declare class AttributeBindingBehavior implements Behavior, Subscriber {
+    private target;
+    private binding;
+    private isBindingVolatile;
+    private attributeName;
+    constructor(target: HTMLElement, binding: Binding, isBindingVolatile: boolean, attributeName: string);
+    private source;
+    private context;
+    private bindingObserver?;
+    bind(source: unknown, context: ExecutionContext): void;
+    unbind(): void;
+    handleChange(): void;
+    updateTarget(value: unknown): void;
+}

package/shared/templating/render-in-light-dom.d.ts

@@ -0,0 +1,22 @@
+import { type Behavior, type Binding, type CaptureType, ExecutionContext, HTMLDirective, type Subscriber, type SyntheticViewTemplate } from '@microsoft/fast-element';
+import type { VividElement } from '../foundation/vivid-element/vivid-element';
+export declare class RenderInLightDomBehaviour<TSource extends VividElement> implements Behavior, Subscriber {
+    private source;
+    private view?;
+    private insertionPoint?;
+    private templateBindingObserver;
+    private context?;
+    constructor(templateBinding: Binding<TSource, SyntheticViewTemplate>, isTemplateBindingVolatile: boolean);
+    bind(source: TSource, context: ExecutionContext): void;
+    unbind(): void;
+    handleChange(): void;
+    private instantiateTemplate;
+}
+export declare class RenderInLightDomDirective<TSource extends VividElement> extends HTMLDirective {
+    readonly templateBinding: Binding<TSource, SyntheticViewTemplate>;
+    createPlaceholder: (index: number) => string;
+    private readonly isTemplateBindingVolatile;
+    constructor(templateBinding: Binding<TSource, SyntheticViewTemplate>);
+    createBehavior(): RenderInLightDomBehaviour<TSource>;
+}
+export declare function renderInLightDOM<TSource extends VividElement>(templateOrTemplateBinding: SyntheticViewTemplate | Binding<TSource, SyntheticViewTemplate>): CaptureType<TSource>;

package/shared/text-anchor.template.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const affix = require('./affix.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 const classNames = require('./class-names.cjs');
 const ref = require('./ref.cjs');
 const vividElement = require('./vivid-element.cjs');
@@ -23,19 +24,7 @@ const textAnchorTemplate = (context) => {
 		rel="${(x) => x.rel}"
 		target="${(x) => x.target}"
 		type="${(x) => x.type}"
-		aria-atomic="${(x) => x.ariaAtomic}"
-		aria-busy="${(x) => x.ariaBusy}"
-		aria-current="${(x) => x.ariaCurrent}"
-		aria-disabled="${(x) => x.ariaDisabled}"
-		aria-expanded="${(x) => x.ariaExpanded}"
-		aria-haspopup="${(x) => x.ariaHasPopup}"
-		aria-hidden="${(x) => x.ariaHidden}"
-		aria-invalid="${(x) => x.ariaInvalid}"
-		aria-keyshortcuts="${(x) => x.ariaKeyShortcuts}"
-		aria-label="${(x) => x.ariaLabel}"
-		aria-live="${(x) => x.ariaLive}"
-		aria-relevant="${(x) => x.ariaRelevant}"
-		aria-roledescription="${(x) => x.ariaRoleDescription}"
+		${delegatesAria.delegateAria()}
 		${ref.ref("control")}
 	>
 		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.text}

package/shared/text-anchor.template.js

@@ -1,4 +1,5 @@
 import { a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';
 import { h as html } from './vivid-element.js';
@@ -21,19 +22,7 @@ const textAnchorTemplate = (context) => {
 		rel="${(x) => x.rel}"
 		target="${(x) => x.target}"
 		type="${(x) => x.type}"
-		aria-atomic="${(x) => x.ariaAtomic}"
-		aria-busy="${(x) => x.ariaBusy}"
-		aria-current="${(x) => x.ariaCurrent}"
-		aria-disabled="${(x) => x.ariaDisabled}"
-		aria-expanded="${(x) => x.ariaExpanded}"
-		aria-haspopup="${(x) => x.ariaHasPopup}"
-		aria-hidden="${(x) => x.ariaHidden}"
-		aria-invalid="${(x) => x.ariaInvalid}"
-		aria-keyshortcuts="${(x) => x.ariaKeyShortcuts}"
-		aria-label="${(x) => x.ariaLabel}"
-		aria-live="${(x) => x.ariaLive}"
-		aria-relevant="${(x) => x.ariaRelevant}"
-		aria-roledescription="${(x) => x.ariaRoleDescription}"
+		${delegateAria()}
 		${ref("control")}
 	>
 		${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.text}

package/shared/text-field.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}";
+const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}";
 
 exports.styles = styles;

package/shared/text-field.js

@@ -1,3 +1,3 @@
-const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}";
+const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}";
 
 export { styles as s };

package/shared/time-selection-picker.template.js

@@ -1,4 +1,4 @@
-import { h as html, V as VividElement, o as observable, f as defineVividComponent, a as attr, O as Observable, i as defaultExecutionContext, D as DOM, n as nullableNumberConverter, v as volatile } from './vivid-element.js';
+import { h as html, V as VividElement, o as observable, i as defineVividComponent, a as attr, O as Observable, k as defaultExecutionContext, D as DOM, n as nullableNumberConverter, v as volatile } from './vivid-element.js';
 import { i as ignoreEventInFocusTraps, a as PickerField } from './picker-field.template.js';
 import { S as SingleValuePicker } from './single-value-picker.js';
 import { e as errorText, f as formElements } from './form-elements.js';