@vonage/vivid 4.22.0 → 4.24.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/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/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';

package/shared/vivid-element.cjs

@@ -2591,9 +2591,99 @@ const defineVividComponent = (name, type, template, dependencies, options) => ({
   options
 });
 
-class VividElement extends FASTElement {
+const ariaChangeSubscribers = /* @__PURE__ */ new WeakMap();
+const getSubscribers = (source) => {
+  let subscribers = ariaChangeSubscribers.get(source);
+  if (!subscribers) {
+    subscribers = [];
+    ariaChangeSubscribers.set(source, subscribers);
+  }
+  return subscribers;
+};
+const subscribeToAriaPropertyChanges = (source, listener) => {
+  getSubscribers(source).push(listener);
+};
+const unsubscribeFromAriaPropertyChanges = (source, listener) => {
+  getSubscribers(source).splice(getSubscribers(source).indexOf(listener), 1);
+};
+const publishAriaPropertyChange = (source, changedAriaProperty) => {
+  getSubscribers(source).forEach((s) => s(source, changedAriaProperty));
+};
+
+const ariaMixinProperties = [
+  "role",
+  "ariaAtomic",
+  "ariaAutoComplete",
+  "ariaBusy",
+  "ariaChecked",
+  "ariaColCount",
+  "ariaColIndex",
+  "ariaColIndexText",
+  "ariaColSpan",
+  "ariaCurrent",
+  "ariaDescription",
+  "ariaDisabled",
+  "ariaExpanded",
+  "ariaHasPopup",
+  "ariaHidden",
+  "ariaInvalid",
+  "ariaKeyShortcuts",
+  "ariaLabel",
+  "ariaLevel",
+  "ariaLive",
+  "ariaModal",
+  "ariaMultiLine",
+  "ariaMultiSelectable",
+  "ariaOrientation",
+  "ariaPlaceholder",
+  "ariaPosInSet",
+  "ariaPressed",
+  "ariaReadOnly",
+  "ariaRequired",
+  "ariaRoleDescription",
+  "ariaRowCount",
+  "ariaRowIndex",
+  "ariaRowIndexText",
+  "ariaRowSpan",
+  "ariaSelected",
+  "ariaSetSize",
+  "ariaSort",
+  "ariaValueMax",
+  "ariaValueMin",
+  "ariaValueNow",
+  "ariaValueText",
+  "ariaRelevant"
+  // Non-standard
+];
+const ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
+const AriaMixin = (Base) => {
+  class AriaMixinElement extends Base {
+    constructor(...args) {
+      super(args);
+      this.specialHandling = false;
+      this._vividAriaBehaviour = "default";
+      for (const ariaProperty of ariaMixinProperties) {
+        this[ariaProperty] = null;
+      }
+    }
+  }
+  for (const ariaProperty of ariaMixinProperties) {
+    attr({
+      attribute: ariaAttributeName(ariaProperty),
+      mode: "reflect"
+    })(AriaMixinElement.prototype, ariaProperty);
+    AriaMixinElement.prototype[`${ariaProperty}Changed`] = function() {
+      if (this._vividAriaBehaviour !== "default") {
+        publishAriaPropertyChange(this, ariaProperty);
+      }
+    };
+  }
+  return AriaMixinElement;
+};
+
+class VividElement extends AriaMixin(FASTElement) {
   static {
-    this.VIVID_VERSION = "4.22.0";
+    this.VIVID_VERSION = "4.24.0";
   }
 }
 
@@ -2605,6 +2695,8 @@ exports.HTMLView = HTMLView;
 exports.Observable = Observable;
 exports.SubscriberSet = SubscriberSet;
 exports.VividElement = VividElement;
+exports.ariaAttributeName = ariaAttributeName;
+exports.ariaMixinProperties = ariaMixinProperties;
 exports.attr = attr;
 exports.booleanConverter = booleanConverter;
 exports.createRegisterFunction = createRegisterFunction;
@@ -2614,4 +2706,6 @@ exports.emptyArray = emptyArray;
 exports.html = html;
 exports.nullableNumberConverter = nullableNumberConverter;
 exports.observable = observable;
+exports.subscribeToAriaPropertyChanges = subscribeToAriaPropertyChanges;
+exports.unsubscribeFromAriaPropertyChanges = unsubscribeFromAriaPropertyChanges;
 exports.volatile = volatile;