@siemens/ix 0.0.0-20240419081748 → 0.0.0-20240508065324

package/dist/collection/components/menu-item/menu-item.js

@@ -89,13 +89,13 @@ export class MenuItem {
                 slot: 'bottom',
             };
         }
-        return (h(Host, Object.assign({ key: 'bfc3aa3ed90de347026711d3af189c0bbe99e1ae', class: {
+        return (h(Host, Object.assign({ key: '777964dc37701b147cba8070470a0dba049ccc9b', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
                 active: this.active,
                 'tab-nested': this.isHostedInsideCategory,
-            } }, extendedAttributes), h("button", { key: '17d3a3ec7b65c596f0eaaa26d0202b38a9ab7023', class: "tab", tabIndex: this.disabled ? -1 : 0, role: "listitem", ref: this.buttonRef }, (this.icon || this.tabIcon) && (h("ix-icon", { class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null, h("span", { key: '6289a0f93a7b79580c2962c2e51bf427eeb01183', class: "tab-text text-default" }, this.label, " ", h("slot", { key: 'de9ccad5b97b9603de86791a3a98656a2add17d3' }))), !this.isCategory &&
+            } }, extendedAttributes), h("button", { key: '20f94fbcf3babdadc83c4c2b4a267c6d74266541', class: "tab", tabIndex: this.disabled ? -1 : 0, role: "listitem", ref: this.buttonRef }, (this.icon || this.tabIcon) && (h("ix-icon", { class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null, h("span", { key: 'a168fd4927264ce970c52098a6a4a1263db48f6d', class: "tab-text text-default" }, this.label, " ", h("slot", { key: '36a52eb3d0cd6f96c5c3a6f36bffa1593c78fb1c' }))), !this.isCategory &&
             !this.isHostedInsideCategory &&
             !this.menuExpanded && (h("ix-tooltip", { for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
     }

package/dist/collection/components/menu-settings-item/menu-settings-item.js

@@ -19,7 +19,7 @@ export class MenuSettingsItem {
         });
     }
     render() {
-        return (h(Host, { key: 'af7b6698864d0f6c2e893843787b07450f586259' }, h("slot", { key: '5ced9613e2513330bd9d8152656dedb7320bdd74' })));
+        return (h(Host, { key: 'ece4d8e415ca694383a7a2e3bd55733e43521143' }, h("slot", { key: '3da9723abce35580aa1d6382ff936887a538fe9e' })));
     }
     static get is() { return "ix-menu-settings-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message-bar/message-bar.js

@@ -42,7 +42,7 @@ export class MessageBar {
         this.closedChange.emit();
     }
     render() {
-        return (h(Host, { key: '610b30afda9530351f18514757fa02bb463f14fd' }, h("div", { key: 'f087c80eabe66fdc962c565fe3dd0130d5e80189', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '875022604fb5bb38cac7d8e46ca718e45ef9f686', color: this.color, name: this.icon }), h("div", { key: 'bca551cd194acac092778d7c3f86f46f6e6178ea', class: "message-content" }, h("slot", { key: '18051ca8aa62cb9fa4a4ca5e84fa8f06510f323d' })), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
+        return (h(Host, { key: '1e6b060fd39fb008c5ce8e56553b7ee235d5db2d' }, h("div", { key: 'a0f00d550a6c2e2f61918bbccd2c342100e73dcd', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '5bbfa1b8fcd0025b4d2fa0b488c604458fc4e131', color: this.color, name: this.icon }), h("div", { key: '78e83b8a02ea46b6b3ba65690d5939f00a63ca78', class: "message-content" }, h("slot", { key: 'b5813c317b7ea1b0c0e6919488016a43140dd68f' })), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
                 this.closeAlert(this.divElement);
             }, "data-testid": "close-btn" })) : (''))));
     }

package/dist/collection/components/modal-content/modal-content.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalContent {
     render() {
-        return (h(Host, { key: 'a879639cc048dc4388ff5f324c6beaf928089480' }, h("slot", { key: 'b7d7d8afe947646464dd409bcc574cba40c9a1b3' })));
+        return (h(Host, { key: 'ae7d626442e1d32189d5811a76b9921e893a2708' }, h("slot", { key: '09c33581a65e4db3f54ee84f625bf5c601b0178c' })));
     }
     static get is() { return "ix-modal-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-footer/modal-footer.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalFooter {
     render() {
-        return (h(Host, { key: '798888b92e40b6c7fe43eddfc94437d8fc8a49c8' }, h("slot", { key: '2da276a8b43f061d07f85953e1e54e144944267e' })));
+        return (h(Host, { key: '10d32ee56938d12d5300cc8bccb401a4492ddb85' }, h("slot", { key: '63b0a1b1611bfd377192b6f49e22fc22861f809b' })));
     }
     static get is() { return "ix-modal-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-header/modal-header.js

@@ -39,7 +39,7 @@ export class ModalHeader {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (h(Host, { key: 'ae262d966e9e69c5c7558190f61928b4c109643f' }, this.icon ? (h("ix-icon", { class: 'modal-icon', name: this.icon, color: this.iconColor })) : null, h("ix-typography", { key: '4ff8195c0b582e37527d793e1e32615cb190e0a5', variant: 'default-title' }, h("slot", { key: '10f9506941a2f34631520d7209612c3cf07dd431' })), !this.hideClose ? (h("ix-icon-button", { onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close", class: 'modal-close' })) : null));
+        return (h(Host, { key: '330fd598a3b07d2f41c9f683923101f77d214fe5' }, this.icon ? (h("ix-icon", { class: 'modal-icon', name: this.icon, color: this.iconColor })) : null, h("ix-typography", { key: 'a07ec792401066c71a1f4d50aa318a38c3fbe0ee', variant: 'default-title' }, h("slot", { key: '9c1ba3358ad6efb9971ed896764441c1a3fc4a89' })), !this.hideClose ? (h("ix-icon-button", { onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close", class: 'modal-close' })) : null));
     }
     static get is() { return "ix-modal-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-loading/modal-loading.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalLoading {
     render() {
-        return (h(Host, { key: '9333078e1c22a3307abb022ca8cf761667ce9d95' }, h("ix-spinner", { key: '895d205873c13dfa9257627094b67a9bfb40e04a', variant: "primary" }), h("span", { key: '9c84db0939e4f9fbf359425251103ce9ba2cd968', class: 'loading-text' }, h("slot", { key: 'b2fa68d8d6ab862b88cf7deadc4249c2775fd6e6' }))));
+        return (h(Host, { key: 'f6d440918bef7125ac06449ab6d0cd4088f5fefb' }, h("ix-spinner", { key: '3efc2e66c193f2af94f4f5d6dc3e91daa2049008', variant: "primary" }), h("span", { key: '4d81c46bedae034801a35637ca78bd8f2b618124', class: 'loading-text' }, h("slot", { key: '90bf6e1aeac791f70c203fb6bf32dcb7cb313719' }))));
     }
     static get is() { return "ix-modal-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.js

@@ -124,10 +124,10 @@ export class Pagination {
         return h("span", { class: "page-buttons" }, pageButtons);
     }
     render() {
-        return (h(Host, { key: '85e2d8d8a0b65799e17d53eaa18f7ffba858fba3' }, h("ix-icon-button", { key: 'e77de9c81cf24077466ede7211db3f13caa7f256', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
+        return (h(Host, { key: '0d3ee03dc65b4178ad572d753d2c01f35c853d0e' }, h("ix-icon-button", { key: '58af8c5d7a36d3ddf24f1dde1b39cac9c3c2d929', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
                 const index = Number.parseInt(e.target['value']);
                 this.selectPage(index - 1);
-            } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: 'dfa3fcd219a8817e304adfecd8d1a84cce8dd580', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: 'bac7c247befd2262c9c01c95d2feba78dc4dfa12', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
                 const count = Number.parseInt(Array.isArray(e.detail) ? e.detail[0] : e.detail);
                 this.itemCountChanged.emit(count);
             } }, h("ix-select-item", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));

package/dist/collection/components/pane-layout/pane-layout.js

@@ -230,7 +230,7 @@ export class Panes {
         return pane ? pane.floating : false;
     }
     render() {
-        return (h(Host, { key: '90da4f25bcad07a3a2a4bfc551a129deac824d84' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
+        return (h(Host, { key: '4167dc285dcf1adaf15f0eb3b9f6692e27918b43' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
                 row: true,
                 'padding-left': this.hasPadding('left'),
                 'padding-right': this.hasPadding('right'),

package/dist/collection/components/pill/pill.js

@@ -26,13 +26,13 @@ export class Pill {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: 'a16d4165f6412fa48a0bb642b0ba1980ef2e9775', style: this.variant === 'custom'
+        return (h(Host, { key: 'd7aa88991ef6b8cf39358e65a3c3745d9b6cf112', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.pillColor) !== null && _b !== void 0 ? _b : this.color,
                 }
                 : {}, title: this.el.textContent, class: {
                 'align-left': this.alignLeft,
-            } }, h("div", { key: 'f700d598c5f02e2e8090798337bf47ec10abda39', style: Object.assign({}, customStyle), class: {
+            } }, h("div", { key: '490ecb6d8560e39541d50b5d538608adef939dcf', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -46,10 +46,10 @@ export class Pill {
                 custom: this.variant === 'custom',
                 closable: false,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: '599c7381a83a567637f0f2584596d2ba8745df82', class: {
+            } }, h("ix-icon", { key: 'd615b73a2bdd35fa67409e0783324abd2fc02f21', class: {
                 'with-icon': true,
                 hidden: this.icon === undefined || this.icon === '',
-            }, name: this.icon, size: '16' }), h("span", { key: '65760423d94f21f1d3286f80fba0139338bd10ba', class: "slot-container" }, h("slot", { key: 'f7c2b9dec75d1042a1d98168d3be90a509b7b0d3' })))));
+            }, name: this.icon, size: '16' }), h("span", { key: '8c4f149571ae115af0cc264634f03633988d7871', class: "slot-container" }, h("slot", { key: '582ff33fd2b1cd6de42d4febbcd7f2ad31be0e02' })))));
     }
     static get is() { return "ix-pill"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/playground/example-modal.js

@@ -16,7 +16,7 @@ export class ModalExample {
         closeModal(this.host, 'Done!');
     }
     render() {
-        return (h(Host, { key: '6588eca80a4a796627317d549ced3d767792d528' }, h("div", { key: '06a4f6cb97ef30f9bdc406ca7bad4a1978c8df03' }, h("div", { key: 'dfc00207c3d9ead47420a30768e216b7907588c9', class: "modal-header" }, "Message headline", h("ix-icon-button", { key: '2b01ad4f2e9ca5e277c4d53b6d6cdb5d2b9b74c8', "data-close-button": true, ghost: true, icon: 'close', onClick: () => this.dismiss() })), h("div", { key: '4d1ac160957975fe53162ebd42dd2bd8d6dee0d9', class: "modal-body" }, "Message text lorem ipsum"), h("div", { key: '9709cda6c07d7c0abe13424dc87c64bb11162622', class: "modal-footer" }, h("ix-button", { key: 'f2c257ebea902ef30674ad2d24a150ad17b82df3', outline: true, onClick: () => this.dismiss() }, "Cancel"), h("ix-button", { key: '1f512110cfacee2259d709031be3e5a5869d9704', onClick: () => this.close() }, "OK")))));
+        return (h(Host, { key: 'e219bbf7bea6f929aa522982cbdf055b3fc45a92' }, h("div", { key: '186e10c89c6fd9f626a8fa7642a3a2efe9b4e899' }, h("div", { key: '2919c50fa62881cc689d659657bd5b55fb7c6f81', class: "modal-header" }, "Message headline", h("ix-icon-button", { key: '3dc6851c96c9140f1b13a0c312100acd71762fcd', "data-close-button": true, ghost: true, icon: 'close', onClick: () => this.dismiss() })), h("div", { key: '4b202214dad7f1502f4201969d7cf1a378a55957', class: "modal-body" }, "Message text lorem ipsum"), h("div", { key: 'b8df28789d9cede8b78117a8b2cd88b7088e9ea1', class: "modal-footer" }, h("ix-button", { key: 'eace38404f5761f3ead889d477481dfd33a5de3a', outline: true, onClick: () => this.dismiss() }, "Cancel"), h("ix-button", { key: '38d00bad14606c86ea9ca37bae984579a43475e6', onClick: () => this.close() }, "OK")))));
     }
     static get is() { return "ix-modal-example"; }
     static get elementRef() { return "host"; }

package/dist/collection/components/playground/playground.js

@@ -10,7 +10,7 @@ import { h, Host } from "@stencil/core";
 /** @internal */
 export class PlaygroundInternal {
     render() {
-        return h(Host, { key: 'd1a5b02febd62dcc43ea13c0a531990ec5fe2156' });
+        return h(Host, { key: '64dc9d49b33337f3f1fbfef272dbe26bc08a17a8' });
     }
     static get is() { return "ix-playground-internal"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/row/row.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Row {
     render() {
-        return (h(Host, { key: '2466651a95ad4ca4c2871ee034342efb743fe6f5' }, h("slot", { key: 'd1bfd21c5948cc460601e570566d2b321b13b7ba' })));
+        return (h(Host, { key: '1ffd343609151d842c357f2e7663e4c772b8ef5a' }, h("slot", { key: 'f3c73ee49974fb8baa706a9b699fe703166f2f96' })));
     }
     static get is() { return "ix-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.css

@@ -124,25 +124,43 @@
   outline: 1px solid #119fff;
   outline-offset: var(--theme-input--focus--outline-offset);
 }
-:host .select.readonly {
+:host .select.readonly,
+:host .select.disabled {
   box-shadow: none !important;
   border: none;
-  border-radius: 0px;
-  border-bottom: var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr);
+  border-radius: 0;
+  cursor: pointer;
 }
-:host .select.readonly, :host .select.readonly:hover, :host .select.readonly:active {
+:host .select.readonly, :host .select.readonly:hover, :host .select.readonly:active,
+:host .select.disabled,
+:host .select.disabled:hover,
+:host .select.disabled:active {
   background-color: transparent !important;
 }
-:host .select.readonly:focus, :host .select.readonly:focus-within, :host .select.readonly:focus-visible {
+:host .select.readonly:focus, :host .select.readonly:focus-within, :host .select.readonly:focus-visible,
+:host .select.disabled:focus,
+:host .select.disabled:focus-within,
+:host .select.disabled:focus-visible {
   outline: none;
 }
-:host .select.readonly input {
-  color: var(--theme-color-weak-text);
-}
 :host .select.readonly input:focus,
-:host .select.readonly input:focus-visible {
+:host .select.readonly input:focus-visible,
+:host .select.disabled input:focus,
+:host .select.disabled input:focus-visible {
   outline: none;
 }
+:host .select.disabled {
+  border-bottom: var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr);
+}
+:host .select.disabled input {
+  color: var(--theme-color-weak-text);
+}
+:host .select.readonly {
+  border-bottom: var(--theme-input--border-thickness) solid var(--theme-color-soft-bdr);
+}
+:host .select.readonly input {
+  color: var(--theme-color-std-text);
+}
 :host .hidden {
   display: none !important;
 }

package/dist/collection/components/select/select.js

@@ -17,9 +17,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h, Host, } from "@stencil/core";
+import { ArrowFocusController } from "../utils/focus";
 import { OnListener } from "../utils/listener";
+import { createMutationObserver } from "../utils/mutation-observer";
 export class Select {
     constructor() {
+        this.focusControllerCallbackBind = this.focusDropdownItem.bind(this);
+        this.itemObserver = createMutationObserver(() => {
+            this.arrowFocusController.items = this.visibleNonShadowItems;
+        });
         this.selectedIndices = undefined;
         this.value = undefined;
         this.allowClear = false;
@@ -37,16 +43,27 @@ export class Select {
         this.dropdownWrapperRef = undefined;
         this.dropdownAnchor = undefined;
         this.isDropdownEmpty = false;
-        this.hasFocus = false;
         this.navigationItem = undefined;
         this.inputFilterText = undefined;
         this.inputValue = undefined;
     }
+    get nonShadowItems() {
+        return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
+    }
+    get visibleNonShadowItems() {
+        return this.nonShadowItems.filter((item) => !item.classList.contains('d-none'));
+    }
+    get shadowItems() {
+        return Array.from(this.hostElement.shadowRoot.querySelectorAll('ix-select-item'));
+    }
+    get visibleShadowItems() {
+        return this.shadowItems.filter((item) => !item.classList.contains('d-none'));
+    }
     get items() {
-        return [
-            ...Array.from(this.hostElement.querySelectorAll('ix-select-item')),
-            ...Array.from(this.hostElement.shadowRoot.querySelectorAll('ix-select-item')),
-        ];
+        return [...this.nonShadowItems, ...this.shadowItems];
+    }
+    get visibleItems() {
+        return this.items.filter((item) => !item.classList.contains('d-none'));
     }
     get selectedItems() {
         return this.items.filter((item) => item.selected);
@@ -71,23 +88,48 @@ export class Select {
         this.selectedIndices = value;
         this.updateSelection();
     }
+    watchDropdownShow(show) {
+        if (show) {
+            this.arrowFocusController = new ArrowFocusController(this.visibleNonShadowItems, this.dropdownRef, this.focusControllerCallbackBind);
+            this.arrowFocusController.wrap = !this.editable;
+            this.itemObserver.observe(this.dropdownRef, {
+                childList: true,
+                subtree: true,
+            });
+        }
+        else {
+            this.arrowFocusController.disconnect();
+            this.arrowFocusController = undefined;
+            this.itemObserver.disconnect();
+        }
+    }
     onItemClicked(event) {
         const newId = event.detail;
         this.itemClick(newId);
     }
+    focusDropdownItem(index) {
+        var _a;
+        this.navigationItem = undefined;
+        if (index < this.visibleNonShadowItems.length) {
+            const nestedDropdownItem = (_a = this.visibleNonShadowItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('ix-dropdown-item');
+            requestAnimationFrame(() => {
+                nestedDropdownItem.shadowRoot.querySelector('button').focus();
+            });
+        }
+    }
     itemClick(newId) {
         this.value = this.toggleValue(newId);
         this.updateSelection();
         this.emitValueChange();
     }
     emitAddItem(value) {
-        if (value.trim() === '') {
+        if (value === undefined || value.trim() === '') {
             return;
         }
         const newItem = document.createElement('ix-select-item');
         newItem.value = value;
         newItem.label = value;
-        this.addItemRef.appendChild(newItem);
+        this.customItemsContainerRef.appendChild(newItem);
         this.clearInput();
         this.itemClick(value);
         this.addItem.emit(value);
@@ -125,10 +167,9 @@ export class Select {
                     : ''));
         });
         this.selectedLabels = this.selectedItems.map((item) => item.label);
-        if (this.isSingleMode) {
-            this.inputValue = ((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length)
-                ? this.selectedLabels[0]
-                : null;
+        if (this.isSingleMode && ((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length)) {
+            this.inputValue = this.selectedLabels[0];
+            this.inputRef && (this.inputRef.value = this.inputValue);
             return;
         }
         this.inputValue = null;
@@ -160,8 +201,8 @@ export class Select {
         this.updateSelection();
     }
     disconnectedCallback() {
-        if (this.labelMutationObserver) {
-            this.labelMutationObserver.disconnect();
+        if (this.itemMutationObserver) {
+            this.itemMutationObserver.disconnect();
         }
     }
     itemExists(item) {
@@ -169,7 +210,6 @@ export class Select {
     }
     dropdownVisibilityChanged(event) {
         this.dropdownShow = event.detail;
-        this.hasFocus = event.detail;
         if (event.detail) {
             this.inputRef.focus();
             this.inputRef.select();
@@ -178,11 +218,13 @@ export class Select {
         }
         else {
             this.navigationItem = undefined;
+            this.updateSelection();
+            this.inputFilterText = '';
         }
     }
     async onKeyDown(event) {
         if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
-            this.onArrowNavigation(event, event.code);
+            await this.onArrowNavigation(event, event.code);
         }
         if (!this.dropdownShow) {
             return;
@@ -195,38 +237,101 @@ export class Select {
         }
     }
     async onEnterNavigation() {
-        var _a, _b;
+        var _a;
         if (this.isMultipleMode) {
             return;
         }
+        let item;
         if (this.editable && !this.itemExists(this.inputFilterText)) {
             this.emitAddItem(this.inputFilterText);
-            this.navigationItem = this.items[this.items.length - 1];
+            item = this.items[this.items.length - 1];
         }
-        (_a = this.navigationItem) === null || _a === void 0 ? void 0 : _a.onItemClick();
-        await ((_b = this.dropdownRef) === null || _b === void 0 ? void 0 : _b.updatePosition());
+        if (item) {
+            item.onItemClick();
+        }
+        await ((_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.updatePosition());
         if (this.isSingleMode && !this.editable) {
             this.dropdownShow = false;
         }
     }
-    onArrowNavigation(event, key) {
+    async onArrowNavigation(event, key) {
+        if (event.defaultPrevented) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         this.dropdownShow = true;
-        const items = this.items.filter((i) => !i.classList.contains('d-none'));
-        if (this.navigationItem === undefined) {
-            this.applyFocusTo(items[0]);
+        if (!this.navigationItem && document.activeElement === this.hostElement) {
+            if (this.visibleItems.length) {
+                this.applyFocusTo(this.visibleItems.shift());
+            }
+            else if (this.isAddItemVisible()) {
+                this.focusAddItemButton();
+            }
+            return;
+        }
+        const moveUp = key === 'ArrowUp';
+        const indexNonShadow = this.visibleNonShadowItems.indexOf(document.activeElement);
+        // Slotted select items
+        if (indexNonShadow === 0) {
+            if (!this.visibleShadowItems.length && this.isAddItemVisible()) {
+                this.focusAddItemButton();
+            }
+            else {
+                this.applyFocusTo(this.visibleShadowItems.pop());
+            }
             return;
         }
-        let indexOfNavigationItem = items.findIndex((item) => item === this.navigationItem);
-        if (key === 'ArrowDown') {
-            indexOfNavigationItem++;
+        else if (indexNonShadow !== -1 &&
+            indexNonShadow === this.visibleNonShadowItems.length - 1) {
+            if (this.visibleShadowItems.length) {
+                this.applyFocusTo(this.visibleShadowItems.shift());
+            }
+            else if (this.isAddItemVisible()) {
+                this.focusAddItemButton();
+            }
+            return;
+        }
+        if (this.isAddItemVisible() &&
+            this.addItemRef.contains(await this.navigationItem.getDropdownItemElement())) {
+            if (moveUp) {
+                this.applyFocusTo(this.visibleItems.pop());
+            }
+            else {
+                if (this.visibleItems.length) {
+                    this.applyFocusTo(this.visibleItems.shift());
+                }
+            }
+            return;
+        }
+        // Custom select items
+        const indexShadow = this.visibleShadowItems.indexOf(this.navigationItem);
+        if (moveUp) {
+            if (indexShadow === 0) {
+                if (this.visibleNonShadowItems.length) {
+                    this.applyFocusTo(this.visibleNonShadowItems.pop());
+                }
+                else if (this.isAddItemVisible()) {
+                    this.focusAddItemButton();
+                }
+            }
+            else {
+                this.applyFocusTo(this.visibleShadowItems[indexShadow - 1]);
+            }
         }
         else {
-            indexOfNavigationItem--;
+            if (indexShadow === this.visibleShadowItems.length - 1) {
+                if (this.isAddItemVisible()) {
+                    this.focusAddItemButton();
+                }
+                else {
+                    this.applyFocusTo(this.visibleItems.shift());
+                }
+            }
+            else {
+                this.applyFocusTo(this.visibleShadowItems[indexShadow + 1]);
+            }
         }
-        const newFocusItem = items[indexOfNavigationItem];
-        this.applyFocusTo(newFocusItem);
     }
     applyFocusTo(element) {
         if (!element) {
@@ -240,6 +345,12 @@ export class Select {
                 .focus();
         });
     }
+    focusAddItemButton() {
+        if (this.addItemButton) {
+            this.addItemButton.shadowRoot.querySelector('button').focus();
+            this.navigationItem = this.addItemRef;
+        }
+    }
     filterItemsWithTypeahead() {
         this.inputFilterText = this.inputRef.value;
         if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {
@@ -256,6 +367,9 @@ export class Select {
         else {
             this.removeHiddenFromItems();
         }
+        if (this.arrowFocusController) {
+            this.arrowFocusController.items = this.visibleNonShadowItems;
+        }
         this.isDropdownEmpty = this.isEveryDropdownItemHidden;
     }
     removeHiddenFromItems() {
@@ -286,12 +400,15 @@ export class Select {
         }
     }
     placeholderValue() {
-        if (this.editable) {
-            return this.i18nPlaceholderEditable;
+        if (this.disabled) {
+            return '';
         }
         if (this.readonly) {
             return '';
         }
+        if (this.editable) {
+            return this.i18nPlaceholderEditable;
+        }
         return this.i18nPlaceholder;
     }
     isAddItemVisible() {
@@ -301,7 +418,7 @@ export class Select {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'c3436b72b89db710173be26ccc34d44eaef48096' }, h("div", { key: '19b6245bdbd79faa3d4bbf25a4d106e2084875d9', class: {
+        return (h(Host, { key: '7708ebeef204960e387864c06de4cf3d0d92620b' }, h("div", { key: '76ae70f1d3e1c3988a8db625b8c41626dcc0b28e', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -309,13 +426,13 @@ export class Select {
                 this.dropdownAnchor = ref;
                 if (!this.editable)
                     this.dropdownWrapperRef = ref;
-            } }, h("div", { key: '283b9918b77987f4a5c943eeba63679cb4cd979c', class: "input-container" }, h("div", { key: 'eb809d645c40ae085805d0ec3fcbbb48534cfb2c', class: "chips" }, this.isMultipleMode
+            } }, h("div", { key: '4cc234c24f76895f3dbc4a004c748352ef8aaa33', class: "input-container" }, h("div", { key: '066c71f9a1ead8f39685ea66fb1c83c6ad45f6a6', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', h("div", { key: 'e2faa64250d72d63afaf05139a0f6ed144097f69', class: "trigger" }, h("input", { key: '3aa2890f133b801bb14f8cc9d568cbee3eb83d13', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+            : '', h("div", { key: '513a21a42da236852e5baa0dd15246f6108fcb0e', class: "trigger" }, h("input", { key: '7e059a58466f1ef24af5465a31842dc373be681c', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onFocus: () => {
                 this.navigationItem = undefined;
@@ -327,21 +444,23 @@ export class Select {
             } })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: "chevron-down-small", ghost: true, ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef = ref;
-            } })))))), h("ix-dropdown", { key: '571d47a09fb16445a94a304e9fae4a1a592d078b', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            } })))))), h("ix-dropdown", { key: '90d7f4d393e170384c3849a81cc2d0f9cafdaba4', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'd-none': this.disabled || this.readonly,
             }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 return {
                     minWidth: `${this.hostElement.clientWidth}px`,
                 };
-            } }, h("div", { key: '2751511a275b502709f59e600eb494cf33085d80', class: {
+            } }, h("div", { key: '5ca9e64a4bd8b566e33717f2d2bac21f86638aeb', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", { key: '8f894985df712df0f0b0d4527ee7b136d2c84a60' }), h("div", { key: '4edce84e19a13a67defc8de67ca1e23fb7319be7', ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
+            }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", { key: 'c2b10c1b09dd64eb0ab0a6bc51d43f98e876031a' }), h("div", { key: 'a7076d2f894af20584a45109b397b0362ea6f6a5', ref: (ref) => (this.customItemsContainerRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.emitAddItem(this.inputFilterText);
+            }, onFocus: () => (this.navigationItem = this.addItemRef), ref: (ref) => {
+                this.addItemRef = ref;
             } })) : null, this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
     }
     static get is() { return "ix-select"; }
@@ -593,7 +712,6 @@ export class Select {
             "dropdownWrapperRef": {},
             "dropdownAnchor": {},
             "isDropdownEmpty": {},
-            "hasFocus": {},
             "navigationItem": {},
             "inputFilterText": {},
             "inputValue": {}
@@ -679,6 +797,9 @@ export class Select {
             }, {
                 "propName": "value",
                 "methodName": "watchValue"
+            }, {
+                "propName": "dropdownShow",
+                "methodName": "watchDropdownShow"
             }];
     }
     static get listeners() {