@vonage/vivid 5.3.0 → 5.5.0

package/shared/picker-field/mixins/min-max-calendar-picker.d.ts

@@ -9,8 +9,8 @@ export declare const MinMaxCalendarPicker: <T_5 extends AbstractConstructor<{
     readonly _resolvedMinDate: string;
     readonly _resolvedMaxDate: string;
     _isDateInValidRange(date: string): boolean;
-    "__#21@#isMonthAfterValidRange"(month: import("../../datetime/month").Month): boolean | "";
-    "__#21@#isMonthBeforeValidRange"(month: import("../../datetime/month").Month): boolean | "";
+    "__#22@#isMonthAfterValidRange"(month: import("../../datetime/month").Month): boolean | "";
+    "__#22@#isMonthBeforeValidRange"(month: import("../../datetime/month").Month): boolean | "";
     _isMonthInValidRange(month: import("../../datetime/month").Month): boolean;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onPickerButtonClick(): void;
@@ -53,20 +53,20 @@ export declare const MinMaxCalendarPicker: <T_5 extends AbstractConstructor<{
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#20@#onFocusIn": () => void;
-    "__#20@#onFocusOut": () => void;
+    "__#21@#onFocusIn": () => void;
+    "__#21@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#20@#localeChangeHandler": {
+    "__#21@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
-    "__#20@#startObservingLocaleChanges"(): void;
-    "__#20@#stopObservingLocaleChanges"(): void;
+    "__#21@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#21@#startObservingLocaleChanges"(): void;
+    "__#21@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#20@#openPopupIfPossible"(): void;
+    "__#21@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#21@#openPopupIfPossible"(): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
     readonly _dialogLabel: string;
@@ -903,8 +903,8 @@ export declare const MinMaxCalendarPicker: <T_5 extends AbstractConstructor<{
     _currentDate: string;
     _currentMonth: import("../../datetime/month").Month;
     _isDateInValidRange(date: string): boolean;
-    "__#21@#isMonthAfterValidRange"(month: import("../../datetime/month").Month): boolean | "";
-    "__#21@#isMonthBeforeValidRange"(month: import("../../datetime/month").Month): boolean | "";
+    "__#22@#isMonthAfterValidRange"(month: import("../../datetime/month").Month): boolean | "";
+    "__#22@#isMonthBeforeValidRange"(month: import("../../datetime/month").Month): boolean | "";
     _isMonthInValidRange(month: import("../../datetime/month").Month): boolean;
     _closePopup: ((restoreFocusToTextField?: boolean) => void) & ((restoreFocusToTextField?: boolean) => void);
     _onPickerButtonClick: (() => void) & (() => void);
@@ -947,20 +947,20 @@ export declare const MinMaxCalendarPicker: <T_5 extends AbstractConstructor<{
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#20@#onFocusIn": () => void;
-    "__#20@#onFocusOut": () => void;
+    "__#21@#onFocusIn": () => void;
+    "__#21@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#20@#localeChangeHandler": {
+    "__#21@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
-    "__#20@#startObservingLocaleChanges"(): void;
-    "__#20@#stopObservingLocaleChanges"(): void;
+    "__#21@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#21@#startObservingLocaleChanges"(): void;
+    "__#21@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#20@#openPopupIfPossible"(): void;
+    "__#21@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#21@#openPopupIfPossible"(): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
     readonly _dialogLabel: string;

package/shared/picker-field/mixins/single-date-picker.d.ts

@@ -8,8 +8,8 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     readonly _resolvedMinDate: string;
     readonly _resolvedMaxDate: string;
     _isDateInValidRange(date: string): boolean;
-    "__#21@#isMonthAfterValidRange"(month: import("../../datetime/month").Month): boolean | "";
-    "__#21@#isMonthBeforeValidRange"(month: import("../../datetime/month").Month): boolean | "";
+    "__#22@#isMonthAfterValidRange"(month: import("../../datetime/month").Month): boolean | "";
+    "__#22@#isMonthBeforeValidRange"(month: import("../../datetime/month").Month): boolean | "";
     _isMonthInValidRange(month: import("../../datetime/month").Month): boolean;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onPickerButtonClick(): void;
@@ -52,20 +52,20 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#20@#onFocusIn": () => void;
-    "__#20@#onFocusOut": () => void;
+    "__#21@#onFocusIn": () => void;
+    "__#21@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#20@#localeChangeHandler": {
+    "__#21@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
-    "__#20@#startObservingLocaleChanges"(): void;
-    "__#20@#stopObservingLocaleChanges"(): void;
+    "__#21@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#21@#startObservingLocaleChanges"(): void;
+    "__#21@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#20@#openPopupIfPossible"(): void;
+    "__#21@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#21@#openPopupIfPossible"(): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
     readonly _dialogLabel: string;
@@ -909,20 +909,20 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#20@#onFocusIn": () => void;
-    "__#20@#onFocusOut": () => void;
+    "__#21@#onFocusIn": () => void;
+    "__#21@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#20@#localeChangeHandler": {
+    "__#21@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
-    "__#20@#startObservingLocaleChanges"(): void;
-    "__#20@#stopObservingLocaleChanges"(): void;
+    "__#21@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#21@#startObservingLocaleChanges"(): void;
+    "__#21@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#20@#openPopupIfPossible"(): void;
+    "__#21@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#21@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -1759,8 +1759,8 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     readonly _resolvedMinDate: string;
     readonly _resolvedMaxDate: string;
     _isDateInValidRange(date: string): boolean;
-    "__#21@#isMonthAfterValidRange"(month: import("../../datetime/month").Month): boolean | "";
-    "__#21@#isMonthBeforeValidRange"(month: import("../../datetime/month").Month): boolean | "";
+    "__#22@#isMonthAfterValidRange"(month: import("../../datetime/month").Month): boolean | "";
+    "__#22@#isMonthBeforeValidRange"(month: import("../../datetime/month").Month): boolean | "";
     _isMonthInValidRange(month: import("../../datetime/month").Month): boolean;
     _closePopup: ((restoreFocusToTextField?: boolean) => void) & ((restoreFocusToTextField?: boolean) => void);
     _onPickerButtonClick: (() => void) & (() => void);
@@ -1799,20 +1799,20 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#20@#onFocusIn": () => void;
-    "__#20@#onFocusOut": () => void;
+    "__#21@#onFocusIn": () => void;
+    "__#21@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#20@#localeChangeHandler": {
+    "__#21@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
-    "__#20@#startObservingLocaleChanges"(): void;
-    "__#20@#stopObservingLocaleChanges"(): void;
+    "__#21@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#21@#startObservingLocaleChanges"(): void;
+    "__#21@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#20@#openPopupIfPossible"(): void;
+    "__#21@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#21@#openPopupIfPossible"(): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
     readonly _dialogLabel: string;

package/shared/picker-field/mixins/single-value-picker.d.ts

@@ -19,20 +19,20 @@ export declare const SingleValuePicker: <T extends AbstractConstructor<PickerFie
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#20@#onFocusIn": () => void;
-    "__#20@#onFocusOut": () => void;
+    "__#21@#onFocusIn": () => void;
+    "__#21@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#20@#localeChangeHandler": {
+    "__#21@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
-    "__#20@#startObservingLocaleChanges"(): void;
-    "__#20@#stopObservingLocaleChanges"(): void;
+    "__#21@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#21@#startObservingLocaleChanges"(): void;
+    "__#21@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#20@#openPopupIfPossible"(): void;
+    "__#21@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#21@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;

package/shared/picker-field/mixins/time-selection-picker.d.ts

@@ -21,20 +21,20 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#20@#onFocusIn": () => void;
-    "__#20@#onFocusOut": () => void;
+    "__#21@#onFocusIn": () => void;
+    "__#21@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#20@#localeChangeHandler": {
+    "__#21@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#localeChangeObserver": ExpressionNotifier<any, any, any>;
-    "__#20@#startObservingLocaleChanges"(): void;
-    "__#20@#stopObservingLocaleChanges"(): void;
+    "__#21@#localeChangeObserver": ExpressionNotifier<any, any, any>;
+    "__#21@#startObservingLocaleChanges"(): void;
+    "__#21@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#20@#openPopupIfPossible"(): void;
+    "__#21@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#21@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -868,12 +868,12 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     readonly _displaySeconds: boolean;
     readonly _use12hClock: boolean;
     readonly _timePlaceholder: string;
-    "__#23@#clockChangeHandler": {
+    "__#24@#clockChangeHandler": {
         handleChange: () => void;
     };
-    "__#23@#clockChangeObserver": ExpressionNotifier;
-    "__#23@#startObservingClockChanges"(): void;
-    "__#23@#stopObservingClockChanges"(): void;
+    "__#24@#clockChangeObserver": ExpressionNotifier;
+    "__#24@#startObservingClockChanges"(): void;
+    "__#24@#stopObservingClockChanges"(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     _onPickerButtonClick(): void;
@@ -895,20 +895,20 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _textFieldEl: import("../../..").VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import("../../..").VwcButtonElement;
-    "__#20@#onFocusIn": () => void;
-    "__#20@#onFocusOut": () => void;
+    "__#21@#onFocusIn": () => void;
+    "__#21@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#20@#localeChangeHandler": {
+    "__#21@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#localeChangeObserver": ExpressionNotifier<any, any, any>;
-    "__#20@#startObservingLocaleChanges"(): void;
-    "__#20@#stopObservingLocaleChanges"(): void;
+    "__#21@#localeChangeObserver": ExpressionNotifier<any, any, any>;
+    "__#21@#startObservingLocaleChanges"(): void;
+    "__#21@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#20@#openPopupIfPossible"(): void;
+    "__#21@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#21@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;

package/shared/picker-field/mixins/time-selection-picker.template.d.ts

@@ -12,12 +12,12 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     readonly _displaySeconds: boolean;
     readonly _use12hClock: boolean;
     readonly _timePlaceholder: string;
-    "__#23@#clockChangeHandler": {
+    "__#24@#clockChangeHandler": {
         handleChange: () => void;
     };
-    "__#23@#clockChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
-    "__#23@#startObservingClockChanges"(): void;
-    "__#23@#stopObservingClockChanges"(): void;
+    "__#24@#clockChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#24@#startObservingClockChanges"(): void;
+    "__#24@#stopObservingClockChanges"(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     _onPickerButtonClick(): void;
@@ -39,20 +39,20 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _textFieldEl: import("../../..").VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import("../../..").VwcButtonElement;
-    "__#20@#onFocusIn": () => void;
-    "__#20@#onFocusOut": () => void;
+    "__#21@#onFocusIn": () => void;
+    "__#21@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#20@#localeChangeHandler": {
+    "__#21@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
-    "__#20@#startObservingLocaleChanges"(): void;
-    "__#20@#stopObservingLocaleChanges"(): void;
+    "__#21@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#21@#startObservingLocaleChanges"(): void;
+    "__#21@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#20@#openPopupIfPossible"(): void;
+    "__#21@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#21@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -892,20 +892,20 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#20@#onFocusIn": () => void;
-    "__#20@#onFocusOut": () => void;
+    "__#21@#onFocusIn": () => void;
+    "__#21@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#20@#localeChangeHandler": {
+    "__#21@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
-    "__#20@#startObservingLocaleChanges"(): void;
-    "__#20@#stopObservingLocaleChanges"(): void;
+    "__#21@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#21@#startObservingLocaleChanges"(): void;
+    "__#21@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#20@#openPopupIfPossible"(): void;
+    "__#21@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#21@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;

package/simple-color-picker/definition.cjs

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const vividElement = require('../unbundled/vivid-element.cjs');
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const icon_definition = require('../icon/definition.cjs');
+const tooltip_definition = require('../tooltip/definition.cjs');
 const fastElement = require('@microsoft/fast-element');
 const anchored = require('../unbundled/anchored.cjs');
 const baseColorPicker = require('../unbundled/base-color-picker.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const index = require('../unbundled/index.cjs');
 
-const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border:none;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch.contrast{color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;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;--focus-inset: -3px}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
+const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;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;--focus-inset: -3px}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -64,14 +65,14 @@ class SimpleColorPicker extends anchored.Anchored(baseColorPicker.BaseColorPicke
   /**
    * @internal
    */
-  openChanged() {
+  openChanged(_oldValue, newValue) {
     this._updateListeners();
     if (this._anchorEl) {
       this.#updateAnchor(this._anchorEl);
     }
-    if (this.open) {
-      this._refreshCanvasColor();
+    if (newValue && this.isConnected) {
       requestAnimationFrame(() => {
+        this._refreshCanvasColor();
         const selectedIndex = this.swatches.findIndex(
           (swatch) => swatch.value === this.value
         );
@@ -162,6 +163,7 @@ const getClasses = (_) => fastWebUtilities.classNames("control");
 const SimpleColorPickerTemplate = (context) => {
   const popupTag = context.tagFor(popup_definition.Popup);
   const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  const tooltipTag = context.tagFor(tooltip_definition.VwcTooltipElement);
   const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
   return fastElement.html`
 		${anchorSlotTemplate}
@@ -185,7 +187,7 @@ const SimpleColorPickerTemplate = (context) => {
 				aria-label="${(x) => x.locale.simpleColorPicker.colorPaletteLabel}">
 				${fastElement.repeat(
     (x) => x.swatches,
-    (x) => x._renderColorSwatch(iconTag),
+    (x) => x._renderColorSwatch(iconTag, tooltipTag),
     { positioning: true }
   )}
 			</div>
@@ -197,7 +199,7 @@ const simpleColorPickerDefinition = vividElement.defineVividComponent(
   "simple-color-picker",
   SimpleColorPicker,
   SimpleColorPickerTemplate,
-  [popup_definition.popupDefinition, icon_definition.iconDefinition],
+  [popup_definition.popupDefinition, icon_definition.iconDefinition, tooltip_definition.tooltipDefinition],
   {
     styles
   }

package/simple-color-picker/definition.js

@@ -1,13 +1,14 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
+import { VwcTooltipElement as Tooltip, tooltipDefinition } from '../tooltip/definition.js';
 import { Updates, attr, nullableNumberConverter, repeat, html } from '@microsoft/fast-element';
 import { A as Anchored, a as anchorSlotTemplateFactory } from '../unbundled/anchored.js';
 import { B as BaseColorPicker } from '../unbundled/base-color-picker.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
 
-const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border:none;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch.contrast{color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;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;--focus-inset: -3px}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
+const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;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;--focus-inset: -3px}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -60,14 +61,14 @@ class SimpleColorPicker extends Anchored(BaseColorPicker(VividElement)) {
   /**
    * @internal
    */
-  openChanged() {
+  openChanged(_oldValue, newValue) {
     this._updateListeners();
     if (this._anchorEl) {
       this.#updateAnchor(this._anchorEl);
     }
-    if (this.open) {
-      this._refreshCanvasColor();
+    if (newValue && this.isConnected) {
       requestAnimationFrame(() => {
+        this._refreshCanvasColor();
         const selectedIndex = this.swatches.findIndex(
           (swatch) => swatch.value === this.value
         );
@@ -158,6 +159,7 @@ const getClasses = (_) => classNames("control");
 const SimpleColorPickerTemplate = (context) => {
   const popupTag = context.tagFor(Popup);
   const iconTag = context.tagFor(Icon);
+  const tooltipTag = context.tagFor(Tooltip);
   const anchorSlotTemplate = anchorSlotTemplateFactory();
   return html`
 		${anchorSlotTemplate}
@@ -181,7 +183,7 @@ const SimpleColorPickerTemplate = (context) => {
 				aria-label="${(x) => x.locale.simpleColorPicker.colorPaletteLabel}">
 				${repeat(
     (x) => x.swatches,
-    (x) => x._renderColorSwatch(iconTag),
+    (x) => x._renderColorSwatch(iconTag, tooltipTag),
     { positioning: true }
   )}
 			</div>
@@ -193,7 +195,7 @@ const simpleColorPickerDefinition = defineVividComponent(
   "simple-color-picker",
   SimpleColorPicker,
   SimpleColorPickerTemplate,
-  [popupDefinition, iconDefinition],
+  [popupDefinition, iconDefinition, tooltipDefinition],
   {
     styles
   }

package/simple-color-picker/index.cjs

@@ -1,19 +1,19 @@
-"use strict";const s=require("../bundled/vivid-element.cjs"),l=require("../bundled/definition9.cjs"),p=require("../bundled/definition2.cjs"),h=require("../bundled/anchored.cjs"),u=require("../bundled/base-color-picker.cjs"),v=require("../bundled/index.cjs"),m=require("../bundled/repeat.cjs"),f=require("../bundled/class-names.cjs"),w=".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border:none;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch.contrast{color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;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;--focus-inset: -3px}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";var g=Object.defineProperty,d=(r,e,o,n)=>{for(var t=void 0,i=r.length-1,c;i>=0;i--)(c=r[i])&&(t=c(e,o,t)||t);return t&&g(e,o,t),t};class a extends h.Anchored(u.BaseColorPicker(s.VividElement)){constructor(){super(...arguments),this.placement="top-start",this.swatchesPerRow=7,this.#e=()=>{this.open||s.Updates.enqueue(()=>this.open=!0)},this.#t=e=>{(e.key==="Enter"||e.key===" ")&&(this.open||s.Updates.enqueue(()=>this.open=!0),e.preventDefault())},this._closeOnClickOutside=e=>{const o=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(o||n)&&(this.open=!1)},this._closeOnEscape=e=>{e.key==="Escape"&&(this.open=!1)}}openChanged(){this._updateListeners(),this._anchorEl&&this.#o(this._anchorEl),this.open&&(this._refreshCanvasColor(),requestAnimationFrame(()=>{const e=this.swatches.findIndex(n=>n.value===this.value),o=e>=0?e:0;this._focusSwatchByIndex(o)}))}_getRowLength(){return this.swatchesPerRow}connectedCallback(){super.connectedCallback(),this._updateListeners()}disconnectedCallback(){super.disconnectedCallback(),this._updateListeners()}_updateListeners(){document.removeEventListener("click",this._closeOnClickOutside),document.removeEventListener("keydown",this._closeOnEscape),this.open&&this.isConnected&&(document.addEventListener("click",this._closeOnClickOutside),document.addEventListener("keydown",this._closeOnEscape))}_getFocusReturnEl(){return this._anchorEl??null}_anchorElChanged(e,o){e&&this.#r(e),o&&this.#s(o)}#o(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#s(e){this.#o(e),e.addEventListener("click",this.#e,!0),e.addEventListener("keydown",this.#t),e.setAttribute("aria-haspopup","true")}#r(e){e.removeEventListener("click",this.#e,!0),e.removeEventListener("keydown",this.#t),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded"),e.removeAttribute("aria-haspopup")}#e;#t}d([s.attr({mode:"fromView"})],a.prototype,"placement");d([s.attr({attribute:"swatches-per-row",mode:"fromView",converter:s.nullableNumberConverter})],a.prototype,"swatchesPerRow");const _=r=>f.classNames("control"),k=r=>{const e=r.tagFor(l.Popup),o=r.tagFor(p.Icon),n=h.anchorSlotTemplateFactory();return s.html`
-		${n}
+"use strict";const r=require("../bundled/vivid-element.cjs"),l=require("../bundled/definition9.cjs"),p=require("../bundled/definition2.cjs"),d=require("../bundled/definition11.cjs"),h=require("../bundled/anchored.cjs"),v=require("../bundled/base-color-picker.cjs"),m=require("../bundled/index.cjs"),f=require("../bundled/repeat.cjs"),g=require("../bundled/class-names.cjs"),w=".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;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;--focus-inset: -3px}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";var _=Object.defineProperty,u=(n,e,o,i)=>{for(var s=void 0,t=n.length-1,a;t>=0;t--)(a=n[t])&&(s=a(e,o,s)||s);return s&&_(e,o,s),s};class c extends h.Anchored(v.BaseColorPicker(r.VividElement)){constructor(){super(...arguments),this.placement="top-start",this.swatchesPerRow=7,this.#e=()=>{this.open||r.Updates.enqueue(()=>this.open=!0)},this.#t=e=>{(e.key==="Enter"||e.key===" ")&&(this.open||r.Updates.enqueue(()=>this.open=!0),e.preventDefault())},this._closeOnClickOutside=e=>{const o=!this.contains(e.target),i=this._anchorEl?.contains(e.target);(o||i)&&(this.open=!1)},this._closeOnEscape=e=>{e.key==="Escape"&&(this.open=!1)}}openChanged(e,o){this._updateListeners(),this._anchorEl&&this.#o(this._anchorEl),o&&this.isConnected&&requestAnimationFrame(()=>{this._refreshCanvasColor();const i=this.swatches.findIndex(t=>t.value===this.value),s=i>=0?i:0;this._focusSwatchByIndex(s)})}_getRowLength(){return this.swatchesPerRow}connectedCallback(){super.connectedCallback(),this._updateListeners()}disconnectedCallback(){super.disconnectedCallback(),this._updateListeners()}_updateListeners(){document.removeEventListener("click",this._closeOnClickOutside),document.removeEventListener("keydown",this._closeOnEscape),this.open&&this.isConnected&&(document.addEventListener("click",this._closeOnClickOutside),document.addEventListener("keydown",this._closeOnEscape))}_getFocusReturnEl(){return this._anchorEl??null}_anchorElChanged(e,o){e&&this.#r(e),o&&this.#s(o)}#o(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#s(e){this.#o(e),e.addEventListener("click",this.#e,!0),e.addEventListener("keydown",this.#t),e.setAttribute("aria-haspopup","true")}#r(e){e.removeEventListener("click",this.#e,!0),e.removeEventListener("keydown",this.#t),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded"),e.removeAttribute("aria-haspopup")}#e;#t}u([r.attr({mode:"fromView"})],c.prototype,"placement");u([r.attr({attribute:"swatches-per-row",mode:"fromView",converter:r.nullableNumberConverter})],c.prototype,"swatchesPerRow");const k=n=>g.classNames("control"),b=n=>{const e=n.tagFor(l.Popup),o=n.tagFor(p.Icon),i=n.tagFor(d.Tooltip),s=h.anchorSlotTemplateFactory();return r.html`
+		${s}
 		<${e}
-			class="${_}"
+			class="${k}"
 			:anchor="${t=>t._anchorEl}"
 			:open="${t=>t.open}"
 			placement="${t=>t.placement}"
 			offset="4"
-			@keydown="${(t,{event:i})=>!(t.open&&v.handleEscapeKeyAndStopPropogation(i))}"
+			@keydown="${(t,{event:a})=>!(t.open&&m.handleEscapeKeyAndStopPropogation(a))}"
 		>
 			<div class="palette" role="grid" 
 				aria-rowcount="${t=>Math.ceil(t.swatches.length/t._getRowLength())}"
 				aria-colcount="${t=>t._getRowLength()}"
 				style="--swatches-per-row: ${t=>t._getRowLength()};"
 				aria-label="${t=>t.locale.simpleColorPicker.colorPaletteLabel}">
-				${m.repeat(t=>t.swatches,t=>t._renderColorSwatch(o),{positioning:!0})}
+				${f.repeat(t=>t.swatches,t=>t._renderColorSwatch(o,i),{positioning:!0})}
 			</div>
 		</${e}>
-	`},x=s.defineVividComponent("simple-color-picker",a,k,[l.popupDefinition,p.iconDefinition],{styles:w}),b=s.createRegisterFunction(x);b();
+	`},x=r.defineVividComponent("simple-color-picker",c,b,[l.popupDefinition,p.iconDefinition,d.tooltipDefinition],{styles:w}),C=r.createRegisterFunction(x);C();