@siemens/ix 1.2.0 → 1.3.0-beta.0

package/dist/collection/components/menu/menu.css

@@ -94,7 +94,7 @@ ix-menu .menu-overlay {
   -webkit-backdrop-filter: blur(1rem);
           backdrop-filter: blur(1rem);
   background-color: var(--theme-sidebar-overlay-blur);
-  transition: all 150ms ease-out;
+  transition: all 300ms ease-out;
 }
 ix-menu .menu-overlay-invisible {
   display: none;

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

@@ -7,9 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host, } from '@stencil/core';
-import { Popover } from '../utils/popover.util';
 import { convertToRemString } from '../utils/rwd.util';
-import { toggleVariant } from '../utils/toggle-theme';
+import { themeSwitcher } from '../utils/theme-switcher';
 export class Menu {
   constructor() {
     this.domObserver = new MutationObserver(this.onDomChange.bind(this));
@@ -131,10 +130,6 @@ export class Menu {
   }
   componentDidLoad() {
     var _a, _b, _c, _d;
-    const anchor = this.hostElement.querySelector('#more-tab');
-    this.popoverListener = new Popover(anchor, this.moreItemsDropdown, () => {
-      this.showMoreItems = false;
-    });
     (_a = this.settings) === null || _a === void 0 ? void 0 : _a.addEventListener('close', () => {
       this.showSettings = false;
       this.settings.show = this.showSettings;
@@ -163,10 +158,7 @@ export class Menu {
       subtree: true,
     });
   }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popoverListener) === null || _a === void 0 ? void 0 : _a.destroy();
-  }
+  disconnectedCallback() { }
   componentWillRender() {
     this.appendTabs();
   }
@@ -329,13 +321,6 @@ export class Menu {
     }
     return Math.min(visibleCount - 2, this.maxVisibleMenuItems);
   }
