@vonage/vivid 5.18.0 → 5.20.0

package/selectable-box/index.cjs

@@ -1,30 +1,30 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/enums.cjs`);require(`../bundled/numberConverter.cjs`);const r=require(`../bundled/decorate.cjs`),i=require(`../bundled/delegates-aria.cjs`),a=require(`../bundled/class-names.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 i.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.l({mode:`boolean`})],l.prototype,`checked`,void 0),r.t([e.l({attribute:`clickable-box`,mode:`boolean`})],l.prototype,`clickableBox`,void 0),r.t([e.l],l.prototype,`connotation`,void 0),r.t([e.l({attribute:`control-type`})],l.prototype,`controlType`,void 0),r.t([e.l({attribute:`control-placement`,mode:`fromView`})],l.prototype,`controlPlacement`,void 0),r.t([e.l({mode:`boolean`})],l.prototype,`tight`,void 0),r.t([e.l({mode:`boolean`})],l.prototype,`disabled`,void 0);var u=({connotation:e,tight:t,checked:n,clickableBox:r,controlPlacement:i,disabled:o})=>a.t(`base`,[`connotation-${e}`,!!e],[`tight`,t],[`selected`,n],[`clickable`,r],[`readonly`,!r],[`control-placement-${i}`,!!i],[`disabled`,o]);function d(e){e.clickableBox||e._handleCheckedChange()}function f(r){let a=r.tagFor(o.r);return e.d`${t.t(e=>e.controlType!==`radio`,e.d`
-		<${a}
-			${i.n({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
+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)}"
 			class="control checkbox ${e=>e.controlPlacement}"
 			connotation="${e=>e.connotation===`cta`?n.n.CTA:n.n.Accent}"
 			:checked="${e=>e.checked}"
 			?disabled="${e=>e.disabled}"
 			inert="${e=>e.clickableBox?!0:null}"
-		></${a}>`)} `}function p(r){let a=r.tagFor(s.r);return e.d`${t.t(e=>e.controlType===`radio`,e.d`
-		<${a}
-			${i.n({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
+		></${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)}"
 			class="control radio ${e=>e.controlPlacement}"
 			connotation="${e=>e.connotation===`cta`?n.n.CTA:n.n.Accent}"
 			:checked="${e=>e.checked}"
 			?disabled="${e=>e.disabled}"
 			inert="${e=>e.clickableBox?!0:null}"
-		></${a}>`)} `}var m=e.o(`selectable-box`,l,t=>e.d`<template>
+		></${i}>`)} `}var m=e.u(`selectable-box`,l,t=>e.p`<template>
 		<div
 			class="${u}"
 			tabindex="${e=>e.clickableBox&&!e.disabled?`0`:null}"
-			${i.n({role:e=>e.clickableBox?`button`:null,ariaPressed:e=>e.clickableBox?e.checked?`true`:`false`:null,ariaLabel:e=>e.clickableBox?e.ariaLabel:null,ariaDisabled:e=>e.clickableBox&&e.disabled?`true`:null})}
+			${a.n({role:e=>e.clickableBox?`button`:null,ariaPressed:e=>e.clickableBox?e.checked?`true`:`false`:null,ariaLabel:e=>e.clickableBox?e.ariaLabel:null,ariaDisabled:e=>e.clickableBox&&e.disabled?`true`:null})}
 			@keydown="${(e,t)=>e._handleKeydown(t.event)}"
 			@click="${e=>e.clickableBox?e._handleCheckedChange():null}"
 		>
 			${f(t)} ${p(t)}
 			<slot></slot>
 		</div>
-	</template>`,[o.t,s.t],{styles:c,shadowOptions:{delegatesFocus:!0}});e.s(m)();
+	</template>`,[o.t,s.t],{styles:c,shadowOptions:{delegatesFocus:!0}});e.d(m)();

package/selectable-box/index.js

@@ -1,14 +1,13 @@
-import { d as e, l as t, o as n, s as r, t 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 "../bundled/numberConverter.js";
 import { t as s } from "../bundled/decorate.js";
-import { n as c, t as l } from "../bundled/delegates-aria.js";
-import { t as u } from "../bundled/class-names.js";
+import { t as c } from "../bundled/class-names.js";
+import { n as l, t as u } from "../bundled/delegates-aria.js";
 import { r as d, t as f } from "../bundled/definition15.js";
 import { r as p, t as m } from "../bundled/definition16.js";
 //#region src/lib/selectable-box/selectable-box.scss?inline
-var h = ":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)}", g = class extends l(i) {
+var h = ":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)}", g = class extends u(r) {
 	constructor(...e) {
 		super(...e), this.checked = !1, this.clickableBox = !1, this.controlPlacement = "end-stacked", this.tight = !1, this.disabled = !1;
 	}
@@ -28,43 +27,43 @@ s([t({ mode: "boolean" })], g.prototype, "checked", void 0), s([t({
 })], 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 }) => u("base", [`connotation-${e}`, !!e], ["tight", t], ["selected", n], ["clickable", r], ["readonly", !r], [`control-placement-${i}`, !!i], ["disabled", a]);
+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]);
 function v(e) {
 	e.clickableBox || e._handleCheckedChange();
 }
-function y(t) {
-	let n = t.tagFor(d);
-	return e`${a((e) => e.controlType !== "radio", e`
-		<${n}
-			${c({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
+function y(e) {
+	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}"
 			connotation="${(e) => e.connotation === "cta" ? o.CTA : o.Accent}"
 			:checked="${(e) => e.checked}"
 			?disabled="${(e) => e.disabled}"
 			inert="${(e) => e.clickableBox ? !0 : null}"
-		></${n}>`)} `;
+		></${t}>`)} `;
 }
-function b(t) {
-	let n = t.tagFor(p);
-	return e`${a((e) => e.controlType === "radio", e`
-		<${n}
-			${c({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
+function b(e) {
+	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}"
 			connotation="${(e) => e.connotation === "cta" ? o.CTA : o.Accent}"
 			:checked="${(e) => e.checked}"
 			?disabled="${(e) => e.disabled}"
 			inert="${(e) => e.clickableBox ? !0 : null}"
-		></${n}>`)} `;
+		></${t}>`)} `;
 }
 //#endregion
 //#region src/lib/selectable-box/index.ts
-r(n("selectable-box", g, (t) => e`<template>
+e(i("selectable-box", g, (e) => n`<template>
 		<div
 			class="${_}"
 			tabindex="${(e) => e.clickableBox && !e.disabled ? "0" : null}"
-			${c({
+			${l({
 	role: (e) => e.clickableBox ? "button" : null,
 	ariaPressed: (e) => e.clickableBox ? e.checked ? "true" : "false" : null,
 	ariaLabel: (e) => e.clickableBox ? e.ariaLabel : null,
@@ -73,7 +72,7 @@ r(n("selectable-box", g, (t) => e`<template>
 			@keydown="${(e, t) => e._handleKeydown(t.event)}"
 			@click="${(e) => e.clickableBox ? e._handleCheckedChange() : null}"
 		>
-			${y(t)} ${b(t)}
+			${y(e)} ${b(e)}
 			<slot></slot>
 		</div>
 	</template>`, [f, m], {

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

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

package/shared/aria/aria-change-subscription.d.ts

@@ -1,5 +1,6 @@
 import { AriaMixinElement, AriaPropertyName } from './aria-mixin';
 type AriaChangeSubscriber = (source: AriaMixinElement, changedAriaProperty: AriaPropertyName) => void;
 export declare const subscribeToAriaPropertyChanges: (source: AriaMixinElement, listener: AriaChangeSubscriber) => void;
+export declare const unsubscribeFromAriaPropertyChanges: (source: AriaMixinElement, listener: AriaChangeSubscriber) => void;
 export declare const publishAriaPropertyChange: (source: AriaMixinElement, changedAriaProperty: AriaPropertyName) => 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

@@ -1,7 +1,7 @@
 import { CaptureType } from '@microsoft/fast-element';
 import { Constructor, MixinType } from '../utils/mixins';
 import { VividElement } from '../foundation/vivid-element/vivid-element';
-import { BoundAriaProperties } from './delegate-aria-behavior';
+import { BoundAriaProperties } from './aria-binding-directive';
 type DelegateAriaOptions = {
     onlySpecified?: boolean;
 };
@@ -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

@@ -1,7 +1,7 @@
 import { CaptureType } from '@microsoft/fast-element';
 import { Constructor, MixinType } from '../utils/mixins';
 import { VividElement } from '../foundation/vivid-element/vivid-element';
-import { BoundAriaProperties } from './host-semantics-behavior';
+import { BoundAriaProperties } from './aria-binding-directive';
 export declare function applyHostSemantics<T>(boundProperties?: BoundAriaProperties<T>): CaptureType<T, any>;
 export declare const HostSemantics: <T extends Constructor<VividElement>>(Base: T) => {
     new (...args: any[]): {
@@ -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;