@ui5/webcomponents 2.25.0-rc.0 → 2.25.0-rc.3

package/dist/ToolbarItem.js

@@ -8,9 +8,13 @@ var ToolbarItem_1;
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import { instanceOfUI5Element } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isLeft, isRight, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
 import ToolbarItemTemplate from "./ToolbarItemTemplate.js";
 import ToolbarItemCss from "./generated/themes/ToolbarItem.css.js";
 import ToolbarItemBase from "./ToolbarItemBase.js";
+import { isToolbarArrowNavProvider } from "./IToolbarArrowNavProvider.js";
 /**
  * @class
  *
@@ -41,6 +45,7 @@ let ToolbarItem = ToolbarItem_1 = class ToolbarItem extends ToolbarItemBase {
         this._maxWidth = 0;
         this._wrapperChecked = false;
         this.fireCloseOverflowRef = this.fireCloseOverflow.bind(this);
+        this._onMultiChildKeydownRef = this._onMultiChildKeydown.bind(this);
         this.closeOverflowSet = {
             "ui5-button": ["click"],
             "ui5-select": ["change"],
@@ -57,9 +62,16 @@ let ToolbarItem = ToolbarItem_1 = class ToolbarItem extends ToolbarItemBase {
     onBeforeRendering() {
         this.checkForWrapper();
         this.attachCloseOverflowHandlers();
+        if (this.item.length > 1) {
+            this.addEventListener("keydown", this._onMultiChildKeydownRef, true);
+        }
+        else {
+            this.removeEventListener("keydown", this._onMultiChildKeydownRef, true);
+        }
     }
     onExitDOM() {
         this.detachCloseOverflowHandlers();
+        this.removeEventListener("keydown", this._onMultiChildKeydownRef, true);
     }
     // Method called by ui5-toolbar to inform about the existing toolbar wrapper
     checkForWrapper() {
@@ -107,9 +119,199 @@ let ToolbarItem = ToolbarItem_1 = class ToolbarItem extends ToolbarItemBase {
         const ctor = this.getSlottedNodes("item")[0]?.constructor;
         return ctor?.getMetadata ? ctor.getMetadata().getPureTag() : this.getSlottedNodes("item")[0]?.tagName;
     }
+    get isInteractive() {
+        return this._getNavigationTargets().some(target => this._isFocusable(target));
+    }
+    _isFocusable(el) {
+        const target = this._resolveFocusableTarget(el);
+        // A disabled control reports tabIndex 0 but isn't focusable.
+        if ("disabled" in target && !!target.disabled) {
+            return false;
+        }
+        // A bare <a> with no href reports tabIndex 0 but isn't focusable, UNLESS it
+        // opts in via an explicit tabindex attribute (e.g. ui5-link rendered as a
+        // button - <a role="button" tabindex="0"> with no href, used by the
+        // Breadcrumbs overflow arrow).
+        if (target.matches("a:not([href]):not([tabindex])")) {
+            return false;
+        }
+        // tabIndex >= 0 covers focusable-by-default elements and explicit tabindex;
+        // static content (div, span, ui5-text's focus ref) reports -1.
+        return target.tabIndex >= 0;
+    }
+    _resolveFocusableTarget(el) {
+        // Drill through UI5 hosts that delegate focus (date-picker ->
+        // datetime-input -> native input); each host reports tabIndex -1.
+        let current = el;
+        const seen = new Set();
+        while (instanceOfUI5Element(current) && !seen.has(current)) {
+            seen.add(current);
+            const next = current.getFocusDomRef();
+            if (!next || next === current) {
+                break;
+            }
+            current = next;
+        }
+        return current;
+    }
     get hasOverflow() {
         return this.item[0]?.hasOverflow ?? false;
     }
+    getFocusDomRef() {
+        const child = this.item[0];
+        if (child) {
+            return this._resolveChildFocusTarget(child);
+        }
+        return super.getFocusDomRef();
+    }
+    /**
+     * Resolves the element that should receive focus for a slotted child:
+     * the child's own focus DOM ref when it is a UI5 component, otherwise the
+     * first tabbable descendant, falling back to the child itself.
+     */
+    _resolveChildFocusTarget(child) {
+        const withFocusRef = child;
+        if (typeof withFocusRef.getFocusDomRef === "function") {
+            return withFocusRef.getFocusDomRef() || child;
+        }
+        return this._getFirstTabbableDescendant(child) || child;
+    }
+    _getFirstTabbableDescendant(root) {
+        return root.querySelector("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])");
+    }
+    getFocusDomRefForNavigation(forward) {
+        const targets = this._getNavigationTargets();
+        if (!targets.length) {
+            return this.getFocusDomRef();
+        }
+        return forward ? targets[0] : targets[targets.length - 1];
+    }
+    _handleNavigationTarget(target) {
+        const hostTarget = this._resolveNavigationHost(target);
+        if (this._isRadioButtonHost(hostTarget)) {
+            const radio = hostTarget;
+            hostTarget.focus();
+            if (!radio.disabled && !radio.readonly && !radio.checked) {
+                radio.click();
+            }
+            return;
+        }
+        hostTarget.focus();
+    }
+    _resolveNavigationHost(target) {
+        if (this._isUI5Host(target)) {
+            return target;
+        }
+        const root = target.getRootNode();
+        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+            return root.host;
+        }
+        return target;
+    }
+    _isUI5Host(target) {
+        const ctor = target.constructor;
+        return typeof ctor.getMetadata === "function";
+    }
+    _isRadioButtonHost(target) {
+        return target.hasAttribute("ui5-radio-button");
+    }
+    _matchesNavigationTarget(target, candidate) {
+        if (target === candidate || target.contains(candidate) || !!target.shadowRoot?.contains(candidate)) {
+            return true;
+        }
+        const host = this._resolveNavigationHost(candidate);
+        return target === host || target.contains(host) || !!target.shadowRoot?.contains(host);
+    }
+    _getNavigationTargets() {
+        return this.item
+            .filter(child => !("disabled" in child && !!child.disabled))
+            .map(child => this._resolveChildFocusTarget(child));
+    }
+    _getCurrentNavigationState() {
+        const items = this._getNavigationTargets();
+        const active = getActiveElement();
+        const current = active
+            ? items.find(item => this._matchesNavigationTarget(item, active))
+            : undefined;
+        const currentIndex = current ? items.indexOf(current) : -1;
+        return {
+            items,
+            current,
+            currentIndex,
+        };
+    }
+    _onMultiChildKeydown(e) {
+        const isForward = this.effectiveDir === "rtl" ? isLeft(e) : isRight(e);
+        const isBackward = this.effectiveDir === "rtl" ? isRight(e) : isLeft(e);
+        const isHomeKey = isHome(e);
+        const isEndKey = isEnd(e);
+        if (!isForward && !isBackward && !isHomeKey && !isEndKey) {
+            return;
+        }
+        const { items, currentIndex } = this._getCurrentNavigationState();
+        if (currentIndex === -1) {
+            return;
+        }
+        // Home/End jump to the first/last child within the group.
+        let nextIndex;
+        if (isHomeKey) {
+            nextIndex = 0;
+        }
+        else if (isEndKey) {
+            nextIndex = items.length - 1;
+        }
+        else {
+            nextIndex = isForward ? currentIndex + 1 : currentIndex - 1;
+        }
+        if (nextIndex === currentIndex || nextIndex < 0 || nextIndex >= items.length) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        this._handleNavigationTarget(items[nextIndex]);
+    }
+    getArrowNavState() {
+        const child = this.item[0];
+        if (!child) {
+            return undefined;
+        }
+        // Priority 1: ItemNavigation-based components (e.g. Breadcrumbs, SegmentedButton)
+        const itemNavOwner = child;
+        if (typeof itemNavOwner._itemNavigation?._getCurrentItem === "function"
+            && typeof itemNavOwner._getFocusableItems === "function") {
+            const items = itemNavOwner._getFocusableItems();
+            const current = itemNavOwner._itemNavigation._getCurrentItem();
+            const currentIndex = current
+                ? items.findIndex(item => (item.getFocusDomRef ? item.getFocusDomRef() : item) === current)
+                : -1;
+            if (currentIndex !== -1) {
+                return {
+                    atLeftEnd: currentIndex === 0,
+                    atRightEnd: currentIndex === items.length - 1,
+                };
+            }
+        }
+        // Priority 2: IToolbarArrowNavProvider interface (e.g. Input)
+        if (isToolbarArrowNavProvider(child)) {
+            return child.getArrowNavState();
+        }
+        // Priority 3: proprietary multi-child fallback (e.g. bare checkbox group)
+        if (this.item.length <= 1) {
+            return undefined;
+        }
+        const { items, currentIndex } = this._getCurrentNavigationState();
+        if (currentIndex === -1) {
+            return undefined;
+        }
+        return {
+            atLeftEnd: currentIndex === 0,
+            atRightEnd: currentIndex === items.length - 1,
+        };
+    }
+    focusForToolbarNavigation(isForward) {
+        const target = this.getFocusDomRefForNavigation(isForward);
+        target?.focus();
+    }
 };
 __decorate([
     slot({

package/dist/ToolbarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarItem.js","sourceRoot":"","sources":["../src/ToolbarItem.ts"],"names":[],"mappings":"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","sourcesContent":["import slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport ToolbarItemTemplate from \"./ToolbarItemTemplate.js\";\nimport ToolbarItemCss from \"./generated/themes/ToolbarItem.css.js\";\nimport ToolbarItemBase from \"./ToolbarItemBase.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base\";\n\n/**\n * Interface for the slotted item in `ui5-toolbar-item`.\n *\n * It could be any HTMLElement or UI5 Web Component with option to specify custom overflow closing events and overflow behavior.\n *\n * @public\n * @since 2.20.0\n */\ninterface IToolbarItemContent extends HTMLElement {\n\toverflowCloseEvents?: string[];\n\thasOverflow?: boolean;\n}\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-item` is a wrapper component used to integrate UI5 Web Components into the `ui5-toolbar`.\n * It renders within the toolbar's shadow DOM and manages the lifecycle\n * and overflow behavior of its child component.\n *\n * ### Structure\n * The toolbar item wraps a single UI5 Web Component (such as CheckBox, Title, etc.) and handles:\n * - Overflow management (determining if the item should be displayed in the main toolbar or overflow popover)\n * - Automatic popover closing on interaction\n * - CSS custom state exposure for styling based on overflow state\n *\n * ### Usage\n * The `ui5-toolbar-item` is typically used implicitly when adding components to a toolbar,\n * but specialized wrappers like `ui5-toolbar-button` provide\n * component-specific functionality and should be preferred when available.\n *\n * @constructor\n * @extends ToolbarItemBase\n * @public\n * @since 2.20.0\n */\n@customElement({\n\ttag: \"ui5-toolbar-item\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: ToolbarItemTemplate,\n\tstyles: ToolbarItemCss,\n})\nclass ToolbarItem extends ToolbarItemBase {\n\t_maxWidth = 0;\n\t_wrapperChecked = false;\n\tfireCloseOverflowRef = this.fireCloseOverflow.bind(this);\n\n\tcloseOverflowSet = {\n\t\t\"ui5-button\": [\"click\"],\n\t\t\"ui5-select\": [\"change\"],\n\t\t\"ui5-combobox\": [\"change\"],\n\t\t\"ui5-multi-combobox\": [\"selection-change\"],\n\t\t\"ui5-date-picker\": [\"change\"],\n\t\t\"ui5-switch\": [\"change\"],\n\t}\n\n\tpredefinedWrapperSet = {\n\t\t\"ui5-button\": \"ToolbarButton\",\n\t\t\"ui5-select\": \"ToolbarSelect\",\n\t}\n\n\tonBeforeRendering(): void {\n\t\tthis.checkForWrapper();\n\t\tthis.attachCloseOverflowHandlers();\n\t}\n\n\tonExitDOM(): void {\n\t\tthis.detachCloseOverflowHandlers();\n\t}\n\n\t/**\n\t * Wrapped component slot.\n\t * @public\n\t * @since 2.20.0\n\t */\n\n\t@slot({\n\t\t\"default\": true, type: HTMLElement, invalidateOnChildChange: true,\n\t})\n\titem!: DefaultSlot<IToolbarItemContent>;\n\n\t// Method called by ui5-toolbar to inform about the existing toolbar wrapper\n\tcheckForWrapper() {\n\t\tif (this._wrapperChecked) {\n\t\t\treturn;\n\t\t}\n\t\tthis._wrapperChecked = true;\n\n\t\tconst tagName = this.itemTagName as keyof typeof this.predefinedWrapperSet;\n\t\tconst ctor = this.constructor as typeof ToolbarItem;\n\t\tconst wrapperName = ctor?.getMetadata ? ctor.getMetadata().getPureTag() : this.tagName;\n\t\tif (wrapperName === \"ui5-toolbar-item\"\n\t\t\t&& this.predefinedWrapperSet[tagName]) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(`This UI5 web component has its predefined toolbar wrapper called ${this.predefinedWrapperSet[tagName]}.`);\n\t\t}\n\t}\n\n\t// We want to close the overflow popover, when closing event is being executed\n\tgetClosingEvents(): string[] {\n\t\tconst item = this.item[0];\n\n\t\tconst closeEvents = this.closeOverflowSet[this.itemTagName as keyof typeof this.closeOverflowSet] || [];\n\t\tif (!item) {\n\t\t\treturn [...closeEvents];\n\t\t}\n\t\tconst overflowCloseEvents = item.overflowCloseEvents ? item.overflowCloseEvents : [];\n\n\t\treturn [...closeEvents, ...overflowCloseEvents];\n\t}\n\n\tattachCloseOverflowHandlers() {\n\t\tconst closingEvents = this.getClosingEvents();\n\t\tclosingEvents.forEach(clEvent => {\n\t\t\tif (!this.preventOverflowClosing) {\n\t\t\t\tthis.addEventListener(clEvent, this.fireCloseOverflowRef);\n\t\t\t}\n\t\t});\n\t}\n\n\tdetachCloseOverflowHandlers() {\n\t\tconst closingEvents = this.getClosingEvents();\n\t\tclosingEvents.forEach(clEvent => {\n\t\t\tthis.removeEventListener(clEvent, this.fireCloseOverflowRef);\n\t\t});\n\t}\n\n\tfireCloseOverflow() {\n\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t}\n\n\tget itemTagName() {\n\t\tconst ctor = this.getSlottedNodes<IToolbarItemContent>(\"item\")[0]?.constructor as typeof ToolbarItem;\n\t\treturn ctor?.getMetadata ? ctor.getMetadata().getPureTag() : this.getSlottedNodes<IToolbarItemContent>(\"item\")[0]?.tagName;\n\t}\n\n\tget hasOverflow(): boolean {\n\t\treturn this.item[0]?.hasOverflow ?? false;\n\t}\n}\n\nexport type {\n\tIToolbarItemContent,\n};\nToolbarItem.define();\n\nexport default ToolbarItem;\n"]}
+{"version":3,"file":"ToolbarItem.js","sourceRoot":"","sources":["../src/ToolbarItem.ts"],"names":[],"mappings":"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","sourcesContent":["import slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport { instanceOfUI5Element } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport {\n\tisLeft,\n\tisRight,\n\tisHome,\n\tisEnd,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport ToolbarItemTemplate from \"./ToolbarItemTemplate.js\";\nimport ToolbarItemCss from \"./generated/themes/ToolbarItem.css.js\";\nimport ToolbarItemBase from \"./ToolbarItemBase.js\";\nimport type { ToolbarArrowNavState } from \"./IToolbarArrowNavProvider.js\";\nimport { isToolbarArrowNavProvider } from \"./IToolbarArrowNavProvider.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base\";\n\n/**\n * Interface for the slotted item in `ui5-toolbar-item`.\n *\n * It could be any HTMLElement or UI5 Web Component with option to specify custom overflow closing events and overflow behavior.\n * Components that also implement `IToolbarArrowNavProvider` can report their internal navigation boundary\n * state to the toolbar for caret-aware arrow-key handling.\n *\n * @public\n * @since 2.20.0\n */\ninterface IToolbarItemContent extends HTMLElement {\n\toverflowCloseEvents?: string[];\n\thasOverflow?: boolean;\n}\n\ninterface IItemNavigationOwner extends HTMLElement {\n\t_itemNavigation?: {\n\t\t_getCurrentItem: () => HTMLElement | undefined;\n\t};\n\t_getFocusableItems?: () => Array<{ getFocusDomRef?: () => HTMLElement }>;\n}\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-item` is a wrapper component used to integrate UI5 Web Components into the `ui5-toolbar`.\n * It renders within the toolbar's shadow DOM and manages the lifecycle\n * and overflow behavior of its child component.\n *\n * ### Structure\n * The toolbar item wraps a single UI5 Web Component (such as CheckBox, Title, etc.) and handles:\n * - Overflow management (determining if the item should be displayed in the main toolbar or overflow popover)\n * - Automatic popover closing on interaction\n * - CSS custom state exposure for styling based on overflow state\n *\n * ### Usage\n * The `ui5-toolbar-item` is typically used implicitly when adding components to a toolbar,\n * but specialized wrappers like `ui5-toolbar-button` provide\n * component-specific functionality and should be preferred when available.\n *\n * @constructor\n * @extends ToolbarItemBase\n * @public\n * @since 2.20.0\n */\n@customElement({\n\ttag: \"ui5-toolbar-item\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: ToolbarItemTemplate,\n\tstyles: ToolbarItemCss,\n})\nclass ToolbarItem extends ToolbarItemBase {\n\t_maxWidth = 0;\n\t_wrapperChecked = false;\n\tfireCloseOverflowRef = this.fireCloseOverflow.bind(this);\n\t_onMultiChildKeydownRef = this._onMultiChildKeydown.bind(this);\n\n\tcloseOverflowSet = {\n\t\t\"ui5-button\": [\"click\"],\n\t\t\"ui5-select\": [\"change\"],\n\t\t\"ui5-combobox\": [\"change\"],\n\t\t\"ui5-multi-combobox\": [\"selection-change\"],\n\t\t\"ui5-date-picker\": [\"change\"],\n\t\t\"ui5-switch\": [\"change\"],\n\t}\n\n\tpredefinedWrapperSet = {\n\t\t\"ui5-button\": \"ToolbarButton\",\n\t\t\"ui5-select\": \"ToolbarSelect\",\n\t}\n\n\tonBeforeRendering(): void {\n\t\tthis.checkForWrapper();\n\t\tthis.attachCloseOverflowHandlers();\n\t\tif (this.item.length > 1) {\n\t\t\tthis.addEventListener(\"keydown\", this._onMultiChildKeydownRef, true);\n\t\t} else {\n\t\t\tthis.removeEventListener(\"keydown\", this._onMultiChildKeydownRef, true);\n\t\t}\n\t}\n\n\tonExitDOM(): void {\n\t\tthis.detachCloseOverflowHandlers();\n\t\tthis.removeEventListener(\"keydown\", this._onMultiChildKeydownRef, true);\n\t}\n\n\t/**\n\t * Wrapped component slot.\n\t * @public\n\t * @since 2.20.0\n\t */\n\n\t@slot({\n\t\t\"default\": true, type: HTMLElement, invalidateOnChildChange: true,\n\t})\n\titem!: DefaultSlot<IToolbarItemContent>;\n\n\t// Method called by ui5-toolbar to inform about the existing toolbar wrapper\n\tcheckForWrapper() {\n\t\tif (this._wrapperChecked) {\n\t\t\treturn;\n\t\t}\n\t\tthis._wrapperChecked = true;\n\n\t\tconst tagName = this.itemTagName as keyof typeof this.predefinedWrapperSet;\n\t\tconst ctor = this.constructor as typeof ToolbarItem;\n\t\tconst wrapperName = ctor?.getMetadata ? ctor.getMetadata().getPureTag() : this.tagName;\n\t\tif (wrapperName === \"ui5-toolbar-item\"\n\t\t\t&& this.predefinedWrapperSet[tagName]) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(`This UI5 web component has its predefined toolbar wrapper called ${this.predefinedWrapperSet[tagName]}.`);\n\t\t}\n\t}\n\n\t// We want to close the overflow popover, when closing event is being executed\n\tgetClosingEvents(): string[] {\n\t\tconst item = this.item[0];\n\n\t\tconst closeEvents = this.closeOverflowSet[this.itemTagName as keyof typeof this.closeOverflowSet] || [];\n\t\tif (!item) {\n\t\t\treturn [...closeEvents];\n\t\t}\n\t\tconst overflowCloseEvents = item.overflowCloseEvents ? item.overflowCloseEvents : [];\n\n\t\treturn [...closeEvents, ...overflowCloseEvents];\n\t}\n\n\tattachCloseOverflowHandlers() {\n\t\tconst closingEvents = this.getClosingEvents();\n\t\tclosingEvents.forEach(clEvent => {\n\t\t\tif (!this.preventOverflowClosing) {\n\t\t\t\tthis.addEventListener(clEvent, this.fireCloseOverflowRef);\n\t\t\t}\n\t\t});\n\t}\n\n\tdetachCloseOverflowHandlers() {\n\t\tconst closingEvents = this.getClosingEvents();\n\t\tclosingEvents.forEach(clEvent => {\n\t\t\tthis.removeEventListener(clEvent, this.fireCloseOverflowRef);\n\t\t});\n\t}\n\n\tfireCloseOverflow() {\n\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t}\n\n\tget itemTagName() {\n\t\tconst ctor = this.getSlottedNodes<IToolbarItemContent>(\"item\")[0]?.constructor as typeof ToolbarItem;\n\t\treturn ctor?.getMetadata ? ctor.getMetadata().getPureTag() : this.getSlottedNodes<IToolbarItemContent>(\"item\")[0]?.tagName;\n\t}\n\n\tget isInteractive(): boolean {\n\t\treturn this._getNavigationTargets().some(target => this._isFocusable(target));\n\t}\n\n\t_isFocusable(el: HTMLElement): boolean {\n\t\tconst target = this._resolveFocusableTarget(el);\n\t\t// A disabled control reports tabIndex 0 but isn't focusable.\n\t\tif (\"disabled\" in target && !!(target as { disabled?: boolean }).disabled) {\n\t\t\treturn false;\n\t\t}\n\t\t// A bare <a> with no href reports tabIndex 0 but isn't focusable, UNLESS it\n\t\t// opts in via an explicit tabindex attribute (e.g. ui5-link rendered as a\n\t\t// button - <a role=\"button\" tabindex=\"0\"> with no href, used by the\n\t\t// Breadcrumbs overflow arrow).\n\t\tif (target.matches(\"a:not([href]):not([tabindex])\")) {\n\t\t\treturn false;\n\t\t}\n\t\t// tabIndex >= 0 covers focusable-by-default elements and explicit tabindex;\n\t\t// static content (div, span, ui5-text's focus ref) reports -1.\n\t\treturn target.tabIndex >= 0;\n\t}\n\n\t_resolveFocusableTarget(el: HTMLElement): HTMLElement {\n\t\t// Drill through UI5 hosts that delegate focus (date-picker ->\n\t\t// datetime-input -> native input); each host reports tabIndex -1.\n\t\tlet current: HTMLElement = el;\n\t\tconst seen = new Set<HTMLElement>();\n\t\twhile (instanceOfUI5Element(current) && !seen.has(current)) {\n\t\t\tseen.add(current);\n\t\t\tconst next = current.getFocusDomRef();\n\t\t\tif (!next || next === current) {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcurrent = next;\n\t\t}\n\t\treturn current;\n\t}\n\n\tget hasOverflow(): boolean {\n\t\treturn this.item[0]?.hasOverflow ?? false;\n\t}\n\n\tgetFocusDomRef(): HTMLElement | undefined {\n\t\tconst child = this.item[0];\n\t\tif (child) {\n\t\t\treturn this._resolveChildFocusTarget(child);\n\t\t}\n\n\t\treturn super.getFocusDomRef();\n\t}\n\n\t/**\n\t * Resolves the element that should receive focus for a slotted child:\n\t * the child's own focus DOM ref when it is a UI5 component, otherwise the\n\t * first tabbable descendant, falling back to the child itself.\n\t */\n\t_resolveChildFocusTarget(child: HTMLElement): HTMLElement {\n\t\tconst withFocusRef = child as HTMLElement & { getFocusDomRef?: () => HTMLElement };\n\t\tif (typeof withFocusRef.getFocusDomRef === \"function\") {\n\t\t\treturn withFocusRef.getFocusDomRef() || child;\n\t\t}\n\n\t\treturn this._getFirstTabbableDescendant(child) || child;\n\t}\n\n\t_getFirstTabbableDescendant(root: HTMLElement): HTMLElement | null {\n\t\treturn root.querySelector<HTMLElement>(\"a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])\");\n\t}\n\n\tgetFocusDomRefForNavigation(forward: boolean): HTMLElement | undefined {\n\t\tconst targets = this._getNavigationTargets();\n\t\tif (!targets.length) {\n\t\t\treturn this.getFocusDomRef();\n\t\t}\n\n\t\treturn forward ? targets[0] : targets[targets.length - 1];\n\t}\n\n\t_handleNavigationTarget(target: HTMLElement) {\n\t\tconst hostTarget = this._resolveNavigationHost(target);\n\n\t\tif (this._isRadioButtonHost(hostTarget)) {\n\t\t\tconst radio = hostTarget as HTMLElement & {\n\t\t\t\tdisabled?: boolean;\n\t\t\t\treadonly?: boolean;\n\t\t\t\tchecked?: boolean;\n\t\t\t\tclick: () => void;\n\t\t\t};\n\n\t\t\thostTarget.focus();\n\n\t\t\tif (!radio.disabled && !radio.readonly && !radio.checked) {\n\t\t\t\tradio.click();\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\thostTarget.focus();\n\t}\n\n\t_resolveNavigationHost(target: HTMLElement): HTMLElement {\n\t\tif (this._isUI5Host(target)) {\n\t\t\treturn target;\n\t\t}\n\n\t\tconst root = target.getRootNode();\n\t\tif (root instanceof ShadowRoot && root.host instanceof HTMLElement) {\n\t\t\treturn root.host;\n\t\t}\n\n\t\treturn target;\n\t}\n\n\t_isUI5Host(target: HTMLElement): boolean {\n\t\tconst ctor = target.constructor as { getMetadata?: () => unknown };\n\t\treturn typeof ctor.getMetadata === \"function\";\n\t}\n\n\t_isRadioButtonHost(target: HTMLElement): boolean {\n\t\treturn target.hasAttribute(\"ui5-radio-button\");\n\t}\n\n\t_matchesNavigationTarget(target: HTMLElement, candidate: HTMLElement): boolean {\n\t\tif (target === candidate || target.contains(candidate) || !!target.shadowRoot?.contains(candidate)) {\n\t\t\treturn true;\n\t\t}\n\n\t\tconst host = this._resolveNavigationHost(candidate);\n\t\treturn target === host || target.contains(host) || !!target.shadowRoot?.contains(host);\n\t}\n\n\t_getNavigationTargets(): HTMLElement[] {\n\t\treturn this.item\n\t\t\t.filter(child => !(\"disabled\" in child && !!(child as { disabled?: boolean }).disabled))\n\t\t\t.map(child => this._resolveChildFocusTarget(child));\n\t}\n\n\t_getCurrentNavigationState() {\n\t\tconst items = this._getNavigationTargets();\n\t\tconst active = getActiveElement() as HTMLElement | null;\n\t\tconst current = active\n\t\t\t? items.find(item => this._matchesNavigationTarget(item, active))\n\t\t\t: undefined;\n\t\tconst currentIndex = current ? items.indexOf(current) : -1;\n\n\t\treturn {\n\t\t\titems,\n\t\t\tcurrent,\n\t\t\tcurrentIndex,\n\t\t};\n\t}\n\n\t_onMultiChildKeydown(e: KeyboardEvent) {\n\t\tconst isForward = this.effectiveDir === \"rtl\" ? isLeft(e) : isRight(e);\n\t\tconst isBackward = this.effectiveDir === \"rtl\" ? isRight(e) : isLeft(e);\n\t\tconst isHomeKey = isHome(e);\n\t\tconst isEndKey = isEnd(e);\n\t\tif (!isForward && !isBackward && !isHomeKey && !isEndKey) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { items, currentIndex } = this._getCurrentNavigationState();\n\t\tif (currentIndex === -1) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Home/End jump to the first/last child within the group.\n\t\tlet nextIndex: number;\n\t\tif (isHomeKey) {\n\t\t\tnextIndex = 0;\n\t\t} else if (isEndKey) {\n\t\t\tnextIndex = items.length - 1;\n\t\t} else {\n\t\t\tnextIndex = isForward ? currentIndex + 1 : currentIndex - 1;\n\t\t}\n\n\t\tif (nextIndex === currentIndex || nextIndex < 0 || nextIndex >= items.length) {\n\t\t\treturn;\n\t\t}\n\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tthis._handleNavigationTarget(items[nextIndex]);\n\t}\n\n\tgetArrowNavState(): ToolbarArrowNavState | undefined {\n\t\tconst child = this.item[0] as IToolbarItemContent | undefined;\n\t\tif (!child) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\t// Priority 1: ItemNavigation-based components (e.g. Breadcrumbs, SegmentedButton)\n\t\tconst itemNavOwner = child as IItemNavigationOwner;\n\t\tif (typeof itemNavOwner._itemNavigation?._getCurrentItem === \"function\"\n\t\t\t&& typeof itemNavOwner._getFocusableItems === \"function\") {\n\t\t\tconst items = itemNavOwner._getFocusableItems();\n\t\t\tconst current = itemNavOwner._itemNavigation._getCurrentItem();\n\t\t\tconst currentIndex = current\n\t\t\t\t? items.findIndex(item => (item.getFocusDomRef ? item.getFocusDomRef() : item) === current)\n\t\t\t\t: -1;\n\t\t\tif (currentIndex !== -1) {\n\t\t\t\treturn {\n\t\t\t\t\tatLeftEnd: currentIndex === 0,\n\t\t\t\t\tatRightEnd: currentIndex === items.length - 1,\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\n\t\t// Priority 2: IToolbarArrowNavProvider interface (e.g. Input)\n\t\tif (isToolbarArrowNavProvider(child)) {\n\t\t\treturn child.getArrowNavState();\n\t\t}\n\n\t\t// Priority 3: proprietary multi-child fallback (e.g. bare checkbox group)\n\t\tif (this.item.length <= 1) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst { items, currentIndex } = this._getCurrentNavigationState();\n\t\tif (currentIndex === -1) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn {\n\t\t\tatLeftEnd: currentIndex === 0,\n\t\t\tatRightEnd: currentIndex === items.length - 1,\n\t\t};\n\t}\n\n\tfocusForToolbarNavigation(isForward: boolean) {\n\t\tconst target = this.getFocusDomRefForNavigation(isForward);\n\t\ttarget?.focus();\n\t}\n}\n\nexport type {\n\tIToolbarItemContent,\n};\nToolbarItem.define();\n\nexport default ToolbarItem;\n"]}

package/dist/ToolbarItemBase.d.ts

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
+import type { ToolbarArrowNavState } from "./IToolbarArrowNavProvider.js";
 type ToolbarItemEventDetail = {
     targetRef: HTMLElement;
 };
@@ -21,6 +22,14 @@ declare class ToolbarItemBase extends UI5Element {
      * @public
      */
     preventOverflowClosing: boolean;
+    _getNavigationTargets(): HTMLElement[];
+    /**
+     * Focus entry point when toolbar navigates into this item.
+     * Override in complex items (e.g., Breadcrumbs) to handle direction-aware entry.
+     * @private
+     */
+    focusForToolbarNavigation(isForward: boolean): void;
+    getArrowNavState(): ToolbarArrowNavState | undefined;
     _isOverflowed: boolean;
     get isOverflowed(): boolean;
     /**
@@ -51,6 +60,7 @@ declare class ToolbarItemBase extends UI5Element {
      * @protected
      */
     get isInteractive(): boolean;
+    get isToolbarNavigatable(): boolean;
     get hasOverflow(): boolean;
     /**
      * Returns if the item is separator.

package/dist/ToolbarItemBase.js

@@ -43,6 +43,22 @@ class ToolbarItemBase extends UI5Element {
         this._maxWidth = 0;
         this._isRendering = true;
     }
+    _getNavigationTargets() {
+        const ref = this.getFocusDomRef();
+        return ref ? [ref] : [];
+    }
+    /**
+     * Focus entry point when toolbar navigates into this item.
+     * Override in complex items (e.g., Breadcrumbs) to handle direction-aware entry.
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    focusForToolbarNavigation(isForward) {
+        this.getFocusDomRef()?.focus();
+    }
+    getArrowNavState() {
+        return undefined;
+    }
     get isOverflowed() {
         return this._isOverflowed;
     }
@@ -88,6 +104,9 @@ class ToolbarItemBase extends UI5Element {
     get isInteractive() {
         return true;
     }
+    get isToolbarNavigatable() {
+        return this.isInteractive && !this.hidden && !("disabled" in this && !!this.disabled);
+    }
     get hasOverflow() {
         return false;
     }

package/dist/ToolbarItemBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarItemBase.js","sourceRoot":"","sources":["../src/ToolbarItemBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAyB5E,IAAM,eAAe;AAdrB;;;;;;;;;;;;;GAaG;AACH,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAKC;;;;;UAKE;QAEF,qBAAgB,GAAqC,SAAS,CAAC;QAE/D;;;;;WAKG;QAEH,2BAAsB,GAAG,KAAK,CAAC;QAE/B,kBAAa,GAAY,KAAK,CAAC;QAuB/B,cAAS,GAAG,CAAC,CAAC;QACd,iBAAY,GAAG,IAAI,CAAC;IAuErB,CAAC;IA7FA,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,aAAa,CAAC;IAC3B,CAAC;IAED;;;;;OAKG;IAEH,IAAI,YAAY,CAAC,KAAc;QAC9B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAE3B,IAAI,KAAK,EAAE,CAAC;YACX,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAC7C,CAAC;IACF,CAAC;IAKD,gBAAgB;QACf,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC3B,CAAC;IACD;;;MAGE;IACF,IAAI,WAAW;QACd,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;;OAIG;IACH,IAAI,gBAAgB;QACnB,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;;;OAKG;IACH,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,WAAW;QACd,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;OAGG;IACH,IAAI,WAAW;QACd,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;;;OAKG;IAEH,IAAI,QAAQ;QACX,OAAO,KAAK,CAAC;IACd,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;IAED,IAAI,OAAO;QACV,OAAO;YACN,IAAI,EAAE;gBACL,qBAAqB,EAAE,IAAI,CAAC,YAAY;gBACxC,aAAa,EAAE,IAAI;aACnB;SACD,CAAC;IACH,CAAC;IAED,IAAI,MAAM;QACT,OAAO,EAAE,CAAC;IACX,CAAC;CACD,CAAA;AA1GA;IADC,QAAQ,EAAE;yDACoD;AAS/D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+DACG;AAe/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAS3B;AA5CI,eAAe;IAjBpB,KAAK,CAAC,gBAAgB,EAAE;QACxB,OAAO,EAAE,IAAI;KACb,CAAC;IACF;;;;;;;;;;;;;OAaG;GACG,eAAe,CAsHpB;AAKD,eAAe,eAAe,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\n\nimport type ToolbarItemOverflowBehavior from \"./types/ToolbarItemOverflowBehavior.js\";\n\ntype ToolbarItemEventDetail = {\n\ttargetRef: HTMLElement;\n}\n\n@event(\"close-overflow\", {\n\tbubbles: true,\n})\n/**\n * @class\n * Represents an abstract base class for items used in the `ui5-toolbar`.\n *\n *\n * @cssState overflowed - When the item is displayed in the overflow popover.\n * Use this state to apply different styles when the item is overflowed.\n * Available since 2.20.0.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @public\n * @since 1.17.0\n */\nclass ToolbarItemBase extends UI5Element {\n\teventDetails!: {\n\t\t\"close-overflow\": void;\n\t}\n\n\t/**\n\t* Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\n\t* the item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.\n\t* @public\n\t* @default \"Default\"\n\t*/\n\t@property()\n\toverflowPriority: `${ToolbarItemOverflowBehavior}` = \"Default\";\n\n\t/**\n\t * Defines if the toolbar overflow popup should close upon interaction with the item.\n\t * It will close by default.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tpreventOverflowClosing = false;\n\n\t_isOverflowed: boolean = false;\n\n\tget isOverflowed(): boolean {\n\t\treturn this._isOverflowed;\n\t}\n\n\t/**\n\t * Defines if the toolbar item is overflowed.\n\t * @default false\n\t * @protected\n\t * @since 2.11.0\n\t */\n\t@property({ type: Boolean })\n\tset isOverflowed(value: boolean) {\n\t\tthis._isOverflowed = value;\n\n\t\tif (value) {\n\t\t\tthis._internals.states.add(\"overflowed\");\n\t\t} else {\n\t\t\tthis._internals.states.delete(\"overflowed\");\n\t\t}\n\t}\n\n\t_maxWidth = 0;\n\t_isRendering = true;\n\n\tonAfterRendering(): void {\n\t\tthis._isRendering = false;\n\t}\n\t/**\n\t* Defines if the width of the item should be ignored in calculating the whole width of the toolbar\n\t* @protected\n\t*/\n\tget ignoreSpace(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is flexible. An item that is returning true for this property will make\n\t * the toolbar expand to fill the 100% width of its container.\n\t * @protected\n\t */\n\tget hasFlexibleWidth(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is interactive.\n\t * This value is used to determinate if the toolbar should have its accessibility role and attributes set.\n\t * At least two interactive items are needed for the toolbar to have the role=\"toolbar\" attribute set.\n\t * @protected\n\t */\n\tget isInteractive(): boolean {\n\t\treturn true;\n\t}\n\n\tget hasOverflow(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is separator.\n\t * @protected\n\t */\n\tget isSeparator() {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is a spacer.\n\t * A spacer item is an item that takes space in the toolbar, but does not render any content.\n\t * @protected\n\t * @since 2.21.0\n\t */\n\n\tget isSpacer() {\n\t\treturn false;\n\t}\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-tb-popover-item\": this.isOverflowed,\n\t\t\t\t\"ui5-tb-item\": true,\n\t\t\t},\n\t\t};\n\t}\n\n\tget styles() {\n\t\treturn {};\n\t}\n}\n\nexport type {\n\tToolbarItemEventDetail,\n};\nexport default ToolbarItemBase;\n"]}
+{"version":3,"file":"ToolbarItemBase.js","sourceRoot":"","sources":["../src/ToolbarItemBase.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\n\nimport type ToolbarItemOverflowBehavior from \"./types/ToolbarItemOverflowBehavior.js\";\nimport type { ToolbarArrowNavState } from \"./IToolbarArrowNavProvider.js\";\n\ntype ToolbarItemEventDetail = {\n\ttargetRef: HTMLElement;\n}\n\n@event(\"close-overflow\", {\n\tbubbles: true,\n})\n/**\n * @class\n * Represents an abstract base class for items used in the `ui5-toolbar`.\n *\n *\n * @cssState overflowed - When the item is displayed in the overflow popover.\n * Use this state to apply different styles when the item is overflowed.\n * Available since 2.20.0.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @public\n * @since 1.17.0\n */\nclass ToolbarItemBase extends UI5Element {\n\teventDetails!: {\n\t\t\"close-overflow\": void;\n\t}\n\n\t/**\n\t* Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\n\t* the item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.\n\t* @public\n\t* @default \"Default\"\n\t*/\n\t@property()\n\toverflowPriority: `${ToolbarItemOverflowBehavior}` = \"Default\";\n\n\t/**\n\t * Defines if the toolbar overflow popup should close upon interaction with the item.\n\t * It will close by default.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tpreventOverflowClosing = false;\n\n\t_getNavigationTargets(): HTMLElement[] {\n\t\tconst ref = this.getFocusDomRef();\n\t\treturn ref ? [ref] : [];\n\t}\n\n\t/**\n\t * Focus entry point when toolbar navigates into this item.\n\t * Override in complex items (e.g., Breadcrumbs) to handle direction-aware entry.\n\t * @private\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tfocusForToolbarNavigation(isForward: boolean) {\n\t\tthis.getFocusDomRef()?.focus();\n\t}\n\n\tgetArrowNavState(): ToolbarArrowNavState | undefined {\n\t\treturn undefined;\n\t}\n\n\t_isOverflowed: boolean = false;\n\n\tget isOverflowed(): boolean {\n\t\treturn this._isOverflowed;\n\t}\n\n\t/**\n\t * Defines if the toolbar item is overflowed.\n\t * @default false\n\t * @protected\n\t * @since 2.11.0\n\t */\n\t@property({ type: Boolean })\n\tset isOverflowed(value: boolean) {\n\t\tthis._isOverflowed = value;\n\n\t\tif (value) {\n\t\t\tthis._internals.states.add(\"overflowed\");\n\t\t} else {\n\t\t\tthis._internals.states.delete(\"overflowed\");\n\t\t}\n\t}\n\n\t_maxWidth = 0;\n\t_isRendering = true;\n\n\tonAfterRendering(): void {\n\t\tthis._isRendering = false;\n\t}\n\t/**\n\t* Defines if the width of the item should be ignored in calculating the whole width of the toolbar\n\t* @protected\n\t*/\n\tget ignoreSpace(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is flexible. An item that is returning true for this property will make\n\t * the toolbar expand to fill the 100% width of its container.\n\t * @protected\n\t */\n\tget hasFlexibleWidth(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is interactive.\n\t * This value is used to determinate if the toolbar should have its accessibility role and attributes set.\n\t * At least two interactive items are needed for the toolbar to have the role=\"toolbar\" attribute set.\n\t * @protected\n\t */\n\tget isInteractive(): boolean {\n\t\treturn true;\n\t}\n\n\tget isToolbarNavigatable(): boolean {\n\t\treturn this.isInteractive && !this.hidden && !(\"disabled\" in this && !!(this as { disabled?: boolean }).disabled);\n\t}\n\n\tget hasOverflow(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is separator.\n\t * @protected\n\t */\n\tget isSeparator() {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is a spacer.\n\t * A spacer item is an item that takes space in the toolbar, but does not render any content.\n\t * @protected\n\t * @since 2.21.0\n\t */\n\n\tget isSpacer() {\n\t\treturn false;\n\t}\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-tb-popover-item\": this.isOverflowed,\n\t\t\t\t\"ui5-tb-item\": true,\n\t\t\t},\n\t\t};\n\t}\n\n\tget styles() {\n\t\treturn {};\n\t}\n}\n\nexport type {\n\tToolbarItemEventDetail,\n};\nexport default ToolbarItemBase;\n"]}

package/dist/ToolbarSelect.d.ts

@@ -5,7 +5,9 @@ import type { ToolbarItemEventDetail } from "./ToolbarItemBase.js";
 import type ToolbarSelectOption from "./ToolbarSelectOption.js";
 import type { SelectChangeEventDetail } from "./Select.js";
 import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
-type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail;
+type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail & {
+    selectedToolbarOption: ToolbarSelectOption | undefined;
+};
 /**
  * @class
  *
@@ -96,7 +98,7 @@ declare class ToolbarSelect extends ToolbarItemBase {
     onOpen(e: Event): void;
     onClose(e: Event): void;
     onChange(e: CustomEvent<SelectChangeEventDetail>): void;
-    _syncOptions(selectedOption: HTMLElement): void;
+    _syncOptions(selectedOptionIndex: number): void;
     get styles(): {
         width: string | undefined;
     };

package/dist/ToolbarSelect.js

@@ -92,14 +92,15 @@ let ToolbarSelect = class ToolbarSelect extends ToolbarItemBase {
     }
     onChange(e) {
         e.stopImmediatePropagation();
-        const prevented = !this.fireDecoratorEvent("change", { ...e.detail, targetRef: e.target });
+        const selectedOptionIndex = Number(e.detail.selectedOption?.getAttribute("data-ui5-external-action-item-index"));
+        const selectedToolbarOption = this.options[selectedOptionIndex];
+        const prevented = !this.fireDecoratorEvent("change", { ...e.detail, targetRef: e.target, selectedToolbarOption });
         if (!prevented) {
             this.fireDecoratorEvent("close-overflow");
         }
-        this._syncOptions(e.detail.selectedOption);
+        this._syncOptions(selectedOptionIndex);
     }
-    _syncOptions(selectedOption) {
-        const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
+    _syncOptions(selectedOptionIndex) {
         this.options.forEach((option, index) => {
             option.selected = index === selectedOptionIndex;
         });
@@ -151,6 +152,8 @@ ToolbarSelect = __decorate([
     /**
      * Fired when the selected option changes.
      * @param {HTMLElement} selectedOption the selected option.
+     * @param {HTMLElement} selectedToolbarOption the original toolbar select option.
+     * @since 2.25.0
      * @public
      */
     ,

package/dist/ToolbarSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSelect.js","sourceRoot":"","sources":["../src/ToolbarSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport ToolbarSelectCss from \"./generated/themes/ToolbarSelect.css.js\";\nimport type Select from \"./Select.js\";\n\n// Templates\nimport ToolbarSelectTemplate from \"./ToolbarSelectTemplate.js\";\nimport ToolbarItemBase from \"./ToolbarItemBase.js\";\nimport type { ToolbarItemEventDetail } from \"./ToolbarItemBase.js\";\nimport type ToolbarSelectOption from \"./ToolbarSelectOption.js\";\nimport type { SelectChangeEventDetail } from \"./Select.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ntype ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail;\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-select` component is used to create a toolbar drop-down list.\n * The items inside the `ui5-toolbar-select` define the available options by using the `ui5-toolbar-select-option` component.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/ToolbarSelect.js\";`\n *\n * `import \"@ui5/webcomponents/dist/ToolbarSelectOption.js\";` (comes with `ui5-toolbar-select`)\n * @constructor\n * @abstract\n * @extends ToolbarItemBase\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-toolbar-select\",\n\ttemplate: ToolbarSelectTemplate,\n\trenderer: jsxRenderer,\n\tstyles: ToolbarSelectCss,\n})\n\n/**\n * Fired when the selected option changes.\n * @param {HTMLElement} selectedOption the selected option.\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\n/**\n * Fired after the component's dropdown menu opens.\n * @public\n */\n@event(\"open\", {\n\tbubbles: true,\n})\n\n/**\n * Fired after the component's dropdown menu closes.\n * @public\n */\n@event(\"close\")\nclass ToolbarSelect extends ToolbarItemBase {\n\teventDetails!: ToolbarItemBase[\"eventDetails\"] & {\n\t\tchange: ToolbarSelectChangeEventDetail;\n\t\topen: ToolbarItemEventDetail;\n\t\tclose: ToolbarItemEventDetail;\n\t\t\"click\": ToolbarItemEventDetail;\n\t}\n\n\t/**\n\t * Defines the width of the select.\n\t *\n\t * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\twidth?: string;\n\n\t/**\n\t * Defines the component options.\n\t *\n\t * **Note:** Only one selected option is allowed.\n\t * If more than one option is defined as selected, the last one would be considered as the selected one.\n\t *\n\t * **Note:** Use the `ui5-toolbar-select-option` component to define the desired options.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: true,\n\t})\n\toptions!: DefaultSlot<ToolbarSelectOption>;\n\n\t/**\n\t * Defines the HTML element that will be displayed in the component input part,\n\t * representing the selected option.\n\t * @public\n\t * @since 2.15.0\n\t*/\n\t@slot()\n\tlabel!: Slot<HTMLElement>;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tvalueState: `${ValueState}` = \"None\";\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t *\n\t * **Note:** A disabled component is noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\taccessibleName?: string\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the select.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the value of the component:\n\t *\n\t * @public\n\t * @default \"\"\n\t * @since 2.15.0\n\t */\n\t@property()\n\tset value(newValue: string) {\n\t\tif (this.select && this.select.value !== newValue) {\n\t\t\tthis.select.value = newValue;\n\t\t}\n\t\tthis._value = newValue;\n\t}\n\n\tget value(): string | undefined {\n\t\treturn this.select ? this.select.value : this._value;\n\t}\n\n\tget select(): Select | null {\n\t\treturn this.shadowRoot!.querySelector<Select>(\"[ui5-select]\");\n\t}\n\n\t// Internal value storage, in case the composite select is not rendered on the the assignment happens\n\t_value: string = \"\";\n\n\tonClick(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"click\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented && !this.preventOverflowClosing) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonOpen(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"open\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonClose(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"close\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonChange(e: CustomEvent<SelectChangeEventDetail>): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"change\", { ...e.detail, targetRef: e.target as HTMLElement });\n\t\tif (!prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\n\t\tthis._syncOptions(e.detail.selectedOption);\n\t}\n\n\t_syncOptions(selectedOption: HTMLElement): void {\n\t\tconst selectedOptionIndex = Number(selectedOption?.getAttribute(\"data-ui5-external-action-item-index\"));\n\t\tthis.options.forEach((option: ToolbarSelectOption, index: number) => {\n\t\t\toption.selected = index === selectedOptionIndex;\n\t\t});\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twidth: this.isOverflowed ? undefined : this.width,\n\t\t};\n\t}\n\n\tget hasCustomLabel() {\n\t\treturn !!this.label.length;\n\t}\n}\n\nToolbarSelect.define();\n\nexport default ToolbarSelect;\n\nexport type {\n\tToolbarSelectChangeEventDetail,\n};\n"]}
+{"version":3,"file":"ToolbarSelect.js","sourceRoot":"","sources":["../src/ToolbarSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport ToolbarSelectCss from \"./generated/themes/ToolbarSelect.css.js\";\nimport type Select from \"./Select.js\";\n\n// Templates\nimport ToolbarSelectTemplate from \"./ToolbarSelectTemplate.js\";\nimport ToolbarItemBase from \"./ToolbarItemBase.js\";\nimport type { ToolbarItemEventDetail } from \"./ToolbarItemBase.js\";\nimport type ToolbarSelectOption from \"./ToolbarSelectOption.js\";\nimport type { SelectChangeEventDetail } from \"./Select.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ntype ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail & {\n\tselectedToolbarOption: ToolbarSelectOption | undefined;\n};\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-select` component is used to create a toolbar drop-down list.\n * The items inside the `ui5-toolbar-select` define the available options by using the `ui5-toolbar-select-option` component.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/ToolbarSelect.js\";`\n *\n * `import \"@ui5/webcomponents/dist/ToolbarSelectOption.js\";` (comes with `ui5-toolbar-select`)\n * @constructor\n * @abstract\n * @extends ToolbarItemBase\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-toolbar-select\",\n\ttemplate: ToolbarSelectTemplate,\n\trenderer: jsxRenderer,\n\tstyles: ToolbarSelectCss,\n})\n\n/**\n * Fired when the selected option changes.\n * @param {HTMLElement} selectedOption the selected option.\n * @param {HTMLElement} selectedToolbarOption the original toolbar select option.\n * @since 2.25.0\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\n/**\n * Fired after the component's dropdown menu opens.\n * @public\n */\n@event(\"open\", {\n\tbubbles: true,\n})\n\n/**\n * Fired after the component's dropdown menu closes.\n * @public\n */\n@event(\"close\")\nclass ToolbarSelect extends ToolbarItemBase {\n\teventDetails!: ToolbarItemBase[\"eventDetails\"] & {\n\t\tchange: ToolbarSelectChangeEventDetail;\n\t\topen: ToolbarItemEventDetail;\n\t\tclose: ToolbarItemEventDetail;\n\t\t\"click\": ToolbarItemEventDetail;\n\t}\n\n\t/**\n\t * Defines the width of the select.\n\t *\n\t * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\twidth?: string;\n\n\t/**\n\t * Defines the component options.\n\t *\n\t * **Note:** Only one selected option is allowed.\n\t * If more than one option is defined as selected, the last one would be considered as the selected one.\n\t *\n\t * **Note:** Use the `ui5-toolbar-select-option` component to define the desired options.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: true,\n\t})\n\toptions!: DefaultSlot<ToolbarSelectOption>;\n\n\t/**\n\t * Defines the HTML element that will be displayed in the component input part,\n\t * representing the selected option.\n\t * @public\n\t * @since 2.15.0\n\t*/\n\t@slot()\n\tlabel!: Slot<HTMLElement>;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tvalueState: `${ValueState}` = \"None\";\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t *\n\t * **Note:** A disabled component is noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\taccessibleName?: string\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the select.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the value of the component:\n\t *\n\t * @public\n\t * @default \"\"\n\t * @since 2.15.0\n\t */\n\t@property()\n\tset value(newValue: string) {\n\t\tif (this.select && this.select.value !== newValue) {\n\t\t\tthis.select.value = newValue;\n\t\t}\n\t\tthis._value = newValue;\n\t}\n\n\tget value(): string | undefined {\n\t\treturn this.select ? this.select.value : this._value;\n\t}\n\n\tget select(): Select | null {\n\t\treturn this.shadowRoot!.querySelector<Select>(\"[ui5-select]\");\n\t}\n\n\t// Internal value storage, in case the composite select is not rendered on the the assignment happens\n\t_value: string = \"\";\n\n\tonClick(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"click\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented && !this.preventOverflowClosing) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonOpen(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"open\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonClose(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"close\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonChange(e: CustomEvent<SelectChangeEventDetail>): void {\n\t\te.stopImmediatePropagation();\n\t\tconst selectedOptionIndex = Number(e.detail.selectedOption?.getAttribute(\"data-ui5-external-action-item-index\"));\n\t\tconst selectedToolbarOption = this.options[selectedOptionIndex];\n\t\tconst prevented = !this.fireDecoratorEvent(\"change\", { ...e.detail, targetRef: e.target as HTMLElement, selectedToolbarOption });\n\t\tif (!prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\n\t\tthis._syncOptions(selectedOptionIndex);\n\t}\n\n\t_syncOptions(selectedOptionIndex: number): void {\n\t\tthis.options.forEach((option: ToolbarSelectOption, index: number) => {\n\t\t\toption.selected = index === selectedOptionIndex;\n\t\t});\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twidth: this.isOverflowed ? undefined : this.width,\n\t\t};\n\t}\n\n\tget hasCustomLabel() {\n\t\treturn !!this.label.length;\n\t}\n}\n\nToolbarSelect.define();\n\nexport default ToolbarSelect;\n\nexport type {\n\tToolbarSelectChangeEventDetail,\n};\n"]}

package/dist/ToolbarSelectOption.d.ts

@@ -13,6 +13,13 @@ import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
  * @since 1.17.0
  */
 declare class ToolbarSelectOption extends UI5Element {
+    /**
+     * Defines the value of the component.
+     * @default undefined
+     * @public
+     * @since 2.25.0
+     */
+    value?: string;
     /**
      * Defines the selected state of the component.
      * @default false

package/dist/ToolbarSelectOption.js

@@ -47,11 +47,14 @@ let ToolbarSelectOption = class ToolbarSelectOption extends UI5Element {
                 }
             });
             if (parent.select) {
-                parent.select.value = this.textContent || "";
+                parent.select.value = this.value !== undefined && this.value !== "" ? this.value : (this.textContent || "");
             }
         }
     }
 };
+__decorate([
+    property()
+], ToolbarSelectOption.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean })
 ], ToolbarSelectOption.prototype, "selected", null);

package/dist/ToolbarSelectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSelectOption.js","sourceRoot":"","sources":["../src/ToolbarSelectOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAG3E;;;;;;;;;;;GAWG;AAEH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAC3C;;;;OAIG;IAEH,IAAI,QAAQ,CAAC,KAAc;QAC1B,IAAI,KAAK,EAAE,CAAC;YACX,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAClC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC9B,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC;IACF,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACtC,CAAC;IAED,qBAAqB;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,aAA8B,CAAC;QACnD,IAAI,MAAM,EAAE,CAAC;YACZ,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE;gBAChC,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;oBACrB,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;gBACpC,CAAC;YACF,CAAC,CAAC,CAAC;YACH,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;gBACnB,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;YAC9C,CAAC;QACF,CAAC;IACF,CAAC;CAUD,CAAA;AAnCA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAQ3B;AA2BD;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;iDAC5C;AAzCpB,mBAAmB;IADxB,aAAa,CAAC,2BAA2B,CAAC;GACrC,mBAAmB,CA0CxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type ToolbarSelect from \"./ToolbarSelect.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-toolbar-select-option` component defines the content of an option in the `ui5-toolbar-select`.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @public\n * @since 1.17.0\n */\n@customElement(\"ui5-toolbar-select-option\")\nclass ToolbarSelectOption extends UI5Element {\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tset selected(value: boolean) {\n\t\tif (value) {\n\t\t\tthis.setAttribute(\"selected\", \"\");\n\t\t\tthis._clearSiblingsAndSync();\n\t\t} else {\n\t\t\tthis.removeAttribute(\"selected\");\n\t\t}\n\t}\n\n\tget selected(): boolean {\n\t\treturn this.hasAttribute(\"selected\");\n\t}\n\n\t_clearSiblingsAndSync(): void {\n\t\tconst parent = this.parentElement as ToolbarSelect;\n\t\tif (parent) {\n\t\t\tparent.options?.forEach(option => {\n\t\t\t\tif (option !== this) {\n\t\t\t\t\toption.removeAttribute(\"selected\");\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (parent.select) {\n\t\t\t\tparent.select.value = this.textContent || \"\";\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Defines the text of the component.\n\t *\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true, invalidateOnChildChange: true })\n\ttext!: DefaultSlot<Node>;\n}\n\nToolbarSelectOption.define();\n\nexport default ToolbarSelectOption;\n"]}
+{"version":3,"file":"ToolbarSelectOption.js","sourceRoot":"","sources":["../src/ToolbarSelectOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAG3E;;;;;;;;;;;GAWG;AAEH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAU3C;;;;OAIG;IAEH,IAAI,QAAQ,CAAC,KAAc;QAC1B,IAAI,KAAK,EAAE,CAAC;YACX,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAClC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC9B,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC;IACF,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACtC,CAAC;IAED,qBAAqB;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,aAA8B,CAAC;QACnD,IAAI,MAAM,EAAE,CAAC;YACZ,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE;gBAChC,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;oBACrB,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;gBACpC,CAAC;YACF,CAAC,CAAC,CAAC;YACH,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;gBACnB,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;YAC7G,CAAC;QACF,CAAC;IACF,CAAC;CAUD,CAAA;AA3CA;IADC,QAAQ,EAAE;kDACI;AAQf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAQ3B;AA2BD;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;iDAC5C;AAlDpB,mBAAmB;IADxB,aAAa,CAAC,2BAA2B,CAAC;GACrC,mBAAmB,CAmDxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type ToolbarSelect from \"./ToolbarSelect.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-toolbar-select-option` component defines the content of an option in the `ui5-toolbar-select`.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @public\n * @since 1.17.0\n */\n@customElement(\"ui5-toolbar-select-option\")\nclass ToolbarSelectOption extends UI5Element {\n\t/**\n\t * Defines the value of the component.\n\t * @default undefined\n\t * @public\n\t * @since 2.25.0\n\t */\n\t@property()\n\tvalue?: string;\n\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tset selected(value: boolean) {\n\t\tif (value) {\n\t\t\tthis.setAttribute(\"selected\", \"\");\n\t\t\tthis._clearSiblingsAndSync();\n\t\t} else {\n\t\t\tthis.removeAttribute(\"selected\");\n\t\t}\n\t}\n\n\tget selected(): boolean {\n\t\treturn this.hasAttribute(\"selected\");\n\t}\n\n\t_clearSiblingsAndSync(): void {\n\t\tconst parent = this.parentElement as ToolbarSelect;\n\t\tif (parent) {\n\t\t\tparent.options?.forEach(option => {\n\t\t\t\tif (option !== this) {\n\t\t\t\t\toption.removeAttribute(\"selected\");\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (parent.select) {\n\t\t\t\tparent.select.value = this.value !== undefined && this.value !== \"\" ? this.value : (this.textContent || \"\");\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Defines the text of the component.\n\t *\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true, invalidateOnChildChange: true })\n\ttext!: DefaultSlot<Node>;\n}\n\nToolbarSelectOption.define();\n\nexport default ToolbarSelectOption;\n"]}

package/dist/ToolbarSelectTemplate.js

@@ -3,6 +3,6 @@ import Select from "./Select.js";
 import Option from "./Option.js";
 export default function ToolbarSelectTemplate() {
     return (_jsxs(Select, { class: this.classes.root, style: this.styles, value: this.value, "data-ui5-external-action-item-id": this._id, valueState: this.valueState, disabled: this.disabled, accessibleName: this.accessibleName, accessibleNameRef: this.accessibleNameRef, onClick: (...args) => this.onClick(...args), onClose: (...args) => this.onClose(...args), onOpen: (...args) => this.onOpen(...args), onChange: (...args) => this.onChange(...args), children: [this.hasCustomLabel &&
-                _jsx("slot", { name: "label", slot: "label" }), this.options.map((option, index) => (_jsx(Option, { selected: option.selected, "data-ui5-external-action-item-index": index, children: option.textContent })))] }));
+                _jsx("slot", { name: "label", slot: "label" }), this.options.map((option, index) => (_jsx(Option, { selected: option.selected, value: option.value, "data-ui5-external-action-item-index": index, children: option.textContent })))] }));
 }
 //# sourceMappingURL=ToolbarSelectTemplate.js.map

