@neovici/cosmoz-treenode-navigator 7.9.1 → 8.1.0

package/README.md

@@ -3,24 +3,79 @@
 [![Build Status](https://github.com/Neovici/cosmoz-treenode-navigator/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-treenode-navigator/actions?workflow=Github+CI)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-cosmoz-treenode-navigator is a PionJS-based component that lets you navigate and search through hierarchically structured data-nodes and select one of them.
+A [PionJS](https://github.com/nicholaspmccracken/pion)-based web component for navigating, searching, and selecting nodes in a hierarchical tree structure.
 
-It needs an object structure which looks, for example, like this in JSON:
+## Installation
+
+```sh
+npm install @neovici/cosmoz-treenode-navigator
+```
+
+## Quick Start
+
+```js
+import { component, html } from '@pionjs/pion';
+import '@neovici/cosmoz-treenode-navigator/cosmoz-treenode-button-view';
+import { DefaultTree } from '@neovici/cosmoz-tree';
+
+const treeData = {
+	1: {
+		name: 'Root',
+		pathLocator: '1',
+		children: {
+			2: {
+				name: 'Child A',
+				pathLocator: '1.2',
+				children: {},
+			},
+			3: {
+				name: 'Child B',
+				pathLocator: '1.3',
+				children: {
+					4: { name: 'Grandchild', pathLocator: '1.3.4', children: {} },
+				},
+			},
+		},
+	},
+};
+
+const tree = new DefaultTree(treeData);
+
+const MyApp = () => html`
+	<cosmoz-treenode-button-view
+		.tree=${tree}
+		show-reset
+		@node-path-changed=${(e) => console.log('Selected:', e.detail.value)}
+	></cosmoz-treenode-button-view>
+`;
+
+customElements.define('my-app', component(MyApp));
+```
+
+## Tree Data Structure
+
+The component expects a `Tree` object from [`@neovici/cosmoz-tree`](https://github.com/Neovici/cosmoz-tree), typically instantiated with `new DefaultTree(data)`.
+
+The data is a nested object keyed by node IDs:
 
 ```json
 {
 	"1": {
 		"name": "Root",
+		"pathLocator": "1",
 		"children": {
 			"7": {
 				"name": "child seven",
+				"pathLocator": "1.7",
 				"children": {}
 			},
 			"8": {
 				"name": "child eight",
+				"pathLocator": "1.8",
 				"children": {
 					"9": {
 						"name": "child nine",
+						"pathLocator": "1.8.9",
 						"children": {}
 					}
 				}
@@ -30,6 +85,204 @@ It needs an object structure which looks, for example, like this in JSON:
 }
 ```
 
-The property names "name" and "children" are configurable in the component through the setting of "childProperty" and "comparisonProperty".
+The property names `name` and `children` are configurable via `DefaultTree` options (`searchProperty`, `childProperty`). The `pathLocatorSeparator` defaults to `"."`.
+
+## Components
+
+### `<cosmoz-treenode-button-view>`
+
+A trigger button that opens a dialog containing the tree navigator. This is the main component most consumers will use.
+
+#### Properties / Attributes
+
+| Property                | Attribute           | Type      | Default | Description                                     |
+| ----------------------- | ------------------- | --------- | ------- | ----------------------------------------------- |
+| `tree`                  | --                  | `Tree`    | --      | The tree data structure (set via JS)            |
+| `nodePath`              | --                  | `string`  | `''`    | Selected node's path locator (two-way bindable) |
+| `opened`                | --                  | `boolean` | `false` | Whether the dialog is open (two-way bindable)   |
+| `showReset`             | `show-reset`        | `boolean` | `false` | Show the reset/clear button                     |
+| `searchMinLength`       | `search-min-length` | `number`  | `3`     | Minimum characters to trigger search            |
+| `searchDebounceTimeout` | --                  | `number`  | `2000`  | Debounce timeout (ms) before search triggers    |
+
+#### Events
+
+| Event               | Detail               | Description                               |
+| ------------------- | -------------------- | ----------------------------------------- |
+| `node-path-changed` | `{ value: string }`  | Fired when the selected node path changes |
+| `opened-changed`    | `{ value: boolean }` | Fired when the dialog opens or closes     |
+
+#### Slots
+
+| Slot        | Description                                                  |
+| ----------- | ------------------------------------------------------------ |
+| `prefix`    | Button icon (defaults to folder icon, override to customize) |
+| `suffix`    | Content after the button label                               |
+| _(default)_ | Passed through to the inner `<cosmoz-treenode-navigator>`    |
+
+#### CSS Parts
+
+| Part            | Description                                                                    |
+| --------------- | ------------------------------------------------------------------------------ |
+| `actions`       | Container for the open button and optional reset button                        |
+| `action-open`   | The main trigger button (`cosmoz-button`)                                      |
+| `action-reset`  | The reset/clear button (`cosmoz-button`, visible when `showReset && nodePath`) |
+| `dialog`        | The `<dialog>` element                                                         |
+| `header`        | Dialog header                                                                  |
+| `heading`       | Dialog heading (`<h1>`)                                                        |
+| `main`          | Dialog main content area                                                       |
+| `footer`        | Dialog footer                                                                  |
+| `select-button` | The "Select" confirmation button                                               |
+| `cancel-button` | The "Cancel" button                                                            |
+
+#### Container Query Support
+
+The host element is declared as a CSS container (`container-type: inline-size`). When the component's width shrinks to 80px or less, the selected node path text is automatically hidden, leaving only the icon. This allows graceful degradation in narrow layouts without media queries.
+
+```css
+/* Built-in behavior */
+:host {
+	container-type: inline-size;
+}
+
+@container (max-width: 80px) {
+	.path-text {
+		display: none;
+	}
+}
+```
+
+---
+
+### `<cosmoz-treenode-navigator>`
+
+The inner navigator component that provides tree browsing, search, and keyboard navigation. Typically used inside `<cosmoz-treenode-button-view>`, but can be used standalone.
+
+#### Properties
+
+| Property                | Type      | Default     | Description                                     |
+| ----------------------- | --------- | ----------- | ----------------------------------------------- |
+| `tree`                  | `Tree`    | --          | The tree data structure (set via JS)            |
+| `nodePath`              | `string`  | `''`        | Selected node's path locator (two-way bindable) |
+| `highlightedNodePath`   | `string`  | `''`        | Currently highlighted node's path (notify only) |
+| `opened`                | `boolean` | `undefined` | Controls keyboard listeners and scroll behavior |
+| `searchMinLength`       | `number`  | `3`         | Minimum characters to trigger search            |
+| `searchDebounceTimeout` | `number`  | `2000`      | Debounce timeout (ms) before search triggers    |
+
+#### Events
+
+| Event                           | Detail              | Description                               |
+| ------------------------------- | ------------------- | ----------------------------------------- |
+| `node-path-changed`             | `{ value: string }` | Fired when the selected node path changes |
+| `highlighted-node-path-changed` | `{ value: string }` | Fired when the highlighted node changes   |
+
+#### CSS Custom Properties
+
+| Property                                              | Default                         | Description                                 |
+| ----------------------------------------------------- | ------------------------------- | ------------------------------------------- |
+| `--cosmoz-treenode-navigator-icon-color`              | `currentColor`                  | Color of navigation icons (home, arrow)     |
+| `--cosmoz-treenode-navigator-select-node-icon-color`  | `var(--primary-color, #3a91e2)` | Color of the selected/highlighted node icon |
+| `--cosmoz-treenode-navigator-list-item-focused-color` | `#f0f8ff`                       | Background color of focused list items      |
+| `--cosmoz-treenode-navigator-list-height`             | `50vh`                          | Height of the scrollable node list          |
+| `--cz-text-color`                                     | `inherit`                       | General text color                          |
+| `--cz-bg-color`                                       | `#f5f5f5`                       | Section header background color             |
+
+## Internationalization
+
+All UI text is managed via [`i18next`](https://www.i18next.com/). The English text is used as the translation key, so it works out of the box when no translations are loaded (i18next returns the key as-is).
+
+Consumers must initialize i18next before using the components:
+
+```js
+import i18next from 'i18next';
+
+i18next.init({ lng: 'en', resources: {} });
+```
+
+To provide translations, use `i18next.addResourceBundle()` or any i18next backend:
+
+```js
+i18next.addResourceBundle('sv', 'translation', {
+	'Select a node': 'Valj en nod',
+	'Search or navigate to chosen destination':
+		'Sok eller navigera till vald destination',
+	'Search...': 'Sok...',
+	'Click to search again but globally': 'Klicka for att soka igen men globalt',
+	Select: 'Valj',
+	Cancel: 'Avbryt',
+});
+```
+
+### Translation Keys
+
+| Key                                        | Used in                                     |
+| ------------------------------------------ | ------------------------------------------- |
+| `Select a node`                            | Button placeholder when no node is selected |
+| `Search or navigate to chosen destination` | Dialog heading                              |
+| `Search...`                                | Search input placeholder                    |
+| `Click to search again but globally`       | Global search button label                  |
+| `Select`                                   | Dialog confirm button                       |
+| `Cancel`                                   | Dialog cancel button                        |
+
+## Migrating from v7
+
+This version includes breaking changes to the component API.
+
+### Property Changes
+
+| Before                    | After                | Notes                                                        |
+| ------------------------- | -------------------- | ------------------------------------------------------------ |
+| `noReset` (opt-out)       | `showReset` (opt-in) | Inverted logic: set `show-reset` to display the reset button |
+| `selectedNode`            | _removed_            | Use `nodePath` instead                                       |
+| `highlightedNode`         | _removed_            | Use `highlightedNodePath` (on the navigator) instead         |
+| `dialogText`              | _removed_            | Now managed via `i18next.t()`                                |
+| `buttonTextPlaceholder`   | _removed_            | Now managed via `i18next.t()`                                |
+| `searchPlaceholder`       | _removed_            | Now managed via `i18next.t()`                                |
+| `searchGlobalPlaceholder` | _removed_            | Now managed via `i18next.t()`                                |
+
+`nodePath` is now the single source of truth for the selected node. Dialog navigation no longer affects the selected node until explicitly confirmed via the Select button.
+
+### Dependency Changes
+
+| Before                    | After                         |
+| ------------------------- | ----------------------------- |
+| `@neovici/cosmoz-i18next` | `i18next` (direct dependency) |
+
+All UI text is now translated via `i18next.t()` instead of being passed as component properties. See [Internationalization](#internationalization) for details.
+
+### Selector Changes
+
+All buttons have been converted to `cosmoz-button` components. Update any CSS selectors accordingly:
+
+| Before                         | After                                 |
+| ------------------------------ | ------------------------------------- |
+| `button.action-open`           | `cosmoz-button[part="action-open"]`   |
+| `button.action-reset`          | `cosmoz-button[part="action-reset"]`  |
+| `button[part="select-button"]` | `cosmoz-button[part="select-button"]` |
+| `button[part="cancel-button"]` | `cosmoz-button[part="cancel-button"]` |
+| `button.btn-ghost`             | `cosmoz-button[variant="link"]`       |
+
+### Slot Changes
+
+| Before          | After    | Notes                                                      |
+| --------------- | -------- | ---------------------------------------------------------- |
+| `button-before` | `prefix` | Now uses default slot content instead of JS-based toggling |
+| `button-after`  | `suffix` | Renamed for consistency                                    |
+
+## Development
+
+| Command                   | Description                                        |
+| ------------------------- | -------------------------------------------------- |
+| `npm start`               | Start Storybook dev server on port 8000            |
+| `npm test`                | Run all tests (unit + storybook interaction tests) |
+| `npm run test:unit`       | Run unit tests only                                |
+| `npm run test:storybook`  | Run storybook interaction tests only               |
+| `npm run test:watch`      | Run tests in watch mode                            |
+| `npm run lint`            | Lint with ESLint                                   |
+| `npm run build`           | Compile TypeScript                                 |
+| `npm run storybook:build` | Build static Storybook                             |
+
+Tests use [Vitest](https://vitest.dev/) with two projects: `unit` (jsdom) for helper function tests, and `storybook` (Playwright browser mode) for component interaction tests via Storybook play functions.
+
+## License
 
-### Backwards compatibility added
+[Apache-2.0](LICENSE)

package/dist/cosmoz-treenode-button-view.d.ts

@@ -1,2 +1,4 @@
+import '@neovici/cosmoz-button/cosmoz-button';
+import '@neovici/cosmoz-tooltip';
 import './cosmoz-treenode-navigator';
 //# sourceMappingURL=cosmoz-treenode-button-view.d.ts.map

package/dist/cosmoz-treenode-button-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cosmoz-treenode-button-view.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.ts"],"names":[],"mappings":"AAcA,OAAO,6BAA6B,CAAC"}
+{"version":3,"file":"cosmoz-treenode-button-view.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.ts"],"names":[],"mappings":"AAaA,OAAO,sCAAsC,CAAC;AAC9C,OAAO,yBAAyB,CAAC;AAIjC,OAAO,6BAA6B,CAAC"}

package/dist/cosmoz-treenode-button-view.js

@@ -1,93 +1,66 @@
-/*eslint-disable max-statements */
 import { component, lift, useEffect, useMemo, useProperty, useRef, useState, } from '@pionjs/pion';
 import { html } from 'lit-html';
 import { ref } from 'lit/directives/ref.js';
 import style from './cosmoz-treenode-button-view.styles';
+import '@neovici/cosmoz-button/cosmoz-button';
+import '@neovici/cosmoz-tooltip';
+import { t } from 'i18next';
+import { when } from 'lit-html/directives/when.js';
 import './cosmoz-treenode-navigator';
 import { useKeyDown } from './hooks/useKeyDown';
-import { when } from 'lit-html/directives/when.js';
-import { debounce$ } from '@neovici/cosmoz-utils/promise';
 import { getTreePathParts } from './util/helpers';
-const CosmozNodeButtonView = ({ tree, multiSelection = false, dialogText, buttonTextPlaceholder, searchPlaceholder, noReset = false, searchGlobalPlaceholder, searchMinLength = 3, searchDebounceTimeout = 2000, }) => {
+const defaultIcon = html `<svg
+	class="default-icon"
+	width="20"
+	height="20"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<circle cx="7" cy="7" r="2" />
+	<circle cx="17" cy="17" r="2" />
+	<path d="M7 9v3c0 1.66 1.34 3 3 3h7" />
+</svg>`;
+const CosmozNodeButtonView = ({ tree, showReset = false, searchMinLength = 3, searchDebounceTimeout = 2000, }) => {
     const dialogRef = useRef(null);
-    const searchInputRef = useRef(null);
-    const [highlightedNode, setHighlightedNode] = useProperty('highlightedNode');
-    // legacy props
-    const [selectedNode, setSelectedNode] = useProperty('selectedNode');
+    // nodePath is the single source of truth - external two-way binding
     const [nodePath, setNodePath] = useProperty('nodePath', '');
-    const [nodesOnNodePath, setNodesOnNodePath] = useProperty('nodesOnNodePath', []);
-    const [opened, setOpened] = useState(false);
-    const [selectedNodes, setSelectedNodes] = useState([]);
-    useEffect(() => {
-        if (dialogRef.current) {
-            searchInputRef.current = dialogRef.current
-                .querySelector('cosmoz-treenode-navigator')
-                ?.shadowRoot?.querySelector('cosmoz-input');
-        }
-    }, [dialogRef.current]);
-    // external updates to "selectedNode"
-    useEffect(() => {
-        if (selectedNode && selectedNode !== highlightedNode) {
-            setHighlightedNode(selectedNode);
-        }
-    }, [selectedNode]);
-    // external updates to "nodePath"
-    useEffect(() => {
-        if (!(nodePath || tree)) {
-            return;
-        }
-        const parts = getTreePathParts(nodePath, tree);
-        setNodesOnNodePath(parts);
-        const last = parts.length > 0 ? parts[parts.length - 1] : null;
-        if (last && last !== highlightedNode) {
-            setHighlightedNode(last);
-        }
-    }, [nodePath, tree]);
+    // opened is controllable externally
+    const [opened, setOpened] = useProperty('opened', false);
+    // Track highlighted node path from navigator for Select button
+    const [highlightedNodePath, setHighlightedNodePath] = useState('');
+    // nodesOnNodePath derived from nodePath + tree
+    const nodesOnNodePath = useMemo(() => getTreePathParts(nodePath, tree), [nodePath, tree]);
+    // buttonLabel derived from nodesOnNodePath
     const buttonLabel = useMemo(() => {
         if (!Array.isArray(nodesOnNodePath) || nodesOnNodePath.length === 0) {
-            return buttonTextPlaceholder || '';
+            return t('Select a node');
         }
         return nodesOnNodePath
             .filter((n) => n)
             .map((part) => part[tree.searchProperty])
             .join(' / ');
     }, [nodesOnNodePath, tree]);
+    // Sync dialog DOM state with opened property
+    useEffect(() => {
+        if (opened) {
+            dialogRef.current?.showModal();
+        }
+        else {
+            dialogRef.current?.close();
+        }
+    }, [opened]);
     const reset = () => {
-        setNodesOnNodePath([]);
-        setSelectedNodes([]);
-        setHighlightedNode(null);
-        setSelectedNode(null);
         setNodePath('');
     };
-    const clearItemSelection = ({ item, ev }) => {
-        setSelectedNodes(selectedNodes.filter((node) => node !== item));
-        ev.preventDefault();
-        ev.stopPropagation();
-    };
-    const getChipText = (node) => {
-        return node.name;
-    };
-    const showSelectedNodes = (multiSelection, selectedNodesLength) => {
-        return multiSelection && selectedNodesLength > 0;
-    };
-    const refit = debounce$(() => {
-        dialogRef.current?.fit?.();
-    }, 50);
-    const focusSearch = () => {
-        if (searchInputRef.current) {
-            searchInputRef.current.focus();
-        }
-    };
-    const onOpen = () => {
-        dialogRef.current?.showModal();
-        setOpened(true);
-        setTimeout(focusSearch, 0);
-    };
-    const onClose = () => {
-        setOpened(false);
-        dialogRef.current?.close();
-    };
+    const onOpen = () => setOpened(true);
+    const onClose = () => setOpened(false);
     useKeyDown('Escape', onClose);
+    // Dialog dragging support
     const onHeaderMouseDown = (e) => {
         const dialog = dialogRef.current;
         if (!dialog)
@@ -111,84 +84,81 @@ const CosmozNodeButtonView = ({ tree, multiSelection = false, dialogText, button
         document.addEventListener('mousemove', onMouseMove);
         document.addEventListener('mouseup', onMouseUp);
     };
-    // `cosmoz-treenode-navigator` handles updating nodesOnNodePath
-    const selectNode = () => {
-        if (!highlightedNode?.pathLocator) {
-            return;
+    // Handle node-path-changed from navigator - close dialog on selection
+    const onNodePathChanged = (e) => {
+        e.preventDefault();
+        const newPath = e.detail.value;
+        if (newPath) {
+            setNodePath(newPath);
+            onClose();
         }
-        if (multiSelection &&
-            !selectedNodes.some((n) => n.pathLocator === highlightedNode.pathLocator)) {
-            setSelectedNodes([...selectedNodes, highlightedNode]);
+    };
+    // Handle highlighted-node-path-changed from navigator
+    const onHighlightedNodePathChanged = lift(setHighlightedNodePath);
+    // Handle Select button click
+    const onSelect = () => {
+        if (highlightedNodePath) {
+            setNodePath(highlightedNodePath);
+            onClose();
         }
-        // update legacy props
-        setSelectedNode(highlightedNode);
-        setNodePath(highlightedNode.pathLocator);
-        setNodesOnNodePath(getTreePathParts(highlightedNode.pathLocator, tree));
-        onClose();
     };
     return html `
-		<div class="actions" part="actions">
-			<button
-				class="action-open"
-				type="button"
-				@click=${onOpen}
-				part="action-open"
-			>
-				<slot name="button-before"></slot>
-				<div class="path-text">
-					<span>${buttonLabel}</span>
-				</div>
-				<slot name="button-after"></slot>
-			</button>
-			${when(!noReset && !!selectedNode, () => html ` <button
-						@click=${reset}
-						class="action-reset"
-						part="action-reset"
-					>
-						<svg
-							width="10"
-							height="9"
-							viewBox="0 0 10 9"
-							stroke="currentColor"
-							xmlns="http://www.w3.org/2000/svg"
+		<cosmoz-tooltip
+			placement="right"
+			.description=${buttonLabel}
+			.delay=${1000}
+		>
+			<div class="actions" part="actions">
+				<cosmoz-button
+					variant="secondary"
+					full-width
+					data-testid="open-button"
+					@click=${onOpen}
+					part="action-open"
+				>
+					<slot name="prefix" slot="prefix">${defaultIcon}</slot>
+					<div class="path-text">
+						<span>${buttonLabel}</span>
+					</div>
+					<slot name="suffix" slot="suffix"></slot>
+				</cosmoz-button>
+				${when(showReset && !!nodePath, () => html `<cosmoz-button
+							variant="tertiary"
+							@click=${reset}
+							data-testid="reset-button"
+							part="action-reset"
 						>
-							<line
-								x1="8.53033"
-								y1="0.53033"
-								x2="1.53033"
-								y2="7.53033"
-								stroke-width="1.5"
-							></line>
-							<line
-								x1="8.46967"
-								y1="7.53033"
-								x2="1.46967"
-								y2="0.530331"
-								stroke-width="1.5"
-							></line>
-						</svg>
-					</button>`)}
-		</div>
-		${when(showSelectedNodes(multiSelection, selectedNodes.length), () => html `
-				<div id="chips" part="chips" class="row">
-					${selectedNodes.map((item) => html `
-							<div class="chip">
-								<span>${getChipText(item)}</span>
-								<button
-									class="chip__clear"
-									@click=${(ev) => clearItemSelection({ item, ev })}
-									type="button"
-								>
-									&times;
-								</button>
-							</div>
-						`)}
-				</div>
-			`)}
+							<svg
+								slot="prefix"
+								width="10"
+								height="9"
+								viewBox="0 0 10 9"
+								stroke="currentColor"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<line
+									x1="8.53033"
+									y1="0.53033"
+									x2="1.53033"
+									y2="7.53033"
+									stroke-width="1.5"
+								></line>
+								<line
+									x1="8.46967"
+									y1="7.53033"
+									x2="1.46967"
+									y2="0.530331"
+									stroke-width="1.5"
+								></line>
+							</svg>
+						</cosmoz-button>`)}
+			</div>
+		</cosmoz-tooltip>
 
 		<dialog
 			class="dialog"
 			part="dialog"
+			data-testid="dialog"
 			${ref((el) => {
         dialogRef.current = el;
     })}
@@ -198,58 +168,51 @@ const CosmozNodeButtonView = ({ tree, multiSelection = false, dialogText, button
 				part="header"
 				@mousedown=${onHeaderMouseDown}
 			>
-				<h1 class="dialog-heading" part="heading">${dialogText}</h1>
+				<h1 class="dialog-heading" part="heading">
+					${t('Search or navigate to chosen destination')}
+				</h1>
 			</header>
 			<main class="dialog-main" part="main">
 				<cosmoz-treenode-navigator
 					id="treeNavigator"
 					class="dialog-treenode-navigator no-padding"
-					.highlightedNode=${highlightedNode}
-					@highlighted-node-changed=${lift(setHighlightedNode)}
-					.searchPlaceholder=${searchPlaceholder}
-					.searchGlobalPlaceholder=${searchGlobalPlaceholder}
+					.nodePath=${nodePath}
+					@node-path-changed=${onNodePathChanged}
+					@highlighted-node-path-changed=${onHighlightedNodePathChanged}
 					.searchMinLength=${searchMinLength}
 					.searchDebounceTimeout=${searchDebounceTimeout}
 					.tree=${tree}
 					.opened=${opened}
-					.nodesOnNodePath=${nodesOnNodePath}
-					@node-dblclicked=${selectNode}
-					@on-data-plane-changed=${refit}
 				>
 					<slot></slot>
 				</cosmoz-treenode-navigator>
 			</main>
 			<footer class="dialog-footer" part="footer">
-				<p class="dialog-footer-button-container">
-					<button
-						?disabled=${!highlightedNode?.pathLocator}
-						autofocus
-						class="dialog-footer-button"
+				<div class="dialog-footer-button-container">
+					<cosmoz-button
+						variant="primary"
+						?disabled=${!highlightedNodePath}
+						@click=${onSelect}
+						data-testid="select-button"
 						part="select-button"
-						@click=${selectNode}
 					>
-						Select
-					</button>
-					<button
-						class="dialog-footer-button"
-						part="cancel-button"
+						${t('Select')}
+					</cosmoz-button>
+					<cosmoz-button
+						variant="secondary"
 						@click=${onClose}
+						data-testid="cancel-button"
+						part="cancel-button"
 					>
-						Cancel
-					</button>
-				</p>
+						${t('Cancel')}
+					</cosmoz-button>
+				</div>
 			</footer>
 		</dialog>
 	`;
 };
 CosmozNodeButtonView.observedAttributes = [
-    'button-text-placeholder',
-    'dialog-text',
-    'search-placeholder',
-    'search-global-placeholder',
-    'node-path',
-    'selected-node',
-    'no-reset',
+    'show-reset',
     'search-min-length',
 ];
 customElements.define('cosmoz-treenode-button-view', component(CosmozNodeButtonView, {