-  toggleShowMoreDropdown() {
-    if (this.moreItemsDropdown.querySelectorAll('.appended').length === 0) {
-      return;
-    }
-    this.popoverListener.open();
-    this.showMoreItems = !this.showMoreItems;
-  }
   /**
    * Toggle map sidebar expand
    * @param show
@@ -451,7 +436,7 @@ export class Menu {
   isMenuItemClicked(event) {
     const path = event.composedPath();
     const menuItems = path
-      .filter((element) => element.id !== 'more-tab')
+      .filter((element) => element.id !== 'ix-menu-more-tab')
       .filter((element) => {
       return element.tagName === 'IX-MENU-ITEM';
     });
@@ -474,11 +459,11 @@ export class Menu {
         if (this.isMenuItemClicked(event)) {
           this.resetOverlay();
         }
-      } }, h("div", { class: "tabs-top" }), h("slot", null), h("div", { class: "active-more-tab" }, this.activeTab ? (h("ix-menu-item", { class: "internal-tab", active: true, tabIcon: this.activeTab.tabIcon }, this.activeTab.innerText)) : null), h("ix-menu-item", { id: "more-tab", tabIcon: "more-menu", class: {
+      } }, h("div", { class: "tabs-top" }), h("slot", null), h("div", { class: "active-more-tab" }, this.activeTab ? (h("ix-menu-item", { class: "internal-tab", active: true, tabIcon: this.activeTab.tabIcon }, this.activeTab.innerText)) : null), h("ix-menu-item", { id: "ix-menu-more-tab", tabIcon: "more-menu", class: {
         'internal-tab': true,
       }, style: {
         display: this.showMoreButton() ? 'block' : 'none',
-      }, title: "Show more", notifications: this.countMoreNotifications, onClick: () => this.toggleShowMoreDropdown() }, this.i18nMore, h("ix-dropdown", { show: this.showMoreItems }, this.menuItems
+      }, title: "Show more", notifications: this.countMoreNotifications }, this.i18nMore, h("ix-dropdown", { trigger: 'ix-menu-more-tab', positioningStrategy: 'fixed', placement: 'right-start' }, this.menuItems
       .filter((elm, index) => !this.showTab(index) &&
       !this.isMenuItemActive(elm) &&
       this.isVisible(elm))
@@ -492,7 +477,7 @@ export class Menu {
         'internal-tab': true,
         'bottom-tab': true,
         active: this.showAbout,
-      }, tabIcon: "info", onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (h("ix-menu-item", { id: "toggleTheme", onClick: () => toggleVariant(), class: "internal-tab bottom-tab", tabIcon: "bulb" }, this.i18nToggleTheme)) : null, this.enableMapExpand ? (h("ix-menu-item", { id: "menu-collapse", onClick: () => this.mapExpandChange.emit(this.mapExpand), class: "internal-tab bottom-tab", tabIcon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), h("div", { class: {
+      }, tabIcon: "info", onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (h("ix-menu-item", { id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", tabIcon: "bulb" }, this.i18nToggleTheme)) : null, this.enableMapExpand ? (h("ix-menu-item", { id: "menu-collapse", onClick: () => this.mapExpandChange.emit(this.mapExpand), class: "internal-tab bottom-tab", tabIcon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), h("div", { class: {
         'menu-overlay': true,
         expanded: this.expand,
         'd-block': this.showAbout || this.showSettings,

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

@@ -7,29 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host, } from '@stencil/core';
-import { Popover } from '../utils/popover.util';
 export class MenuAvatar {
   constructor() {
-    this.displayMenu = undefined;
+    this.avatarElementId = 'ix-menu-avatar-id';
     this.top = undefined;
     this.bottom = undefined;
     this.i18nLogout = 'Logout';
   }
-  toggleMenu() {
-    this.outsideListener.open();
-    this.displayMenu = !this.displayMenu;
-  }
-  componentDidLoad() {
-    this.outsideListener = new Popover(this.hostElement, this.hostElement.querySelector('ix-dropdown'), () => {
-      this.displayMenu = false;
-    });
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.outsideListener) === null || _a === void 0 ? void 0 : _a.destroy();
-  }
   render() {
-    return (h(Host, null, h("li", { class: "nav-item top-item avatar no-hover", title: this.top }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n                    16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }), h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n                  6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n                  9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n                  6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" }))), h("div", { class: "avatar-name" }, h("span", { class: "text-default-single", title: this.top }, this.top), h("span", { class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { show: this.displayMenu }, h("slot", null), h("ix-menu-avatar-item", { label: this.i18nLogout, icon: "log-out", onClick: (e) => {
+    return (h(Host, null, h("li", { class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n                    16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }), h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n                  6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n                  9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n                  6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" }))), h("div", { class: "avatar-name" }, h("span", { class: "text-default-single", title: this.top }, this.top), h("span", { class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { trigger: this.avatarElementId, placement: 'right-start', offset: {
+        mainAxis: 12,
+      } }, h("slot", null), h("ix-menu-avatar-item", { label: this.i18nLogout, icon: "log-out", onClick: (e) => {
         this.logoutClick.emit(e);
       } }))));
   }
@@ -101,11 +89,6 @@ export class MenuAvatar {
       }
     };
   }
-  static get states() {
-    return {
-      "displayMenu": {}
-    };
-  }
   static get events() {
     return [{
         "method": "logoutClick",
@@ -125,13 +108,4 @@ export class MenuAvatar {
       }];
   }
   static get elementRef() { return "hostElement"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "toggleMenu",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }];
-  }
 }

package/dist/collection/components/modal/modal.css

@@ -55,6 +55,7 @@
   background-color: var(--theme-modal--background);
   border: var(--modal--border-thickness) solid var(--theme-modal--border-color);
   padding: 1.5rem;
+  max-height: 100vh;
 }
 :host .modal .modal-content .state-icon-container {
   -webkit-margin-end: 1rem;

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

@@ -66,9 +66,15 @@ export class Modal {
       },
     });
   }
+  onBackdropClick(event) {
+    const target = event.target;
+    if (target.classList.contains('backdrop')) {
+      this.dismiss(event);
+    }
+  }
   componentDidLoad() {
     if (this.backdrop === 'static') {
-      this.modalBackdrop.addEventListener('click', this.dismiss.bind(this));
+      this.modalBackdrop.addEventListener('click', (event) => this.onBackdropClick(event));
     }
     if (this.backdropClass) {
       this.modalBackdrop.classList.add(this.backdropClass);

package/dist/collection/components/pill/pill.css

@@ -36,6 +36,8 @@
  */
 :host {
   display: inline-flex;
+  width: -moz-fit-content;
+  width: fit-content;
   position: relative;
   align-items: center;
   justify-content: center;
@@ -262,8 +264,16 @@
 :host[variant=success].outline.active, :host[variant=success].outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
+:host[variant=custom].outline {
+  border: solid 1px transparent;
+  background-color: transparent;
+}
 :host .slot {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+:host .hidden {
+  width: 0px;
+  margin-right: 0px;
 }

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

@@ -25,7 +25,10 @@ export class Pill {
           color: this.color,
           backgroundColor: this.background,
         }
-        : {}, title: this.el.textContent }, this.icon ? (h("ix-icon", { class: 'with-icon', name: this.icon, size: '16' })) : null, h("div", { class: "slot" }, h("slot", null))));
+        : {}, title: this.el.textContent }, h("ix-icon", { class: {
+        'with-icon': true,
+        hidden: this.icon === undefined || this.icon === '',
+      }, name: this.icon, size: '16' }), h("div", { class: "slot" }, h("slot", null))));
   }
   static get is() { return "ix-pill"; }
   static get encapsulation() { return "scoped"; }

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

