@vonage/vivid 5.0.0 → 5.1.0

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, 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) => {
@@ -154,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

@@ -36,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;

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

@@ -38,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;

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

@@ -35,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;

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;

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

@@ -33,7 +33,6 @@ declare const FeedbackMessage_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;

package/shared/feedback/mixins.d.ts

@@ -43,7 +43,6 @@ export declare const WithFeedback: <T extends Constructor<VividElement>>(Base: T
         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;
@@ -434,7 +433,6 @@ export declare const WithLightDOMFeedback: <T extends Constructor<VividElement>>
         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;

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

@@ -31,7 +31,6 @@ declare const VividFoundationButton_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;
@@ -441,7 +440,6 @@ declare const VividFoundationButton_base: {
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_18 extends keyof HTMLElementEventMap>(type: K_18, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_18]) => 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;

package/shared/foundation/form-associated/form-associated.d.ts

@@ -67,7 +67,6 @@ export declare const FormAssociated: <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;
@@ -488,7 +487,6 @@ export declare const CheckableFormAssociated: <T extends Constructor<VividElemen
         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;

package/shared/foundation/vivid-element/vivid-element.d.ts

@@ -31,7 +31,6 @@ declare const 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;

package/shared/localization/Locale.d.ts

@@ -23,6 +23,7 @@ import type { PaginationLocale } from '../../lib/pagination/locale';
 import type { TagLocale } from '../../lib/tag/locale';
 import type { Connotation } from '../../lib/enums';
 import type { ToggletipLocale } from '../../lib/toggletip/locale';
+import type { SimpleColorPickerLocale } from '../../lib/simple-color-picker/locale';
 type ConnotationAnnoncementLocale = {
     [key in Connotation as `${key}Icon`]: string;
 };
@@ -56,5 +57,6 @@ export interface Locale {
     pagination: PaginationLocale;
     tag: TagLocale;
     toggletip: ToggletipLocale;
+    simpleColorPicker: SimpleColorPickerLocale;
 }
 export {};

package/shared/patterns/affix.d.ts

@@ -36,7 +36,6 @@ export declare const AffixIcon: <T extends Constructor<VividElement>>(Base: T) =
         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;
@@ -418,7 +417,6 @@ export declare const AffixIconWithTrailing: <T extends Constructor<VividElement>
         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;

package/shared/patterns/anchored.d.ts

@@ -42,7 +42,6 @@ export declare const Anchored: <T extends Constructor<VividElement>>(Base: T) =>
         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;
@@ -429,7 +428,6 @@ export declare const anchorSlotTemplateFactory: () => import("@microsoft/fast-el
     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;

package/shared/patterns/char-count/char-count.d.ts

@@ -43,7 +43,6 @@ export declare const WithCharCount: <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;

package/shared/patterns/form-elements/form-element.d.ts

@@ -63,7 +63,6 @@ export declare const FormElement: <T_4 extends Constructor<{
     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;
@@ -477,7 +476,6 @@ export declare const FormElement: <T_4 extends Constructor<{
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_18 extends keyof HTMLElementEventMap>(type: K_18, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_18]) => 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;