@vonage/vivid 5.4.0 → 5.5.0

package/lib/date-range-picker/date-range-picker.d.ts

@@ -11,8 +11,8 @@ declare const DateRangePicker_base: (abstract new (...args: any[]) => {
     _currentDate: string;
     _currentMonth: import("../../shared/datetime/month").Month;
     _isDateInValidRange(date: string): boolean;
-    "__#21@#isMonthAfterValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
-    "__#21@#isMonthBeforeValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
+    "__#22@#isMonthAfterValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
+    "__#22@#isMonthBeforeValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
     _isMonthInValidRange(month: import("../../shared/datetime/month").Month): boolean;
     _closePopup: ((restoreFocusToTextField?: boolean) => void) & ((restoreFocusToTextField?: boolean) => void);
     _onPickerButtonClick: (() => void) & (() => void);
@@ -55,20 +55,20 @@ declare const DateRangePicker_base: (abstract new (...args: any[]) => {
     _pickerButtonEl: import("../components").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;
@@ -901,8 +901,8 @@ declare const DateRangePicker_base: (abstract new (...args: any[]) => {
     readonly _resolvedMinDate: string;
     readonly _resolvedMaxDate: string;
     _isDateInValidRange(date: string): boolean;
-    "__#21@#isMonthAfterValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
-    "__#21@#isMonthBeforeValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
+    "__#22@#isMonthAfterValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
+    "__#22@#isMonthBeforeValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
     _isMonthInValidRange(month: import("../../shared/datetime/month").Month): boolean;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onPickerButtonClick(): void;
@@ -945,20 +945,20 @@ declare const DateRangePicker_base: (abstract new (...args: any[]) => {
     _pickerButtonEl: import("../components").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/lib/date-time-picker/date-time-picker.d.ts

@@ -11,12 +11,12 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     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;
@@ -38,20 +38,20 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _textFieldEl: import("../components").VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import("../components").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>;
@@ -887,8 +887,8 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     readonly _resolvedMinDate: string;
     readonly _resolvedMaxDate: string;
     _isDateInValidRange(date: string): boolean;
-    "__#21@#isMonthAfterValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
-    "__#21@#isMonthBeforeValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
+    "__#22@#isMonthAfterValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
+    "__#22@#isMonthBeforeValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
     _isMonthInValidRange(month: import("../../shared/datetime/month").Month): boolean;
     _closePopup: ((restoreFocusToTextField?: boolean) => void) & ((restoreFocusToTextField?: boolean) => void);
     _onPickerButtonClick: (() => void) & (() => void);
@@ -927,20 +927,20 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _pickerButtonEl: import("../components").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;
@@ -1789,20 +1789,20 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _pickerButtonEl: import("../components").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>;
@@ -2632,8 +2632,8 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     readonly _resolvedMinDate: string;
     readonly _resolvedMaxDate: string;
     _isDateInValidRange(date: string): boolean;
-    "__#21@#isMonthAfterValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
-    "__#21@#isMonthBeforeValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
+    "__#22@#isMonthAfterValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
+    "__#22@#isMonthBeforeValidRange"(month: import("../../shared/datetime/month").Month): boolean | "";
     _isMonthInValidRange(month: import("../../shared/datetime/month").Month): boolean;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onPickerButtonClick(): void;
@@ -2676,20 +2676,20 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _pickerButtonEl: import("../components").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/lib/dial-pad/dial-pad.d.ts

@@ -391,6 +391,7 @@ export declare class DialPad extends DialPad_base {
     endCallButtonLabel: string | null;
     callButtonLabel: string | null;
     deleteAriaLabel: string | null;
+    private _clearLongPressTimer;
     autofocus: boolean;
     focus(): void;
 }

package/lib/icon/icon.d.ts

@@ -1,6 +1,7 @@
 import type { Connotation } from '../enums';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import type { ExtractFromEnum } from '../../shared/utils/enums';
+export declare const resolveIcon: (iconId: string | undefined, signal: AbortSignal) => Promise<string>;
 export type IconConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information | Connotation.Announcement>;
 export declare class Icon extends VividElement {
     #private;

package/lib/simple-color-picker/simple-color-picker.d.ts

@@ -392,6 +392,7 @@ declare const SimpleColorPicker_base: {
         swatches: import("../../shared/color-picker").ColorSwatch[];
         connectedCallback(): void;
         _canvasColor: string;
+        readonly _computedCanvasColor: string;
         _refreshCanvasColor(): void;
         _applyContrastClass(color: string, threshold?: number): boolean;
         _getRowLength(): number;
@@ -402,7 +403,7 @@ declare const SimpleColorPicker_base: {
         _getGridCells(): HTMLElement[];
         _handleCellKeydown(event: KeyboardEvent, value: string, index: number, isSaveCell?: boolean | undefined): boolean;
         _focusSwatchByIndex(index: number): void;
-        _renderColorSwatch(iconTag: import("@microsoft/fast-element").InlineTemplateDirective): import("@microsoft/fast-element").ViewTemplate<import("../../shared/color-picker").ColorSwatch, any>;
+        _renderColorSwatch(iconTag: import("@microsoft/fast-element").InlineTemplateDirective, tooltipTag: import("@microsoft/fast-element").InlineTemplateDirective): import("@microsoft/fast-element").ViewTemplate<import("../../shared/color-picker").ColorSwatch, any>;
         readonly locale: import("../../shared/localization/Locale").Locale;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;

package/lib/time-picker/time-picker.d.ts

@@ -13,12 +13,12 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     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;
@@ -40,20 +40,20 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _textFieldEl: import("../components").VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import("../components").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>;
@@ -893,20 +893,20 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _pickerButtonEl: import("../components").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/locales/de-DE.cjs

@@ -482,12 +482,25 @@ const deDE = {
   },
   colorPicker: {
     popupLabel: "Farbwähler",
-    swatchesLabel: "Gespeicherte Farben:",
-    pickerButtonLabel: "Farbwähler öffnen",
+    swatchesLabel: "Gespeicherte Farben",
+    pickerButtonLabel: "Farbwähler",
+    hexInputLabel: "HEX-Farbcode",
     saveButtonLabel: "Aktuelle Farbe speichern",
     closeButtonLabel: "Farbwähler schließen",
     copyButtonLabel: "Farbe in die Zwischenablage kopieren",
-    copyErrorText: "Kopieren fehlgeschlagen. Zugriff auf die Zwischenablage wurde blockiert. Versuchen Sie es erneut."
+    copyErrorText: "Kopieren fehlgeschlagen. Zugriff auf die Zwischenablage wurde blockiert. Versuchen Sie es erneut.",
+    copySuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Farbe ${value} in die Zwischenablage kopiert.`
+    ),
+    selectionSuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Farbe ${value} ausgewählt.`
+    ),
+    maxSwatchesMessage: (
+      /* istanbul ignore next */
+      (total, limit) => `${total} von ${limit} Farben gespeichert.`
+    )
   }
 };
 

package/locales/de-DE.js

@@ -480,12 +480,25 @@ const deDE = {
   },
   colorPicker: {
     popupLabel: "Farbwähler",
-    swatchesLabel: "Gespeicherte Farben:",
-    pickerButtonLabel: "Farbwähler öffnen",
+    swatchesLabel: "Gespeicherte Farben",
+    pickerButtonLabel: "Farbwähler",
+    hexInputLabel: "HEX-Farbcode",
     saveButtonLabel: "Aktuelle Farbe speichern",
     closeButtonLabel: "Farbwähler schließen",
     copyButtonLabel: "Farbe in die Zwischenablage kopieren",
-    copyErrorText: "Kopieren fehlgeschlagen. Zugriff auf die Zwischenablage wurde blockiert. Versuchen Sie es erneut."
+    copyErrorText: "Kopieren fehlgeschlagen. Zugriff auf die Zwischenablage wurde blockiert. Versuchen Sie es erneut.",
+    copySuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Farbe ${value} in die Zwischenablage kopiert.`
+    ),
+    selectionSuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Farbe ${value} ausgewählt.`
+    ),
+    maxSwatchesMessage: (
+      /* istanbul ignore next */
+      (total, limit) => `${total} von ${limit} Farben gespeichert.`
+    )
   }
 };
 

package/locales/en-GB.cjs

@@ -314,12 +314,25 @@ const enGB = {
   },
   colorPicker: {
     popupLabel: "Colour Picker",
-    swatchesLabel: "Saved colours:",
-    pickerButtonLabel: "Open Colour Picker",
+    swatchesLabel: "Saved colours",
+    pickerButtonLabel: "Colour Picker",
+    hexInputLabel: "HEX color code",
     saveButtonLabel: "Save current colour",
     closeButtonLabel: "Close Colour Picker",
-    copyButtonLabel: "Copy Colour to Clipboard",
-    copyErrorText: "Copy failed. Clipboard access was blocked. Try again."
+    copyButtonLabel: "Copy colour to clipboard",
+    copyErrorText: "Copy failed. Clipboard access was blocked. Try again.",
+    copySuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Colour ${value} copied to clipboard.`
+    ),
+    selectionSuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Colour ${value} selected.`
+    ),
+    maxSwatchesMessage: (
+      /* istanbul ignore next */
+      (total, limit) => `${total} of ${limit} colours saved.`
+    )
   }
 };
 

package/locales/en-GB.js

@@ -312,12 +312,25 @@ const enGB = {
   },
   colorPicker: {
     popupLabel: "Colour Picker",
-    swatchesLabel: "Saved colours:",
-    pickerButtonLabel: "Open Colour Picker",
+    swatchesLabel: "Saved colours",
+    pickerButtonLabel: "Colour Picker",
+    hexInputLabel: "HEX color code",
     saveButtonLabel: "Save current colour",
     closeButtonLabel: "Close Colour Picker",
-    copyButtonLabel: "Copy Colour to Clipboard",
-    copyErrorText: "Copy failed. Clipboard access was blocked. Try again."
+    copyButtonLabel: "Copy colour to clipboard",
+    copyErrorText: "Copy failed. Clipboard access was blocked. Try again.",
+    copySuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Colour ${value} copied to clipboard.`
+    ),
+    selectionSuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Colour ${value} selected.`
+    ),
+    maxSwatchesMessage: (
+      /* istanbul ignore next */
+      (total, limit) => `${total} of ${limit} colours saved.`
+    )
   }
 };
 

package/locales/en-US.cjs

@@ -482,12 +482,25 @@ const enUS = {
   },
   colorPicker: {
     popupLabel: "Color Picker",
-    swatchesLabel: "Saved colors:",
-    pickerButtonLabel: "Open Color Picker",
+    swatchesLabel: "Saved colors",
+    pickerButtonLabel: "Color Picker",
+    hexInputLabel: "HEX color code",
     saveButtonLabel: "Save current color",
     closeButtonLabel: "Close Color Picker",
-    copyButtonLabel: "Copy Color to Clipboard",
-    copyErrorText: "Copy failed. Clipboard access was blocked. Try again."
+    copyButtonLabel: "Copy color to clipboard",
+    copyErrorText: "Copy failed. Clipboard access was blocked. Try again.",
+    copySuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Color ${value} copied to clipboard.`
+    ),
+    selectionSuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Color ${value} selected.`
+    ),
+    maxSwatchesMessage: (
+      /* istanbul ignore next */
+      (total, limit) => `${total} of ${limit} colors saved.`
+    )
   }
 };
 

package/locales/en-US.js

@@ -480,12 +480,25 @@ const enUS = {
   },
   colorPicker: {
     popupLabel: "Color Picker",
-    swatchesLabel: "Saved colors:",
-    pickerButtonLabel: "Open Color Picker",
+    swatchesLabel: "Saved colors",
+    pickerButtonLabel: "Color Picker",
+    hexInputLabel: "HEX color code",
     saveButtonLabel: "Save current color",
     closeButtonLabel: "Close Color Picker",
-    copyButtonLabel: "Copy Color to Clipboard",
-    copyErrorText: "Copy failed. Clipboard access was blocked. Try again."
+    copyButtonLabel: "Copy color to clipboard",
+    copyErrorText: "Copy failed. Clipboard access was blocked. Try again.",
+    copySuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Color ${value} copied to clipboard.`
+    ),
+    selectionSuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Color ${value} selected.`
+    ),
+    maxSwatchesMessage: (
+      /* istanbul ignore next */
+      (total, limit) => `${total} of ${limit} colors saved.`
+    )
   }
 };
 

