@ui5/webcomponents 2.14.0-rc.6 → 2.14.0-rc.7

package/dist/ColorPalette.d.ts

@@ -109,6 +109,8 @@ declare class ColorPalette extends UI5Element {
     _recentColors: Array<string>;
     _currentlySelected?: ColorPaletteItem;
     _shouldFocusRecentColors: boolean;
+    _defaultColorButton: Button;
+    _moreColorsButton: Button;
     static i18nBundle: I18nBundle;
     constructor();
     onBeforeRendering(): void;
@@ -122,6 +124,7 @@ declare class ColorPalette extends UI5Element {
      */
     _ensureSingleSelectionOrDeselectAll(): void;
     _onclick(e: MouseEvent): void;
+    _onmousedown(e: MouseEvent): void;
     _onkeyup(e: KeyboardEvent): void;
     _onkeydown(e: KeyboardEvent): void;
     handleSelection(target: ColorPaletteItem): void;
@@ -130,11 +133,94 @@ declare class ColorPalette extends UI5Element {
     _onDefaultColorKeyUp(e: KeyboardEvent): void;
     _onDefaultColorKeyDown(e: KeyboardEvent): void;
     _onMoreColorsKeyDown(e: KeyboardEvent): void;
-    _isUpOrDownNavigatableColorPaletteItem(e: KeyboardEvent): boolean | undefined;
     _onColorContainerKeyDown(e: KeyboardEvent): void;
     _onRecentColorsContainerKeyDown(e: KeyboardEvent): void;
+    /**
+     * Checks if the keyboard event is up/down navigation on a displayed color palette item
+     * @private
+     */
+    _isUpOrDownNavigatableColorPaletteItem(e: KeyboardEvent): boolean;
+    _isPrevious(e: KeyboardEvent): boolean;
+    _isNext(e: KeyboardEvent): boolean;
+    _isFirstSwatch(target: ColorPaletteItem, swatches: Array<IColorPaletteItem>): boolean;
+    _isLastSwatch(target: ColorPaletteItem, swatches: Array<IColorPaletteItem>): boolean;
+    /**
+     * Checks if the given color swatch is the last swatch of the last full row.
+     *
+     * Example 1: 12 colors with rowSize 5
+     * Row 1: [0, 1, 2, 3, 4]  ← Complete row
+     * Row 2: [5, 6, 7, 8, 9]  ← Complete row (last complete row)
+     * Row 3: [10, 11]         ← Incomplete row
+     *
+     * @param target The color swatch to check.
+     * @returns True if the swatch is the last of the last full row, false otherwise.
+     */
+    _isLastSwatchOfLastFullRow(target: ColorPaletteItem): boolean;
+    _isSwatchInLastRow(target: ColorPaletteItem): boolean;
+    /**
+     * Helper to check if all displayed colors fit in a single row
+     * @private
+     */
+    _isSingleRow(): boolean;
+    /**
+     * Helper to focus the first available element from a list of candidates.
+     *
+     * This method implements a fallback chain pattern for keyboard navigation in the color palette.
+     * It attempts to execute focus actions in priority order, stopping at the first successful one.
+     *
+     * For example when navigating left from the default color button, try these options in order:
+     * this._focusFirstAvailable(
+     *   () => this._focusLastRecentColor(),    // 1st choice: focus last recent color if available
+     *   () => this._focusMoreColors(),         // 2nd choice: focus "More Colors" button if available
+     *   () => this._focusLastDisplayedColor()  // 3rd choice: focus last color in the main palette
+     * );
+     *
+     * @private
+     * @param candidates - Functions that attempt to focus an element. Each function should return true if focus was successful, false otherwise.
+     * @returns True if any candidate successfully focused an element, false if all failed.
+     */
+    _focusFirstAvailable(...candidates: Array<() => boolean>): boolean;
+    /**
+     * Helper to focus default color button if available
+     * @private
+     */
+    _focusDefaultColor(): boolean;
+    /**
+     * Helper to focus more colors button if available
+     * @private
+     */
+    _focusMoreColors(): boolean;
+    /**
+     * Helper to focus first displayed color if available
+     * @private
+     */
+    _focusFirstDisplayedColor(): boolean;
+    /**
+     * Helper to focus last displayed color if available
+     * @private
+     */
+    _focusLastDisplayedColor(): boolean;
+    /**
+     * Helper to focus last swatch of last full row if available
+     * @private
+     */
+    _focusLastSwatchOfLastFullRow(): boolean;
+    /**
+     * Returns the index of the last swatch in the last complete row.
+     * @private
+     */
+    _getLastCompleteRowEndIndex(total: number, rowSize: number): number;
+    /**
+     * Helper to focus first recent color if available
+     * @private
+     */
+    _focusFirstRecentColor(): boolean;
+    /**
+     * Helper to focus last recent color if available
+     * @private
+     */
+    _focusLastRecentColor(): boolean;
     focusColorElement(element: ColorPaletteNavigationItem, itemNavigation: ItemNavigation): void;
-    get firstFocusableElement(): ColorPaletteNavigationItem;
     onColorPickerChange(e: Event): void;
     _chooseCustomColor(): void;
     _addRecentColor(color: string): void;
@@ -153,7 +239,7 @@ declare class ColorPalette extends UI5Element {
      * Returns the selected color.
      */
     get selectedColor(): string | undefined;
-    get displayedColors(): IColorPaletteItem[];
+    get displayedColors(): Array<IColorPaletteItem>;
     get colorContainerLabel(): string;
     get colorPaletteMoreColorsText(): string;
     get colorPaletteDefaultColorText(): string;
@@ -161,7 +247,6 @@ declare class ColorPalette extends UI5Element {
     get hasRecentColors(): string | false;
     get recentColors(): string[];
     get recentColorsElements(): Array<ColorPaletteItem>;
-    get colorPaletteNavigationElements(): ColorPaletteNavigationItem[];
     get classes(): {
         colorPaletteRoot: {
             "ui5-cp-root": boolean;

package/dist/ColorPalette.js

@@ -9,13 +9,14 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import { isSpace, isEnter, isDown, isUp, isTabNext, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isSpace, isEnter, isDown, isRight, isUp, isLeft, isTabNext, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
 import ColorPaletteTemplate from "./ColorPaletteTemplate.js";
 import "./ColorPaletteItem.js";
 import { COLORPALETTE_CONTAINER_LABEL, COLOR_PALETTE_MORE_COLORS_TEXT, COLOR_PALETTE_DEFAULT_COLOR_TEXT, COLOR_PALETTE_DIALOG_CANCEL_BUTTON, COLOR_PALETTE_DIALOG_OK_BUTTON, COLOR_PALETTE_DIALOG_TITLE, } from "./generated/i18n/i18n-defaults.js";
@@ -91,7 +92,7 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
         this._itemNavigationRecentColors = new ItemNavigation(this, {
             getItemsCallback: () => this.recentColorsElements,
             rowSize: this.rowSize,
-            behavior: ItemNavigationBehavior.Static,
+            behavior: ItemNavigationBehavior.Cyclic,
         });
         this._recentColors = [];
     }
@@ -179,6 +180,19 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
     _onclick(e) {
         this.handleSelection(e.target);
     }
+    _onmousedown(e) {
+        const target = e.target;
+        if (!target.hasAttribute("ui5-color-palette-item")) {
+            return;
+        }
+        const colorItem = target;
+        if (this.displayedColors.includes(colorItem)) {
+            this._itemNavigation.setCurrentItem(colorItem);
+        }
+        else if (this.recentColorsElements.includes(colorItem)) {
+            this._itemNavigationRecentColors.setCurrentItem(colorItem);
+        }
+    }
     _onkeyup(e) {
         const target = e.target;
         if (isSpace(e)) {
@@ -194,6 +208,11 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
         if (isSpace(e)) {
             e.preventDefault();
         }
+        // Prevent Home/End keys from working in embedded mode - they only work in popup mode as per design
+        if (!this.popupMode && (isHome(e) || isEnd(e))) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
     }
     handleSelection(target) {
         if (!target.hasAttribute("ui5-color-palette-item") || !target.value) {
@@ -234,52 +253,44 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
         if (isEnter(e)) {
             this._handleDefaultColorClick(e);
         }
-        if (isDown(e)) {
+        if (this._isNext(e)) {
+            e.stopPropagation();
+            this._focusFirstDisplayedColor();
+        }
+        else if (isLeft(e)) {
             e.stopPropagation();
-            this.focusColorElement(this.colorPaletteNavigationElements[1], this._itemNavigation);
+            this._focusFirstAvailable(() => this._focusLastRecentColor(), () => this._focusMoreColors(), () => this._focusLastDisplayedColor());
         }
         else if (isUp(e)) {
             e.stopPropagation();
-            const lastElementInNavigation = this.colorPaletteNavigationElements[this.colorPaletteNavigationElements.length - 1];
-            if (this.hasRecentColors) {
-                this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);
-            }
-            else if (this.showMoreColors) {
-                lastElementInNavigation.focus();
-            }
-            else {
-                const colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;
-                this.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);
-            }
+            this._focusFirstAvailable(() => this._focusLastRecentColor(), () => this._focusMoreColors(), () => this._focusLastSwatchOfLastFullRow(), () => this._focusLastDisplayedColor());
+        }
+        else if (isEnd(e)) {
+            e.stopPropagation();
+            this._focusFirstAvailable(() => this._focusMoreColors(), () => this._focusLastDisplayedColor());
         }
     }
     _onMoreColorsKeyDown(e) {
-        const target = e.target;
-        const index = this.colorPaletteNavigationElements.indexOf(target);
-        const colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;
-        if (isUp(e)) {
+        if (isLeft(e)) {
             e.stopPropagation();
-            this.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);
+            this._focusLastDisplayedColor();
         }
-        else if (isDown(e)) {
+        else if (isUp(e)) {
             e.stopPropagation();
-            if (this.hasRecentColors) {
-                this.focusColorElement(this.colorPaletteNavigationElements[index + 1], this._itemNavigationRecentColors);
-            }
-            else if (this.showDefaultColor) {
-                this.firstFocusableElement.focus();
-            }
-            else {
-                this.focusColorElement(this.displayedColors[0], this._itemNavigation);
-            }
+            this._focusFirstAvailable(() => this._focusLastSwatchOfLastFullRow(), () => this._focusLastDisplayedColor());
+        }
+        else if (this._isNext(e)) {
+            e.stopPropagation();
+            this._focusFirstAvailable(() => this._focusFirstRecentColor(), () => this._focusDefaultColor(), () => this._focusFirstDisplayedColor());
+        }
+        else if (isHome(e)) {
+            e.stopPropagation();
+            this._focusFirstAvailable(() => this._focusDefaultColor(), () => this._focusFirstDisplayedColor());
         }
-    }
-    _isUpOrDownNavigatableColorPaletteItem(e) {
-        return (isUp(e) || isDown(e)) && this._currentlySelected && this.colorPaletteNavigationElements.includes(this._currentlySelected);
     }
     _onColorContainerKeyDown(e) {
         const target = e.target;
-        const lastElementInNavigation = this.colorPaletteNavigationElements[this.colorPaletteNavigationElements.length - 1];
+        const isLastSwatchInSingleRow = this._isSingleRow() && this._isLastSwatch(target, this.displayedColors);
         if (this._isUpOrDownNavigatableColorPaletteItem(e)) {
             this._currentlySelected = undefined;
         }
@@ -287,67 +298,211 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
             e.preventDefault();
             this.selectColor(target);
         }
-        if (isUp(e) && target === this.displayedColors[0] && this.colorPaletteNavigationElements.length > 1) {
+        if (this._isPrevious(e) && this._isFirstSwatch(target, this.displayedColors)) {
             e.stopPropagation();
-            if (this.showDefaultColor) {
-                this.firstFocusableElement.focus();
-            }
-            else if (!this.showDefaultColor && this.hasRecentColors) {
-                this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);
-            }
-            else if (!this.showDefaultColor && this.showMoreColors) {
-                lastElementInNavigation.focus();
-            }
+            this._focusFirstAvailable(() => this._focusDefaultColor(), () => this._focusLastRecentColor(), () => this._focusMoreColors(), () => this._focusLastSwatchOfLastFullRow(), () => this._focusLastDisplayedColor());
         }
-        else if (isDown(e) && target === this.displayedColors[this.displayedColors.length - 1] && this.colorPaletteNavigationElements.length > 1) {
+        else if ((isRight(e) && this._isLastSwatch(target, this.displayedColors))
+            || (isDown(e) && (this._isLastSwatchOfLastFullRow(target) || isLastSwatchInSingleRow))) {
             e.stopPropagation();
-            const isRecentColorsNextElement = (this.showDefaultColor && !this.showMoreColors && this.hasRecentColors) || (!this.showDefaultColor && !this.showMoreColors && this.hasRecentColors);
-            if (this.showDefaultColor && this.showMoreColors) {
-                this.colorPaletteNavigationElements[2].focus();
-            }
-            else if (this.showDefaultColor && !this.showMoreColors && (!this.showRecentColors || !this.recentColors[0])) {
-                this.firstFocusableElement.focus();
-            }
-            else if (isRecentColorsNextElement) {
-                this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);
-            }
-            else if (!this.showDefaultColor && this.showMoreColors) {
-                this.colorPaletteNavigationElements[1].focus();
-            }
+            this._focusFirstAvailable(() => this._focusMoreColors(), () => this._focusFirstRecentColor(), () => this._focusDefaultColor(), () => this._focusFirstDisplayedColor());
+        }
+        else if (isHome(e) && this._isFirstSwatch(target, this.displayedColors)) {
+            e.stopPropagation();
+            this._focusFirstAvailable(() => this._focusDefaultColor(), () => this._focusMoreColors());
+        }
+        else if (isEnd(e) && this._isLastSwatch(target, this.displayedColors)) {
+            e.stopPropagation();
+            this._focusFirstAvailable(() => this._focusMoreColors(), () => this._focusDefaultColor());
+        }
+        else if (isEnd(e) && this._isSwatchInLastRow(target)) {
+            e.stopPropagation();
+            this._focusLastDisplayedColor();
         }
     }
     _onRecentColorsContainerKeyDown(e) {
+        const target = e.target;
         if (this._isUpOrDownNavigatableColorPaletteItem(e)) {
             this._currentlySelected = undefined;
         }
-        if (isUp(e)) {
-            if (this.showMoreColors) {
-                const navigationElementsIndex = this.showDefaultColor ? 2 : 1;
-                this.colorPaletteNavigationElements[navigationElementsIndex].focus();
-            }
-            else if (!this.showMoreColors && this.colorPaletteNavigationElements.length > 1) {
-                const colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;
-                e.stopPropagation();
-                this.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);
-            }
+        if (this._isNext(e) && this._isLastSwatch(target, this.recentColorsElements)) {
+            e.stopPropagation();
+            this._focusFirstAvailable(() => this._focusDefaultColor(), () => this._focusMoreColors(), () => this._focusFirstDisplayedColor());
         }
-        else if (isDown(e)) {
-            if (this.showDefaultColor) {
-                this.firstFocusableElement.focus();
-            }
-            else {
-                e.stopPropagation();
-                this.focusColorElement(this.displayedColors[0], this._itemNavigation);
-            }
+        else if (this._isPrevious(e) && this._isFirstSwatch(target, this.recentColorsElements)) {
+            e.stopPropagation();
+            this._focusFirstAvailable(() => this._focusMoreColors(), () => this._focusLastSwatchOfLastFullRow(), () => this._focusLastDisplayedColor(), () => this._focusDefaultColor());
+        }
+        else if (isEnd(e)) {
+            e.stopPropagation();
+            this._focusLastRecentColor();
+        }
+    }
+    /**
+     * Checks if the keyboard event is up/down navigation on a displayed color palette item
+     * @private
+     */
+    _isUpOrDownNavigatableColorPaletteItem(e) {
+        if (!(isUp(e) || isDown(e)) || !this._currentlySelected) {
+            return false;
+        }
+        return this.displayedColors.includes(this._currentlySelected)
+            || this.recentColorsElements.includes(this._currentlySelected);
+    }
+    _isPrevious(e) {
+        return isUp(e) || isLeft(e);
+    }
+    _isNext(e) {
+        return isDown(e) || isRight(e);
+    }
+    _isFirstSwatch(target, swatches) {
+        return swatches && Boolean(swatches.length) && swatches[0] === target;
+    }
+    _isLastSwatch(target, swatches) {
+        return swatches && Boolean(swatches.length) && swatches[swatches.length - 1] === target;
+    }
+    /**
+     * Checks if the given color swatch is the last swatch of the last full row.
+     *
+     * Example 1: 12 colors with rowSize 5
+     * Row 1: [0, 1, 2, 3, 4]  ← Complete row
+     * Row 2: [5, 6, 7, 8, 9]  ← Complete row (last complete row)
+     * Row 3: [10, 11]         ← Incomplete row
+     *
+     * @param target The color swatch to check.
+     * @returns True if the swatch is the last of the last full row, false otherwise.
+     */
+    _isLastSwatchOfLastFullRow(target) {
+        const index = this.displayedColors.indexOf(target);
+        const rowSize = this.rowSize;
+        const total = this.displayedColors.length;
+        const lastCompleteRowEndIndex = this._getLastCompleteRowEndIndex(total, rowSize);
+        return index >= 0 && index === lastCompleteRowEndIndex;
+    }
+    _isSwatchInLastRow(target) {
+        const index = this.displayedColors.indexOf(target);
+        const lastRowSwatchesCount = this.displayedColors.length % this.rowSize;
+        return index >= 0 && index >= this.displayedColors.length - lastRowSwatchesCount;
+    }
+    /**
+     * Helper to check if all displayed colors fit in a single row
+     * @private
+     */
+    _isSingleRow() {
+        return this.displayedColors.length <= this.rowSize;
+    }
+    /**
+     * Helper to focus the first available element from a list of candidates.
+     *
+     * This method implements a fallback chain pattern for keyboard navigation in the color palette.
+     * It attempts to execute focus actions in priority order, stopping at the first successful one.
+     *
+     * For example when navigating left from the default color button, try these options in order:
+     * this._focusFirstAvailable(
+     *   () => this._focusLastRecentColor(),    // 1st choice: focus last recent color if available
+     *   () => this._focusMoreColors(),         // 2nd choice: focus "More Colors" button if available
+     *   () => this._focusLastDisplayedColor()  // 3rd choice: focus last color in the main palette
+     * );
+     *
+     * @private
+     * @param candidates - Functions that attempt to focus an element. Each function should return true if focus was successful, false otherwise.
+     * @returns True if any candidate successfully focused an element, false if all failed.
+     */
+    _focusFirstAvailable(...candidates) {
+        return candidates.some(focusAction => focusAction());
+    }
+    /**
+     * Helper to focus default color button if available
+     * @private
+     */
+    _focusDefaultColor() {
+        if (this.showDefaultColor && this._defaultColorButton) {
+            this._defaultColorButton.focus();
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Helper to focus more colors button if available
+     * @private
+     */
+    _focusMoreColors() {
+        if (this.showMoreColors && this._moreColorsButton) {
+            this._moreColorsButton.focus();
+            return true;
         }
+        return false;
+    }
+    /**
+     * Helper to focus first displayed color if available
+     * @private
+     */
+    _focusFirstDisplayedColor() {
+        if (this.displayedColors.length) {
+            this.focusColorElement(this.displayedColors[0], this._itemNavigation);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Helper to focus last displayed color if available
+     * @private
+     */
+    _focusLastDisplayedColor() {
+        if (this.displayedColors.length) {
+            this.focusColorElement(this.displayedColors[this.displayedColors.length - 1], this._itemNavigation);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Helper to focus last swatch of last full row if available
+     * @private
+     */
+    _focusLastSwatchOfLastFullRow() {
+        const rowSize = this.rowSize;
+        const total = this.displayedColors.length;
+        const lastCompleteRowEndIndex = this._getLastCompleteRowEndIndex(total, rowSize);
+        // Return false if there are no full rows (less than one complete row)
+        if (lastCompleteRowEndIndex < 0 || !this.displayedColors[lastCompleteRowEndIndex]) {
+            return false;
+        }
+        this.focusColorElement(this.displayedColors[lastCompleteRowEndIndex], this._itemNavigation);
+        return true;
+    }
+    /**
+     * Returns the index of the last swatch in the last complete row.
+     * @private
+     */
+    _getLastCompleteRowEndIndex(total, rowSize) {
+        return Math.floor(total / rowSize) * rowSize - 1;
+    }
+    /**
+     * Helper to focus first recent color if available
+     * @private
+     */
+    _focusFirstRecentColor() {
+        if (this.hasRecentColors && this.recentColorsElements.length) {
+            this.focusColorElement(this.recentColorsElements[0], this._itemNavigationRecentColors);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Helper to focus last recent color if available
+     * @private
+     */
+    _focusLastRecentColor() {
+        if (this.hasRecentColors && this.recentColorsElements.length) {
+            this.focusColorElement(this.recentColorsElements[this.recentColorsElements.length - 1], this._itemNavigationRecentColors);
+            return true;
+        }
+        return false;
     }
     focusColorElement(element, itemNavigation) {
         itemNavigation.setCurrentItem(element);
         itemNavigation._focusCurrentItem();
     }
-    get firstFocusableElement() {
-        return this.colorPaletteNavigationElements[0];
-    }
     onColorPickerChange(e) {
         this.colorPickerValue = e.target.value;
     }
@@ -443,24 +598,6 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
         }
         return [];
     }
-    get colorPaletteNavigationElements() {
-        const navigationElements = [];
-        const rootElement = this.shadowRoot.querySelector(".ui5-cp-root");
-        if (this._currentlySelected) {
-            navigationElements.push(this._currentlySelected);
-        }
-        if (this.showDefaultColor) {
-            navigationElements.push(rootElement.querySelector(".ui5-cp-default-color-button"));
-        }
-        navigationElements.push(this.displayedColors[0]);
-        if (this.showMoreColors) {
-            navigationElements.push(rootElement.querySelector(".ui5-cp-more-colors"));
-        }
-        if (this.showRecentColors && !!this.recentColorsElements.length) {
-            navigationElements.push(this.recentColorsElements[0]);
-        }
-        return navigationElements;
-    }
     get classes() {
         // Remove after deleting the hbs template, it's added in the jsx template
         return {
@@ -509,6 +646,12 @@ __decorate([
         individualSlots: true,
     })
 ], ColorPalette.prototype, "colors", void 0);
+__decorate([
+    query(".ui5-cp-default-color-button")
+], ColorPalette.prototype, "_defaultColorButton", void 0);
+__decorate([
+    query(".ui5-cp-more-colors")
+], ColorPalette.prototype, "_moreColorsButton", void 0);
 __decorate([
     i18n("@ui5/webcomponents")
 ], ColorPalette, "i18nBundle", void 0);