From b89727cb031d405b93eb9b2dae2898935a28003a Mon Sep 17 00:00:00 2001
From: Dobrin Dimchev <dobrin.dimchev@sap.com>
Date: Thu, 21 Aug 2025 10:01:21 +0300
Subject: [PATCH 1/2] fix(ui5-toolbar): extend search field type

---
 packages/fiori/src/ShellBar.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index b901901454da..0dbaffeaaac3 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -49,6 +49,7 @@ import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement
 import type ShellBarItem from "./ShellBarItem.js";
 import type { ShellBarItemAccessibilityAttributes } from "./ShellBarItem.js";
 import type ShellBarBranding from "./ShellBarBranding.js";
+import type ShellBarSearch from "./ShellBarSearch.js";
 
 // Templates
 import ShellBarTemplate from "./ShellBarTemplate.js";
@@ -521,7 +522,7 @@ class ShellBar extends UI5Element {
 		type: HTMLElement,
 		invalidateOnChildChange: true,
 	})
-	searchField!: Array<Input>;
+	searchField!: Array<Input | ShellBarSearch>;
 
 	/**
 	 * Defines a `ui5-button` in the bar that will be placed in the beginning.

From f58b9c93e3c725ebd6dfa7949f4e38ad52f2b5b5 Mon Sep 17 00:00:00 2001
From: Dobrin Dimchev <dobrin.dimchev@sap.com>
Date: Thu, 11 Sep 2025 12:59:44 +0300
Subject: [PATCH 2/2] chore: samples

---
 packages/fiori/src/ShellBar.ts                |   9 +-
 .../fiori/src/ShellBarPopoverTemplate.tsx     |   1 +
 packages/fiori/src/ShellBarTemplate.tsx       |   2 +-
 .../ShellBar_content_button_overflow.html     | 288 ++++++++++++++++++
 .../ShellBar_shellbar_item_overflow.html      | 267 ++++++++++++++++
 5 files changed, 565 insertions(+), 2 deletions(-)
 create mode 100644 packages/fiori/test/pages/ShellBar_content_button_overflow.html
 create mode 100644 packages/fiori/test/pages/ShellBar_shellbar_item_overflow.html

diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index 0dbaffeaaac3..b7b782bc8f49 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -956,6 +956,13 @@ class ShellBar extends UI5Element {
 			item.classList.add("ui5-shellbar-hidden-button");
 		}
 
+		if (hiddenItems.length === 1) {
+			return {
+				itemsInfo: this._itemsInfo,
+				contentInfo: this._contentInfo,
+			};
+		}
+
 		if (hiddenItems.length === 1 && !this.showSearchField) {
 			const nextItemToHide = hidableDomElements[++lastHiddenIndex];
 			if (nextItemToHide) {
@@ -1226,7 +1233,7 @@ class ShellBar extends UI5Element {
 				const bIndex = PREDEFINED_PLACE_ACTIONS.indexOf(b.icon || "");
 				return aIndex - bIndex;
 			}).map((item: ShellBarItem) => {
-				item._getRealDomRef = () => this.getDomRef()!.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
+				item._getRealDomRef = () => this.shadowRoot!.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
 				// check if included for lean mode
 				const show = !!item.icon || false;
 				return {
diff --git a/packages/fiori/src/ShellBarPopoverTemplate.tsx b/packages/fiori/src/ShellBarPopoverTemplate.tsx
index a97604a13117..b32f7491d225 100644
--- a/packages/fiori/src/ShellBarPopoverTemplate.tsx
+++ b/packages/fiori/src/ShellBarPopoverTemplate.tsx
@@ -32,6 +32,7 @@ export default function PopoversTemplate(this: ShellBar) {
 							key={index}
 							data-count={icon.count}
 							data-ui5-external-action-item-id={icon.refItemid}
+							data-ui5-stable={icon.stableDomRef}
 							icon={icon.icon ? icon.icon : ""}
 							type="Active"
 							onui5-_press={icon.press}
diff --git a/packages/fiori/src/ShellBarTemplate.tsx b/packages/fiori/src/ShellBarTemplate.tsx
index 2c57ea234a67..3b69dc799bef 100644
--- a/packages/fiori/src/ShellBarTemplate.tsx
+++ b/packages/fiori/src/ShellBarTemplate.tsx
@@ -215,7 +215,7 @@ export default function ShellBarTemplate(this: ShellBar) {
 									tooltip={item.tooltip}
 									data-ui5-notifications-count={this.notificationsCount}
 									data-ui5-external-action-item-id={item.refItemid}
-									data-ui5-stable={item.stableDomRef}
+									data-ui5-stable={item.icon && !this.isIconHidden(item.icon) ? item.stableDomRef : undefined}
 									onClick={item.press}
 									accessibilityAttributes={item.accessibilityAttributes}
 								>
diff --git a/packages/fiori/test/pages/ShellBar_content_button_overflow.html b/packages/fiori/test/pages/ShellBar_content_button_overflow.html
new file mode 100644
index 000000000000..9795b40b9082
--- /dev/null
+++ b/packages/fiori/test/pages/ShellBar_content_button_overflow.html
@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Shell Bar - Content Button Overflow</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <script data-ui5-config type="application/json">
+		{
+			"rtl": false
+		}
+	</script>
+
+    <script src="%VITE_BUNDLE_PATH%" type="module"></script>
+
+    <link rel="stylesheet" type="text/css" href="./styles/ShellBar.css">
+</head>
+
+<body class="shellbar1auto">
+
+    <!-- Overflow popover for hidden items -->
+    <ui5-popover id="overflowPopover" placement-type="Bottom" horizontal-align="Right">
+        <div style="padding: 1rem; min-width: 200px;">
+            <ui5-title level="H5" style="margin-bottom: 0.5rem;">Hidden Items</ui5-title>
+            <div id="hiddenItemsContainer" style="display: flex; flex-direction: column; gap: 0.5rem;">
+                <!-- Hidden items will be dynamically added here -->
+            </div>
+        </div>
+    </ui5-popover>
+
+    <!-- Context menu for actions -->
+    <ui5-menu id="actionsMenu" opener="actionsButton">
+        <ui5-menu-item text="Export Data" icon="download"></ui5-menu-item>
+        <ui5-menu-item text="Print Report" icon="print"></ui5-menu-item>
+        <ui5-menu-item text="Share" icon="share-2">
+            <ui5-menu-item text="Email" icon="email"></ui5-menu-item>
+            <ui5-menu-item text="Copy Link" icon="copy"></ui5-menu-item>
+        </ui5-menu-item>
+        <ui5-menu-item text="Settings" icon="action-settings" starts-section></ui5-menu-item>
+    </ui5-menu>
+
+    <ui5-shellbar id="shellbarOverflow" show-notifications>
+        <ui5-shellbar-branding slot="branding">
+            Analytics Dashboard
+            <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo" />
+        </ui5-shellbar-branding>
+
+        <ui5-button icon="menu2" slot="startButton"></ui5-button>
+        <ui5-button icon="nav-back" slot="startButton"></ui5-button>
+
+        <!-- Multiple content items that can be hidden -->
+        <ui5-tag design="Set1" color-scheme="1" slot="content" id="regionTag" data-hide-order="1">North
+            America</ui5-tag>
+
+        <ui5-button id="refreshButton" icon="refresh" slot="content" data-hide-order="2"
+            tooltip="Refresh Data">Refresh</ui5-button>
+
+        <ui5-button id="filterButton" icon="filter" end-icon="slim-arrow-down" slot="content"
+            data-hide-order="3">Filters</ui5-button>
+
+        <div slot="content" style="display: flex; align-items: center; gap: 0.5rem;" id="statusContainer"
+            data-hide-order="4">
+            <ui5-label>Live Updates</ui5-label>
+            <ui5-switch id="liveUpdatesSwitch" checked></ui5-switch>
+        </div>
+
+        <ui5-button id="actionsButton" icon="action" end-icon="slim-arrow-down" slot="content"
+            data-hide-order="5">Actions</ui5-button>
+
+        <ui5-button id="exportButton" icon="download" slot="content" data-hide-order="6">Export</ui5-button>
+
+        <ui5-shellbar-spacer slot="content"></ui5-shellbar-spacer>
+
+        <div slot="content" style="display: flex; align-items: center; gap: 0.5rem;" id="dateContainer"
+            data-hide-order="7">
+            <ui5-label>Report Date:</ui5-label>
+            <ui5-date-picker id="reportDatePicker" value="2024-03-15"></ui5-date-picker>
+        </div>
+
+        <!-- Overflow button - only shown when items are hidden -->
+        <ui5-button id="overflowButton" icon="overflow" slot="content" data-hide-order="999"
+            tooltip="Show hidden items"></ui5-button>
+
+        <ui5-shellbar-search placeholder="Search reports..." slot="searchField" show-suggestions>
+        </ui5-shellbar-search>
+
+        <ui5-toggle-button id="assistantOverflow" icon="sap-icon://da" slot="assistant" text="Assistant"
+            title="Assistant"></ui5-toggle-button>
+        <ui5-avatar slot="profile" initials="AD"></ui5-avatar>
+    </ui5-shellbar>
+
+    <div class="content">
+        <div style="padding: 2rem;">
+            <ui5-title level="H3">ShellBar Content Button Overflow Management</ui5-title>
+            <ui5-text>Uses a button in the content area that appears when items are hidden. Resize the browser
+                window to see how overflow management works.</ui5-text>
+            <div id="statusDisplay" style="margin-top: 1rem;">
+                <ui5-text>All items visible</ui5-text>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Get references to key elements
+        const shellbarOverflow = document.getElementById("shellbarOverflow");
+        const overflowButton = document.getElementById("overflowButton");
+        const overflowPopover = document.getElementById("overflowPopover");
+        const hiddenItemsContainer = document.getElementById("hiddenItemsContainer");
+        const statusDisplay = document.getElementById("statusDisplay");
+        const actionsMenu = document.getElementById("actionsMenu");
+        const actionsButton = document.getElementById("actionsButton");
+
+        overflowButton.remove();
+
+        // Data-driven configuration
+        const itemsConfig = {
+            regionTag: {
+                type: 'tag',
+                text: 'North America',
+                design: 'Set1',
+                colorScheme: '1',
+                action: () => console.log('Region tag clicked from overflow')
+            },
+            refreshButton: {
+                type: 'button',
+                text: 'Refresh',
+                icon: 'refresh',
+                tooltip: 'Refresh Data',
+                action: () => {
+                    console.log('Refresh clicked from overflow');
+                    overflowPopover.open = false;
+                }
+            },
+            filterButton: {
+                type: 'button',
+                text: 'Filters',
+                icon: 'filter',
+                endIcon: 'slim-arrow-down',
+                action: () => {
+                    console.log('Filter clicked from overflow');
+                    overflowPopover.open = false;
+                }
+            },
+            statusContainer: {
+                type: 'container',
+                content: [
+                    { type: 'label', text: 'Live Updates' },
+                    { type: 'switch', id: 'liveUpdatesSwitch_overflow', checked: true }
+                ],
+                action: (element) => {
+                    const switchEl = element.querySelector('ui5-switch');
+                    if (switchEl) {
+                        switchEl.addEventListener('change', (event) => {
+                            console.log('Live updates toggled from overflow:', event.target.checked);
+                            const originalSwitch = document.getElementById('liveUpdatesSwitch');
+                            if (originalSwitch) {
+                                originalSwitch.checked = event.target.checked;
+                            }
+                        });
+                    }
+                }
+            },
+            actionsButton: {
+                type: 'button',
+                text: 'Actions',
+                icon: 'action',
+                endIcon: 'slim-arrow-down',
+                action: () => {
+                    console.log('Actions clicked from overflow');
+                    overflowPopover.open = false;
+                    actionsMenu.open = true;
+                }
+            },
+            exportButton: {
+                type: 'button',
+                text: 'Export',
+                icon: 'download',
+                action: () => {
+                    console.log('Export clicked from overflow');
+                    overflowPopover.open = false;
+                }
+            },
+            dateContainer: {
+                type: 'container',
+                content: [
+                    { type: 'label', text: 'Report Date:' },
+                    { type: 'date-picker', id: 'reportDatePicker_overflow', value: '2024-03-15' }
+                ],
+                action: (element) => {
+                    const datePickerEl = element.querySelector('ui5-date-picker');
+                    if (datePickerEl) {
+                        datePickerEl.addEventListener('change', (event) => {
+                            console.log('Report date changed from overflow:', event.target.value);
+                            const originalDatePicker = document.getElementById('reportDatePicker');
+                            if (originalDatePicker) {
+                                originalDatePicker.value = event.target.value;
+                            }
+                        });
+                    }
+                }
+            }
+        };
+
+        // Create new popover item based on configuration
+        function createPopoverItem(originalItem) {
+            const config = itemsConfig[originalItem.id];
+            const element = document.createElement(config.type === 'container' ? 'div' : `ui5-${config.type}`);
+            
+            if (config.type === 'container') {
+                element.style.cssText = 'display: flex; align-items: center; gap: 0.5rem; width: 100%;';
+                config.content.forEach(item => {
+                    const child = document.createElement(`ui5-${item.type}`);
+                    child.textContent = item.text;
+                    if (item.checked) child.checked = item.checked;
+                    if (item.value) child.value = item.value;
+                    if (item.id) child.id = item.id;
+                    element.appendChild(child);
+                });
+                config.action(element);
+            } else {
+                element.textContent = config.text;
+                element.style.width = '100%';
+                if (config.icon) element.icon = config.icon;
+                if (config.endIcon) element.setAttribute('end-icon', config.endIcon);
+                if (config.design) element.design = config.design;
+                if (config.colorScheme) element.setAttribute('color-scheme', config.colorScheme);
+                element.addEventListener('click', config.action);
+            }
+            
+            return element;
+        }
+
+        // Handle content item visibility changes
+        shellbarOverflow.addEventListener("content-item-visibility-change", (event) => {
+            const hiddenItems = event.detail.items;
+            hiddenItemsContainer.innerHTML = '';
+
+            if (hiddenItems.length > 0) {
+                // overflowButton.style.display = 'block';
+                shellbarOverflow.appendChild(overflowButton);
+                hiddenItems.forEach(item => {
+                    const popoverItem = createPopoverItem(item);
+                    hiddenItemsContainer.appendChild(popoverItem);
+                });
+                statusDisplay.innerHTML = `<ui5-text>${hiddenItems.length} item(s) hidden - available in overflow menu</ui5-text>`;
+                console.log(`${hiddenItems.length} items hidden:`, hiddenItems.map(item => item.id || item.textContent));
+            } else {
+                overflowButton.remove();
+                statusDisplay.innerHTML = '<ui5-text>All items visible</ui5-text>';
+                console.log('All items visible');
+            }
+        });
+
+        // Event handlers
+        overflowButton.addEventListener('click', () => {
+            overflowPopover.opener = overflowButton;
+            overflowPopover.open = true;
+        });
+
+        actionsButton.addEventListener('click', () => {
+            actionsMenu.open = true;
+        });
+
+        document.getElementById('refreshButton').addEventListener('click', () => {
+            console.log('Refresh data');
+        });
+
+        document.getElementById('filterButton').addEventListener('click', () => {
+            console.log('Open filters');
+        });
+
+        document.getElementById('exportButton').addEventListener('click', () => {
+            console.log('Export data');
+        });
+
+        document.getElementById('liveUpdatesSwitch').addEventListener('change', (event) => {
+            console.log('Live updates:', event.target.checked);
+        });
+
+        document.getElementById('reportDatePicker').addEventListener('change', (event) => {
+            console.log('Report date changed:', event.target.value);
+        });
+    </script>
+
+</body>
+
+</html>
diff --git a/packages/fiori/test/pages/ShellBar_shellbar_item_overflow.html b/packages/fiori/test/pages/ShellBar_shellbar_item_overflow.html
new file mode 100644
index 000000000000..8cf256c22b19
--- /dev/null
+++ b/packages/fiori/test/pages/ShellBar_shellbar_item_overflow.html
@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Shell Bar - ShellBar Item Overflow</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <script data-ui5-config type="application/json">
+		{
+			"rtl": false
+		}
+	</script>
+
+    <script src="%VITE_BUNDLE_PATH%" type="module"></script>
+
+    <link rel="stylesheet" type="text/css" href="./styles/ShellBar.css">
+</head>
+
+<body class="shellbar1auto">
+
+    <!-- Overflow popover for hidden items -->
+    <ui5-popover id="overflowPopover" placement-type="Bottom" horizontal-align="Right">
+        <div style="padding: 1rem; min-width: 200px;">
+            <ui5-title level="H5" style="margin-bottom: 0.5rem;">Hidden Items</ui5-title>
+            <div id="hiddenItemsContainer" style="display: flex; flex-direction: column; gap: 0.5rem;">
+                <!-- Hidden items will be dynamically added here -->
+            </div>
+        </div>
+    </ui5-popover>
+
+    <!-- Context menu for notifications -->
+    <ui5-menu id="notificationsMenu">
+        <ui5-menu-item text="System Alert" icon="alert"></ui5-menu-item>
+        <ui5-menu-item text="New Messages" icon="message-information"></ui5-menu-item>
+        <ui5-menu-item text="Task Updates" icon="task"></ui5-menu-item>
+        <ui5-menu-item text="Mark All as Read" icon="accept" starts-section></ui5-menu-item>
+    </ui5-menu>
+
+    <ui5-shellbar id="shellbarOverflow" show-notifications>
+        <ui5-shellbar-branding slot="branding">
+            Project Management
+            <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo" />
+        </ui5-shellbar-branding>
+
+        <ui5-button icon="menu2" slot="startButton"></ui5-button>
+        <ui5-button icon="home" slot="startButton"></ui5-button>
+
+        <!-- Multiple content items that can be hidden -->
+        <ui5-tag design="Set3" color-scheme="5" slot="content" id="projectTag" data-hide-order="1">Project
+            Alpha</ui5-tag>
+
+        <ui5-button id="createTaskButton" icon="add" slot="content" data-hide-order="2">New Task</ui5-button>
+
+        <ui5-button id="kanbanButton" icon="grid" slot="content" data-hide-order="3">Kanban View</ui5-button>
+
+        <div slot="content" style="display: flex; align-items: center; gap: 0.5rem;" id="priorityContainer"
+            data-hide-order="4">
+            <ui5-label>High Priority</ui5-label>
+            <ui5-badge color-scheme="8">5</ui5-badge>
+        </div>
+
+        <ui5-button id="teamButton" icon="group" slot="content" data-hide-order="5">Team</ui5-button>
+
+        <ui5-button id="reportsButton" icon="business-objects-experience" slot="content"
+            data-hide-order="6">Reports</ui5-button>
+
+        <ui5-shellbar-spacer slot="content"></ui5-shellbar-spacer>
+
+        <div slot="content" style="display: flex; align-items: center; gap: 0.5rem;" id="deadlineContainer"
+            data-hide-order="7">
+            <ui5-label>Deadline:</ui5-label>
+            <ui5-date-picker id="deadlineDatePicker" value="2024-04-30"></ui5-date-picker>
+        </div>
+
+        <ui5-shellbar-search placeholder="Search tasks..." slot="searchField">
+        </ui5-shellbar-search>
+
+        <ui5-avatar slot="profile" initials="PM"></ui5-avatar>
+    </ui5-shellbar>
+
+    <div class="content">
+        <div style="padding: 2rem;">
+            <ui5-title level="H3">ShellBar Item Overflow Management</ui5-title>
+            <ui5-text>Uses a ui5-shellbar-item that appears when content items are hidden. This provides a more
+                integrated look in the actions area.</ui5-text>
+            <div id="statusDisplay" style="margin-top: 1rem;">
+                <ui5-text>All items visible</ui5-text>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Get references to key elements
+        const shellbarOverflow = document.getElementById("shellbarOverflow");
+        const overflowPopover = document.getElementById("overflowPopover");
+        const hiddenItemsContainer = document.getElementById("hiddenItemsContainer");
+        const statusDisplay = document.getElementById("statusDisplay");
+        const notificationsMenu = document.getElementById("notificationsMenu");
+
+        const overflowShellbarItem = document.createElement("ui5-shellbar-item");
+        overflowShellbarItem.setAttribute("icon", "overflow");
+        overflowShellbarItem.setAttribute("text", "More");
+        overflowShellbarItem.setAttribute("tooltip", "Show hidden items");
+
+        // Data-driven configuration
+        const itemsConfig = {
+            projectTag: {
+                type: 'tag',
+                text: 'Project Alpha',
+                design: 'Set3',
+                colorScheme: '5',
+                action: () => console.log('Project tag clicked from overflow')
+            },
+            createTaskButton: {
+                type: 'button',
+                text: 'New Task',
+                icon: 'add',
+                action: () => {
+                    console.log('Create task clicked from overflow');
+                    overflowPopover.open = false;
+                }
+            },
+            kanbanButton: {
+                type: 'button',
+                text: 'Kanban View',
+                icon: 'grid',
+                action: () => {
+                    console.log('Kanban view clicked from overflow');
+                    overflowPopover.open = false;
+                }
+            },
+            priorityContainer: {
+                type: 'container',
+                content: [
+                    { type: 'label', text: 'High Priority' },
+                    { type: 'badge', text: '5', colorScheme: '8' }
+                ],
+                action: () => console.log('Priority container clicked from overflow')
+            },
+            teamButton: {
+                type: 'button',
+                text: 'Team',
+                icon: 'group',
+                action: () => {
+                    console.log('Team clicked from overflow');
+                    overflowPopover.open = false;
+                }
+            },
+            reportsButton: {
+                type: 'button',
+                text: 'Reports',
+                icon: 'business-objects-experience',
+                action: () => {
+                    console.log('Reports clicked from overflow');
+                    overflowPopover.open = false;
+                }
+            },
+            deadlineContainer: {
+                type: 'container',
+                content: [
+                    { type: 'label', text: 'Deadline:' },
+                    { type: 'date-picker', id: 'deadlineDatePicker_overflow', value: '2024-04-30' }
+                ],
+                action: (element) => {
+                    const datePickerEl = element.querySelector('ui5-date-picker');
+                    if (datePickerEl) {
+                        datePickerEl.addEventListener('change', (event) => {
+                            console.log('Deadline changed from overflow:', event.target.value);
+                            const originalDatePicker = document.getElementById('deadlineDatePicker');
+                            if (originalDatePicker) {
+                                originalDatePicker.value = event.target.value;
+                            }
+                        });
+                    }
+                }
+            }
+        };
+
+        // Create new popover item based on configuration
+        function createPopoverItem(originalItem) {
+            const config = itemsConfig[originalItem.id];
+            const element = document.createElement(config.type === 'container' ? 'div' : `ui5-${config.type}`);
+            
+            if (config.type === 'container') {
+                element.style.cssText = 'display: flex; align-items: center; gap: 0.5rem; width: 100%;';
+                config.content.forEach(item => {
+                    const child = document.createElement(`ui5-${item.type}`);
+                    child.textContent = item.text;
+                    if (item.checked) child.checked = item.checked;
+                    if (item.value) child.value = item.value;
+                    if (item.id) child.id = item.id;
+                    if (item.colorScheme) child.setAttribute('color-scheme', item.colorScheme);
+                    element.appendChild(child);
+                });
+                config.action(element);
+            } else {
+                element.textContent = config.text;
+                element.style.width = '100%';
+                if (config.icon) element.icon = config.icon;
+                if (config.design) element.design = config.design;
+                if (config.colorScheme) element.setAttribute('color-scheme', config.colorScheme);
+                element.addEventListener('click', config.action);
+            }
+            
+            return element;
+        }
+
+        // Handle content item visibility changes
+        shellbarOverflow.addEventListener("content-item-visibility-change", (event) => {
+            const hiddenItems = event.detail.items;
+            hiddenItemsContainer.innerHTML = '';
+            console.error('Content item visibility changed', hiddenItems);
+
+            if (hiddenItems.length > 0) {
+                shellbarOverflow.appendChild(overflowShellbarItem);
+                hiddenItems.forEach(item => {
+                    const popoverItem = createPopoverItem(item);
+                    hiddenItemsContainer.appendChild(popoverItem);
+                });
+                statusDisplay.innerHTML = `<ui5-text>${hiddenItems.length} item(s) hidden - available via shellbar action</ui5-text>`;
+                console.log(`${hiddenItems.length} items hidden:`, hiddenItems.map(item => item.id || item.textContent));
+            } else {
+                overflowShellbarItem.remove();
+                statusDisplay.innerHTML = '<ui5-text>All items visible</ui5-text>';
+                console.log('All items visible');
+            }
+        });
+
+        // Event handlers
+        overflowShellbarItem.addEventListener('click', () => {
+            overflowPopover.opener = overflowShellbarItem;
+            overflowPopover.open = true;
+        });
+
+        shellbarOverflow.addEventListener('ui5-notifications-click', (event) => {
+            event.preventDefault();
+            notificationsMenu.opener = event.detail.targetRef;
+            console.error(event.detail.targetRef);
+            notificationsMenu.open = !notificationsMenu.open;
+        });
+
+        document.getElementById('createTaskButton').addEventListener('click', () => {
+            console.log('Create new task');
+        });
+
+        console.error(document.getElementById('kanbanButton'))
+        document.getElementById('kanbanButton').addEventListener('click', () => {
+            console.log('Switch to kanban view');
+        });
+
+        document.getElementById('teamButton').addEventListener('click', () => {
+            console.log('Open team management');
+        });
+
+        document.getElementById('reportsButton').addEventListener('click', () => {
+            console.log('Open reports');
+        });
+
+        document.getElementById('deadlineDatePicker').addEventListener('change', (event) => {
+            console.log('Deadline changed:', event.target.value);
+        });
+    </script>
+
+</body>
+
+</html>