package/locales/ja-JP.cjs

@@ -481,12 +481,25 @@ const jaJP = {
   },
   colorPicker: {
     popupLabel: "カラーピッカー",
-    swatchesLabel: "保存された色:",
-    pickerButtonLabel: "カラーピッカーを開く",
+    swatchesLabel: "保存された色",
+    pickerButtonLabel: "カラーピッカー",
+    hexInputLabel: "HEXカラーコード",
     saveButtonLabel: "現在の色を保存",
     closeButtonLabel: "カラーピッカーを閉じる",
     copyButtonLabel: "色をクリップボードにコピー",
-    copyErrorText: "コピーに失敗しました。クリップボードへのアクセスがブロックされました。もう一度お試しください。"
+    copyErrorText: "コピーに失敗しました。クリップボードへのアクセスがブロックされました。もう一度お試しください。",
+    copySuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `カラー ${value} がクリップボードにコピーされました。`
+    ),
+    selectionSuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `色 ${value} が選択されました。`
+    ),
+    maxSwatchesMessage: (
+      /* istanbul ignore next */
+      (total, limit) => `${limit} 色中 ${total} 色を保存しました。`
+    )
   }
 };
 

package/locales/ja-JP.js

@@ -479,12 +479,25 @@ const jaJP = {
   },
   colorPicker: {
     popupLabel: "カラーピッカー",
-    swatchesLabel: "保存された色:",
-    pickerButtonLabel: "カラーピッカーを開く",
+    swatchesLabel: "保存された色",
+    pickerButtonLabel: "カラーピッカー",
+    hexInputLabel: "HEXカラーコード",
     saveButtonLabel: "現在の色を保存",
     closeButtonLabel: "カラーピッカーを閉じる",
     copyButtonLabel: "色をクリップボードにコピー",
-    copyErrorText: "コピーに失敗しました。クリップボードへのアクセスがブロックされました。もう一度お試しください。"
+    copyErrorText: "コピーに失敗しました。クリップボードへのアクセスがブロックされました。もう一度お試しください。",
+    copySuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `カラー ${value} がクリップボードにコピーされました。`
+    ),
+    selectionSuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `色 ${value} が選択されました。`
+    ),
+    maxSwatchesMessage: (
+      /* istanbul ignore next */
+      (total, limit) => `${limit} 色中 ${total} 色を保存しました。`
+    )
   }
 };
 