@@ -163,7 +163,4 @@
   height: 2rem;
   color: var(--theme-select-list-item-hint--color);
   margin: 0 0.5rem 0 2rem;
-}
-:host ix-dropdown {
-  background-color: var(--theme-select-list--background);
 }

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

@@ -112,17 +112,12 @@ export class Select {
         : [this.selectedIndices]);
     }
   }
-  componentDidLoad() {
-    this.labelMutationObserver = new MutationObserver(() => {
-      this.selectValue(Array.isArray(this.selectedIndices)
-        ? this.selectedIndices
-        : [this.selectedIndices]);
-    });
-    this.labelMutationObserver.observe(this.hostElement, {
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['label'],
-    });
+  onLabelChange(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    this.selectValue(Array.isArray(this.selectedIndices)
+      ? this.selectedIndices
+      : [this.selectedIndices]);
   }
   disconnectedCallback() {
     if (this.labelMutationObserver) {
@@ -259,7 +254,7 @@ export class Select {
         'd-none': this.disabled ||
           this.readonly ||
           (this.isDropdownEmpty && !this.editable),
-      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true }, h("div", { class: "select-list-header", title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputFilterText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
+      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", positioningStrategy: 'absolute' }, h("div", { class: "select-list-header", title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputFilterText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
         'add-item': true,
         'd-none': !(this.editable && this.inputFilterText),
       }, label: this.inputFilterText, onItemClick: (e) => {
@@ -509,6 +504,12 @@ export class Select {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "ix-select-item:labelChange",
+        "method": "onLabelChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }, {
         "name": "keydown",
         "method": "onKeyDown",

package/dist/collection/components/select-item/events.js

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export class IxSelectItemLabelChangeEvent extends CustomEvent {
+  constructor(detail) {
+    super('ix-select-item:labelChange', {
+      bubbles: true,
+      detail,
+    });
+  }
+}

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

@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host, } from '@stencil/core';
+import { IxSelectItemLabelChangeEvent } from './events';
 export class SelectItem {
   constructor() {
     this.label = undefined;
@@ -15,7 +16,7 @@ export class SelectItem {
     this.hover = false;
   }
   /**
-   * Internal
+   * @internal
    * @param event
    */
   async onItemClick(event) {
@@ -28,6 +29,12 @@ export class SelectItem {
       throw Error('ix-select-item must have a `value` property');
     }
   }
+  labelChange(newValue, oldValue) {
+    this.hostElement.dispatchEvent(new IxSelectItemLabelChangeEvent({
+      newValue: newValue,
+      oldValue: oldValue,
+    }));
+  }
   render() {
     return (h(Host, null, h("ix-dropdown-item", { checked: this.selected, hover: this.hover, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
   }
@@ -108,8 +115,11 @@ export class SelectItem {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "***Internal***"
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
         },
         "attribute": "hover",
         "reflect": false,
@@ -161,8 +171,11 @@ export class SelectItem {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Internal",
+          "text": "",
           "tags": [{
+              "name": "internal",
+              "text": undefined
+            }, {
               "name": "param",
               "text": "event"
             }]
@@ -171,4 +184,10 @@ export class SelectItem {
     };
   }
   static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "label",
+        "methodName": "labelChange"
+      }];
+  }
 }

package/dist/collection/components/split-button/split-button.js

@@ -6,7 +6,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { createPopper, } from '@popperjs/core';
 import { h, Host, } from '@stencil/core';
 import { getButtonClasses } from '../button/base-button';
 export class SplitButton {
@@ -25,46 +24,18 @@ export class SplitButton {
   get splitItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-split-button-item'));
   }
-  clickOutside(e) {
-    if (!this.hostElement.contains(e.target)) {
-      this.toggle = false;
+  linkTriggerRef() {
+    if (this.triggerElement && this.dropdownElement) {
+      this.dropdownElement.trigger = this.triggerElement;
     }
   }
   componentDidLoad() {
-    const element = this.hostElement.querySelector('.anchor');
-    this.popover = this.hostElement.querySelector('ix-dropdown');
-    this.popperInstance = createPopper(element, this.popover, {
-      strategy: 'fixed',
-      placement: this.placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 0],
-          },
-        },
-        {
-          name: 'flip',
-          options: {
-            padding: 8,
-          },
-        },
-      ],
-    });
-    window.addEventListener('click', this.clickOutside.bind(this));
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-    window.removeEventListener('click', this.clickOutside.bind(this));
-  }
-  toggleDropdown() {
-    this.toggle = !this.toggle;
+    this.linkTriggerRef();
   }
   render() {
-    return (h(Host, { class: "btn-group" }, h("button", { class: getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, !this.label, false, false, this.disabled), onClick: (e) => this.buttonClick.emit(e) }, this.icon ? h("ix-icon", { name: this.icon }) : null, " ", this.label), h("button", { class: Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, false, false, this.disabled)), {
+    return (h(Host, { class: "btn-group" }, h("button", { class: getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, !this.label, false, false, this.disabled), onClick: (e) => this.buttonClick.emit(e) }, this.icon ? h("ix-icon", { name: this.icon }) : null, " ", this.label), h("button", { ref: (r) => (this.triggerElement = r), class: Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, false, false, this.disabled)), {
         anchor: true,
-      }), onClick: () => this.toggleDropdown() }, h("ix-icon", { name: this.splitIcon }), h("ix-dropdown", { show: this.toggle }, h("slot", null)))));
+      }) }, h("ix-icon", { name: this.splitIcon }), h("ix-dropdown", { ref: (r) => (this.dropdownElement = r) }, h("slot", null)))));
   }
   static get is() { return "ix-split-button"; }
   static get encapsulation() { return "scoped"; }