package/dist/ToolbarSelectTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSelectTemplate.js","sourceRoot":"","sources":["../src/ToolbarSelectTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,OAAO,CACN,MAAC,MAAM,IACN,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,sCACiB,IAAI,CAAC,GAAG,EAC1C,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAC3C,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAC3C,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,EACzC,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,aAE5C,IAAI,CAAC,cAAc;gBACnB,eAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GACxB,EAEP,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,KAAC,MAAM,IACN,QAAQ,EAAE,MAAM,CAAC,QAAQ,yCACY,KAAK,YAEzC,MAAM,CAAC,WAAW,GACX,CACT,CAAC,IACM,CAAC,CAAC;AACb,CAAC","sourcesContent":["import type ToolbarSelect from \"./ToolbarSelect.js\";\nimport Select from \"./Select.js\";\nimport Option from \"./Option.js\";\n\nexport default function ToolbarSelectTemplate(this: ToolbarSelect) {\n\treturn (\n\t\t<Select\n\t\t\tclass={this.classes.root}\n\t\t\tstyle={this.styles}\n\t\t\tvalue={this.value}\n\t\t\tdata-ui5-external-action-item-id={this._id}\n\t\t\tvalueState={this.valueState}\n\t\t\tdisabled={this.disabled}\n\t\t\taccessibleName={this.accessibleName}\n\t\t\taccessibleNameRef={this.accessibleNameRef}\n\t\t\tonClick={(...args) => this.onClick(...args)}\n\t\t\tonClose={(...args) => this.onClose(...args)}\n\t\t\tonOpen={(...args) => this.onOpen(...args)}\n\t\t\tonChange={(...args) => this.onChange(...args)}\n\t\t>\n\t\t\t{this.hasCustomLabel &&\n\t\t\t\t<slot name=\"label\" slot=\"label\">\n\t\t\t\t</slot>\n\t\t\t}\n\t\t\t{this.options.map((option, index) => (\n\t\t\t\t<Option\n\t\t\t\t\tselected={option.selected}\n\t\t\t\t\tdata-ui5-external-action-item-index={index}\n\t\t\t\t>\n\t\t\t\t\t{option.textContent}\n\t\t\t\t</Option>\n\t\t\t))}\n\t\t</Select>);\n}\n"]}
+{"version":3,"file":"ToolbarSelectTemplate.js","sourceRoot":"","sources":["../src/ToolbarSelectTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,OAAO,CACN,MAAC,MAAM,IACN,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,sCACiB,IAAI,CAAC,GAAG,EAC1C,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAC3C,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAC3C,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,EACzC,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,aAE5C,IAAI,CAAC,cAAc;gBACnB,eAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GACxB,EAEP,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,KAAC,MAAM,IACN,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,KAAK,EAAE,MAAM,CAAC,KAAK,yCACkB,KAAK,YAEzC,MAAM,CAAC,WAAW,GACX,CACT,CAAC,IACM,CAAC,CAAC;AACb,CAAC","sourcesContent":["import type ToolbarSelect from \"./ToolbarSelect.js\";\nimport Select from \"./Select.js\";\nimport Option from \"./Option.js\";\n\nexport default function ToolbarSelectTemplate(this: ToolbarSelect) {\n\treturn (\n\t\t<Select\n\t\t\tclass={this.classes.root}\n\t\t\tstyle={this.styles}\n\t\t\tvalue={this.value}\n\t\t\tdata-ui5-external-action-item-id={this._id}\n\t\t\tvalueState={this.valueState}\n\t\t\tdisabled={this.disabled}\n\t\t\taccessibleName={this.accessibleName}\n\t\t\taccessibleNameRef={this.accessibleNameRef}\n\t\t\tonClick={(...args) => this.onClick(...args)}\n\t\t\tonClose={(...args) => this.onClose(...args)}\n\t\t\tonOpen={(...args) => this.onOpen(...args)}\n\t\t\tonChange={(...args) => this.onChange(...args)}\n\t\t>\n\t\t\t{this.hasCustomLabel &&\n\t\t\t\t<slot name=\"label\" slot=\"label\">\n\t\t\t\t</slot>\n\t\t\t}\n\t\t\t{this.options.map((option, index) => (\n\t\t\t\t<Option\n\t\t\t\t\tselected={option.selected}\n\t\t\t\t\tvalue={option.value}\n\t\t\t\t\tdata-ui5-external-action-item-index={index}\n\t\t\t\t>\n\t\t\t\t\t{option.textContent}\n\t\t\t\t</Option>\n\t\t\t))}\n\t\t</Select>);\n}\n"]}