@ui5/webcomponents 2.14.0-rc.6 → 2.14.0

package/dist/BreadcrumbsTemplate.js

@@ -7,6 +7,6 @@ import Label from "./Label.js";
 export default function BreadcrumbsTemplate() {
     return (_jsxs(_Fragment, { children: [_jsx("nav", { class: "ui5-breadcrumbs-root", "aria-label": this._accessibleNameText, children: _jsxs("ol", { onFocusIn: this._onfocusin, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, children: [_jsx("li", { class: "ui5-breadcrumbs-dropdown-arrow-link-wrapper", hidden: this._isOverflowEmpty, children: _jsx(Link, { wrappingType: "None", accessibleRole: "Button", accessibleName: this._dropdownArrowAccessibleNameText, accessibilityAttributes: this.linkAccessibilityAttributes, onClick: this._openRespPopover, children: _jsx(Icon, { name: slimArrowDown, title: this._dropdownArrowAccessibleNameText }) }) }), this._linksData.map(linkData => _jsxs("li", { id: `${linkData._id}-link-wrapper`, class: "ui5-breadcrumbs-link-wrapper", children: [_jsx(Link, { id: `${linkData._id}-link`, href: linkData.href, target: linkData.target, design: linkData._linkDesign, accessibleName: linkData._accessibleNameText, accessibilityAttributes: linkData.accessibilityAttributes, "data-ui5-stable": linkData.stableDomRef, wrappingType: "None", onClick: this._onLinkPress, children: linkData.innerText }), linkData._needsSeparator &&
                                     _jsx("span", { class: "ui5-breadcrumbs-separator", "aria-hidden": "true" })] })), !this._endsWithCurrentLinkItem && this._endsWithCurrentLocation &&
-                            _jsx("li", { class: "ui5-breadcrumbs-current-location", onClick: this._onLabelPress, children: _jsx("span", { id: `${this._id}-labelWrapper`, role: "link", "aria-current": "page", "aria-label": this._currentLocationAccName, children: _jsx(Label, { children: this._currentLocationText }) }) })] }) }), BreadcrumbsPopoverTemplate.call(this)] }));
+                            _jsx("li", { class: "ui5-breadcrumbs-current-location", onClick: this._onLabelPress, children: _jsx("span", { id: `${this._id}-labelWrapper`, role: "link", "aria-current": "page", "aria-label": this._currentLocationAccName, children: _jsx(Label, { wrappingType: "None", children: this._currentLocationText }) }) })] }) }), BreadcrumbsPopoverTemplate.call(this)] }));
 }
 //# sourceMappingURL=BreadcrumbsTemplate.js.map

