@vonage/vivid 5.4.0 → 5.6.0

package/select/definition.js

@@ -16,8 +16,6 @@ import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWra
 import { c as chevronTemplateFactory } from '../unbundled/definition.js';
 import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -106,6 +104,7 @@ class Select extends WithLightDOMFeedback(
    */
   checkActiveIndex() {
     const activeItem = this.activeOption;
+    /* v8 ignore else -- @preserve */
     if (activeItem) {
       activeItem.checked = true;
     }
@@ -122,6 +121,7 @@ class Select extends WithLightDOMFeedback(
    */
   checkFirstOption(preserveChecked) {
     if (preserveChecked) {
+      /* v8 ignore else -- @preserve */
       if (this.rangeStartIndex === -1) {
         this.rangeStartIndex = this.activeIndex + 1;
       }
@@ -146,6 +146,7 @@ class Select extends WithLightDOMFeedback(
    */
   checkLastOption(preserveChecked) {
     if (preserveChecked) {
+      /* v8 ignore else -- @preserve */
       if (this.rangeStartIndex === -1) {
         this.rangeStartIndex = this.activeIndex;
       }
@@ -170,6 +171,7 @@ class Select extends WithLightDOMFeedback(
    */
   checkNextOption(preserveChecked) {
     if (preserveChecked) {
+      /* v8 ignore else -- @preserve */
       if (this.rangeStartIndex === -1) {
         this.rangeStartIndex = this.activeIndex;
       }
@@ -194,9 +196,11 @@ class Select extends WithLightDOMFeedback(
    */
   checkPreviousOption(preserveChecked) {
     if (preserveChecked) {
+      /* v8 ignore else -- @preserve */
       if (this.rangeStartIndex === -1) {
         this.rangeStartIndex = this.activeIndex;
       }
+      /* v8 ignore else -- @preserve */
       if (this.checkedOptions.length === 1) {
         this.rangeStartIndex += 1;
       }
@@ -227,6 +231,7 @@ class Select extends WithLightDOMFeedback(
     if (!this.multiple) {
       return super.focusinHandler(e);
     }
+    /* v8 ignore else -- @preserve */
     if (!this.shouldSkipFocus && e.target === e.currentTarget) {
       this.uncheckAllOptions();
       if (this.activeIndex === -1) {
@@ -248,6 +253,7 @@ class Select extends WithLightDOMFeedback(
       super.setSelectedOptions();
       return;
     }
+    /* v8 ignore else -- @preserve */
     if (this.$fastController.isConnected && this.options) {
       this.selectedOptions = this.options.filter((o) => o.selected);
       this.focusAndScrollOptionIntoView();
@@ -280,6 +286,7 @@ class Select extends WithLightDOMFeedback(
       super.typeaheadBufferChanged(prev, next);
       return;
     }
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       const typeaheadMatches = this.getTypeaheadMatches();
       const activeIndex = this.options.indexOf(typeaheadMatches[0]);
@@ -303,6 +310,7 @@ class Select extends WithLightDOMFeedback(
    */
   uncheckAllOptions(preserveChecked = false) {
     this.options.forEach((o) => o.checked = false);
+    /* v8 ignore else -- @preserve */
     if (!preserveChecked) {
       this.rangeStartIndex = -1;
     }
@@ -425,6 +433,7 @@ class Select extends WithLightDOMFeedback(
       this.focus();
       return;
     }
+    /* v8 ignore else -- @preserve */
     if (!this.options.includes(focusTarget)) {
       this.open = false;
       if (this.indexWhenOpened !== this.selectedIndex) {
@@ -467,6 +476,7 @@ class Select extends WithLightDOMFeedback(
       o.checked = next ? false : void 0;
     });
     this.setSelectedOptions();
+    /* v8 ignore if -- @preserve */
     if (this.proxy) {
       this.proxy.multiple = next;
     }
@@ -494,6 +504,7 @@ class Select extends WithLightDOMFeedback(
    * @internal
    */
   setProxyOptions() {
+    /* v8 ignore else -- @preserve */
     if (this.proxy instanceof HTMLSelectElement && this.options) {
       this.proxy.length = 0;
       this.options.forEach((option) => {
@@ -543,12 +554,14 @@ class Select extends WithLightDOMFeedback(
       }
       case keySpace: {
         e.preventDefault();
+        /* v8 ignore else -- @preserve */
         if (this.typeaheadExpired) {
           this.toggleSelectedForAllCheckedOptions();
           return;
         }
       }
       default: {
+        /* v8 ignore else -- @preserve */
         if (key.length === 1) {
           this.handleTypeAhead(`${key}`);
         }
@@ -722,6 +735,8 @@ __decorateClass([
   observable
 ], Select.prototype, "metaSlottedContent", 2);
 
+const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}:host(:focus-within) .control:not(.has-activedescendant){--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))}:host(:not([multiple])) ::slotted([data-vvd-component=option][current-selected]){border-radius:8px;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));--focus-stroke-gap-color: transparent}";
+
 const getStateClasses = ({
   shape,
   disabled,
@@ -731,8 +746,11 @@ const getStateClasses = ({
   successText,
   placeholder,
   value,
-  scale
+  scale,
+  _activeDescendant,
+  open
 }) => classNames(
+  ["has-activedescendant", Boolean(_activeDescendant) && open],
   ["disabled", disabled],
   [`appearance-${appearance}`, Boolean(appearance)],
   [`shape-${shape}`, Boolean(shape)],
@@ -834,7 +852,7 @@ const SelectTemplate = (context) => {
     ariaDisabled: (x) => x.disabled
   })}
 			aria-controls="${(x) => x.listboxId}"
-			aria-activedescendant="${(x) => x._activeDescendant}"
+			aria-activedescendant="${(x) => x.open ? x._activeDescendant : null}"
 			aria-describedby="${(x) => x._feedbackDescribedBy}"
 			tabindex="${(x) => !x.disabled ? "0" : null}"
 			@click="${ifNotFromFeedback((x, e) => x.clickHandler(e))}"

package/selectable-box/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const p=require("../bundled/definition8.cjs"),v=require("../bundled/definition17.cjs"),t=require("../bundled/vivid-element.cjs"),i=require("../bundled/delegates-aria.cjs"),r=require("../bundled/enums.cjs"),f=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs"),x=":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{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.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.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)}";var _=Object.defineProperty,c=(a,o,e,s)=>{for(var l=void 0,d=a.length-1,b;d>=0;d--)(b=a[d])&&(l=b(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(p.Checkbox);return t.html`${f.when(e=>e.controlType!=="radio",t.html`
+"use strict";const p=require("../bundled/definition8.cjs"),v=require("../bundled/definition18.cjs"),t=require("../bundled/vivid-element.cjs"),i=require("../bundled/delegates-aria.cjs"),r=require("../bundled/enums.cjs"),f=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs"),x=":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{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.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.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)}";var _=Object.defineProperty,c=(a,o,e,s)=>{for(var l=void 0,d=a.length-1,b;d>=0;d--)(b=a[d])&&(l=b(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(p.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)}"

package/selectable-box/index.js

@@ -1,5 +1,5 @@
 import { C as h, c as u } from "../bundled/definition8.js";
-import { R as x, a as _ } from "../bundled/definition17.js";
+import { R as x, a as _ } from "../bundled/definition18.js";
 import { V as m, a as c, h as n, 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";

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

@@ -9,6 +9,7 @@ export declare const BaseColorPicker: <T extends Constructor<VividElement>>(Base
         swatches: ColorSwatch[];
         connectedCallback(): void;
         _canvasColor: string;
+        readonly _computedCanvasColor: string;
         _refreshCanvasColor(): void;
         _applyContrastClass(color: string, threshold?: number): boolean;
         _getRowLength(): number;
@@ -19,7 +20,7 @@ export declare const BaseColorPicker: <T extends Constructor<VividElement>>(Base
         _getGridCells(): HTMLElement[];
         _handleCellKeydown(event: KeyboardEvent, value: string, index: number, isSaveCell?: boolean): boolean;
         _focusSwatchByIndex(index: number): void;
-        _renderColorSwatch(iconTag: InlineTemplateDirective): import("@microsoft/fast-element").ViewTemplate<ColorSwatch, any>;
+        _renderColorSwatch(iconTag: InlineTemplateDirective, tooltipTag: InlineTemplateDirective): import("@microsoft/fast-element").ViewTemplate<ColorSwatch, any>;
         readonly locale: import("../localization/Locale").Locale;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;

package/shared/patterns/anchored.d.ts

@@ -8,10 +8,10 @@ export declare const Anchored: <T extends Constructor<VividElement>>(Base: T) =>
         _slottedAnchor?: HTMLElement[] | undefined;
         _slottedAnchorChanged(): void;
         _anchorEl?: HTMLElement | undefined;
-        "__#9@#updateAnchorEl": () => void;
-        "__#9@#observer"?: MutationObserver | undefined;
-        "__#9@#observeMissingAnchor": (anchorId: string) => void;
-        "__#9@#cleanupObserverIfNeeded": () => void;
+        "__#10@#updateAnchorEl": () => void;
+        "__#10@#observer"?: MutationObserver | undefined;
+        "__#10@#observeMissingAnchor": (anchorId: string) => void;
+        "__#10@#cleanupObserverIfNeeded": () => void;
         connectedCallback(): void;
         disconnectedCallback(): void;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
@@ -394,10 +394,10 @@ export declare const anchorSlotTemplateFactory: () => import("@microsoft/fast-el
     _slottedAnchor?: HTMLElement[] | undefined;
     _slottedAnchorChanged(): void;
     _anchorEl?: HTMLElement | undefined;
-    "__#9@#updateAnchorEl": () => void;
-    "__#9@#observer"?: MutationObserver | undefined;
-    "__#9@#observeMissingAnchor": (anchorId: string) => void;
-    "__#9@#cleanupObserverIfNeeded": () => void;
+    "__#10@#updateAnchorEl": () => void;
+    "__#10@#observer"?: MutationObserver | undefined;
+    "__#10@#observeMissingAnchor": (anchorId: string) => void;
+    "__#10@#cleanupObserverIfNeeded": () => void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;

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

@@ -7,7 +7,7 @@ export declare const WithCharCount: <T extends Constructor<VividElement>>(Base:
         maxlength: number;
         charCount: boolean;
         charCountRemaining: HTMLSpanElement;
-        "__#5@#charCountTimeout": ReturnType<typeof setTimeout> | null;
+        "__#6@#charCountTimeout": ReturnType<typeof setTimeout> | null;
         _charCountDescribedBy: string;
         _renderCharCountRemaining: () => void;
         _updateCharCountRemaining: () => void;