@vonage/vivid 5.19.0 → 5.20.0

package/select/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition59.cjs");
+const require_definition = require("../unbundled/definition61.cjs");
 exports.VwcSelectElement = require_definition.Select;
 exports.registerSelect = require_definition.registerSelect;
 exports.selectDefinition = require_definition.selectDefinition;

package/select/definition.js

@@ -1,2 +1,2 @@
-import { n as selectDefinition, r as Select, t as registerSelect } from "../unbundled/definition59.js";
+import { n as selectDefinition, r as Select, t as registerSelect } from "../unbundled/definition61.js";
 export { Select as VwcSelectElement, registerSelect, selectDefinition };

package/selectable-box/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition62.cjs");
+const require_definition = require("../unbundled/definition64.cjs");
 exports.VwcSelectableBoxElement = require_definition.SelectableBox;
 exports.registerSelectableBox = require_definition.registerSelectableBox;
 exports.selectableBoxDefinition = require_definition.selectableBoxDefinition;

package/selectable-box/definition.js

@@ -1,2 +1,2 @@
-import { n as selectableBoxDefinition, r as SelectableBox, t as registerSelectableBox } from "../unbundled/definition62.js";
+import { n as selectableBoxDefinition, r as SelectableBox, t as registerSelectableBox } from "../unbundled/definition64.js";
 export { SelectableBox as VwcSelectableBoxElement, registerSelectableBox, selectableBoxDefinition };

