@vonage/vivid 4.31.0 → 5.1.0

package/{shared/definition47.cjs → selectable-box/definition.cjs}

@@ -1,14 +1,16 @@
 'use strict';
 
-const definition = require('./definition15.cjs');
-const definition$1 = require('./definition42.cjs');
-const vividElement = require('./vivid-element.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const enums = require('./enums.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styles = ":host{display:flex}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.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)}.base:where(.hover,: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:where(.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)}.base:where(.selected):where(.hover,: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{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.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(--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{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.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)}";
+const checkbox_definition = require('../checkbox/definition.cjs');
+const radio_definition = require('../radio/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const enums = require('../unbundled/enums.cjs');
+
+const styles = ":host{display:flex}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.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{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.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(--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{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.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)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -23,7 +25,6 @@ class SelectableBox extends delegatesAria.DelegatesAria(vividElement.VividElemen
   constructor() {
     super(...arguments);
     this.checked = false;
-    this.clickable = false;
     this.clickableBox = false;
     this.controlPlacement = "end-stacked";
     this.tight = false;
@@ -46,29 +47,22 @@ class SelectableBox extends delegatesAria.DelegatesAria(vividElement.VividElemen
   }
 }
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], SelectableBox.prototype, "checked");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], SelectableBox.prototype, "clickable");
-__decorateClass([
-  vividElement.replaces({
-    deprecatedPropertyName: "clickable",
-    fromDeprecated: (v) => v
-  }),
-  vividElement.attr({ attribute: "clickable-box", mode: "boolean" })
+  fastElement.attr({ attribute: "clickable-box", mode: "boolean" })
 ], SelectableBox.prototype, "clickableBox");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], SelectableBox.prototype, "connotation");
 __decorateClass([
-  vividElement.attr({ attribute: "control-type" })
+  fastElement.attr({ attribute: "control-type" })
 ], SelectableBox.prototype, "controlType");
 __decorateClass([
-  vividElement.attr({ attribute: "control-placement", mode: "fromView" })
+  fastElement.attr({ attribute: "control-placement", mode: "fromView" })
 ], SelectableBox.prototype, "controlPlacement");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], SelectableBox.prototype, "tight");
 
 const getClasses = ({
@@ -77,7 +71,7 @@ const getClasses = ({
   checked,
   clickableBox,
   controlPlacement
-}) => classNames.classNames(
+}) => fastWebUtilities.classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   ["tight", tight],
@@ -90,10 +84,10 @@ function handleControlChange(x) {
   if (!x.clickableBox) x._handleCheckedChange();
 }
 function checkbox(context) {
-  const checkboxTag = context.tagFor(definition.Checkbox);
-  return vividElement.html`${when.when(
+  const checkboxTag = context.tagFor(checkbox_definition.VwcCheckboxElement);
+  return fastElement.html`${fastElement.when(
     (x) => x.controlType !== "radio",
-    vividElement.html`
+    fastElement.html`
 		<${checkboxTag}
 			${delegatesAria.delegateAria(
       {
@@ -110,10 +104,10 @@ function checkbox(context) {
   )} `;
 }
 function radio(context) {
-  const radioTag = context.tagFor(definition$1.Radio);
-  return vividElement.html`${when.when(
+  const radioTag = context.tagFor(radio_definition.VwcRadioElement);
+  return fastElement.html`${fastElement.when(
     (x) => x.controlType === "radio",
-    vividElement.html`
+    fastElement.html`
 		<${radioTag}
 			${delegatesAria.delegateAria(
       {
@@ -130,7 +124,7 @@ function radio(context) {
   )} `;
 }
 const SelectableBoxTemplate = (context) => {
-  return vividElement.html`<template>
+  return fastElement.html`<template>
 		<div
 			class="${getClasses}"
 			tabindex="${(x) => x.clickableBox ? "0" : null}"
@@ -152,7 +146,7 @@ const selectableBoxDefinition = vividElement.defineVividComponent(
   "selectable-box",
   SelectableBox,
   SelectableBoxTemplate,
-  [definition.checkboxDefinition, definition$1.radioDefinition],
+  [checkbox_definition.checkboxDefinition, radio_definition.radioDefinition],
   {
     styles,
     shadowOptions: {
@@ -164,6 +158,6 @@ const registerSelectableBox = vividElement.createRegisterFunction(
   selectableBoxDefinition
 );
 
-exports.SelectableBox = SelectableBox;
+exports.VwcSelectableBoxElement = SelectableBox;
 exports.registerSelectableBox = registerSelectableBox;
 exports.selectableBoxDefinition = selectableBoxDefinition;

package/{shared/definition47.js → selectable-box/definition.js}

@@ -1,12 +1,12 @@
-import { C as Checkbox, c as checkboxDefinition } from './definition15.js';
-import { R as Radio, r as radioDefinition } from './definition42.js';
-import { V as VividElement, a as attr, r as replaces, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { C as Connotation } from './enums.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+import { VwcCheckboxElement as Checkbox, checkboxDefinition } from '../checkbox/definition.js';
+import { VwcRadioElement as Radio, radioDefinition } from '../radio/definition.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, html, when } from '@microsoft/fast-element';
+import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { C as Connotation } from '../unbundled/enums.js';
 
-const styles = ":host{display:flex}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.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)}.base:where(.hover,: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:where(.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)}.base:where(.selected):where(.hover,: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{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.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(--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{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.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)}";
+const styles = ":host{display:flex}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.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{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.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(--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{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.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)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -21,7 +21,6 @@ class SelectableBox extends DelegatesAria(VividElement) {
   constructor() {
     super(...arguments);
     this.checked = false;
-    this.clickable = false;
     this.clickableBox = false;
     this.controlPlacement = "end-stacked";
     this.tight = false;
@@ -47,13 +46,6 @@ __decorateClass([
   attr({ mode: "boolean" })
 ], SelectableBox.prototype, "checked");
 __decorateClass([
-  attr({ mode: "boolean" })
-], SelectableBox.prototype, "clickable");
-__decorateClass([
-  replaces({
-    deprecatedPropertyName: "clickable",
-    fromDeprecated: (v) => v
-  }),
   attr({ attribute: "clickable-box", mode: "boolean" })
 ], SelectableBox.prototype, "clickableBox");
 __decorateClass([
@@ -162,4 +154,4 @@ const registerSelectableBox = createRegisterFunction(
   selectableBoxDefinition
 );
 
-export { SelectableBox as S, registerSelectableBox as r, selectableBoxDefinition as s };
+export { SelectableBox as VwcSelectableBoxElement, registerSelectableBox, selectableBoxDefinition };

package/selectable-box/index.cjs

@@ -1,5 +1,28 @@
-'use strict';
-
-const definition = require('../shared/definition47.cjs');
-
-definition.registerSelectableBox();
+"use strict";const v=require("../bundled/definition8.cjs"),b=require("../bundled/definition17.cjs"),t=require("../bundled/vivid-element.cjs"),i=require("../bundled/delegates-aria.cjs"),r=require("../bundled/enums.cjs"),u=require("../bundled/class-names.cjs"),f=require("../bundled/when.cjs"),x=":host{display:flex}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.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{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.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(--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{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.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)}";var _=Object.defineProperty,c=(a,o,e,s)=>{for(var l=void 0,d=a.length-1,p;d>=0;d--)(p=a[d])&&(l=p(o,e,l)||l);return l&&_(o,e,l),l};class n extends i.DelegatesAria(t.VividElement){constructor(){super(...arguments),this.checked=!1,this.clickableBox=!1,this.controlPlacement="end-stacked",this.tight=!1}_handleCheckedChange(){this.controlType==="radio"&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit("change"))}_handleKeydown(o){return(o.code==="Space"||o.code==="Enter")&&this.clickableBox?this._handleCheckedChange():!0}}c([t.attr({mode:"boolean"})],n.prototype,"checked");c([t.attr({attribute:"clickable-box",mode:"boolean"})],n.prototype,"clickableBox");c([t.attr],n.prototype,"connotation");c([t.attr({attribute:"control-type"})],n.prototype,"controlType");c([t.attr({attribute:"control-placement",mode:"fromView"})],n.prototype,"controlPlacement");c([t.attr({mode:"boolean"})],n.prototype,"tight");const k=({connotation:a,tight:o,checked:e,clickableBox:s,controlPlacement:l})=>u.classNames("base",[`connotation-${a}`,!!a],["tight",o],["selected",e],["clickable",s],["readonly",!s],[`control-placement-${l}`,!!l]);function h(a){a.clickableBox||a._handleCheckedChange()}function m(a){const o=a.tagFor(v.Checkbox);return t.html`${f.when(e=>e.controlType!=="radio",t.html`
+		<${o}
+			${i.delegateAria({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
+			@change="${e=>h(e)}"
+			class="control checkbox ${e=>e.controlPlacement}"
+			connotation="${e=>e.connotation==="cta"?r.Connotation.CTA:r.Connotation.Accent}"
+			:checked="${e=>e.checked}"
+			inert="${e=>e.clickableBox?!0:null}"
+		></${o}>`)} `}function g(a){const o=a.tagFor(b.Radio);return t.html`${f.when(e=>e.controlType==="radio",t.html`
+		<${o}
+			${i.delegateAria({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
+			@change="${e=>h(e)}"
+			class="control radio ${e=>e.controlPlacement}"
+			connotation="${e=>e.connotation==="cta"?r.Connotation.CTA:r.Connotation.Accent}"
+			:checked="${e=>e.checked}"
+			inert="${e=>e.clickableBox?!0:null}"
+		></${o}>`)} `}const $=a=>t.html`<template>
+		<div
+			class="${k}"
+			tabindex="${o=>o.clickableBox?"0":null}"
+			${i.delegateAria({role:o=>o.clickableBox?"button":null,ariaPressed:o=>o.clickableBox?o.checked?"true":"false":null,ariaLabel:o=>o.clickableBox?o.ariaLabel:null})}
+			@keydown="${(o,e)=>o._handleKeydown(e.event)}"
+			@click="${o=>o.clickableBox?o._handleCheckedChange():null}"
+		>
+			${m(a)} ${g(a)}
+			<slot></slot>
+		</div>
+	</template>`,y=t.defineVividComponent("selectable-box",n,$,[v.checkboxDefinition,b.radioDefinition],{styles:x,shadowOptions:{delegatesFocus:!0}}),C=t.createRegisterFunction(y);C();

package/selectable-box/index.js

@@ -1,3 +1,136 @@
-import { r as registerSelectableBox } from '../shared/definition47.js';
-
-registerSelectableBox();
+import { C as h, c as u } from "../bundled/definition8.js";
+import { R as x, a as m } from "../bundled/definition17.js";
+import { V as _, a as c, h as r, c as k, d as g } from "../bundled/vivid-element.js";
+import { D as $, d as p } from "../bundled/delegates-aria.js";
+import { C as i } from "../bundled/enums.js";
+import { c as y } from "../bundled/class-names.js";
+import { w as b } from "../bundled/when.js";
+const C = ":host{display:flex}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.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{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.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(--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{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.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)}";
+var B = Object.defineProperty, n = (a, e, o, s) => {
+  for (var t = void 0, d = a.length - 1, v; d >= 0; d--)
+    (v = a[d]) && (t = v(e, o, t) || t);
+  return t && B(e, o, t), t;
+};
+class l extends $(_) {
+  constructor() {
+    super(...arguments), this.checked = !1, this.clickableBox = !1, this.controlPlacement = "end-stacked", this.tight = !1;
+  }
+  /**
+   * @internal
+   */
+  _handleCheckedChange() {
+    this.controlType === "radio" && this.checked || (this.checked = !this.checked, this.clickableBox && this.$emit("change"));
+  }
+  /**
+   * @internal
+   */
+  _handleKeydown(e) {
+    return (e.code === "Space" || e.code === "Enter") && this.clickableBox ? this._handleCheckedChange() : !0;
+  }
+}
+n([
+  c({ mode: "boolean" })
+], l.prototype, "checked");
+n([
+  c({ attribute: "clickable-box", mode: "boolean" })
+], l.prototype, "clickableBox");
+n([
+  c
+], l.prototype, "connotation");
+n([
+  c({ attribute: "control-type" })
+], l.prototype, "controlType");
+n([
+  c({ attribute: "control-placement", mode: "fromView" })
+], l.prototype, "controlPlacement");
+n([
+  c({ mode: "boolean" })
+], l.prototype, "tight");
+const w = ({
+  connotation: a,
+  tight: e,
+  checked: o,
+  clickableBox: s,
+  controlPlacement: t
+}) => y(
+  "base",
+  [`connotation-${a}`, !!a],
+  ["tight", e],
+  ["selected", o],
+  ["clickable", s],
+  ["readonly", !s],
+  [`control-placement-${t}`, !!t]
+);
+function f(a) {
+  a.clickableBox || a._handleCheckedChange();
+}
+function T(a) {
+  const e = a.tagFor(h);
+  return r`${b(
+    (o) => o.controlType !== "radio",
+    r`
+		<${e}
+			${p(
+      {
+        ariaLabel: (o) => !o.clickableBox && o.ariaLabel ? o.ariaLabel : null
+      },
+      { onlySpecified: !0 }
+    )}
+			@change="${(o) => f(o)}"
+			class="control checkbox ${(o) => o.controlPlacement}"
+			connotation="${(o) => o.connotation === "cta" ? i.CTA : i.Accent}"
+			:checked="${(o) => o.checked}"
+			inert="${(o) => o.clickableBox ? !0 : null}"
+		></${e}>`
+  )} `;
+}
+function L(a) {
+  const e = a.tagFor(x);
+  return r`${b(
+    (o) => o.controlType === "radio",
+    r`
+		<${e}
+			${p(
+      {
+        ariaLabel: (o) => !o.clickableBox && o.ariaLabel ? o.ariaLabel : null
+      },
+      { onlySpecified: !0 }
+    )}
+			@change="${(o) => f(o)}"
+			class="control radio ${(o) => o.controlPlacement}"
+			connotation="${(o) => o.connotation === "cta" ? i.CTA : i.Accent}"
+			:checked="${(o) => o.checked}"
+			inert="${(o) => o.clickableBox ? !0 : null}"
+		></${e}>`
+  )} `;
+}
+const A = (a) => r`<template>
+		<div
+			class="${w}"
+			tabindex="${(e) => e.clickableBox ? "0" : null}"
+			${p({
+  role: (e) => e.clickableBox ? "button" : null,
+  ariaPressed: (e) => e.clickableBox ? e.checked ? "true" : "false" : null,
+  ariaLabel: (e) => e.clickableBox ? e.ariaLabel : null
+})}
+			@keydown="${(e, o) => e._handleKeydown(o.event)}"
+			@click="${(e) => e.clickableBox ? e._handleCheckedChange() : null}"
+		>
+			${T(a)} ${L(a)}
+			<slot></slot>
+		</div>
+	</template>`, P = g(
+  "selectable-box",
+  l,
+  A,
+  [u, m],
+  {
+    styles: C,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), S = k(
+  P
+);
+S();

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

@@ -6,11 +6,10 @@ export declare const ariaAttributeName: (ariaPropertyName: AriaPropertyName) =>
 export type VividAriaBehaviour = 'default' | 'delegate' | 'host';
 export declare const AriaMixin: <T extends Constructor<FASTElement & HTMLElement>>(Base: T) => {
     new (...args: any[]): {
-        specialHandling: boolean;
         _vividAriaBehaviour: VividAriaBehaviour;
+        connectedCallback(): void;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -37,7 +36,6 @@ export declare const AriaMixin: <T extends Constructor<FASTElement & HTMLElement
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        dropzone: import("dropzone");
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -333,6 +331,48 @@ export declare const AriaMixin: <T extends Constructor<FASTElement & HTMLElement
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: 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;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
     };
 } & T;
 export type AriaMixinElement = MixinType<typeof AriaMixin>;

package/shared/aria/attribute-removal.d.ts

@@ -0,0 +1,3 @@
+import { type AriaMixinElement, type AriaPropertyName } from './aria-mixin';
+export declare const handleAriaPropertyChange: (element: AriaMixinElement, ariaProperty: AriaPropertyName) => void;
+export declare const handleElementConnectedCallback: (element: AriaMixinElement) => void;

package/shared/aria/delegate-aria-behavior.d.ts

@@ -10,11 +10,9 @@ export declare class DelegateAriaBehavior<T> implements Behavior {
     private target;
     private readonly boundProperties;
     private readonly forwardedProperties;
-    private readonly isMitigationDisabled;
     constructor(target: HTMLElement, params: {
         boundProperties: BoundAriaProperties<T>;
         forwardedProperties: Set<AriaPropertyName>;
-        disableAccessibilityMitigation: boolean;
     });
     private source;
     bind(source: DelegatesAriaElement): void;
@@ -26,6 +24,5 @@ export declare class DelegateAriaBehavior<T> implements Behavior {
     private stopForwardingPropertiesToTarget;
     private onSourceAriaPropertyChanged;
     private forwardPropertyToTarget;
-    private mitigateAccessibilityIssues;
 }
 export {};

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

@@ -10,7 +10,6 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
-        specialHandling: boolean;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
@@ -39,7 +38,6 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        dropzone: import("dropzone");
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -335,6 +333,48 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: 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;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;

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

@@ -7,7 +7,6 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(Base:
     new (...args: any[]): {
         _vividAriaBehaviour: "host";
         connectedCallback(): void;
-        specialHandling: boolean;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
@@ -36,7 +35,6 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(Base:
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        dropzone: import("dropzone");
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -332,6 +330,48 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(Base:
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: 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;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;

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

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

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

@@ -0,0 +1,4 @@
+export type ColorSwatch = {
+    label?: string;
+    value: string;
+};

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

@@ -0,0 +1,3 @@
+export declare function getLuminance(hexColor: string): number;
+export declare function getContrastRatio(color1: string, color2: string): number;
+export declare function getCSSCustomProperty(propertyName: string, element?: Element): string;