@@ -240,7 +211,7 @@ export class SplitButton {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@popperjs/core"
+              "path": "../dropdown/placement"
             }
           }
         },

package/dist/collection/components/tree/tree.js

@@ -198,7 +198,7 @@ export class Tree {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Tree modal"
+          "text": "Tree model"
         }
       },
       "renderItem": {

package/dist/collection/components/utils/theme-switcher.js

@@ -0,0 +1,86 @@
+import { TypedEvent } from './typed-event';
+export class ThemeSwitcher {
+  constructor() {
+    this.prefixTheme = 'theme-';
+    this.suffixLight = '-light';
+    this.suffixDark = '-dark';
+    this.defaultTheme = 'theme-classic-dark';
+    this._themeChanged = new TypedEvent();
+    this.registerMutationObserver();
+  }
+  get themeChanged() {
+    return this._themeChanged;
+  }
+  hasVariantSuffix(className) {
+    return (className.endsWith(this.suffixDark) ||
+      className.endsWith(this.suffixLight));
+  }
+  isThemeClass(className) {
+    return (className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className));
+  }
+  setTheme(themeName) {
+    if (!this.isThemeClass(themeName)) {
+      throw Error(`Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`);
+    }
+    const oldThemes = [];
+    document.body.classList.forEach((className) => {
+      if (this.isThemeClass(className)) {
+        oldThemes.push(className);
+      }
+    });
+    document.body.classList.remove(...oldThemes);
+    document.body.classList.add(themeName);
+  }
+  toggleMode() {
+    const oldThemes = [];
+    document.body.classList.forEach((className) => {
+      if (this.isThemeClass(className)) {
+        oldThemes.push(className);
+      }
+    });
+    if (oldThemes.length === 0) {
+      document.body.classList.add(this.getOppositeMode(this.defaultTheme));
+      return;
+    }
+    oldThemes.forEach((themeName) => {
+      document.body.classList.replace(themeName, this.getOppositeMode(themeName));
+    });
+  }
+  getOppositeMode(themeName) {
+    if (themeName.endsWith(this.suffixDark)) {
+      return themeName.replace(/-dark$/g, this.suffixLight);
+    }
+    if (themeName.endsWith(this.suffixLight)) {
+      return themeName.replace(/-light$/g, this.suffixDark);
+    }
+  }
+  handleMutations(mutations) {
+    return mutations.forEach((mutation) => {
+      const { target } = mutation;
+      target.classList.forEach((className) => {
+        var _a;
+        if (this.isThemeClass(className) &&
+          !((_a = mutation.oldValue) === null || _a === void 0 ? void 0 : _a.includes(className))) {
+          this._themeChanged.emit(className);
+        }
+      });
+    });
+  }
+  registerMutationObserver() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    if (!('MutationOberver' in window)) {
+      console.warn('ThemeSwitcher not supported by your browser. Missing MutationObserver API');
+      return;
+    }
+    this.mutationObserver = new MutationObserver((mutations) => {
+      this.handleMutations(mutations);
+    });
+    this.mutationObserver.observe(document.body, {
+      attributeFilter: ['class'],
+      attributeOldValue: true,
+    });
+  }
+}
+export const themeSwitcher = new ThemeSwitcher();