package/selectable-box/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/enums.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/definition15.cjs`),s=require(`../bundled/definition16.cjs`);var c=`:host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;box-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:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}`,l=class extends a.t(e.t){constructor(...e){super(...e),this.checked=!1,this.clickableBox=!1,this.controlPlacement=`end-stacked`,this.tight=!1,this.disabled=!1}_handleCheckedChange(){this.disabled||this.controlType===`radio`&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit(`change`))}_handleKeydown(e){return this.disabled?!0:(e.code===`Space`||e.code===`Enter`)&&this.clickableBox?this._handleCheckedChange():!0}};r.t([e.u({mode:`boolean`})],l.prototype,`checked`,void 0),r.t([e.u({attribute:`clickable-box`,mode:`boolean`})],l.prototype,`clickableBox`,void 0),r.t([e.u],l.prototype,`connotation`,void 0),r.t([e.u({attribute:`control-type`})],l.prototype,`controlType`,void 0),r.t([e.u({attribute:`control-placement`,mode:`fromView`})],l.prototype,`controlPlacement`,void 0),r.t([e.u({mode:`boolean`})],l.prototype,`tight`,void 0),r.t([e.u({mode:`boolean`})],l.prototype,`disabled`,void 0);var u=({connotation:e,tight:t,checked:n,clickableBox:r,controlPlacement:a,disabled:o})=>i.t(`base`,[`connotation-${e}`,!!e],[`tight`,t],[`selected`,n],[`clickable`,r],[`readonly`,!r],[`control-placement-${a}`,!!a],[`disabled`,o]);function d(e){e.clickableBox||e._handleCheckedChange()}function f(r){let i=r.tagFor(o.r);return e.f`${t.t(e=>e.controlType!==`radio`,e.f`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/enums.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/definition15.cjs`),s=require(`../bundled/definition16.cjs`);var c=`:host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;box-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:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}`,l=class extends a.t(e.t){constructor(...e){super(...e),this.checked=!1,this.clickableBox=!1,this.controlPlacement=`end-stacked`,this.tight=!1,this.disabled=!1}_handleCheckedChange(){this.disabled||this.controlType===`radio`&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit(`change`))}_handleKeydown(e){return this.disabled?!0:(e.code===`Space`||e.code===`Enter`)&&this.clickableBox?this._handleCheckedChange():!0}};r.t([e.m({mode:`boolean`})],l.prototype,`checked`,void 0),r.t([e.m({attribute:`clickable-box`,mode:`boolean`})],l.prototype,`clickableBox`,void 0),r.t([e.m],l.prototype,`connotation`,void 0),r.t([e.m({attribute:`control-type`})],l.prototype,`controlType`,void 0),r.t([e.m({attribute:`control-placement`,mode:`fromView`})],l.prototype,`controlPlacement`,void 0),r.t([e.m({mode:`boolean`})],l.prototype,`tight`,void 0),r.t([e.m({mode:`boolean`})],l.prototype,`disabled`,void 0);var u=({connotation:e,tight:t,checked:n,clickableBox:r,controlPlacement:a,disabled:o})=>i.t(`base`,[`connotation-${e}`,!!e],[`tight`,t],[`selected`,n],[`clickable`,r],[`readonly`,!r],[`control-placement-${a}`,!!a],[`disabled`,o]);function d(e){e.clickableBox||e._handleCheckedChange()}function f(r){let i=r.tagFor(o.r);return e.p`${t.t(e=>e.controlType!==`radio`,e.p`
 		<${i}
 			${a.n({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
 			@change="${e=>d(e)}"
@@ -7,7 +7,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`)
 			:checked="${e=>e.checked}"
 			?disabled="${e=>e.disabled}"
 			inert="${e=>e.clickableBox?!0:null}"
-		></${i}>`)} `}function p(r){let i=r.tagFor(s.r);return e.f`${t.t(e=>e.controlType===`radio`,e.f`
+		></${i}>`)} `}function p(r){let i=r.tagFor(s.r);return e.p`${t.t(e=>e.controlType===`radio`,e.p`
 		<${i}
 			${a.n({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
 			@change="${e=>d(e)}"
@@ -16,7 +16,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`)
 			:checked="${e=>e.checked}"
 			?disabled="${e=>e.disabled}"
 			inert="${e=>e.clickableBox?!0:null}"
-		></${i}>`)} `}var m=e.s(`selectable-box`,l,t=>e.f`<template>
+		></${i}>`)} `}var m=e.u(`selectable-box`,l,t=>e.p`<template>
 		<div
 			class="${u}"
 			tabindex="${e=>e.clickableBox&&!e.disabled?`0`:null}"
@@ -27,4 +27,4 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`)
 			${f(t)} ${p(t)}
 			<slot></slot>
 		</div>
-	</template>`,[o.t,s.t],{styles:c,shadowOptions:{delegatesFocus:!0}});e.c(m)();
+	</template>`,[o.t,s.t],{styles:c,shadowOptions:{delegatesFocus:!0}});e.d(m)();

package/selectable-box/index.js

@@ -1,4 +1,4 @@
-import { c as e, f as t, s as n, t as r, u as i } from "../bundled/vivid-element.js";
+import { d as e, m as t, p as n, t as r, u as i } from "../bundled/vivid-element.js";
 import { t as a } from "../bundled/when.js";
 import { n as o } from "../bundled/enums.js";
 import { t as s } from "../bundled/decorate.js";
@@ -18,13 +18,13 @@ var h = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:
 		return this.disabled ? !0 : (e.code === "Space" || e.code === "Enter") && this.clickableBox ? this._handleCheckedChange() : !0;
 	}
 };
-s([i({ mode: "boolean" })], g.prototype, "checked", void 0), s([i({
+s([t({ mode: "boolean" })], g.prototype, "checked", void 0), s([t({
 	attribute: "clickable-box",
 	mode: "boolean"
-})], g.prototype, "clickableBox", void 0), s([i], g.prototype, "connotation", void 0), s([i({ attribute: "control-type" })], g.prototype, "controlType", void 0), s([i({
+})], g.prototype, "clickableBox", void 0), s([t], g.prototype, "connotation", void 0), s([t({ attribute: "control-type" })], g.prototype, "controlType", void 0), s([t({
 	attribute: "control-placement",
 	mode: "fromView"
-})], g.prototype, "controlPlacement", void 0), s([i({ mode: "boolean" })], g.prototype, "tight", void 0), s([i({ mode: "boolean" })], g.prototype, "disabled", void 0);
+})], g.prototype, "controlPlacement", void 0), s([t({ mode: "boolean" })], g.prototype, "tight", void 0), s([t({ mode: "boolean" })], g.prototype, "disabled", void 0);
 //#endregion
 //#region src/lib/selectable-box/selectable-box.template.ts
 var _ = ({ connotation: e, tight: t, checked: n, clickableBox: r, controlPlacement: i, disabled: a }) => c("base", [`connotation-${e}`, !!e], ["tight", t], ["selected", n], ["clickable", r], ["readonly", !r], [`control-placement-${i}`, !!i], ["disabled", a]);
@@ -32,9 +32,9 @@ function v(e) {
 	e.clickableBox || e._handleCheckedChange();
 }
 function y(e) {
-	let n = e.tagFor(d);
-	return t`${a((e) => e.controlType !== "radio", t`
-		<${n}
+	let t = e.tagFor(d);
+	return n`${a((e) => e.controlType !== "radio", n`
+		<${t}
 			${l({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
 			@change="${(e) => v(e)}"
 			class="control checkbox ${(e) => e.controlPlacement}"
@@ -42,12 +42,12 @@ function y(e) {
 			:checked="${(e) => e.checked}"
 			?disabled="${(e) => e.disabled}"
 			inert="${(e) => e.clickableBox ? !0 : null}"
-		></${n}>`)} `;
+		></${t}>`)} `;
 }
 function b(e) {
-	let n = e.tagFor(p);
-	return t`${a((e) => e.controlType === "radio", t`
-		<${n}
+	let t = e.tagFor(p);
+	return n`${a((e) => e.controlType === "radio", n`
+		<${t}
 			${l({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
 			@change="${(e) => v(e)}"
 			class="control radio ${(e) => e.controlPlacement}"
@@ -55,11 +55,11 @@ function b(e) {
 			:checked="${(e) => e.checked}"
 			?disabled="${(e) => e.disabled}"
 			inert="${(e) => e.clickableBox ? !0 : null}"
-		></${n}>`)} `;
+		></${t}>`)} `;
 }
 //#endregion
 //#region src/lib/selectable-box/index.ts
-e(n("selectable-box", g, (e) => t`<template>
+e(i("selectable-box", g, (e) => n`<template>
 		<div
 			class="${_}"
 			tabindex="${(e) => e.clickableBox && !e.disabled ? "0" : null}"

package/shared/aria/aria-binding-directive.d.ts

@@ -1,6 +1,5 @@
-import { AriaPropertyName } from './aria-mixin';
+import { AriaIdrefsPropertyName, AriaMixinElement, AriaPropertyName, AriaValuePropertyName } from './aria-mixin';
 import { DOMPolicy, StatelessAttachedAttributeDirective, ViewController } from '@microsoft/fast-element';
-import { DelegatesAriaElement } from './delegates-aria';
 type BoundValue = string | null | undefined | boolean | number;
 type AriaBinding<T> = BoundValue | ((x: T) => BoundValue);
 export type BoundAriaProperties<T> = Partial<{
@@ -8,7 +7,8 @@ export type BoundAriaProperties<T> = Partial<{
 }>;
 type AriaBindingDirectiveOptions<T> = {
     boundProperties: BoundAriaProperties<T>;
-    forwardedProperties: Set<AriaPropertyName>;
+    forwardedValueProperties: Set<AriaValuePropertyName>;
+    forwardedIdrefsProperties: Set<AriaIdrefsPropertyName>;
     requireHost?: boolean;
 };
 export declare class AriaBindingDirective<T> extends StatelessAttachedAttributeDirective<AriaBindingDirectiveOptions<T>> {
@@ -16,6 +16,6 @@ export declare class AriaBindingDirective<T> extends StatelessAttachedAttributeD
     policy?: DOMPolicy;
     private _propertyBindingBehaviours?;
     private get propertyBindingBehaviours();
-    bind(controller: ViewController<DelegatesAriaElement>): void;
+    bind(controller: ViewController<AriaMixinElement>): void;
 }
 export {};

package/shared/aria/aria-mixin.d.ts

@@ -1,8 +1,12 @@
 import { FASTElement } from '@microsoft/fast-element';
 import { Constructor, MixinType } from '../utils/mixins';
-export declare const ariaMixinProperties: readonly ["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"];
-export type AriaPropertyName = (typeof ariaMixinProperties)[number];
-export declare const ariaAttributeName: (ariaPropertyName: AriaPropertyName) => string;
+export declare const ariaValueProperties: readonly ["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"];
+export declare const ariaIdrefsProperties: readonly ["ariaControls", "ariaDescribedBy", "ariaDetails", "ariaErrorMessage", "ariaFlowTo", "ariaLabelledBy", "ariaOwns"];
+export declare const ariaProperties: readonly ["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", "ariaControls", "ariaDescribedBy", "ariaDetails", "ariaErrorMessage", "ariaFlowTo", "ariaLabelledBy", "ariaOwns"];
+export type AriaValuePropertyName = (typeof ariaValueProperties)[number];
+export type AriaIdrefsPropertyName = (typeof ariaIdrefsProperties)[number];
+export type AriaPropertyName = AriaValuePropertyName | AriaIdrefsPropertyName;
+export declare const ariaAttributeName: (ariaPropertyName: AriaValuePropertyName | AriaIdrefsPropertyName) => string;
 export type VividAriaBehaviour = 'default' | 'delegate' | 'host';
 export declare const AriaMixin: <T extends Constructor<FASTElement & HTMLElement>>(Base: T) => {
     new (...args: any[]): {
@@ -362,6 +366,13 @@ export declare const AriaMixin: <T extends Constructor<FASTElement & HTMLElement
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -404,6 +415,13 @@ export declare const AriaMixin: <T extends Constructor<FASTElement & HTMLElement
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
     };
 } & T;
 export type AriaMixinElement = MixinType<typeof AriaMixin>;

package/shared/aria/delegates-aria.d.ts

@@ -12,7 +12,7 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
         connectedCallback(): void;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback(): void;
+        disconnectedCallback: (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -364,6 +364,13 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -406,12 +413,22 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             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;
     };
 } & T;
 export type DelegatesAriaElement = MixinType<typeof DelegatesAria>;

package/shared/aria/host-semantics.d.ts

@@ -9,7 +9,7 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(Base:
         connectedCallback(): void;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback(): void;
+        disconnectedCallback: (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -361,6 +361,13 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(Base:
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -403,12 +410,22 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(Base:
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             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;
     };
 } & T;
 export type HostSemanticsElement = MixinType<typeof HostSemantics>;

package/shared/aria/idrefs-controller.d.ts

@@ -0,0 +1,17 @@
+import { AriaIdrefsPropertyName } from './aria-mixin';
+import { VividElement } from '../foundation/vivid-element/vivid-element';
+import { ReactiveController } from '../framework/reactive-controller';
+export declare class IdrefsController implements ReactiveController {
+    #private;
+    private host;
+    private propertyName;
+    static resolvedElements(host: VividElement, property: AriaIdrefsPropertyName): HTMLElement[] | null;
+    static for(host: VividElement, property: AriaIdrefsPropertyName): IdrefsController;
+    private constructor();
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private getAttribute;
+    setAttribute(value: string | null): void;
+    private getResolvedElements;
+    setElements(elements: HTMLElement[] | null): void;
+}

package/shared/color-picker/base-color-picker.d.ts

@@ -25,7 +25,7 @@ export declare const BaseColorPicker: <T extends Constructor<VividElement>>(Base
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback: (() => void) & (() => void) & (() => void);
+        disconnectedCallback: (() => void) & (() => void) & (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -377,6 +377,13 @@ export declare const BaseColorPicker: <T extends Constructor<VividElement>>(Base
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -419,12 +426,22 @@ export declare const BaseColorPicker: <T extends Constructor<VividElement>>(Base
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             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;
         label?: string;
         errorValidationMessage: string;
         forceErrorDisplay: boolean;

package/shared/feedback/feedback-message.d.ts

@@ -7,7 +7,7 @@ declare const FeedbackMessage_base: {
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback(): void;
+        disconnectedCallback: (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -359,6 +359,13 @@ declare const FeedbackMessage_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -401,12 +408,22 @@ declare const FeedbackMessage_base: {
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             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;
     };
 } & typeof VividElement;
 export declare class FeedbackMessage extends FeedbackMessage_base {

package/shared/feedback/mixins.d.ts

@@ -17,7 +17,7 @@ export declare const WithFeedback: <T extends Constructor<VividElement>>(Base: T
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback(): void;
+        disconnectedCallback: (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -369,6 +369,13 @@ export declare const WithFeedback: <T extends Constructor<VividElement>>(Base: T
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -411,12 +418,22 @@ export declare const WithFeedback: <T extends Constructor<VividElement>>(Base: T
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             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;
     };
 } & T;
 export type ElementWithFeedback = MixinType<typeof WithFeedback>;
@@ -438,7 +455,7 @@ export declare const WithLightDOMFeedback: <T extends Constructor<VividElement>>
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback(): void;
+        disconnectedCallback: (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -790,6 +807,13 @@ export declare const WithLightDOMFeedback: <T extends Constructor<VividElement>>
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -832,11 +856,21 @@ export declare const WithLightDOMFeedback: <T extends Constructor<VividElement>>
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             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;
     };
 } & T;

package/shared/foundation/button/button.d.ts

@@ -5,7 +5,7 @@ declare const VividFoundationButton_base: {
         connectedCallback(): void;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback(): void;
+        disconnectedCallback: (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -357,6 +357,13 @@ declare const VividFoundationButton_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -399,12 +406,22 @@ declare const VividFoundationButton_base: {
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             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;
     };
 } & {
     new (...args: any[]): {
@@ -798,6 +815,13 @@ declare const VividFoundationButton_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -840,12 +864,22 @@ declare const VividFoundationButton_base: {
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             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;
     };
     get formAssociated(): boolean;
 } & typeof VividElement;