package/dist/BreadcrumbsTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsTemplate.js","sourceRoot":"","sources":["../src/BreadcrumbsTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AACzE,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,8BACC,cAAK,KAAK,EAAC,sBAAsB,gBAAa,IAAI,CAAC,mBAAmB,YACrE,cACC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,aAEtB,aAAI,KAAK,EAAC,6CAA6C,EAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,YACpF,KAAC,IAAI,IACJ,YAAY,EAAC,MAAM,EACnB,cAAc,EAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,gCAAgC,EACrD,uBAAuB,EAAE,IAAI,CAAC,2BAA2B,EACzD,OAAO,EAAE,IAAI,CAAC,gBAAgB,YAE9B,KAAC,IAAI,IAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,gCAAgC,GAAG,GACpE,GACH,EAEJ,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAC/B,cAAI,EAAE,EAAE,GAAG,QAAQ,CAAC,GAAG,eAAe,EAAE,KAAK,EAAC,8BAA8B,aAC3E,KAAC,IAAI,IACJ,EAAE,EAAE,GAAG,QAAQ,CAAC,GAAG,OAAO,EAC1B,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,MAAM,EAAE,QAAQ,CAAC,WAAW,EAC5B,cAAc,EAAE,QAAQ,CAAC,mBAAmB,EAC5C,uBAAuB,EAAE,QAAQ,CAAC,uBAAuB,qBACxC,QAAQ,CAAC,YAAY,EACtC,YAAY,EAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,YAAY,YAEzB,QAAQ,CAAC,SAAS,GACb,EAEN,QAAQ,CAAC,eAAe;oCACzB,eAAM,KAAK,EAAC,2BAA2B,iBAAa,MAAM,GAAQ,IAE9D,CACL,EAEA,CAAC,IAAI,CAAC,wBAAwB,IAAI,IAAI,CAAC,wBAAwB;4BAChE,aAAI,KAAK,EAAC,kCAAkC,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,YACvE,eACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,eAAe,EAC9B,IAAI,EAAC,MAAM,kBACE,MAAM,gBACP,IAAI,CAAC,uBAAuB,YAExC,KAAC,KAAK,cACJ,IAAI,CAAC,oBAAoB,GACnB,GACF,GACH,IAED,GACA,EAEJ,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,IACrC,CACH,CAAC;AACH,CAAC","sourcesContent":["import type Breadcrumbs from \"./Breadcrumbs.js\";\nimport BreadcrumbsPopoverTemplate from \"./BreadcrumbsPopoverTemplate.js\";\nimport slimArrowDown from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport Icon from \"./Icon.js\";\nimport Link from \"./Link.js\";\nimport Label from \"./Label.js\";\n\nexport default function BreadcrumbsTemplate(this: Breadcrumbs) {\n\treturn (\n\t\t<>\n\t\t\t<nav class=\"ui5-breadcrumbs-root\" aria-label={this._accessibleNameText}>\n\t\t\t\t<ol\n\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\tonKeyUp={this._onkeyup}>\n\n\t\t\t\t\t<li class=\"ui5-breadcrumbs-dropdown-arrow-link-wrapper\" hidden={this._isOverflowEmpty}>\n\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\twrappingType=\"None\"\n\t\t\t\t\t\t\taccessibleRole=\"Button\"\n\t\t\t\t\t\t\taccessibleName={this._dropdownArrowAccessibleNameText}\n\t\t\t\t\t\t\taccessibilityAttributes={this.linkAccessibilityAttributes}\n\t\t\t\t\t\t\tonClick={this._openRespPopover}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon name={slimArrowDown} title={this._dropdownArrowAccessibleNameText}/>\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t</li>\n\n\t\t\t\t\t{this._linksData.map(linkData =>\n\t\t\t\t\t\t<li id={`${linkData._id}-link-wrapper`} class=\"ui5-breadcrumbs-link-wrapper\">\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\tid={`${linkData._id}-link`}\n\t\t\t\t\t\t\t\thref={linkData.href}\n\t\t\t\t\t\t\t\ttarget={linkData.target}\n\t\t\t\t\t\t\t\tdesign={linkData._linkDesign}\n\t\t\t\t\t\t\t\taccessibleName={linkData._accessibleNameText}\n\t\t\t\t\t\t\t\taccessibilityAttributes={linkData.accessibilityAttributes}\n\t\t\t\t\t\t\t\tdata-ui5-stable={linkData.stableDomRef}\n\t\t\t\t\t\t\t\twrappingType=\"None\"\n\t\t\t\t\t\t\t\tonClick={this._onLinkPress}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{linkData.innerText}\n\t\t\t\t\t\t\t</Link>\n\n\t\t\t\t\t\t\t{linkData._needsSeparator &&\n\t\t\t\t\t\t\t<span class=\"ui5-breadcrumbs-separator\" aria-hidden=\"true\"></span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!this._endsWithCurrentLinkItem && this._endsWithCurrentLocation &&\n\t\t\t\t\t<li class=\"ui5-breadcrumbs-current-location\" onClick={this._onLabelPress}>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tid={`${this._id}-labelWrapper`}\n\t\t\t\t\t\t\trole=\"link\"\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\taria-label={this._currentLocationAccName}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Label>\n\t\t\t\t\t\t\t\t{this._currentLocationText}\n\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ol>\n\t\t\t</nav>\n\n\t\t\t{ BreadcrumbsPopoverTemplate.call(this) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"file":"BreadcrumbsTemplate.js","sourceRoot":"","sources":["../src/BreadcrumbsTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AACzE,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,8BACC,cAAK,KAAK,EAAC,sBAAsB,gBAAa,IAAI,CAAC,mBAAmB,YACrE,cACC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,aAEtB,aAAI,KAAK,EAAC,6CAA6C,EAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,YACpF,KAAC,IAAI,IACJ,YAAY,EAAC,MAAM,EACnB,cAAc,EAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,gCAAgC,EACrD,uBAAuB,EAAE,IAAI,CAAC,2BAA2B,EACzD,OAAO,EAAE,IAAI,CAAC,gBAAgB,YAE9B,KAAC,IAAI,IAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,gCAAgC,GAAG,GACpE,GACH,EAEJ,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAC/B,cAAI,EAAE,EAAE,GAAG,QAAQ,CAAC,GAAG,eAAe,EAAE,KAAK,EAAC,8BAA8B,aAC3E,KAAC,IAAI,IACJ,EAAE,EAAE,GAAG,QAAQ,CAAC,GAAG,OAAO,EAC1B,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,MAAM,EAAE,QAAQ,CAAC,WAAW,EAC5B,cAAc,EAAE,QAAQ,CAAC,mBAAmB,EAC5C,uBAAuB,EAAE,QAAQ,CAAC,uBAAuB,qBACxC,QAAQ,CAAC,YAAY,EACtC,YAAY,EAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,YAAY,YAEzB,QAAQ,CAAC,SAAS,GACb,EAEN,QAAQ,CAAC,eAAe;oCACzB,eAAM,KAAK,EAAC,2BAA2B,iBAAa,MAAM,GAAQ,IAE9D,CACL,EAEA,CAAC,IAAI,CAAC,wBAAwB,IAAI,IAAI,CAAC,wBAAwB;4BAChE,aAAI,KAAK,EAAC,kCAAkC,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,YACvE,eACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,eAAe,EAC9B,IAAI,EAAC,MAAM,kBACE,MAAM,gBACP,IAAI,CAAC,uBAAuB,YAExC,KAAC,KAAK,IAAC,YAAY,EAAC,MAAM,YACxB,IAAI,CAAC,oBAAoB,GACnB,GACF,GACH,IAED,GACA,EAEJ,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,IACrC,CACH,CAAC;AACH,CAAC","sourcesContent":["import type Breadcrumbs from \"./Breadcrumbs.js\";\nimport BreadcrumbsPopoverTemplate from \"./BreadcrumbsPopoverTemplate.js\";\nimport slimArrowDown from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport Icon from \"./Icon.js\";\nimport Link from \"./Link.js\";\nimport Label from \"./Label.js\";\n\nexport default function BreadcrumbsTemplate(this: Breadcrumbs) {\n\treturn (\n\t\t<>\n\t\t\t<nav class=\"ui5-breadcrumbs-root\" aria-label={this._accessibleNameText}>\n\t\t\t\t<ol\n\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\tonKeyUp={this._onkeyup}>\n\n\t\t\t\t\t<li class=\"ui5-breadcrumbs-dropdown-arrow-link-wrapper\" hidden={this._isOverflowEmpty}>\n\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\twrappingType=\"None\"\n\t\t\t\t\t\t\taccessibleRole=\"Button\"\n\t\t\t\t\t\t\taccessibleName={this._dropdownArrowAccessibleNameText}\n\t\t\t\t\t\t\taccessibilityAttributes={this.linkAccessibilityAttributes}\n\t\t\t\t\t\t\tonClick={this._openRespPopover}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon name={slimArrowDown} title={this._dropdownArrowAccessibleNameText}/>\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t</li>\n\n\t\t\t\t\t{this._linksData.map(linkData =>\n\t\t\t\t\t\t<li id={`${linkData._id}-link-wrapper`} class=\"ui5-breadcrumbs-link-wrapper\">\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\tid={`${linkData._id}-link`}\n\t\t\t\t\t\t\t\thref={linkData.href}\n\t\t\t\t\t\t\t\ttarget={linkData.target}\n\t\t\t\t\t\t\t\tdesign={linkData._linkDesign}\n\t\t\t\t\t\t\t\taccessibleName={linkData._accessibleNameText}\n\t\t\t\t\t\t\t\taccessibilityAttributes={linkData.accessibilityAttributes}\n\t\t\t\t\t\t\t\tdata-ui5-stable={linkData.stableDomRef}\n\t\t\t\t\t\t\t\twrappingType=\"None\"\n\t\t\t\t\t\t\t\tonClick={this._onLinkPress}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{linkData.innerText}\n\t\t\t\t\t\t\t</Link>\n\n\t\t\t\t\t\t\t{linkData._needsSeparator &&\n\t\t\t\t\t\t\t<span class=\"ui5-breadcrumbs-separator\" aria-hidden=\"true\"></span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!this._endsWithCurrentLinkItem && this._endsWithCurrentLocation &&\n\t\t\t\t\t<li class=\"ui5-breadcrumbs-current-location\" onClick={this._onLabelPress}>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tid={`${this._id}-labelWrapper`}\n\t\t\t\t\t\t\trole=\"link\"\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\taria-label={this._currentLocationAccName}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Label wrappingType=\"None\">\n\t\t\t\t\t\t\t\t{this._currentLocationText}\n\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ol>\n\t\t\t</nav>\n\n\t\t\t{ BreadcrumbsPopoverTemplate.call(this) }\n\t\t</>\n\t);\n}\n"]}

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);