package/dist/collection/components/validation-tooltip/validation-tooltip.css

@@ -179,7 +179,8 @@ a {
 }
 
 :host {
-  display: block;
+  display: inline-block;
+  position: relative;
 }
 :host .validation-tooltip {
   background-color: var(--theme-tootlip--background);
@@ -206,31 +207,10 @@ a {
   transform: rotate(45deg);
   background-color: var(--theme-tootlip--background);
 }
-:host .validation-tooltip[data-popper-placement^=top] > #arrow {
+:host .validation-tooltip > #arrow {
   bottom: -5px;
 }
-:host .validation-tooltip[data-popper-placement^=top] > #arrow::before {
+:host .validation-tooltip > #arrow::before {
   border-right: 1px solid var(--theme-tooltip--border-color);
   border-bottom: 1px solid var(--theme-tooltip--border-color);
-}
-:host .validation-tooltip[data-popper-placement^=bottom] > #arrow {
-  top: -5px;
-}
-:host .validation-tooltip[data-popper-placement^=bottom] > #arrow::before {
-  border-left: 1px solid var(--theme-tooltip--border-color);
-  border-top: 1px solid var(--theme-tooltip--border-color);
-}
-:host .validation-tooltip[data-popper-placement^=left] > #arrow {
-  right: -5px;
-}
-:host .validation-tooltip[data-popper-placement^=left] > #arrow::before {
-  border-right: 1px solid var(--theme-tooltip--border-color);
-  border-top: 1px solid var(--theme-tooltip--border-color);
-}
-:host .validation-tooltip[data-popper-placement^=right] > #arrow {
-  left: -5px;
-}
-:host .validation-tooltip[data-popper-placement^=right] > #arrow::before {
-  border-left: 1px solid var(--theme-tooltip--border-color);
-  border-bottom: 1px solid var(--theme-tooltip--border-color);
 }