package/locales/zh-CN.cjs

@@ -484,11 +484,24 @@ const zhCN = {
   colorPicker: {
     popupLabel: "颜色选择器",
     swatchesLabel: "已保存的颜色",
-    pickerButtonLabel: "打开颜色选择器",
+    pickerButtonLabel: "颜色选择器",
+    hexInputLabel: "十六进制颜色代码",
     saveButtonLabel: "保存当前颜色",
     closeButtonLabel: "关闭颜色选择器",
     copyButtonLabel: "将颜色复制到剪贴板",
-    copyErrorText: "复制失败。剪贴板访问已被阻止。请重试。"
+    copyErrorText: "复制失败。剪贴板访问已被阻止。请重试。",
+    copySuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `颜色 ${value} 已复制到剪贴板。`
+    ),
+    selectionSuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `已选择颜色 ${value}。`
+    ),
+    maxSwatchesMessage: (
+      /* istanbul ignore next */
+      (total, limit) => `已保存 ${limit} 种颜色中的 ${total} 种。`
+    )
   }
 };
 

package/locales/zh-CN.js

@@ -482,11 +482,24 @@ const zhCN = {
   colorPicker: {
     popupLabel: "颜色选择器",
     swatchesLabel: "已保存的颜色",
-    pickerButtonLabel: "打开颜色选择器",
+    pickerButtonLabel: "颜色选择器",
+    hexInputLabel: "十六进制颜色代码",
     saveButtonLabel: "保存当前颜色",
     closeButtonLabel: "关闭颜色选择器",
     copyButtonLabel: "将颜色复制到剪贴板",
-    copyErrorText: "复制失败。剪贴板访问已被阻止。请重试。"
+    copyErrorText: "复制失败。剪贴板访问已被阻止。请重试。",
+    copySuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `颜色 ${value} 已复制到剪贴板。`
+    ),
+    selectionSuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `已选择颜色 ${value}。`
+    ),
+    maxSwatchesMessage: (
+      /* istanbul ignore next */
+      (total, limit) => `已保存 ${limit} 种颜色中的 ${total} 种。`
+    )
   }
 };